@pixerate/editor-react 0.16.0 → 0.18.0

package/dist/canvas/index.js

@@ -1171,6 +1171,38 @@ import {
   pointInRings,
   pointInMultiPolygon
 } from "@pixerate/editor/canvas";
+import {
+  offsetShapeNodes,
+  outlineShapeNodeStrokes,
+  canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes,
+  applyShapeReplacement,
+  hasVisibleStroke,
+  shapeToBezierPath,
+  shapeNodeToBezierPath,
+  pathBoolean,
+  unitePaths,
+  intersectPaths,
+  subtractPaths,
+  excludePaths,
+  dividePaths,
+  normalizeBezierPath,
+  bezierPathArea,
+  offsetPath,
+  outlineStroke,
+  strokeOutlineRings,
+  dashContours,
+  toBezierPath,
+  bezierPathToSvg,
+  transformBezierPath,
+  bezierPathBounds,
+  bezierPathSignedArea,
+  bezierPathLength,
+  bezierPathPointAtLength,
+  pointInBezierPath,
+  distanceToBezierPath,
+  countPathSegments
+} from "@pixerate/editor/canvas";
 import {
   getLayoutedNodes as getLayoutedNodes2,
   ensureLayout as ensureLayout2,
@@ -1283,14 +1315,816 @@ function useCanvasAutoLayout(options) {
     [controller, guides]
   );
 }
+
+// src/canvas/useCanvasTokens.ts
+import { useCallback as useCallback8, useEffect as useEffect5, useRef as useRef9, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  bindCanvasToken,
+  detachTokenBindings,
+  getEffectiveTokenModes,
+  resolveCanvasTokens,
+  setCanvasTokenMode
+} from "@pixerate/editor/canvas";
+function useCanvasTokens(options) {
+  const { store, nodes, setNodes, modes, properties } = options;
+  const state = useSyncExternalStore2(store.subscribe, store.getState, store.getState);
+  const latest = useRef9({ nodes, setNodes, modes, properties });
+  latest.current = { nodes, setNodes, modes, properties };
+  const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
+  useEffect5(
+    () => store.subscribe((event) => {
+      if (event.deletedVariableIds.length === 0) return;
+      latest.current.setNodes((prev) => detachTokenBindings(prev, event.previous, event.deletedVariableIds, opts()));
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const modesKey = JSON.stringify(modes ?? {});
+  useEffect5(() => {
+    const next = resolveCanvasTokens(nodes, state, opts());
+    if (next !== nodes) setNodes(next);
+  }, [nodes, state, modesKey, properties]);
+  const bind = useCallback8(
+    (ids, propertyKey, variableId) => {
+      const next = bindCanvasToken(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
+      if (next !== latest.current.nodes) latest.current.setNodes(next);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const setMode = useCallback8(
+    (ids, collectionId, modeId) => {
+      const next = setCanvasTokenMode(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
+      if (next !== latest.current.nodes) latest.current.setNodes(next);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const modesOf = useCallback8(
+    (nodeId) => {
+      const node = latest.current.nodes.find((n) => n.id === nodeId);
+      return node ? getEffectiveTokenModes(node, latest.current.nodes, store.getState(), opts()) : {};
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  return { state, bind, setMode, modesOf };
+}
+
+// src/canvas/TokenBindingPicker.tsx
+import {
+  bindCanvasToken as bindCanvasToken2,
+  getBindableTokenProperties,
+  getEffectiveTokenModes as getEffectiveTokenModes2,
+  getNodeTokenBindings,
+  getNodeTokenModes,
+  setCanvasTokenMode as setCanvasTokenMode2,
+  getTokensForProperty
+} from "@pixerate/editor/canvas";
+import { getCurrentMode, resolveToken } from "@pixerate/editor/tokens";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TokenBindingPicker({
+  state,
+  nodes,
+  selectedIds,
+  onChange,
+  options = {},
+  properties,
+  onError,
+  className = ""
+}) {
+  const selected = nodes.filter((n) => selectedIds.includes(n.id));
+  const first = selected[0];
+  if (!first) return null;
+  let rows = getBindableTokenProperties(first, options);
+  if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
+  const modes = getEffectiveTokenModes2(first, nodes, state, options);
+  return /* @__PURE__ */ jsxs4("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    rows.map((property) => {
+      const ids = new Set(selected.map((n) => getNodeTokenBindings(n)[property.key] ?? ""));
+      const value = ids.size === 1 ? [...ids][0] : "__mixed";
+      const candidates = getTokensForProperty(state, property, first);
+      const resolved = value && value !== "__mixed" ? resolveToken(state, value, modes) : null;
+      return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ jsx4("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ jsxs4(
+          "select",
+          {
+            "aria-label": `${property.label} variable`,
+            className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+            value,
+            onChange: (e) => {
+              const id = e.currentTarget.value || null;
+              try {
+                onChange(bindCanvasToken2(nodes, selectedIds, property.key, id, state, options));
+              } catch (error) {
+                onError?.(error);
+              }
+            },
+            children: [
+              value === "__mixed" ? /* @__PURE__ */ jsx4("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
+              candidates.map((v) => {
+                const collection = state.collections.find((c) => c.id === v.collectionId);
+                return /* @__PURE__ */ jsxs4("option", { value: v.id, children: [
+                  v.name,
+                  collection && state.collections.length > 1 ? ` (${collection.name})` : ""
+                ] }, v.id);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ jsx4(
+          "span",
+          {
+            className: "inline-block h-3 w-3 rounded border border-border align-middle",
+            style: { background: String(resolved.value) },
+            title: String(resolved.value)
+          }
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ jsx4("span", { title: resolved.message, children: "\u26A0" }) : null })
+      ] }, property.key);
+    }),
+    state.collections.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+  ] });
+}
+function TokenModeSwitcher({
+  state,
+  nodes,
+  nodeIds,
+  onChange,
+  options = {},
+  showSingleMode = false,
+  className = ""
+}) {
+  const first = nodes.find((n) => nodeIds.includes(n.id));
+  if (!first) return null;
+  const own = getNodeTokenModes(first);
+  const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
+  const inherited = parent ? getEffectiveTokenModes2(parent, nodes, state, options) : { ...options.modes };
+  const collections = state.collections.filter((c) => showSingleMode || c.modes.length > 1);
+  return /* @__PURE__ */ jsx4("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+    const auto = getCurrentMode(collection, inherited);
+    const explicit = collection.modes.some((m) => m.id === own[collection.id]) ? own[collection.id] : "";
+    return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ jsxs4(
+        "select",
+        {
+          "aria-label": `${collection.name} mode`,
+          className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+          value: explicit,
+          onChange: (e) => onChange(setCanvasTokenMode2(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          children: [
+            /* @__PURE__ */ jsxs4("option", { value: "", children: [
+              "Auto (",
+              auto.name,
+              ")"
+            ] }),
+            collection.modes.map((m) => /* @__PURE__ */ jsx4("option", { value: m.id, children: m.name }, m.id))
+          ]
+        }
+      )
+    ] }, collection.id);
+  }) });
+}
+
+// src/canvas/index.ts
+import {
+  bindCanvasToken as bindCanvasToken3,
+  setCanvasTokenMode as setCanvasTokenMode3,
+  resolveCanvasTokens as resolveCanvasTokens2,
+  detachTokenBindings as detachTokenBindings2,
+  pruneCanvasTokenModes,
+  inspectNodeTokens,
+  getNodeTokenBindings as getNodeTokenBindings2,
+  getNodeTokenModes as getNodeTokenModes2,
+  getEffectiveTokenModes as getEffectiveTokenModes3,
+  getBindableTokenProperties as getBindableTokenProperties2,
+  getCanvasTokenProperty,
+  getTokenPropertyScope,
+  getTokensForProperty as getTokensForProperty2,
+  readNodeStyleProperty,
+  writeNodeStyleProperty,
+  CANVAS_TOKEN_PROPERTIES,
+  TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY
+} from "@pixerate/editor/canvas";
+
+// src/canvas/useCanvasAnimation.ts
+import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef10, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import {
+  createCanvasAnimationController
+} from "@pixerate/editor/canvas";
+function useCanvasAnimation(options) {
+  const nodesRef = useRef10(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = useRef10(options);
+  optionsRef.current = options;
+  const controller = useMemo5(
+    () => createCanvasAnimationController({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get getSelectedIds() {
+        return optionsRef.current.getSelectedIds;
+      },
+      get properties() {
+        return optionsRef.current.properties;
+      },
+      clock: options.clock,
+      duration: options.duration,
+      minDuration: options.minDuration,
+      loop: options.loop,
+      playbackRate: options.playbackRate,
+      fps: options.fps,
+      recording: options.recording,
+      onTime: (time) => optionsRef.current.onTime?.(time)
+    }),
+    []
+  );
+  useEffect6(() => () => controller.destroy(), [controller]);
+  useEffect6(() => {
+    if (options.loop !== void 0) controller.setLoop(options.loop);
+  }, [controller, options.loop]);
+  useEffect6(() => {
+    if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
+  }, [controller, options.playbackRate]);
+  useEffect6(() => {
+    if (options.recording !== void 0) controller.setRecording(options.recording);
+  }, [controller, options.recording]);
+  const state = useSyncExternalStore3(
+    (listener) => controller.subscribe(listener),
+    () => controller.getState(),
+    () => controller.getState()
+  );
+  useEffect6(() => {
+    controller.refresh();
+  }, [controller, options.nodes]);
+  const displayNodes = useMemo5(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return useMemo5(
+    () => ({
+      ...controller,
+      state,
+      time: state.time,
+      playing: state.playing,
+      recording: state.recording,
+      duration: state.duration,
+      selection: state.selection,
+      drag: state.drag,
+      /** The nodes evaluated at the playhead; render these. */
+      displayNodes,
+      get clipboard() {
+        return controller.clipboard;
+      }
+    }),
+    [controller, state, displayNodes]
+  );
+}
+
+// src/canvas/AnimationTimeline.tsx
+import { useEffect as useEffect7, useRef as useRef11 } from "react";
+import {
+  ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS,
+  formatAnimationTime,
+  getTimelineTicks,
+  timeToX,
+  xToTime
+} from "@pixerate/editor/canvas";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var LOOP_LABELS = { none: "Once", loop: "Loop", "ping-pong": "Ping-pong" };
+var easingValue = (easing) => typeof easing === "string" ? easing : easing ? "custom" : "linear";
+function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8, labelOf, className = "" }) {
+  const { state } = animation;
+  const duration = state.duration;
+  const rows = animation.timelineRows(nodeIds ?? void 0, labelOf ? { labelOf } : {});
+  const ticks = getTimelineTicks(duration, width);
+  const selectedEasing = (() => {
+    const first = state.selection[0];
+    if (!first) return "";
+    for (const row of rows) for (const k of row.keyframes) if (k.selected && k.ref.property === first.property && k.ref.nodeId === first.nodeId) return easingValue(k.easing);
+    return "";
+  })();
+  const dragRef = useRef11(null);
+  useEffect7(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape" && dragRef.current) {
+        dragRef.current = null;
+        animation.cancelKeyframeDrag();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [animation]);
+  const onRulerDown = (event) => {
+    const lane = event.currentTarget;
+    const left = lane.getBoundingClientRect().left;
+    animation.scrub(xToTime(event.clientX - left, duration, width));
+    const move = (e) => animation.scrub(xToTime(e.clientX - left, duration, width));
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      animation.endScrub();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  const onKeyDown = (ref) => (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.shiftKey || event.metaKey || event.ctrlKey) {
+      animation.selectKeyframes([ref], "toggle");
+      return;
+    }
+    animation.beginKeyframeDrag([ref]);
+    dragRef.current = { startX: event.clientX };
+    const msPerPx = width > 0 ? duration / width : 0;
+    const move = (e) => {
+      if (!dragRef.current) return;
+      animation.updateKeyframeDrag((e.clientX - dragRef.current.startX) * msPerPx, { snap: !e.altKey, thresholdMs: snapThreshold * msPerPx });
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      if (!dragRef.current) return;
+      dragRef.current = null;
+      animation.endKeyframeDrag();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  const onTimelineKey = (event) => {
+    if ((event.key === "Delete" || event.key === "Backspace") && state.selection.length > 0) {
+      event.preventDefault();
+      animation.deleteKeyframes();
+    }
+  };
+  const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50";
+  const playheadX = timeToX(state.time, duration, width);
+  const labelWidth = 120;
+  return /* @__PURE__ */ jsxs5("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: `${btn} ${state.recording ? "text-red-500" : ""}`,
+          "data-action": "record",
+          "aria-pressed": state.recording,
+          "aria-label": "Record keyframes",
+          onClick: () => animation.toggleRecording(),
+          children: "\u25CF Rec"
+        }
+      ),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
+      /* @__PURE__ */ jsxs5("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
+        formatAnimationTime(state.time),
+        " / ",
+        formatAnimationTime(duration)
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        "select",
+        {
+          "aria-label": "Easing",
+          "data-easing-picker": "",
+          className: "rounded border border-border bg-background px-1 py-0.5",
+          value: selectedEasing,
+          disabled: state.selection.length === 0,
+          onChange: (e) => e.target.value && e.target.value !== "custom" && animation.setEasing(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx5("option", { value: "", children: "Easing\u2026" }),
+            ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ jsx5("option", { value: preset, children: ANIMATION_EASING_LABELS[preset] }, preset)),
+            selectedEasing === "custom" ? /* @__PURE__ */ jsx5("option", { value: "custom", children: "Custom" }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "select",
+        {
+          "aria-label": "Loop",
+          "data-loop-picker": "",
+          className: "rounded border border-border bg-background px-1 py-0.5",
+          value: state.loop,
+          onChange: (e) => animation.setLoop(e.target.value),
+          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ jsx5("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx5("div", { style: { width: labelWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          "data-timeline-ruler": "",
+          className: "relative h-5 cursor-ew-resize border-b border-border",
+          style: { width },
+          onPointerDown: onRulerDown,
+          children: [
+            ticks.map((tick) => /* @__PURE__ */ jsx5("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
+            /* @__PURE__ */ jsx5("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
+          ]
+        }
+      )
+    ] }),
+    rows.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground", "data-timeline-empty": "", children: "Select an animated node, or press \u25C6 Key to add a keyframe." }) : rows.map((row) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center", "data-track": row.id, children: [
+      /* @__PURE__ */ jsxs5("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": `Enable ${row.label}`,
+            checked: row.enabled,
+            onChange: (e) => animation.setTrackEnabled(row.nodeId, row.property, e.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsxs5("span", { className: "truncate", children: [
+          rows.filter((r) => r.nodeId === row.nodeId).length < rows.length ? `${row.nodeLabel} \xB7 ` : "",
+          row.label
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
+        /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
+        state.drag?.target != null ? /* @__PURE__ */ jsx5("div", { "data-snap-target": "", className: "pointer-events-none absolute top-0 h-5 w-px bg-sky-400", style: { left: timeToX(state.drag.target, duration, width) } }) : null,
+        row.keyframes.map((k) => /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "data-keyframe": k.ref.time,
+            "aria-pressed": k.selected,
+            "aria-label": `${row.label} keyframe at ${formatAnimationTime(k.ref.time)}`,
+            title: `${formatAnimationTime(k.time)} \xB7 ${String(k.value)}`,
+            className: `absolute top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 border ${k.selected ? "border-sky-300 bg-sky-500" : "border-foreground/60 bg-background"} ${k.easing === "hold" ? "rounded-none" : "rounded-[1px]"}`,
+            style: { left: timeToX(k.time, duration, width) },
+            onPointerDown: onKeyDown(k.ref)
+          },
+          k.ref.time
+        ))
+      ] })
+    ] }, row.id))
+  ] });
+}
+
+// src/canvas/index.ts
+import {
+  createCanvasAnimationController as createCanvasAnimationController2,
+  AnimationPlayer,
+  createAnimationPlayer,
+  AnimationEditError,
+  ANIMATION_DATA_KEY,
+  ANIMATION_TIME_EPSILON,
+  ANIMATABLE_PROPERTIES,
+  ANIMATION_EASING_PRESETS as ANIMATION_EASING_PRESETS2,
+  ANIMATION_EASING_LABELS as ANIMATION_EASING_LABELS2,
+  CUBIC_BEZIER_PRESETS,
+  MAX_KEYFRAME_REFS,
+  CSS_ANIMATION_PROPERTIES,
+  evaluateAnimation,
+  evaluateTrack,
+  evaluateEasing,
+  applyAnimation,
+  applyAnimationOverrides,
+  interpolateAnimationValue,
+  getAnimationDuration,
+  wrapAnimationTime,
+  cubicBezierAt,
+  springAt,
+  resolveEasing,
+  parseCssEasing,
+  easingToCss,
+  easingLabel,
+  easingFromInfluence,
+  isAnimationEasing,
+  mixColorsOklab,
+  rgbToOklab,
+  oklabToRgb,
+  parseOklab,
+  formatOklab,
+  getNodeAnimation,
+  getAnimationTrack,
+  getAnimatedProperties,
+  getAnimatableProperty,
+  isNodeAnimated,
+  withNodeAnimation,
+  normalizeKeyframes,
+  isAnimationKeyframe,
+  clampAnimationValue,
+  setKeyframe,
+  addKeyframesAtTime,
+  updateKeyframe,
+  deleteKeyframes,
+  setKeyframeEasing,
+  setTrackEnabled,
+  removeTrack,
+  setMotionPath,
+  moveKeyframes,
+  scaleKeyframes,
+  snapKeyframeDelta,
+  snapTimeToFrame,
+  getKeyframeTimes,
+  copyKeyframes,
+  pasteKeyframes,
+  parseKeyframeClipboard,
+  recordAnimationChanges,
+  animateNode,
+  getAnimatedValue,
+  readAnimatableValue,
+  sampleAnimationFrames,
+  exportCssAnimation,
+  toWebAnimations,
+  playWebAnimations,
+  getCssPropertyAnimations,
+  isCssExportExact,
+  getTimelineRows,
+  getTimelineTicks as getTimelineTicks2,
+  isKeyframeSelected,
+  timeToX as timeToX2,
+  xToTime as xToTime2,
+  formatAnimationTime as formatAnimationTime2
+} from "@pixerate/editor/canvas";
+
+// src/canvas/useCanvasComponents.ts
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo6, useRef as useRef12 } from "react";
+import {
+  createCanvasComponentsController
+} from "@pixerate/editor/canvas";
+function useCanvasComponents(options) {
+  const nodesRef = useRef12(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = useRef12(options);
+  optionsRef.current = options;
+  const controller = useMemo6(
+    () => createCanvasComponentsController({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get getSelectedIds() {
+        return optionsRef.current.getSelectedIds;
+      },
+      onReveal: (node) => optionsRef.current.onReveal?.(node),
+      get idGenerator() {
+        return optionsRef.current.idGenerator;
+      },
+      get textTypes() {
+        return optionsRef.current.textTypes;
+      },
+      get layout() {
+        return optionsRef.current.layout;
+      },
+      get tokens() {
+        return optionsRef.current.tokens;
+      }
+    }),
+    []
+  );
+  useLayoutEffect2(() => {
+    if (optionsRef.current.autoSync !== false) controller.sync();
+  }, [options.nodes, controller]);
+  return controller;
+}
+
+// src/canvas/CanvasComponentsPanel.tsx
+import { useState as useState5 } from "react";
+import {
+  CANVAS_COMPONENT_DRAG_TYPE,
+  inspectCanvasInstance,
+  listCanvasComponents
+} from "@pixerate/editor/canvas";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function CanvasComponentsPanel({
+  nodes,
+  onInsert,
+  search = true,
+  className = ""
+}) {
+  const [query, setQuery] = useState5("");
+  const { components, sets } = listCanvasComponents(nodes);
+  const q = query.trim().toLowerCase();
+  const match = (name) => !q || name.toLowerCase().includes(q);
+  const lone = components.filter((c) => !c.setId && match(c.name));
+  const shownSets = sets.filter((s) => match(s.name) || s.variants.some((v) => match(v.name)));
+  const item = (id, name, count, extra = {}) => /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      draggable: true,
+      "data-component-id": id,
+      ...extra,
+      className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-xs hover:bg-muted",
+      title: `Insert an instance of ${name}`,
+      onClick: () => onInsert(id),
+      onDragStart: (e) => {
+        e.dataTransfer.setData(CANVAS_COMPONENT_DRAG_TYPE, id);
+        e.dataTransfer.setData("text/plain", name);
+        e.dataTransfer.effectAllowed = "copy";
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("span", { className: "truncate", children: [
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
+          name
+        ] }),
+        /* @__PURE__ */ jsx6("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
+      ]
+    },
+    id
+  );
+  return /* @__PURE__ */ jsxs6("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    search ? /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "search",
+        "aria-label": "Search components",
+        placeholder: "Search components",
+        className: "rounded border border-border bg-background px-2 py-1 text-xs",
+        onInput: (e) => setQuery(e.target.value)
+      }
+    ) : null,
+    shownSets.map((set) => /* @__PURE__ */ jsxs6("div", { "data-component-set": set.id, className: "flex flex-col", children: [
+      item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
+      /* @__PURE__ */ jsx6("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => item(v.id, v.name, v.instanceCount, { "data-kind": "variant" })) })
+    ] }, set.id)),
+    lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
+    components.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+  ] });
+}
+function CanvasInstanceInspector({
+  nodes,
+  nodeId,
+  components,
+  onError,
+  className = ""
+}) {
+  const info = nodeId ? inspectCanvasInstance(nodes, nodeId) : void 0;
+  if (!info) return null;
+  const report = (result) => {
+    if (result && !result.ok && result.reason) onError?.(result.reason);
+  };
+  const setProp = (name, value) => report(components.setInstanceProperties({ [name]: value }, [info.id]));
+  const allComponents = listCanvasComponents(nodes).components;
+  const linked = info.status === "linked";
+  const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40";
+  return /* @__PURE__ */ jsxs6("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx6("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
+      info.nested ? /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: "Nested" }) : null
+    ] }),
+    info.variantOptions.map((option) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
+      /* @__PURE__ */ jsx6(
+        "select",
+        {
+          "aria-label": `${option.name} variant`,
+          className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+          value: info.variant[option.name] ?? "",
+          onChange: (e) => setProp(option.name, e.currentTarget.value),
+          children: option.values.map((v) => /* @__PURE__ */ jsx6("option", { value: v, children: v }, v))
+        }
+      )
+    ] }, option.name)),
+    info.properties.map((p) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
+      p.type === "boolean" ? /* @__PURE__ */ jsx6("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "text",
+          "aria-label": p.name,
+          defaultValue: String(p.value),
+          className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+          onBlur: (e) => {
+            if (e.currentTarget.value !== p.value) setProp(p.name, e.currentTarget.value);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.currentTarget.blur();
+          }
+        },
+        String(p.value)
+      ) : /* @__PURE__ */ jsx6(
+        "select",
+        {
+          "aria-label": p.name,
+          className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+          value: String(p.value),
+          onChange: (e) => setProp(p.name, e.currentTarget.value),
+          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ jsx6("option", { value: c.id, children: c.name }, c.id))
+        }
+      )
+    ] }, p.name)),
+    info.overrides.length ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
+      /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: "Overrides" }),
+      info.overrides.map((o) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
+        /* @__PURE__ */ jsx6("span", { className: "mr-1 truncate", children: o.name }),
+        o.groups.map((g) => /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            type: "button",
+            className: "rounded bg-muted px-1 text-[10px]",
+            "data-override-group": g,
+            title: `Reset ${g}`,
+            onClick: () => report(components.resetOverrides(o.id, g)),
+            children: [
+              g,
+              " \xD7"
+            ]
+          },
+          g
+        ))
+      ] }, o.id))
+    ] }) : null,
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-1", children: [
+      linked ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            className: btn,
+            "data-action": "push",
+            disabled: info.overrides.length === 0,
+            onClick: () => report(components.pushOverrides(info.rootId)),
+            children: "Push changes"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: btn,
+          "data-action": "detach",
+          disabled: info.nested,
+          title: info.nested ? "Detach the outer instance first" : void 0,
+          onClick: () => report(components.detachInstance([info.id])),
+          children: "Detach"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/canvas/index.ts
+import {
+  createCanvasComponentsController as createCanvasComponentsController2,
+  createCanvasComponent,
+  combineCanvasComponentsAsVariants,
+  createCanvasInstance,
+  detachCanvasInstance,
+  resetCanvasInstanceOverrides,
+  pushCanvasInstanceOverrides,
+  swapCanvasInstance,
+  setCanvasInstanceProperties,
+  setCanvasComponentProperty,
+  bindCanvasComponentProperty,
+  restoreCanvasMainComponent,
+  syncCanvasComponents,
+  syncCanvasInstance,
+  syncAllCanvasInstances,
+  listCanvasComponents as listCanvasComponents2,
+  inspectCanvasInstance as inspectCanvasInstance2,
+  getInstanceStatus,
+  getNodeOverrides,
+  getComponentSourceId,
+  getInstanceData,
+  getCanvasComponentDragId,
+  isCanvasComponent,
+  isCanvasComponentSet,
+  isCanvasInstance,
+  wouldCreateComponentCycle,
+  CANVAS_COMPONENT_DRAG_TYPE as CANVAS_COMPONENT_DRAG_TYPE2
+} from "@pixerate/editor/canvas";
 export {
+  ANIMATABLE_PROPERTIES,
+  ANIMATION_DATA_KEY,
+  ANIMATION_EASING_LABELS2 as ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS2 as ANIMATION_EASING_PRESETS,
+  ANIMATION_TIME_EPSILON,
   AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  AnimationEditError,
+  AnimationPlayer,
+  AnimationTimeline,
+  CANVAS_COMPONENT_DRAG_TYPE2 as CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
+  CSS_ANIMATION_PROPERTIES,
+  CUBIC_BEZIER_PRESETS,
+  CanvasComponentsPanel,
   CanvasGuidesLayer,
+  CanvasInstanceInspector,
   CanvasScenesStore2 as CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
+  MAX_KEYFRAME_REFS,
   ManualClock,
   RESIZE_HANDLES,
   SHAPE_DATA_KEY,
@@ -1298,37 +2132,80 @@ export {
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   ShapeNode,
+  TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY,
+  TokenBindingPicker,
+  TokenModeSwitcher,
+  addKeyframesAtTime,
   alignNodes,
+  animateNode,
+  applyAnimation,
+  applyAnimationOverrides,
   applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
+  applyShapeReplacement,
+  bezierPathArea,
+  bezierPathBounds,
+  bezierPathLength,
+  bezierPathPointAtLength,
+  bezierPathSignedArea,
+  bezierPathToSvg,
+  bindCanvasComponentProperty,
+  bindCanvasToken3 as bindCanvasToken,
   blendLayout,
   boundsOf,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement2 as calculateDirectionalDisplacement,
   canCombineShapeNodes,
+  canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes,
   canvasHeight,
   centerNodes2 as centerNodes,
   centre,
+  clampAnimationValue,
   clampLayoutSize,
+  combineCanvasComponentsAsVariants,
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
+  copyKeyframes,
+  countPathSegments,
+  createAnimationPlayer,
   createBezierTrajectory,
+  createCanvasAnimationController2 as createCanvasAnimationController,
   createCanvasAutoLayoutController2 as createCanvasAutoLayoutController,
+  createCanvasComponent,
+  createCanvasComponentsController2 as createCanvasComponentsController,
+  createCanvasInstance,
   createCanvasScenesStore,
   createFanOutTrajectory2 as createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
+  cubicBezierAt,
   cubicPointAt,
   cubicsToPathData,
+  dashContours,
   defaultEasing,
+  deleteKeyframes,
+  detachCanvasInstance,
+  detachTokenBindings2 as detachTokenBindings,
+  distanceToBezierPath,
   distributeNodes,
+  dividePaths,
   dividePolygons,
+  easingFromInfluence,
+  easingLabel,
+  easingToCss,
   ensureLayout2 as ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
+  evaluateAnimation,
+  evaluateEasing,
+  evaluateTrack,
+  excludePaths,
+  exportCssAnimation,
   findConnectorSnap,
   fitCubicRun,
   fitCubics,
@@ -1338,30 +2215,67 @@ export {
   fitViewportToRect,
   flattenSvgPath,
   flowSide,
+  formatAnimationTime2 as formatAnimationTime,
+  formatOklab,
   getAbsolutePosition,
+  getAnimatableProperty,
+  getAnimatedProperties,
+  getAnimatedValue,
+  getAnimationDuration,
+  getAnimationTrack,
   getAutoLayout,
   getAutoLayoutGrid,
   getAutoLayoutInsertTarget,
+  getBindableTokenProperties2 as getBindableTokenProperties,
+  getCanvasComponentDragId,
+  getCanvasTokenProperty,
   getCenteredNodePosition2 as getCenteredNodePosition,
   getChildLayout,
+  getComponentSourceId,
+  getCssPropertyAnimations,
+  getEffectiveTokenModes3 as getEffectiveTokenModes,
   getFlowChildren,
+  getInstanceData,
+  getInstanceStatus,
+  getKeyframeTimes,
   getLayoutParent,
   getLayoutSizing,
   getLayoutedNodes2 as getLayoutedNodes,
+  getNodeAnimation,
+  getNodeOverrides,
   getNodeRect,
   getNodeShape,
   getNodeSize,
+  getNodeTokenBindings2 as getNodeTokenBindings,
+  getNodeTokenModes2 as getNodeTokenModes,
   getResizingNodeRect,
   getShapeRenderData2 as getShapeRenderData,
   getShapeSvg,
+  getTimelineRows,
+  getTimelineTicks2 as getTimelineTicks,
+  getTokenPropertyScope,
+  getTokensForProperty2 as getTokensForProperty,
   handlePoint,
+  hasVisibleStroke,
   inferResizeHandle,
+  inspectCanvasInstance2 as inspectCanvasInstance,
+  inspectNodeTokens,
+  interpolateAnimationValue,
+  intersectPaths,
   intersectPolygons,
   invertNodeUpdates,
+  isAnimationEasing,
+  isAnimationKeyframe,
   isAutoLayoutFrame,
+  isCanvasComponent,
+  isCanvasComponentSet,
+  isCanvasInstance,
+  isCssExportExact,
   isEventFromTextInput3 as isEventFromTextInput,
+  isKeyframeSelected,
   isLocked,
   isMeasureModifierHeld2 as isMeasureModifierHeld,
+  isNodeAnimated,
   isShapeDescription2 as isShapeDescription,
   isShapeNode,
   isStraightCubic,
@@ -1374,6 +2288,7 @@ export {
   layoutUpMany,
   linearPositionTrajectory2 as linearPositionTrajectory,
   linearTrajectory,
+  listCanvasComponents2 as listCanvasComponents,
   lockNodes,
   makeSizingCoherent,
   matchArrangeShortcut2 as matchArrangeShortcut,
@@ -1383,50 +2298,105 @@ export {
   measureSelection2 as measureSelection,
   measureToLine,
   mergeNodeUpdates,
+  mixColorsOklab,
+  moveKeyframes,
   moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
+  normalizeBezierPath,
+  normalizeKeyframes,
+  offsetPath,
+  offsetShapeNodes,
+  oklabToRgb,
   oppositePosition,
+  outlineShapeNodeStrokes,
+  outlineStroke,
   overlaps,
   parseCanvasClipboardData2 as parseCanvasClipboardData,
   parseCanvasScenes,
+  parseCssEasing,
+  parseKeyframeClipboard,
+  parseOklab,
   parseSvgPath,
+  pasteKeyframes,
+  pathBoolean,
   placeBeside2 as placeBeside,
+  playWebAnimations,
+  pointInBezierPath,
   pointInMultiPolygon,
   pointInRings,
   polygonArea,
   polygonBoolean,
   polygonToSvgPath,
   positionToSide,
+  pruneCanvasTokenModes,
+  pushCanvasInstanceOverrides,
+  readAnimatableValue,
+  readNodeStyleProperty,
   readStyleSize,
   realClock,
+  recordAnimationChanges,
   relayoutUpdates,
   remapPastedNodes2 as remapPastedNodes,
+  removeTrack,
   reorderNodes,
   repositionNodesTo,
+  resetCanvasInstanceOverrides,
   resizeHandleAxes,
+  resolveCanvasTokens2 as resolveCanvasTokens,
+  resolveEasing,
   resolvePadding,
+  restoreCanvasMainComponent,
   revertShapeCombination,
+  rgbToOklab,
   ringSignedArea,
   runMultiNodeTransition2 as runMultiNodeTransition,
+  sampleAnimationFrames,
+  scaleKeyframes,
   serializeCanvasNodes2 as serializeCanvasNodes,
+  setCanvasComponentProperty,
+  setCanvasInstanceProperties,
+  setCanvasTokenMode3 as setCanvasTokenMode,
+  setKeyframe,
+  setKeyframeEasing,
+  setMotionPath,
+  setTrackEnabled,
+  shapeNodeToBezierPath,
   shapeNodeToPolygon,
+  shapeToBezierPath,
   shapeToPolygon,
   sideToPosition,
   simplifyRing,
+  snapKeyframeDelta,
   snapNodeDrag,
   snapNodeResize,
   snapResize,
+  snapTimeToFrame,
   snapToGrid,
+  springAt,
+  strokeOutlineRings,
+  subtractPaths,
   subtractPolygons,
+  swapCanvasInstance,
+  syncAllCanvasInstances,
+  syncCanvasComponents,
+  syncCanvasInstance,
+  timeToX2 as timeToX,
+  toBezierPath,
+  toWebAnimations,
   toggleLockNodes,
+  transformBezierPath,
   unionPolygons,
+  unitePaths,
   unlockNodes,
+  updateKeyframe,
+  useCanvasAnimation,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
   useCanvasAutoLayout,
   useCanvasClipboard,
+  useCanvasComponents,
   useCanvasDocking,
   useCanvasExplosion,
   useCanvasGraph,
@@ -1434,8 +2404,14 @@ export {
   useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
+  useCanvasTokens,
   useStreamingCanvas,
+  withNodeAnimation,
   withStyleSize,
+  wouldCreateComponentCycle,
+  wrapAnimationTime,
+  writeNodeStyleProperty,
+  xToTime2 as xToTime,
   xorPolygons
 };
 //# sourceMappingURL=index.js.map