@xrn07/figure-renderer 0.1.3 → 0.2.1

package/README.md

@@ -2,13 +2,18 @@
 
 Zero-dependency pure TypeScript figure renderer - pure SVG string generation.
 
+> **⚠️ 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.
+
 ## 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
 - ✅ **Testable** - SVG strings are easily snapshot-able
 - ✅ **Accessible** - React component with proper ARIA labels
+- ✅ **International** - Localization support via `alt` field
 
 ## Installation
 
@@ -74,27 +79,74 @@ React wrapper component for rendering figures.
 
 ## Supported Figure Types
 
-- `circuit` - Circuit diagrams
-- `rayDiagram` - Ray optics diagrams
-- `forceDiagram` - Force vector diagrams
-- `geometry` - Geometric shapes
-- `coordinatePlane` - XY coordinate systems
-- `numberLine` - Number lines
-- `graph` - Function graphs
-- `venn` - Venn diagrams
-- `bioTable` - Biology comparison tables
+- **`force_diagram`** - Force vector diagrams with compass directions ✨ **NEW**
+- More types coming soon (extensible via custom renderers)
 
-## DSL Schema
+## DSL Schema (v0.2.0)
 
-Each figure type has its own DSL structure. All share common base properties:
+The DSL is now **generic and flexible**. All figures share common base properties:
 
 ```typescript
 interface FigureDSL {
-  type: FigureType;
-  width: number;
-  height: number;
+  type: string; // Generic - any figure type supported
+  width?: number; // Optional - defaults to 400
+  height?: number; // Optional - defaults to 300
   title?: string;
-  alt?: string;
+  alt?: string; // Localization support
+  [key: string]: any; // Additional properties per figure type
+}
+```
+
+### Force Diagram DSL
+
+```json
+{
+  "type": "force_diagram",
+  "alt": "বস্তুটির উপর ক্রিয়াশীল বলগুলোর চিত্র",
+  "width": 400,
+  "height": 300,
+  "arrows": [
+    {
+      "direction": "down",
+      "label": "মাধ্যাকর্ষণ",
+      "magnitude": "100 N",
+      "unit": "N",
+      "color": "#dc2626"
+    },
+    {
+      "direction": "up",
+      "label": "সমতলের প্রতিক্রিয়া বল",
+      "magnitude": "100 N",
+      "unit": "N",
+      "color": "#2563eb"
+    },
+    {
+      "direction": "right",
+      "label": "ঘর্ষণ বল",
+      "magnitude": "50 N",
+      "unit": "N",
+      "color": "#16a34a"
+    }
+  ]
+}
+```
+
+**Compass Directions:** `up`, `down`, `left`, `right`, `up-left`, `up-right`, `down-left`, `down-right`
+
+**Optional Object:**
+
+```json
+{
+  "type": "force_diagram",
+  "object": {
+    "type": "box",
+    "x": 200,
+    "y": 150,
+    "width": 60,
+    "height": 60,
+    "label": "5kg"
+  },
+  "arrows": [...]
 }
 ```
 

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,EAAE,MAAM,SAAS,CAAC;AAgBzC;;;GAGG;AACH,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAQnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,SAAS,CAOhE"}
+{"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

@@ -1,23 +1,84 @@
 // Safe DSL parser with Zod validation
 import { z } from 'zod';
 /**
- * Zod schema for FigureDSL validation
+ * Compass direction validation
+ */
+const compassDirectionSchema = z.enum(['up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left', 'down-right']);
+/**
+ * Arrow validation schema
+ */
+const arrowSchema = z.object({
+    direction: compassDirectionSchema,
+    label: z.string(),
+    magnitude: z.union([z.string(), z.number()]), // Accept both string and number
+    unit: z.string().optional(),
+    color: z.string().optional()
+});
+/**
+ * Base FigureDSL validation schema - flexible and generic
  */
 const figureDSLSchema = z.lazy(() => z.object({
-    type: z.enum(['circuit', 'rayDiagram', 'forceDiagram', 'geometry', 'coordinatePlane', 'numberLine', 'graph', 'venn', 'bioTable']),
-    width: z.number(),
-    height: z.number(),
+    type: z.string(), // Generic type - any string allowed
+    width: z.number().optional(), // Optional with defaults
+    height: z.number().optional(), // Optional with defaults
     title: z.string().optional(),
     alt: z.string().optional(),
-    // Allow additional properties for specific figure types
+    // Allow additional properties for flexibility
 }).passthrough());
 /**
- * Safely parse FigureDSL from JSON string
+ * Force diagram specific validation
+ */
+const forceDiagramSchema = z.object({
+    type: z.literal('force_diagram'),
+    width: z.number().optional(),
+    height: z.number().optional(),
+    title: z.string().optional(),
+    alt: z.string().optional(),
+    arrows: z.array(arrowSchema),
+    object: z.object({
+        type: z.enum(['box', 'sphere', 'point']),
+        x: z.number().optional(),
+        y: z.number().optional(),
+        width: z.number().optional(),
+        height: z.number().optional(),
+        radius: z.number().optional(),
+        label: z.string().optional()
+    }).optional()
+}).passthrough();
+/**
+ * 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);
+        }
+        // Use generic schema for other types
         return figureDSLSchema.parse(parsed);
     }
     catch (error) {
@@ -30,8 +91,12 @@ export function parseFigureDSL(jsonString) {
  */
 export function validateFigureDSL(obj) {
     try {
-        figureDSLSchema.parse(obj);
-        return true;
+        const parsed = obj;
+        // Detect type and use appropriate schema
+        if (parsed?.type === 'force_diagram') {
+            return forceDiagramSchema.safeParse(parsed).success;
+        }
+        return figureDSLSchema.safeParse(obj).success;
     }
     catch {
         return false;

package/dist/props.d.ts

@@ -0,0 +1,42 @@
+import type { FigureDSL, PhysicalObject } from './types';
+/**
+ * Default configuration for force diagrams
+ */
+export interface ForceDiagramDefaults {
+    width: number;
+    height: number;
+    object: PhysicalObject;
+    arrowLength: number;
+    arrowHeadSize: number;
+    colors: {
+        object: string;
+        arrowDefault: string;
+        arrowText: string;
+    };
+}
+/**
+ * Global defaults configuration
+ */
+export interface FigureDefaults {
+    force_diagram: ForceDiagramDefaults;
+}
+/**
+ * Default props for force diagrams
+ */
+export declare const defaultForceDiagramProps: ForceDiagramDefaults;
+/**
+ * Get default props for a specific figure type
+ */
+export declare function getDefaults(type: string): Partial<FigureDefaults[keyof FigureDefaults]>;
+/**
+ * Merge user config with defaults
+ */
+export declare function withDefaults<T extends FigureDSL>(config: T, defaults?: Partial<FigureDefaults[keyof FigureDefaults]>): T;
+/**
+ * Calculate center position for object
+ */
+export declare function calculateCenter(width: number, height: number): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=props.d.ts.map

package/dist/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../src/props.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,aAAa,EAAE,oBAAoB,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,oBAgBtC,CAAC;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,cAAc,CAAC,CAAC,CAMvF;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,SAAS,EAC9C,MAAM,EAAE,CAAC,EACT,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,MAAM,cAAc,CAAC,CAAC,GACvD,CAAC,CAWH;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAKvF"}

package/dist/props.js

@@ -0,0 +1,52 @@
+// Default props system for figure rendering
+/**
+ * Default props for force diagrams
+ */
+export const defaultForceDiagramProps = {
+    width: 400,
+    height: 300,
+    object: {
+        type: 'box',
+        width: 60,
+        height: 60,
+        label: ''
+    },
+    arrowLength: 60,
+    arrowHeadSize: 10,
+    colors: {
+        object: '#374151',
+        arrowDefault: '#dc2626',
+        arrowText: '#1f2937'
+    }
+};
+/**
+ * Get default props for a specific figure type
+ */
+export function getDefaults(type) {
+    const defaults = {
+        force_diagram: defaultForceDiagramProps
+    };
+    return defaults[type] || {};
+}
+/**
+ * Merge user config with defaults
+ */
+export function withDefaults(config, defaults) {
+    const typeDefaults = getDefaults(config.type);
+    // Merge defaults with user config
+    const merged = {
+        ...config,
+        width: config.width ?? (defaults?.width ?? typeDefaults?.width ?? 400),
+        height: config.height ?? (defaults?.height ?? typeDefaults?.height ?? 300)
+    };
+    return merged;
+}
+/**
+ * Calculate center position for object
+ */
+export function calculateCenter(width, height) {
+    return {
+        x: width / 2,
+        y: height / 2
+    };
+}

package/dist/render.d.ts

@@ -1,4 +1,10 @@
 import type { FigureDSL } from './types';
+/**
+ * Register a custom renderer for a specific figure type
+ * @param type - Figure type identifier
+ * @param renderer - Rendering function that takes DSL and returns SVG string
+ */
+export declare function registerRenderer(type: string, renderer: (dsl: any) => string): void;
 /**
  * Main rendering function - dispatches to appropriate renderer based on DSL type
  * @param dsl - Figure DSL object

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;AAWzC;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,MAAM,CAuBnD;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,CAanD;AAGD,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/render.js

@@ -1,41 +1,36 @@
 // Main entry point for figure rendering
-import { renderCircuit } from './renderers/circuit';
-import { renderRayDiagram } from './renderers/rayDiagram';
-import { renderForceDiagram } from './renderers/forceDiagram';
-import { renderGeometry } from './renderers/geometry';
-import { renderCoordinatePlane } from './renderers/coordinatePlane';
-import { renderNumberLine } from './renderers/numberLine';
-import { renderGraph } from './renderers/graph';
-import { renderVenn } from './renderers/venn';
-import { renderBioTable } from './renderers/bioTable';
+import { renderForceDiagramV2 } from './renderers/forceDiagram';
+import { withDefaults } from './props';
+/**
+ * Renderer registry for dynamic renderer lookup
+ * Allows adding new renderers without modifying the switch statement
+ */
+const renderRegistry = new Map();
+// Register built-in renderers
+renderRegistry.set('force_diagram', renderForceDiagramV2);
+/**
+ * Register a custom renderer for a specific figure type
+ * @param type - Figure type identifier
+ * @param renderer - Rendering function that takes DSL and returns SVG string
+ */
+export function registerRenderer(type, renderer) {
+    renderRegistry.set(type, renderer);
+}
 /**
  * Main rendering function - dispatches to appropriate renderer based on DSL type
  * @param dsl - Figure DSL object
  * @returns SVG string
  */
 export function renderFigure(dsl) {
-    switch (dsl.type) {
-        case 'circuit':
-            return renderCircuit(dsl);
-        case 'rayDiagram':
-            return renderRayDiagram(dsl);
-        case 'forceDiagram':
-            return renderForceDiagram(dsl);
-        case 'geometry':
-            return renderGeometry(dsl);
-        case 'coordinatePlane':
-            return renderCoordinatePlane(dsl);
-        case 'numberLine':
-            return renderNumberLine(dsl);
-        case 'graph':
-            return renderGraph(dsl);
-        case 'venn':
-            return renderVenn(dsl);
-        case 'bioTable':
-            return renderBioTable(dsl);
-        default:
-            throw new Error(`Unknown figure type: ${dsl.type}`);
+    // Apply defaults if dimensions are not specified
+    const config = withDefaults(dsl);
+    // Check if we have a registered renderer for this type
+    const renderer = renderRegistry.get(config.type);
+    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)`);
 }
 // Re-export parser
 export { parseFigureDSL, validateFigureDSL } from './parse';

package/dist/renderers/forceDiagram.d.ts

@@ -1,3 +1,6 @@
 import type { ForceDiagramDSL } from '../types';
-export declare function renderForceDiagram(dsl: ForceDiagramDSL): string;
+/**
+ * Render force diagram with new compass-based format
+ */
+export declare function renderForceDiagramV2(dsl: ForceDiagramDSL): string;
 //# sourceMappingURL=forceDiagram.d.ts.map

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,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAsB/D"}
+{"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"}

package/dist/renderers/forceDiagram.js

@@ -1,31 +1,64 @@
-// Force diagram renderer
+// Force diagram renderer (new format with compass directions)
 import { svgTag } from '../utils/svgTag';
 import { rect, circle, text, line } from '../utils/shapes';
-export function renderForceDiagram(dsl) {
-    const { width, height, object, forces, title } = dsl;
+import { compassToAngle, parseMagnitude, calculateArrowEndpoint, calculateArrowStart } from '../utils/compass';
+/**
+ * Render force diagram with new compass-based format
+ */
+export function renderForceDiagramV2(dsl) {
+    const { width = 400, height = 300, arrows = [], object, title, alt } = dsl;
+    // Use default object if not specified
+    const defaultObject = {
+        type: 'box',
+        x: width / 2,
+        y: height / 2,
+        width: 60,
+        height: 60
+    };
+    const obj = object || defaultObject;
+    const centerX = obj.x ?? width / 2;
+    const centerY = obj.y ?? height / 2;
     const elements = [];
-    // Add arrow markers
-    elements.push(createForceMarkers());
+    // Add arrow markers for all colors used
+    const colors = [...new Set(arrows.map(a => a.color).filter(Boolean))];
+    if (colors.length === 0)
+        colors.push('#dc2626'); // Default color
+    elements.push(createArrowMarkers(colors));
     // Render object
-    elements.push(renderObject(object));
-    // Render forces
-    forces.forEach(force => {
-        elements.push(renderForce(force));
+    elements.push(renderObject(obj, width, height));
+    // Render arrows
+    arrows.forEach(arrow => {
+        elements.push(renderArrow(arrow, centerX, centerY));
     });
+    // Add title if present
+    if (title) {
+        elements.push(text(width / 2, 20, title, {
+            'text-anchor': 'middle',
+            'font-size': 18,
+            'font-weight': 'bold',
+            fill: '#333',
+        }));
+    }
     const svg = svgTag('svg', {
         viewBox: `0 0 ${width} ${height}`,
         xmlns: 'http://www.w3.org/2000/svg',
+        role: 'img',
+        'aria-label': alt || title || 'Force diagram',
     }, elements.join(''));
     return svg;
 }
-function renderObject(obj) {
+function renderObject(obj, canvasWidth, canvasHeight) {
     const elements = [];
+    const x = obj.x ?? canvasWidth / 2;
+    const y = obj.y ?? canvasHeight / 2;
     switch (obj.type) {
         case 'box': {
-            const { x, y, width: w = 60, height: h = 60, label } = obj;
+            const w = obj.width ?? 60;
+            const h = obj.height ?? 60;
+            const label = obj.label;
             elements.push(rect(x - w / 2, y - h / 2, w, h, {
-                fill: '#f0f0f0',
-                stroke: '#333',
+                fill: '#f3f4f6',
+                stroke: '#374151',
                 'stroke-width': 2,
             }));
             if (label) {
@@ -33,17 +66,17 @@ function renderObject(obj) {
                     'text-anchor': 'middle',
                     'dominant-baseline': 'middle',
                     'font-size': 14,
-                    fill: '#333',
+                    fill: '#1f2937',
                 }));
             }
             break;
         }
         case 'sphere': {
-            const { x, y, label } = obj;
-            const radius = 30;
+            const radius = obj.radius ?? 30;
+            const label = obj.label;
             elements.push(circle(x, y, radius, {
-                fill: '#e6f7ff',
-                stroke: '#333',
+                fill: '#dbeafe',
+                stroke: '#1e40af',
                 'stroke-width': 2,
             }));
             if (label) {
@@ -51,22 +84,22 @@ function renderObject(obj) {
                     'text-anchor': 'middle',
                     'dominant-baseline': 'middle',
                     'font-size': 12,
-                    fill: '#333',
+                    fill: '#1e3a8a',
                 }));
             }
             break;
         }
         case 'point': {
-            const { x, y, label } = obj;
+            const label = obj.label;
             elements.push(circle(x, y, 5, {
-                fill: '#333',
+                fill: '#1f2937',
             }));
             if (label) {
                 elements.push(text(x + 10, y, label, {
                     'text-anchor': 'start',
                     'dominant-baseline': 'middle',
                     'font-size': 12,
-                    fill: '#333',
+                    fill: '#374151',
                 }));
             }
             break;
@@ -74,57 +107,52 @@ function renderObject(obj) {
     }
     return svgTag('g', { class: 'object' }, elements.join(''));
 }
-function renderForce(force) {
-    const { originX, originY, magnitude, angle, label, color = '#e53e3e' } = force;
+function renderArrow(arrow, centerX, centerY) {
+    const { direction, label, magnitude, color = '#dc2626' } = arrow;
     const elements = [];
-    // Convert angle to radians and calculate endpoint
-    const angleRad = (angle * Math.PI) / 180;
-    const scale = 2; // Scale factor for visibility
-    const endX = originX + magnitude * Math.cos(angleRad) * scale;
-    const endY = originY - magnitude * Math.sin(angleRad) * scale; // SVG y is inverted
-    // Draw force vector with arrow
-    elements.push(line(originX, originY, endX, endY, {
+    // 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
+    const angle = compassToAngle(direction);
+    // Calculate start and end points
+    const start = calculateArrowStart(centerX, centerY, direction, arrowLength);
+    const end = calculateArrowEndpoint(centerX, centerY, direction, arrowLength);
+    // Draw arrow line
+    elements.push(line(start.x, start.y, end.x, end.y, {
         stroke: color,
         'stroke-width': 3,
-        'marker-end': `url(#arrow-${color})`,
+        'marker-end': `url(#arrow-${color.replace('#', '')})`,
     }));
-    // Draw label
-    if (label) {
-        // Position label slightly offset from the arrow
-        const labelOffset = 15;
-        const labelX = endX + labelOffset * Math.cos(angleRad);
-        const labelY = endY - labelOffset * Math.sin(angleRad);
-        elements.push(text(labelX, labelY, label, {
-            'text-anchor': 'start',
-            'dominant-baseline': 'middle',
-            'font-size': 14,
-            'font-weight': 'bold',
-            fill: color,
-        }));
-    }
-    return svgTag('g', { class: 'force' }, elements.join(''));
+    // Format magnitude for display (add unit if not present)
+    const magnitudeDisplay = magnitudeUnit ? `${magnitudeValue} ${magnitudeUnit}` : `${magnitudeValue}`;
+    // Draw label with magnitude
+    const labelText = label ? `${label} (${magnitudeDisplay})` : magnitudeDisplay;
+    // Calculate label position (offset from arrow end)
+    const angleRad = (angle * Math.PI) / 180;
+    const labelOffset = 20;
+    const labelX = end.x + labelOffset * Math.cos(angleRad);
+    const labelY = end.y + labelOffset * Math.sin(angleRad);
+    elements.push(text(labelX, labelY, labelText, {
+        'text-anchor': 'start',
+        'dominant-baseline': 'middle',
+        'font-size': 14,
+        'font-weight': '600',
+        fill: color,
+    }));
+    return svgTag('g', { class: 'arrow' }, elements.join(''));
 }
-function createForceMarkers() {
+function createArrowMarkers(colors) {
+    const markers = colors.map(color => {
+        const colorId = color.replace('#', '');
+        return `      <marker id="arrow-${colorId}" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
+        <path d="M0,0 L10,5 L0,10" fill="${color}" />
+      </marker>`;
+    }).join('\n');
     return `
     <defs>
-      <marker id="arrow-#e53e3e" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
-        <path d="M0,0 L10,5 L0,10" fill="#e53e3e" />
-      </marker>
-      <marker id="arrow-#3182ce" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
-        <path d="M0,0 L10,5 L0,10" fill="#3182ce" />
-      </marker>
-      <marker id="arrow-#38a169" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
-        <path d="M0,0 L10,5 L0,10" fill="#38a169" />
-      </marker>
-      <marker id="arrow-#d69e2e" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
-        <path d="M0,0 L10,5 L0,10" fill="#d69e2e" />
-      </marker>
-      <marker id="arrow-#805ad5" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
-        <path d="M0,0 L10,5 L0,10" fill="#805ad5" />
-      </marker>
-      <marker id="arrow-#333" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
-        <path d="M0,0 L10,5 L0,10" fill="#333" />
-      </marker>
+${markers}
     </defs>
   `;
 }

package/dist/types.d.ts

@@ -1,225 +1,42 @@
 /**
- * Base figure DSL structure
+ * Base figure DSL structure - generic and flexible
  */
 export interface FigureDSL {
-    type: FigureType;
-    width: number;
-    height: number;
+    type: string;
+    width?: number;
+    height?: number;
     title?: string;
     alt?: string;
+    [key: string]: any;
 }
 /**
- * Supported figure types
- */
-export type FigureType = 'circuit' | 'rayDiagram' | 'forceDiagram' | 'geometry' | 'coordinatePlane' | 'numberLine' | 'graph' | 'venn' | 'bioTable';
-/**
- * Circuit diagram DSL
+ * Force diagram DSL (new format)
  */
-export interface CircuitDSL extends FigureDSL {
-    type: 'circuit';
-    components: CircuitComponent[];
-}
-export interface CircuitComponent {
-    type: 'battery' | 'resistor' | 'switch' | 'bulb' | 'wire' | 'ammeter' | 'voltmeter';
-    x: number;
-    y: number;
-    rotation?: number;
-    label?: string;
-    value?: string;
+export interface ForceDiagramDSL extends FigureDSL {
+    type: 'force_diagram';
+    arrows: Arrow[];
+    object?: PhysicalObject;
 }
 /**
- * Ray diagram DSL
+ * Arrow configuration with compass directions
  */
-export interface RayDiagramDSL extends FigureDSL {
-    type: 'rayDiagram';
-    opticalElements: OpticalElement[];
-    rays: Ray[];
-}
-export interface OpticalElement {
-    type: 'lens' | 'mirror' | 'prism' | 'screen';
-    x: number;
-    y: number;
-    width?: number;
-    height?: number;
-    focalLength?: number;
-    curvature?: string;
-}
-export interface Ray {
-    startX: number;
-    startY: number;
-    angle: number;
+export interface Arrow {
+    direction: 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right';
+    label: string;
+    magnitude: string | number;
+    unit?: string;
     color?: string;
-    label?: string;
 }
 /**
- * Force diagram DSL
+ * Physical object definition
  */
-export interface ForceDiagramDSL extends FigureDSL {
-    type: 'forceDiagram';
-    object: PhysicalObject;
-    forces: Force[];
-}
 export interface PhysicalObject {
     type: 'box' | 'sphere' | 'point';
-    x: number;
-    y: number;
+    x?: number;
+    y?: number;
     width?: number;
     height?: number;
+    radius?: number;
     label?: string;
 }
-export interface Force {
-    originX: number;
-    originY: number;
-    magnitude: number;
-    angle: number;
-    label: string;
-    color?: string;
-}
-/**
- * Geometry DSL
- */
-export interface GeometryDSL extends FigureDSL {
-    type: 'geometry';
-    shapes: GeometryShape[];
-}
-export type GeometryShape = {
-    type: 'line';
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    label?: string;
-} | {
-    type: 'circle';
-    cx: number;
-    cy: number;
-    r: number;
-    label?: string;
-} | {
-    type: 'rect';
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    label?: string;
-} | {
-    type: 'triangle';
-    points: [number, number][];
-    label?: string;
-} | {
-    type: 'angle';
-    vertex: [number, number];
-    rays: [[number, number], [number, number]];
-    label?: string;
-};
-/**
- * Coordinate plane DSL
- */
-export interface CoordinatePlaneDSL extends FigureDSL {
-    type: 'coordinatePlane';
-    xRange: [number, number];
-    yRange: [number, number];
-    showGrid?: boolean;
-    showLabels?: boolean;
-    elements: PlaneElement[];
-}
-export interface PlaneElement {
-    type: 'point' | 'line' | 'curve' | 'label';
-    data: PointElementData | LineElementData | CurveElementData | LabelElementData;
-}
-export interface PointElementData {
-    x: number;
-    y: number;
-    label?: string;
-    color?: string;
-}
-export interface LineElementData {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    color?: string;
-    style?: 'solid' | 'dashed' | 'dotted';
-}
-export interface CurveElementData {
-    points: [number, number][];
-    color?: string;
-    style?: 'solid' | 'dashed' | 'dotted';
-}
-export interface LabelElementData {
-    x: number;
-    y: number;
-    text: string;
-    align?: 'left' | 'center' | 'right';
-}
-/**
- * Number line DSL
- */
-export interface NumberLineDSL extends FigureDSL {
-    type: 'numberLine';
-    range: [number, number];
-    ticks: number[];
-    marks: NumberLineMark[];
-    arrowEnds?: 'left' | 'right' | 'both' | 'none';
-}
-export interface NumberLineMark {
-    value: number;
-    label: string;
-    style?: 'open' | 'closed' | 'arrow';
-}
-/**
- * Graph DSL
- */
-export interface GraphDSL extends FigureDSL {
-    type: 'graph';
-    xRange: [number, number];
-    yRange: [number, number];
-    functions: GraphFunction[];
-}
-export interface GraphFunction {
-    equation: string;
-    color: string;
-    style?: 'solid' | 'dashed' | 'dotted';
-}
-/**
- * Venn diagram DSL
- */
-export interface VennDSL extends FigureDSL {
-    type: 'venn';
-    circles: VennCircle[];
-    labels: VennLabel[];
-}
-export interface VennCircle {
-    label: string;
-    cx: number;
-    cy: number;
-    r: number;
-    color: string;
-}
-export interface VennLabel {
-    text: string;
-    x: number;
-    y: number;
-    region: string;
-}
-/**
- * Biology table DSL
- */
-export interface BioTableDSL extends FigureDSL {
-    type: 'bioTable';
-    columns: BioColumn[];
-    rows: BioRow[];
-}
-export interface BioColumn {
-    header: string;
-    width: number;
-}
-export interface BioRow {
-    cells: (string | BioCellImage)[];
-}
-export interface BioCellImage {
-    type: 'image';
-    src: string;
-    alt: string;
-}
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"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/types.js

@@ -1,3 +1,3 @@
 // DSL Type Definitions
-// All figure type interfaces will be defined here
+// Flexible, generic type system supporting any figure type
 export {};

package/dist/utils/compass.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Compass directions supported
+ */
+export type CompassDirection = 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right';
+/**
+ * Convert compass direction to angle in degrees
+ */
+export declare function compassToAngle(direction: CompassDirection): number;
+/**
+ * Convert angle in degrees to compass direction
+ */
+export declare function angleToCompass(angle: number): CompassDirection;
+/**
+ * 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 | number): {
+    value: number;
+    unit: string;
+};
+/**
+ * Calculate arrow endpoint based on center, direction, and length
+ */
+export declare function calculateArrowEndpoint(centerX: number, centerY: number, direction: CompassDirection, length: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate arrow start point (opposite of endpoint)
+ */
+export declare function calculateArrowStart(centerX: number, centerY: number, direction: CompassDirection, length: number): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=compass.d.ts.map

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

@@ -0,0 +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;;;;;;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

@@ -0,0 +1,90 @@
+// Compass direction utilities for force diagram rendering
+/**
+ * Convert compass direction to angle in degrees
+ */
+export function compassToAngle(direction) {
+    const mapping = {
+        'up': -90,
+        'down': 90,
+        'left': 180,
+        'right': 0,
+        'up-left': -135,
+        'up-right': -45,
+        'down-left': 135,
+        'down-right': 45
+    };
+    return mapping[direction] ?? 0;
+}
+/**
+ * Convert angle in degrees to compass direction
+ */
+export function angleToCompass(angle) {
+    const normalizedAngle = ((angle % 360) + 360) % 360;
+    if (normalizedAngle === 0 || normalizedAngle === 360)
+        return 'right';
+    if (normalizedAngle === 90)
+        return 'down';
+    if (normalizedAngle === 180)
+        return 'left';
+    if (normalizedAngle === 270)
+        return 'up';
+    if (normalizedAngle > 270 && normalizedAngle < 360)
+        return 'up-right';
+    if (normalizedAngle > 180 && normalizedAngle < 270)
+        return 'up-left';
+    if (normalizedAngle > 90 && normalizedAngle < 180)
+        return 'down-left';
+    if (normalizedAngle > 0 && normalizedAngle < 90)
+        return 'down-right';
+    return 'right'; // Default
+}
+/**
+ * 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*(.*)$/);
+    if (match) {
+        return {
+            value: parseFloat(match[1]),
+            unit: match[2].trim()
+        };
+    }
+    // If no unit, just parse the number
+    const value = parseFloat(trimmed);
+    if (!isNaN(value)) {
+        return { value, unit: '' };
+    }
+    return { value: 0, unit: '' };
+}
+/**
+ * Calculate arrow endpoint based on center, direction, and length
+ */
+export function calculateArrowEndpoint(centerX, centerY, direction, length) {
+    const angle = compassToAngle(direction);
+    const radians = (angle * Math.PI) / 180;
+    return {
+        x: centerX + length * Math.cos(radians),
+        y: centerY + length * Math.sin(radians)
+    };
+}
+/**
+ * Calculate arrow start point (opposite of endpoint)
+ */
+export function calculateArrowStart(centerX, centerY, direction, length) {
+    const angle = compassToAngle(direction);
+    const radians = (angle * Math.PI) / 180;
+    return {
+        x: centerX - length * Math.cos(radians),
+        y: centerY - length * Math.sin(radians)
+    };
+}

package/package.json

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