From 08c6a419e25d220560eba13d6db437145e6e61b8 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 3 Nov 2025 19:24:57 -0600
Subject: [PATCH] fix(web): use AbacusStatic for calendar SVG generation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Switch from AbacusReact to AbacusStatic in generateCalendarAbacus.tsx
- Fixes "failed to parse SVG (missing root node)" Typst error
- AbacusReact can't be rendered server-side with renderToStaticMarkup
- AbacusStatic is designed for pure server-side rendering

Root cause: AbacusReact has "use client" directive and uses hooks,
which causes renderToStaticMarkup to generate invalid/empty SVG.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/scripts/generateCalendarAbacus.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/web/scripts/generateCalendarAbacus.tsx b/apps/web/scripts/generateCalendarAbacus.tsx
index 5f8c187e..937e3095 100644
--- a/apps/web/scripts/generateCalendarAbacus.tsx
+++ b/apps/web/scripts/generateCalendarAbacus.tsx
@@ -5,12 +5,12 @@
  * Usage: npx tsx scripts/generateCalendarAbacus.tsx <value> <columns>
  * Example: npx tsx scripts/generateCalendarAbacus.tsx 15 2
  *
- * Pattern copied directly from working generateDayIcon.tsx
+ * Uses AbacusStatic for server-side rendering (no client hooks)
  */
 
 import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { AbacusReact } from '@soroban/abacus-react'
+import { AbacusStatic } from '@soroban/abacus-react/static'
 
 const value = parseInt(process.argv[2], 10)
 const columns = parseInt(process.argv[3], 10)
@@ -20,15 +20,14 @@ if (isNaN(value) || isNaN(columns)) {
   process.exit(1)
 }
 
-// Use exact same pattern as generateDayIcon - inline customStyles
+// Use AbacusStatic - pure server-side rendering, no client hooks
 const abacusMarkup = renderToStaticMarkup(
-  <AbacusReact
+  <AbacusStatic
     value={value}
     columns={columns}
     scaleFactor={1}
-    animated={false}
-    interactive={false}
     showNumbers={false}
+    frameVisible={true}
   />
 )