sketchmark 2.1.1 → 2.1.3

package/dist/src/browser-export.d.ts

@@ -0,0 +1,10 @@
+import type { VisualDocument } from "./types";
+export type BrowserExportFormat = "svg" | "png" | "jpg" | "html" | "json" | "mp4" | "webm";
+export type BrowserExportOptions = {
+    format: BrowserExportFormat;
+    title: string;
+    time?: number;
+    sourceDocument?: VisualDocument;
+    onProgress?: (progress: number) => void;
+};
+export declare function exportVisualInBrowser(document: VisualDocument, options: BrowserExportOptions): Promise<void>;

package/dist/src/browser-export.js

@@ -0,0 +1,220 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportVisualInBrowser = exportVisualInBrowser;
+const html_1 = require("./render/html");
+const svg_1 = require("./render/svg");
+async function exportVisualInBrowser(document, options) {
+    const format = options.format;
+    const time = Math.max(0, Number(options.time ?? 0));
+    const title = safeFileName(options.title);
+    if (format === "json") {
+        downloadBlob(new Blob([JSON.stringify(options.sourceDocument ?? document, null, 2)], { type: "application/json" }), `${title}.json`);
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "svg") {
+        downloadBlob(new Blob([(0, svg_1.renderToSvg)(document, { time })], { type: "image/svg+xml;charset=utf-8" }), `${title}.svg`);
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "html") {
+        downloadBlob(new Blob([(0, html_1.renderToHtml)(document, { time })], { type: "text/html;charset=utf-8" }), `${title}.html`);
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "png" || format === "jpg") {
+        await exportRasterFrame(document, { format, title, time });
+        options.onProgress?.(100);
+        return;
+    }
+    if (format === "mp4") {
+        await exportMp4(document, { title, onProgress: options.onProgress });
+        return;
+    }
+    throw new Error("Browser WebM export is not implemented yet. Use MP4 or a server exporter.");
+}
+async function exportRasterFrame(document, options) {
+    const { width, height } = canvasSize(document);
+    const canvas = documentCanvas(width, height);
+    const svg = (0, svg_1.renderToSvg)(document, { time: options.time });
+    await drawSvgToCanvas(svg, canvas, width, height);
+    const mimeType = options.format === "jpg" ? "image/jpeg" : "image/png";
+    const blob = await canvasToBlob(canvas, mimeType, options.format === "jpg" ? 0.92 : undefined);
+    downloadBlob(blob, `${options.title}.${options.format}`);
+}
+async function exportMp4(document, options) {
+    const globalApi = globalThis;
+    const VideoEncoderCtor = globalApi.VideoEncoder;
+    const VideoFrameCtor = globalApi.VideoFrame;
+    if (!VideoEncoderCtor || !VideoFrameCtor) {
+        throw new Error("Browser MP4 export requires WebCodecs. Try Chrome or Edge, or use a server exporter.");
+    }
+    const duration = Number(document.canvas.duration ?? 0);
+    if (!Number.isFinite(duration) || duration <= 0) {
+        throw new Error("MP4 export requires a positive canvas.duration.");
+    }
+    const fps = Math.max(1, Math.round(Number(document.canvas.fps ?? 30) || 30));
+    const { width, height } = canvasSize(document);
+    const encodeWidth = evenDimension(width);
+    const encodeHeight = evenDimension(height);
+    const totalFrames = Math.max(1, Math.ceil(duration * fps));
+    const { Muxer, ArrayBufferTarget } = await loadMp4Muxer();
+    const target = new ArrayBufferTarget();
+    const muxer = new Muxer({
+        target,
+        video: { codec: "avc", width: encodeWidth, height: encodeHeight },
+        fastStart: "in-memory"
+    });
+    let encoderError;
+    const encoder = new VideoEncoderCtor({
+        output: (chunk, metadata) => muxer.addVideoChunk(chunk, metadata),
+        error: (error) => {
+            encoderError = error;
+        }
+    });
+    encoder.configure({
+        codec: "avc1.640028",
+        width: encodeWidth,
+        height: encodeHeight,
+        bitrate: 5000000,
+        framerate: fps
+    });
+    const canvas = documentCanvas(encodeWidth, encodeHeight);
+    try {
+        for (let frameIndex = 0; frameIndex < totalFrames; frameIndex += 1) {
+            const frameTime = Math.min(duration, frameIndex / fps);
+            const svg = (0, svg_1.renderToSvg)(document, { time: frameTime });
+            await drawSvgToCanvas(svg, canvas, encodeWidth, encodeHeight);
+            const frame = new VideoFrameCtor(canvas, {
+                timestamp: Math.round((frameIndex / fps) * 1000000),
+                duration: Math.round((1 / fps) * 1000000)
+            });
+            encoder.encode(frame, { keyFrame: frameIndex % Math.max(1, fps * 2) === 0 });
+            frame.close();
+            if (encoderError)
+                throw encoderError;
+            if (frameIndex % 5 === 0 || frameIndex === totalFrames - 1) {
+                options.onProgress?.(Math.round(((frameIndex + 1) / totalFrames) * 100));
+                await yieldToBrowser();
+            }
+        }
+        await encoder.flush();
+        if (encoderError)
+            throw encoderError;
+        encoder.close();
+        muxer.finalize();
+        downloadBlob(new Blob([target.buffer], { type: "video/mp4" }), `${options.title}.mp4`);
+        options.onProgress?.(100);
+    }
+    catch (error) {
+        try {
+            encoder.close();
+        }
+        catch {
+            // Ignore close failures after encoder errors.
+        }
+        throw error;
+    }
+}
+async function loadMp4Muxer() {
+    return Promise.resolve().then(() => __importStar(require("mp4-muxer")));
+}
+function documentCanvas(width, height) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+}
+async function drawSvgToCanvas(svg, canvas, width, height) {
+    const context = canvas.getContext("2d");
+    if (!context)
+        throw new Error("Could not create a 2D canvas context.");
+    const image = await loadSvgImage(svg);
+    context.clearRect(0, 0, width, height);
+    context.drawImage(image, 0, 0, width, height);
+}
+function loadSvgImage(svg) {
+    return new Promise((resolve, reject) => {
+        const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const image = new Image();
+        image.onload = () => {
+            URL.revokeObjectURL(url);
+            resolve(image);
+        };
+        image.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error("Could not rasterize the SVG frame in the browser."));
+        };
+        image.src = url;
+    });
+}
+function canvasToBlob(canvas, type, quality) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob)
+                resolve(blob);
+            else
+                reject(new Error("Could not export the canvas frame. Cross-origin images can block browser raster export."));
+        }, type, quality);
+    });
+}
+function canvasSize(document) {
+    return {
+        width: Math.max(1, Math.round(Number(document.canvas.width) || 1)),
+        height: Math.max(1, Math.round(Number(document.canvas.height) || 1))
+    };
+}
+function evenDimension(value) {
+    const rounded = Math.max(2, Math.round(value));
+    return rounded % 2 === 0 ? rounded : rounded + 1;
+}
+function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+}
+function safeFileName(value) {
+    return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 80) || "sketchmark";
+}
+function yieldToBrowser() {
+    return new Promise((resolve) => window.setTimeout(resolve, 0));
+}

package/package.json

@@ -1,46 +1,59 @@
-{
-  "name": "sketchmark",
-  "version": "2.1.1",
-  "description": "Render kernel for Sketchmark visual documents.",
-  "license": "MIT",
-  "type": "commonjs",
-  "main": "./dist/src/index.js",
-  "types": "./dist/src/index.d.ts",
-  "bin": {
-    "sketchmark": "./bin/sketchmark.cjs"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/src/index.d.ts",
-      "require": "./dist/src/index.js",
-      "default": "./dist/src/index.js"
-    },
-    "./presets": {
-      "types": "./dist/src/presets/index.d.ts",
-      "require": "./dist/src/presets/index.js",
-      "default": "./dist/src/presets/index.js"
-    },
-    "./schema": {
-      "default": "./schema/visual.schema.json"
-    }
-  },
-  "scripts": {
-    "build": "node scripts/build.cjs",
-    "render": "node bin/sketchmark.cjs render",
-    "test": "npm run build && node dist/tests/run.js",
-    "prepublishOnly": "npm test"
-  },
-  "files": [
-    "bin",
-    "dist",
-    "schema",
-    "README.md"
-  ],
-  "devDependencies": {
-    "typescript": "^5.9.3"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "sideEffects": false
-}
+{
+  "name": "sketchmark",
+  "version": "2.1.3",
+  "description": "Render kernel for Sketchmark visual documents.",
+  "license": "MIT",
+  "type": "commonjs",
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "bin": {
+    "sketchmark": "./bin/sketchmark.cjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "require": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    },
+    "./presets": {
+      "types": "./dist/src/presets/index.d.ts",
+      "require": "./dist/src/presets/index.js",
+      "default": "./dist/src/presets/index.js"
+    },
+    "./browser-export": {
+      "types": "./dist/src/browser-export.d.ts",
+      "require": "./dist/src/browser-export.js",
+      "default": "./dist/src/browser-export.js"
+    },
+    "./editor": {
+      "types": "./bin/editor-ui.d.ts",
+      "require": "./bin/editor-ui.cjs",
+      "default": "./bin/editor-ui.cjs"
+    },
+    "./schema": {
+      "default": "./schema/visual.schema.json"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/build.cjs",
+    "render": "node bin/sketchmark.cjs render",
+    "test": "npm run build && node dist/tests/run.js",
+    "prepublishOnly": "npm test"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "schema",
+    "README.md"
+  ],
+  "dependencies": {
+    "mp4-muxer": "^5.2.2"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false
+}

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 {};