@pixerate/editor 0.25.0 → 0.26.1

package/dist/commands/index.d.ts

@@ -1,10 +1,10 @@
-import { C as CommandRegistry, P as Platform, a as CommandResult, b as CommandEntry, K as KeyboardEventLike, S as ShortcutBinding, c as CommandSpec } from '../registry-evKTP4ls.js';
-export { d as Chord, e as CommandErrorCode, f as CommandHistoryTarget, g as CommandListOptions, h as CommandParamsSchema, i as CommandRegistryError, j as CommandRegistryOptions, E as EffectiveChord, k as PLATFORMS, l as ShortcutConflict, m as ShortcutInput, n as ShortcutMap, o as ShortcutMapOptions, p as ShortcutMatch, q as ShortcutResolveOptions, r as chordToString, s as codeFromKey, t as codeToKeyText, u as createCommandRegistry, v as defineCommand, w as detectPlatform, x as effectiveChord, y as effectiveChordKey, z as eventCode, A as formatShortcut, B as isEditableEventTarget, D as keyToCode, F as normalizeChord, G as parseChord, H as shortcutCode, I as toShortcutBindings } from '../registry-evKTP4ls.js';
+import { a as CommandRegistry, P as Platform, b as CommandResult, c as CommandEntry, K as KeyboardEventLike, C as CommandSpec } from '../registry-DhVUZioj.js';
+export { d as Chord, e as CommandErrorCode, f as CommandHistoryTarget, g as CommandListOptions, h as CommandParamsSchema, i as CommandRegistryError, j as CommandRegistryOptions, E as EffectiveChord, k as PLATFORMS, S as ShortcutBinding, l as ShortcutConflict, m as ShortcutInput, n as ShortcutMap, o as ShortcutMapOptions, p as ShortcutMatch, q as ShortcutResolveOptions, r as chordToString, s as codeFromKey, t as codeToKeyText, u as createCommandRegistry, v as defineCommand, w as detectPlatform, x as effectiveChord, y as effectiveChordKey, z as eventCode, A as formatShortcut, B as isEditableEventTarget, D as keyToCode, F as normalizeChord, G as parseChord, H as shortcutCode, I as toShortcutBindings } from '../registry-DhVUZioj.js';
 import { A as AgentToolProvider } from '../registry-BDe-vlv3.js';
-import { H as HistoryState } from '../types-GT5a5YAX.js';
-import { C as CanvasArrangeAction, A as AlignEdge, D as DistributeAxis, a as DistributeMode, Z as ZOrderOperation } from '../arrangeShortcuts-sLlD2rSX.js';
+export { A as ArrangeCommandOptions, a as ArrangeCommandTarget, C as ComponentCommandOptions, b as ComponentCommandTarget, D as DEFAULT_HISTORY_SHORTCUTS, H as HistoryCommandOptions, c as HistoryCommandTarget, S as ShapeCommandOptions, d as ShapeCommandTarget, e as SpreadsheetCommandOptions, f as SpreadsheetCommandTarget, g as createArrangeCommands, h as createComponentCommands, i as createHistoryCommands, j as createShapeCommands, k as createSpreadsheetCommands, m as matchHistoryShortcut } from '../builtins-Chj6zv_O.js';
 import '../schema-DYDGdYL9.js';
-import '../types-DX4Mh4SL.js';
+import '../types-GT5a5YAX.js';
+import '../arrange-BICutYPk.js';
 
 /** The fields `rankCommands` searches (a `CommandEntry` satisfies it). */
 interface RankableCommand {
@@ -160,118 +160,47 @@ interface CommandToolProviderOptions<TContext = any> {
  */
 declare function createCommandToolProvider<TContext = any>(registry: CommandRegistry<TContext>, options?: CommandToolProviderOptions<TContext>): AgentToolProvider;
 
-/** Minimal history surface (`HistoryManager` satisfies it). */
-interface HistoryCommandTarget {
-    undo(): boolean | void;
-    redo(): boolean | void;
-    getState(): Pick<HistoryState, 'canUndo' | 'canRedo'> & Partial<Pick<HistoryState, 'undoName' | 'redoName'>>;
-}
-/** Default history bindings: `Mod+Z` undo; `Mod+Shift+Z` redo, plus `Mod+Y` off macOS. */
-declare const DEFAULT_HISTORY_SHORTCUTS: readonly ShortcutBinding[];
-interface HistoryCommandOptions {
-    /** Id prefix (default `history.`). */
-    prefix?: string;
-    group?: string;
-    scope?: string;
-}
-/** `history.undo` / `history.redo` commands for a `HistoryManager` (disabled with a reason when empty). */
-declare function createHistoryCommands(history: HistoryCommandTarget, options?: HistoryCommandOptions): CommandSpec[];
 /**
- * Resolves a keydown event to `undo` / `redo` with the default history bindings
- * (`Mod` is ⌘ on macOS and Ctrl elsewhere). Events from text inputs and
- * contenteditable elements are ignored unless `allowInEditable`.
+ * Animation controller surface used by `createCanvasAnimationCommands`
+ * (`createCanvasAnimationController`, `useCanvasAnimation` and `createCanvasAnimation` satisfy it).
  */
-declare function matchHistoryShortcut(event: KeyboardEventLike, options?: {
-    platform?: Platform;
-    allowInEditable?: boolean;
-}): 'undo' | 'redo' | null;
-/** Minimal arrange controller surface (`createCanvasArrangeController` satisfies it). */
-interface ArrangeCommandTarget {
-    align(edge: AlignEdge, ids?: Iterable<string>): unknown;
-    distribute(axis: DistributeAxis, mode?: DistributeMode, ids?: Iterable<string>): unknown;
-    reorder(operation: ZOrderOperation, ids?: Iterable<string>): unknown;
-    lock(ids?: Iterable<string>): unknown;
-    unlock(ids?: Iterable<string>): unknown;
-}
-interface ArrangeCommandOptions {
-    /** Id prefix (default `canvas.`). */
-    prefix?: string;
-    group?: string;
-    /** Scope of the commands and their shortcuts (default `canvas`). Pass `null` for global. */
-    scope?: string | null;
-    /** Current selection, used for enablement ("Select at least two nodes"). */
-    getSelectedIds?: () => string[];
-    /** Scene navigation (`nextScene` / `previousScene`); those commands are only added when given. */
-    scenes?: {
-        next(): unknown;
-        previous(): unknown;
+interface AnimationCommandTarget {
+    getState(): {
+        playing: boolean;
+        recording: boolean;
+        time: number;
+        duration: number;
+        selection: readonly unknown[];
+    };
+    play(): void;
+    pause(): void;
+    toggle(): void;
+    stop(): void;
+    seek(time: number): void;
+    toggleRecording(): void;
+    addKeyframe(ids?: Iterable<string>, keys?: readonly string[], time?: number): unknown;
+    deleteKeyframes(): unknown;
+    setEasing(easing: any, refs?: readonly any[]): unknown;
+    nextKeyframe(): unknown;
+    previousKeyframe(): unknown;
+    animateNode(nodeId: string, options: any): unknown;
+    exportCss(nodeId: string, options?: any): {
+        css: string;
+        exact: boolean;
     };
-    /** Use these bindings instead of `DEFAULT_ARRANGE_SHORTCUTS`. */
-    bindings?: readonly {
-        action: CanvasArrangeAction;
-        label: string;
-    }[];
-}
-/**
- * Commands for the canvas arrange actions (`canvas.alignLeft`, `canvas.bringToFront`, …)
- * with the default arrange shortcuts. Each accepts `{ ids? }`; enablement checks the
- * named ids, or the selection when none are named.
- */
-declare function createArrangeCommands(controller: ArrangeCommandTarget, options?: ArrangeCommandOptions): CommandSpec[];
-/** Shape operations surface of the arrange controller (`createCanvasArrangeController` satisfies it). */
-interface ShapeCommandTarget {
-    combineShapes(operation: 'unite' | 'intersect' | 'subtract' | 'exclude' | 'divide', ids?: Iterable<string>): unknown;
-    canCombineShapes(ids?: Iterable<string>): boolean;
-    offsetShapes(distance: number, ids?: Iterable<string>, options?: {
-        join?: 'miter' | 'round' | 'bevel';
-        miterLimit?: number;
-    }): unknown;
-    canOffsetShapes(ids?: Iterable<string>): boolean;
-    outlineStroke(ids?: Iterable<string>, options?: {
-        join?: 'miter' | 'round' | 'bevel';
-        cap?: 'butt' | 'round' | 'square';
-        miterLimit?: number;
-    }): unknown;
-    canOutlineStroke(ids?: Iterable<string>): boolean;
 }
-interface ShapeCommandOptions {
-    /** Id prefix (default `canvas.`). */
+interface AnimationCommandOptions {
+    /** Id prefix (default `canvas.animation.`). */
     prefix?: string;
     group?: string;
     /** Scope (default `canvas`). Pass `null` for global. */
     scope?: string | null;
-    /** Offset distance used when `canvas.offsetPath` is run without one (default 10). */
-    defaultOffset?: number;
 }
 /**
- * Palette / context-menu / agent commands for the shape operations: `canvas.unite`,
- * `canvas.intersect`, `canvas.subtract`, `canvas.exclude`, `canvas.divide`,
- * `canvas.offsetPath` (`{ distance, join?, miterLimit?, ids? }`) and `canvas.outlineStroke`
- * (`{ join?, cap?, miterLimit?, ids? }`). Each is one undoable step when the controller has a
- * history; enablement explains why a command cannot run.
+ * Palette / shortcut / agent commands for canvas animation: play / pause, seek, add keyframe at
+ * the playhead, delete keyframes, set easing, record toggle, keyframe navigation, "animate
+ * node from A to B over T" and CSS export. Edits are undoable when the controller has a history.
  */
-declare function createShapeCommands(controller: ShapeCommandTarget, options?: ShapeCommandOptions): CommandSpec[];
-/** Spreadsheet controller surface used by `createSpreadsheetCommands`. */
-interface SpreadsheetCommandTarget {
-    selectedRange: unknown;
-    getFilterState(): {
-        enabled: boolean;
-        rules: readonly unknown[];
-    };
-    toggleFilters(): void;
-    clearFilters(): void;
-    unhideAll(): void;
-    mergeCells(): boolean;
-    unmergeCells(): boolean;
-    transposeRange(): boolean;
-}
-interface SpreadsheetCommandOptions {
-    /** Id prefix (default `spreadsheet.`). */
-    prefix?: string;
-    /** Scope (default `spreadsheet`). Pass `null` for global. */
-    scope?: string | null;
-}
-/** Palette / agent commands for common spreadsheet table actions (no default shortcuts). */
-declare function createSpreadsheetCommands(controller: SpreadsheetCommandTarget, options?: SpreadsheetCommandOptions): CommandSpec[];
+declare function createCanvasAnimationCommands(controller: AnimationCommandTarget, options?: AnimationCommandOptions): CommandSpec[];
 
-export { type ArrangeCommandOptions, type ArrangeCommandTarget, CommandEntry, type CommandPaletteController, type CommandPaletteItem, type CommandPaletteOptions, type CommandPaletteState, CommandRegistry, CommandResult, CommandSpec, type CommandToolProviderOptions, DEFAULT_HISTORY_SHORTCUTS, DEFAULT_RECENT_LIMIT, type FuzzyMatch, type HistoryCommandOptions, type HistoryCommandTarget, KeyboardEventLike, Platform, type RankCommandsOptions, type RankableCommand, type RankedCommand, type ShapeCommandOptions, type ShapeCommandTarget, ShortcutBinding, type SpreadsheetCommandOptions, type SpreadsheetCommandTarget, createArrangeCommands, createCommandPaletteController, createCommandToolProvider, createHistoryCommands, createShapeCommands, createSpreadsheetCommands, exactBonus, fuzzyMatch, fuzzyScore, matchHistoryShortcut, matchPaletteHotkey, pushRecent, rankCommands };
+export { type AnimationCommandOptions, type AnimationCommandTarget, CommandEntry, type CommandPaletteController, type CommandPaletteItem, type CommandPaletteOptions, type CommandPaletteState, CommandRegistry, CommandResult, CommandSpec, type CommandToolProviderOptions, DEFAULT_RECENT_LIMIT, type FuzzyMatch, KeyboardEventLike, Platform, type RankCommandsOptions, type RankableCommand, type RankedCommand, createCanvasAnimationCommands, createCommandPaletteController, createCommandToolProvider, exactBonus, fuzzyMatch, fuzzyScore, matchPaletteHotkey, pushRecent, rankCommands };

package/dist/commands/index.js

@@ -239,10 +239,10 @@ var CommandRegistry = class {
   }
   /** Like `execute`, but awaits async commands (rejections become `failed` results). */
   async executeAsync(id, params, context = this.context) {
-    const outcome = this.execute(id, params, context);
-    if (!outcome.ok || !isThenable(outcome.result)) return outcome;
+    const outcome2 = this.execute(id, params, context);
+    if (!outcome2.ok || !isThenable(outcome2.result)) return outcome2;
     try {
-      const result = await outcome.result;
+      const result = await outcome2.result;
       this.notify();
       return { ok: true, id, result };
     } catch (error) {
@@ -872,6 +872,182 @@ function createShapeCommands(controller, options = {}) {
     }
   ];
 }
+var outcome = (result) => {
+  if (!result.ok) throw new Error(result.reason);
+  return { ids: result.ids };
+};
+var ID_PARAM = { type: "string", description: "Instance (or layer inside one) to act on (default: the first selected node)." };
+function createComponentCommands(controller, options = {}) {
+  const prefix = options.prefix ?? "canvas.";
+  const group = options.group ?? "Components";
+  const scope = options.scope === null ? void 0 : options.scope ?? "canvas";
+  const base = { group, ...scope ? { scope } : {} };
+  const idParams = { type: "object", properties: { id: ID_PARAM } };
+  return [
+    {
+      ...base,
+      id: `${prefix}createComponent`,
+      label: "Create Component",
+      keywords: ["component", "symbol", "main component", "reusable"],
+      description: "Turns the selected frame into a main component, or wraps the selection in one.",
+      params: IDS_PARAMS,
+      shortcut: "Mod+Alt+K",
+      enabled: (_ctx, params) => controller.canCreateComponent(params?.ids),
+      run: (_ctx, params) => outcome(controller.createComponent(params?.ids))
+    },
+    {
+      ...base,
+      id: `${prefix}combineAsVariants`,
+      label: "Combine as Variants",
+      keywords: ["component set", "variant", "variants"],
+      description: "Wraps the selected components in a component set.",
+      params: IDS_PARAMS,
+      enabled: (_ctx, params) => controller.canCombineAsVariants(params?.ids),
+      run: (_ctx, params) => outcome(controller.combineAsVariants(params?.ids))
+    },
+    {
+      ...base,
+      id: `${prefix}createInstance`,
+      label: "Create Instance",
+      keywords: ["instance", "insert component", "use component"],
+      description: "Places an instance of a component (or a component set\u2019s default variant).",
+      params: {
+        type: "object",
+        properties: {
+          componentId: { type: "string", description: "Component or component set id." },
+          parentId: { type: "string", description: "Frame to place it in (default: the canvas)." },
+          x: { type: "number", description: "X in the parent\u2019s space (default: next to the main)." },
+          y: { type: "number", description: "Y in the parent\u2019s space." },
+          properties: { type: "object", description: "Variant and component property values.", additionalProperties: true }
+        },
+        required: ["componentId"]
+      },
+      enabled: (_ctx, params) => params?.componentId === void 0 ? true : controller.canCreateInstance(params.componentId, params.parentId),
+      run: (_ctx, params) => outcome(
+        controller.createInstance(params.componentId, {
+          ...params.parentId !== void 0 ? { parentId: params.parentId } : {},
+          ...params.x !== void 0 || params.y !== void 0 ? { position: { x: params.x ?? 0, y: params.y ?? 0 } } : {},
+          ...params.properties ? { properties: params.properties } : {}
+        })
+      )
+    },
+    {
+      ...base,
+      id: `${prefix}detachInstance`,
+      label: "Detach Instance",
+      keywords: ["unlink", "break instance"],
+      description: "Turns the selected instances into plain frames that keep their look.",
+      params: IDS_PARAMS,
+      shortcut: "Mod+Alt+B",
+      enabled: (_ctx, params) => controller.canDetachInstance(params?.ids),
+      run: (_ctx, params) => outcome(controller.detachInstance(params?.ids))
+    },
+    {
+      ...base,
+      id: `${prefix}resetOverrides`,
+      label: "Reset All Changes",
+      keywords: ["reset instance", "reset overrides", "revert"],
+      description: "Resets the overrides of an instance (or of a layer, or one override group) to its main.",
+      params: {
+        type: "object",
+        properties: {
+          id: ID_PARAM,
+          group: { type: "string", description: 'One override group to reset, e.g. "data.label" or "shape.fill" (default: all).' }
+        }
+      },
+      enabled: (_ctx, params) => controller.canResetOverrides(params?.id),
+      run: (_ctx, params) => outcome(controller.resetOverrides(params?.id, params?.group))
+    },
+    {
+      ...base,
+      id: `${prefix}pushOverrides`,
+      label: "Push Changes to Main Component",
+      keywords: ["push overrides", "update main component"],
+      description: "Copies the instance\u2019s overrides to its main component and every other instance.",
+      params: idParams,
+      enabled: (_ctx, params) => controller.canPushOverrides(params?.id),
+      run: (_ctx, params) => outcome(controller.pushOverrides(params?.id))
+    },
+    {
+      ...base,
+      id: `${prefix}goToMainComponent`,
+      label: "Go to Main Component",
+      keywords: ["main component", "find main", "reveal"],
+      description: "Selects the main component of the selected instance.",
+      params: idParams,
+      enabled: (_ctx, params) => controller.canGoToMainComponent(params?.id),
+      run: (_ctx, params) => {
+        const main = controller.goToMainComponent(params?.id);
+        if (!main) throw new Error("The main component was not found.");
+        return { id: main };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}swapInstance`,
+      label: "Swap Instance\u2026",
+      keywords: ["replace instance", "swap component"],
+      description: "Makes the selected instances show another component, keeping matching overrides.",
+      params: {
+        type: "object",
+        properties: {
+          componentId: { type: "string", description: "Component or component set to swap to." },
+          ids: IDS_PARAMS.properties.ids
+        },
+        required: ["componentId"]
+      },
+      enabled: (_ctx, params) => controller.canSwapInstance(params?.componentId, params?.ids),
+      run: (_ctx, params) => outcome(controller.swapInstance(params.componentId, params?.ids))
+    },
+    {
+      ...base,
+      id: `${prefix}setInstanceProperties`,
+      label: "Set Instance Properties\u2026",
+      keywords: ["variant", "switch variant", "component property", "toggle"],
+      description: "Sets variant properties (switching variants) and component property values of the selected instances.",
+      params: {
+        type: "object",
+        properties: {
+          properties: { type: "object", description: "Property name \u2192 value (variant value, boolean, text or component id).", additionalProperties: true },
+          ids: IDS_PARAMS.properties.ids
+        },
+        required: ["properties"]
+      },
+      enabled: (_ctx, params) => controller.canSetInstanceProperties(params?.ids),
+      run: (_ctx, params) => outcome(controller.setInstanceProperties(params.properties, params?.ids))
+    },
+    {
+      ...base,
+      id: `${prefix}restoreMainComponent`,
+      label: "Restore Main Component",
+      keywords: ["missing main", "recover component"],
+      description: "Turns an instance whose main was deleted back into the main component.",
+      params: idParams,
+      enabled: (_ctx, params) => controller.canRestoreMainComponent(params?.id),
+      run: (_ctx, params) => outcome(controller.restoreMainComponent(params?.id))
+    },
+    {
+      ...base,
+      id: `${prefix}listComponents`,
+      label: "List Components",
+      keywords: ["components", "variants", "assets"],
+      description: "Lists the components and component sets (with their variant options).",
+      readOnly: true,
+      run: () => controller.list()
+    },
+    {
+      ...base,
+      id: `${prefix}inspectInstance`,
+      label: "Inspect Instance",
+      keywords: ["instance", "overrides", "properties"],
+      description: "Describes an instance: its main, variant, property values and overrides.",
+      params: idParams,
+      readOnly: true,
+      enabled: (_ctx, params) => controller.inspect(params?.id) ? true : "Select an instance.",
+      run: (_ctx, params) => controller.inspect(params?.id) ?? null
+    }
+  ];
+}
 function createSpreadsheetCommands(controller, options = {}) {
   const prefix = options.prefix ?? "spreadsheet.";
   const scope = options.scope === null ? void 0 : options.scope ?? "spreadsheet";
@@ -893,6 +1069,176 @@ function createSpreadsheetCommands(controller, options = {}) {
     { ...base, id: `${prefix}transposeRange`, label: "Transpose Range", keywords: ["rotate", "swap rows columns"], enabled: hasRange, run: () => controller.transposeRange() }
   ];
 }
+
+// src/commands/animation.ts
+var EASING_DESCRIPTION = "Easing preset (linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, spring, hold) or a CSS cubic-bezier(x1, y1, x2, y2).";
+var VALUES = {
+  type: "object",
+  description: 'Property \u2192 value, e.g. {"x": 200, "opacity": 0.5, "fill": "#ff0000"}. Properties: x, y, width, height, rotation (degrees), scale, opacity (0\u20131), fill, stroke, strokeWidth, cornerRadius, motionPath (0\u20131).',
+  additionalProperties: { type: ["number", "string"] }
+};
+function createCanvasAnimationCommands(controller, options = {}) {
+  const prefix = options.prefix ?? "canvas.animation.";
+  const group = options.group ?? "Animation";
+  const scope = options.scope === null ? void 0 : options.scope ?? "canvas";
+  const base = { group, ...scope ? { scope } : {} };
+  const hasSelection = () => controller.getState().selection.length > 0 ? true : "Select keyframes first.";
+  return [
+    {
+      ...base,
+      id: `${prefix}togglePlay`,
+      label: "Play / Pause Animation",
+      keywords: ["play", "pause", "preview", "timeline"],
+      description: "Plays or pauses the canvas animation from the playhead.",
+      run: () => {
+        controller.toggle();
+        return { playing: controller.getState().playing, time: controller.getState().time };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}play`,
+      label: "Play Animation",
+      keywords: ["preview", "timeline"],
+      enabled: () => controller.getState().playing ? "Already playing." : true,
+      run: () => controller.play()
+    },
+    {
+      ...base,
+      id: `${prefix}pause`,
+      label: "Pause Animation",
+      enabled: () => controller.getState().playing ? true : "Not playing.",
+      run: () => controller.pause()
+    },
+    {
+      ...base,
+      id: `${prefix}stop`,
+      label: "Stop Animation",
+      keywords: ["rewind", "reset"],
+      description: "Stops playback and returns to the start.",
+      run: () => controller.stop()
+    },
+    {
+      ...base,
+      id: `${prefix}seek`,
+      label: "Go to Time\u2026",
+      keywords: ["playhead", "scrub", "time"],
+      description: "Moves the playhead.",
+      params: {
+        type: "object",
+        properties: { time: { type: "number", minimum: 0, description: "Time in milliseconds." } },
+        required: ["time"]
+      },
+      run: (_ctx, params) => {
+        controller.seek(params.time);
+        return { time: controller.getState().time };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}addKeyframe`,
+      label: "Add Keyframe at Playhead",
+      keywords: ["key", "animate", "record"],
+      description: "Keys the selected nodes (or `ids`) at the playhead (or `time`): their animated properties, `properties`, or position.",
+      params: {
+        type: "object",
+        properties: {
+          ids: { type: "array", items: { type: "string" }, description: "Node ids (default: selected nodes)." },
+          properties: { type: "array", items: { type: "string" }, description: "Properties to key (default: animated ones, or x and y)." },
+          time: { type: "number", minimum: 0, description: "Time in ms (default: the playhead)." }
+        }
+      },
+      run: (_ctx, params) => controller.addKeyframe(params?.ids, params?.properties, params?.time)
+    },
+    {
+      ...base,
+      id: `${prefix}deleteKeyframes`,
+      label: "Delete Keyframes",
+      keywords: ["remove", "clear"],
+      enabled: hasSelection,
+      run: () => controller.deleteKeyframes()
+    },
+    {
+      ...base,
+      id: `${prefix}setEasing`,
+      label: "Set Keyframe Easing\u2026",
+      keywords: ["interpolation", "ease", "bezier", "spring", "hold", "curve"],
+      description: "Sets the easing of the segments leaving the selected keyframes.",
+      params: {
+        type: "object",
+        properties: { easing: { type: "string", description: EASING_DESCRIPTION } },
+        required: ["easing"]
+      },
+      enabled: hasSelection,
+      run: (_ctx, params) => controller.setEasing(params.easing)
+    },
+    {
+      ...base,
+      id: `${prefix}toggleRecord`,
+      label: "Toggle Record Mode",
+      keywords: ["auto key", "record", "keyframe"],
+      description: "In record mode, changing a property at the playhead keys it.",
+      run: () => {
+        controller.toggleRecording();
+        return { recording: controller.getState().recording };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}nextKeyframe`,
+      label: "Next Keyframe",
+      keywords: ["jump", "navigate"],
+      run: () => controller.nextKeyframe()
+    },
+    {
+      ...base,
+      id: `${prefix}previousKeyframe`,
+      label: "Previous Keyframe",
+      keywords: ["jump", "navigate"],
+      run: () => controller.previousKeyframe()
+    },
+    {
+      ...base,
+      id: `${prefix}animateNode`,
+      label: "Animate Node\u2026",
+      keywords: ["tween", "transition", "move", "fade"],
+      description: "Animates a node from `from` (default: its current values) to `to` over `duration` ms, starting at `delay` ms.",
+      params: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string", description: "Node to animate." },
+          to: VALUES,
+          from: VALUES,
+          duration: { type: "number", exclusiveMinimum: 0, description: "Duration in ms (default 1000)." },
+          delay: { type: "number", minimum: 0, description: "Start time in ms (default 0)." },
+          easing: { type: "string", description: EASING_DESCRIPTION }
+        },
+        required: ["nodeId", "to"]
+      },
+      run: (_ctx, params) => controller.animateNode(params.nodeId, {
+        to: params.to,
+        ...params.from ? { from: params.from } : {},
+        ...params.duration !== void 0 ? { duration: params.duration } : {},
+        ...params.delay !== void 0 ? { delay: params.delay } : {},
+        ...params.easing !== void 0 ? { easing: params.easing } : {}
+      })
+    },
+    {
+      ...base,
+      id: `${prefix}exportCss`,
+      label: "Export Animation as CSS",
+      keywords: ["keyframes", "css", "web animations"],
+      description: "Returns CSS @keyframes for a node's animation.",
+      readOnly: true,
+      params: {
+        type: "object",
+        properties: { nodeId: { type: "string" } },
+        required: ["nodeId"]
+      },
+      run: (_ctx, params) => controller.exportCss(params.nodeId)
+    }
+  ];
+}
 export {
   CommandRegistry,
   CommandRegistryError,
@@ -904,9 +1250,11 @@ export {
   codeFromKey,
   codeToKeyText,
   createArrangeCommands,
+  createCanvasAnimationCommands,
   createCommandPaletteController,
   createCommandRegistry,
   createCommandToolProvider,
+  createComponentCommands,
   createHistoryCommands,
   createShapeCommands,
   createSpreadsheetCommands,