sketchmark 2.0.0 → 2.1.0

package/dist/src/presets/characters.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stickPerson = stickPerson;
+exports.talkingHead = talkingHead;
+exports.simpleDog = simpleDog;
+exports.simpleSpider = simpleSpider;
+exports.cursorHand = cursorHand;
+exports.simpleMascot = simpleMascot;
+const helpers_1 = require("./helpers");
+function stickPerson(options = {}) {
+    const id = options.id ?? "person";
+    const height = options.height ?? 180;
+    const stroke = options.stroke ?? "#111827";
+    const headRadius = height * 0.12;
+    const hipY = height * 0.58;
+    return group(id, options, height * 0.5, height, [
+        path(`${id}.head`, (0, helpers_1.ellipsePath)(height * 0.5, headRadius + 2, headRadius, headRadius), { fill: "#ffffff", stroke, strokeWidth: 5 }),
+        path(`${id}.body`, (0, helpers_1.linePath)([height * 0.5, headRadius * 2 + 4], [height * 0.48, hipY]), { stroke, strokeWidth: 7 }),
+        path(`${id}.leftArm`, (0, helpers_1.linePath)([height * 0.49, height * 0.25], [height * 0.27, height * 0.48]), { stroke, strokeWidth: 6 }),
+        path(`${id}.rightArm`, (0, helpers_1.linePath)([height * 0.5, height * 0.25], [height * 0.72, height * 0.48]), { stroke: "#64748b", strokeWidth: 6 }),
+        path(`${id}.leftLeg`, (0, helpers_1.linePath)([height * 0.48, hipY], [height * 0.3, height * 0.96]), { stroke: "#64748b", strokeWidth: 7 }),
+        path(`${id}.rightLeg`, (0, helpers_1.linePath)([height * 0.48, hipY], [height * 0.68, height * 0.96]), { stroke, strokeWidth: 7 })
+    ]);
+}
+function talkingHead(options = {}) {
+    const id = options.id ?? "talkingHead";
+    const size = options.width ?? options.height ?? 140;
+    const stroke = options.stroke ?? "#111827";
+    return group(id, options, size, size * 1.1, [
+        path(`${id}.shoulders`, `M ${size * 0.18} ${size} C ${size * 0.32} ${size * 0.82} ${size * 0.68} ${size * 0.82} ${size * 0.82} ${size}`, { fill: "none", stroke, strokeWidth: 8 }),
+        path(`${id}.head`, (0, helpers_1.ellipsePath)(size * 0.5, size * 0.38, size * 0.28, size * 0.31), { fill: options.fill ?? "#ffffff", stroke, strokeWidth: 5 }),
+        path(`${id}.leftEye`, (0, helpers_1.ellipsePath)(size * 0.4, size * 0.34, 3, 3), { fill: stroke }),
+        path(`${id}.rightEye`, (0, helpers_1.ellipsePath)(size * 0.6, size * 0.34, 3, 3), { fill: stroke }),
+        path(`${id}.mouth`, `M ${size * 0.4} ${size * 0.48} Q ${size * 0.5} ${size * 0.56} ${size * 0.62} ${size * 0.48}`, { fill: "none", stroke, strokeWidth: 4 })
+    ]);
+}
+function simpleDog(options = {}) {
+    const id = options.id ?? "dog";
+    const width = options.width ?? 180;
+    const height = options.height ?? 100;
+    const stroke = options.stroke ?? "#111827";
+    const fur = options.fill ?? "#fbbf24";
+    return group(id, options, width, height, [
+        path(`${id}.body`, (0, helpers_1.roundedRectPath)(width * 0.18, height * 0.32, width * 0.5, height * 0.28, 18), { fill: fur, stroke, strokeWidth: 4 }),
+        path(`${id}.head`, (0, helpers_1.ellipsePath)(width * 0.78, height * 0.35, width * 0.16, height * 0.18), { fill: fur, stroke, strokeWidth: 4 }),
+        path(`${id}.ear`, (0, helpers_1.polygonPath)([[width * 0.7, height * 0.22], [width * 0.64, height * 0.02], [width * 0.82, height * 0.2]]), { fill: "#92400e", stroke, strokeWidth: 3 }),
+        path(`${id}.tail`, `M ${width * 0.18} ${height * 0.38} Q ${width * 0.04} ${height * 0.22} ${width * 0.08} ${height * 0.12}`, { fill: "none", stroke, strokeWidth: 5 }),
+        path(`${id}.frontLeg`, (0, helpers_1.linePath)([width * 0.58, height * 0.58], [width * 0.63, height * 0.95]), { stroke, strokeWidth: 5 }),
+        path(`${id}.backLeg`, (0, helpers_1.linePath)([width * 0.3, height * 0.58], [width * 0.24, height * 0.95]), { stroke, strokeWidth: 5 }),
+        path(`${id}.eye`, (0, helpers_1.ellipsePath)(width * 0.84, height * 0.32, 3, 3), { fill: stroke })
+    ]);
+}
+function simpleSpider(options = {}) {
+    const id = options.id ?? "spider";
+    const size = options.width ?? options.height ?? 150;
+    const stroke = options.stroke ?? "#111827";
+    const body = options.fill ?? "#334155";
+    const children = [
+        path(`${id}.body`, (0, helpers_1.ellipsePath)(size * 0.5, size * 0.48, size * 0.18, size * 0.16), { fill: body, stroke, strokeWidth: 4 }),
+        path(`${id}.head`, (0, helpers_1.ellipsePath)(size * 0.68, size * 0.45, size * 0.1, size * 0.1), { fill: body, stroke, strokeWidth: 4 }),
+        path(`${id}.eyeLeft`, (0, helpers_1.ellipsePath)(size * 0.7, size * 0.42, 2.5, 2.5), { fill: "#ffffff" }),
+        path(`${id}.eyeRight`, (0, helpers_1.ellipsePath)(size * 0.75, size * 0.43, 2.5, 2.5), { fill: "#ffffff" })
+    ];
+    for (let i = 0; i < 4; i += 1) {
+        const y = size * (0.33 + i * 0.08);
+        children.push(path(`${id}.leftLeg${i + 1}`, `M ${size * 0.38} ${y} L ${size * 0.17} ${y - size * 0.08} L ${size * 0.08} ${y + size * 0.02}`, { fill: "none", stroke, strokeWidth: 4 }));
+        children.push(path(`${id}.rightLeg${i + 1}`, `M ${size * 0.62} ${y} L ${size * 0.85} ${y - size * 0.08} L ${size * 0.94} ${y + size * 0.02}`, { fill: "none", stroke, strokeWidth: 4 }));
+    }
+    return group(id, options, size, size, children);
+}
+function cursorHand(options = {}) {
+    const id = options.id ?? "cursorHand";
+    const size = options.width ?? options.height ?? 120;
+    const stroke = options.stroke ?? "#111827";
+    const d = [
+        `M ${size * 0.22} ${size * 0.08}`,
+        `L ${size * 0.78} ${size * 0.5}`,
+        `L ${size * 0.53} ${size * 0.57}`,
+        `L ${size * 0.66} ${size * 0.88}`,
+        `L ${size * 0.5} ${size * 0.94}`,
+        `L ${size * 0.38} ${size * 0.62}`,
+        `L ${size * 0.18} ${size * 0.78}`,
+        "Z"
+    ].join(" ");
+    return group(id, options, size, size, [path(`${id}.shape`, d, { fill: options.fill ?? "#ffffff", stroke, strokeWidth: 4 })]);
+}
+function simpleMascot(options = {}) {
+    const id = options.id ?? "mascot";
+    const size = options.width ?? options.height ?? 150;
+    const stroke = options.stroke ?? "#111827";
+    return group(id, options, size, size, [
+        path(`${id}.body`, (0, helpers_1.roundedRectPath)(size * 0.22, size * 0.4, size * 0.56, size * 0.44, 24), { fill: options.fill ?? "#bfdbfe", stroke, strokeWidth: 5 }),
+        path(`${id}.head`, (0, helpers_1.ellipsePath)(size * 0.5, size * 0.28, size * 0.24, size * 0.22), { fill: "#ffffff", stroke, strokeWidth: 5 }),
+        path(`${id}.leftEye`, (0, helpers_1.ellipsePath)(size * 0.42, size * 0.25, 4, 4), { fill: stroke }),
+        path(`${id}.rightEye`, (0, helpers_1.ellipsePath)(size * 0.58, size * 0.25, 4, 4), { fill: stroke }),
+        path(`${id}.smile`, `M ${size * 0.39} ${size * 0.36} Q ${size * 0.5} ${size * 0.43} ${size * 0.61} ${size * 0.36}`, { fill: "none", stroke, strokeWidth: 4 }),
+        path(`${id}.leftArm`, (0, helpers_1.linePath)([size * 0.22, size * 0.5], [size * 0.06, size * 0.66]), { stroke, strokeWidth: 5 }),
+        path(`${id}.rightArm`, (0, helpers_1.linePath)([size * 0.78, size * 0.5], [size * 0.94, size * 0.66]), { stroke, strokeWidth: 5 })
+    ]);
+}
+function group(id, options, width, height, children) {
+    return (0, helpers_1.fragment)([{ id, type: "group", x: options.x ?? 0, y: options.y ?? 0, width, height, children }]);
+}
+function path(id, d, options = {}) {
+    return {
+        id,
+        type: "path",
+        d,
+        ...(options.fill !== undefined ? { fill: options.fill } : { fill: "none" }),
+        ...(options.stroke !== undefined ? { stroke: options.stroke } : {}),
+        ...(options.strokeWidth !== undefined ? { strokeWidth: options.strokeWidth } : {})
+    };
+}

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

@@ -0,0 +1,5 @@
+import type { VisualDocument } from "../types";
+import type { ApplyPresetOptions, PresetFragment } from "./types";
+export declare function applyPresetFragments(document: VisualDocument, fragments: PresetFragment | PresetFragment[], options?: ApplyPresetOptions): VisualDocument;
+export declare function mergePresetFragments(fragments: PresetFragment[]): PresetFragment;
+export declare function prefixPresetFragment(fragment: PresetFragment, prefix: string): PresetFragment;

package/dist/src/presets/compose.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyPresetFragments = applyPresetFragments;
+exports.mergePresetFragments = mergePresetFragments;
+exports.prefixPresetFragment = prefixPresetFragment;
+const validate_1 = require("../validate");
+const helpers_1 = require("./helpers");
+function applyPresetFragments(document, fragments, options = {}) {
+    const list = Array.isArray(fragments) ? fragments : [fragments];
+    const next = (0, helpers_1.cloneValue)(document);
+    next.elements ?? (next.elements = []);
+    for (const item of list) {
+        for (const element of item.elements ?? [])
+            next.elements.push((0, helpers_1.cloneElement)(element));
+    }
+    const byId = elementMap(next.elements);
+    for (const item of list) {
+        applyTimelineMap(byId, item.timelines ?? {});
+    }
+    if (options.validate !== false) {
+        const result = (0, validate_1.validateVisualDocument)(next);
+        if (!result.ok) {
+            const first = result.issues[0];
+            throw new Error(first ? `${first.path}: ${first.message}` : "Preset output is not a valid Sketchmark kernel document.");
+        }
+    }
+    return next;
+}
+function mergePresetFragments(fragments) {
+    return (0, helpers_1.mergeFragments)(...fragments);
+}
+function prefixPresetFragment(fragment, prefix) {
+    const normalizedPrefix = prefix.trim().replace(/\.+$/g, "");
+    if (!normalizedPrefix)
+        return (0, helpers_1.cloneValue)(fragment);
+    const elements = (fragment.elements ?? []).map((element) => prefixElement(element, normalizedPrefix));
+    const timelines = {};
+    for (const [id, tracks] of Object.entries(fragment.timelines ?? {})) {
+        timelines[`${normalizedPrefix}.${id}`] = cloneTracks(tracks);
+    }
+    return {
+        ...(elements.length ? { elements } : {}),
+        ...(Object.keys(timelines).length ? { timelines } : {})
+    };
+}
+function applyTimelineMap(byId, timelines) {
+    var _a;
+    for (const [id, tracks] of Object.entries(timelines)) {
+        const element = byId.get(id);
+        if (!element)
+            throw new Error(`Cannot apply preset timeline to unknown element '${id}'.`);
+        element.timeline ?? (element.timeline = {});
+        (_a = element.timeline).tracks ?? (_a.tracks = {});
+        for (const [property, track] of Object.entries(tracks)) {
+            element.timeline.tracks[property] = (0, helpers_1.mergeTrack)(element.timeline.tracks[property], track);
+        }
+    }
+}
+function elementMap(elements) {
+    const map = new Map();
+    const visit = (element) => {
+        if (element.id)
+            map.set(element.id, element);
+        if (element.type === "group")
+            element.children.forEach(visit);
+    };
+    elements.forEach(visit);
+    return map;
+}
+function prefixElement(element, prefix) {
+    const next = (0, helpers_1.cloneElement)(element);
+    if (next.id)
+        next.id = `${prefix}.${next.id}`;
+    if (next.type === "group")
+        next.children = next.children.map((child) => prefixElement(child, prefix));
+    return next;
+}
+function cloneTracks(tracks) {
+    return Object.fromEntries(Object.entries(tracks).map(([property, track]) => [property, (0, helpers_1.cloneTrack)(track)]));
+}

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

@@ -0,0 +1,40 @@
+import type { Point2 } from "../types";
+import type { Box, MotionPresetOptions, PresetFragment } from "./types";
+export interface TargetEffectOptions {
+    id: string;
+    start?: number;
+}
+export interface ShadowOptions extends TargetEffectOptions {
+    dx?: number;
+    dy?: number;
+    blur?: number;
+    color?: string;
+    opacity?: number;
+}
+export interface AnimatedEffectOptions extends TargetEffectOptions, MotionPresetOptions {
+}
+export interface RoundedImageClipOptions extends TargetEffectOptions, Box {
+    radius?: number;
+    radii?: Array<[number, number]>;
+}
+export interface MaskRevealOptions extends TargetEffectOptions, Box, MotionPresetOptions {
+    direction?: "left" | "right" | "up" | "down";
+}
+export declare function dropShadow(options: ShadowOptions): PresetFragment;
+export declare function softBlur(options: TargetEffectOptions & {
+    amount?: number;
+}): PresetFragment;
+export declare function glow(options: ShadowOptions): PresetFragment;
+export declare function dim(options: AnimatedEffectOptions & {
+    opacity?: number;
+}): PresetFragment;
+export declare function tintFill(options: TargetEffectOptions & {
+    color?: string;
+}): PresetFragment;
+export declare function gradientSweep(options: AnimatedEffectOptions & {
+    from?: Point2;
+    to?: Point2;
+    colors?: [string, string];
+}): PresetFragment;
+export declare function roundedImageClip(options: RoundedImageClipOptions): PresetFragment;
+export declare function maskReveal(options: MaskRevealOptions): PresetFragment;

package/dist/src/presets/effects.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropShadow = dropShadow;
+exports.softBlur = softBlur;
+exports.glow = glow;
+exports.dim = dim;
+exports.tintFill = tintFill;
+exports.gradientSweep = gradientSweep;
+exports.roundedImageClip = roundedImageClip;
+exports.maskReveal = maskReveal;
+const helpers_1 = require("./helpers");
+function dropShadow(options) {
+    const time = options.start ?? 0;
+    return (0, helpers_1.timelineFragment)(options.id, {
+        "effects.shadow.dx": (0, helpers_1.constantTrack)(options.dx ?? 0, time),
+        "effects.shadow.dy": (0, helpers_1.constantTrack)(options.dy ?? 8, time),
+        "effects.shadow.blur": (0, helpers_1.constantTrack)(options.blur ?? 18, time),
+        "effects.shadow.color": (0, helpers_1.constantTrack)(options.color ?? "#000000", time),
+        "effects.shadow.opacity": (0, helpers_1.constantTrack)(options.opacity ?? 0.22, time)
+    });
+}
+function softBlur(options) {
+    return (0, helpers_1.timelineFragment)(options.id, { "effects.blur": (0, helpers_1.constantTrack)(options.amount ?? 6, options.start ?? 0) });
+}
+function glow(options) {
+    return dropShadow({ ...options, dx: options.dx ?? 0, dy: options.dy ?? 0, blur: options.blur ?? 24, color: options.color ?? "#38bdf8", opacity: options.opacity ?? 0.55 });
+}
+function dim(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.25;
+    return (0, helpers_1.timelineFragment)(options.id, { opacity: (0, helpers_1.track)([[start, 1], [start + duration, options.opacity ?? 0.35]], options.curve ?? helpers_1.curves.easeOut) });
+}
+function tintFill(options) {
+    return (0, helpers_1.timelineFragment)(options.id, { fill: (0, helpers_1.constantTrack)(options.color ?? "#dbeafe", options.start ?? 0) });
+}
+function gradientSweep(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 1;
+    const from = options.from ?? [0, 0];
+    const to = options.to ?? [180, 0];
+    const colors = options.colors ?? ["#38bdf8", "#8b5cf6"];
+    return (0, helpers_1.timelineFragment)(options.id, {
+        fill: (0, helpers_1.track)([
+            [start, { type: "linearGradient", from, to, stops: [[0, colors[0]], [1, colors[1]]] }],
+            [start + duration, { type: "linearGradient", from: [to[0], to[1]], to: [to[0] + (to[0] - from[0]), to[1] + (to[1] - from[1])], stops: [[0, colors[1]], [1, colors[0]]] }]
+        ], options.curve ?? helpers_1.curves.linear)
+    });
+}
+function roundedImageClip(options) {
+    const keyframes = options.radii?.length
+        ? options.radii.map(([time, radius]) => ({ time, value: (0, helpers_1.roundedRectPath)(options.x, options.y, options.width, options.height, radius) }))
+        : [{ time: options.start ?? 0, value: (0, helpers_1.roundedRectPath)(options.x, options.y, options.width, options.height, options.radius ?? 12) }];
+    return (0, helpers_1.timelineFragment)(options.id, { "clip.d": { keyframes } });
+}
+function maskReveal(options) {
+    const start = options.start ?? 0;
+    const duration = options.duration ?? 0.7;
+    const from = revealPath(options, 0);
+    const to = revealPath(options, 1);
+    return (0, helpers_1.timelineFragment)(options.id, {
+        "mask.d": {
+            keyframes: [
+                { time: start, value: from, out: options.curve ?? helpers_1.curves.easeOut },
+                { time: start + duration, value: to }
+            ]
+        },
+        "mask.opacity": (0, helpers_1.track)([[start, 1], [start + duration, 1]], helpers_1.curves.linear)
+    });
+}
+function revealPath(options, progress) {
+    const direction = options.direction ?? "right";
+    if (direction === "right")
+        return (0, helpers_1.roundedRectPath)(options.x, options.y, options.width * progress, options.height, 0);
+    if (direction === "left")
+        return (0, helpers_1.roundedRectPath)(options.x + options.width * (1 - progress), options.y, options.width * progress, options.height, 0);
+    if (direction === "down")
+        return (0, helpers_1.roundedRectPath)(options.x, options.y, options.width, options.height * progress, 0);
+    return (0, helpers_1.roundedRectPath)(options.x, options.y + options.height * (1 - progress), options.width, options.height * progress, 0);
+}

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

@@ -0,0 +1,33 @@
+import type { MotionValue, Paint, Point2, TimelineCurve, TimelineKeyframe, TimelineTrack, VisualElement } from "../types";
+import type { PresetFragment, StylePresetOptions } from "./types";
+export declare const curves: {
+    linear: TimelineCurve;
+    easeIn: TimelineCurve;
+    easeOut: TimelineCurve;
+    easeInOut: TimelineCurve;
+    hold: TimelineCurve;
+};
+export declare function fragment(elements?: VisualElement[]): PresetFragment;
+export declare function timelineFragment(targetId: string, tracks: Record<string, TimelineTrack>): PresetFragment;
+export declare function mergeFragments(...fragments: PresetFragment[]): PresetFragment;
+export declare function track(values: Array<[number, MotionValue]>, curve?: TimelineCurve): TimelineTrack;
+export declare function constantTrack(value: MotionValue, time?: number): TimelineTrack;
+export declare function pathStyle(options?: StylePresetOptions): {
+    fill?: Paint;
+    stroke?: Paint;
+    strokeWidth?: number;
+    opacity?: number;
+};
+export declare function rectPath(x: number, y: number, width: number, height: number): string;
+export declare function roundedRectPath(x: number, y: number, width: number, height: number, radius?: number): string;
+export declare function ellipsePath(cx: number, cy: number, rx: number, ry: number): string;
+export declare function polygonPath(points: Point2[], close?: boolean): string;
+export declare function regularPoints(cx: number, cy: number, radius: number, sides: number, rotation?: number): Point2[];
+export declare function starPoints(cx: number, cy: number, outerRadius: number, innerRadius: number, points: number, rotation?: number): Point2[];
+export declare function linePath(from: Point2, to: Point2): string;
+export declare function withPaint(fill: Paint | undefined, fallback: Paint): Paint;
+export declare function keyframeTime(frame: TimelineKeyframe): number;
+export declare function mergeTrack(left: TimelineTrack | undefined, right: TimelineTrack): TimelineTrack;
+export declare function cloneTrack(trackValue: TimelineTrack): TimelineTrack;
+export declare function cloneElement<T extends VisualElement>(element: T): T;
+export declare function cloneValue<T>(value: T): T;

package/dist/src/presets/helpers.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.curves = void 0;
+exports.fragment = fragment;
+exports.timelineFragment = timelineFragment;
+exports.mergeFragments = mergeFragments;
+exports.track = track;
+exports.constantTrack = constantTrack;
+exports.pathStyle = pathStyle;
+exports.rectPath = rectPath;
+exports.roundedRectPath = roundedRectPath;
+exports.ellipsePath = ellipsePath;
+exports.polygonPath = polygonPath;
+exports.regularPoints = regularPoints;
+exports.starPoints = starPoints;
+exports.linePath = linePath;
+exports.withPaint = withPaint;
+exports.keyframeTime = keyframeTime;
+exports.mergeTrack = mergeTrack;
+exports.cloneTrack = cloneTrack;
+exports.cloneElement = cloneElement;
+exports.cloneValue = cloneValue;
+exports.curves = {
+    linear: { type: "graph", points: [[0, 0], [1, 1]] },
+    easeIn: { type: "cubicBezier", x1: 0.42, y1: 0, x2: 1, y2: 1 },
+    easeOut: { type: "cubicBezier", x1: 0, y1: 0, x2: 0.58, y2: 1 },
+    easeInOut: { type: "cubicBezier", x1: 0.42, y1: 0, x2: 0.58, y2: 1 },
+    hold: { type: "hold" }
+};
+function fragment(elements = []) {
+    return { elements };
+}
+function timelineFragment(targetId, tracks) {
+    return { timelines: { [targetId]: tracks } };
+}
+function mergeFragments(...fragments) {
+    const elements = fragments.flatMap((item) => item.elements ?? []);
+    const timelines = {};
+    for (const item of fragments) {
+        for (const [id, tracks] of Object.entries(item.timelines ?? {})) {
+            timelines[id] ?? (timelines[id] = {});
+            for (const [property, track] of Object.entries(tracks)) {
+                timelines[id][property] = mergeTrack(timelines[id][property], track);
+            }
+        }
+    }
+    return {
+        ...(elements.length ? { elements } : {}),
+        ...(Object.keys(timelines).length ? { timelines } : {})
+    };
+}
+function track(values, curve = exports.curves.linear) {
+    return {
+        keyframes: values.map(([time, value], index) => ({
+            time,
+            value,
+            ...(index < values.length - 1 ? { out: curve } : {})
+        }))
+    };
+}
+function constantTrack(value, time = 0) {
+    return { keyframes: [{ time, value }] };
+}
+function pathStyle(options = {}) {
+    return {
+        ...(options.fill !== undefined ? { fill: options.fill } : {}),
+        ...(options.stroke !== undefined ? { stroke: options.stroke } : {}),
+        ...(options.strokeWidth !== undefined ? { strokeWidth: options.strokeWidth } : {}),
+        ...(options.opacity !== undefined ? { opacity: options.opacity } : {})
+    };
+}
+function rectPath(x, y, width, height) {
+    return `M ${x} ${y} H ${x + width} V ${y + height} H ${x} Z`;
+}
+function roundedRectPath(x, y, width, height, radius = 0) {
+    const r = Math.min(Math.max(0, radius), Math.max(0, width) / 2, Math.max(0, height) / 2);
+    if (r <= 0)
+        return rectPath(x, y, width, height);
+    return [
+        `M ${x + r} ${y}`,
+        `H ${x + width - r}`,
+        `Q ${x + width} ${y} ${x + width} ${y + r}`,
+        `V ${y + height - r}`,
+        `Q ${x + width} ${y + height} ${x + width - r} ${y + height}`,
+        `H ${x + r}`,
+        `Q ${x} ${y + height} ${x} ${y + height - r}`,
+        `V ${y + r}`,
+        `Q ${x} ${y} ${x + r} ${y}`,
+        "Z"
+    ].join(" ");
+}
+function ellipsePath(cx, cy, rx, ry) {
+    return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy} Z`;
+}
+function polygonPath(points, close = true) {
+    if (!points.length)
+        return "";
+    const commands = [`M ${points[0][0]} ${points[0][1]}`];
+    for (const point of points.slice(1))
+        commands.push(`L ${point[0]} ${point[1]}`);
+    if (close)
+        commands.push("Z");
+    return commands.join(" ");
+}
+function regularPoints(cx, cy, radius, sides, rotation = -90) {
+    const count = Math.max(3, Math.floor(sides));
+    const start = (rotation * Math.PI) / 180;
+    return Array.from({ length: count }, (_, index) => {
+        const angle = start + (index / count) * Math.PI * 2;
+        return [cx + Math.cos(angle) * radius, cy + Math.sin(angle) * radius];
+    });
+}
+function starPoints(cx, cy, outerRadius, innerRadius, points, rotation = -90) {
+    const count = Math.max(2, Math.floor(points)) * 2;
+    const start = (rotation * Math.PI) / 180;
+    return Array.from({ length: count }, (_, index) => {
+        const radius = index % 2 === 0 ? outerRadius : innerRadius;
+        const angle = start + (index / count) * Math.PI * 2;
+        return [cx + Math.cos(angle) * radius, cy + Math.sin(angle) * radius];
+    });
+}
+function linePath(from, to) {
+    return `M ${from[0]} ${from[1]} L ${to[0]} ${to[1]}`;
+}
+function withPaint(fill, fallback) {
+    return fill === undefined ? fallback : fill;
+}
+function keyframeTime(frame) {
+    return Array.isArray(frame) ? frame[0] : frame.time;
+}
+function mergeTrack(left, right) {
+    if (!left)
+        return cloneTrack(right);
+    const frames = left.keyframes.map(cloneKeyframe);
+    for (const frame of right.keyframes) {
+        const next = cloneKeyframe(frame);
+        const existing = frames.findIndex((item) => keyframeTime(item) === keyframeTime(next));
+        if (existing >= 0)
+            frames[existing] = next;
+        else
+            frames.push(next);
+    }
+    frames.sort((a, b) => keyframeTime(a) - keyframeTime(b));
+    return {
+        keyframes: frames,
+        ...(right.curve ?? left.curve ? { curve: right.curve ?? left.curve } : {}),
+        ...(right.ease ?? left.ease ? { ease: right.ease ?? left.ease } : {})
+    };
+}
+function cloneTrack(trackValue) {
+    return {
+        keyframes: trackValue.keyframes.map(cloneKeyframe),
+        ...(trackValue.curve ? { curve: cloneValue(trackValue.curve) } : {}),
+        ...(trackValue.ease ? { ease: trackValue.ease } : {})
+    };
+}
+function cloneElement(element) {
+    return cloneValue(element);
+}
+function cloneValue(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+function cloneKeyframe(frame) {
+    return cloneValue(frame);
+}

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

@@ -0,0 +1,9 @@
+export type { ApplyPresetOptions, BasePresetOptions, Box, MotionPresetOptions, PointLike, PresetFragment, PresetTimelineMap, StylePresetOptions, TransitionPair } from "./types";
+export { applyPresetFragments, mergePresetFragments, prefixPresetFragment } from "./compose";
+export { curves } from "./helpers";
+export * as shapes from "./shapes";
+export * as characters from "./characters";
+export * as motions from "./motions";
+export * as effects from "./effects";
+export * as transitions from "./transitions";
+export * as scenes from "./scenes";

package/dist/src/presets/index.js

@@ -0,0 +1,48 @@
+"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.scenes = exports.transitions = exports.effects = exports.motions = exports.characters = exports.shapes = exports.curves = exports.prefixPresetFragment = exports.mergePresetFragments = exports.applyPresetFragments = void 0;
+var compose_1 = require("./compose");
+Object.defineProperty(exports, "applyPresetFragments", { enumerable: true, get: function () { return compose_1.applyPresetFragments; } });
+Object.defineProperty(exports, "mergePresetFragments", { enumerable: true, get: function () { return compose_1.mergePresetFragments; } });
+Object.defineProperty(exports, "prefixPresetFragment", { enumerable: true, get: function () { return compose_1.prefixPresetFragment; } });
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "curves", { enumerable: true, get: function () { return helpers_1.curves; } });
+exports.shapes = __importStar(require("./shapes"));
+exports.characters = __importStar(require("./characters"));
+exports.motions = __importStar(require("./motions"));
+exports.effects = __importStar(require("./effects"));
+exports.transitions = __importStar(require("./transitions"));
+exports.scenes = __importStar(require("./scenes"));

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

@@ -0,0 +1,33 @@
+import type { Point2 } from "../types";
+import type { MotionPresetOptions, PresetFragment } from "./types";
+export interface TargetMotionOptions extends MotionPresetOptions {
+    id: string;
+}
+export interface MoveMotionOptions extends TargetMotionOptions {
+    from?: Point2;
+    to?: Point2;
+    distance?: number;
+}
+export interface PulseOptions extends TargetMotionOptions {
+    amount?: number;
+}
+export interface DrawOnOptions extends TargetMotionOptions {
+    from?: number;
+    to?: number;
+}
+export interface StaggerOptions extends MotionPresetOptions {
+    ids: string[];
+    each?: number;
+}
+export declare function fadeIn(options: TargetMotionOptions): PresetFragment;
+export declare function fadeOut(options: TargetMotionOptions): PresetFragment;
+export declare function slideIn(options: MoveMotionOptions): PresetFragment;
+export declare function riseIn(options: MoveMotionOptions): PresetFragment;
+export declare function scaleIn(options: TargetMotionOptions): PresetFragment;
+export declare function pulse(options: PulseOptions): PresetFragment;
+export declare function bob(options: MoveMotionOptions): PresetFragment;
+export declare function shake(options: TargetMotionOptions & {
+    amount?: number;
+}): PresetFragment;
+export declare function drawOn(options: DrawOnOptions): PresetFragment;
+export declare function stagger(options: StaggerOptions): PresetFragment;