@pixerate/editor-react 0.20.0 → 0.22.0

package/dist/canvas/index.js

@@ -976,8 +976,220 @@ function CanvasGuidesLayer({
   );
 }
 
+// src/canvas/useCanvasDraw.ts
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef7, useState as useState3 } from "react";
+import {
+  createCanvasDrawController
+} from "@pixerate/editor/canvas";
+function useCanvasDraw(options) {
+  const nodesRef = useRef7(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = useRef7(options);
+  optionsRef.current = options;
+  const [tool, setToolState] = useState3(options.initialTool ?? "select");
+  const [activeStroke, setActiveStroke] = useState3(null);
+  const controller = useMemo3(
+    () => createCanvasDrawController({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      tool: options.initialTool ?? "select",
+      style: options.initialStyle,
+      drawOptions: options.drawOptions,
+      generateNodeId: options.generateNodeId,
+      onToolChange: setToolState,
+      onStyleChange: (s) => setStyleState(s),
+      onActiveStrokeChange: setActiveStroke,
+      onStrokeComplete: (n) => optionsRef.current.onStrokeComplete?.(n),
+      onNodesErase: (erased) => optionsRef.current.onNodesErase?.(erased)
+    }),
+    []
+  );
+  const [style, setStyleState] = useState3(controller.style);
+  useEffect4(() => {
+    if (options.initialTool && options.initialTool !== controller.tool) {
+      controller.setTool(options.initialTool);
+    }
+  }, [options.initialTool, controller]);
+  return useMemo3(
+    () => ({
+      tool,
+      style,
+      activeStroke,
+      isDrawing: activeStroke !== null,
+      setTool: controller.setTool,
+      setStyle: controller.setStyle,
+      startStroke: controller.startStroke,
+      continueStroke: controller.continueStroke,
+      endStroke: controller.endStroke,
+      cancelStroke: controller.cancelStroke,
+      eraseAt: controller.eraseAt
+    }),
+    [tool, style, activeStroke, controller]
+  );
+}
+
+// src/canvas/CanvasDrawLayer.tsx
+import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef8, useState as useState4 } from "react";
+import {
+  strokePointsToPathData,
+  resolveCanvasGradient,
+  gradientToSvgDef
+} from "@pixerate/editor/canvas";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_VIEWPORT2 = { x: 0, y: 0, zoom: 1 };
+function CanvasDrawLayer({
+  draw,
+  viewport = DEFAULT_VIEWPORT2,
+  className = "",
+  style,
+  cursor,
+  eraserRadius = 12
+}) {
+  const svgRef = useRef8(null);
+  const [spaceHeld, setSpaceHeld] = useState4(false);
+  const [eraserPos, setEraserPos] = useState4(null);
+  useEffect5(() => {
+    function onKeyDown(e) {
+      if (e.code === "Space" && !e.repeat) {
+        const tag = e.target?.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) {
+          return;
+        }
+        setSpaceHeld(true);
+      }
+    }
+    function onKeyUp(e) {
+      if (e.code === "Space") {
+        setSpaceHeld(false);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+    };
+  }, []);
+  const clientToFlow = useCallback7(
+    (clientX, clientY) => {
+      if (!svgRef.current) return [0, 0];
+      const rect = svgRef.current.getBoundingClientRect();
+      const screenX = clientX - rect.left;
+      const screenY = clientY - rect.top;
+      const flowX = (screenX - viewport.x) / viewport.zoom;
+      const flowY = (screenY - viewport.y) / viewport.zoom;
+      return [flowX, flowY];
+    },
+    [viewport.x, viewport.y, viewport.zoom]
+  );
+  const isDrawingMode = draw.tool !== "select";
+  const interactive = isDrawingMode && !spaceHeld;
+  const handlePointerDown = (e) => {
+    if (!interactive || e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.target.setPointerCapture?.(e.pointerId);
+    const flowPt = clientToFlow(e.clientX, e.clientY);
+    draw.startStroke(flowPt);
+    if (draw.tool === "eraser") {
+      setEraserPos([e.clientX, e.clientY]);
+    }
+  };
+  const handlePointerMove = (e) => {
+    if (draw.tool === "eraser" && !spaceHeld) {
+      setEraserPos([e.clientX, e.clientY]);
+    }
+    if (!interactive) return;
+    if (e.buttons === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+      const flowPt = clientToFlow(e.clientX, e.clientY);
+      draw.continueStroke(flowPt);
+    }
+  };
+  const handlePointerUp = (e) => {
+    if (!interactive || e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      e.target.releasePointerCapture?.(e.pointerId);
+    } catch {
+    }
+    draw.endStroke();
+  };
+  const handlePointerLeave = () => {
+    setEraserPos(null);
+  };
+  const resolvedCursor = cursor ? cursor : spaceHeld ? "grab" : draw.tool === "eraser" ? "crosshair" : draw.tool === "pen" || draw.tool === "highlighter" ? "crosshair" : "default";
+  const strokePath = draw.activeStroke ? strokePointsToPathData(draw.activeStroke.points) : null;
+  const activeGradient = draw.activeStroke ? resolveCanvasGradient(draw.activeStroke.style.gradient ?? draw.activeStroke.style.color) : null;
+  const resolvedGradientDef = activeGradient ? gradientToSvgDef(activeGradient, "active-draw-stroke-gradient") : null;
+  const strokePaint = resolvedGradientDef ? `url(#${resolvedGradientDef.id})` : draw.activeStroke ? draw.activeStroke.style.color : "currentColor";
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      ref: svgRef,
+      className: `pixerate-canvas-draw-layer ${className}`,
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: interactive ? "all" : "none",
+        cursor: interactive ? resolvedCursor : void 0,
+        overflow: "visible",
+        zIndex: 20,
+        touchAction: "none",
+        ...style
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerLeave: handlePointerLeave,
+      children: [
+        resolvedGradientDef && /* @__PURE__ */ jsxs3("defs", { children: [
+          resolvedGradientDef.type === "linear" && /* @__PURE__ */ jsx3("linearGradient", { id: resolvedGradientDef.id, ...resolvedGradientDef.attrs, children: resolvedGradientDef.stops.map((stop, i) => /* @__PURE__ */ jsx3("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+          resolvedGradientDef.type === "radial" && /* @__PURE__ */ jsx3("radialGradient", { id: resolvedGradientDef.id, ...resolvedGradientDef.attrs, children: resolvedGradientDef.stops.map((stop, i) => /* @__PURE__ */ jsx3("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx3("g", { transform: `translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`, children: draw.activeStroke && strokePath && /* @__PURE__ */ jsx3(
+          "path",
+          {
+            className: "pixerate-canvas-draw-active",
+            d: strokePath,
+            fill: "none",
+            stroke: strokePaint,
+            strokeWidth: draw.activeStroke.style.width,
+            opacity: draw.activeStroke.style.opacity,
+            strokeLinecap: draw.activeStroke.style.cap ?? "round",
+            strokeLinejoin: draw.activeStroke.style.join ?? "round"
+          }
+        ) }),
+        draw.tool === "eraser" && eraserPos && svgRef.current && /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: eraserPos[0] - svgRef.current.getBoundingClientRect().left,
+            cy: eraserPos[1] - svgRef.current.getBoundingClientRect().top,
+            r: eraserRadius,
+            fill: "rgba(239, 68, 68, 0.15)",
+            stroke: "rgba(239, 68, 68, 0.8)",
+            strokeWidth: 1.5,
+            strokeDasharray: "3 3",
+            pointerEvents: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/canvas/useCanvasMeasure.ts
-import { useCallback as useCallback7, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef7, useState as useState3 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef9, useState as useState5 } from "react";
 import {
   isMeasureModifierHeld,
   measureSelection
@@ -985,11 +1197,11 @@ import {
 var EMPTY = { guides: [], target: null, selection: null };
 function useCanvasMeasure(options) {
   const { nodes, enabled = true, requireModifier = true, targetElement, rectOptions } = options;
-  const [hoveredId, setHoveredId] = useState3(null);
-  const [modifier, setModifier] = useState3(false);
-  const optionsRef = useRef7(options);
+  const [hoveredId, setHoveredId] = useState5(null);
+  const [modifier, setModifier] = useState5(false);
+  const optionsRef = useRef9(options);
   optionsRef.current = options;
-  useEffect4(() => {
+  useEffect6(() => {
     if (!enabled) return;
     const target = targetElement ?? (typeof window !== "undefined" ? window : null);
     if (!target) return;
@@ -1006,16 +1218,16 @@ function useCanvasMeasure(options) {
     };
   }, [enabled, targetElement]);
   const active = enabled && (!requireModifier || modifier);
-  const result = useMemo3(() => {
+  const result = useMemo4(() => {
     if (!active) return EMPTY;
     const ids = optionsRef.current.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
     return measureSelection(nodes, ids, hoveredId, rectOptions);
   }, [active, nodes, hoveredId, rectOptions]);
-  const onNodeMouseEnter = useCallback7((event, node) => {
+  const onNodeMouseEnter = useCallback8((event, node) => {
     setHoveredId(node.id);
     if (event && typeof event.altKey === "boolean") setModifier(event.altKey);
   }, []);
-  const onNodeMouseLeave = useCallback7((_event, node) => {
+  const onNodeMouseLeave = useCallback8((_event, node) => {
     setHoveredId((current) => current === node.id ? null : current);
   }, []);
   return {
@@ -1094,12 +1306,12 @@ import {
 
 // src/canvas/ShapeNode.tsx
 import { getShapeRenderData, isShapeDescription } from "@pixerate/editor/canvas";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ShapeNode({ data, width, height, selected, className = "", children }) {
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ShapeNode({ id, data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
   if (!isShapeDescription(shape)) return null;
-  const render = getShapeRenderData(shape, { width, height });
-  return /* @__PURE__ */ jsxs3(
+  const render = getShapeRenderData(shape, { width, height }, { id: id || data?.id });
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `pixerate-shape-node ${className}`.trim(),
@@ -1107,7 +1319,7 @@ function ShapeNode({ data, width, height, selected, className = "", children })
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4(
           "svg",
           {
             viewBox: render.viewBox,
@@ -1116,19 +1328,29 @@ function ShapeNode({ data, width, height, selected, className = "", children })
             height: "100%",
             style: { display: "block", overflow: "visible" },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx3(
-              "path",
-              {
-                d: render.d,
-                transform: render.transform,
-                fill: render.fill,
-                fillRule: render.fillRule,
-                stroke: render.stroke,
-                strokeWidth: render.strokeWidth,
-                opacity: render.opacity,
-                vectorEffect: "non-scaling-stroke"
-              }
-            )
+            children: [
+              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ jsxs4("defs", { children: [
+                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ jsx4("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ jsx4("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ jsx4("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ jsx4("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ jsx4("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ jsx4("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ jsx4("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ jsx4("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "path",
+                {
+                  d: render.d,
+                  transform: render.transform,
+                  fill: render.fill,
+                  fillRule: render.fillRule,
+                  stroke: render.stroke,
+                  strokeWidth: render.strokeWidth,
+                  strokeLinecap: render.strokeLinecap,
+                  strokeLinejoin: render.strokeLinejoin,
+                  opacity: render.opacity,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              )
+            ]
           }
         ),
         children
@@ -1264,17 +1486,17 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAutoLayout.ts
-import { useLayoutEffect, useMemo as useMemo4, useRef as useRef8, useState as useState4 } from "react";
+import { useLayoutEffect, useMemo as useMemo5, useRef as useRef10, useState as useState6 } from "react";
 import {
   createCanvasAutoLayoutController
 } from "@pixerate/editor/canvas";
 function useCanvasAutoLayout(options) {
-  const [guides, setGuides] = useState4([]);
-  const nodesRef = useRef8(options.nodes);
+  const [guides, setGuides] = useState6([]);
+  const nodesRef = useRef10(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef8(options);
+  const optionsRef = useRef10(options);
   optionsRef.current = options;
-  const controller = useMemo4(
+  const controller = useMemo5(
     () => createCanvasAutoLayoutController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1303,7 +1525,7 @@ function useCanvasAutoLayout(options) {
   useLayoutEffect(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return useMemo4(
+  return useMemo5(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1317,7 +1539,7 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.ts
-import { useCallback as useCallback8, useEffect as useEffect5, useRef as useRef9, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect7, useRef as useRef11, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   bindCanvasToken,
   detachTokenBindings,
@@ -1328,10 +1550,10 @@ import {
 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 });
+  const latest = useRef11({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
-  useEffect5(
+  useEffect7(
     () => store.subscribe((event) => {
       if (event.deletedVariableIds.length === 0) return;
       latest.current.setNodes((prev) => detachTokenBindings(prev, event.previous, event.deletedVariableIds, opts()));
@@ -1340,11 +1562,11 @@ function useCanvasTokens(options) {
     [store]
   );
   const modesKey = JSON.stringify(modes ?? {});
-  useEffect5(() => {
+  useEffect7(() => {
     const next = resolveCanvasTokens(nodes, state, opts());
     if (next !== nodes) setNodes(next);
   }, [nodes, state, modesKey, properties]);
-  const bind = useCallback8(
+  const bind = useCallback9(
     (ids, propertyKey, variableId) => {
       const next = bindCanvasToken(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
       if (next !== latest.current.nodes) latest.current.setNodes(next);
@@ -1352,7 +1574,7 @@ function useCanvasTokens(options) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
-  const setMode = useCallback8(
+  const setMode = useCallback9(
     (ids, collectionId, modeId) => {
       const next = setCanvasTokenMode(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
       if (next !== latest.current.nodes) latest.current.setNodes(next);
@@ -1360,7 +1582,7 @@ function useCanvasTokens(options) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
-  const modesOf = useCallback8(
+  const modesOf = useCallback9(
     (nodeId) => {
       const node = latest.current.nodes.find((n) => n.id === nodeId);
       return node ? getEffectiveTokenModes(node, latest.current.nodes, store.getState(), opts()) : {};
@@ -1382,7 +1604,7 @@ import {
   getTokensForProperty
 } from "@pixerate/editor/canvas";
 import { getCurrentMode, resolveToken } from "@pixerate/editor/tokens";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function TokenBindingPicker({
   state,
   nodes,
@@ -1399,15 +1621,15 @@ function TokenBindingPicker({
   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: [
+  return /* @__PURE__ */ jsxs5("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(
+      return /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ jsx5("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ jsxs5(
           "select",
           {
             "aria-label": `${property.label} variable`,
@@ -1422,11 +1644,11 @@ function TokenBindingPicker({
               }
             },
             children: [
-              value === "__mixed" ? /* @__PURE__ */ jsx4("option", { value: "__mixed", children: "Mixed" }) : null,
-              /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
+              value === "__mixed" ? /* @__PURE__ */ jsx5("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ jsx5("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: [
+                return /* @__PURE__ */ jsxs5("option", { value: v.id, children: [
                   v.name,
                   collection && state.collections.length > 1 ? ` (${collection.name})` : ""
                 ] }, v.id);
@@ -1434,17 +1656,17 @@ function TokenBindingPicker({
             ]
           }
         ),
-        /* @__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(
+        /* @__PURE__ */ jsx5("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ jsx5(
           "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 })
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ jsx5("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
+    state.collections.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
   ] });
 }
 function TokenModeSwitcher({
@@ -1462,12 +1684,12 @@ function TokenModeSwitcher({
   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) => {
+  return /* @__PURE__ */ jsx5("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(
+    return /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ jsx5("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ jsxs5(
         "select",
         {
           "aria-label": `${collection.name} mode`,
@@ -1475,12 +1697,12 @@ function TokenModeSwitcher({
           value: explicit,
           onChange: (e) => onChange(setCanvasTokenMode2(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
           children: [
-            /* @__PURE__ */ jsxs4("option", { value: "", children: [
+            /* @__PURE__ */ jsxs5("option", { value: "", children: [
               "Auto (",
               auto.name,
               ")"
             ] }),
-            collection.modes.map((m) => /* @__PURE__ */ jsx4("option", { value: m.id, children: m.name }, m.id))
+            collection.modes.map((m) => /* @__PURE__ */ jsx5("option", { value: m.id, children: m.name }, m.id))
           ]
         }
       )
@@ -1511,16 +1733,16 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAnimation.ts
-import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef10, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef12, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   createCanvasAnimationController
 } from "@pixerate/editor/canvas";
 function useCanvasAnimation(options) {
-  const nodesRef = useRef10(options.nodes);
+  const nodesRef = useRef12(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef10(options);
+  const optionsRef = useRef12(options);
   optionsRef.current = options;
-  const controller = useMemo5(
+  const controller = useMemo6(
     () => createCanvasAnimationController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1547,14 +1769,14 @@ function useCanvasAnimation(options) {
     }),
     []
   );
-  useEffect6(() => () => controller.destroy(), [controller]);
-  useEffect6(() => {
+  useEffect8(() => () => controller.destroy(), [controller]);
+  useEffect8(() => {
     if (options.loop !== void 0) controller.setLoop(options.loop);
   }, [controller, options.loop]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
   }, [controller, options.playbackRate]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (options.recording !== void 0) controller.setRecording(options.recording);
   }, [controller, options.recording]);
   const state = useSyncExternalStore3(
@@ -1562,11 +1784,11 @@ function useCanvasAnimation(options) {
     () => controller.getState(),
     () => controller.getState()
   );
-  useEffect6(() => {
+  useEffect8(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = useMemo5(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return useMemo5(
+  const displayNodes = useMemo6(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return useMemo6(
     () => ({
       ...controller,
       state,
@@ -1587,7 +1809,7 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-import { useEffect as useEffect7, useRef as useRef11 } from "react";
+import { useEffect as useEffect9, useRef as useRef13 } from "react";
 import {
   ANIMATION_EASING_LABELS,
   ANIMATION_EASING_PRESETS,
@@ -1596,7 +1818,7 @@ import {
   timeToX,
   xToTime
 } from "@pixerate/editor/canvas";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } 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 = "" }) {
@@ -1610,8 +1832,8 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
     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 dragRef = useRef13(null);
+  useEffect9(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
         dragRef.current = null;
@@ -1667,10 +1889,10 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
   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(
+  return /* @__PURE__ */ jsxs6("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
+      /* @__PURE__ */ jsx6("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__ */ jsx6(
         "button",
         {
           type: "button",
@@ -1682,13 +1904,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           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: [
+      /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
+      /* @__PURE__ */ jsxs6("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
         formatAnimationTime(state.time),
         " / ",
         formatAnimationTime(duration)
       ] }),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6(
         "select",
         {
           "aria-label": "Easing",
@@ -1698,13 +1920,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           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__ */ jsx6("option", { value: "", children: "Easing\u2026" }),
+            ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ jsx6("option", { value: preset, children: ANIMATION_EASING_LABELS[preset] }, preset)),
+            selectedEasing === "custom" ? /* @__PURE__ */ jsx6("option", { value: "custom", children: "Custom" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "select",
         {
           "aria-label": "Loop",
@@ -1712,13 +1934,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           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))
+          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ jsx6("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(
+    /* @__PURE__ */ jsxs6("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx6("div", { style: { width: labelWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ jsxs6(
         "div",
         {
           "data-timeline-ruler": "",
@@ -1726,15 +1948,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           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 } })
+            ticks.map((tick) => /* @__PURE__ */ jsx6("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
+            /* @__PURE__ */ jsx6("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(
+    rows.length === 0 ? /* @__PURE__ */ jsx6("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__ */ jsxs6("div", { className: "flex items-center", "data-track": row.id, children: [
+      /* @__PURE__ */ jsxs6("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "checkbox",
@@ -1743,15 +1965,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
             onChange: (e) => animation.setTrackEnabled(row.nodeId, row.property, e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { className: "truncate", children: [
+        /* @__PURE__ */ jsxs6("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(
+      /* @__PURE__ */ jsxs6("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
+        /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
+        state.drag?.target != null ? /* @__PURE__ */ jsx6("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__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1849,16 +2071,16 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasComponents.ts
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo6, useRef as useRef12 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo7, useRef as useRef14 } from "react";
 import {
   createCanvasComponentsController
 } from "@pixerate/editor/canvas";
 function useCanvasComponents(options) {
-  const nodesRef = useRef12(options.nodes);
+  const nodesRef = useRef14(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef12(options);
+  const optionsRef = useRef14(options);
   optionsRef.current = options;
-  const controller = useMemo6(
+  const controller = useMemo7(
     () => createCanvasComponentsController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1894,15 +2116,15 @@ function useCanvasComponents(options) {
 }
 
 // src/canvas/CanvasComponentsPanel.tsx
-import { useState as useState5 } from "react";
+import { useState as useState7 } 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";
+import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function InlineField({ value, label, onCommit }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "input",
     {
       type: "text",
@@ -1933,10 +2155,10 @@ function CanvasComponentsPanel({
   search = true,
   className = ""
 }) {
-  const [query, setQuery] = useState5("");
-  const [propsOpen, setPropsOpen] = useState5(null);
-  const [menuFor, setMenuFor] = useState5(null);
-  const [editing, setEditing] = useState5(null);
+  const [query, setQuery] = useState7("");
+  const [propsOpen, setPropsOpen] = useState7(null);
+  const [menuFor, setMenuFor] = useState7(null);
+  const [editing, setEditing] = useState7(null);
   const { components: all, sets } = listCanvasComponents(nodes);
   const q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
@@ -1948,7 +2170,7 @@ function CanvasComponentsPanel({
   };
   const small = "shrink-0 rounded px-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40";
   const menuItem = "rounded px-2 py-0.5 text-left hover:bg-muted disabled:opacity-40";
-  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ jsxs6(
+  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
@@ -1965,17 +2187,17 @@ function CanvasComponentsPanel({
         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" }),
+        /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
+          /* @__PURE__ */ jsx7("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 })
+        /* @__PURE__ */ jsx7("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(
+  return /* @__PURE__ */ jsxs7("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    search ? /* @__PURE__ */ jsx7(
       "input",
       {
         type: "search",
@@ -1985,11 +2207,11 @@ function CanvasComponentsPanel({
         onInput: (e) => setQuery(e.target.value)
       }
     ) : null,
-    shownSets.map((set) => /* @__PURE__ */ jsxs6("div", { "data-component-set": set.id, className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+    shownSets.map((set) => /* @__PURE__ */ jsxs7("div", { "data-component-set": set.id, className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
         item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
-        components ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-          /* @__PURE__ */ jsx6(
+        components ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2001,7 +2223,7 @@ function CanvasComponentsPanel({
               children: "+\xA0Variant"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2016,8 +2238,8 @@ function CanvasComponentsPanel({
           )
         ] }) : null
       ] }),
-      components && propsOpen === set.id ? /* @__PURE__ */ jsx6("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ jsxs6("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx6(
+      components && propsOpen === set.id ? /* @__PURE__ */ jsx7("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ jsxs7("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx7(
           InlineField,
           {
             value: option.name,
@@ -2025,7 +2247,7 @@ function CanvasComponentsPanel({
             onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
           }
         ),
-        /* @__PURE__ */ jsx6("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ jsx7(
           InlineField,
           {
             value,
@@ -2035,8 +2257,8 @@ function CanvasComponentsPanel({
           value
         )) })
       ] }, option.name)) }) : null,
-      /* @__PURE__ */ jsx6("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ jsxs6("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx7("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ jsxs7("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
           item(
             v.id,
             v.name,
@@ -2047,7 +2269,7 @@ function CanvasComponentsPanel({
               setMenuFor(v.id);
             } : void 0
           ),
-          components ? /* @__PURE__ */ jsx6(
+          components ? /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2061,8 +2283,8 @@ function CanvasComponentsPanel({
             }
           ) : null
         ] }),
-        components && menuFor === v.id ? /* @__PURE__ */ jsxs6("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
-          /* @__PURE__ */ jsx6(
+        components && menuFor === v.id ? /* @__PURE__ */ jsxs7("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2076,7 +2298,7 @@ function CanvasComponentsPanel({
               children: "Edit values\u2026"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2090,7 +2312,7 @@ function CanvasComponentsPanel({
               children: "Duplicate"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -2107,7 +2329,7 @@ function CanvasComponentsPanel({
             }
           )
         ] }) : null,
-        components && editing === v.id ? /* @__PURE__ */ jsxs6(
+        components && editing === v.id ? /* @__PURE__ */ jsxs7(
           "form",
           {
             "data-variant-editor": v.id,
@@ -2121,9 +2343,9 @@ function CanvasComponentsPanel({
               if (report(components.setVariantProperties(values, v.id))) setEditing(null);
             },
             children: [
-              set.options.map((option) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx6("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
-                /* @__PURE__ */ jsx6(
+              set.options.map((option) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx7("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ jsx7(
                   "input",
                   {
                     type: "text",
@@ -2134,9 +2356,9 @@ function CanvasComponentsPanel({
                   }
                 )
               ] }, option.name)),
-              /* @__PURE__ */ jsxs6("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ jsx6("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
-                /* @__PURE__ */ jsx6("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
+              /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx7("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
+                /* @__PURE__ */ jsx7("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
               ] })
             ]
           }
@@ -2144,7 +2366,7 @@ function CanvasComponentsPanel({
       ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    all.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2163,27 +2385,27 @@ function CanvasInstanceInspector({
   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
+  return /* @__PURE__ */ jsxs7("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx7("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
+      info.nested ? /* @__PURE__ */ jsx7("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(
+    info.variantOptions.map((option) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
+      /* @__PURE__ */ jsx7("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
+      /* @__PURE__ */ jsx7(
         "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))
+          children: option.values.map((v) => /* @__PURE__ */ jsx7("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(
+    info.properties.map((p) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
+      /* @__PURE__ */ jsx7("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
+      p.type === "boolean" ? /* @__PURE__ */ jsx7("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ jsx7(
         "input",
         {
           type: "text",
@@ -2198,22 +2420,22 @@ function CanvasInstanceInspector({
           }
         },
         String(p.value)
-      ) : /* @__PURE__ */ jsx6(
+      ) : /* @__PURE__ */ jsx7(
         "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))
+          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ jsx7("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(
+    info.overrides.length ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
+      /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: "Overrides" }),
+      info.overrides.map((o) => /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
+        /* @__PURE__ */ jsx7("span", { className: "mr-1 truncate", children: o.name }),
+        o.groups.map((g) => /* @__PURE__ */ jsxs7(
           "button",
           {
             type: "button",
@@ -2230,11 +2452,11 @@ function CanvasInstanceInspector({
         ))
       ] }, 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(
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-1", children: [
+      linked ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2245,8 +2467,8 @@ function CanvasInstanceInspector({
             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(
+      ] }) : /* @__PURE__ */ jsx7("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -2296,7 +2518,19 @@ import {
   isCanvasComponentSet,
   isCanvasInstance,
   wouldCreateComponentCycle,
-  CANVAS_COMPONENT_DRAG_TYPE as CANVAS_COMPONENT_DRAG_TYPE2
+  CANVAS_COMPONENT_DRAG_TYPE as CANVAS_COMPONENT_DRAG_TYPE2,
+  createCanvasDrawController as createCanvasDrawController2,
+  createDefaultStrokeStyle,
+  findStrokesAtPoint,
+  streamlinePoints,
+  strokePointsToPathData as strokePointsToPathData2,
+  strokeToShapeNode,
+  CANVAS_GRADIENT_PRESETS,
+  isCanvasGradient,
+  parseCssGradient,
+  resolveCanvasGradient as resolveCanvasGradient2,
+  angleToSvgLinearCoords,
+  gradientToSvgDef as gradientToSvgDef2
 } from "@pixerate/editor/canvas";
 export {
   ANIMATABLE_PROPERTIES,
@@ -2310,12 +2544,14 @@ export {
   AnimationPlayer,
   AnimationTimeline,
   CANVAS_COMPONENT_DRAG_TYPE2 as CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CSS_ANIMATION_PROPERTIES,
   CUBIC_BEZIER_PRESETS,
   CanvasComponentsPanel,
+  CanvasDrawLayer,
   CanvasGuidesLayer,
   CanvasInstanceInspector,
   CanvasScenesStore2 as CanvasScenesStore,
@@ -2335,6 +2571,7 @@ export {
   addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
+  angleToSvgLinearCoords,
   animateNode,
   applyAnimation,
   applyAnimationOverrides,
@@ -2375,8 +2612,10 @@ export {
   createCanvasAutoLayoutController2 as createCanvasAutoLayoutController,
   createCanvasComponent,
   createCanvasComponentsController2 as createCanvasComponentsController,
+  createCanvasDrawController2 as createCanvasDrawController,
   createCanvasInstance,
   createCanvasScenesStore,
+  createDefaultStrokeStyle,
   createFanOutTrajectory2 as createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
@@ -2404,6 +2643,7 @@ export {
   excludePaths,
   exportCssAnimation,
   findConnectorSnap,
+  findStrokesAtPoint,
   fitCubicRun,
   fitCubics,
   fitFreehandPath,
@@ -2453,6 +2693,7 @@ export {
   getTimelineTicks2 as getTimelineTicks,
   getTokenPropertyScope,
   getTokensForProperty2 as getTokensForProperty,
+  gradientToSvgDef2 as gradientToSvgDef,
   handlePoint,
   hasVisibleStroke,
   inferResizeHandle,
@@ -2467,6 +2708,7 @@ export {
   isAutoLayoutFrame,
   isCanvasComponent,
   isCanvasComponentSet,
+  isCanvasGradient,
   isCanvasInstance,
   isCssExportExact,
   isEventFromTextInput3 as isEventFromTextInput,
@@ -2514,6 +2756,7 @@ export {
   parseCanvasClipboardData2 as parseCanvasClipboardData,
   parseCanvasScenes,
   parseCssEasing,
+  parseCssGradient,
   parseKeyframeClipboard,
   parseOklab,
   parseSvgPath,
@@ -2545,6 +2788,7 @@ export {
   repositionNodesTo,
   resetCanvasInstanceOverrides,
   resizeHandleAxes,
+  resolveCanvasGradient2 as resolveCanvasGradient,
   resolveCanvasTokens2 as resolveCanvasTokens,
   resolveEasing,
   resolvePadding,
@@ -2577,7 +2821,10 @@ export {
   snapTimeToFrame,
   snapToGrid,
   springAt,
+  streamlinePoints,
   strokeOutlineRings,
+  strokePointsToPathData2 as strokePointsToPathData,
+  strokeToShapeNode,
   subtractPaths,
   subtractPolygons,
   swapCanvasInstance,
@@ -2600,6 +2847,7 @@ export {
   useCanvasClipboard,
   useCanvasComponents,
   useCanvasDocking,
+  useCanvasDraw,
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,