sketchmark 2.0.0

package/dist/src/builders/index.d.ts

@@ -0,0 +1,74 @@
+import type { AnimationValue, ArcElement, CircleElement, CurveElement, EllipseElement, Endpoint, GroupElement, LineElement, PointElement, PolygonElement, PolylineElement, RectElement, TextElement, VisualDocument, VisualElement } from "../types";
+export type ElementInput = VisualElement | VisualElement[];
+export declare function scene(input: Omit<VisualDocument, "version"> & {
+    version?: 1;
+}): VisualDocument;
+export declare function rect(input: Omit<RectElement, "type">): RectElement;
+export declare function circle(input: Omit<CircleElement, "type">): CircleElement;
+export declare function ellipse(input: Omit<EllipseElement, "type">): EllipseElement;
+export declare function point(input: Omit<PointElement, "type">): PointElement;
+export declare function polyline(input: Omit<PolylineElement, "type">): PolylineElement;
+export declare function polygon(input: Omit<PolygonElement, "type">): PolygonElement;
+export declare function text(input: Omit<TextElement, "type">): TextElement;
+export declare function line(input: Omit<LineElement, "type">): LineElement;
+export declare function arrow(input: Omit<LineElement, "type">): LineElement;
+export declare function arc(input: Omit<ArcElement, "type">): ArcElement;
+export declare function curve(input: Omit<CurveElement, "type">): CurveElement;
+export declare function group(input: Omit<GroupElement, "type">): GroupElement;
+export declare function animate(from: number | string, to: number | string, options?: Omit<AnimationValue, "from" | "to">): AnimationValue;
+export declare function keyframes(values: Array<[number, number | string]>): AnimationValue;
+export interface NodeOptions {
+    id: string;
+    label: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    fontSize?: number;
+    textFill?: string;
+}
+export declare function node(options: NodeOptions): [RectElement, TextElement];
+export interface FlowOptions {
+    id: string;
+    from: Endpoint;
+    to: Endpoint;
+    stroke?: string;
+    strokeWidth?: number;
+    label?: string;
+    labelX?: number;
+    labelY?: number;
+}
+export declare function flow(options: FlowOptions): VisualElement[];
+export interface PacketOptions {
+    id: string;
+    on: string;
+    radius?: number;
+    fill?: string;
+    progress: number | AnimationValue;
+}
+export declare function packet(options: PacketOptions): CircleElement;
+export interface CalloutOptions {
+    id: string;
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    target: Endpoint;
+    fill?: string;
+    textFill?: string;
+    stroke?: string;
+}
+export declare function callout(options: CalloutOptions): VisualElement[];
+export interface StackOptions {
+    x: number;
+    y: number;
+    gap?: number;
+    children: ElementInput[];
+}
+export declare function row(options: StackOptions): VisualElement[];
+export declare function column(options: StackOptions): VisualElement[];

package/dist/src/builders/index.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scene = scene;
+exports.rect = rect;
+exports.circle = circle;
+exports.ellipse = ellipse;
+exports.point = point;
+exports.polyline = polyline;
+exports.polygon = polygon;
+exports.text = text;
+exports.line = line;
+exports.arrow = arrow;
+exports.arc = arc;
+exports.curve = curve;
+exports.group = group;
+exports.animate = animate;
+exports.keyframes = keyframes;
+exports.node = node;
+exports.flow = flow;
+exports.packet = packet;
+exports.callout = callout;
+exports.row = row;
+exports.column = column;
+const utils_1 = require("../utils");
+function scene(input) {
+    return { version: 1, ...input };
+}
+function rect(input) {
+    return { type: "rect", ...input };
+}
+function circle(input) {
+    return { type: "circle", ...input };
+}
+function ellipse(input) {
+    return { type: "ellipse", ...input };
+}
+function point(input) {
+    return { type: "point", ...input };
+}
+function polyline(input) {
+    return { type: "polyline", ...input };
+}
+function polygon(input) {
+    return { type: "polygon", ...input };
+}
+function text(input) {
+    return { type: "text", ...input };
+}
+function line(input) {
+    return { type: "line", ...input };
+}
+function arrow(input) {
+    return { type: "arrow", ...input };
+}
+function arc(input) {
+    return { type: "arc", ...input };
+}
+function curve(input) {
+    return { type: "curve", ...input };
+}
+function group(input) {
+    return { type: "group", ...input };
+}
+function animate(from, to, options = {}) {
+    return { from, to, ...options };
+}
+function keyframes(values) {
+    return { keyframes: values };
+}
+function node(options) {
+    return [
+        rect({
+            id: `${options.id}_box`,
+            x: options.x,
+            y: options.y,
+            width: options.width,
+            height: options.height,
+            radius: options.radius ?? 12,
+            fill: options.fill ?? "#ffffff",
+            stroke: options.stroke ?? "#2563eb",
+            strokeWidth: options.strokeWidth ?? 2
+        }),
+        text({
+            id: `${options.id}_label`,
+            text: options.label,
+            x: options.x + options.width / 2,
+            y: options.y + options.height / 2,
+            align: "center",
+            valign: "middle",
+            fontSize: options.fontSize ?? 18,
+            fill: options.textFill ?? "#111827"
+        })
+    ];
+}
+function flow(options) {
+    const out = [
+        arrow({
+            id: options.id,
+            from: options.from,
+            to: options.to,
+            stroke: options.stroke ?? "#2563eb",
+            strokeWidth: options.strokeWidth ?? 2
+        })
+    ];
+    if (options.label) {
+        if (typeof options.labelX !== "number" || typeof options.labelY !== "number") {
+            throw new Error("flow label requires explicit labelX and labelY. The builder does not infer label positions.");
+        }
+        out.push(text({
+            id: `${options.id}_label`,
+            text: options.label,
+            x: options.labelX,
+            y: options.labelY,
+            align: "center",
+            valign: "middle",
+            fontSize: 14,
+            fill: options.stroke ?? "#2563eb"
+        }));
+    }
+    return out;
+}
+function packet(options) {
+    return circle({
+        id: options.id,
+        radius: options.radius ?? 7,
+        fill: options.fill ?? "#ef4444",
+        follow: options.on,
+        progress: options.progress
+    });
+}
+function callout(options) {
+    const boxId = `${options.id}_box`;
+    return [
+        rect({
+            id: boxId,
+            x: options.x,
+            y: options.y,
+            width: options.width,
+            height: options.height,
+            radius: 8,
+            fill: options.fill ?? "#111827",
+            stroke: options.stroke ?? "none"
+        }),
+        text({
+            id: `${options.id}_text`,
+            text: options.text,
+            x: options.x + options.width / 2,
+            y: options.y + options.height / 2,
+            align: "center",
+            valign: "middle",
+            fontSize: 15,
+            fill: options.textFill ?? "#ffffff"
+        }),
+        arrow({
+            id: `${options.id}_arrow`,
+            from: `${boxId}.bottom`,
+            to: options.target,
+            stroke: options.stroke ?? "#ef4444",
+            strokeWidth: 2
+        })
+    ];
+}
+function row(options) {
+    return stack(options, "row");
+}
+function column(options) {
+    return stack(options, "column");
+}
+function stack(options, direction) {
+    const gap = options.gap ?? 0;
+    let cursorX = options.x;
+    let cursorY = options.y;
+    const out = [];
+    for (const childInput of options.children) {
+        const child = Array.isArray(childInput) ? childInput : [childInput];
+        const bounds = boundsFor(child);
+        if (!bounds)
+            throw new Error(`${direction} children must have explicit geometry. No auto measurement is performed.`);
+        const dx = cursorX - bounds.x;
+        const dy = cursorY - bounds.y;
+        const moved = child.map((element) => translateElement(element, dx, dy));
+        out.push(...moved);
+        if (direction === "row")
+            cursorX += bounds.width + gap;
+        else
+            cursorY += bounds.height + gap;
+    }
+    return out;
+}
+function boundsFor(elements) {
+    const boxes = elements.map((element) => (0, utils_1.elementBox)(element)).filter(Boolean);
+    if (!boxes.length)
+        return undefined;
+    const left = Math.min(...boxes.map((box) => box.x));
+    const top = Math.min(...boxes.map((box) => box.y));
+    const right = Math.max(...boxes.map((box) => box.x + box.width));
+    const bottom = Math.max(...boxes.map((box) => box.y + box.height));
+    return { x: left, y: top, width: right - left, height: bottom - top };
+}
+function translateElement(element, dx, dy) {
+    const next = (0, utils_1.clone)(element);
+    if ("x" in next && typeof next.x === "number")
+        next.x += dx;
+    if ("y" in next && typeof next.y === "number")
+        next.y += dy;
+    if ("cx" in next && typeof next.cx === "number")
+        next.cx += dx;
+    if ("cy" in next && typeof next.cy === "number")
+        next.cy += dy;
+    if ((next.type === "line" || next.type === "arrow" || next.type === "curve") && Array.isArray(next.from) && Array.isArray(next.to)) {
+        next.from = [Number(next.from[0]) + dx, Number(next.from[1]) + dy];
+        next.to = [Number(next.to[0]) + dx, Number(next.to[1]) + dy];
+    }
+    if (next.type === "arc") {
+        next.cx += dx;
+        next.cy += dy;
+    }
+    if (next.type === "curve") {
+        next.control1 = [next.control1[0] + dx, next.control1[1] + dy];
+        if (next.control2)
+            next.control2 = [next.control2[0] + dx, next.control2[1] + dy];
+    }
+    if ((next.type === "polyline" || next.type === "polygon") && Array.isArray(next.points)) {
+        next.points = next.points.map((point) => [point[0] + dx, point[1] + dy]);
+    }
+    if (next.type === "group" && Array.isArray(next.children)) {
+        next.children = next.children.map((child) => translateElement(child, dx, dy));
+    }
+    return next;
+}

package/dist/src/compounds.d.ts

@@ -0,0 +1,13 @@
+import type { VisualDocument } from "./types";
+type LooseElement = Record<string, unknown> & {
+    type?: string;
+    children?: LooseElement[];
+};
+type LooseDocument = Omit<VisualDocument, "elements" | "scenes"> & {
+    elements?: LooseElement[];
+    scenes?: Record<string, Record<string, unknown> & {
+        elements?: LooseElement[];
+    }>;
+};
+export declare function compileCompounds(input: LooseDocument): VisualDocument;
+export {};

package/dist/src/compounds.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileCompounds = compileCompounds;
+const builders_1 = require("./builders");
+const utils_1 = require("./utils");
+function compileCompounds(input) {
+    const document = (0, utils_1.clone)(input);
+    const elements = compileElementList(document.elements ?? []);
+    const scenes = {};
+    for (const [sceneId, scene] of Object.entries(document.scenes ?? {})) {
+        scenes[sceneId] = {
+            ...scene,
+            elements: compileElementList(scene.elements ?? [])
+        };
+    }
+    return {
+        ...document,
+        elements,
+        ...(Object.keys(scenes).length ? { scenes } : {})
+    };
+}
+function compileElementList(elements) {
+    return elements.flatMap((element) => compileElement(element));
+}
+function compileElement(element) {
+    switch (element.type) {
+        case "node":
+            return (0, builders_1.node)({
+                id: stringProp(element, "id"),
+                label: stringProp(element, "label"),
+                x: numberProp(element, "x"),
+                y: numberProp(element, "y"),
+                width: numberProp(element, "width"),
+                height: numberProp(element, "height"),
+                radius: optionalNumber(element, "radius"),
+                fill: optionalString(element, "fill"),
+                stroke: optionalString(element, "stroke"),
+                strokeWidth: optionalNumber(element, "strokeWidth"),
+                fontSize: optionalNumber(element, "fontSize"),
+                textFill: optionalString(element, "textFill")
+            });
+        case "flow":
+            return (0, builders_1.flow)({
+                id: stringProp(element, "id"),
+                from: element.from,
+                to: element.to,
+                stroke: optionalString(element, "stroke"),
+                strokeWidth: optionalNumber(element, "strokeWidth"),
+                label: optionalString(element, "label"),
+                labelX: optionalNumber(element, "labelX"),
+                labelY: optionalNumber(element, "labelY")
+            });
+        case "packet":
+            return [
+                (0, builders_1.packet)({
+                    id: stringProp(element, "id"),
+                    on: stringProp(element, "on"),
+                    radius: optionalNumber(element, "radius"),
+                    fill: optionalString(element, "fill"),
+                    progress: element.progress
+                })
+            ];
+        case "callout":
+            return (0, builders_1.callout)({
+                id: stringProp(element, "id"),
+                text: stringProp(element, "text"),
+                x: numberProp(element, "x"),
+                y: numberProp(element, "y"),
+                width: numberProp(element, "width"),
+                height: numberProp(element, "height"),
+                target: element.target,
+                fill: optionalString(element, "fill"),
+                textFill: optionalString(element, "textFill"),
+                stroke: optionalString(element, "stroke")
+            });
+        case "row":
+            return (0, builders_1.row)({
+                x: numberProp(element, "x"),
+                y: numberProp(element, "y"),
+                gap: optionalNumber(element, "gap"),
+                children: (element.children ?? []).map((child) => compileElement(child))
+            });
+        case "column":
+            return (0, builders_1.column)({
+                x: numberProp(element, "x"),
+                y: numberProp(element, "y"),
+                gap: optionalNumber(element, "gap"),
+                children: (element.children ?? []).map((child) => compileElement(child))
+            });
+        default: {
+            const next = (0, utils_1.clone)(element);
+            if (next.type === "group" && Array.isArray(next.children)) {
+                next.children = compileElementList(next.children);
+            }
+            return [next];
+        }
+    }
+}
+function stringProp(element, key) {
+    const value = element[key];
+    if (typeof value !== "string" || !value)
+        throw new Error(`Compound '${element.type}' requires string '${key}'.`);
+    return value;
+}
+function optionalString(element, key) {
+    const value = element[key];
+    return typeof value === "string" ? value : undefined;
+}
+function numberProp(element, key) {
+    const value = element[key];
+    if (typeof value !== "number" || !Number.isFinite(value))
+        throw new Error(`Compound '${element.type}' requires number '${key}'.`);
+    return value;
+}
+function optionalNumber(element, key) {
+    const value = element[key];
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}

package/dist/src/deck.d.ts

@@ -0,0 +1,4 @@
+import type { ResolvedVisualDocument, VisualDocument } from "./types";
+export declare function documentForDeckStep(document: VisualDocument, sceneId: string, stepIndex: number): VisualDocument;
+export declare function resolvedFrameForDeckStep(document: VisualDocument, sceneId: string, stepIndex: number, time?: number): ResolvedVisualDocument;
+export declare function renderDeckToHtml(document: VisualDocument, sceneId: string): string;

package/dist/src/deck.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.documentForDeckStep = documentForDeckStep;
+exports.resolvedFrameForDeckStep = resolvedFrameForDeckStep;
+exports.renderDeckToHtml = renderDeckToHtml;
+const scenes_1 = require("./scenes");
+const normalize_1 = require("./normalize");
+const utils_1 = require("./utils");
+const svg_1 = require("./render/svg");
+function documentForDeckStep(document, sceneId, stepIndex) {
+    const scene = document.scenes?.[sceneId];
+    if (!scene)
+        throw new Error(`Unknown scene '${sceneId}'.`);
+    const frame = (0, scenes_1.documentForScene)(document, sceneId);
+    const activeSteps = (scene.steps ?? []).slice(0, Math.max(0, stepIndex + 1));
+    if (!activeSteps.length)
+        return frame;
+    const hidden = new Set();
+    const shown = new Set();
+    for (const step of activeSteps) {
+        for (const id of step.hide ?? [])
+            hidden.add(id);
+        for (const id of step.show ?? []) {
+            hidden.delete(id);
+            shown.add(id);
+        }
+    }
+    frame.elements = applyDeckVisibility(frame.elements ?? [], hidden, shown);
+    return frame;
+}
+function resolvedFrameForDeckStep(document, sceneId, stepIndex, time = 0) {
+    return (0, normalize_1.resolveVisualFrame)(documentForDeckStep(document, sceneId, stepIndex), time);
+}
+function renderDeckToHtml(document, sceneId) {
+    const scene = document.scenes?.[sceneId];
+    if (!scene)
+        throw new Error(`Unknown scene '${sceneId}'.`);
+    const steps = scene.steps ?? [];
+    const frameCount = Math.max(1, steps.length + 1);
+    const frames = Array.from({ length: frameCount }, (_, index) => {
+        const stepIndex = index - 1;
+        const frame = stepIndex < 0 ? (0, scenes_1.documentForScene)(document, sceneId) : documentForDeckStep(document, sceneId, stepIndex);
+        return (0, svg_1.renderToSvg)(frame);
+    });
+    const labels = ["Base", ...steps.map((step) => step.id)];
+    return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${escapeHtml(sceneId)} Deck</title><style>
+html,body{margin:0;width:100%;height:100%;background:#111827;color:#e5e7eb;font-family:Inter,Arial,sans-serif}
+body{display:grid;grid-template-rows:1fr auto}
+main{display:grid;place-items:center;padding:24px}
+#stage svg{max-width:min(100vw,${document.canvas.width}px);max-height:calc(100vh - 112px);background:white;box-shadow:0 20px 50px rgba(0,0,0,.35)}
+footer{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#020617;border-top:1px solid #1f2937}
+button{border:0;border-radius:6px;padding:8px 12px;background:#2563eb;color:#fff;font-weight:700}
+button:disabled{opacity:.45}
+code{color:#93c5fd}
+</style></head><body><main><div id="stage"></div></main><footer><button id="prev">Prev</button><button id="next">Next</button><span id="count"></span><code id="label"></code></footer><script>
+const frames=${JSON.stringify(frames)};
+const labels=${JSON.stringify(labels)};
+let index=0;
+const stage=document.getElementById("stage");
+const prev=document.getElementById("prev");
+const next=document.getElementById("next");
+const count=document.getElementById("count");
+const label=document.getElementById("label");
+function show(){
+  stage.innerHTML=frames[index];
+  prev.disabled=index===0;
+  next.disabled=index===frames.length-1;
+  count.textContent=(index+1)+" / "+frames.length;
+  label.textContent=labels[index] || "";
+}
+prev.addEventListener("click",()=>{ index=Math.max(0,index-1); show(); });
+next.addEventListener("click",()=>{ index=Math.min(frames.length-1,index+1); show(); });
+window.addEventListener("keydown",(event)=>{ if(event.key==="ArrowRight") next.click(); if(event.key==="ArrowLeft") prev.click(); });
+show();
+</script></body></html>`;
+}
+function applyDeckVisibility(elements, hidden, shown) {
+    return elements.map((element) => {
+        const next = (0, utils_1.clone)(element);
+        if (next.id && hidden.has(next.id))
+            next.opacity = 0;
+        if (next.id && shown.has(next.id) && next.opacity === 0)
+            next.opacity = 1;
+        if (next.type === "group" && Array.isArray(next.children))
+            next.children = applyDeckVisibility(next.children, hidden, shown);
+        return next;
+    });
+}
+function escapeHtml(value) {
+    return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

package/dist/src/diagnostics.d.ts

@@ -0,0 +1,5 @@
+import type { ValidationWarning, VisualDocument } from "./types";
+export interface VisualDiagnosticReport {
+    warnings: ValidationWarning[];
+}
+export declare function lintVisualDocument(document: VisualDocument): VisualDiagnosticReport;

package/dist/src/diagnostics.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintVisualDocument = lintVisualDocument;
+const utils_1 = require("./utils");
+function lintVisualDocument(document) {
+    const warnings = [];
+    const elements = (0, utils_1.flattenElements)(document.elements ?? []);
+    const boxes = elements
+        .map((element) => ({ element, box: (0, utils_1.elementBox)(element) }))
+        .filter((item) => Boolean(item.box));
+    for (const { element, box } of boxes) {
+        const path = element.id ? `/elements/${element.id}` : "/elements";
+        if (box.x < 0 || box.y < 0 || box.x + box.width > document.canvas.width || box.y + box.height > document.canvas.height) {
+            warnings.push({
+                path,
+                code: "element_outside_canvas",
+                message: `Element '${element.id ?? element.type}' extends outside the canvas.`,
+                suggestion: "Move it inside the canvas or intentionally clip it with a group/mask later."
+            });
+        }
+        if (element.type === "text" && Number(element.fontSize ?? 16) < 10) {
+            warnings.push({
+                path,
+                code: "tiny_text",
+                message: `Text '${element.id ?? ""}' may be unreadable below 10px.`,
+                suggestion: "Use fontSize 12 or larger for explainer visuals."
+            });
+        }
+        if (element.type === "text") {
+            const containingBox = boxes.find((item) => item.element.type === "rect" && item.element.id !== element.id && pointInside(element.x, element.y, item.box));
+            if (containingBox && !boxInside(box, containingBox.box)) {
+                warnings.push({
+                    path,
+                    code: "text_likely_outside_box",
+                    message: `Text '${element.id ?? ""}' is anchored inside '${containingBox.element.id ?? "rect"}' but its estimated bounds extend outside.`,
+                    suggestion: "Move the text explicitly, reduce fontSize, or set maxWidth/wrap intentionally."
+                });
+            }
+            const contrastAgainst = containingBox?.element.fill ?? document.canvas.background ?? "#ffffff";
+            const ratio = contrastRatio(String(element.fill ?? "#111827"), String(contrastAgainst));
+            if (ratio !== undefined && ratio < 3) {
+                warnings.push({
+                    path,
+                    code: "low_text_contrast",
+                    message: `Text '${element.id ?? ""}' may not have enough contrast.`,
+                    suggestion: "Choose a darker or lighter explicit fill color; diagnostics do not recolor text."
+                });
+            }
+        }
+    }
+    for (let left = 0; left < boxes.length; left += 1) {
+        for (let right = left + 1; right < boxes.length; right += 1) {
+            const a = boxes[left];
+            const b = boxes[right];
+            if (a.element.type !== "text" || b.element.type !== "text")
+                continue;
+            if (overlaps(a.box, b.box)) {
+                warnings.push({
+                    path: "/elements",
+                    code: "possible_text_overlap",
+                    message: `Text may overlap between '${a.element.id ?? a.element.type}' and '${b.element.id ?? b.element.type}'.`,
+                    suggestion: "Move one text element explicitly; diagnostics do not auto-layout."
+                });
+            }
+        }
+    }
+    return { warnings };
+}
+function overlaps(a, b) {
+    return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+function pointInside(x, y, box) {
+    return x >= box.x && x <= box.x + box.width && y >= box.y && y <= box.y + box.height;
+}
+function boxInside(inner, outer) {
+    return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+function contrastRatio(foreground, background) {
+    const fg = parseHexColor(foreground);
+    const bg = parseHexColor(background);
+    if (!fg || !bg)
+        return undefined;
+    const a = relativeLuminance(fg);
+    const b = relativeLuminance(bg);
+    const light = Math.max(a, b);
+    const dark = Math.min(a, b);
+    return (light + 0.05) / (dark + 0.05);
+}
+function parseHexColor(value) {
+    const text = value.trim();
+    if (/^#[0-9a-fA-F]{3}$/.test(text)) {
+        return [
+            parseInt(text[1] + text[1], 16),
+            parseInt(text[2] + text[2], 16),
+            parseInt(text[3] + text[3], 16)
+        ];
+    }
+    if (/^#[0-9a-fA-F]{6}$/.test(text)) {
+        return [
+            parseInt(text.slice(1, 3), 16),
+            parseInt(text.slice(3, 5), 16),
+            parseInt(text.slice(5, 7), 16)
+        ];
+    }
+    return undefined;
+}
+function relativeLuminance([r, g, b]) {
+    const values = [r, g, b].map((channel) => {
+        const value = channel / 255;
+        return value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * values[0] + 0.7152 * values[1] + 0.0722 * values[2];
+}

package/dist/src/export/index.d.ts

@@ -0,0 +1,8 @@
+import type { ExportOptions, VisualDocument } from "../types";
+export interface ExportResult {
+    format: string;
+    content: string;
+    mimeType: string;
+    warnings?: string[];
+}
+export declare function exportVisual(document: VisualDocument, options?: ExportOptions): ExportResult;

package/dist/src/export/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportVisual = exportVisual;
+const html_1 = require("../render/html");
+const svg_1 = require("../render/svg");
+function exportVisual(document, options = {}) {
+    const format = options.format ?? "svg";
+    if (format === "svg") {
+        return { format, content: (0, svg_1.renderToSvg)(document, options), mimeType: "image/svg+xml" };
+    }
+    if (format === "html") {
+        return { format, content: (0, html_1.renderToHtml)(document, options), mimeType: "text/html" };
+    }
+    throw new Error(`${format.toUpperCase()} export is reserved for the advanced renderer/export adapter. The primitive JSON core currently exports svg and html directly.`);
+}