sketchmark 2.0.0 → 2.1.1

package/dist/src/edit.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listElementReferences = listElementReferences;
+exports.findElementById = findElementById;
+exports.setElementProperty = setElementProperty;
+exports.setTimelineKeyframe = setTimelineKeyframe;
+exports.removeTimelineKeyframe = removeTimelineKeyframe;
+exports.listTimelineTracks = listTimelineTracks;
+exports.roundedRectClipPath = roundedRectClipPath;
+exports.imageRoundedClip = imageRoundedClip;
+const animatable_1 = require("./animatable");
+const utils_1 = require("./utils");
+const validate_1 = require("./validate");
+function listElementReferences(document) {
+    const out = [];
+    visitElements(document.elements ?? [], (element, path, depth) => {
+        if (element.id)
+            out.push({ id: element.id, type: element.type, depth, path });
+    });
+    return out;
+}
+function findElementById(document, id) {
+    let found;
+    visitElements(document.elements ?? [], (element) => {
+        if (!found && element.id === id)
+            found = element;
+    });
+    return found;
+}
+function setElementProperty(document, id, property, value) {
+    const next = (0, utils_1.clone)(document);
+    const element = requireElement(next, id);
+    applyProperty(element, property, value);
+    assertValid(next);
+    return next;
+}
+function setTimelineKeyframe(document, id, property, time, value, options = {}) {
+    var _a, _b;
+    if (!(0, utils_1.isFiniteNumber)(time) || time < 0)
+        throw new Error("Keyframe time must be a non-negative finite number.");
+    const next = (0, utils_1.clone)(document);
+    const element = requireElement(next, id);
+    element.timeline ?? (element.timeline = {});
+    (_a = element.timeline).tracks ?? (_a.tracks = {});
+    const track = ((_b = element.timeline.tracks)[property] ?? (_b[property] = { keyframes: [] }));
+    if (options.ease && !track.ease)
+        track.ease = options.ease;
+    if (options.curve && !track.curve)
+        track.curve = (0, utils_1.clone)(options.curve);
+    const frame = makeKeyframe(time, value, options);
+    const existing = track.keyframes.findIndex((item) => keyframeTime(item) === time);
+    if (existing >= 0)
+        track.keyframes[existing] = mergeKeyframe(track.keyframes[existing], frame);
+    else
+        track.keyframes.push(frame);
+    track.keyframes.sort((left, right) => keyframeTime(left) - keyframeTime(right));
+    assertValid(next);
+    return next;
+}
+function removeTimelineKeyframe(document, id, property, time) {
+    const next = (0, utils_1.clone)(document);
+    const element = requireElement(next, id);
+    const track = element.timeline?.tracks?.[property];
+    if (!track)
+        return next;
+    track.keyframes = track.keyframes.filter((frame) => keyframeTime(frame) !== time);
+    if (!track.keyframes.length && element.timeline?.tracks)
+        delete element.timeline.tracks[property];
+    if (element.timeline?.tracks && !Object.keys(element.timeline.tracks).length)
+        delete element.timeline.tracks;
+    if (element.timeline && !element.timeline.start && !element.timeline.end && !element.timeline.tracks)
+        delete element.timeline;
+    assertValid(next);
+    return next;
+}
+function listTimelineTracks(document, id) {
+    const element = findElementById(document, id);
+    if (!element?.timeline?.tracks)
+        return [];
+    return Object.entries(element.timeline.tracks).map(([property, track]) => ({
+        property,
+        keyframes: (0, utils_1.clone)(track.keyframes),
+        ...(track.curve ? { curve: (0, utils_1.clone)(track.curve) } : {}),
+        ...(track.ease ? { ease: track.ease } : {})
+    }));
+}
+function roundedRectClipPath(x, y, width, height, radius = 0) {
+    const left = finiteOrZero(x);
+    const top = finiteOrZero(y);
+    const w = Math.max(0, finiteOrZero(width));
+    const h = Math.max(0, finiteOrZero(height));
+    const r = Math.min(Math.max(0, finiteOrZero(radius)), w / 2, h / 2);
+    const right = left + w;
+    const bottom = top + h;
+    if (r <= 0)
+        return `M ${left} ${top} H ${right} V ${bottom} H ${left} Z`;
+    return [
+        `M ${left + r} ${top}`,
+        `H ${right - r}`,
+        `Q ${right} ${top} ${right} ${top + r}`,
+        `V ${bottom - r}`,
+        `Q ${right} ${bottom} ${right - r} ${bottom}`,
+        `H ${left + r}`,
+        `Q ${left} ${bottom} ${left} ${bottom - r}`,
+        `V ${top + r}`,
+        `Q ${left} ${top} ${left + r} ${top}`,
+        "Z"
+    ].join(" ");
+}
+function imageRoundedClip(element, radius = 0) {
+    return { type: "path", d: roundedRectClipPath(element.x, element.y, element.width, element.height, radius) };
+}
+function visitElements(elements, visit, prefix = [], depth = 0) {
+    for (const [index, element] of elements.entries()) {
+        const path = [...prefix, index];
+        visit(element, path, depth);
+        if (element.type === "group")
+            visitElements(element.children, visit, path, depth + 1);
+    }
+}
+function requireElement(document, id) {
+    const element = findElementById(document, id);
+    if (!element)
+        throw new Error(`Unknown element '${id}'.`);
+    return element;
+}
+function applyProperty(element, property, value) {
+    (0, animatable_1.applyPropertyValue)(element, property, value);
+}
+function makeKeyframe(time, value, options) {
+    return {
+        time,
+        value: (0, utils_1.clone)(value),
+        ...(options.in ? { in: (0, utils_1.clone)(options.in) } : {}),
+        ...(options.out ?? options.curve ? { out: (0, utils_1.clone)(options.out ?? options.curve) } : {}),
+        ...(options.interpolation ? { interpolation: (0, utils_1.clone)(options.interpolation) } : {})
+    };
+}
+function mergeKeyframe(existing, next) {
+    if (Array.isArray(existing))
+        return next;
+    return {
+        ...existing,
+        ...next,
+        in: next.in ?? existing.in,
+        out: next.out ?? existing.out,
+        interpolation: next.interpolation ?? existing.interpolation
+    };
+}
+function keyframeTime(frame) {
+    return Array.isArray(frame) ? frame[0] : frame.time;
+}
+function assertValid(document) {
+    const result = (0, validate_1.validateVisualDocument)(document);
+    if (!result.ok) {
+        const first = result.issues[0];
+        throw new Error(first ? `${first.path}: ${first.message}` : "Invalid visual document.");
+    }
+}
+function finiteOrZero(value) {
+    return (0, utils_1.isFiniteNumber)(value) ? value : 0;
+}

package/dist/src/index.d.ts

@@ -1,19 +1,10 @@
 export * from "./types";
 export * from "./validate";
 export * from "./normalize";
-export * from "./kernel";
-export * from "./schema";
-export * from "./patch";
-export * from "./compounds";
-export * from "./project";
-export * from "./scenes";
-export * from "./sequences";
-export * from "./deck";
 export * from "./diagnostics";
+export * from "./schema";
+export * from "./keyframes";
+export * from "./edit";
+export * from "./animatable";
 export * from "./render/svg";
 export * from "./render/html";
-export * from "./render/three-html";
-export * from "./render/three-preview-svg";
-export * from "./render/raw-three";
-export * from "./export";
-export * from "./player";

package/dist/src/index.js

@@ -17,19 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
 __exportStar(require("./validate"), exports);
 __exportStar(require("./normalize"), exports);
-__exportStar(require("./kernel"), exports);
-__exportStar(require("./schema"), exports);
-__exportStar(require("./patch"), exports);
-__exportStar(require("./compounds"), exports);
-__exportStar(require("./project"), exports);
-__exportStar(require("./scenes"), exports);
-__exportStar(require("./sequences"), exports);
-__exportStar(require("./deck"), exports);
 __exportStar(require("./diagnostics"), exports);
+__exportStar(require("./schema"), exports);
+__exportStar(require("./keyframes"), exports);
+__exportStar(require("./edit"), exports);
+__exportStar(require("./animatable"), exports);
 __exportStar(require("./render/svg"), exports);
 __exportStar(require("./render/html"), exports);
-__exportStar(require("./render/three-html"), exports);
-__exportStar(require("./render/three-preview-svg"), exports);
-__exportStar(require("./render/raw-three"), exports);
-__exportStar(require("./export"), exports);
-__exportStar(require("./player"), exports);

package/dist/src/keyframes.d.ts

@@ -0,0 +1,48 @@
+import type { MotionValue, Point2, TimelineCurve, VisualDocument } from "./types";
+export type TimelineCurvePresetName = "linear" | "ease-in" | "ease-out" | "ease-in-out" | "hold";
+export type KeyframeOffsetMap = Record<string, number | Record<string, number>>;
+export interface KeyframePropertySpec {
+    value: MotionValue;
+    curve?: TimelineCurve;
+    ease?: TimelineCurvePresetName | string;
+    offset?: number;
+    in?: TimelineCurve;
+    out?: TimelineCurve;
+    interpolation?: TimelineCurve;
+}
+export type KeyframePropertyState = MotionValue | KeyframePropertySpec;
+export interface KeyframeElementState {
+    position?: Point2 | KeyframePropertySpec;
+    x?: number | KeyframePropertySpec;
+    y?: number | KeyframePropertySpec;
+    rotation?: KeyframePropertyState;
+    scale?: KeyframePropertyState;
+    scaleX?: KeyframePropertyState;
+    scaleY?: KeyframePropertyState;
+    opacity?: KeyframePropertyState;
+    fill?: KeyframePropertyState;
+    stroke?: KeyframePropertyState;
+    strokeWidth?: KeyframePropertyState;
+    drawStart?: KeyframePropertyState;
+    drawEnd?: KeyframePropertyState;
+    dashOffset?: KeyframePropertyState;
+    [property: string]: KeyframePropertyState | undefined;
+}
+export interface KeyframeState {
+    time: number;
+    set?: Record<string, KeyframeElementState>;
+    elements?: Record<string, KeyframeElementState>;
+    curve?: TimelineCurve;
+    ease?: string;
+    offsets?: KeyframeOffsetMap;
+}
+export interface CompileKeyframeStateOptions {
+    validate?: boolean;
+    includeBaseFrame?: boolean;
+    baseTime?: number;
+    defaultCurve?: TimelineCurve;
+    defaultEase?: string;
+    offsets?: KeyframeOffsetMap;
+}
+export declare function timelineCurvePreset(name: TimelineCurvePresetName | string): TimelineCurve | undefined;
+export declare function compileKeyframeStates(document: VisualDocument, states: KeyframeState[], options?: CompileKeyframeStateOptions): VisualDocument;

package/dist/src/keyframes.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timelineCurvePreset = timelineCurvePreset;
+exports.compileKeyframeStates = compileKeyframeStates;
+const animatable_1 = require("./animatable");
+const utils_1 = require("./utils");
+const validate_1 = require("./validate");
+function timelineCurvePreset(name) {
+    switch (name) {
+        case "linear":
+            return { type: "graph", points: [[0, 0], [1, 1]] };
+        case "ease-in":
+            return { type: "cubicBezier", x1: 0.42, y1: 0, x2: 1, y2: 1 };
+        case "ease-out":
+            return { type: "cubicBezier", x1: 0, y1: 0, x2: 0.58, y2: 1 };
+        case "ease-in-out":
+            return { type: "cubicBezier", x1: 0.42, y1: 0, x2: 0.58, y2: 1 };
+        case "hold":
+            return { type: "hold" };
+        default:
+            return undefined;
+    }
+}
+function compileKeyframeStates(document, states, options = {}) {
+    if (options.validate !== false) {
+        const result = (0, validate_1.validateVisualDocument)(document);
+        if (!result.ok) {
+            const first = result.issues[0];
+            throw new Error(first ? `${first.path}: ${first.message}` : "Invalid visual document.");
+        }
+    }
+    const next = (0, utils_1.clone)(document);
+    const elements = (0, utils_1.flattenElements)(next.elements ?? []);
+    const byId = new Map(elements.filter((element) => element.id).map((element) => [element.id, element]));
+    const sorted = states.slice().sort((left, right) => left.time - right.time);
+    for (const state of sorted) {
+        if (!(0, utils_1.isFiniteNumber)(state.time) || state.time < 0)
+            throw new Error("Keyframe state time must be a non-negative finite number.");
+        const set = state.set ?? state.elements ?? {};
+        for (const [id, values] of Object.entries(set)) {
+            const element = byId.get(id);
+            if (!element)
+                throw new Error(`Cannot keyframe unknown element '${id}'.`);
+            for (const entry of normalizedStateEntries(element, values)) {
+                const offset = timingOffset(options.offsets, state.offsets, id, entry.property, entry.offset);
+                const time = state.time + offset;
+                if (!(0, utils_1.isFiniteNumber)(time) || time < 0)
+                    throw new Error(`Keyframe time for '${id}.${entry.property}' must be a non-negative finite number after offsets.`);
+                const ease = entry.ease ?? state.ease ?? options.defaultEase;
+                const out = entry.out ?? entry.curve ?? state.curve ?? options.defaultCurve ?? timelineCurvePreset(ease ?? "");
+                addTrackKeyframe(element, entry.property, entry.value, time, {
+                    in: entry.in,
+                    out,
+                    interpolation: entry.interpolation,
+                    ease: out || entry.in || entry.interpolation ? undefined : ease,
+                    includeBaseFrame: options.includeBaseFrame !== false,
+                    baseTime: options.baseTime ?? 0
+                });
+            }
+        }
+    }
+    sortTimelineTracks(next.elements ?? []);
+    return next;
+}
+function normalizedStateEntries(element, state) {
+    const entries = [];
+    const position = state.position;
+    const hasX = state.x !== undefined;
+    const hasY = state.y !== undefined;
+    if (position !== undefined) {
+        const parsed = parsePropertyState(element, "position", position);
+        if (!(0, utils_1.isPoint2)(parsed.value))
+            throw new Error(`Element '${element.id ?? "(unnamed)"}' position keyframe must be [x,y].`);
+        entries.push({ property: "position", ...parsed });
+    }
+    else if (hasX && hasY && (0, utils_1.isFiniteNumber)(state.x) && (0, utils_1.isFiniteNumber)(state.y)) {
+        entries.push({ property: "position", value: [state.x, state.y] });
+    }
+    else {
+        if (hasX && state.x !== undefined)
+            entries.push({ property: "x", ...parsePropertyState(element, "x", state.x) });
+        if (hasY && state.y !== undefined)
+            entries.push({ property: "y", ...parsePropertyState(element, "y", state.y) });
+    }
+    for (const [property, value] of Object.entries(state)) {
+        if (property === "position" || property === "x" || property === "y" || value === undefined)
+            continue;
+        entries.push({ property, ...parsePropertyState(element, property, value) });
+    }
+    return entries;
+}
+function parsePropertyState(element, property, state) {
+    if (isPropertySpec(state)) {
+        if (!(0, animatable_1.isTimelineValue)(state.value))
+            throw new Error(`Element '${element.id ?? "(unnamed)"}' property '${property}' must be a timeline value.`);
+        return {
+            value: (0, utils_1.clone)(state.value),
+            ...(state.curve ? { curve: (0, utils_1.clone)(state.curve) } : {}),
+            ...(state.ease ? { ease: state.ease } : {}),
+            ...(state.offset !== undefined ? { offset: state.offset } : {}),
+            ...(state.in ? { in: (0, utils_1.clone)(state.in) } : {}),
+            ...(state.out ? { out: (0, utils_1.clone)(state.out) } : {}),
+            ...(state.interpolation ? { interpolation: (0, utils_1.clone)(state.interpolation) } : {})
+        };
+    }
+    if (!(0, animatable_1.isTimelineValue)(state))
+        throw new Error(`Element '${element.id ?? "(unnamed)"}' property '${property}' must be a timeline value.`);
+    return { value: (0, utils_1.clone)(state) };
+}
+function addTrackKeyframe(element, property, value, time, options) {
+    var _a;
+    element.timeline ?? (element.timeline = {});
+    (_a = element.timeline).tracks ?? (_a.tracks = {});
+    const tracks = element.timeline.tracks;
+    const track = (tracks[property] ?? (tracks[property] = { keyframes: [] }));
+    if (options.ease && !track.ease)
+        track.ease = options.ease;
+    if (options.includeBaseFrame && time !== options.baseTime && !track.keyframes.some((frame) => keyframeTime(frame) === options.baseTime)) {
+        const base = baseValue(element, property);
+        if (base !== undefined)
+            track.keyframes.push(makeKeyframe(options.baseTime, base, { out: options.out ?? options.interpolation }));
+    }
+    const next = makeKeyframe(time, value, { in: options.in, out: options.out, interpolation: options.interpolation });
+    const existingIndex = track.keyframes.findIndex((frame) => keyframeTime(frame) === time);
+    if (existingIndex >= 0)
+        track.keyframes[existingIndex] = mergeKeyframe(track.keyframes[existingIndex], next);
+    else
+        track.keyframes.push(next);
+}
+function baseValue(element, property) {
+    return (0, animatable_1.baseValueForProperty)(element, property);
+}
+function sortTimelineTracks(elements) {
+    for (const element of elements) {
+        for (const track of Object.values(element.timeline?.tracks ?? {})) {
+            track.keyframes.sort((left, right) => keyframeTime(left) - keyframeTime(right));
+        }
+        if (element.type === "group")
+            sortTimelineTracks(element.children);
+    }
+}
+function makeKeyframe(time, value, options = {}) {
+    return {
+        time,
+        value: (0, utils_1.clone)(value),
+        ...(options.in ? { in: (0, utils_1.clone)(options.in) } : {}),
+        ...(options.out ? { out: (0, utils_1.clone)(options.out) } : {}),
+        ...(options.interpolation ? { interpolation: (0, utils_1.clone)(options.interpolation) } : {})
+    };
+}
+function mergeKeyframe(existing, next) {
+    if (Array.isArray(existing))
+        return next;
+    return {
+        ...existing,
+        ...next,
+        in: next.in ?? existing.in,
+        out: next.out ?? existing.out,
+        interpolation: next.interpolation ?? existing.interpolation
+    };
+}
+function keyframeTime(frame) {
+    return Array.isArray(frame) ? frame[0] : frame.time;
+}
+function timingOffset(global, local, id, property, own) {
+    const value = offsetFromMap(global, id, property) + offsetFromMap(local, id, property) + Number(own ?? 0);
+    if (!(0, utils_1.isFiniteNumber)(value))
+        throw new Error(`Keyframe offset for '${id}.${property}' must be finite.`);
+    return value;
+}
+function offsetFromMap(map, id, property) {
+    const entry = map?.[id];
+    if (entry === undefined)
+        return 0;
+    if ((0, utils_1.isFiniteNumber)(entry))
+        return entry;
+    const value = entry[property];
+    return (0, utils_1.isFiniteNumber)(value) ? value : 0;
+}
+function isPropertySpec(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value) && "value" in value;
+}

package/dist/src/motion.d.ts

@@ -0,0 +1,4 @@
+import type { MotionDriver, MotionExpressionInput, MotionValue, VisualDocument, VisualElement } from "./types";
+export declare function applyMotionDrivers(document: VisualDocument, time: number): VisualDocument;
+export declare function evaluateDriver(driver: MotionDriver, elements: VisualElement[], time: number): MotionValue | undefined;
+export declare function evaluateExpression(input: MotionExpressionInput, elements: VisualElement[], time: number): MotionValue;