@xrn07/figure-renderer 0.2.0 → 0.2.2

package/README.md

@@ -2,18 +2,26 @@
 
 Zero-dependency pure TypeScript figure renderer - pure SVG string generation.
 
+> **✨ Version 0.2.2 - Truly Generic Figure Renderer**
+> Now supports ANY figure type without errors - physics, chemistry, math, biology, and more. No more "unknown figure type" errors!
+>
+> **✨ Version 0.2.1 - Enhanced API Format Support**
+> Real-world API responses with flexible parsing, numeric magnitudes, and automatic field normalization.
+>
 > **⚠️ Version 0.2.0 Breaking Change**
-> This version introduces a new flexible DSL format. See [MIGRATION_V0.2.0.md](MIGRATION_V0.2.0.md) for details.
+> New flexible DSL format. See [MIGRATION_V0.2.0.md](MIGRATION_V0.2.0.md) for details.
 
 ## Features
 
 - ✅ **Zero runtime dependencies** - Only ~8KB minified
 - ✅ **Universal** - Works in Node.js, browser, Next.js SSR, PDF export
 - ✅ **Type-safe** - Full TypeScript support
-- ✅ **Flexible** - Generic type system supports any figure type
+- ✅ **Truly Generic** - Works with ANY figure type (physics, chemistry, math, biology, etc.)
+- ✅ **No Errors** - Renders placeholder SVG for unknown types instead of crashing
 - ✅ **Testable** - SVG strings are easily snapshot-able
 - ✅ **Accessible** - React component with proper ARIA labels
 - ✅ **International** - Localization support via `alt` field
+- ✅ **API-friendly** - Handles both JSON strings and objects, numeric or string magnitudes
 
 ## Installation
 
@@ -39,10 +47,35 @@ console.log(svg); // <svg>...</svg>
 import { FigureView } from "@xrn07/figure-renderer/react";
 import { parseFigureDSL } from "@xrn07/figure-renderer";
 
+// Parse DSL from API response (can be JSON string or object)
 const dsl = parseFigureDSL(question.figure_dsl);
 return <FigureView dsl={dsl} alt={question.figure_alt_bn} className='w-full' />;
 ```
 
+### Real-World API Format (v0.2.1+)
+
+The parser now handles real API responses directly:
+
+```typescript
+// API returns object with numeric magnitude
+const apiResponse = {
+  type: "force_diagram",
+  alt_bn: "বস্তুর উপর ক্রিয়াশীল বল",
+  arrows: [
+    {
+      direction: "right",
+      label: "10 N",
+      magnitude: 10, // Number instead of string
+      unit: "N",
+    },
+  ],
+};
+
+// Parse from object (not just JSON string)
+const dsl = parseFigureDSL(apiResponse);
+const svg = renderFigure(dsl);
+```
+
 ## API
 
 ### `renderFigure(dsl: FigureDSL): string`
@@ -58,14 +91,26 @@ const svg = renderFigure({
 });
 ```
 
-### `parseFigureDSL(str: string): FigureDSL | null`
+### `parseFigureDSL(str: string | object): FigureDSL | null`
 
-Safe JSON parser with Zod validation. Returns `null` for invalid input.
+Safe JSON parser with Zod validation. Accepts both JSON strings and objects. Returns `null` for invalid input.
+
+**New in v0.2.1:**
+
+- ✅ Accepts objects directly (not just JSON strings)
+- ✅ Handles `alt_bn` field (automatically maps to `alt`)
+- ✅ Supports numeric or string magnitudes
+- ✅ Automatic field normalization for API responses
 
 ```typescript
+// Parse from JSON string
 const dsl = parseFigureDSL(jsonString);
+
+// Parse from object (NEW!)
+const dsl = parseFigureDSL(apiResponseObject);
+
 if (dsl) {
-  // Valid DSL
+  // Valid DSL with normalized fields
 }
 ```
 
@@ -79,8 +124,25 @@ React wrapper component for rendering figures.
 
 ## Supported Figure Types
 
-- **`force_diagram`** - Force vector diagrams with compass directions ✨ **NEW**
-- More types coming soon (extensible via custom renderers)
+The package is **truly generic** and supports ANY figure type:
+
+- ✅ **`force_diagram`** - Force vector diagrams with compass directions (full renderer)
+- ✅ **ANY custom type** - Renders placeholder SVG for unknown types (physics, chemistry, math, biology diagrams)
+
+**No more errors!** If you try to render an unsupported type like `circuit_diagram`, `graph`, `geometry`, etc., the package will render a nice placeholder instead of crashing.
+
+### Registering Custom Renderers
+
+For specialized rendering of specific types, you can register custom renderers:
+
+```typescript
+import { registerRenderer } from "@xrn07/figure-renderer";
+
+registerRenderer("circuit_diagram", (dsl) => {
+  // Your custom rendering logic
+  return `<svg>...</svg>`;
+});
+```
 
 ## DSL Schema (v0.2.0)
 
@@ -116,16 +178,9 @@ interface FigureDSL {
     {
       "direction": "up",
       "label": "সমতলের প্রতিক্রিয়া বল",
-      "magnitude": "100 N",
+      "magnitude": 100,
       "unit": "N",
       "color": "#2563eb"
-    },
-    {
-      "direction": "right",
-      "label": "ঘর্ষণ বল",
-      "magnitude": "50 N",
-      "unit": "N",
-      "color": "#16a34a"
     }
   ]
 }
@@ -133,6 +188,8 @@ interface FigureDSL {
 
 **Compass Directions:** `up`, `down`, `left`, `right`, `up-left`, `up-right`, `down-left`, `down-right`
 
+**New in v0.2.1:** Magnitude can be string (`"100 N"`) or number (`100`). The parser handles both formats automatically.
+
 **Optional Object:**
 
 ```json
@@ -169,7 +226,34 @@ const circuitDSL = {
 };
 ```
 
-### Force Diagram
+### Force Diagram (v0.2.0+ Format)
+
+```typescript
+const forceDSL = {
+  type: "force_diagram", // NEW: snake_case
+  width: 400, // Optional
+  height: 300, // Optional
+  arrows: [
+    // NEW: compass-based arrows
+    {
+      direction: "down", // Instead of angle: -90
+      label: "মাধ্যাকর্ষণ",
+      magnitude: "100 N", // Can be number or string
+      unit: "N",
+      color: "#dc2626",
+    },
+    {
+      direction: "up",
+      label: "Normal Force",
+      magnitude: 100, // Number works too
+      unit: "N",
+      color: "#2563eb",
+    },
+  ],
+};
+```
+
+### Force Diagram (Old v0.1.x Format - Deprecated)
 
 ```typescript
 const forceDSL = {
@@ -209,6 +293,55 @@ test('renders circuit diagram', () => {
 - Gzipped: ~3KB
 - Tree-shakeable: Unused renderers can be excluded
 
+## Changelog
+
+### v0.2.2 (2026-06-XX)
+
+**Major Enhancement:**
+
+- 🎉 **Truly Generic Package** - Now supports ANY figure type without errors
+- ✨ No more "unknown figure type" crashes
+- ✨ Renders placeholder SVG for unregistered types (physics, chemistry, math, biology, etc.)
+- ✨ Graceful degradation instead of errors
+- 🐛 Fixed arrow overlap for multiple arrows in same direction
+- ✨ Automatic arrow stacking with proper spacing
+
+**Improvements:**
+
+- 📦 Package now works out-of-the-box for any educational content
+- 🎯 Better developer experience - no need to pre-register every type
+
+### v0.2.1 (2026-06-XX)
+
+**Enhancements:**
+
+- ✨ Accept objects directly in `parseFigureDSL()` (not just JSON strings)
+- ✨ Support numeric magnitudes (e.g., `magnitude: 100` instead of `magnitude: "100 N"`)
+- ✨ Automatic field normalization (e.g., `alt_bn` → `alt`)
+- ✨ Flexible magnitude parsing with automatic unit handling
+- 📝 Updated tests to verify real API format compatibility
+
+**Bug Fixes:**
+
+- 🐛 Fixed parsing of real-world API responses with numeric values
+
+### v0.2.0 (2025-01-XX)
+
+**Breaking Changes:**
+
+- 🔴 Migrated from rigid enum types to generic string-based type system
+- 🔴 Changed force diagram format from angle-based to compass directions
+- 🔴 Renamed `forceDiagram` → `force_diagram`
+- 🔴 Replaced `forces` array with `arrows` array
+
+**New Features:**
+
+- ✨ Compass direction system (up, down, left, right, etc.)
+- ✨ Optional dimensions with sensible defaults
+- ✨ Bengali and multilingual support via `alt` field
+- ✨ Renderer registry for custom figure types
+- ✨ Props customization system
+
 ## License
 
 MIT

package/dist/parse.d.ts

@@ -1,9 +1,9 @@
 import type { FigureDSL } from './types';
 /**
- * Safely parse FigureDSL from JSON string
+ * Safely parse FigureDSL from JSON string or object
  * Returns null if parsing or validation fails
  */
-export declare function parseFigureDSL(jsonString: string): FigureDSL | null;
+export declare function parseFigureDSL(input: string | object): FigureDSL | null;
 /**
  * Validate a FigureDSL object
  */

package/dist/parse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../src/parse.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAS,MAAM,SAAS,CAAC;AAqDhD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAenE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,SAAS,CAahE"}
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../src/parse.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAS,MAAM,SAAS,CAAC;AAuEhD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAwBvE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,SAAS,CAahE"}

package/dist/parse.js

@@ -10,7 +10,7 @@ const compassDirectionSchema = z.enum(['up', 'down', 'left', 'right', 'up-left',
 const arrowSchema = z.object({
     direction: compassDirectionSchema,
     label: z.string(),
-    magnitude: z.string(),
+    magnitude: z.union([z.string(), z.number()]), // Accept both string and number
     unit: z.string().optional(),
     color: z.string().optional()
 });
@@ -46,12 +46,34 @@ const forceDiagramSchema = z.object({
     }).optional()
 }).passthrough();
 /**
- * Safely parse FigureDSL from JSON string
+ * Normalize API response fields to DSL format
+ */
+function normalizeAPIResponse(obj) {
+    if (!obj || typeof obj !== 'object') {
+        return obj;
+    }
+    const normalized = { ...obj };
+    // Map alt_bn to alt
+    if (normalized.alt_bn && !normalized.alt) {
+        normalized.alt = normalized.alt_bn;
+    }
+    return normalized;
+}
+/**
+ * Safely parse FigureDSL from JSON string or object
  * Returns null if parsing or validation fails
  */
-export function parseFigureDSL(jsonString) {
+export function parseFigureDSL(input) {
     try {
-        const parsed = JSON.parse(jsonString);
+        let parsed;
+        if (typeof input === 'string') {
+            parsed = JSON.parse(input);
+        }
+        else {
+            parsed = input;
+        }
+        // Normalize API response fields
+        parsed = normalizeAPIResponse(parsed);
         // Detect type and use appropriate schema
         if (parsed.type === 'force_diagram') {
             return forceDiagramSchema.parse(parsed);

package/dist/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAazC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAEnF;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,MAAM,CAanD;AAGD,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAazC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAEnF;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,MAAM,CAcnD;AA+BD,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/render.js

@@ -29,8 +29,30 @@ export function renderFigure(dsl) {
     if (renderer) {
         return renderer(config);
     }
-    // For unregistered types, throw a helpful error
-    throw new Error(`Unknown figure type: "${config.type}". Register a renderer using registerRenderer("${config.type}", renderer)`);
+    // For unregistered types, render a generic placeholder instead of throwing error
+    // This allows the package to work with ANY figure type without requiring pre-registration
+    return renderGenericFigure(config);
+}
+/**
+ * Render a generic placeholder for unknown figure types
+ * This allows the package to work with any type without errors
+ */
+function renderGenericFigure(dsl) {
+    const { width = 400, height = 300, title, alt, type } = dsl;
+    const elements = [];
+    // Add a placeholder box
+    elements.push(`<rect x="${width / 2 - 100}" y="${height / 2 - 50}" width="200" height="100" fill="#f3f4f6" stroke="#9ca3af" stroke-width="2" rx="8"/>`);
+    // Add type label
+    elements.push(`<text x="${width / 2}" y="${height / 2 - 10}" text-anchor="middle" dominant-baseline="middle" font-size="16" font-weight="600" fill="#6b7280">Figure Type: ${type}</text>`);
+    // Add info text
+    elements.push(`<text x="${width / 2}" y="${height / 2 + 15}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#9ca3af">Custom renderer needed</text>`);
+    // Add title if present
+    if (title) {
+        elements.push(`<text x="${width / 2}" y="30" text-anchor="middle" font-size="18" font-weight="bold" fill="#374151">${title}</text>`);
+    }
+    return `<svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${alt || title || type}">
+${elements.join('\n')}
+</svg>`;
 }
 // Re-export parser
 export { parseFigureDSL, validateFigureDSL } from './parse';

package/dist/renderers/forceDiagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forceDiagram.d.ts","sourceRoot":"","sources":["../../src/renderers/forceDiagram.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAKvE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAiDjE"}
+{"version":3,"file":"forceDiagram.d.ts","sourceRoot":"","sources":["../../src/renderers/forceDiagram.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAKvE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CA6DjE"}

package/dist/renderers/forceDiagram.js

@@ -26,9 +26,20 @@ export function renderForceDiagramV2(dsl) {
     elements.push(createArrowMarkers(colors));
     // Render object
     elements.push(renderObject(obj, width, height));
-    // Render arrows
+    // Group arrows by direction for offset calculation
+    const directionGroups = new Map();
     arrows.forEach(arrow => {
-        elements.push(renderArrow(arrow, centerX, centerY));
+        const group = directionGroups.get(arrow.direction) || [];
+        group.push(arrow);
+        directionGroups.set(arrow.direction, group);
+    });
+    // Render arrows with automatic offset for grouped arrows
+    directionGroups.forEach((groupArrows, direction) => {
+        groupArrows.forEach((arrow, index) => {
+            // Calculate offset for multiple arrows in same direction
+            const offset = calculateArrowOffset(direction, index, groupArrows.length);
+            elements.push(renderArrow(arrow, centerX + offset.x, centerY + offset.y));
+        });
     });
     // Add title if present
     if (title) {
@@ -107,11 +118,49 @@ function renderObject(obj, canvasWidth, canvasHeight) {
     }
     return svgTag('g', { class: 'object' }, elements.join(''));
 }
+/**
+ * Calculate offset for arrows to prevent overlap
+ * When multiple arrows point in the same direction, they're stacked with spacing
+ */
+function calculateArrowOffset(direction, index, totalCount) {
+    // If only one arrow, no offset needed
+    if (totalCount <= 1) {
+        return { x: 0, y: 0 };
+    }
+    const spacing = 25; // Pixel spacing between parallel arrows
+    const totalOffset = ((totalCount - 1) * spacing) / 2;
+    // Determine offset direction based on arrow direction
+    // For horizontal arrows, offset vertically
+    // For vertical arrows, offset horizontally
+    // For diagonal, offset perpendicular to direction
+    switch (direction) {
+        case 'left':
+        case 'right':
+            // Stack vertically
+            return { x: 0, y: (index * spacing) - totalOffset };
+        case 'up':
+        case 'down':
+            // Stack horizontally
+            return { x: (index * spacing) - totalOffset, y: 0 };
+        case 'up-left':
+        case 'down-right':
+            // Stack perpendicular (45° offset)
+            const offset45 = (index * spacing) - totalOffset;
+            return { x: offset45, y: -offset45 };
+        case 'up-right':
+        case 'down-left':
+            // Stack perpendicular (-45° offset)
+            const offset45n = (index * spacing) - totalOffset;
+            return { x: offset45n, y: offset45n };
+        default:
+            return { x: 0, y: 0 };
+    }
+}
 function renderArrow(arrow, centerX, centerY) {
     const { direction, label, magnitude, color = '#dc2626' } = arrow;
     const elements = [];
-    // Parse magnitude to get value
-    const { value: magnitudeValue } = parseMagnitude(magnitude);
+    // Parse magnitude to get value and unit
+    const { value: magnitudeValue, unit: magnitudeUnit } = parseMagnitude(magnitude);
     // Calculate arrow length based on magnitude (with minimum and maximum)
     const arrowLength = Math.max(40, Math.min(100, magnitudeValue * 0.8));
     // Convert compass direction to angle
@@ -125,9 +174,11 @@ function renderArrow(arrow, centerX, centerY) {
         'stroke-width': 3,
         'marker-end': `url(#arrow-${color.replace('#', '')})`,
     }));
+    // Format magnitude for display (add unit if not present)
+    const magnitudeDisplay = magnitudeUnit ? `${magnitudeValue} ${magnitudeUnit}` : `${magnitudeValue}`;
     // Draw label with magnitude
-    const labelText = label ? `${label} (${magnitude})` : magnitude;
-    // Calculate label position (offset from arrow end)
+    const labelText = label ? `${label} (${magnitudeDisplay})` : magnitudeDisplay;
+    // Calculate label position (offset from arrow end, plus stack offset)
     const angleRad = (angle * Math.PI) / 180;
     const labelOffset = 20;
     const labelX = end.x + labelOffset * Math.cos(angleRad);

package/dist/types.d.ts

@@ -23,7 +23,7 @@ export interface ForceDiagramDSL extends FigureDSL {
 export interface Arrow {
     direction: 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right';
     label: string;
-    magnitude: string;
+    magnitude: string | number;
     unit?: string;
     color?: string;
 }

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,KAAK;IACpB,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;IAClG,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACjC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,KAAK;IACpB,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;IAClG,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACjC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/utils/compass.d.ts

@@ -11,12 +11,13 @@ export declare function compassToAngle(direction: CompassDirection): number;
  */
 export declare function angleToCompass(angle: number): CompassDirection;
 /**
- * Parse magnitude string to extract numeric value and unit
+ * Parse magnitude string or number to extract numeric value and unit
  * Examples: "100 N" -> { value: 100, unit: "N" }
  *           "50 kg" -> { value: 50, unit: "kg" }
  *           "25" -> { value: 25, unit: "" }
+ *           25 -> { value: 25, unit: "" }
  */
-export declare function parseMagnitude(magnitude: string): {
+export declare function parseMagnitude(magnitude: string | number): {
     value: number;
     unit: string;
 };

package/dist/utils/compass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../src/utils/compass.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,IAAI,GACJ,MAAM,GACN,MAAM,GACN,OAAO,GACP,SAAS,GACT,UAAU,GACV,WAAW,GACX,YAAY,CAAC;AAEjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,gBAAgB,GAAG,MAAM,CAalE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAa9D;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAoBjF;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,MAAM,GACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAQ1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,MAAM,GACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAQ1B"}
+{"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../src/utils/compass.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,IAAI,GACJ,MAAM,GACN,MAAM,GACN,OAAO,GACP,SAAS,GACT,UAAU,GACV,WAAW,GACX,YAAY,CAAC;AAEjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,gBAAgB,GAAG,MAAM,CAalE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAa9D;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAyB1F;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,MAAM,GACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAQ1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,MAAM,GACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAQ1B"}

package/dist/utils/compass.js

@@ -39,12 +39,17 @@ export function angleToCompass(angle) {
     return 'right'; // Default
 }
 /**
- * Parse magnitude string to extract numeric value and unit
+ * Parse magnitude string or number to extract numeric value and unit
  * Examples: "100 N" -> { value: 100, unit: "N" }
  *           "50 kg" -> { value: 50, unit: "kg" }
  *           "25" -> { value: 25, unit: "" }
+ *           25 -> { value: 25, unit: "" }
  */
 export function parseMagnitude(magnitude) {
+    // If it's already a number, return it
+    if (typeof magnitude === 'number') {
+        return { value: magnitude, unit: '' };
+    }
     const trimmed = magnitude.trim();
     // Try to extract numeric value and unit
     const match = trimmed.match(/^(-?\d+\.?\d*)\s*(.*)$/);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrn07/figure-renderer",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Zero-dependency pure TypeScript figure renderer - pure SVG string generation",
   "main": "./dist/render.js",
   "module": "./dist/render.js",