sketchmark 2.1.0 → 2.1.2

package/PRESETS.md

@@ -1,182 +0,0 @@
-# Sketchmark Presets
-
-Presets are Sketchmark's official authoring layer above the render kernel.
-
-They are reusable functions that compile to pure kernel elements and timelines. A preset may create shapes, characters, motion, effects, transitions, or scene fragments, but the final `.visual.json` must still contain only kernel fields.
-
-## Layers
-
-- `kernel`: final render format
-- `presets`: reusable helpers that compile to kernel
-- `packs`: shareable collections of presets
-
-The root `sketchmark` export remains kernel-focused. Presets live in a separate entrypoint:
-
-```js
-const { applyPresetFragments, shapes, motions, effects } = require("sketchmark/presets");
-```
-
-When working inside this repo before publish, examples use:
-
-```js
-const { applyPresetFragments, shapes } = require("../dist/src/presets");
-```
-
-## Fragments
-
-A preset returns a fragment:
-
-```ts
-type PresetFragment = {
-  elements?: VisualElement[];
-  timelines?: Record<string, Record<string, TimelineTrack>>;
-};
-```
-
-`elements` are appended to the document.
-
-`timelines` are keyed by target element ID and merged into each target's local kernel timeline.
-
-```js
-const doc = {
-  version: 1,
-  canvas: { width: 960, height: 540, duration: 2, fps: 30 },
-  elements: []
-};
-
-const visual = applyPresetFragments(doc, [
-  shapes.roundedRect({
-    id: "card",
-    x: 80,
-    y: 80,
-    width: 260,
-    height: 120,
-    radius: 16,
-    fill: "#ffffff",
-    stroke: "#cbd5e1"
-  }),
-  motions.riseIn({
-    id: "card",
-    from: [80, 120],
-    to: [80, 80],
-    duration: 0.5
-  }),
-  effects.dropShadow({
-    id: "card",
-    dy: 10,
-    blur: 24,
-    opacity: 0.2
-  })
-]);
-```
-
-The output is a normal kernel document. There is no preset metadata in `.visual.json`.
-
-## Built-In Namespaces
-
-### `shapes`
-
-- `rect`
-- `roundedRect`
-- `ellipse`
-- `circle`
-- `line`
-- `polyline`
-- `arrow`
-- `regularPolygon`
-- `star`
-- `speechBubble`
-
-Shapes compile to `path`, `text`, or `group`.
-
-### `characters`
-
-- `stickPerson`
-- `talkingHead`
-- `simpleDog`
-- `simpleSpider`
-- `cursorHand`
-- `simpleMascot`
-
-Characters compile to groups with namespaced IDs such as `hero.head` and `dog.frontLeg`.
-
-### `motions`
-
-- `fadeIn`
-- `fadeOut`
-- `slideIn`
-- `riseIn`
-- `scaleIn`
-- `pulse`
-- `bob`
-- `shake`
-- `drawOn`
-- `stagger`
-
-Motions compile to explicit object keyframes and curves. They do not emit legacy `ease` strings.
-
-### `effects`
-
-- `dropShadow`
-- `softBlur`
-- `glow`
-- `dim`
-- `tintFill`
-- `gradientSweep`
-- `roundedImageClip`
-- `maskReveal`
-
-Effects compile to existing kernel properties such as `effects.*`, `fill`, `opacity`, `clip.d`, and `mask.d`.
-
-Rounded images are compiled to `clip.d`. Presets must not write `cornerRadius`.
-
-### `transitions`
-
-- `crossfade`
-- `pushLeft`
-- `pushRight`
-- `slideUp`
-- `wipeLeft`
-- `wipeRight`
-- `zoomCut`
-- `fadeThroughBlack`
-- `irisIn`
-- `irisOut`
-
-Transitions coordinate timelines across one or more target elements.
-
-### `scenes`
-
-- `titleCard`
-- `lowerThird`
-- `captionBubble`
-- `comparisonSplit`
-- `deviceFrame`
-- `gridBackground`
-
-Scenes create reusable layout fragments and may be combined with motions/effects.
-
-## Composition Helpers
-
-```ts
-applyPresetFragments(document, fragments, options?)
-mergePresetFragments(fragments)
-prefixPresetFragment(fragment, prefix)
-```
-
-Use `prefixPresetFragment` when reusing the same preset more than once:
-
-```js
-const a = prefixPresetFragment(shapes.rect({ id: "box", x: 0, y: 0, width: 40, height: 40 }), "a");
-const b = prefixPresetFragment(shapes.rect({ id: "box", x: 50, y: 0, width: 40, height: 40 }), "b");
-```
-
-This produces `a.box` and `b.box`.
-
-## Authoring Rules
-
-- Presets must output only kernel elements and timelines.
-- Presets must not write editor metadata, scene data, lock state, selection state, assets maps, or project state.
-- Presets should emit explicit `graph`, `cubicBezier`, or `hold` curves, not legacy `ease`.
-- Presets should use namespaced IDs for generated children.
-- If a concept does not map cleanly to the kernel, keep it in preset code and compile it away.

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

@@ -1,64 +0,0 @@
-import type { 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 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 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

@@ -1,212 +0,0 @@
-"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.node = node;
-exports.flow = flow;
-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 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 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: { target: boxId, anchor: (0, utils_1.anchorSpec)("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

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

@@ -1,118 +0,0 @@
-"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

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

@@ -1,91 +0,0 @@
-"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/export/index.d.ts

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