@pixerate/editor-react 0.80.0 → 0.82.0

package/dist/canvas/index.js

@@ -1,3 +1,10 @@
+import {
+  EffectParameters,
+  EffectsBrowser,
+  useEffectDescription
+} from "../chunk-WOQ3H7KA.js";
+import "../chunk-ZQZAKUUM.js";
+
 // src/canvas/AgentPresenceLayer.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function AgentPresenceLayer({ presences, className = "" }) {
@@ -832,7 +839,8 @@ function useCanvasArrangeShortcuts(options) {
 import { useMemo as useMemo2, useRef as useRef6, useSyncExternalStore } from "react";
 import {
   CanvasScenesStore,
-  fitViewportToNodes
+  fitViewportToNodes,
+  transitionCanvasView
 } from "@pixerate/editor/canvas";
 function useCanvasScenes(options = {}) {
   const optionsRef = useRef6(options);
@@ -847,9 +855,13 @@ function useCanvasScenes(options = {}) {
   );
   const actions = useMemo2(() => {
     const show = (scene) => {
-      if (scene) {
-        optionsRef.current.setViewport?.(scene.viewport, { duration: optionsRef.current.duration ?? 300 });
-      }
+      if (!scene) return scene;
+      const o = optionsRef.current;
+      const provider = o.transitions?.provider;
+      const element = o.transitions?.element();
+      if (scene.transition && provider && element) {
+        void transitionCanvasView({ provider, transition: scene.transition, element, jump: () => o.setViewport?.(scene.viewport, { duration: 0 }) });
+      } else o.setViewport?.(scene.viewport, { duration: o.duration ?? 300 });
       return scene;
     };
     return {
@@ -1338,7 +1350,7 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/ShapeNode.tsx
-import { getShapeRenderData, isShapeDescription } from "@pixerate/editor/canvas";
+import { getShapeRenderData, isShapeDescription as isShapeDescription2 } from "@pixerate/editor/canvas";
 
 // src/canvas/useShapeBrushstroke.tsx
 import { createContext, useContext, useEffect as useEffect7, useMemo as useMemo6, useState as useState6 } from "react";
@@ -1397,14 +1409,159 @@ function useCanvasBrushes() {
   return useMemo6(() => state, [state]);
 }
 
+// src/canvas/CanvasEffects.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef11, useState as useState7 } from "react";
+import {
+  createCanvasEffectsController,
+  createCanvasEffectsToolProvider,
+  isShapeDescription,
+  runCanvasNodeEffect
+} from "@pixerate/editor/canvas";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var ProviderContext = createContext2(null);
+function CanvasEffectsProvider({ provider, children }) {
+  return /* @__PURE__ */ jsx5(ProviderContext.Provider, { value: provider ?? null, children });
+}
+var useCanvasEffectsProviderContext = () => useContext2(ProviderContext);
+function CanvasNodeEffectLayer({ effect, width, height, clipPath, clipTransform }) {
+  const provider = useCanvasEffectsProviderContext();
+  const ref = useRef11(null);
+  const [failed, setFailed] = useState7(false);
+  const dpr = typeof window !== "undefined" ? Math.min(2, window.devicePixelRatio || 1) : 1;
+  const pw = Math.max(1, Math.round(width * dpr));
+  const ph = Math.max(1, Math.round(height * dpr));
+  const key = JSON.stringify(effect);
+  useEffect8(() => {
+    const canvas2 = ref.current;
+    if (!provider || !canvas2) return;
+    setFailed(false);
+    const run = runCanvasNodeEffect({ provider, effect, target: canvas2, onError: () => setFailed(true) });
+    return () => run.stop();
+  }, [provider, key, pw, ph]);
+  const clipId = useMemo7(() => `pixerate-effect-clip-${Math.random().toString(36).slice(2)}`, []);
+  if (!provider || failed || !(width > 0 && height > 0)) return null;
+  const style = { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", opacity: effect.opacity ?? 1 };
+  const canvas = /* @__PURE__ */ jsx5("canvas", { ref, width: pw, height: ph, style: { width: "100%", height: "100%", display: "block" }, "data-canvas-effect": effect.effect });
+  if (effect.mode === "overlay" || !clipPath) return /* @__PURE__ */ jsx5("div", { style, children: canvas });
+  return /* @__PURE__ */ jsxs4("svg", { style, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: clipId, children: /* @__PURE__ */ jsx5("path", { d: clipPath, transform: clipTransform }) }) }),
+    /* @__PURE__ */ jsx5("foreignObject", { x: 0, y: 0, width, height, clipPath: `url(#${clipId})`, children: canvas })
+  ] });
+}
+function useCanvasEffects(options) {
+  const opts = useRef11(options);
+  opts.current = options;
+  const controller = useMemo7(
+    () => createCanvasEffectsController({
+      getNodes: () => opts.current.getNodes(),
+      setNodes: (n) => opts.current.setNodes(n),
+      history: { execute: (c) => opts.current.history ? opts.current.history.execute(c) : c.execute() },
+      get scenes() {
+        return opts.current.scenes;
+      }
+    }),
+    []
+  );
+  useEffect8(() => {
+    if (!options.effects) return;
+    return controller.useEffects(options.effects);
+  }, [controller, options.effects]);
+  return controller;
+}
+function useCanvasEffectsTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly, subscribe } = options;
+  useEffect8(() => {
+    if (!registry) return;
+    return registry.register(createCanvasEffectsToolProvider(controller, { id, namespace, readOnly, subscribe }));
+  }, [registry, controller, id, namespace, readOnly, subscribe]);
+}
+var btn = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+function Controls({ controller, nodeId, effect }) {
+  const { description, error } = useEffectDescription(controller.effectsProvider, effect.effect);
+  const [message, setMessage] = useState7(null);
+  const run = (work) => void work.then(() => setMessage(null), (e) => setMessage(e instanceof Error ? e.message : String(e)));
+  if (error) return /* @__PURE__ */ jsx5("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ jsx5("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx5(
+      EffectParameters,
+      {
+        description,
+        values: effect.values,
+        onChange: (k, v) => run(controller.updateNodeEffect(nodeId, { values: { [k]: v } })),
+        onReset: (k) => run(controller.updateNodeEffect(nodeId, { values: { [k]: null } })),
+        onPreset: (v) => run(controller.updateNodeEffect(nodeId, { values: v }))
+      }
+    ),
+    message && /* @__PURE__ */ jsx5("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+function CanvasEffectsPanel({ controller, nodeId, shape, sceneId, className = "" }) {
+  const [, setTick] = useState7(0);
+  useEffect8(() => controller.effects.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const provider = controller.effectsProvider;
+  const [browse, setBrowse] = useState7(null);
+  const [message, setMessage] = useState7(null);
+  const run = (work) => {
+    setMessage(null);
+    Promise.resolve().then(work).then(() => setTick((n) => n + 1), (e) => setMessage(e instanceof Error ? e.message : String(e)));
+  };
+  const effect = isShapeDescription(shape) ? shape.effect : void 0;
+  const transition = sceneId ? controller.sceneTransition(sceneId) : void 0;
+  return /* @__PURE__ */ jsxs4("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Canvas effects", "data-canvas-effects": "", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx5("span", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn, disabled: !provider || !nodeId || !shape, "aria-pressed": browse === "fill", onClick: () => setBrowse(browse === "fill" ? null : "fill"), children: "Fill\u2026" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn, disabled: !provider || !nodeId || !shape, "aria-pressed": browse === "overlay", onClick: () => setBrowse(browse === "overlay" ? null : "overlay"), children: "Overlay\u2026" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn, disabled: !provider || !sceneId, "aria-pressed": browse === "transition", onClick: () => setBrowse(browse === "transition" ? null : "transition"), children: "Scene transition\u2026" })
+    ] }),
+    !provider && /* @__PURE__ */ jsx5("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effects on the canvas are kept." }),
+    browse === "fill" && nodeId && /* @__PURE__ */ jsx5(EffectsBrowser, { provider, uses: ["generator", "interactive"], title: "Fills", onPick: (e) => (setBrowse(null), run(() => controller.applyNodeEffect(nodeId, e.id, { mode: "fill" }))) }),
+    browse === "overlay" && nodeId && /* @__PURE__ */ jsx5(EffectsBrowser, { provider, uses: ["overlay", "title", "interactive", "generator"], title: "Overlays", onPick: (e) => (setBrowse(null), run(() => controller.applyNodeEffect(nodeId, e.id, { mode: "overlay" }))) }),
+    browse === "transition" && sceneId && /* @__PURE__ */ jsx5(EffectsBrowser, { provider, uses: ["transition"], title: "Transitions", onPick: (e) => (setBrowse(null), run(() => controller.setSceneTransition(sceneId, e.id))) }),
+    effect && nodeId && /* @__PURE__ */ jsxs4("div", { className: "space-y-1 rounded border border-border p-1", "data-canvas-node-effect": nodeId, children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1 truncate font-medium", children: [
+          effect.name ?? effect.effect,
+          " ",
+          /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
+            "\xB7 ",
+            effect.mode
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: effect.playing !== false, "aria-label": "Play", onChange: (e) => {
+            const playing = e.currentTarget.checked;
+            run(() => controller.updateNodeEffect(nodeId, { playing }));
+          } }),
+          " Play"
+        ] }),
+        /* @__PURE__ */ jsx5("button", { type: "button", className: btn, "aria-label": "Remove effect", onClick: () => run(() => controller.removeNodeEffect(nodeId)), children: "\u2715" })
+      ] }),
+      provider && /* @__PURE__ */ jsx5(Controls, { controller, nodeId, effect })
+    ] }),
+    sceneId && transition && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", "data-canvas-scene-transition": sceneId, children: [
+      /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1 truncate", children: [
+        "Into scene: ",
+        transition.name ?? transition.effect,
+        " (",
+        transition.duration ?? 600,
+        " ms)"
+      ] }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: btn, "aria-label": "Remove transition", onClick: () => run(() => controller.setSceneTransition(sceneId, null)), children: "\u2715" })
+    ] }),
+    message && /* @__PURE__ */ jsx5("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+
 // src/canvas/ShapeNode.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ShapeNode({ id, data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
-  const brushImage = useShapeBrushstroke(isShapeDescription(shape) ? shape : null, width, height);
-  if (!isShapeDescription(shape)) return null;
+  const brushImage = useShapeBrushstroke(isShapeDescription2(shape) ? shape : null, width, height);
+  if (!isShapeDescription2(shape)) return null;
   const render = getShapeRenderData(shape, { width, height }, { id: id || data?.id });
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: `pixerate-shape-node ${className}`.trim(),
@@ -1412,7 +1569,7 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "svg",
           {
             viewBox: render.viewBox,
@@ -1422,13 +1579,13 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
             style: { display: "block", overflow: "visible" },
             "aria-hidden": "true",
             children: [
-              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ jsxs4("defs", { children: [
-                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ jsx5("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ jsx5("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ jsx5("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ jsx5("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ jsx5("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ jsx5("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ jsx5("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ jsx5("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
+              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ jsxs5("defs", { children: [
+                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ jsx6("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ jsx6("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ jsx6("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ jsx6("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ jsx6("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ jsx6("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ jsx6("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ jsx6("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
               ] }),
-              brushImage ? /* @__PURE__ */ jsx5("g", { transform: render.transform, children: /* @__PURE__ */ jsx5(
+              brushImage ? /* @__PURE__ */ jsx6("g", { transform: render.transform, children: /* @__PURE__ */ jsx6(
                 "image",
                 {
                   className: "pixerate-shape-brushstroke",
@@ -1440,7 +1597,7 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
                   preserveAspectRatio: "none",
                   opacity: render.opacity
                 }
-              ) }) : /* @__PURE__ */ jsx5(
+              ) }) : /* @__PURE__ */ jsx6(
                 "path",
                 {
                   d: render.d,
@@ -1458,6 +1615,7 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
             ]
           }
         ),
+        shape.effect && width && height ? /* @__PURE__ */ jsx6(CanvasNodeEffectLayer, { effect: shape.effect, width, height, clipPath: render.d, clipTransform: render.transform }) : null,
         children
       ]
     }
@@ -1477,7 +1635,7 @@ import {
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   SHAPE_KINDS,
-  isShapeDescription as isShapeDescription2,
+  isShapeDescription as isShapeDescription3,
   shapeToPolygon,
   getShapeSvg,
   getShapeRenderData as getShapeRenderData2,
@@ -1591,17 +1749,17 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAutoLayout.ts
-import { useLayoutEffect, useMemo as useMemo7, useRef as useRef11, useState as useState7 } from "react";
+import { useLayoutEffect, useMemo as useMemo8, useRef as useRef12, useState as useState8 } from "react";
 import {
   createCanvasAutoLayoutController
 } from "@pixerate/editor/canvas";
 function useCanvasAutoLayout(options) {
-  const [guides, setGuides] = useState7([]);
-  const nodesRef = useRef11(options.nodes);
+  const [guides, setGuides] = useState8([]);
+  const nodesRef = useRef12(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef11(options);
+  const optionsRef = useRef12(options);
   optionsRef.current = options;
-  const controller = useMemo7(
+  const controller = useMemo8(
     () => createCanvasAutoLayoutController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1630,7 +1788,7 @@ function useCanvasAutoLayout(options) {
   useLayoutEffect(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return useMemo7(
+  return useMemo8(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1644,7 +1802,7 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.ts
-import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef12, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useRef as useRef13, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   bindCanvasToken,
   detachTokenBindings,
@@ -1655,10 +1813,10 @@ import {
 function useCanvasTokens(options) {
   const { store, nodes, setNodes, modes, properties } = options;
   const state = useSyncExternalStore2(store.subscribe, store.getState, store.getState);
-  const latest = useRef12({ nodes, setNodes, modes, properties });
+  const latest = useRef13({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
-  useEffect8(
+  useEffect9(
     () => store.subscribe((event) => {
       if (event.deletedVariableIds.length === 0) return;
       latest.current.setNodes((prev) => detachTokenBindings(prev, event.previous, event.deletedVariableIds, opts()));
@@ -1667,7 +1825,7 @@ function useCanvasTokens(options) {
     [store]
   );
   const modesKey = JSON.stringify(modes ?? {});
-  useEffect8(() => {
+  useEffect9(() => {
     const next = resolveCanvasTokens(nodes, state, opts());
     if (next !== nodes) setNodes(next);
   }, [nodes, state, modesKey, properties]);
@@ -1709,7 +1867,7 @@ import {
   getTokensForProperty
 } from "@pixerate/editor/canvas";
 import { getCurrentMode, resolveToken } from "@pixerate/editor/tokens";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function TokenBindingPicker({
   state,
   nodes,
@@ -1726,15 +1884,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__ */ jsxs5("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+  return /* @__PURE__ */ jsxs6("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__ */ jsxs5("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
-        /* @__PURE__ */ jsx6("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
-        /* @__PURE__ */ jsxs5(
+      return /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ jsx7("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ jsxs6(
           "select",
           {
             "aria-label": `${property.label} variable`,
@@ -1749,11 +1907,11 @@ function TokenBindingPicker({
               }
             },
             children: [
-              value === "__mixed" ? /* @__PURE__ */ jsx6("option", { value: "__mixed", children: "Mixed" }) : null,
-              /* @__PURE__ */ jsx6("option", { value: "", children: "None" }),
+              value === "__mixed" ? /* @__PURE__ */ jsx7("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ jsx7("option", { value: "", children: "None" }),
               candidates.map((v) => {
                 const collection = state.collections.find((c) => c.id === v.collectionId);
-                return /* @__PURE__ */ jsxs5("option", { value: v.id, children: [
+                return /* @__PURE__ */ jsxs6("option", { value: v.id, children: [
                   v.name,
                   collection && state.collections.length > 1 ? ` (${collection.name})` : ""
                 ] }, v.id);
@@ -1761,17 +1919,17 @@ function TokenBindingPicker({
             ]
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ jsx7(
           "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__ */ jsx6("span", { title: resolved.message, children: "\u26A0" }) : null })
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ jsx7("span", { title: resolved.message, children: "\u26A0" }) : null })
       ] }, property.key);
     }),
-    state.collections.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+    state.collections.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
   ] });
 }
 function TokenModeSwitcher({
@@ -1789,12 +1947,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__ */ jsx6("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+  return /* @__PURE__ */ jsx7("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__ */ jsxs5("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
-      /* @__PURE__ */ jsx6("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
-      /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ jsx7("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ jsxs6(
         "select",
         {
           "aria-label": `${collection.name} mode`,
@@ -1802,12 +1960,12 @@ function TokenModeSwitcher({
           value: explicit,
           onChange: (e) => onChange(setCanvasTokenMode2(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
           children: [
-            /* @__PURE__ */ jsxs5("option", { value: "", children: [
+            /* @__PURE__ */ jsxs6("option", { value: "", children: [
               "Auto (",
               auto.name,
               ")"
             ] }),
-            collection.modes.map((m) => /* @__PURE__ */ jsx6("option", { value: m.id, children: m.name }, m.id))
+            collection.modes.map((m) => /* @__PURE__ */ jsx7("option", { value: m.id, children: m.name }, m.id))
           ]
         }
       )
@@ -1838,16 +1996,16 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAnimation.ts
-import { useEffect as useEffect9, useMemo as useMemo8, useRef as useRef13, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo9, useRef as useRef14, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   createCanvasAnimationController
 } from "@pixerate/editor/canvas";
 function useCanvasAnimation(options) {
-  const nodesRef = useRef13(options.nodes);
+  const nodesRef = useRef14(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef13(options);
+  const optionsRef = useRef14(options);
   optionsRef.current = options;
-  const controller = useMemo8(
+  const controller = useMemo9(
     () => createCanvasAnimationController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1874,14 +2032,14 @@ function useCanvasAnimation(options) {
     }),
     []
   );
-  useEffect9(() => () => controller.destroy(), [controller]);
-  useEffect9(() => {
+  useEffect10(() => () => controller.destroy(), [controller]);
+  useEffect10(() => {
     if (options.loop !== void 0) controller.setLoop(options.loop);
   }, [controller, options.loop]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
   }, [controller, options.playbackRate]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (options.recording !== void 0) controller.setRecording(options.recording);
   }, [controller, options.recording]);
   const state = useSyncExternalStore3(
@@ -1889,11 +2047,11 @@ function useCanvasAnimation(options) {
     () => controller.getState(),
     () => controller.getState()
   );
-  useEffect9(() => {
+  useEffect10(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = useMemo8(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return useMemo8(
+  const displayNodes = useMemo9(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return useMemo9(
     () => ({
       ...controller,
       state,
@@ -1914,7 +2072,7 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-import { useEffect as useEffect10, useRef as useRef14 } from "react";
+import { useEffect as useEffect11, useRef as useRef15 } from "react";
 import {
   ANIMATION_EASING_LABELS,
   ANIMATION_EASING_PRESETS,
@@ -1923,7 +2081,7 @@ import {
   timeToX,
   xToTime
 } from "@pixerate/editor/canvas";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } 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 = "" }) {
@@ -1937,8 +2095,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 = useRef14(null);
-  useEffect10(() => {
+  const dragRef = useRef15(null);
+  useEffect11(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
         dragRef.current = null;
@@ -1991,17 +2149,17 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
       animation.deleteKeyframes();
     }
   };
-  const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50";
+  const btn2 = "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__ */ 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__ */ jsx7("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__ */ jsx7(
+  return /* @__PURE__ */ jsxs7("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
+      /* @__PURE__ */ jsx8("button", { type: "button", className: btn2, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
-          className: `${btn} ${state.recording ? "text-red-500" : ""}`,
+          className: `${btn2} ${state.recording ? "text-red-500" : ""}`,
           "data-action": "record",
           "aria-pressed": state.recording,
           "aria-label": "Record keyframes",
@@ -2009,13 +2167,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           children: "\u25CF Rec"
         }
       ),
-      /* @__PURE__ */ jsx7("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: [
+      /* @__PURE__ */ jsx8("button", { type: "button", className: btn2, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
+      /* @__PURE__ */ jsxs7("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
         formatAnimationTime(state.time),
         " / ",
         formatAnimationTime(duration)
       ] }),
-      /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsxs7(
         "select",
         {
           "aria-label": "Easing",
@@ -2025,13 +2183,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__ */ jsx7("option", { value: "", children: "Easing\u2026" }),
-            ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ jsx7("option", { value: preset, children: ANIMATION_EASING_LABELS[preset] }, preset)),
-            selectedEasing === "custom" ? /* @__PURE__ */ jsx7("option", { value: "custom", children: "Custom" }) : null
+            /* @__PURE__ */ jsx8("option", { value: "", children: "Easing\u2026" }),
+            ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ jsx8("option", { value: preset, children: ANIMATION_EASING_LABELS[preset] }, preset)),
+            selectedEasing === "custom" ? /* @__PURE__ */ jsx8("option", { value: "custom", children: "Custom" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "select",
         {
           "aria-label": "Loop",
@@ -2039,13 +2197,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__ */ jsx7("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
+          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ jsx8("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx7("div", { style: { width: labelWidth }, className: "shrink-0" }),
-      /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs7("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx8("div", { style: { width: labelWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ jsxs7(
         "div",
         {
           "data-timeline-ruler": "",
@@ -2053,15 +2211,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           style: { width },
           onPointerDown: onRulerDown,
           children: [
-            ticks.map((tick) => /* @__PURE__ */ jsx7("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
-            /* @__PURE__ */ jsx7("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
+            ticks.map((tick) => /* @__PURE__ */ jsx8("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
+            /* @__PURE__ */ jsx8("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
           ]
         }
       )
     ] }),
-    rows.length === 0 ? /* @__PURE__ */ jsx7("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__ */ jsx7(
+    rows.length === 0 ? /* @__PURE__ */ jsx8("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__ */ jsxs7("div", { className: "flex items-center", "data-track": row.id, children: [
+      /* @__PURE__ */ jsxs7("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "checkbox",
@@ -2070,15 +2228,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
             onChange: (e) => animation.setTrackEnabled(row.nodeId, row.property, e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsxs6("span", { className: "truncate", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
           rows.filter((r) => r.nodeId === row.nodeId).length < rows.length ? `${row.nodeLabel} \xB7 ` : "",
           row.label
         ] })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
-        /* @__PURE__ */ jsx7("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
-        state.drag?.target != null ? /* @__PURE__ */ jsx7("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__ */ jsx7(
+      /* @__PURE__ */ jsxs7("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
+        /* @__PURE__ */ jsx8("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
+        state.drag?.target != null ? /* @__PURE__ */ jsx8("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__ */ jsx8(
           "button",
           {
             type: "button",
@@ -2176,16 +2334,16 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasComponents.ts
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo9, useRef as useRef15 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo10, useRef as useRef16 } from "react";
 import {
   createCanvasComponentsController
 } from "@pixerate/editor/canvas";
 function useCanvasComponents(options) {
-  const nodesRef = useRef15(options.nodes);
+  const nodesRef = useRef16(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef15(options);
+  const optionsRef = useRef16(options);
   optionsRef.current = options;
-  const controller = useMemo9(
+  const controller = useMemo10(
     () => createCanvasComponentsController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -2221,15 +2379,15 @@ function useCanvasComponents(options) {
 }
 
 // src/canvas/CanvasComponentsPanel.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import {
   CANVAS_COMPONENT_DRAG_TYPE,
   inspectCanvasInstance,
   listCanvasComponents
 } from "@pixerate/editor/canvas";
-import { Fragment, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function InlineField({ value, label, onCommit }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "input",
     {
       type: "text",
@@ -2260,10 +2418,10 @@ function CanvasComponentsPanel({
   search = true,
   className = ""
 }) {
-  const [query, setQuery] = useState8("");
-  const [propsOpen, setPropsOpen] = useState8(null);
-  const [menuFor, setMenuFor] = useState8(null);
-  const [editing, setEditing] = useState8(null);
+  const [query, setQuery] = useState9("");
+  const [propsOpen, setPropsOpen] = useState9(null);
+  const [menuFor, setMenuFor] = useState9(null);
+  const [editing, setEditing] = useState9(null);
   const { components: all, sets } = listCanvasComponents(nodes);
   const q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
@@ -2275,7 +2433,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__ */ jsxs7(
+  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ jsxs8(
     "button",
     {
       type: "button",
@@ -2292,17 +2450,17 @@ function CanvasComponentsPanel({
         e.dataTransfer.effectAllowed = "copy";
       },
       children: [
-        /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
-          /* @__PURE__ */ jsx8("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
+        /* @__PURE__ */ jsxs8("span", { className: "truncate", children: [
+          /* @__PURE__ */ jsx9("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
           name
         ] }),
-        /* @__PURE__ */ jsx8("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
+        /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
       ]
     },
     id
   );
-  return /* @__PURE__ */ jsxs7("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
-    search ? /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    search ? /* @__PURE__ */ jsx9(
       "input",
       {
         type: "search",
@@ -2312,11 +2470,11 @@ function CanvasComponentsPanel({
         onInput: (e) => setQuery(e.target.value)
       }
     ) : null,
-    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: [
+    shownSets.map((set) => /* @__PURE__ */ jsxs8("div", { "data-component-set": set.id, className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs8("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__ */ jsxs7(Fragment, { children: [
-          /* @__PURE__ */ jsx8(
+        components ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -2328,7 +2486,7 @@ function CanvasComponentsPanel({
               children: "+\xA0Variant"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -2343,8 +2501,8 @@ function CanvasComponentsPanel({
           )
         ] }) : null
       ] }),
-      components && propsOpen === set.id ? /* @__PURE__ */ jsx8("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__ */ jsx8(
+      components && propsOpen === set.id ? /* @__PURE__ */ jsx9("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__ */ jsxs8("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx9(
           InlineField,
           {
             value: option.name,
@@ -2352,7 +2510,7 @@ function CanvasComponentsPanel({
             onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
           }
         ),
-        /* @__PURE__ */ jsx8("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ jsx9(
           InlineField,
           {
             value,
@@ -2362,8 +2520,8 @@ function CanvasComponentsPanel({
           value
         )) })
       ] }, option.name)) }) : null,
-      /* @__PURE__ */ jsx8("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: [
+      /* @__PURE__ */ jsx9("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ jsxs8("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1", children: [
           item(
             v.id,
             v.name,
@@ -2374,7 +2532,7 @@ function CanvasComponentsPanel({
               setMenuFor(v.id);
             } : void 0
           ),
-          components ? /* @__PURE__ */ jsx8(
+          components ? /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -2388,8 +2546,8 @@ function CanvasComponentsPanel({
             }
           ) : null
         ] }),
-        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__ */ jsx8(
+        components && menuFor === v.id ? /* @__PURE__ */ jsxs8("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__ */ jsx9(
             "button",
             {
               type: "button",
@@ -2403,7 +2561,7 @@ function CanvasComponentsPanel({
               children: "Edit values\u2026"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -2417,7 +2575,7 @@ function CanvasComponentsPanel({
               children: "Duplicate"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -2434,7 +2592,7 @@ function CanvasComponentsPanel({
             }
           )
         ] }) : null,
-        components && editing === v.id ? /* @__PURE__ */ jsxs7(
+        components && editing === v.id ? /* @__PURE__ */ jsxs8(
           "form",
           {
             "data-variant-editor": v.id,
@@ -2448,9 +2606,9 @@ function CanvasComponentsPanel({
               if (report(components.setVariantProperties(values, v.id))) setEditing(null);
             },
             children: [
-              set.options.map((option) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx8("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
-                /* @__PURE__ */ jsx8(
+              set.options.map((option) => /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx9("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ jsx9(
                   "input",
                   {
                     type: "text",
@@ -2461,9 +2619,9 @@ function CanvasComponentsPanel({
                   }
                 )
               ] }, option.name)),
-              /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ jsx8("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
-                /* @__PURE__ */ jsx8("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
+              /* @__PURE__ */ jsxs8("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx9("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
+                /* @__PURE__ */ jsx9("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
               ] })
             ]
           }
@@ -2471,7 +2629,7 @@ function CanvasComponentsPanel({
       ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    all.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2489,28 +2647,28 @@ function CanvasInstanceInspector({
   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__ */ 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__ */ jsx8("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
-      info.nested ? /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: "Nested" }) : null
+  const btn2 = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40";
+  return /* @__PURE__ */ jsxs8("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx9("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
+      info.nested ? /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: "Nested" }) : null
     ] }),
-    info.variantOptions.map((option) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
-      /* @__PURE__ */ jsx8("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
-      /* @__PURE__ */ jsx8(
+    info.variantOptions.map((option) => /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
+      /* @__PURE__ */ jsx9("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
+      /* @__PURE__ */ jsx9(
         "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__ */ jsx8("option", { value: v, children: v }, v))
+          children: option.values.map((v) => /* @__PURE__ */ jsx9("option", { value: v, children: v }, v))
         }
       )
     ] }, option.name)),
-    info.properties.map((p) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
-      /* @__PURE__ */ jsx8("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
-      p.type === "boolean" ? /* @__PURE__ */ jsx8("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ jsx8(
+    info.properties.map((p) => /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
+      /* @__PURE__ */ jsx9("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
+      p.type === "boolean" ? /* @__PURE__ */ jsx9("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ jsx9(
         "input",
         {
           type: "text",
@@ -2525,22 +2683,22 @@ function CanvasInstanceInspector({
           }
         },
         String(p.value)
-      ) : /* @__PURE__ */ jsx8(
+      ) : /* @__PURE__ */ jsx9(
         "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__ */ jsx8("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__ */ jsx9("option", { value: c.id, children: c.name }, c.id))
         }
       )
     ] }, p.name)),
-    info.overrides.length ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
-      /* @__PURE__ */ jsx8("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__ */ jsx8("span", { className: "mr-1 truncate", children: o.name }),
-        o.groups.map((g) => /* @__PURE__ */ jsxs7(
+    info.overrides.length ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
+      /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: "Overrides" }),
+      info.overrides.map((o) => /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
+        /* @__PURE__ */ jsx9("span", { className: "mr-1 truncate", children: o.name }),
+        o.groups.map((g) => /* @__PURE__ */ jsxs8(
           "button",
           {
             type: "button",
@@ -2557,27 +2715,27 @@ function CanvasInstanceInspector({
         ))
       ] }, o.id))
     ] }) : null,
-    /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-1", children: [
-      linked ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-        /* @__PURE__ */ jsx8("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
-        /* @__PURE__ */ jsx8("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
-        /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap gap-1", children: [
+      linked ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        /* @__PURE__ */ jsx9("button", { type: "button", className: btn2, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
+        /* @__PURE__ */ jsx9("button", { type: "button", className: btn2, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
-            className: btn,
+            className: btn2,
             "data-action": "push",
             disabled: info.overrides.length === 0,
             onClick: () => report(components.pushOverrides(info.rootId)),
             children: "Push changes"
           }
         )
-      ] }) : /* @__PURE__ */ jsx8("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
-      /* @__PURE__ */ jsx8(
+      ] }) : /* @__PURE__ */ jsx9("button", { type: "button", className: btn2, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
-          className: btn,
+          className: btn2,
           "data-action": "detach",
           disabled: info.nested,
           title: info.nested ? "Detach the outer instance first" : void 0,
@@ -2635,6 +2793,7 @@ import {
   isBrushedShape as isBrushedShape2,
   listCanvasBrushes as listCanvasBrushes2,
   validateCanvasBrush,
+  validateCanvasBrushPaint,
   renderShapeBrushstroke as renderShapeBrushstroke2,
   getBrushedShapeSvg,
   loadCanvasBrushstrokeRenderer,
@@ -2652,7 +2811,7 @@ import {
 // src/canvas/MermaidFamilyScene.tsx
 import { useId } from "react";
 import { diagramTextBaseline } from "@pixerate/editor/canvas";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function MermaidFamilyScene({
   scene,
   padding = 16,
@@ -2683,7 +2842,7 @@ function MermaidFamilyScene({
     cursor: "pointer"
   } : { pointerEvents: "none" };
   const stroke = (mark) => mark.selected ? { stroke: selectionColor, strokeWidth: Math.max(2, mark.strokeWidth ?? 0) } : { stroke: mark.stroke, strokeWidth: mark.strokeWidth };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     {
       className: `pixerate-diagram-scene ${className}`.trim(),
@@ -2696,15 +2855,15 @@ function MermaidFamilyScene({
       style: { display: "block", maxWidth: "100%", height: "auto", overflow: "visible", ...style },
       onClick: interactive ? (event) => onSelect?.(null, event) : void 0,
       children: [
-        /* @__PURE__ */ jsxs8("defs", { children: [
-          /* @__PURE__ */ jsx9("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx9("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
-          /* @__PURE__ */ jsx9("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx9("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
+        /* @__PURE__ */ jsxs9("defs", { children: [
+          /* @__PURE__ */ jsx10("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx10("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
+          /* @__PURE__ */ jsx10("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx10("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
         ] }),
         scene.marks.map((mark) => {
           const common = { "data-role": mark.role, "data-target": mark.target, "data-selected": mark.selected ? "" : void 0, opacity: mark.opacity, ...handlers(mark) };
           switch (mark.kind) {
             case "rect":
-              return /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsx10(
                 "rect",
                 {
                   ...common,
@@ -2719,9 +2878,9 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "circle":
-              return /* @__PURE__ */ jsx9("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
+              return /* @__PURE__ */ jsx10("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
             case "line":
-              return /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsx10(
                 "line",
                 {
                   ...common,
@@ -2737,7 +2896,7 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "path":
-              return /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsx10(
                 "path",
                 {
                   ...common,
@@ -2751,7 +2910,7 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "text":
-              return /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsx10(
                 "text",
                 {
                   ...common,
@@ -2779,7 +2938,7 @@ function MermaidFamilyScene({
 }
 
 // src/canvas/useMermaidDiagram.ts
-import { useEffect as useEffect11, useMemo as useMemo10, useRef as useRef16, useState as useState9, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo11, useRef as useRef17, useState as useState10, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   DiagramController
 } from "@pixerate/editor/diagram";
@@ -2797,7 +2956,7 @@ function useDiagramState(controller) {
   return useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
 }
 function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
-  const own = useRef16(null);
+  const own = useRef17(null);
   let controller;
   if (controllerOrOptions instanceof DiagramController) controller = controllerOrOptions;
   else {
@@ -2807,19 +2966,19 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
   const layoutOptions = (controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.layoutOptions) ?? view.layoutOptions;
   const sceneTheme = (controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.sceneTheme) ?? view.sceneTheme;
   const state = useDiagramState(controller);
-  const canvas = useMemo10(
+  const canvas = useMemo11(
     () => mermaidToCanvas(state.document, { ...layoutOptions, editable: state.editable }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, state.editable]
   );
-  const scene = useMemo10(
+  const scene = useMemo11(
     () => state.document.tier === "editable" ? familySceneFromLayout(state.document.family, state.document.graph, canvas.layout, { theme: { ...CSS_VARIABLE_DIAGRAM_SCENE_THEME, ...sceneTheme }, selection: state.selection }) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, canvas.layout, state.selection]
   );
-  const layoutRef = useRef16(canvas.layout);
+  const layoutRef = useRef17(canvas.layout);
   layoutRef.current = canvas.layout;
-  const actions = useMemo10(
+  const actions = useMemo11(
     () => ({
       apply: (ops, label) => controller.apply(ops, label),
       load: (source, options) => controller.load(source, options),
@@ -2856,13 +3015,13 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
 }
 function useMermaidStream(source, options = {}) {
   const { complete = false, duration = 300, ...layoutOptions } = options;
-  const stream = useRef16(null);
+  const stream = useRef17(null);
   if (!stream.current) stream.current = new DiagramStream(layoutOptions);
-  const result = useMemo10(() => stream.current.update(source, complete), [source, complete]);
-  const [shown, setShown] = useState9({ layout: result.layout, settled: true });
-  const shownRef = useRef16(shown.layout);
+  const result = useMemo11(() => stream.current.update(source, complete), [source, complete]);
+  const [shown, setShown] = useState10({ layout: result.layout, settled: true });
+  const shownRef = useRef17(shown.layout);
   shownRef.current = shown.layout;
-  useEffect11(() => {
+  useEffect12(() => {
     const target = result.layout;
     if (!target) return setShown({ layout: null, settled: true });
     const from = shownRef.current;
@@ -2879,7 +3038,7 @@ function useMermaidStream(source, options = {}) {
     return () => cancelAnimationFrame(frame);
   }, [result.layout, duration]);
   const doc = result.document.tier === "editable" ? result.document : null;
-  const canvas = useMemo10(() => {
+  const canvas = useMemo11(() => {
     if (!doc || !shown.layout) return { nodes: [], edges: [] };
     const placed = new Set(Object.keys(shown.layout.positions));
     const graph = {
@@ -2895,7 +3054,7 @@ function useMermaidStream(source, options = {}) {
 
 // src/canvas/MermaidDiagramNode.tsx
 import { MERMAID_SHAPE_PAINT, mermaidLabelLines, mermaidNodeMembers, mermaidNodePaint, mermaidShapePaths } from "@pixerate/editor/canvas";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function mermaidNodeStyle(styles = {}, selected = false) {
   const paint = mermaidNodePaint(styles, selected);
   const { color, "stroke-width": strokeWidth, "stroke-dasharray": strokeDasharray, ...vars } = paint;
@@ -2905,7 +3064,7 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
   const node = data.node;
   if (!node) return null;
   const members = mermaidNodeMembers(node.data);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: `pixerate-diagram-node ${className}`.trim(),
@@ -2913,14 +3072,14 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%", ...mermaidNodeStyle(data.resolvedStyles, selected) },
       children: [
-        /* @__PURE__ */ jsx10("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: mermaidShapePaths(node.shape, width, height).map((path, i) => /* @__PURE__ */ jsx10("path", { d: path.d, style: { ...MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsx11("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: mermaidShapePaths(node.shape, width, height).map((path, i) => /* @__PURE__ */ jsx11("path", { d: path.d, style: { ...MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__PURE__ */ jsxs10(
           "div",
           {
             style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: members.length ? "flex-start" : "center", height: "100%", padding: "6px 10px", boxSizing: "border-box", fontSize: 13, lineHeight: 1.3, textAlign: "center", pointerEvents: "none" },
             children: [
-              mermaidLabelLines(node.label).map((line, i) => /* @__PURE__ */ jsx10("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
-              members.length > 0 && /* @__PURE__ */ jsx10("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ jsx10("div", { children: m }, i)) })
+              mermaidLabelLines(node.label).map((line, i) => /* @__PURE__ */ jsx11("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              members.length > 0 && /* @__PURE__ */ jsx11("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ jsx11("div", { children: m }, i)) })
             ]
           }
         ),
@@ -2932,7 +3091,7 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
 function MermaidDiagramGroup({ data, selected, className = "", children }) {
   const group = data.group;
   if (!group) return null;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: `pixerate-diagram-group ${className}`.trim(),
@@ -2947,7 +3106,7 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
         color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
       },
       children: [
-        /* @__PURE__ */ jsx10("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
+        /* @__PURE__ */ jsx11("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
         children
       ]
     }
@@ -2955,29 +3114,29 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
 }
 
 // src/canvas/MermaidThumbnail.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { parseMermaid } from "@pixerate/editor/diagram";
 import { mermaidThumbnailSvg } from "@pixerate/editor/canvas";
-import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
 function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
-  const doc = useMemo11(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
+  const doc = useMemo12(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
   const key = JSON.stringify(options);
-  const drawn = useMemo11(
+  const drawn = useMemo12(
     () => doc.tier === "editable" && doc.graph.nodes.length ? mermaidThumbnailSvg(doc, options) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [doc, key]
   );
-  if (!drawn) return /* @__PURE__ */ jsx11(Fragment2, { children: fallback });
-  return /* @__PURE__ */ jsx11("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
+  if (!drawn) return /* @__PURE__ */ jsx12(Fragment3, { children: fallback });
+  return /* @__PURE__ */ jsx12("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
 }
 
 // src/canvas/useDiagramDirector.ts
-import { useRef as useRef17, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useRef as useRef18, useSyncExternalStore as useSyncExternalStore5 } from "react";
 import { DiagramDirector, PresenceStore } from "@pixerate/editor/diagram";
 function useDiagramDirector(controller, options) {
-  const placement = useRef17(options.placement);
+  const placement = useRef18(options.placement);
   placement.current = options.placement;
-  const ref = useRef17(null);
+  const ref = useRef18(null);
   if (!ref.current) {
     const presence = new PresenceStore();
     ref.current = {
@@ -2992,13 +3151,13 @@ function usePresenceState(presence) {
 }
 
 // src/canvas/DiagramPresenceLayer.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   const { actors } = usePresenceState(presence);
   if (!actors.length) return null;
-  return /* @__PURE__ */ jsx12("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ jsxs10("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
-    /* @__PURE__ */ jsx12("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ jsx12("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
-    /* @__PURE__ */ jsx12("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
+  return /* @__PURE__ */ jsx13("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ jsxs11("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
+    /* @__PURE__ */ jsx13("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ jsx13("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
+    /* @__PURE__ */ jsx13("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
   ] }, a.id)) });
 }
 export {
@@ -3021,8 +3180,11 @@ export {
   CUBIC_BEZIER_PRESETS,
   CanvasComponentsPanel,
   CanvasDrawLayer,
+  CanvasEffectsPanel,
+  CanvasEffectsProvider,
   CanvasGuidesLayer,
   CanvasInstanceInspector,
+  CanvasNodeEffectLayer,
   CanvasScenesStore2 as CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
   DiagramPresenceLayer,
@@ -3196,7 +3358,7 @@ export {
   isLocked,
   isMeasureModifierHeld2 as isMeasureModifierHeld,
   isNodeAnimated,
-  isShapeDescription2 as isShapeDescription,
+  isShapeDescription3 as isShapeDescription,
   isShapeNode,
   isStraightCubic,
   isValidCanvasNode,
@@ -3337,6 +3499,9 @@ export {
   useCanvasComponents,
   useCanvasDocking,
   useCanvasDraw,
+  useCanvasEffects,
+  useCanvasEffectsProviderContext,
+  useCanvasEffectsTools,
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,
@@ -3352,6 +3517,7 @@ export {
   useShapeBrushstroke,
   useStreamingCanvas,
   validateCanvasBrush,
+  validateCanvasBrushPaint,
   withNodeAnimation,
   withStyleSize,
   wouldCreateComponentCycle,