sketchmark 2.0.0

package/dist/src/schema.js

@@ -0,0 +1,403 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateVisualSchema = generateVisualSchema;
+const shapes_1 = require("./shapes");
+function generateVisualSchema() {
+    const shapeDefinitions = (0, shapes_1.registeredAuthoringShapeDefinitions)();
+    const elementProperties = {
+        id: { type: "string" },
+        type: { enum: shapeDefinitions.map((definition) => definition.type) },
+        opacity: { type: "number" },
+        fill: { $ref: "#/$defs/paint" },
+        stroke: { $ref: "#/$defs/paint" },
+        strokeWidth: { type: "number" },
+        dashArray: { type: "array", items: { type: "number" } },
+        strokeCap: { enum: ["butt", "round", "square"] },
+        strokeJoin: { enum: ["miter", "round", "bevel"] },
+        miterLimit: { type: "number" },
+        dashOffset: { type: "number" },
+        drawStart: { type: "number" },
+        drawEnd: { type: "number" },
+        effects: { $ref: "#/$defs/effects" },
+        blendMode: { type: "string" },
+        rotation: { type: "number" },
+        scale: { type: "number" },
+        scaleX: { type: "number" },
+        scaleY: { type: "number" },
+        origin: { oneOf: [{ type: "string" }, { $ref: "#/$defs/point2" }] },
+        clip: { $ref: "#/$defs/clipShape" },
+        mask: { $ref: "#/$defs/clipShape" },
+        animate: { type: "object", additionalProperties: { $ref: "#/$defs/animationValue" } },
+        metadata: { type: "object", additionalProperties: true },
+        align: { enum: ["left", "center", "right"] },
+        valign: { enum: ["top", "middle", "bottom"] },
+        fontSize: { type: "number" },
+        fontFamily: { type: "string" },
+        weight: { oneOf: [{ type: "number" }, { type: "string" }] },
+        fontStyle: { type: "string" },
+        lineHeight: { type: "number" },
+        letterSpacing: { type: "number" },
+        maxWidth: { type: "number" },
+        wrap: { type: "boolean" },
+        label: { type: "string" },
+        labelX: { type: "number" },
+        labelY: { type: "number" },
+        progress: { oneOf: [{ type: "number" }, { $ref: "#/$defs/animationValue" }] },
+        follow: { type: "string" },
+        rotationX: { type: "number" },
+        rotationY: { type: "number" },
+        rotationZ: { type: "number" },
+        scaleZ: { type: "number" }
+    };
+    for (const definition of shapeDefinitions) {
+        for (const [key, value] of Object.entries(definition.schema?.properties ?? {})) {
+            elementProperties[key] = mergeSchemaProperty(elementProperties[key], value);
+        }
+    }
+    return {
+        $schema: "https://json-schema.org/draft/2020-12/schema",
+        $id: "https://sketchmark.dev/schema/visual.schema.json",
+        title: "Sketchmark Primitive Visual Document",
+        type: "object",
+        required: ["version", "canvas"],
+        additionalProperties: true,
+        properties: {
+            version: { const: 1 },
+            canvas: {
+                type: "object",
+                required: ["width", "height"],
+                additionalProperties: true,
+                properties: {
+                    width: { type: "number" },
+                    height: { type: "number" },
+                    background: { type: "string" },
+                    duration: { type: "number" },
+                    fps: { type: "number" },
+                    space: { enum: ["2d", "3d"] },
+                    renderer: { enum: ["svg", "three"] }
+                }
+            },
+            elements: {
+                type: "array",
+                items: { $ref: "#/$defs/element" }
+            },
+            imports: {
+                type: "object",
+                additionalProperties: { type: "string" }
+            },
+            assets: {
+                type: "object",
+                additionalProperties: { type: "string" }
+            },
+            exports: {
+                type: "object",
+                additionalProperties: {
+                    type: "object",
+                    properties: {
+                        format: { enum: ["svg", "html", "png", "jpg", "mp4", "webm", "pdf", "pptx"] },
+                        sequence: { type: "string" },
+                        scene: { type: "string" }
+                    },
+                    additionalProperties: true
+                }
+            },
+            scenes: {
+                type: "object",
+                additionalProperties: {
+                    type: "object",
+                    required: ["elements"],
+                    properties: {
+                        canvas: { type: "object" },
+                        elements: {
+                            type: "array",
+                            items: { $ref: "#/$defs/element" }
+                        },
+                        steps: {
+                            type: "array",
+                            items: { $ref: "#/$defs/deckStep" }
+                        }
+                    },
+                    additionalProperties: true
+                }
+            },
+            sequences: {
+                type: "object",
+                additionalProperties: {
+                    type: "object",
+                    required: ["id", "clips"],
+                    properties: {
+                        id: { type: "string" },
+                        clips: {
+                            type: "array",
+                            items: { $ref: "#/$defs/clip" }
+                        }
+                    },
+                    additionalProperties: true
+                }
+            }
+        },
+        $defs: {
+            point2: {
+                type: "array",
+                minItems: 2,
+                maxItems: 2,
+                items: { type: "number" }
+            },
+            point3: {
+                type: "array",
+                minItems: 3,
+                maxItems: 3,
+                items: { type: "number" }
+            },
+            endpoint: {
+                oneOf: [{ $ref: "#/$defs/point2" }, { type: "string" }]
+            },
+            paint: paintSchema(),
+            imageFit: {
+                enum: ["fill", "contain", "cover"]
+            },
+            gradientStops: gradientStopsSchema(),
+            effects: effectsSchema(),
+            clipShape: clipShapeSchema(),
+            imageSource: {
+                type: "object",
+                required: ["x", "y", "width", "height", "imageWidth", "imageHeight"],
+                properties: {
+                    x: { type: "number" },
+                    y: { type: "number" },
+                    width: { type: "number" },
+                    height: { type: "number" },
+                    imageWidth: { type: "number" },
+                    imageHeight: { type: "number" }
+                },
+                additionalProperties: true
+            },
+            animationValue: {
+                type: "object",
+                additionalProperties: true,
+                properties: {
+                    from: { oneOf: [{ type: "number" }, { type: "string" }] },
+                    to: { oneOf: [{ type: "number" }, { type: "string" }] },
+                    duration: { type: "number" },
+                    delay: { type: "number" },
+                    ease: { type: "string" },
+                    keyframes: {
+                        type: "array",
+                        items: {
+                            type: "array",
+                            minItems: 2,
+                            maxItems: 2,
+                            prefixItems: [{ type: "number" }, { oneOf: [{ type: "number" }, { type: "string" }] }]
+                        }
+                    }
+                }
+            },
+            clip: {
+                type: "object",
+                required: ["scene", "duration"],
+                properties: {
+                    scene: { type: "string" },
+                    duration: { type: "number" },
+                    transition: {
+                        oneOf: [
+                            { enum: ["cut", "fade"] },
+                            {
+                                type: "object",
+                                required: ["type"],
+                                properties: {
+                                    type: { enum: ["cut", "fade"] },
+                                    duration: { type: "number" }
+                                },
+                                additionalProperties: true
+                            }
+                        ]
+                    }
+                },
+                additionalProperties: true
+            },
+            deckStep: {
+                type: "object",
+                required: ["id"],
+                properties: {
+                    id: { type: "string" },
+                    show: { type: "array", items: { type: "string" } },
+                    hide: { type: "array", items: { type: "string" } },
+                    duration: { type: "number" }
+                },
+                additionalProperties: true
+            },
+            element: {
+                type: "object",
+                required: ["type"],
+                additionalProperties: true,
+                properties: elementProperties
+            }
+        }
+    };
+}
+function mergeSchemaProperty(existing, incoming) {
+    if (existing === undefined)
+        return incoming;
+    if (schemaKey(existing) === schemaKey(incoming))
+        return existing;
+    const items = schemaAlternatives(existing);
+    const incomingItems = schemaAlternatives(incoming);
+    for (const item of incomingItems) {
+        if (!items.some((existingItem) => schemaKey(existingItem) === schemaKey(item)))
+            items.push(item);
+    }
+    return { oneOf: items };
+}
+function schemaAlternatives(value) {
+    if (value && typeof value === "object" && Array.isArray(value.oneOf)) {
+        return [...(value.oneOf)];
+    }
+    return [value];
+}
+function schemaKey(value) {
+    return JSON.stringify(sortJson(value));
+}
+function sortJson(value) {
+    if (Array.isArray(value))
+        return value.map(sortJson);
+    if (!value || typeof value !== "object")
+        return value;
+    return Object.fromEntries(Object.entries(value).sort(([left], [right]) => left.localeCompare(right)).map(([key, item]) => [key, sortJson(item)]));
+}
+function paintSchema() {
+    return {
+        oneOf: [
+            { type: "string" },
+            {
+                type: "object",
+                required: ["type", "from", "to", "stops"],
+                properties: {
+                    type: { const: "linearGradient" },
+                    from: { $ref: "#/$defs/point2" },
+                    to: { $ref: "#/$defs/point2" },
+                    stops: { $ref: "#/$defs/gradientStops" }
+                },
+                additionalProperties: true
+            },
+            {
+                type: "object",
+                required: ["type", "center", "radius", "stops"],
+                properties: {
+                    type: { const: "radialGradient" },
+                    center: { $ref: "#/$defs/point2" },
+                    radius: { type: "number" },
+                    focus: { $ref: "#/$defs/point2" },
+                    stops: { $ref: "#/$defs/gradientStops" }
+                },
+                additionalProperties: true
+            },
+            {
+                type: "object",
+                required: ["type", "src", "width", "height"],
+                properties: {
+                    type: { const: "pattern" },
+                    src: { type: "string" },
+                    x: { type: "number" },
+                    y: { type: "number" },
+                    width: { type: "number" },
+                    height: { type: "number" },
+                    fit: { $ref: "#/$defs/imageFit" },
+                    opacity: { type: "number" }
+                },
+                additionalProperties: true
+            }
+        ]
+    };
+}
+function gradientStopsSchema() {
+    return {
+        type: "array",
+        minItems: 2,
+        items: {
+            oneOf: [
+                {
+                    type: "array",
+                    minItems: 2,
+                    maxItems: 2,
+                    prefixItems: [{ type: "number" }, { type: "string" }]
+                },
+                {
+                    type: "object",
+                    required: ["offset", "color"],
+                    properties: {
+                        offset: { type: "number" },
+                        color: { type: "string" }
+                    },
+                    additionalProperties: true
+                }
+            ]
+        }
+    };
+}
+function effectsSchema() {
+    return {
+        type: "object",
+        properties: {
+            blur: { type: "number" },
+            brightness: { type: "number" },
+            contrast: { type: "number" },
+            saturate: { type: "number" },
+            hueRotate: { type: "number" },
+            shadow: {
+                type: "object",
+                required: ["dx", "dy", "blur", "color"],
+                properties: {
+                    dx: { type: "number" },
+                    dy: { type: "number" },
+                    blur: { type: "number" },
+                    color: { type: "string" },
+                    opacity: { type: "number" }
+                },
+                additionalProperties: true
+            }
+        },
+        additionalProperties: true
+    };
+}
+function clipShapeSchema() {
+    return {
+        oneOf: [
+            {
+                type: "object",
+                required: ["type", "x", "y", "width", "height"],
+                properties: {
+                    type: { const: "rect" },
+                    x: { type: "number" },
+                    y: { type: "number" },
+                    width: { type: "number" },
+                    height: { type: "number" },
+                    radius: { type: "number" },
+                    opacity: { type: "number" }
+                },
+                additionalProperties: true
+            },
+            {
+                type: "object",
+                required: ["type", "cx", "cy", "radius"],
+                properties: {
+                    type: { const: "circle" },
+                    cx: { type: "number" },
+                    cy: { type: "number" },
+                    radius: { type: "number" },
+                    opacity: { type: "number" }
+                },
+                additionalProperties: true
+            },
+            {
+                type: "object",
+                required: ["type", "d"],
+                properties: {
+                    type: { const: "path" },
+                    d: { type: "string" },
+                    opacity: { type: "number" }
+                },
+                additionalProperties: true
+            }
+        ]
+    };
+}

package/dist/src/sequences.d.ts

@@ -0,0 +1,43 @@
+import type { ResolvedVisualDocument, VisualDocument } from "./types";
+export interface CompiledVisualSequence {
+    id: string;
+    duration: number;
+    clips: Array<{
+        scene: string;
+        start: number;
+        duration: number;
+        transition: NormalizedTransition;
+    }>;
+}
+export interface SequenceFrame {
+    document: VisualDocument;
+    scene: string;
+    localTime: number;
+    globalTime: number;
+    transition?: {
+        type: "fade";
+        fromScene: string;
+        toScene: string;
+        progress: number;
+        duration: number;
+    };
+}
+export interface ResolvedSequenceFrame extends Omit<SequenceFrame, "document"> {
+    document: ResolvedVisualDocument;
+}
+export interface SequenceTimelineFrame {
+    index: number;
+    time: number;
+    scene: string;
+    localTime: number;
+    transition?: SequenceFrame["transition"];
+}
+export interface NormalizedTransition {
+    type: "cut" | "fade";
+    duration: number;
+}
+export declare function compileVisualSequence(document: VisualDocument, sequenceId: string): CompiledVisualSequence;
+export declare function defaultSequenceId(document: VisualDocument): string | undefined;
+export declare function documentForSequenceTime(document: VisualDocument, sequenceId: string, time: number): SequenceFrame;
+export declare function resolvedFrameForSequenceTime(document: VisualDocument, sequenceId: string, time: number): ResolvedSequenceFrame;
+export declare function sequenceTimeline(document: VisualDocument, sequenceId: string, fps: number): SequenceTimelineFrame[];

package/dist/src/sequences.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileVisualSequence = compileVisualSequence;
+exports.defaultSequenceId = defaultSequenceId;
+exports.documentForSequenceTime = documentForSequenceTime;
+exports.resolvedFrameForSequenceTime = resolvedFrameForSequenceTime;
+exports.sequenceTimeline = sequenceTimeline;
+const scenes_1 = require("./scenes");
+const normalize_1 = require("./normalize");
+const utils_1 = require("./utils");
+function compileVisualSequence(document, sequenceId) {
+    const sequence = document.sequences?.[sequenceId];
+    if (!sequence)
+        throw new Error(`Unknown sequence '${sequenceId}'.`);
+    let cursor = 0;
+    const clips = sequence.clips.map((clip) => {
+        if (!document.scenes?.[clip.scene])
+            throw new Error(`Unknown scene '${clip.scene}' in sequence '${sequenceId}'.`);
+        const item = { scene: clip.scene, start: cursor, duration: clip.duration, transition: normalizeTransition(clip.transition) };
+        cursor += clip.duration;
+        return item;
+    });
+    return { id: sequenceId, duration: cursor, clips };
+}
+function defaultSequenceId(document) {
+    return Object.keys(document.sequences ?? {})[0];
+}
+function documentForSequenceTime(document, sequenceId, time) {
+    const sequence = compileVisualSequence(document, sequenceId);
+    const clamped = Math.max(0, Math.min(sequence.duration || 0, time));
+    const clipIndex = sequence.clips.findIndex((item) => clamped >= item.start && clamped < item.start + item.duration);
+    const index = clipIndex === -1 ? sequence.clips.length - 1 : clipIndex;
+    const clip = sequence.clips[index];
+    if (!clip)
+        throw new Error(`Sequence '${sequenceId}' has no clips.`);
+    const localTime = Math.max(0, clamped - clip.start);
+    const previous = index > 0 ? sequence.clips[index - 1] : undefined;
+    if (previous && clip.transition.type === "fade" && clip.transition.duration > 0 && localTime < clip.transition.duration) {
+        const progress = Math.max(0, Math.min(1, localTime / clip.transition.duration));
+        return {
+            document: fadeDocuments((0, scenes_1.documentForScene)(document, previous.scene), (0, scenes_1.documentForScene)(document, clip.scene), progress),
+            scene: clip.scene,
+            localTime,
+            globalTime: clamped,
+            transition: { type: "fade", fromScene: previous.scene, toScene: clip.scene, progress, duration: clip.transition.duration }
+        };
+    }
+    return {
+        document: (0, scenes_1.documentForScene)(document, clip.scene),
+        scene: clip.scene,
+        localTime,
+        globalTime: clamped
+    };
+}
+function resolvedFrameForSequenceTime(document, sequenceId, time) {
+    const frame = documentForSequenceTime(document, sequenceId, time);
+    return {
+        ...frame,
+        document: (0, normalize_1.resolveVisualFrame)(frame.document, frame.localTime)
+    };
+}
+function sequenceTimeline(document, sequenceId, fps) {
+    const sequence = compileVisualSequence(document, sequenceId);
+    const safeFps = Math.max(1, Math.round(fps));
+    const frameCount = Math.max(1, Math.ceil(sequence.duration * safeFps));
+    const frames = [];
+    for (let index = 0; index < frameCount; index += 1) {
+        const time = index / safeFps;
+        const frame = documentForSequenceTime(document, sequenceId, time);
+        frames.push({
+            index,
+            time,
+            scene: frame.scene,
+            localTime: frame.localTime,
+            ...(frame.transition ? { transition: frame.transition } : {})
+        });
+    }
+    return frames;
+}
+function normalizeTransition(transition) {
+    if (!transition || transition === "cut")
+        return { type: "cut", duration: 0 };
+    if (transition === "fade")
+        return { type: "fade", duration: 0.4 };
+    return { type: transition.type, duration: Math.max(0, Number(transition.duration ?? (transition.type === "fade" ? 0.4 : 0))) };
+}
+function fadeDocuments(from, to, progress) {
+    const resolvedFrom = (0, normalize_1.normalizeVisualDocument)(from);
+    const resolvedTo = (0, normalize_1.normalizeVisualDocument)(to);
+    return {
+        ...to,
+        elements: [
+            ...withOpacity(resolvedFrom.elements ?? [], 1 - progress, "fade_from"),
+            ...withOpacity(resolvedTo.elements ?? [], progress, "fade_to")
+        ]
+    };
+}
+function withOpacity(elements, multiplier, prefix) {
+    return elements.map((element) => {
+        const next = (0, utils_1.clone)(element);
+        if (next.id)
+            next.id = `${prefix}_${next.id}`;
+        next.opacity = Number(next.opacity ?? 1) * multiplier;
+        if (next.type === "group" && Array.isArray(next.children)) {
+            next.children = withOpacity(next.children, multiplier, prefix);
+        }
+        return next;
+    });
+}

package/dist/src/shapes/builtins.d.ts

@@ -0,0 +1,2 @@
+import type { ShapeDefinition } from "./types";
+export declare const builtInShapeLowerers: ShapeDefinition[];