foster-ts-shapes 0.1.0

package/dist/mask.js

@@ -0,0 +1,142 @@
+import { createPrng, maskSeed } from "./prng.js";
+import { applySizeVariance, renderVaried, extractVertices, verticesToPath } from "./variation.js";
+import { buildGradientDef, buildStylingAttrs } from "./styling.js";
+import { shapeId } from "./id.js";
+import { renderSquare } from "./shapes/square.js";
+import { renderRectangle } from "./shapes/rectangle.js";
+import { renderCircle } from "./shapes/circle.js";
+import { renderTriangle } from "./shapes/triangle.js";
+import { renderTrapezoid } from "./shapes/trapezoid.js";
+import { renderOctagon } from "./shapes/octagon.js";
+import { renderPolygon } from "./shapes/polygon.js";
+import { renderOval } from "./shapes/oval.js";
+import { renderBlob } from "./shapes/blob.js";
+// ---------------------------------------------------------------------------
+// buildMaskDef — renders mask shapes into a <mask> SVG element string.
+//
+// maskId        — the id attribute for the <mask> element (e.g. "mask-s1-circle-0")
+// maskShapes    — the canonical MaskShape[] (mask/layer fields already dropped)
+// mode          — "semantic" | "path" (passed through to shape renderers)
+// generatorSeed — top-level generator seed (for deterministic PRNG)
+// parentIndex   — original index of the masked shape (for maskSeed independence)
+// gradientDefs  — accumulator array; mask shape gradients are pushed here so they
+//                 appear in the top-level <defs> block alongside main-shape gradients
+// ---------------------------------------------------------------------------
+export function buildMaskDef(maskId, maskShapes, mode, generatorSeed, parentIndex, gradientDefs) {
+    const elementStrings = [];
+    for (let mi = 0; mi < maskShapes.length; mi++) {
+        const ms = maskShapes[mi];
+        const sv = ms.sizeVariance ?? 0;
+        const dt = ms.distort ?? 0;
+        const bz = ms.bezier ?? 0;
+        // Isolated PRNG for this mask shape — independent from parent shape's varPrng
+        const varPrng = (sv > 0 || dt > 0) ? createPrng(maskSeed(generatorSeed, parentIndex, mi)) : null;
+        // Apply sizeVariance if present
+        const workShape = (sv > 0 && varPrng) ? applySizeVariance(ms, varPrng) : ms;
+        // Render geometry
+        let tag;
+        let attrs;
+        if (dt > 0 || bz > 0) {
+            if (dt > 0 && varPrng) {
+                const r = renderVaried(workShape, varPrng, generatorSeed, mi, bz, workShape.bezierDirection ?? "out");
+                tag = r.tag;
+                attrs = r.attrs;
+            }
+            else {
+                const verts = extractVertices(workShape, generatorSeed, mi);
+                const d = verticesToPath(verts, bz, workShape.bezierDirection ?? "out");
+                tag = "path";
+                attrs = { d };
+            }
+        }
+        else {
+            switch (workShape.type) {
+                case "square": {
+                    const r = renderSquare(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "rectangle": {
+                    const r = renderRectangle(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "circle": {
+                    const r = renderCircle(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "triangle": {
+                    const r = renderTriangle(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "trapezoid": {
+                    const r = renderTrapezoid(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "octagon": {
+                    const r = renderOctagon(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "polygon": {
+                    const r = renderPolygon(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "oval": {
+                    const r = renderOval(workShape, mode);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                case "blob": {
+                    const r = renderBlob(workShape, mode, generatorSeed, mi);
+                    tag = r.tag;
+                    attrs = r.attrs;
+                    break;
+                }
+                default: throw new Error(`Unsupported shape type in mask: ${workShape.type}`);
+            }
+        }
+        // Accumulate gradient defs for this mask shape (if any)
+        const msId = shapeId(generatorSeed, ms.type, mi);
+        let fillGradId;
+        if (ms.fillGradient) {
+            fillGradId = `grad-${msId}-mask-fill`;
+            gradientDefs.push(buildGradientDef(fillGradId, ms.fillGradient));
+        }
+        let strokeGradId;
+        if (ms.strokeGradient) {
+            strokeGradId = `grad-${msId}-mask-stroke`;
+            gradientDefs.push(buildGradientDef(strokeGradId, ms.strokeGradient));
+        }
+        // Apply styling attrs; inject fill="white" default when no fill or fillGradient
+        const stylingAttrs = buildStylingAttrs(ms, fillGradId, strokeGradId);
+        if (stylingAttrs.fill === undefined && fillGradId === undefined) {
+            stylingAttrs.fill = "white";
+        }
+        Object.assign(attrs, stylingAttrs);
+        // Apply rotation as transform attr if present
+        if (ms.rotation !== undefined && ms.rotation !== 0) {
+            attrs["transform"] = `rotate(${ms.rotation}, ${ms.x}, ${ms.y})`;
+        }
+        // Build element string (no id attribute — mask shapes are anonymous)
+        const attrParts = Object.entries(attrs).map(([k, v]) => `${k}="${v}"`);
+        elementStrings.push(`    <${tag} ${attrParts.join(" ")}/>`);
+    }
+    return [
+        `    <mask id="${maskId}" maskUnits="userSpaceOnUse">`,
+        ...elementStrings,
+        `    </mask>`,
+    ].join("\n");
+}

package/dist/prng.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Derive a deterministic seed for a blob shape from the generator seed and shape index.
+ * Combines two integer values into a new seed using prime multiplication.
+ */
+export declare function blobSeed(generatorSeed: number, index: number): number;
+/**
+ * Derive a deterministic seed for a shape's variation PRNG from the generator seed and shape index.
+ * Uses different prime constants from blobSeed to guarantee independence.
+ */
+export declare function varSeed(generatorSeed: number, index: number): number;
+/**
+ * Derive a deterministic seed for a mask shape's PRNG.
+ * Uses different prime constants from blobSeed and varSeed to guarantee independence.
+ * parentIdx is the original (pre-sort) index of the masked shape; maskIdx is the
+ * position of this mask shape within the mask array.
+ */
+export declare function maskSeed(genSeed: number, parentIdx: number, maskIdx: number): number;
+/**
+ * Create a mulberry32 PRNG function seeded with the given value.
+ * Each call to the returned function advances state and returns a float in [0, 1).
+ */
+export declare function createPrng(seed: number): () => number;

package/dist/prng.js

@@ -0,0 +1,36 @@
+/**
+ * Derive a deterministic seed for a blob shape from the generator seed and shape index.
+ * Combines two integer values into a new seed using prime multiplication.
+ */
+export function blobSeed(generatorSeed, index) {
+    return (Math.imul(generatorSeed | 0, 1000003) + Math.imul(index, 2654435761)) | 0;
+}
+/**
+ * Derive a deterministic seed for a shape's variation PRNG from the generator seed and shape index.
+ * Uses different prime constants from blobSeed to guarantee independence.
+ */
+export function varSeed(generatorSeed, index) {
+    return (Math.imul(generatorSeed | 0, 1000033) + Math.imul(index, 2246822519)) | 0;
+}
+/**
+ * Derive a deterministic seed for a mask shape's PRNG.
+ * Uses different prime constants from blobSeed and varSeed to guarantee independence.
+ * parentIdx is the original (pre-sort) index of the masked shape; maskIdx is the
+ * position of this mask shape within the mask array.
+ */
+export function maskSeed(genSeed, parentIdx, maskIdx) {
+    return (Math.imul(genSeed | 0, 1000039) + Math.imul(parentIdx, 65537) + maskIdx) | 0;
+}
+/**
+ * Create a mulberry32 PRNG function seeded with the given value.
+ * Each call to the returned function advances state and returns a float in [0, 1).
+ */
+export function createPrng(seed) {
+    let s = seed | 0;
+    return () => {
+        s = (s + 0x6D2B79F5) | 0;
+        let z = Math.imul(s ^ (s >>> 15), s | 1);
+        z ^= z + Math.imul(z ^ (z >>> 7), z | 61);
+        return ((z ^ (z >>> 14)) >>> 0) / 0x100000000;
+    };
+}

package/dist/shapes/blob.d.ts

@@ -0,0 +1,5 @@
+import type { BlobShape } from "../types.js";
+export declare function renderBlob(shape: BlobShape, _outputMode: "semantic" | "path", generatorSeed: number, shapeIndex: number): {
+    tag: "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/blob.js

@@ -0,0 +1,35 @@
+import { fmt } from "../fmt.js";
+import { createPrng, blobSeed } from "../prng.js";
+export function renderBlob(shape, _outputMode, generatorSeed, shapeIndex) {
+    const { x, y, size } = shape;
+    const n = shape.points ?? 6;
+    const prng = createPrng(blobSeed(generatorSeed, shapeIndex));
+    // Place n control points at evenly-spaced angles with seed-based radial variation
+    const pts = [];
+    for (let k = 0; k < n; k++) {
+        const angle = (k * Math.PI * 2) / n;
+        const radius = size * (0.6 + 0.4 * prng());
+        pts.push([x + radius * Math.cos(angle), y + radius * Math.sin(angle)]);
+    }
+    // Convert closed Catmull-Rom spline to cubic Bézier segments
+    // For segment pts[i] → pts[i+1]:
+    //   CP1 = pts[i]   + (pts[i+1] − pts[i−1]) / 6
+    //   CP2 = pts[i+1] − (pts[i+2] − pts[i])   / 6
+    // Indices are taken modulo n for the closed loop.
+    const p = (i) => pts[((i % n) + n) % n];
+    const segments = [];
+    for (let i = 0; i < n; i++) {
+        const [p0x, p0y] = p(i);
+        const [p1x, p1y] = p(i + 1);
+        const [pm1x, pm1y] = p(i - 1);
+        const [p2x, p2y] = p(i + 2);
+        const cp1x = p0x + (p1x - pm1x) / 6;
+        const cp1y = p0y + (p1y - pm1y) / 6;
+        const cp2x = p1x - (p2x - p0x) / 6;
+        const cp2y = p1y - (p2y - p0y) / 6;
+        segments.push(`C ${fmt(cp1x)} ${fmt(cp1y)} ${fmt(cp2x)} ${fmt(cp2y)} ${fmt(p1x)} ${fmt(p1y)}`);
+    }
+    const [startX, startY] = pts[0];
+    const d = `M ${fmt(startX)} ${fmt(startY)} ${segments.join(" ")} Z`;
+    return { tag: "path", attrs: { d } };
+}

package/dist/shapes/circle.d.ts

@@ -0,0 +1,5 @@
+import type { CircleShape } from "../types.js";
+export declare function renderCircle(shape: CircleShape, outputMode: "semantic" | "path"): {
+    tag: "circle" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/circle.js

@@ -0,0 +1,23 @@
+import { fmt } from "../fmt.js";
+export function renderCircle(shape, outputMode) {
+    const { x, y, size } = shape;
+    const r = size / 2;
+    if (outputMode === "semantic") {
+        return {
+            tag: "circle",
+            attrs: {
+                cx: fmt(x),
+                cy: fmt(y),
+                r: fmt(r),
+            },
+        };
+    }
+    else {
+        // Exact two-arc path (no Bézier)
+        const d = `M ${fmt(x + r)} ${fmt(y)} A ${fmt(r)} ${fmt(r)} 0 1 0 ${fmt(x - r)} ${fmt(y)} A ${fmt(r)} ${fmt(r)} 0 1 0 ${fmt(x + r)} ${fmt(y)} Z`;
+        return {
+            tag: "path",
+            attrs: { d },
+        };
+    }
+}

package/dist/shapes/octagon.d.ts

@@ -0,0 +1,5 @@
+import type { OctagonShape } from "../types.js";
+export declare function renderOctagon(shape: OctagonShape, outputMode: "semantic" | "path"): {
+    tag: "polygon" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/octagon.js

@@ -0,0 +1,24 @@
+import { fmt } from "../fmt.js";
+export function renderOctagon(shape, outputMode) {
+    const { x, y, size } = shape;
+    const n = 8;
+    // Regular octagon: 8 vertices at k·π/4 − π/2, first vertex at top
+    const vertices = [];
+    for (let k = 0; k < n; k++) {
+        const angle = (k * Math.PI * 2) / n - Math.PI / 2;
+        vertices.push([fmt(x + size * Math.cos(angle)), fmt(y + size * Math.sin(angle))]);
+    }
+    if (outputMode === "semantic") {
+        return {
+            tag: "polygon",
+            attrs: {
+                points: vertices.map(([vx, vy]) => `${vx},${vy}`).join(" "),
+            },
+        };
+    }
+    else {
+        const [first, ...rest] = vertices;
+        const d = `M ${first[0]} ${first[1]} ` + rest.map(([vx, vy]) => `L ${vx} ${vy}`).join(" ") + " Z";
+        return { tag: "path", attrs: { d } };
+    }
+}

package/dist/shapes/oval.d.ts

@@ -0,0 +1,5 @@
+import type { OvalShape } from "../types.js";
+export declare function renderOval(shape: OvalShape, outputMode: "semantic" | "path"): {
+    tag: "ellipse" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/oval.js

@@ -0,0 +1,31 @@
+import { fmt } from "../fmt.js";
+export function renderOval(shape, outputMode) {
+    const { x, y, width, height } = shape;
+    const rx = width / 2;
+    const ry = height / 2;
+    if (outputMode === "semantic") {
+        return {
+            tag: "ellipse",
+            attrs: {
+                cx: fmt(x),
+                cy: fmt(y),
+                rx: fmt(rx),
+                ry: fmt(ry),
+            },
+        };
+    }
+    else {
+        // Two-arc path split at left and right extremes (exact ellipse representation)
+        const right = fmt(x + rx);
+        const left = fmt(x - rx);
+        const cy = fmt(y);
+        const rxF = fmt(rx);
+        const ryF = fmt(ry);
+        return {
+            tag: "path",
+            attrs: {
+                d: `M ${right} ${cy} A ${rxF} ${ryF} 0 1 0 ${left} ${cy} A ${rxF} ${ryF} 0 1 0 ${right} ${cy} Z`,
+            },
+        };
+    }
+}

package/dist/shapes/polygon.d.ts

@@ -0,0 +1,5 @@
+import type { PolygonShape } from "../types.js";
+export declare function renderPolygon(shape: PolygonShape, outputMode: "semantic" | "path"): {
+    tag: "polygon" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/polygon.js

@@ -0,0 +1,23 @@
+import { fmt } from "../fmt.js";
+export function renderPolygon(shape, outputMode) {
+    const { x, y, size, sides } = shape;
+    // Regular n-gon: n vertices at 2πk/n − π/2, first vertex at top
+    const vertices = [];
+    for (let k = 0; k < sides; k++) {
+        const angle = (k * Math.PI * 2) / sides - Math.PI / 2;
+        vertices.push([fmt(x + size * Math.cos(angle)), fmt(y + size * Math.sin(angle))]);
+    }
+    if (outputMode === "semantic") {
+        return {
+            tag: "polygon",
+            attrs: {
+                points: vertices.map(([vx, vy]) => `${vx},${vy}`).join(" "),
+            },
+        };
+    }
+    else {
+        const [first, ...rest] = vertices;
+        const d = `M ${first[0]} ${first[1]} ` + rest.map(([vx, vy]) => `L ${vx} ${vy}`).join(" ") + " Z";
+        return { tag: "path", attrs: { d } };
+    }
+}

package/dist/shapes/rectangle.d.ts

@@ -0,0 +1,5 @@
+import type { RectangleShape } from "../types.js";
+export declare function renderRectangle(shape: RectangleShape, outputMode: "semantic" | "path"): {
+    tag: "rect" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/rectangle.js

@@ -0,0 +1,34 @@
+import { fmt } from "../fmt.js";
+export function renderRectangle(shape, outputMode) {
+    const { x, y, width, height } = shape;
+    const halfW = width / 2;
+    const halfH = height / 2;
+    if (outputMode === "semantic") {
+        return {
+            tag: "rect",
+            attrs: {
+                x: fmt(x - halfW),
+                y: fmt(y - halfH),
+                width: fmt(width),
+                height: fmt(height),
+            },
+        };
+    }
+    else {
+        // TL → TR → BR → BL
+        const x1 = fmt(x - halfW);
+        const y1 = fmt(y - halfH);
+        const x2 = fmt(x + halfW);
+        const y2 = fmt(y - halfH);
+        const x3 = fmt(x + halfW);
+        const y3 = fmt(y + halfH);
+        const x4 = fmt(x - halfW);
+        const y4 = fmt(y + halfH);
+        return {
+            tag: "path",
+            attrs: {
+                d: `M ${x1} ${y1} L ${x2} ${y2} L ${x3} ${y3} L ${x4} ${y4} Z`,
+            },
+        };
+    }
+}

package/dist/shapes/square.d.ts

@@ -0,0 +1,5 @@
+import type { SquareShape } from "../types.js";
+export declare function renderSquare(shape: SquareShape, outputMode: "semantic" | "path"): {
+    tag: "rect" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/square.js

@@ -0,0 +1,34 @@
+import { fmt } from "../fmt.js";
+export function renderSquare(shape, outputMode) {
+    const { x, y, size } = shape;
+    const halfW = size / 2;
+    const halfH = size / 2;
+    if (outputMode === "semantic") {
+        return {
+            tag: "rect",
+            attrs: {
+                x: fmt(x - halfW),
+                y: fmt(y - halfH),
+                width: fmt(size),
+                height: fmt(size),
+            },
+        };
+    }
+    else {
+        // TL → TR → BR → BL
+        const x1 = fmt(x - halfW);
+        const y1 = fmt(y - halfH);
+        const x2 = fmt(x + halfW);
+        const y2 = fmt(y - halfH);
+        const x3 = fmt(x + halfW);
+        const y3 = fmt(y + halfH);
+        const x4 = fmt(x - halfW);
+        const y4 = fmt(y + halfH);
+        return {
+            tag: "path",
+            attrs: {
+                d: `M ${x1} ${y1} L ${x2} ${y2} L ${x3} ${y3} L ${x4} ${y4} Z`,
+            },
+        };
+    }
+}

package/dist/shapes/trapezoid.d.ts

@@ -0,0 +1,5 @@
+import type { TrapezoidShape } from "../types.js";
+export declare function renderTrapezoid(shape: TrapezoidShape, outputMode: "semantic" | "path"): {
+    tag: "polygon" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/trapezoid.js

@@ -0,0 +1,29 @@
+import { fmt } from "../fmt.js";
+export function renderTrapezoid(shape, outputMode) {
+    const { x, y, topWidth, bottomWidth, height } = shape;
+    // Bounding-box center: top edge at y - height/2, bottom at y + height/2
+    const tlX = fmt(x - topWidth / 2);
+    const tlY = fmt(y - height / 2);
+    const trX = fmt(x + topWidth / 2);
+    const trY = fmt(y - height / 2);
+    const brX = fmt(x + bottomWidth / 2);
+    const brY = fmt(y + height / 2);
+    const blX = fmt(x - bottomWidth / 2);
+    const blY = fmt(y + height / 2);
+    if (outputMode === "semantic") {
+        return {
+            tag: "polygon",
+            attrs: {
+                points: `${tlX},${tlY} ${trX},${trY} ${brX},${brY} ${blX},${blY}`,
+            },
+        };
+    }
+    else {
+        return {
+            tag: "path",
+            attrs: {
+                d: `M ${tlX} ${tlY} L ${trX} ${trY} L ${brX} ${brY} L ${blX} ${blY} Z`,
+            },
+        };
+    }
+}

package/dist/shapes/triangle.d.ts

@@ -0,0 +1,5 @@
+import type { TriangleShape } from "../types.js";
+export declare function renderTriangle(shape: TriangleShape, outputMode: "semantic" | "path"): {
+    tag: "polygon" | "path";
+    attrs: Record<string, string | number>;
+};

package/dist/shapes/triangle.js

@@ -0,0 +1,28 @@
+import { fmt } from "../fmt.js";
+export function renderTriangle(shape, outputMode) {
+    const { x, y, size } = shape;
+    const h = size * Math.sqrt(3) / 2;
+    // Equilateral triangle centroid vertices
+    const topX = fmt(x);
+    const topY = fmt(y - (2 * h) / 3);
+    const blX = fmt(x - size / 2);
+    const blY = fmt(y + h / 3);
+    const brX = fmt(x + size / 2);
+    const brY = fmt(y + h / 3);
+    if (outputMode === "semantic") {
+        return {
+            tag: "polygon",
+            attrs: {
+                points: `${topX},${topY} ${blX},${blY} ${brX},${brY}`,
+            },
+        };
+    }
+    else {
+        return {
+            tag: "path",
+            attrs: {
+                d: `M ${topX} ${topY} L ${blX} ${blY} L ${brX} ${brY} Z`,
+            },
+        };
+    }
+}

package/dist/styling.d.ts

@@ -0,0 +1,3 @@
+import type { Gradient, ShapeBase } from "./types.js";
+export declare function buildGradientDef(gradientId: string, gradient: Gradient): string;
+export declare function buildStylingAttrs(shape: ShapeBase, fillGradId?: string, strokeGradId?: string): Record<string, string | number>;

package/dist/styling.js

@@ -0,0 +1,65 @@
+import { fmt } from "./fmt.js";
+// ---------------------------------------------------------------------------
+// buildGradientDef — build SVG <linearGradient> or <radialGradient> element string
+// ---------------------------------------------------------------------------
+export function buildGradientDef(gradientId, gradient) {
+    const stops = gradient.stops.map((stop) => {
+        let s = `      <stop offset="${fmt(stop.offset)}" stop-color="${stop.color}"`;
+        if (stop.opacity !== undefined)
+            s += ` stop-opacity="${fmt(stop.opacity)}"`;
+        s += "/>";
+        return s;
+    }).join("\n");
+    if (gradient.type === "linear") {
+        const x1 = gradient.x1 ?? 0;
+        const y1 = gradient.y1 ?? 0;
+        const x2 = gradient.x2 ?? 1;
+        const y2 = gradient.y2 ?? 0;
+        return [
+            `    <linearGradient id="${gradientId}" x1="${fmt(x1)}" y1="${fmt(y1)}" x2="${fmt(x2)}" y2="${fmt(y2)}" gradientUnits="objectBoundingBox">`,
+            stops,
+            `    </linearGradient>`,
+        ].join("\n");
+    }
+    else {
+        const cx = gradient.cx ?? 0.5;
+        const cy = gradient.cy ?? 0.5;
+        const r = gradient.r ?? 0.5;
+        return [
+            `    <radialGradient id="${gradientId}" cx="${fmt(cx)}" cy="${fmt(cy)}" r="${fmt(r)}" gradientUnits="objectBoundingBox">`,
+            stops,
+            `    </radialGradient>`,
+        ].join("\n");
+    }
+}
+// ---------------------------------------------------------------------------
+// buildStylingAttrs — build SVG presentation attributes from styling fields
+// Handles fill/stroke precedence: gradient URL overrides string color.
+// ---------------------------------------------------------------------------
+export function buildStylingAttrs(shape, fillGradId, strokeGradId) {
+    const attrs = {};
+    // Fill: gradient URL takes precedence over string color
+    if (fillGradId !== undefined) {
+        attrs.fill = `url(#${fillGradId})`;
+    }
+    else if (shape.fill !== undefined) {
+        attrs.fill = shape.fill;
+    }
+    // Stroke: gradient URL takes precedence over string color
+    if (strokeGradId !== undefined) {
+        attrs.stroke = `url(#${strokeGradId})`;
+    }
+    else if (shape.stroke !== undefined) {
+        attrs.stroke = shape.stroke;
+    }
+    // stroke-width: only emitted when there is a stroke source
+    const hasStrokeSrc = strokeGradId !== undefined || shape.stroke !== undefined;
+    if (hasStrokeSrc && shape.strokeWidth !== undefined) {
+        attrs["stroke-width"] = fmt(shape.strokeWidth);
+    }
+    // Opacity
+    if (shape.opacity !== undefined) {
+        attrs.opacity = fmt(shape.opacity);
+    }
+    return attrs;
+}

package/dist/svg.d.ts

@@ -0,0 +1,2 @@
+import type { Canvas, ShapeElement } from "./types.js";
+export declare function assembleSvg(canvas: Canvas, elements: ShapeElement[], defs?: string[]): string;

package/dist/svg.js

@@ -0,0 +1,22 @@
+export function assembleSvg(canvas, elements, defs) {
+    const children = elements.map((el) => {
+        const attrs = [];
+        attrs.push(`id="${el.id}"`);
+        for (const [k, v] of Object.entries(el.attrs)) {
+            attrs.push(`${k}="${v}"`);
+        }
+        if (el.rotation !== undefined && el.rotation !== 0) {
+            attrs.push(`transform="rotate(${el.rotation}, ${el.cx}, ${el.cy})"`);
+        }
+        return `<${el.tag} ${attrs.join(" ")}/>`;
+    });
+    const defsBlock = defs && defs.length > 0
+        ? [`  <defs>`, ...defs, `  </defs>`]
+        : [];
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}" viewBox="0 0 ${canvas.width} ${canvas.height}">`,
+        ...defsBlock,
+        ...children.map((c) => `  ${c}`),
+        `</svg>`,
+    ].join("\n");
+}