sketchmark 2.1.5 → 2.1.7

package/bin/editor-ui.d.ts

@@ -1,11 +1,14 @@
-export function editorHtml(
-  title: string,
-  options?: {
-    apiBase?: string;
+export function editorHtml(
+  title: string,
+  options?: {
+    apiBase?: string;
     mp4MuxerUrl?: string;
     mp4MuxerSource?: string | false;
     serverExportFallback?: boolean;
+    canvasStageRender?: boolean;
+    localDocumentControls?: boolean;
+    bootstrapScript?: string;
   }
 ): string;
-
-export function editorMp4MuxerSource(value?: string | false): string;
+
+export function editorMp4MuxerSource(value?: string | false): string;

package/dist/src/authoring/compose.d.ts

@@ -0,0 +1,4 @@
+import type { VisualCanvas, VisualDocument } from "../types";
+import type { ApplyAuthoringOptions, AuthoringInput, CreatedVisualDocument, CreateDocumentOptions } from "./types";
+export declare function createDocument(canvas: VisualCanvas, fragments?: AuthoringInput, options?: CreateDocumentOptions): CreatedVisualDocument;
+export declare function apply(document: VisualDocument, input: AuthoringInput, options?: ApplyAuthoringOptions): VisualDocument;

package/dist/src/authoring/compose.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDocument = createDocument;
+exports.apply = apply;
+const keyframes_1 = require("../keyframes");
+const utils_1 = require("../utils");
+const validate_1 = require("../validate");
+const compose_1 = require("../presets/compose");
+function createDocument(canvas, fragments, options = {}) {
+    const document = {
+        version: 1,
+        canvas: (0, utils_1.clone)(canvas),
+        elements: []
+    };
+    return fragments ? apply(document, fragments, options) : validateDocument(document, options.validate);
+}
+function apply(document, input, options = {}) {
+    const items = Array.isArray(input) ? input : [input];
+    const fragments = [];
+    const states = [];
+    for (const item of items) {
+        if (isKeyframeState(item))
+            states.push(item);
+        else
+            fragments.push(item);
+    }
+    let next = fragments.length ? (0, compose_1.applyPresetFragments)(document, fragments, { validate: options.validate }) : (0, utils_1.clone)(document);
+    if (states.length) {
+        next = (0, keyframes_1.compileKeyframeStates)(next, states, options);
+        validateDocument(next, options.validate);
+    }
+    else {
+        validateDocument(next, options.validate);
+    }
+    return next;
+}
+function isKeyframeState(item) {
+    return typeof item.time === "number";
+}
+function validateDocument(document, validate = true) {
+    if (validate === false)
+        return document;
+    const result = (0, validate_1.validateVisualDocument)(document);
+    if (!result.ok) {
+        const first = result.issues[0];
+        throw new Error(first ? `${first.path}: ${first.message}` : "Authoring output is not a valid Sketchmark kernel document.");
+    }
+    return document;
+}

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

@@ -0,0 +1,7 @@
+export type { ApplyAuthoringOptions, AuthoringFragment, AuthoringInput, AuthoringStep, CreatedVisualDocument, CreateDocumentOptions } from "./types";
+export { apply, createDocument } from "./compose";
+export { curves } from "../presets/helpers";
+export * as states from "./states";
+export * as layout from "./layout";
+export * as motion from "./motion";
+export * as pose from "./pose";

package/dist/src/authoring/index.js

@@ -0,0 +1,45 @@
+"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.pose = exports.motion = exports.layout = exports.states = exports.curves = exports.createDocument = exports.apply = void 0;
+var compose_1 = require("./compose");
+Object.defineProperty(exports, "apply", { enumerable: true, get: function () { return compose_1.apply; } });
+Object.defineProperty(exports, "createDocument", { enumerable: true, get: function () { return compose_1.createDocument; } });
+var helpers_1 = require("../presets/helpers");
+Object.defineProperty(exports, "curves", { enumerable: true, get: function () { return helpers_1.curves; } });
+exports.states = __importStar(require("./states"));
+exports.layout = __importStar(require("./layout"));
+exports.motion = __importStar(require("./motion"));
+exports.pose = __importStar(require("./pose"));

package/dist/src/authoring/layout.d.ts

@@ -0,0 +1,43 @@
+import type { Point2 } from "../types";
+export type LayoutDirection = "horizontal" | "vertical";
+export type LayoutAlign = "start" | "center" | "end" | "stretch";
+export type HorizontalAlign = "left" | "center" | "right";
+export type VerticalAlign = "top" | "middle" | "bottom";
+export interface LayoutBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface LayoutSize {
+    width: number;
+    height: number;
+}
+export interface InsetValue {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+    x?: number;
+    y?: number;
+}
+export interface StackOptions {
+    direction?: LayoutDirection;
+    gap?: number;
+    align?: LayoutAlign;
+    start?: number;
+}
+export interface GridOptions {
+    columns: number;
+    rows?: number;
+    gap?: number;
+    columnGap?: number;
+    rowGap?: number;
+}
+export declare function box(x: number, y: number, width: number, height: number): LayoutBox;
+export declare function inset(area: LayoutBox, value: number | InsetValue): LayoutBox;
+export declare function center(area: LayoutBox): Point2;
+export declare function center(area: LayoutBox, size: LayoutSize): LayoutBox;
+export declare function align(area: LayoutBox, size: LayoutSize, horizontal?: HorizontalAlign, vertical?: VerticalAlign, offset?: Point2): LayoutBox;
+export declare function stack(area: LayoutBox, sizes: LayoutSize[], options?: StackOptions): LayoutBox[];
+export declare function grid(area: LayoutBox, options: GridOptions): LayoutBox[];

package/dist/src/authoring/layout.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.box = box;
+exports.inset = inset;
+exports.center = center;
+exports.align = align;
+exports.stack = stack;
+exports.grid = grid;
+function box(x, y, width, height) {
+    return { x, y, width, height };
+}
+function inset(area, value) {
+    const top = typeof value === "number" ? value : value.top ?? value.y ?? 0;
+    const right = typeof value === "number" ? value : value.right ?? value.x ?? 0;
+    const bottom = typeof value === "number" ? value : value.bottom ?? value.y ?? 0;
+    const left = typeof value === "number" ? value : value.left ?? value.x ?? 0;
+    return {
+        x: area.x + left,
+        y: area.y + top,
+        width: Math.max(0, area.width - left - right),
+        height: Math.max(0, area.height - top - bottom)
+    };
+}
+function center(area, size) {
+    if (!size)
+        return [area.x + area.width / 2, area.y + area.height / 2];
+    return align(area, size, "center", "middle");
+}
+function align(area, size, horizontal = "center", vertical = "middle", offset = [0, 0]) {
+    const x = horizontal === "left" ? area.x : horizontal === "right" ? area.x + area.width - size.width : area.x + (area.width - size.width) / 2;
+    const y = vertical === "top" ? area.y : vertical === "bottom" ? area.y + area.height - size.height : area.y + (area.height - size.height) / 2;
+    return { x: x + offset[0], y: y + offset[1], width: size.width, height: size.height };
+}
+function stack(area, sizes, options = {}) {
+    const direction = options.direction ?? "vertical";
+    const gap = options.gap ?? 0;
+    const alignMode = options.align ?? "start";
+    const cursorStart = options.start ?? (direction === "vertical" ? area.y : area.x);
+    let cursor = cursorStart;
+    return sizes.map((size) => {
+        const item = direction === "vertical"
+            ? {
+                x: alignedCrossAxis(area.x, area.width, size.width, alignMode),
+                y: cursor,
+                width: alignMode === "stretch" ? area.width : size.width,
+                height: size.height
+            }
+            : {
+                x: cursor,
+                y: alignedCrossAxis(area.y, area.height, size.height, alignMode),
+                width: size.width,
+                height: alignMode === "stretch" ? area.height : size.height
+            };
+        cursor += (direction === "vertical" ? item.height : item.width) + gap;
+        return item;
+    });
+}
+function grid(area, options) {
+    const columns = Math.max(1, Math.floor(options.columns));
+    const rows = Math.max(1, Math.floor(options.rows ?? 1));
+    const columnGap = options.columnGap ?? options.gap ?? 0;
+    const rowGap = options.rowGap ?? options.gap ?? 0;
+    const cellWidth = Math.max(0, (area.width - columnGap * (columns - 1)) / columns);
+    const cellHeight = Math.max(0, (area.height - rowGap * (rows - 1)) / rows);
+    const cells = [];
+    for (let row = 0; row < rows; row += 1) {
+        for (let column = 0; column < columns; column += 1) {
+            cells.push({
+                x: area.x + column * (cellWidth + columnGap),
+                y: area.y + row * (cellHeight + rowGap),
+                width: cellWidth,
+                height: cellHeight
+            });
+        }
+    }
+    return cells;
+}
+function alignedCrossAxis(start, available, size, alignMode) {
+    switch (alignMode) {
+        case "center":
+            return start + (available - size) / 2;
+        case "end":
+            return start + available - size;
+        case "stretch":
+        case "start":
+        default:
+            return start;
+    }
+}

package/dist/src/authoring/motion.d.ts

@@ -0,0 +1,53 @@
+import type { MotionValue, Point2, TimelineCurve } from "../types";
+import type { PresetFragment } from "../presets/types";
+export interface TargetOptions {
+    id: string;
+    start?: number;
+    duration?: number;
+    curve?: TimelineCurve;
+}
+export interface MoveOptions extends TargetOptions {
+    from: Point2;
+    to: Point2;
+}
+export interface EntranceOptions extends TargetOptions {
+    kind?: "fade" | "rise" | "slide" | "scale";
+    from?: Point2;
+    to?: Point2;
+    distance?: number;
+}
+export interface ExitOptions extends TargetOptions {
+    kind?: "fade" | "fall" | "slide" | "scale";
+    from?: Point2;
+    to?: Point2;
+    distance?: number;
+}
+export interface SettleOptions extends TargetOptions {
+    from?: number;
+    overshoot?: number;
+    to?: number;
+}
+export interface StaggerOptions {
+    ids: string[];
+    start?: number;
+    each?: number;
+    duration?: number;
+    curve?: TimelineCurve;
+    kind?: EntranceOptions["kind"];
+    recipe?: (id: string, start: number, index: number) => PresetFragment;
+}
+export interface LoopOptions {
+    id: string;
+    property: string;
+    values: MotionValue[];
+    start?: number;
+    duration?: number;
+    curve?: TimelineCurve;
+    close?: boolean;
+}
+export declare function move(options: MoveOptions): PresetFragment;
+export declare function entrance(options: EntranceOptions): PresetFragment;
+export declare function exit(options: ExitOptions): PresetFragment;
+export declare function settle(options: SettleOptions): PresetFragment;
+export declare function stagger(options: StaggerOptions): PresetFragment;
+export declare function loop(options: LoopOptions): PresetFragment;

package/dist/src/authoring/motion.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.move = move;
+exports.entrance = entrance;
+exports.exit = exit;
+exports.settle = settle;
+exports.stagger = stagger;
+exports.loop = loop;
+const presets_1 = require("../presets");
+const helpers_1 = require("../presets/helpers");
+function move(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.5;
+    return (0, helpers_1.timelineFragment)(options.id, {
+        position: (0, helpers_1.track)([[start, options.from], [start + duration, options.to]], options.curve ?? helpers_1.curves.easeInOut)
+    });
+}
+function entrance(options) {
+    const kind = options.kind ?? "rise";
+    if (kind === "fade")
+        return presets_1.motions.fadeIn(options);
+    if (kind === "scale")
+        return presets_1.motions.scaleIn(options);
+    if (kind === "slide") {
+        return presets_1.motions.slideIn({
+            ...options,
+            to: options.to ?? [0, 0],
+            from: options.from,
+            distance: options.distance
+        });
+    }
+    return presets_1.motions.riseIn({
+        ...options,
+        to: options.to ?? [0, 0],
+        from: options.from,
+        distance: options.distance
+    });
+}
+function exit(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.4;
+    const curve = options.curve ?? helpers_1.curves.easeIn;
+    const fade = presets_1.motions.fadeOut({ id: options.id, start, duration, curve });
+    if (options.kind === "scale") {
+        return (0, helpers_1.mergeFragments)(fade, (0, helpers_1.timelineFragment)(options.id, { scale: (0, helpers_1.track)([[start, 1], [start + duration, 0.92]], curve) }));
+    }
+    if (options.kind === "slide" || options.kind === "fall") {
+        const from = options.from ?? options.to ?? [0, 0];
+        const distance = options.distance ?? 36;
+        const to = options.to ?? (options.kind === "fall" ? [from[0], from[1] + distance] : [from[0] + distance, from[1]]);
+        return (0, helpers_1.mergeFragments)(fade, move({ id: options.id, from, to, start, duration, curve }));
+    }
+    return fade;
+}
+function settle(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.55;
+    const from = options.from ?? 0.96;
+    const overshoot = options.overshoot ?? 1.04;
+    const to = options.to ?? 1;
+    return (0, helpers_1.timelineFragment)(options.id, {
+        scale: (0, helpers_1.track)([
+            [start, from],
+            [start + duration * 0.68, overshoot],
+            [start + duration, to]
+        ], options.curve ?? helpers_1.curves.easeOut)
+    });
+}
+function stagger(options) {
+    const start = options.start ?? 0;
+    const each = options.each ?? 0.08;
+    const duration = options.duration ?? 0.4;
+    return (0, helpers_1.mergeFragments)(...options.ids.map((id, index) => {
+        const itemStart = start + index * each;
+        return options.recipe
+            ? options.recipe(id, itemStart, index)
+            : entrance({ id, start: itemStart, duration, curve: options.curve, kind: options.kind ?? "fade" });
+    }));
+}
+function loop(options) {
+    if (!options.values.length)
+        throw new Error("Loop motion requires at least one value.");
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 1;
+    const close = options.close !== false;
+    const values = close && JSON.stringify(options.values[0]) !== JSON.stringify(options.values[options.values.length - 1])
+        ? [...options.values, options.values[0]]
+        : options.values.slice();
+    const denominator = Math.max(1, values.length - 1);
+    return (0, helpers_1.timelineFragment)(options.id, {
+        [options.property]: (0, helpers_1.track)(values.map((value, index) => [start + (duration * index) / denominator, value]), options.curve ?? helpers_1.curves.linear)
+    });
+}

package/dist/src/authoring/pose.d.ts

@@ -0,0 +1,20 @@
+import type { CompileKeyframeStateOptions, KeyframeElementState, KeyframeOffsetMap, KeyframeState } from "../keyframes";
+import type { TimelineCurve, VisualDocument } from "../types";
+export type PoseSet = Record<string, KeyframeElementState>;
+export type PoseMap = Record<string, PoseSet>;
+export interface PoseDefinition {
+    name: string;
+    set: PoseSet;
+}
+export interface PoseStep {
+    time: number;
+    pose: string;
+    curve?: TimelineCurve;
+    offsets?: KeyframeOffsetMap;
+}
+export interface PoseSequenceOptions {
+    curve?: TimelineCurve;
+}
+export declare function define(name: string, set: PoseSet): PoseDefinition;
+export declare function sequence(poses: PoseMap | PoseDefinition[], steps: PoseStep[], options?: PoseSequenceOptions): KeyframeState[];
+export declare function compile(document: VisualDocument, poses: PoseMap | PoseDefinition[], steps: PoseStep[], options?: CompileKeyframeStateOptions & PoseSequenceOptions): VisualDocument;

package/dist/src/authoring/pose.js

@@ -0,0 +1,73 @@
+"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.define = define;
+exports.sequence = sequence;
+exports.compile = compile;
+const utils_1 = require("../utils");
+const states = __importStar(require("./states"));
+function define(name, set) {
+    const cleanName = name.trim();
+    if (!cleanName)
+        throw new Error("Pose name must be a non-empty string.");
+    return { name: cleanName, set: (0, utils_1.clone)(set) };
+}
+function sequence(poses, steps, options = {}) {
+    const map = normalizePoseMap(poses);
+    return steps.map((step) => {
+        const set = map[step.pose];
+        if (!set)
+            throw new Error(`Unknown pose '${step.pose}'.`);
+        return states.at(step.time, set, {
+            ...(step.curve ?? options.curve ? { curve: step.curve ?? options.curve } : {}),
+            ...(step.offsets ? { offsets: step.offsets } : {})
+        });
+    });
+}
+function compile(document, poses, steps, options = {}) {
+    const keyStates = sequence(poses, steps, { curve: options.curve });
+    return states.compile(document, keyStates, options);
+}
+function normalizePoseMap(poses) {
+    if (!Array.isArray(poses))
+        return (0, utils_1.clone)(poses);
+    const map = {};
+    for (const pose of poses) {
+        if (map[pose.name])
+            throw new Error(`Duplicate pose '${pose.name}'.`);
+        map[pose.name] = (0, utils_1.clone)(pose.set);
+    }
+    return map;
+}

package/dist/src/authoring/states.d.ts

@@ -0,0 +1,17 @@
+import type { CompileKeyframeStateOptions, KeyframeElementState, KeyframeOffsetMap, KeyframePropertySpec, KeyframeState } from "../keyframes";
+import type { MotionValue, TimelineCurve, VisualDocument } from "../types";
+export interface StateAtOptions {
+    curve?: TimelineCurve;
+    offsets?: KeyframeOffsetMap;
+}
+export interface StateSpecOptions {
+    curve?: TimelineCurve;
+    offset?: number;
+    in?: TimelineCurve;
+    out?: TimelineCurve;
+    interpolation?: TimelineCurve;
+}
+export type StateSet = Record<string, KeyframeElementState>;
+export declare function at(time: number, set: StateSet, options?: StateAtOptions): KeyframeState;
+export declare function spec(value: MotionValue, options?: StateSpecOptions): KeyframePropertySpec;
+export declare function compile(document: VisualDocument, steps: KeyframeState[], options?: CompileKeyframeStateOptions): VisualDocument;

package/dist/src/authoring/states.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.at = at;
+exports.spec = spec;
+exports.compile = compile;
+const keyframes_1 = require("../keyframes");
+const utils_1 = require("../utils");
+function at(time, set, options = {}) {
+    return {
+        time,
+        set: (0, utils_1.clone)(set),
+        ...(options.curve ? { curve: (0, utils_1.clone)(options.curve) } : {}),
+        ...(options.offsets ? { offsets: (0, utils_1.clone)(options.offsets) } : {})
+    };
+}
+function spec(value, options = {}) {
+    return {
+        value: (0, utils_1.clone)(value),
+        ...(options.curve ? { curve: (0, utils_1.clone)(options.curve) } : {}),
+        ...(options.offset !== undefined ? { offset: options.offset } : {}),
+        ...(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 compile(document, steps, options = {}) {
+    return (0, keyframes_1.compileKeyframeStates)(document, steps, options);
+}

package/dist/src/authoring/types.d.ts

@@ -0,0 +1,14 @@
+import type { CompileKeyframeStateOptions, KeyframeState } from "../keyframes";
+import type { VisualCanvas, VisualDocument } from "../types";
+import type { ApplyPresetOptions, PresetFragment } from "../presets/types";
+export type AuthoringFragment = PresetFragment;
+export type AuthoringStep = PresetFragment | KeyframeState;
+export type AuthoringInput = AuthoringStep | AuthoringStep[];
+export interface CreateDocumentOptions extends ApplyPresetOptions {
+}
+export interface ApplyAuthoringOptions extends ApplyPresetOptions, CompileKeyframeStateOptions {
+}
+export interface CreatedVisualDocument extends VisualDocument {
+    version: 1;
+    canvas: VisualCanvas;
+}

package/dist/src/authoring/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,15 @@
+import type { VisualDocument } from "./types";
+export interface BrowserEditorOptions {
+    document: VisualDocument;
+    title?: string;
+    autoSaveDelay?: number | false;
+    onChange?: (document: VisualDocument) => void;
+    onSave?: (document: VisualDocument) => void | Promise<void>;
+}
+export interface BrowserEditorInstance {
+    getDocument(): VisualDocument;
+    setDocument(document: VisualDocument): void;
+    save(): Promise<void>;
+    destroy(): void;
+}
+export declare function createSketchmarkBrowserEditor(root: HTMLElement, options: BrowserEditorOptions): BrowserEditorInstance;