# 🧮 Soroban Templates - Live Browser Demo

Real-time SVG generation with viewport cropping using Typst.ts in your browser

This demonstrates the EXACT same functionality as the template package examples

## 🎛️ Interactive Generation

Generate SVGs in real-time and see viewport cropping in action

### Configuration

Number:
Bead Shape:
Color Scheme:
Scale:

## 📏 Viewport Cropping Test

Different canvas sizes should produce identical visual output after processing

This will generate the same number (123) with different canvas sizes. If viewport cropping works, all outputs should look identical despite different initial dimensions.

## 🔧 How It Works

Technical details about the browser-side generation and processing

1. Browser-side Typst Compilation: Uses `@myriaddreamin/typst-all-in-one.ts` WASM module to compile Typst templates directly in your browser.

2. Template Loading: Fetches the official `flashcards.typ` template from the `@soroban/templates` package via API.

3. Crop Mark Generation: Template generates invisible crop marks as linked elements (`crop-mark://left`, etc.).

4. SVG Post-Processing: Uses the official SVG processor to detect crop marks and optimize the viewBox for minimal whitespace.

5. Bead Annotations: Adds interactive data attributes to each bead element for hover effects and click handling.

🎯 Key Test: If viewport cropping is working correctly, SVGs generated with different canvas sizes (100x120pt vs 500x600pt) should look identical after processing, proving that the processor successfully detected crop marks and optimized the viewBox.