sketchmark 2.0.0 → 2.1.1

package/dist/src/presets/motions.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fadeIn = fadeIn;
+exports.fadeOut = fadeOut;
+exports.slideIn = slideIn;
+exports.riseIn = riseIn;
+exports.scaleIn = scaleIn;
+exports.pulse = pulse;
+exports.bob = bob;
+exports.shake = shake;
+exports.drawOn = drawOn;
+exports.stagger = stagger;
+const helpers_1 = require("./helpers");
+function fadeIn(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.4;
+    return (0, helpers_1.timelineFragment)(options.id, { opacity: (0, helpers_1.track)([[start, 0], [start + duration, 1]], options.curve ?? helpers_1.curves.easeOut) });
+}
+function fadeOut(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.4;
+    return (0, helpers_1.timelineFragment)(options.id, { opacity: (0, helpers_1.track)([[start, 1], [start + duration, 0]], options.curve ?? helpers_1.curves.easeIn) });
+}
+function slideIn(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.6;
+    const to = options.to ?? [0, 0];
+    const from = options.from ?? [to[0] - (options.distance ?? 80), to[1]];
+    return (0, helpers_1.timelineFragment)(options.id, { position: (0, helpers_1.track)([[start, from], [start + duration, to]], options.curve ?? helpers_1.curves.easeOut) });
+}
+function riseIn(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.55;
+    const to = options.to ?? [0, 0];
+    const from = options.from ?? [to[0], to[1] + (options.distance ?? 36)];
+    return (0, helpers_1.mergeFragments)((0, helpers_1.timelineFragment)(options.id, { position: (0, helpers_1.track)([[start, from], [start + duration, to]], options.curve ?? helpers_1.curves.easeOut) }), fadeIn({ id: options.id, start, duration: Math.min(duration, 0.35), curve: options.curve ?? helpers_1.curves.easeOut }));
+}
+function scaleIn(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.5;
+    return (0, helpers_1.mergeFragments)((0, helpers_1.timelineFragment)(options.id, { scale: (0, helpers_1.track)([[start, 0.85], [start + duration, 1]], options.curve ?? helpers_1.curves.easeOut) }), fadeIn({ id: options.id, start, duration: Math.min(duration, 0.3), curve: options.curve ?? helpers_1.curves.easeOut }));
+}
+function pulse(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.8;
+    const amount = options.amount ?? 0.08;
+    return (0, helpers_1.timelineFragment)(options.id, { scale: (0, helpers_1.track)([[start, 1], [start + duration * 0.5, 1 + amount], [start + duration, 1]], options.curve ?? helpers_1.curves.easeInOut) });
+}
+function bob(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 1.2;
+    const base = options.to ?? [0, 0];
+    const lift = options.distance ?? 16;
+    return (0, helpers_1.timelineFragment)(options.id, { position: (0, helpers_1.track)([[start, base], [start + duration * 0.5, [base[0], base[1] - lift]], [start + duration, base]], options.curve ?? helpers_1.curves.easeInOut) });
+}
+function shake(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.45;
+    const amount = options.amount ?? 8;
+    return (0, helpers_1.timelineFragment)(options.id, { x: (0, helpers_1.track)([[start, 0], [start + duration * 0.25, -amount], [start + duration * 0.5, amount], [start + duration * 0.75, -amount * 0.5], [start + duration, 0]], options.curve ?? helpers_1.curves.linear) });
+}
+function drawOn(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.8;
+    return (0, helpers_1.timelineFragment)(options.id, {
+        drawStart: (0, helpers_1.track)([[start, options.from ?? 0], [start + duration, options.from ?? 0]], helpers_1.curves.linear),
+        drawEnd: (0, helpers_1.track)([[start, options.from ?? 0], [start + duration, options.to ?? 1]], options.curve ?? helpers_1.curves.easeOut)
+    });
+}
+function stagger(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.4;
+    const each = options.each ?? 0.08;
+    return (0, helpers_1.mergeFragments)(...options.ids.map((id, index) => fadeIn({ id, start: start + index * each, duration, curve: options.curve ?? helpers_1.curves.easeOut })));
+}

package/dist/src/presets/scenes.d.ts

@@ -0,0 +1,35 @@
+import type { BasePresetOptions, PresetFragment } from "./types";
+export interface SceneOptions extends BasePresetOptions {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+}
+export interface TitleCardOptions extends SceneOptions {
+    title: string;
+    subtitle?: string;
+}
+export interface LowerThirdOptions extends SceneOptions {
+    title: string;
+    subtitle?: string;
+}
+export interface CaptionBubbleOptions extends SceneOptions {
+    text: string;
+}
+export interface ComparisonSplitOptions extends SceneOptions {
+    leftTitle?: string;
+    rightTitle?: string;
+}
+export interface DeviceFrameOptions extends SceneOptions {
+    label?: string;
+}
+export interface GridBackgroundOptions extends SceneOptions {
+    step?: number;
+    stroke?: string;
+}
+export declare function titleCard(options: TitleCardOptions): PresetFragment;
+export declare function lowerThird(options: LowerThirdOptions): PresetFragment;
+export declare function captionBubble(options: CaptionBubbleOptions): PresetFragment;
+export declare function comparisonSplit(options: ComparisonSplitOptions): PresetFragment;
+export declare function deviceFrame(options: DeviceFrameOptions): PresetFragment;
+export declare function gridBackground(options: GridBackgroundOptions): PresetFragment;

package/dist/src/presets/scenes.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.titleCard = titleCard;
+exports.lowerThird = lowerThird;
+exports.captionBubble = captionBubble;
+exports.comparisonSplit = comparisonSplit;
+exports.deviceFrame = deviceFrame;
+exports.gridBackground = gridBackground;
+const helpers_1 = require("./helpers");
+function titleCard(options) {
+    const id = options.id ?? "titleCard";
+    const x = options.x ?? 0;
+    const y = options.y ?? 0;
+    const children = [
+        path(`${id}.bg`, (0, helpers_1.rectPath)(0, 0, options.width, options.height), { fill: "#0f172a" }),
+        text(`${id}.title`, options.title, options.width / 2, options.height * 0.43, 42, "#ffffff", "center"),
+    ];
+    if (options.subtitle)
+        children.push(text(`${id}.subtitle`, options.subtitle, options.width / 2, options.height * 0.57, 20, "#cbd5e1", "center"));
+    return (0, helpers_1.fragment)([{ id, type: "group", x, y, width: options.width, height: options.height, children }]);
+}
+function lowerThird(options) {
+    const id = options.id ?? "lowerThird";
+    const x = options.x ?? 0;
+    const y = options.y ?? 0;
+    const children = [
+        path(`${id}.panel`, (0, helpers_1.roundedRectPath)(0, 0, options.width, options.height, 10), { fill: "#ffffff", stroke: "#cbd5e1", strokeWidth: 1 }),
+        path(`${id}.accent`, (0, helpers_1.roundedRectPath)(0, 0, 8, options.height, 4), { fill: "#2563eb" }),
+        text(`${id}.title`, options.title, 24, options.height * 0.38, 18, "#0f172a", "left")
+    ];
+    if (options.subtitle)
+        children.push(text(`${id}.subtitle`, options.subtitle, 24, options.height * 0.68, 13, "#64748b", "left"));
+    return (0, helpers_1.fragment)([{ id, type: "group", x, y, width: options.width, height: options.height, children }]);
+}
+function captionBubble(options) {
+    const id = options.id ?? "captionBubble";
+    const x = options.x ?? 0;
+    const y = options.y ?? 0;
+    return (0, helpers_1.fragment)([
+        {
+            id,
+            type: "group",
+            x,
+            y,
+            width: options.width,
+            height: options.height,
+            children: [
+                path(`${id}.bubble`, (0, helpers_1.roundedRectPath)(0, 0, options.width, options.height, 14), { fill: "#ffffff", stroke: "#94a3b8", strokeWidth: 1 }),
+                text(`${id}.text`, options.text, options.width / 2, options.height / 2, 16, "#111827", "center")
+            ]
+        }
+    ]);
+}
+function comparisonSplit(options) {
+    const id = options.id ?? "comparisonSplit";
+    const x = options.x ?? 0;
+    const y = options.y ?? 0;
+    const half = options.width / 2;
+    return (0, helpers_1.fragment)([
+        {
+            id,
+            type: "group",
+            x,
+            y,
+            width: options.width,
+            height: options.height,
+            children: [
+                path(`${id}.left`, (0, helpers_1.rectPath)(0, 0, half, options.height), { fill: "#eff6ff" }),
+                path(`${id}.right`, (0, helpers_1.rectPath)(half, 0, half, options.height), { fill: "#f8fafc" }),
+                path(`${id}.divider`, (0, helpers_1.linePath)([half, 0], [half, options.height]), { fill: "none", stroke: "#cbd5e1", strokeWidth: 2 }),
+                text(`${id}.leftTitle`, options.leftTitle ?? "Before", half / 2, 32, 18, "#0f172a", "center"),
+                text(`${id}.rightTitle`, options.rightTitle ?? "After", half + half / 2, 32, 18, "#0f172a", "center")
+            ]
+        }
+    ]);
+}
+function deviceFrame(options) {
+    const id = options.id ?? "deviceFrame";
+    const x = options.x ?? 0;
+    const y = options.y ?? 0;
+    return (0, helpers_1.fragment)([
+        {
+            id,
+            type: "group",
+            x,
+            y,
+            width: options.width,
+            height: options.height,
+            children: [
+                path(`${id}.outer`, (0, helpers_1.roundedRectPath)(0, 0, options.width, options.height, 24), { fill: "#111827", stroke: "#020617", strokeWidth: 2 }),
+                path(`${id}.screen`, (0, helpers_1.roundedRectPath)(14, 22, options.width - 28, options.height - 44, 14), { fill: "#f8fafc" }),
+                path(`${id}.camera`, (0, helpers_1.ellipsePath)(options.width / 2, 11, 3, 3), { fill: "#475569" }),
+                ...(options.label ? [text(`${id}.label`, options.label, options.width / 2, options.height - 18, 12, "#94a3b8", "center")] : [])
+            ]
+        }
+    ]);
+}
+function gridBackground(options) {
+    const id = options.id ?? "gridBackground";
+    const x = options.x ?? 0;
+    const y = options.y ?? 0;
+    const step = options.step ?? 32;
+    const stroke = options.stroke ?? "#e2e8f0";
+    const children = [path(`${id}.bg`, (0, helpers_1.rectPath)(0, 0, options.width, options.height), { fill: "#ffffff" })];
+    for (let gx = 0; gx <= options.width; gx += step)
+        children.push(path(`${id}.v${Math.round(gx)}`, (0, helpers_1.linePath)([gx, 0], [gx, options.height]), { fill: "none", stroke, strokeWidth: 1 }));
+    for (let gy = 0; gy <= options.height; gy += step)
+        children.push(path(`${id}.h${Math.round(gy)}`, (0, helpers_1.linePath)([0, gy], [options.width, gy]), { fill: "none", stroke, strokeWidth: 1 }));
+    return (0, helpers_1.fragment)([{ id, type: "group", x, y, width: options.width, height: options.height, children }]);
+}
+function path(id, d, options) {
+    return {
+        id,
+        type: "path",
+        d,
+        ...(options.fill !== undefined ? { fill: options.fill } : {}),
+        ...(options.stroke !== undefined ? { stroke: options.stroke } : {}),
+        ...(options.strokeWidth !== undefined ? { strokeWidth: options.strokeWidth } : {})
+    };
+}
+function text(id, content, x, y, fontSize, fill, align) {
+    return {
+        id,
+        type: "text",
+        text: content,
+        x,
+        y,
+        align,
+        valign: "middle",
+        fontSize,
+        weight: 700,
+        fill
+    };
+}

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

@@ -0,0 +1,71 @@
+import type { Point2 } from "../types";
+import type { BasePresetOptions, PresetFragment, StylePresetOptions } from "./types";
+export interface RectOptions extends BasePresetOptions, StylePresetOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface RoundedRectOptions extends RectOptions {
+    radius?: number;
+}
+export interface EllipseOptions extends BasePresetOptions, StylePresetOptions {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+export interface CircleOptions extends BasePresetOptions, StylePresetOptions {
+    cx: number;
+    cy: number;
+    radius: number;
+}
+export interface LineOptions extends BasePresetOptions, StylePresetOptions {
+    from: Point2;
+    to: Point2;
+    strokeCap?: "butt" | "round" | "square";
+}
+export interface PolylineOptions extends BasePresetOptions, StylePresetOptions {
+    points: Point2[];
+    closed?: boolean;
+    strokeCap?: "butt" | "round" | "square";
+    strokeJoin?: "miter" | "round" | "bevel";
+}
+export interface ArrowOptions extends BasePresetOptions, StylePresetOptions {
+    from: Point2;
+    to: Point2;
+    headLength?: number;
+    headWidth?: number;
+}
+export interface RegularPolygonOptions extends BasePresetOptions, StylePresetOptions {
+    cx: number;
+    cy: number;
+    radius: number;
+    sides: number;
+    rotation?: number;
+}
+export interface StarOptions extends BasePresetOptions, StylePresetOptions {
+    cx: number;
+    cy: number;
+    outerRadius: number;
+    innerRadius?: number;
+    points?: number;
+    rotation?: number;
+}
+export interface SpeechBubbleOptions extends RectOptions {
+    radius?: number;
+    tail?: Point2;
+    text?: string;
+    fontSize?: number;
+    textFill?: string;
+}
+export declare function rect(options: RectOptions): PresetFragment;
+export declare function roundedRect(options: RoundedRectOptions): PresetFragment;
+export declare function ellipse(options: EllipseOptions): PresetFragment;
+export declare function circle(options: CircleOptions): PresetFragment;
+export declare function line(options: LineOptions): PresetFragment;
+export declare function polyline(options: PolylineOptions): PresetFragment;
+export declare function arrow(options: ArrowOptions): PresetFragment;
+export declare function regularPolygon(options: RegularPolygonOptions): PresetFragment;
+export declare function star(options: StarOptions): PresetFragment;
+export declare function speechBubble(options: SpeechBubbleOptions): PresetFragment;

package/dist/src/presets/shapes.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rect = rect;
+exports.roundedRect = roundedRect;
+exports.ellipse = ellipse;
+exports.circle = circle;
+exports.line = line;
+exports.polyline = polyline;
+exports.arrow = arrow;
+exports.regularPolygon = regularPolygon;
+exports.star = star;
+exports.speechBubble = speechBubble;
+const helpers_1 = require("./helpers");
+function rect(options) {
+    return (0, helpers_1.fragment)([path(options.id ?? "rect", (0, helpers_1.rectPath)(options.x, options.y, options.width, options.height), { fill: (0, helpers_1.withPaint)(options.fill, "#ffffff"), stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 1, opacity: options.opacity })]);
+}
+function roundedRect(options) {
+    return (0, helpers_1.fragment)([path(options.id ?? "roundedRect", (0, helpers_1.roundedRectPath)(options.x, options.y, options.width, options.height, options.radius ?? 8), { fill: (0, helpers_1.withPaint)(options.fill, "#ffffff"), stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 1, opacity: options.opacity })]);
+}
+function ellipse(options) {
+    return (0, helpers_1.fragment)([path(options.id ?? "ellipse", (0, helpers_1.ellipsePath)(options.cx, options.cy, options.rx, options.ry), { fill: (0, helpers_1.withPaint)(options.fill, "#ffffff"), stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 1, opacity: options.opacity })]);
+}
+function circle(options) {
+    return ellipse({ ...options, rx: options.radius, ry: options.radius, id: options.id ?? "circle" });
+}
+function line(options) {
+    return (0, helpers_1.fragment)([path(options.id ?? "line", (0, helpers_1.linePath)(options.from, options.to), { fill: "none", stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 2, strokeCap: options.strokeCap ?? "round", opacity: options.opacity })]);
+}
+function polyline(options) {
+    return (0, helpers_1.fragment)([path(options.id ?? "polyline", (0, helpers_1.polygonPath)(options.points, !!options.closed), { fill: options.closed ? (0, helpers_1.withPaint)(options.fill, "none") : "none", stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 2, strokeCap: options.strokeCap ?? "round", strokeJoin: options.strokeJoin ?? "round", opacity: options.opacity })]);
+}
+function arrow(options) {
+    const id = options.id ?? "arrow";
+    const headLength = options.headLength ?? 16;
+    const headWidth = options.headWidth ?? 12;
+    const angle = Math.atan2(options.to[1] - options.from[1], options.to[0] - options.from[0]);
+    const back = [options.to[0] - Math.cos(angle) * headLength, options.to[1] - Math.sin(angle) * headLength];
+    const normal = angle + Math.PI / 2;
+    const left = [back[0] + Math.cos(normal) * headWidth * 0.5, back[1] + Math.sin(normal) * headWidth * 0.5];
+    const right = [back[0] - Math.cos(normal) * headWidth * 0.5, back[1] - Math.sin(normal) * headWidth * 0.5];
+    return (0, helpers_1.fragment)([
+        {
+            id,
+            type: "group",
+            x: 0,
+            y: 0,
+            children: [
+                path(`${id}.shaft`, (0, helpers_1.linePath)(options.from, back), { fill: "none", stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 2, strokeCap: "round" }),
+                path(`${id}.head`, (0, helpers_1.polygonPath)([options.to, left, right]), { fill: (0, helpers_1.withPaint)(options.fill, options.stroke ?? "#111827"), stroke: options.stroke ?? "#111827", strokeWidth: 1 })
+            ]
+        }
+    ]);
+}
+function regularPolygon(options) {
+    return (0, helpers_1.fragment)([path(options.id ?? "polygon", (0, helpers_1.polygonPath)((0, helpers_1.regularPoints)(options.cx, options.cy, options.radius, options.sides, options.rotation)), { fill: (0, helpers_1.withPaint)(options.fill, "#ffffff"), stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 1, opacity: options.opacity })]);
+}
+function star(options) {
+    const outer = options.outerRadius;
+    return (0, helpers_1.fragment)([path(options.id ?? "star", (0, helpers_1.polygonPath)((0, helpers_1.starPoints)(options.cx, options.cy, outer, options.innerRadius ?? outer * 0.45, options.points ?? 5, options.rotation)), { fill: (0, helpers_1.withPaint)(options.fill, "#facc15"), stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 1, opacity: options.opacity })]);
+}
+function speechBubble(options) {
+    const id = options.id ?? "speechBubble";
+    const tail = options.tail ?? [options.x + options.width * 0.25, options.y + options.height + 24];
+    const tailBaseLeft = [options.x + options.width * 0.25, options.y + options.height - 2];
+    const tailBaseRight = [options.x + options.width * 0.38, options.y + options.height - 2];
+    const bubble = (0, helpers_1.roundedRectPath)(options.x, options.y, options.width, options.height, options.radius ?? 14);
+    const tailPath = (0, helpers_1.polygonPath)([tailBaseLeft, tail, tailBaseRight]);
+    const children = [
+        path(`${id}.bubble`, bubble, { fill: (0, helpers_1.withPaint)(options.fill, "#ffffff"), stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 2 }),
+        path(`${id}.tail`, tailPath, { fill: (0, helpers_1.withPaint)(options.fill, "#ffffff"), stroke: options.stroke ?? "#111827", strokeWidth: options.strokeWidth ?? 2 })
+    ];
+    if (options.text) {
+        children.push({
+            id: `${id}.text`,
+            type: "text",
+            text: options.text,
+            x: options.x + options.width / 2,
+            y: options.y + options.height / 2,
+            align: "center",
+            valign: "middle",
+            fontSize: options.fontSize ?? 18,
+            fill: options.textFill ?? "#111827"
+        });
+    }
+    return (0, helpers_1.fragment)([{ id, type: "group", x: 0, y: 0, width: options.width, height: options.height, children }]);
+}
+function path(id, d, options = {}) {
+    return {
+        id,
+        type: "path",
+        d,
+        ...(0, helpers_1.pathStyle)(options),
+        ...(options.strokeCap ? { strokeCap: options.strokeCap } : {}),
+        ...(options.strokeJoin ? { strokeJoin: options.strokeJoin } : {})
+    };
+}

package/dist/src/presets/transitions.d.ts

@@ -0,0 +1,29 @@
+import type { Point2 } from "../types";
+import type { Box, MotionPresetOptions, PresetFragment, TransitionPair } from "./types";
+export interface TransitionOptions extends TransitionPair, MotionPresetOptions {
+    distance?: number;
+    fromPosition?: Point2;
+    toPosition?: Point2;
+}
+export interface WipeOptions extends TransitionOptions, Box {
+}
+export interface CanvasTransitionOptions extends TransitionOptions {
+    width: number;
+    height: number;
+    id?: string;
+}
+export interface IrisOptions extends MotionPresetOptions, Box {
+    id: string;
+    cx?: number;
+    cy?: number;
+}
+export declare function crossfade(options: TransitionOptions): PresetFragment;
+export declare function pushLeft(options: TransitionOptions): PresetFragment;
+export declare function pushRight(options: TransitionOptions): PresetFragment;
+export declare function slideUp(options: TransitionOptions): PresetFragment;
+export declare function wipeLeft(options: WipeOptions): PresetFragment;
+export declare function wipeRight(options: WipeOptions): PresetFragment;
+export declare function zoomCut(options: TransitionOptions): PresetFragment;
+export declare function fadeThroughBlack(options: CanvasTransitionOptions): PresetFragment;
+export declare function irisIn(options: IrisOptions): PresetFragment;
+export declare function irisOut(options: IrisOptions): PresetFragment;

package/dist/src/presets/transitions.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.crossfade = crossfade;
+exports.pushLeft = pushLeft;
+exports.pushRight = pushRight;
+exports.slideUp = slideUp;
+exports.wipeLeft = wipeLeft;
+exports.wipeRight = wipeRight;
+exports.zoomCut = zoomCut;
+exports.fadeThroughBlack = fadeThroughBlack;
+exports.irisIn = irisIn;
+exports.irisOut = irisOut;
+const helpers_1 = require("./helpers");
+function crossfade(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.5;
+    return (0, helpers_1.mergeFragments)((0, helpers_1.timelineFragment)(options.fromId, { opacity: (0, helpers_1.track)([[start, 1], [start + duration, 0]], options.curve ?? helpers_1.curves.easeInOut) }), (0, helpers_1.timelineFragment)(options.toId, { opacity: (0, helpers_1.track)([[start, 0], [start + duration, 1]], options.curve ?? helpers_1.curves.easeInOut) }));
+}
+function pushLeft(options) {
+    return push(options, -Math.abs(options.distance ?? 120), 0);
+}
+function pushRight(options) {
+    return push(options, Math.abs(options.distance ?? 120), 0);
+}
+function slideUp(options) {
+    const distance = Math.abs(options.distance ?? 90);
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.5;
+    const fromBase = options.fromPosition ?? [0, 0];
+    const toBase = options.toPosition ?? [0, 0];
+    return (0, helpers_1.mergeFragments)((0, helpers_1.timelineFragment)(options.fromId, { position: (0, helpers_1.track)([[start, fromBase], [start + duration, [fromBase[0], fromBase[1] - distance]]], options.curve ?? helpers_1.curves.easeInOut), opacity: (0, helpers_1.track)([[start, 1], [start + duration, 0]], options.curve ?? helpers_1.curves.easeInOut) }), (0, helpers_1.timelineFragment)(options.toId, { position: (0, helpers_1.track)([[start, [toBase[0], toBase[1] + distance]], [start + duration, toBase]], options.curve ?? helpers_1.curves.easeInOut), opacity: (0, helpers_1.track)([[start, 0], [start + duration, 1]], options.curve ?? helpers_1.curves.easeInOut) }));
+}
+function wipeLeft(options) {
+    return wipe(options, "left");
+}
+function wipeRight(options) {
+    return wipe(options, "right");
+}
+function zoomCut(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.45;
+    return (0, helpers_1.mergeFragments)((0, helpers_1.timelineFragment)(options.fromId, { scale: (0, helpers_1.track)([[start, 1], [start + duration, 1.08]], options.curve ?? helpers_1.curves.easeIn), opacity: (0, helpers_1.track)([[start, 1], [start + duration, 0]], options.curve ?? helpers_1.curves.easeIn) }), (0, helpers_1.timelineFragment)(options.toId, { scale: (0, helpers_1.track)([[start, 0.92], [start + duration, 1]], options.curve ?? helpers_1.curves.easeOut), opacity: (0, helpers_1.track)([[start, 0], [start + duration, 1]], options.curve ?? helpers_1.curves.easeOut) }));
+}
+function fadeThroughBlack(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.8;
+    const id = options.id ?? "transition.black";
+    return (0, helpers_1.mergeFragments)(crossfade({ fromId: options.fromId, toId: options.toId, start, duration, curve: options.curve ?? helpers_1.curves.easeInOut }), {
+        elements: [{ id, type: "path", d: (0, helpers_1.rectPath)(0, 0, options.width, options.height), fill: "#000000", opacity: 0 }],
+        timelines: {
+            [id]: {
+                opacity: (0, helpers_1.track)([[start, 0], [start + duration * 0.5, 1], [start + duration, 0]], options.curve ?? helpers_1.curves.easeInOut)
+            }
+        }
+    });
+}
+function irisIn(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.8;
+    const cx = options.cx ?? options.x + options.width / 2;
+    const cy = options.cy ?? options.y + options.height / 2;
+    const maxRadius = Math.hypot(options.width, options.height);
+    return (0, helpers_1.timelineFragment)(options.id, {
+        "clip.d": {
+            keyframes: sampledClip(start, duration, 12, (progress) => (0, helpers_1.ellipsePath)(cx, cy, maxRadius * progress, maxRadius * progress), options.curve ?? helpers_1.curves.easeOut)
+        }
+    });
+}
+function irisOut(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.8;
+    const cx = options.cx ?? options.x + options.width / 2;
+    const cy = options.cy ?? options.y + options.height / 2;
+    const maxRadius = Math.hypot(options.width, options.height);
+    return (0, helpers_1.timelineFragment)(options.id, {
+        "clip.d": {
+            keyframes: sampledClip(start, duration, 12, (progress) => (0, helpers_1.ellipsePath)(cx, cy, maxRadius * (1 - progress), maxRadius * (1 - progress)), options.curve ?? helpers_1.curves.easeIn)
+        }
+    });
+}
+function push(options, dx, dy) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.55;
+    const fromBase = options.fromPosition ?? [0, 0];
+    const toBase = options.toPosition ?? [0, 0];
+    return (0, helpers_1.mergeFragments)((0, helpers_1.timelineFragment)(options.fromId, { position: (0, helpers_1.track)([[start, fromBase], [start + duration, [fromBase[0] + dx, fromBase[1] + dy]]], options.curve ?? helpers_1.curves.easeInOut) }), (0, helpers_1.timelineFragment)(options.toId, { position: (0, helpers_1.track)([[start, [toBase[0] - dx, toBase[1] - dy]], [start + duration, toBase]], options.curve ?? helpers_1.curves.easeInOut) }));
+}
+function wipe(options, direction) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.6;
+    const full = (0, helpers_1.rectPath)(options.x, options.y, options.width, options.height);
+    const empty = direction === "right" ? (0, helpers_1.rectPath)(options.x, options.y, 0, options.height) : (0, helpers_1.rectPath)(options.x + options.width, options.y, 0, options.height);
+    return (0, helpers_1.mergeFragments)((0, helpers_1.timelineFragment)(options.fromId, { opacity: (0, helpers_1.track)([[start, 1], [start + duration, 0]], options.curve ?? helpers_1.curves.easeInOut) }), (0, helpers_1.timelineFragment)(options.toId, {
+        "mask.d": {
+            keyframes: [
+                { time: start, value: empty, out: options.curve ?? helpers_1.curves.easeInOut },
+                { time: start + duration, value: full }
+            ]
+        },
+        "mask.opacity": (0, helpers_1.track)([[start, 1], [start + duration, 1]], helpers_1.curves.linear),
+        opacity: (0, helpers_1.track)([[start, 0], [start + 0.001, 1]], helpers_1.curves.linear)
+    }));
+}
+function sampledClip(start, duration, samples, makePath, curve) {
+    return Array.from({ length: samples + 1 }, (_, index) => {
+        const progress = index / samples;
+        return {
+            time: start + duration * progress,
+            value: makePath(progress),
+            ...(index < samples ? { out: curve } : {})
+        };
+    });
+}

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

@@ -0,0 +1,34 @@
+import type { Paint, Point2, TimelineCurve, TimelineTrack, VisualElement } from "../types";
+export type PresetTimelineMap = Record<string, Record<string, TimelineTrack>>;
+export interface PresetFragment {
+    elements?: VisualElement[];
+    timelines?: PresetTimelineMap;
+}
+export interface ApplyPresetOptions {
+    validate?: boolean;
+}
+export interface BasePresetOptions {
+    id?: string;
+}
+export interface StylePresetOptions {
+    fill?: Paint;
+    stroke?: Paint;
+    strokeWidth?: number;
+    opacity?: number;
+}
+export interface MotionPresetOptions {
+    start?: number;
+    duration?: number;
+    curve?: TimelineCurve;
+}
+export type TransitionPair = {
+    fromId: string;
+    toId: string;
+};
+export type Box = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type PointLike = Point2;

package/dist/src/presets/types.js

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

package/dist/src/render/html.js

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToHtml = renderToHtml;
-const three_html_1 = require("./three-html");
 const svg_1 = require("./svg");
 function renderToHtml(document, options = {}) {
-    if (document.canvas.renderer === "three")
-        return (0, three_html_1.renderToThreeHtml)(document, options);
     const svg = (0, svg_1.renderToSvg)(document, options);
     const duration = Number(document.canvas.duration ?? 0);
     const background = options.transparent ? "transparent" : "#111827";
-    return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sketchmark Visual</title><style>html,body{margin:0;width:100%;height:100%;background:${background};display:grid;place-items:center}.sketchmark-frame{max-width:100vw;max-height:100vh}</style></head><body><div class="sketchmark-frame" data-duration="${duration}">${svg}</div></body></html>`;
+    return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sketchmark Kernel Visual</title><style>html,body{margin:0;width:100%;height:100%;background:${background};display:grid;place-items:center}.sketchmark-frame{max-width:100vw;max-height:100vh}</style></head><body><div class="sketchmark-frame" data-duration="${duration}">${svg}</div></body></html>`;
 }

package/dist/src/render/svg.d.ts

@@ -1,3 +1,3 @@
-import type { KernelVisualDocument, RenderOptions, ResolvedVisualDocument, VisualDocument } from "../types";
+import type { RenderOptions, ResolvedVisualDocument, VisualDocument } from "../types";
 export declare function renderToSvg(document: VisualDocument, options?: RenderOptions): string;
-export declare function renderResolvedSvg(document: ResolvedVisualDocument | KernelVisualDocument, options?: RenderOptions): string;
+export declare function renderResolvedSvg(document: ResolvedVisualDocument, options?: RenderOptions): string;