sketchmark 2.0.0

package/dist/src/project.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadVisualProject = loadVisualProject;
+exports.buildSymbolIndex = buildSymbolIndex;
+exports.validateVisualProject = validateVisualProject;
+const validate_1 = require("./validate");
+const utils_1 = require("./utils");
+const fs = require("node:fs");
+const path = require("node:path");
+function loadVisualProject(entryPath) {
+    const entry = path.resolve(entryPath);
+    const root = path.dirname(entry);
+    const files = {};
+    const document = loadRecursive(entry, root, files, new Set());
+    const project = { root, entry, document, files, symbols: [] };
+    project.symbols = buildSymbolIndex(project);
+    const result = validateVisualProject(project);
+    if (!result.ok) {
+        const first = result.issues[0];
+        throw new Error(first ? `${first.path}: ${first.message}` : "Invalid visual project.");
+    }
+    return project;
+}
+function buildSymbolIndex(project) {
+    const symbols = [];
+    const addElements = (elements, file, scene, prefix) => {
+        for (const [index, element] of (0, utils_1.flattenElements)(elements ?? []).entries()) {
+            if (!element.id)
+                continue;
+            symbols.push({
+                id: element.id,
+                type: element.type,
+                ...(file ? { file } : {}),
+                ...(scene ? { scene } : {}),
+                path: `${prefix}/${index}`
+            });
+        }
+    };
+    for (const [file, document] of Object.entries(project.files ?? {})) {
+        addElements(document.elements, file, undefined, `/files/${file}/elements`);
+        for (const [sceneId, scene] of Object.entries(document.scenes ?? {})) {
+            addElements(scene.elements, file, sceneId, `/files/${file}/scenes/${sceneId}/elements`);
+        }
+    }
+    if (!project.files || !Object.keys(project.files).length) {
+        addElements(project.document.elements, undefined, undefined, "/elements");
+        for (const [sceneId, scene] of Object.entries(project.document.scenes ?? {})) {
+            addElements(scene.elements, undefined, sceneId, `/scenes/${sceneId}/elements`);
+        }
+    }
+    return symbols;
+}
+function validateVisualProject(project) {
+    const merged = (0, validate_1.validateVisualDocument)(project.document);
+    const issues = [...merged.issues];
+    const warnings = [...merged.warnings];
+    for (const [file, document] of Object.entries(project.files ?? {})) {
+        const result = (0, validate_1.validateVisualDocument)({ ...document, sequences: undefined });
+        issues.push(...result.issues.map((item) => ({ ...item, path: `/files/${file}${item.path}` })));
+        warnings.push(...result.warnings.map((item) => ({ ...item, path: `/files/${file}${item.path}` })));
+    }
+    const seen = new Set();
+    for (const symbol of project.symbols ?? []) {
+        const scope = `${symbol.file ?? "<merged>"}:${symbol.scene ?? "<root>"}:${symbol.id}`;
+        if (seen.has(scope)) {
+            issues.push({
+                path: symbol.path,
+                code: "duplicate_symbol",
+                message: `Duplicate id '${symbol.id}' in the same file/scene scope.`,
+                suggestion: "Use stable unique ids so AI patches can target one primitive."
+            });
+        }
+        seen.add(scope);
+    }
+    return { ok: issues.length === 0, issues, warnings };
+}
+function loadRecursive(filePath, root, files, seen) {
+    const absolute = path.resolve(filePath);
+    const relative = normalizePath(path.relative(root, absolute));
+    if (seen.has(absolute))
+        throw new Error(`Circular import detected at '${relative}'.`);
+    seen.add(absolute);
+    const source = JSON.parse(fs.readFileSync(absolute, "utf8"));
+    files[relative] = source;
+    const merged = {
+        ...source,
+        elements: [...(source.elements ?? [])],
+        scenes: { ...(source.scenes ?? {}) },
+        sequences: { ...(source.sequences ?? {}) },
+        assets: { ...(source.assets ?? {}) }
+    };
+    for (const [key, importPath] of Object.entries(source.imports ?? {})) {
+        const child = loadRecursive(path.resolve(path.dirname(absolute), importPath), root, files, seen);
+        if (child.elements?.length) {
+            merged.scenes = merged.scenes ?? {};
+            merged.scenes[key] = { id: key, canvas: child.canvas, elements: child.elements };
+        }
+        merged.scenes = { ...(merged.scenes ?? {}), ...(child.scenes ?? {}) };
+        merged.sequences = { ...(merged.sequences ?? {}), ...(child.sequences ?? {}) };
+        merged.assets = { ...(merged.assets ?? {}), ...(child.assets ?? {}) };
+    }
+    seen.delete(absolute);
+    return merged;
+}
+function normalizePath(value) {
+    return value.replace(/\\/g, "/");
+}

package/dist/src/render/html.d.ts

@@ -0,0 +1,2 @@
+import type { RenderOptions, VisualDocument } from "../types";
+export declare function renderToHtml(document: VisualDocument, options?: RenderOptions): string;

package/dist/src/render/html.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToHtml = renderToHtml;
+const three_html_1 = require("./three-html");
+const svg_1 = require("./svg");
+function renderToHtml(document, options = {}) {
+    if (document.canvas.renderer === "three")
+        return (0, three_html_1.renderToThreeHtml)(document, options);
+    const svg = (0, svg_1.renderToSvg)(document, options);
+    const duration = Number(document.canvas.duration ?? 0);
+    const background = options.transparent ? "transparent" : "#111827";
+    return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sketchmark Visual</title><style>html,body{margin:0;width:100%;height:100%;background:${background};display:grid;place-items:center}.sketchmark-frame{max-width:100vw;max-height:100vh}</style></head><body><div class="sketchmark-frame" data-duration="${duration}">${svg}</div></body></html>`;
+}

package/dist/src/render/raw-three.d.ts

@@ -0,0 +1,7 @@
+export interface RawThreeModuleOptions {
+    width: number;
+    height: number;
+    moduleUrl: string;
+    background?: string;
+}
+export declare function renderRawThreeModuleHtml(options: RawThreeModuleOptions): string;

package/dist/src/render/raw-three.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderRawThreeModuleHtml = renderRawThreeModuleHtml;
+function renderRawThreeModuleHtml(options) {
+    const background = options.background ?? "#ffffff";
+    return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sketchmark Raw Three Module</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:${escapeCss(background)}}canvas{display:block}</style></head><body><canvas id="stage"></canvas><script type="module">
+import { createSketchmarkThreeScene } from ${JSON.stringify(options.moduleUrl)};
+const canvas = document.getElementById("stage");
+const runtime = await createSketchmarkThreeScene({ canvas, width: ${Number(options.width)}, height: ${Number(options.height)}, background: ${JSON.stringify(background)} });
+if (runtime && typeof runtime.render === "function") runtime.render(0);
+window.__SKETCHMARK_SHOW_TIME__ = (time) => runtime && typeof runtime.render === "function" ? runtime.render(time || 0) : undefined;
+window.__SKETCHMARK_READY__ = true;
+</script></body></html>`;
+}
+function escapeCss(value) {
+    return String(value).replace(/[<>"'()\\]/g, "");
+}

package/dist/src/render/svg.d.ts

@@ -0,0 +1,3 @@
+import type { KernelVisualDocument, RenderOptions, ResolvedVisualDocument, VisualDocument } from "../types";
+export declare function renderToSvg(document: VisualDocument, options?: RenderOptions): string;
+export declare function renderResolvedSvg(document: ResolvedVisualDocument | KernelVisualDocument, options?: RenderOptions): string;

package/dist/src/render/svg.js

@@ -0,0 +1,277 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToSvg = renderToSvg;
+exports.renderResolvedSvg = renderResolvedSvg;
+const kernel_1 = require("../kernel");
+const utils_1 = require("../utils");
+function renderToSvg(document, options = {}) {
+    const frame = (0, kernel_1.resolveKernelFrame)(document, options.time ?? 0);
+    return renderResolvedSvg(frame, options);
+}
+function renderResolvedSvg(document, options = {}) {
+    const kernel = isKernelVisualDocument(document) ? document : (0, kernel_1.lowerResolvedVisualDocument)(document);
+    const width = document.canvas.width;
+    const height = document.canvas.height;
+    const background = document.canvas.background ?? "#ffffff";
+    const context = { defs: [], nextId: 0, markerIds: new Map() };
+    const elements = (kernel.elements ?? []).map((element) => renderElement(element, context)).join("");
+    const backdrop = options.transparent ? "" : `<rect x="0" y="0" width="${width}" height="${height}" fill="${escapeAttr(background)}"/>`;
+    const defs = context.defs.length ? `<defs>${context.defs.join("")}</defs>` : "";
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img">${defs}${backdrop}${elements}</svg>`;
+}
+function renderElement(element, context) {
+    const attrs = commonAttrs(element, context);
+    const fill = paintValue(element.fill, context, element.type === "text" ? "#111827" : "none");
+    const stroke = strokeAttrs(element, context, "none");
+    switch (element.type) {
+        case "point":
+            return "";
+        case "path": {
+            const marker = element.metadata?.markerEnd === "arrow" ? ` marker-end="url(#${markerForStroke(element.stroke, context)})"` : "";
+            return `<path${attrs} d="${escapeAttr(element.d)}" fill="${fill}"${stroke}${marker}${drawAttrs(element)}/>`;
+        }
+        case "text":
+            return renderText(element, attrs, fill);
+        case "image":
+            return renderImage(element, attrs, context);
+        case "group": {
+            const transform = groupTransform(element);
+            const children = (element.children ?? []).map((child) => renderElement(child, context)).join("");
+            return `<g${attrs}${transform}>${children}</g>`;
+        }
+        default:
+            return "";
+    }
+}
+function isKernelVisualDocument(document) {
+    return (document.elements ?? []).every((element) => element.type === "group" || element.type === "path" || element.type === "text" || element.type === "image" || element.type === "point" || element.type === "group3d" || element.type === "mesh3d" || element.type === "line3d" || element.type === "text3d" || element.type === "point3d" || element.type === "light");
+}
+function renderImage(element, attrs, context) {
+    if (element.source) {
+        const id = nextId(context, "image-crop");
+        const scaleX = element.width / element.source.width;
+        const scaleY = element.height / element.source.height;
+        const imageX = element.x - element.source.x * scaleX;
+        const imageY = element.y - element.source.y * scaleY;
+        const imageWidth = element.source.imageWidth * scaleX;
+        const imageHeight = element.source.imageHeight * scaleY;
+        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><rect x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}"/></clipPath>`);
+        return `<image${attrs} href="${escapeAttr(element.src)}" x="${imageX}" y="${imageY}" width="${imageWidth}" height="${imageHeight}" preserveAspectRatio="none" clip-path="url(#${id})"/>`;
+    }
+    return `<image${attrs} href="${escapeAttr(element.src)}" x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}" preserveAspectRatio="${imageFit(element.fit)}"/>`;
+}
+function renderText(element, attrs, fill) {
+    const anchor = element.align === "right" ? "end" : element.align === "left" ? "start" : "middle";
+    const fontSize = Number(element.fontSize ?? 16);
+    const lineHeight = fontSize * Number(element.lineHeight ?? 1.2);
+    const lines = (0, utils_1.textLines)(element);
+    const weight = escapeAttr(String(element.weight ?? 400));
+    const fontFamily = escapeAttr(String(element.fontFamily ?? "Inter, Arial, sans-serif"));
+    const fontStyle = element.fontStyle ? ` font-style="${escapeAttr(String(element.fontStyle))}"` : "";
+    const letterSpacing = (0, utils_1.isFiniteNumber)(element.letterSpacing) ? ` letter-spacing="${element.letterSpacing}"` : "";
+    const firstY = textFirstLineY(element, lines.length, fontSize, lineHeight);
+    const content = lines
+        .map((line, index) => `<tspan x="${element.x}" y="${firstY + index * lineHeight}">${escapeText(line)}</tspan>`)
+        .join("");
+    return `<text${attrs} text-anchor="${anchor}" dominant-baseline="middle" font-family="${fontFamily}" font-size="${fontSize}" font-weight="${weight}"${fontStyle}${letterSpacing} fill="${fill}">${content}</text>`;
+}
+function textFirstLineY(element, lineCount, fontSize, lineHeight) {
+    if (element.valign === "top")
+        return element.y + fontSize / 2;
+    if (element.valign === "bottom")
+        return element.y - fontSize / 2 - (lineCount - 1) * lineHeight;
+    return element.y - ((lineCount - 1) * lineHeight) / 2;
+}
+function commonAttrs(element, context) {
+    const id = element.id ? ` id="${escapeAttr(element.id)}"` : "";
+    const opacity = element.opacity === undefined ? "" : ` opacity="${Number(element.opacity)}"`;
+    const filter = effectFilter(element.effects, context);
+    const clip = clipPath(element.clip, context);
+    const mask = maskPath(element.mask, context);
+    const blend = element.blendMode && element.blendMode !== "normal" ? ` style="mix-blend-mode:${escapeAttr(element.blendMode)}"` : "";
+    const transform = element.type === "group" ? "" : elementTransform(element);
+    return `${id}${opacity}${filter}${clip}${mask}${blend}${transform}`;
+}
+function strokeAttrs(element, context, fallback) {
+    const hasStroke = element.stroke !== undefined || element.strokeWidth !== undefined || fallback !== "none";
+    if (!hasStroke)
+        return "";
+    const stroke = paintValue(element.stroke, context, fallback);
+    const width = Number(element.strokeWidth ?? (fallback === "none" ? 0 : 1));
+    const cap = element.strokeCap ? ` stroke-linecap="${escapeAttr(element.strokeCap)}"` : "";
+    const join = element.strokeJoin ? ` stroke-linejoin="${escapeAttr(element.strokeJoin)}"` : "";
+    const miter = (0, utils_1.isFiniteNumber)(element.miterLimit) ? ` stroke-miterlimit="${element.miterLimit}"` : "";
+    const dash = element.drawStart !== undefined || element.drawEnd !== undefined ? "" : dashAttrs(element);
+    return ` stroke="${stroke}" stroke-width="${width}"${cap}${join}${miter}${dash}`;
+}
+function dashAttrs(element) {
+    const dash = Array.isArray(element.dashArray) ? ` stroke-dasharray="${element.dashArray.join(" ")}"` : "";
+    const offset = (0, utils_1.isFiniteNumber)(element.dashOffset) ? ` stroke-dashoffset="${element.dashOffset}"` : "";
+    return `${dash}${offset}`;
+}
+function drawAttrs(element) {
+    if (element.drawStart === undefined && element.drawEnd === undefined)
+        return "";
+    const start = clamp(Number(element.drawStart ?? 0), 0, 1);
+    const end = clamp(Number(element.drawEnd ?? 1), 0, 1);
+    const visible = Math.max(0, end - start);
+    return ` pathLength="1" stroke-dasharray="${visible} 1" stroke-dashoffset="${-start}"`;
+}
+function paintValue(paint, context, fallback) {
+    if (paint === undefined)
+        return escapeAttr(fallback);
+    if (typeof paint === "string")
+        return escapeAttr(paint);
+    const id = nextId(context, paint.type === "linearGradient" ? "linear-gradient" : paint.type === "radialGradient" ? "radial-gradient" : "pattern");
+    if (paint.type === "linearGradient") {
+        context.defs.push(`<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${paint.from[0]}" y1="${paint.from[1]}" x2="${paint.to[0]}" y2="${paint.to[1]}">${gradientStops(paint.stops)}</linearGradient>`);
+    }
+    else if (paint.type === "radialGradient") {
+        const focus = paint.focus ?? paint.center;
+        context.defs.push(`<radialGradient id="${id}" gradientUnits="userSpaceOnUse" cx="${paint.center[0]}" cy="${paint.center[1]}" r="${paint.radius}" fx="${focus[0]}" fy="${focus[1]}">${gradientStops(paint.stops)}</radialGradient>`);
+    }
+    else {
+        const opacity = paint.opacity === undefined ? "" : ` opacity="${Number(paint.opacity)}"`;
+        context.defs.push(`<pattern id="${id}" patternUnits="userSpaceOnUse" x="${Number(paint.x ?? 0)}" y="${Number(paint.y ?? 0)}" width="${paint.width}" height="${paint.height}"><image href="${escapeAttr(paint.src)}" x="0" y="0" width="${paint.width}" height="${paint.height}" preserveAspectRatio="${imageFit(paint.fit)}"${opacity}/></pattern>`);
+    }
+    return `url(#${id})`;
+}
+function gradientStops(stops) {
+    return stops
+        .map((stop) => {
+        const offset = Array.isArray(stop) ? stop[0] : stop.offset;
+        const color = Array.isArray(stop) ? stop[1] : stop.color;
+        return `<stop offset="${Number(offset) * 100}%" stop-color="${escapeAttr(String(color))}"/>`;
+    })
+        .join("");
+}
+function markerForStroke(stroke, context) {
+    const color = typeof stroke === "string" ? stroke : "#111827";
+    const cached = context.markerIds.get(color);
+    if (cached)
+        return cached;
+    const id = nextId(context, "arrow");
+    context.markerIds.set(color, id);
+    context.defs.push(`<marker id="${id}" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 5 L 0 10 z" fill="${escapeAttr(color)}"/></marker>`);
+    return id;
+}
+function effectFilter(effects, context) {
+    if (!effects)
+        return "";
+    const parts = [];
+    if ((0, utils_1.isFiniteNumber)(effects.blur) && effects.blur > 0)
+        parts.push(`<feGaussianBlur stdDeviation="${effects.blur}" result="blur"/>`);
+    if ((0, utils_1.isFiniteNumber)(effects.brightness) || (0, utils_1.isFiniteNumber)(effects.contrast)) {
+        const brightness = effects.brightness ?? 1;
+        const contrast = effects.contrast ?? 1;
+        const intercept = 0.5 - contrast * 0.5;
+        parts.push(`<feComponentTransfer><feFuncR type="linear" slope="${brightness * contrast}" intercept="${intercept}"/><feFuncG type="linear" slope="${brightness * contrast}" intercept="${intercept}"/><feFuncB type="linear" slope="${brightness * contrast}" intercept="${intercept}"/></feComponentTransfer>`);
+    }
+    if ((0, utils_1.isFiniteNumber)(effects.saturate))
+        parts.push(`<feColorMatrix type="saturate" values="${effects.saturate}"/>`);
+    if ((0, utils_1.isFiniteNumber)(effects.hueRotate))
+        parts.push(`<feColorMatrix type="hueRotate" values="${effects.hueRotate}"/>`);
+    if (effects.shadow) {
+        const opacity = effects.shadow.opacity ?? 1;
+        parts.push(`<feDropShadow dx="${effects.shadow.dx}" dy="${effects.shadow.dy}" stdDeviation="${effects.shadow.blur}" flood-color="${escapeAttr(effects.shadow.color)}" flood-opacity="${opacity}"/>`);
+    }
+    if (!parts.length)
+        return "";
+    const id = nextId(context, "filter");
+    context.defs.push(`<filter id="${id}" x="-50%" y="-50%" width="200%" height="200%">${parts.join("")}</filter>`);
+    return ` filter="url(#${id})"`;
+}
+function clipPath(clip, context) {
+    if (!clip)
+        return "";
+    const id = nextId(context, "clip");
+    if (clip.type === "rect") {
+        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><rect x="${clip.x}" y="${clip.y}" width="${clip.width}" height="${clip.height}" rx="${Number(clip.radius ?? 0)}"/></clipPath>`);
+    }
+    else if (clip.type === "circle") {
+        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><circle cx="${clip.cx}" cy="${clip.cy}" r="${clip.radius}"/></clipPath>`);
+    }
+    else {
+        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><path d="${escapeAttr(clip.d)}"/></clipPath>`);
+    }
+    return ` clip-path="url(#${id})"`;
+}
+function maskPath(mask, context) {
+    if (!mask)
+        return "";
+    const id = nextId(context, "mask");
+    const opacity = mask.opacity === undefined ? "" : ` opacity="${Number(mask.opacity)}"`;
+    if (mask.type === "rect") {
+        context.defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000"><rect x="${mask.x}" y="${mask.y}" width="${mask.width}" height="${mask.height}" rx="${Number(mask.radius ?? 0)}" fill="#ffffff"${opacity}/></mask>`);
+    }
+    else if (mask.type === "circle") {
+        context.defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000"><circle cx="${mask.cx}" cy="${mask.cy}" r="${mask.radius}" fill="#ffffff"${opacity}/></mask>`);
+    }
+    else {
+        context.defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000"><path d="${escapeAttr(mask.d)}" fill="#ffffff"${opacity}/></mask>`);
+    }
+    return ` mask="url(#${id})"`;
+}
+function elementTransform(element) {
+    const rotation = Number(element.rotation ?? 0);
+    const scaleX = Number(element.scaleX ?? element.scale ?? 1);
+    const scaleY = Number(element.scaleY ?? element.scale ?? 1);
+    if (rotation === 0 && scaleX === 1 && scaleY === 1)
+        return "";
+    const origin = originPoint(element);
+    const transforms = [];
+    if (rotation !== 0)
+        transforms.push(`rotate(${rotation} ${origin[0]} ${origin[1]})`);
+    if (scaleX !== 1 || scaleY !== 1)
+        transforms.push(`translate(${origin[0]} ${origin[1]}) scale(${scaleX} ${scaleY}) translate(${-origin[0]} ${-origin[1]})`);
+    return transforms.length ? ` transform="${transforms.join(" ")}"` : "";
+}
+function groupTransform(element) {
+    const base = `translate(${element.x} ${element.y})`;
+    const rotation = Number(element.rotation ?? 0);
+    const scaleX = Number(element.scaleX ?? element.scale ?? 1);
+    const scaleY = Number(element.scaleY ?? element.scale ?? 1);
+    const origin = groupOrigin(element);
+    const transforms = [base];
+    if (rotation !== 0)
+        transforms.push(`rotate(${rotation} ${origin[0]} ${origin[1]})`);
+    if (scaleX !== 1 || scaleY !== 1)
+        transforms.push(`translate(${origin[0]} ${origin[1]}) scale(${scaleX} ${scaleY}) translate(${-origin[0]} ${-origin[1]})`);
+    return ` transform="${transforms.join(" ")}"`;
+}
+function originPoint(element) {
+    if ((0, utils_1.isPoint2)(element.origin))
+        return element.origin;
+    const box = (0, utils_1.elementBox)(element);
+    if (!box)
+        return [0, 0];
+    return (0, utils_1.anchorPoint)(box, typeof element.origin === "string" ? element.origin : "center");
+}
+function groupOrigin(element) {
+    if ((0, utils_1.isPoint2)(element.origin))
+        return [element.origin[0] - element.x, element.origin[1] - element.y];
+    const width = Number(element.width ?? 0);
+    const height = Number(element.height ?? 0);
+    return (0, utils_1.anchorPoint)({ x: 0, y: 0, width, height }, typeof element.origin === "string" ? element.origin : "center");
+}
+function imageFit(fit) {
+    if (fit === "contain")
+        return "xMidYMid meet";
+    if (fit === "cover")
+        return "xMidYMid slice";
+    return "none";
+}
+function nextId(context, prefix) {
+    const id = `sketchmark-${prefix}-${context.nextId}`;
+    context.nextId += 1;
+    return id;
+}
+function escapeAttr(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function escapeText(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}

package/dist/src/render/three-html.d.ts

@@ -0,0 +1,2 @@
+import type { RenderOptions, VisualDocument } from "../types";
+export declare function renderToThreeHtml(document: VisualDocument, options?: RenderOptions): string;