@xrn07/figure-renderer 0.1.0

package/dist/utils/coordTransform.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Transform data coordinates to SVG coordinates
+ * Maps data space to SVG pixel space
+ */
+export interface TransformOptions {
+    xRange: [number, number];
+    yRange: [number, number];
+    width: number;
+    height: number;
+    padding?: number;
+}
+/**
+ * Create coordinate transformation function
+ */
+export declare function createCoordTransform(options: TransformOptions): {
+    /**
+     * Transform data x to SVG x
+     */
+    x: (dataX: number) => number;
+    /**
+     * Transform data y to SVG y (inverted, since SVG y goes down)
+     */
+    y: (dataY: number) => number;
+};
+/**
+ * Quick transform for single coordinate
+ */
+export declare function transformCoord(value: number, range: [number, number], size: number, padding?: number, invert?: boolean): number;
+//# sourceMappingURL=coordTransform.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"coordTransform.d.ts","sourceRoot":"","sources":["../../src/utils/coordTransform.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB;IAY1D;;OAEG;eACQ,MAAM;IAIjB;;OAEG;eACQ,MAAM;EAIpB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACvB,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,MAAW,EACpB,MAAM,GAAE,OAAe,GACtB,MAAM,CAQR"}

package/dist/utils/coordTransform.js

@@ -0,0 +1,38 @@
+// Coordinate transformation utilities
+/**
+ * Create coordinate transformation function
+ */
+export function createCoordTransform(options) {
+    const { xRange, yRange, width, height, padding = 40 } = options;
+    const xMin = xRange[0];
+    const xMax = xRange[1];
+    const yMin = yRange[0];
+    const yMax = yRange[1];
+    const usableWidth = width - 2 * padding;
+    const usableHeight = height - 2 * padding;
+    return {
+        /**
+         * Transform data x to SVG x
+         */
+        x: (dataX) => {
+            return padding + ((dataX - xMin) / (xMax - xMin)) * usableWidth;
+        },
+        /**
+         * Transform data y to SVG y (inverted, since SVG y goes down)
+         */
+        y: (dataY) => {
+            return height - padding - ((dataY - yMin) / (yMax - yMin)) * usableHeight;
+        },
+    };
+}
+/**
+ * Quick transform for single coordinate
+ */
+export function transformCoord(value, range, size, padding = 40, invert = false) {
+    const [min, max] = range;
+    const usableSize = size - 2 * padding;
+    if (invert) {
+        return size - padding - ((value - min) / (max - min)) * usableSize;
+    }
+    return padding + ((value - min) / (max - min)) * usableSize;
+}

package/dist/utils/gridLines.d.ts

@@ -0,0 +1,23 @@
+interface GridOptions {
+    xRange: [number, number];
+    yRange: [number, number];
+    width: number;
+    height: number;
+    xSteps?: number;
+    ySteps?: number;
+    stroke?: string;
+    strokeWidth?: number;
+}
+/**
+ * Generate grid lines for coordinate systems
+ */
+export declare function gridLines(options: GridOptions): string;
+/**
+ * Generate axes with labels
+ */
+export declare function axes(options: GridOptions & {
+    showLabels?: boolean;
+    labelStep?: number;
+}): string;
+export {};
+//# sourceMappingURL=gridLines.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gridLines.d.ts","sourceRoot":"","sources":["../../src/utils/gridLines.ts"],"names":[],"mappings":"AAKA,UAAU,WAAW;IACnB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAgDtD;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAkEhG"}

package/dist/utils/gridLines.js

@@ -0,0 +1,124 @@
+// Grid line generation utility
+import { svgTag } from './svgTag';
+import { createCoordTransform } from './coordTransform';
+/**
+ * Generate grid lines for coordinate systems
+ */
+export function gridLines(options) {
+    const { xRange, yRange, width, height, xSteps = 10, ySteps = 10, stroke = '#e0e0e0', strokeWidth = 1, } = options;
+    const transform = createCoordTransform({ xRange, yRange, width, height });
+    const xDelta = (xRange[1] - xRange[0]) / xSteps;
+    const yDelta = (yRange[1] - yRange[0]) / ySteps;
+    const lines = [];
+    // Vertical lines
+    for (let i = 0; i <= xSteps; i++) {
+        const x = xRange[0] + i * xDelta;
+        const svgX = transform.x(x);
+        lines.push(svgTag('line', {
+            x1: svgX,
+            y1: transform.y(yRange[0]),
+            x2: svgX,
+            y2: transform.y(yRange[1]),
+            stroke,
+            'stroke-width': strokeWidth,
+        }, ''));
+    }
+    // Horizontal lines
+    for (let i = 0; i <= ySteps; i++) {
+        const y = yRange[0] + i * yDelta;
+        const svgY = transform.y(y);
+        lines.push(svgTag('line', {
+            x1: transform.x(xRange[0]),
+            y1: svgY,
+            x2: transform.x(xRange[1]),
+            y2: svgY,
+            stroke,
+            'stroke-width': strokeWidth,
+        }, ''));
+    }
+    return svgTag('g', { class: 'grid' }, lines.join(''));
+}
+/**
+ * Generate axes with labels
+ */
+export function axes(options) {
+    const { xRange, yRange, width, height, showLabels = true, labelStep } = options;
+    const transform = createCoordTransform({ xRange, yRange, width, height });
+    const xZero = transform.x(0);
+    const yZero = transform.y(0);
+    const elements = [];
+    // X axis (draw at y=0 if it's in range, otherwise at bottom)
+    const xAxisY = yRange[0] <= 0 && yRange[1] >= 0 ? yZero : height - 40;
+    elements.push(svgTag('line', {
+        x1: 40,
+        y1: xAxisY,
+        x2: width - 40,
+        y2: xAxisY,
+        stroke: '#000',
+        'stroke-width': 2,
+        'marker-end': 'url(#arrow-default)',
+    }, ''));
+    // Y axis (draw at x=0 if it's in range, otherwise at left)
+    const yAxisX = xRange[0] <= 0 && xRange[1] >= 0 ? xZero : 40;
+    elements.push(svgTag('line', {
+        x1: yAxisX,
+        y1: height - 40,
+        x2: yAxisX,
+        y2: 40,
+        stroke: '#000',
+        'stroke-width': 2,
+        'marker-end': 'url(#arrow-default)',
+    }, ''));
+    // Add axis labels
+    if (showLabels) {
+        const xLabelStep = labelStep || calculateNiceStep(xRange[0], xRange[1]);
+        const yLabelStep = labelStep || calculateNiceStep(yRange[0], yRange[1]);
+        // X-axis labels
+        for (let x = Math.ceil(xRange[0] / xLabelStep) * xLabelStep; x <= xRange[1]; x += xLabelStep) {
+            if (Math.abs(x) < 0.001)
+                continue; // Skip origin
+            const svgX = transform.x(x);
+            elements.push(svgTag('text', {
+                x: svgX,
+                y: xAxisY + 15,
+                'text-anchor': 'middle',
+                'font-size': 12,
+                fill: '#333',
+            }, String(x)));
+        }
+        // Y-axis labels
+        for (let y = Math.ceil(yRange[0] / yLabelStep) * yLabelStep; y <= yRange[1]; y += yLabelStep) {
+            if (Math.abs(y) < 0.001)
+                continue; // Skip origin
+            const svgY = transform.y(y);
+            elements.push(svgTag('text', {
+                x: yAxisX - 10,
+                y: svgY + 4,
+                'text-anchor': 'end',
+                'font-size': 12,
+                fill: '#333',
+            }, String(y)));
+        }
+    }
+    return svgTag('g', { class: 'axes' }, elements.join(''));
+}
+/**
+ * Calculate a nice step size for axis labels
+ */
+function calculateNiceStep(min, max) {
+    const range = max - min;
+    const roughStep = range / 5;
+    // Nice steps: 1, 2, 5, 10, 0.5, 0.2, 0.1, etc.
+    const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+    const normalized = roughStep / magnitude;
+    let niceNormalized;
+    if (normalized < 1.5)
+        niceNormalized = 1;
+    else if (normalized < 3)
+        niceNormalized = 2;
+    else if (normalized < 7)
+        niceNormalized = 5;
+    else
+        niceNormalized = 10;
+    return niceNormalized * magnitude;
+}

package/dist/utils/label.d.ts

@@ -0,0 +1,30 @@
+interface LabelOptions {
+    x: number;
+    y: number;
+    text: string;
+    align?: 'left' | 'center' | 'right';
+    baseline?: 'top' | 'middle' | 'bottom' | 'auto';
+    color?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'bold';
+    rotation?: number;
+}
+/**
+ * Generate positioned text element for labels
+ */
+export declare function label(options: LabelOptions): string;
+/**
+ * Create a text label with background for better visibility
+ */
+export declare function labeledBox(options: LabelOptions & {
+    backgroundColor?: string;
+    padding?: number;
+}): string;
+/**
+ * Generate multi-line label
+ */
+export declare function multilineLabel(options: Omit<LabelOptions, 'text'> & {
+    lines: string[];
+}): string;
+export {};
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/utils/label.ts"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CA4BnD;AAYD;;GAEG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,YAAY,GAAG;IAAE,eAAe,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAoDzG;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,MAAM,CAOhG"}

package/dist/utils/label.js

@@ -0,0 +1,82 @@
+// Label positioning utility
+import { svgTag } from './svgTag';
+/**
+ * Generate positioned text element for labels
+ */
+export function label(options) {
+    const { x, y, text, align = 'center', baseline = 'middle', color = '#000', fontSize = 14, fontWeight = 'normal', rotation = 0, } = options;
+    const attrs = {
+        x: String(x),
+        y: String(y),
+        'text-anchor': align,
+        'dominant-baseline': baseline,
+        fill: color,
+        'font-size': String(fontSize),
+        'font-weight': fontWeight,
+        transform: rotation ? `rotate(${rotation} ${x} ${y})` : undefined,
+    };
+    return `<text ${Object.entries(attrs)
+        .filter(([_, v]) => v !== undefined)
+        .map(([k, v]) => `${k}="${v}"`)
+        .join(' ')}>${escapeText(text)}</text>`;
+}
+/**
+ * Escape text content for SVG
+ */
+function escapeText(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+/**
+ * Create a text label with background for better visibility
+ */
+export function labeledBox(options) {
+    const { x, y, text, backgroundColor = 'white', padding = 4, fontSize = 14, align = 'center', ...rest } = options;
+    // Estimate text width (rough approximation)
+    const textWidth = text.length * fontSize * 0.6;
+    const textHeight = fontSize;
+    // Calculate box dimensions
+    let boxX, boxY, boxWidth, boxHeight;
+    switch (align) {
+        case 'left':
+            boxX = x - padding;
+            boxY = y - textHeight / 2 - padding;
+            boxWidth = textWidth + padding * 2;
+            boxHeight = textHeight + padding * 2;
+            break;
+        case 'right':
+            boxX = x - textWidth - padding;
+            boxY = y - textHeight / 2 - padding;
+            boxWidth = textWidth + padding * 2;
+            boxHeight = textHeight + padding * 2;
+            break;
+        default: // center
+            boxX = x - textWidth / 2 - padding;
+            boxY = y - textHeight / 2 - padding;
+            boxWidth = textWidth + padding * 2;
+            boxHeight = textHeight + padding * 2;
+    }
+    const boxSvg = svgTag('rect', {
+        x: boxX,
+        y: boxY,
+        width: boxWidth,
+        height: boxHeight,
+        fill: backgroundColor,
+        stroke: 'none',
+        rx: 2,
+    }, '');
+    const textSvg = label({ x, y, text, fontSize, align, ...rest });
+    return boxSvg + textSvg;
+}
+/**
+ * Generate multi-line label
+ */
+export function multilineLabel(options) {
+    const { x, y, lines, fontSize = 14, ...rest } = options;
+    const lineHeight = fontSize * 1.2;
+    return lines
+        .map((line, i) => label({ x, y: y + i * lineHeight, text: line, fontSize, ...rest }))
+        .join('');
+}

package/dist/utils/path.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Generate path data string from array of points
+ */
+export declare function pathFromPoints(points: [number, number][], closed?: boolean): string;
+/**
+ * Generate path data for a circle
+ */
+export declare function circlePath(cx: number, cy: number, r: number): string;
+/**
+ * Generate path data for an arc
+ */
+export declare function arcPath(cx: number, cy: number, r: number, startAngle: number, endAngle: number): string;
+/**
+ * Generate path data for an arrow line
+ */
+export declare function arrowLine(x1: number, y1: number, x2: number, y2: number, arrowSize?: number): string;
+/**
+ * Generate path data for dashed line
+ */
+export declare function dashedLine(x1: number, y1: number, x2: number, y2: number, dashLength?: number, gapLength?: number): string;
+//# sourceMappingURL=path.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../src/utils/path.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,GAAE,OAAe,GAAG,MAAM,CAgB1F;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAIpE;AAED;;GAEG;AACH,wBAAgB,OAAO,CACrB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,MAAM,CAYR;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,SAAS,GAAE,MAAW,GACrB,MAAM,CAUR;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAW,EACvB,SAAS,GAAE,MAAU,GACpB,MAAM,CAuBR"}

package/dist/utils/path.js

@@ -0,0 +1,72 @@
+// SVG path generation utilities
+/**
+ * Generate path data string from array of points
+ */
+export function pathFromPoints(points, closed = false) {
+    if (points.length === 0)
+        return '';
+    const [startX, startY] = points[0];
+    let d = `M ${startX} ${startY}`;
+    for (let i = 1; i < points.length; i++) {
+        const [x, y] = points[i];
+        d += ` L ${x} ${y}`;
+    }
+    if (closed) {
+        d += ' Z';
+    }
+    return d;
+}
+/**
+ * Generate path data for a circle
+ */
+export function circlePath(cx, cy, r) {
+    return `M ${cx - r} ${cy}
+          a ${r} ${r} 0 1 0 ${r * 2} 0
+          a ${r} ${r} 0 1 0 -${r * 2} 0`;
+}
+/**
+ * Generate path data for an arc
+ */
+export function arcPath(cx, cy, r, startAngle, endAngle) {
+    const startRad = (startAngle * Math.PI) / 180;
+    const endRad = (endAngle * Math.PI) / 180;
+    const x1 = cx + r * Math.cos(startRad);
+    const y1 = cy - r * Math.sin(startRad);
+    const x2 = cx + r * Math.cos(endRad);
+    const y2 = cy - r * Math.sin(endRad);
+    const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+    return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+}
+/**
+ * Generate path data for an arrow line
+ */
+export function arrowLine(x1, y1, x2, y2, arrowSize = 10) {
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    // Arrow head points
+    const ax1 = x2 - arrowSize * Math.cos(angle - Math.PI / 6);
+    const ay1 = y2 - arrowSize * Math.sin(angle - Math.PI / 6);
+    const ax2 = x2 - arrowSize * Math.cos(angle + Math.PI / 6);
+    const ay2 = y2 - arrowSize * Math.sin(angle + Math.PI / 6);
+    return `M ${x1} ${y1} L ${x2} ${y2} L ${ax1} ${ay1} M ${x2} ${y2} L ${ax2} ${ay2}`;
+}
+/**
+ * Generate path data for dashed line
+ */
+export function dashedLine(x1, y1, x2, y2, dashLength = 10, gapLength = 5) {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx);
+    let d = '';
+    let currentDist = 0;
+    while (currentDist < length) {
+        const startX = x1 + currentDist * Math.cos(angle);
+        const startY = y1 + currentDist * Math.sin(angle);
+        const endDist = Math.min(currentDist + dashLength, length);
+        const endX = x1 + endDist * Math.cos(angle);
+        const endY = y1 + endDist * Math.sin(angle);
+        d += `M ${startX} ${startY} L ${endX} ${endY} `;
+        currentDist = endDist + gapLength;
+    }
+    return d.trim();
+}

package/dist/utils/shapes.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Draw a circle
+ */
+export declare function circle(cx: number, cy: number, r: number, attrs?: Record<string, string | number>): string;
+/**
+ * Draw a rectangle
+ */
+export declare function rect(x: number, y: number, width: number, height: number, attrs?: Record<string, string | number>): string;
+/**
+ * Draw a line
+ */
+export declare function line(x1: number, y1: number, x2: number, y2: number, attrs?: Record<string, string | number>): string;
+/**
+ * Draw a polygon from points
+ */
+export declare function polygon(points: [number, number][], attrs?: Record<string, string | number>): string;
+/**
+ * Draw a path
+ */
+export declare function path(d: string, attrs?: Record<string, string | number>): string;
+/**
+ * Draw text
+ */
+export declare function text(x: number, y: number, content: string, attrs?: Record<string, string | number>): string;
+/**
+ * Draw an ellipse
+ */
+export declare function ellipse(cx: number, cy: number, rx: number, ry: number, attrs?: Record<string, string | number>): string;
+//# sourceMappingURL=shapes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.d.ts","sourceRoot":"","sources":["../../src/utils/shapes.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,MAAM,CACpB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC1C,MAAM,CAOR;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC1C,MAAM,CAQR;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC1C,MAAM,CAQR;AAED;;GAEG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EAC1B,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC1C,MAAM,CAMR;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,CAAC,EAAE,MAAM,EACT,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC1C,MAAM,CAKR;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,OAAO,EAAE,MAAM,EACf,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC1C,MAAM,CAMR;AAED;;GAEG;AACH,wBAAgB,OAAO,CACrB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC1C,MAAM,CAQR"}

package/dist/utils/shapes.js

@@ -0,0 +1,78 @@
+// Common geometric shapes utilities
+import { svgTag } from './svgTag';
+/**
+ * Draw a circle
+ */
+export function circle(cx, cy, r, attrs = {}) {
+    return svgTag('circle', {
+        cx,
+        cy,
+        r,
+        ...attrs,
+    }, '');
+}
+/**
+ * Draw a rectangle
+ */
+export function rect(x, y, width, height, attrs = {}) {
+    return svgTag('rect', {
+        x,
+        y,
+        width,
+        height,
+        ...attrs,
+    }, '');
+}
+/**
+ * Draw a line
+ */
+export function line(x1, y1, x2, y2, attrs = {}) {
+    return svgTag('line', {
+        x1,
+        y1,
+        x2,
+        y2,
+        ...attrs,
+    }, '');
+}
+/**
+ * Draw a polygon from points
+ */
+export function polygon(points, attrs = {}) {
+    const pointsStr = points.map(([x, y]) => `${x},${y}`).join(' ');
+    return svgTag('polygon', {
+        points: pointsStr,
+        ...attrs,
+    }, '');
+}
+/**
+ * Draw a path
+ */
+export function path(d, attrs = {}) {
+    return svgTag('path', {
+        d,
+        ...attrs,
+    }, '');
+}
+/**
+ * Draw text
+ */
+export function text(x, y, content, attrs = {}) {
+    return svgTag('text', {
+        x,
+        y,
+        ...attrs,
+    }, content);
+}
+/**
+ * Draw an ellipse
+ */
+export function ellipse(cx, cy, rx, ry, attrs = {}) {
+    return svgTag('ellipse', {
+        cx,
+        cy,
+        rx,
+        ry,
+        ...attrs,
+    }, '');
+}

package/dist/utils/svgTag.d.ts

@@ -0,0 +1,11 @@
+type SVGAttributes = Record<string, string | number | boolean | undefined>;
+/**
+ * Type-safe SVG element generator
+ * @param tag - SVG element name (e.g., 'rect', 'circle', 'path')
+ * @param attrs - Object containing element attributes
+ * @param content - Inner content (string or nested elements)
+ * @returns SVG element string
+ */
+export declare function svgTag(tag: string, attrs: SVGAttributes, content?: string): string;
+export {};
+//# sourceMappingURL=svgTag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"svgTag.d.ts","sourceRoot":"","sources":["../../src/utils/svgTag.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAE3E;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,MAAW,GAAG,MAAM,CAUtF"}

package/dist/utils/svgTag.js

@@ -0,0 +1,29 @@
+// SVG element builder utility
+/**
+ * Type-safe SVG element generator
+ * @param tag - SVG element name (e.g., 'rect', 'circle', 'path')
+ * @param attrs - Object containing element attributes
+ * @param content - Inner content (string or nested elements)
+ * @returns SVG element string
+ */
+export function svgTag(tag, attrs, content = '') {
+    const attributes = Object.entries(attrs)
+        .filter(([_, value]) => value !== undefined)
+        .map(([key, value]) => `${key}="${escapeAttribute(String(value))}"`)
+        .join(' ');
+    if (content) {
+        return `<${tag} ${attributes}>${content}</${tag}>`;
+    }
+    return `<${tag} ${attributes} />`;
+}
+/**
+ * Escape HTML attribute values
+ */
+function escapeAttribute(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@xrn07/figure-renderer",
+  "version": "0.1.0",
+  "description": "Zero-dependency pure TypeScript figure renderer - pure SVG string generation",
+  "main": "./dist/render.js",
+  "module": "./dist/render.js",
+  "types": "./dist/render.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/render.d.ts",
+      "import": "./dist/render.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build && npm test",
+    "version": "npm run build",
+    "postversion": "git push --follow-tags"
+  },
+  "keywords": [
+    "svg",
+    "renderer",
+    "figure",
+    "diagram",
+    "visualization",
+    "typescript",
+    "education",
+    "circuit",
+    "graph",
+    "geometry",
+    "zero-dependency"
+  ],
+  "author": "Haki",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/haki/figure-renderer.git"
+  },
+  "homepage": "https://github.com/haki/figure-renderer#readme",
+  "bugs": {
+    "url": "https://github.com/haki/figure-renderer/issues"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.31",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0",
+    "zod": "^3.0.0"
+  }
+}