diff --git a/packages/templates/gallery-unified.html b/packages/templates/gallery-unified.html index d5891fa4..12c75fd5 100644 --- a/packages/templates/gallery-unified.html +++ b/packages/templates/gallery-unified.html @@ -1,9195 +1,2723 @@ - + - - - + + + 🧮 Soroban Templates - Complete Gallery - - + +
-
-

🧮 Soroban Templates - Complete Gallery

-

- Comprehensive showcase of template renderings, crop marks, and - automated viewBox processing -

-

- Generated from actual Typst templates using - @soroban/templates -

-
- -
-
- 13 examples rendered • Generated on 12/7/2025 at - 2:40:16 AM -
-
- -
-
- - - +
+

🧮 Soroban Templates - Complete Gallery

+

Comprehensive showcase of template renderings, crop marks, and automated viewBox processing

+

+ Generated from actual Typst templates using @soroban/templates +

-
-

- 📚 Basic Template Examples -

-

- Core soroban representations showcasing different configurations, - bead shapes, and color schemes. -

-
-
-
-
Basic Number 5
-
- Simple representation of 5 with monochrome diamonds -
-
- Number: 5
- bead_shape: diamond
color_scheme: - monochrome
base_size: - 1.5 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+
+ 13 examples rendered + • Generated on 12/14/2025 at 2:41:33 AM
- -
-
-
Colorful 123
-
- Number 123 with place-value colors and diamond beads -
-
- Number: 123
- bead_shape: diamond
color_scheme: - place-value
base_size: - 1.2 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
Circle Beads - 42
-
- Number 42 with circular beads and heaven-earth colors -
-
- Number: 42
- bead_shape: circle
color_scheme: - heaven-earth
base_size: - 1.8 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
Large Scale - 7
-
- Single digit with maximum scale for detail work -
-
- Number: 7
- bead_shape: diamond
color_scheme: - place-value
base_size: - 2.5 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
Compact 999
-
- Large number with hidden inactive beads for clean look -
-
- Number: 999
- bead_shape: square
color_scheme: - alternating
hide_inactive: - true
base_size: - 1 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
Educational 1234
-
- Four-digit number showing empty columns for learning -
-
- Number: 1234
- bead_shape: circle
color_scheme: - place-value
show_empty: - true
base_size: - 1.3 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-

- ✂️ Crop Marks & ViewBox Processing -

-

- Examples demonstrating automatic crop mark placement and viewBox - optimization. Each example shows before/after comparison with size - reduction statistics. -

-
-
-
-
Crop Marks: Single Digit
-
- Invisible crop marks for automated viewBox processing -
-
- Number: 1
- bead_shape: diamond
color_scheme: - monochrome
show_crop_marks: - true
crop_margin: - 10pt
base_size: - 1 -
-
-
-
-
🎯 Before: Original ViewBox
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
viewBox="0 0 216 166"
-
-
-
✂️ After: Crop Mark Processed
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
viewBox="0 0 0 0"
-
-
-
- Size Reduction: 100% -
+
+
+ + +
-
-
-
Crop Marks: Four 9s
-
- Large four-digit number with crop boundaries -
-
- Number: 9999
- bead_shape: diamond
color_scheme: - place-value
show_crop_marks: - true
crop_margin: - 15pt
base_size: - 0.8 -
-
-
-
-
🎯 Before: Original ViewBox
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+

📚 Basic Template Examples

+

Core soroban representations showcasing different configurations, bead shapes, and color schemes.

+
+ +
+
+
Basic Number 5
+
Simple representation of 5 with monochrome diamonds
+
+ Number: 5
+ bead_shape: diamond
color_scheme: monochrome
base_size: 1.5 +
+
+
+ + + + + + + + + + + - - - -
-
viewBox="0 0 276 170"
-
-
-
✂️ After: Crop Mark Processed
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - -
-
viewBox="0 0 0 0"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
Colorful 123
+
Number 123 with place-value colors and diamond beads
+
+ Number: 123
+ bead_shape: diamond
color_scheme: place-value
base_size: 1.2 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
Circle Beads - 42
+
Number 42 with circular beads and heaven-earth colors
+
+ Number: 42
+ bead_shape: circle
color_scheme: heaven-earth
base_size: 1.8 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
Large Scale - 7
+
Single digit with maximum scale for detail work
+
+ Number: 7
+ bead_shape: diamond
color_scheme: place-value
base_size: 2.5 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
Compact 999
+
Large number with hidden inactive beads for clean look
+
+ Number: 999
+ bead_shape: square
color_scheme: alternating
hide_inactive: true
base_size: 1 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
Educational 1234
+
Four-digit number showing empty columns for learning
+
+ Number: 1234
+ bead_shape: circle
color_scheme: place-value
show_empty: true
base_size: 1.3 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
-
-
- Size Reduction: 100% -
-
-
-
Crop Marks: Large Zero
-
- Zero representation with large scale and crop marks -
-
- Number: 0
- bead_shape: square
color_scheme: - monochrome
show_crop_marks: - true
crop_margin: - 20pt
base_size: - 2 -
-
-
-
-
🎯 Before: Original ViewBox
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+

✂️ Crop Marks & ViewBox Processing

+

Examples demonstrating automatic crop mark placement and viewBox optimization. Each example shows before/after comparison with size reduction statistics.

+
+ +
+
+
Crop Marks: Single Digit
+
Invisible crop marks for automated viewBox processing
+
+ Number: 1
+ bead_shape: diamond
color_scheme: monochrome
show_crop_marks: true
crop_margin: 10pt
base_size: 1 +
+
+
+
+
🎯 Before: Original ViewBox
+
+ + + + + + + + + + - - - -
-
viewBox="0 0 240 280"
-
-
-
✂️ After: Crop Mark Processed
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - -
-
viewBox="0 0 0 0"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 216 166"
+
+
+
✂️ After: Crop Mark Processed
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 0 0"
+
+
+
+ Size Reduction: 100% +
+
+ + +
+
+
Crop Marks: Four 9s
+
Large four-digit number with crop boundaries
+
+ Number: 9999
+ bead_shape: diamond
color_scheme: place-value
show_crop_marks: true
crop_margin: 15pt
base_size: 0.8 +
+
+
+
+
🎯 Before: Original ViewBox
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 276 170"
+
+
+
✂️ After: Crop Mark Processed
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 0 0"
+
+
+
+ Size Reduction: 100% +
+
+ + +
+
+
Crop Marks: Large Zero
+
Zero representation with large scale and crop marks
+
+ Number: 0
+ bead_shape: square
color_scheme: monochrome
show_crop_marks: true
crop_margin: 20pt
base_size: 2 +
+
+
+
+
🎯 Before: Original ViewBox
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 240 280"
+
+
+
✂️ After: Crop Mark Processed
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 0 0"
+
+
+
+ Size Reduction: 100% +
+
+ + +
+
+
Crop Marks: Hidden Inactive
+
Clean layout with hidden inactive beads and crop marks
+
+ Number: 555
+ bead_shape: diamond
color_scheme: alternating
hide_inactive: true
show_crop_marks: true
crop_margin: 10pt
base_size: 1.5 +
+
+
+
+
🎯 Before: Original ViewBox
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 366 198"
+
+
+
✂️ After: Crop Mark Processed
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 0 0"
+
+
+
+ Size Reduction: 100% +
+
+ + +
+
+
Crop Marks: Mixed Geometry
+
Circle beads with heaven-earth colors and crop boundaries
+
+ Number: 321
+ bead_shape: circle
color_scheme: heaven-earth
show_crop_marks: true
crop_margin: 12pt
base_size: 1.3 +
+
+
+
+
🎯 Before: Original ViewBox
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 274 160"
+
+
+
✂️ After: Crop Mark Processed
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
viewBox="0 0 0 0"
+
+
+
+ Size Reduction: 100% +
+
+
-
-
- Size Reduction: 100% -
-
-
-
Crop Marks: Hidden Inactive
-
- Clean layout with hidden inactive beads and crop marks -
-
- Number: 555
- bead_shape: diamond
color_scheme: - alternating
hide_inactive: - true
show_crop_marks: - true
crop_margin: - 10pt
base_size: - 1.5 -
-
-
-
-
🎯 Before: Original ViewBox
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+

🔧 Debug & Development Tools

+

Debug examples with visible crop marks for development and testing purposes.

+
+ +
+
+
Debug: Crop Marks - 89
+
Visible red crop marks showing viewBox boundaries
+
+ Number: 89
+ bead_shape: diamond
color_scheme: place-value
show_crop_marks: true
crop_margin: 15pt
base_size: 1.5 +
+
+
+ + + + + + + + + + + - - - -
-
viewBox="0 0 366 198"
-
-
-
✂️ After: Crop Mark Processed
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - -
-
viewBox="0 0 0 0"
-
-
-
- Size Reduction: 100% -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
-
Crop Marks: Mixed Geometry
-
- Circle beads with heaven-earth colors and crop boundaries +
-
- Number: 321
- bead_shape: circle
color_scheme: - heaven-earth
show_crop_marks: - true
crop_margin: - 12pt
base_size: - 1.3 -
-
-
-
-
🎯 Before: Original ViewBox
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+
+
Debug: Crop Marks - 456
+
Three-digit number with visible crop boundaries
+
+ Number: 456
+ bead_shape: circle
color_scheme: heaven-earth
show_crop_marks: true
crop_margin: 12pt
base_size: 1.2 +
+
+
+ + + + + + + + + + + - - - -
-
viewBox="0 0 274 160"
-
-
-
✂️ After: Crop Mark Processed
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - -
-
viewBox="0 0 0 0"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
-
-
- Size Reduction: 100% -
-
-
-

- 🔧 Debug & Development Tools -

-

- Debug examples with visible crop marks for development and testing - purposes. -

-
-
-
-
Debug: Crop Marks - 89
-
- Visible red crop marks showing viewBox boundaries -
-
- Number: 89
- bead_shape: diamond
color_scheme: - place-value
show_crop_marks: - true
crop_margin: - 15pt
base_size: - 1.5 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
Debug: Crop Marks - 456
-
- Three-digit number with visible crop boundaries -
-
- Number: 456
- bead_shape: circle
color_scheme: - heaven-earth
show_crop_marks: - true
crop_margin: - 12pt
base_size: - 1.2 -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
+
+

🛠️ How to Use This Gallery

+

Basic Examples: Standard soroban representations for learning and reference

+

Crop Marks: Automated viewBox processing examples with before/after comparisons

+

Debug Tools: Development examples with visible crop boundaries

+

+ Built with ❤️ using flashcards.typ templates and Typst CLI +

-
- -
-

🛠️ How to Use This Gallery

-

- Basic Examples: Standard soroban representations for - learning and reference -

-

- Crop Marks: Automated viewBox processing examples - with before/after comparisons -

-

- Debug Tools: Development examples with visible crop - boundaries -

-

- Built with ❤️ using flashcards.typ templates and Typst - CLI -

-
- - + + \ No newline at end of file