@pixerate/editor-react 0.76.0 → 0.77.0

package/dist/canvas/index.js

@@ -1056,7 +1056,9 @@ function useCanvasDraw(options) {
       continueStroke: controller.continueStroke,
       endStroke: controller.endStroke,
       cancelStroke: controller.cancelStroke,
-      eraseAt: controller.eraseAt
+      eraseAt: controller.eraseAt,
+      drawStroke: controller.drawStroke,
+      listBrushes: controller.listBrushes
     }),
     [tool, style, activeStroke, controller]
   );
@@ -1065,6 +1067,7 @@ function useCanvasDraw(options) {
 // src/canvas/CanvasDrawLayer.tsx
 import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef9, useState as useState4 } from "react";
 import {
+  pointerPenSample,
   strokePointsToPathData,
   resolveCanvasGradient,
   gradientToSvgDef
@@ -1124,7 +1127,7 @@ function CanvasDrawLayer({
     e.stopPropagation();
     e.target.setPointerCapture?.(e.pointerId);
     const flowPt = clientToFlow(e.clientX, e.clientY);
-    draw.startStroke(flowPt);
+    draw.startStroke(flowPt, pointerPenSample(e));
     if (draw.tool === "eraser") {
       setEraserPos([e.clientX, e.clientY]);
     }
@@ -1137,8 +1140,10 @@ function CanvasDrawLayer({
     if (e.buttons === 1) {
       e.preventDefault();
       e.stopPropagation();
-      const flowPt = clientToFlow(e.clientX, e.clientY);
-      draw.continueStroke(flowPt);
+      const events = draw.style.brush !== void 0 ? e.nativeEvent.getCoalescedEvents?.() ?? [] : [];
+      for (const ev of events.length ? events : [e.nativeEvent]) {
+        draw.continueStroke(clientToFlow(ev.clientX, ev.clientY), pointerPenSample(ev));
+      }
     }
   };
   const handlePointerUp = (e) => {
@@ -1334,9 +1339,69 @@ import {
 
 // src/canvas/ShapeNode.tsx
 import { getShapeRenderData, isShapeDescription } from "@pixerate/editor/canvas";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// src/canvas/useShapeBrushstroke.tsx
+import { createContext, useContext, useEffect as useEffect7, useMemo as useMemo6, useState as useState6 } from "react";
+import {
+  brushstrokeScaleBucket,
+  isBrushedShape,
+  listCanvasBrushes,
+  renderShapeBrushstroke
+} from "@pixerate/editor/canvas";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ShapeNodeZoomContext = createContext(1);
+function ShapeNodeZoomProvider({ zoom, children }) {
+  const bucket = brushstrokeScaleBucket(zoom);
+  return /* @__PURE__ */ jsx4(ShapeNodeZoomContext.Provider, { value: bucket, children });
+}
+function useShapeBrushstroke(shape, width, height) {
+  const zoom = useContext(ShapeNodeZoomContext);
+  const brushed = isBrushedShape(shape) ? shape : null;
+  const vb = brushed?.viewBox;
+  const nodeScale = vb && width && height && vb[2] > 0 && vb[3] > 0 ? Math.max(width / vb[2], height / vb[3]) : 1;
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  const scale = brushstrokeScaleBucket(zoom * nodeScale, dpr);
+  const [image, setImage] = useState6(null);
+  useEffect7(() => {
+    if (!brushed) {
+      setImage(null);
+      return;
+    }
+    let live = true;
+    renderShapeBrushstroke(brushed, { scale }).then(
+      (img) => live && setImage(img),
+      (error) => {
+        if (!live) return;
+        setImage(null);
+        console.warn("[pixerate] brushed stroke not rendered:", error instanceof Error ? error.message : error);
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [brushed, scale]);
+  return image;
+}
+function useCanvasBrushes() {
+  const [state, setState] = useState6({ brushes: [], loading: true, error: null });
+  useEffect7(() => {
+    let live = true;
+    listCanvasBrushes().then(
+      (brushes) => live && setState({ brushes, loading: false, error: null }),
+      (error) => live && setState({ brushes: [], loading: false, error: error instanceof Error ? error.message : String(error) })
+    );
+    return () => {
+      live = false;
+    };
+  }, []);
+  return useMemo6(() => state, [state]);
+}
+
+// src/canvas/ShapeNode.tsx
+import { jsx as jsx5, jsxs as jsxs4 } 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 render = getShapeRenderData(shape, { width, height }, { id: id || data?.id });
   return /* @__PURE__ */ jsxs4(
@@ -1358,12 +1423,24 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
             "aria-hidden": "true",
             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)) })
+                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)) })
               ] }),
-              /* @__PURE__ */ jsx4(
+              brushImage ? /* @__PURE__ */ jsx5("g", { transform: render.transform, children: /* @__PURE__ */ jsx5(
+                "image",
+                {
+                  className: "pixerate-shape-brushstroke",
+                  href: brushImage.href,
+                  x: brushImage.x,
+                  y: brushImage.y,
+                  width: brushImage.width,
+                  height: brushImage.height,
+                  preserveAspectRatio: "none",
+                  opacity: render.opacity
+                }
+              ) }) : /* @__PURE__ */ jsx5(
                 "path",
                 {
                   d: render.d,
@@ -1514,17 +1591,17 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAutoLayout.ts
-import { useLayoutEffect, useMemo as useMemo6, useRef as useRef11, useState as useState6 } from "react";
+import { useLayoutEffect, useMemo as useMemo7, useRef as useRef11, useState as useState7 } from "react";
 import {
   createCanvasAutoLayoutController
 } from "@pixerate/editor/canvas";
 function useCanvasAutoLayout(options) {
-  const [guides, setGuides] = useState6([]);
+  const [guides, setGuides] = useState7([]);
   const nodesRef = useRef11(options.nodes);
   nodesRef.current = options.nodes;
   const optionsRef = useRef11(options);
   optionsRef.current = options;
-  const controller = useMemo6(
+  const controller = useMemo7(
     () => createCanvasAutoLayoutController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1553,7 +1630,7 @@ function useCanvasAutoLayout(options) {
   useLayoutEffect(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return useMemo6(
+  return useMemo7(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1567,7 +1644,7 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.ts
-import { useCallback as useCallback9, useEffect as useEffect7, useRef as useRef12, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef12, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   bindCanvasToken,
   detachTokenBindings,
@@ -1581,7 +1658,7 @@ function useCanvasTokens(options) {
   const latest = useRef12({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
-  useEffect7(
+  useEffect8(
     () => store.subscribe((event) => {
       if (event.deletedVariableIds.length === 0) return;
       latest.current.setNodes((prev) => detachTokenBindings(prev, event.previous, event.deletedVariableIds, opts()));
@@ -1590,7 +1667,7 @@ function useCanvasTokens(options) {
     [store]
   );
   const modesKey = JSON.stringify(modes ?? {});
-  useEffect7(() => {
+  useEffect8(() => {
     const next = resolveCanvasTokens(nodes, state, opts());
     if (next !== nodes) setNodes(next);
   }, [nodes, state, modesKey, properties]);
@@ -1632,7 +1709,7 @@ import {
   getTokensForProperty
 } from "@pixerate/editor/canvas";
 import { getCurrentMode, resolveToken } from "@pixerate/editor/tokens";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function TokenBindingPicker({
   state,
   nodes,
@@ -1656,7 +1733,7 @@ function TokenBindingPicker({
       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__ */ jsx5("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ jsx6("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
         /* @__PURE__ */ jsxs5(
           "select",
           {
@@ -1672,8 +1749,8 @@ function TokenBindingPicker({
               }
             },
             children: [
-              value === "__mixed" ? /* @__PURE__ */ jsx5("option", { value: "__mixed", children: "Mixed" }) : null,
-              /* @__PURE__ */ jsx5("option", { value: "", children: "None" }),
+              value === "__mixed" ? /* @__PURE__ */ jsx6("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ jsx6("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: [
@@ -1684,17 +1761,17 @@ function TokenBindingPicker({
             ]
           }
         ),
-        /* @__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(
+        /* @__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(
           "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__ */ jsx5("span", { title: resolved.message, children: "\u26A0" }) : null })
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ jsx6("span", { title: resolved.message, children: "\u26A0" }) : null })
       ] }, property.key);
     }),
-    state.collections.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+    state.collections.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
   ] });
 }
 function TokenModeSwitcher({
@@ -1712,11 +1789,11 @@ 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__ */ jsx5("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+  return /* @__PURE__ */ jsx6("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__ */ jsx5("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ jsx6("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
       /* @__PURE__ */ jsxs5(
         "select",
         {
@@ -1730,7 +1807,7 @@ function TokenModeSwitcher({
               auto.name,
               ")"
             ] }),
-            collection.modes.map((m) => /* @__PURE__ */ jsx5("option", { value: m.id, children: m.name }, m.id))
+            collection.modes.map((m) => /* @__PURE__ */ jsx6("option", { value: m.id, children: m.name }, m.id))
           ]
         }
       )
@@ -1761,7 +1838,7 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAnimation.ts
-import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef13, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo8, useRef as useRef13, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   createCanvasAnimationController
 } from "@pixerate/editor/canvas";
@@ -1770,7 +1847,7 @@ function useCanvasAnimation(options) {
   nodesRef.current = options.nodes;
   const optionsRef = useRef13(options);
   optionsRef.current = options;
-  const controller = useMemo7(
+  const controller = useMemo8(
     () => createCanvasAnimationController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1797,14 +1874,14 @@ function useCanvasAnimation(options) {
     }),
     []
   );
-  useEffect8(() => () => controller.destroy(), [controller]);
-  useEffect8(() => {
+  useEffect9(() => () => controller.destroy(), [controller]);
+  useEffect9(() => {
     if (options.loop !== void 0) controller.setLoop(options.loop);
   }, [controller, options.loop]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
   }, [controller, options.playbackRate]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (options.recording !== void 0) controller.setRecording(options.recording);
   }, [controller, options.recording]);
   const state = useSyncExternalStore3(
@@ -1812,11 +1889,11 @@ function useCanvasAnimation(options) {
     () => controller.getState(),
     () => controller.getState()
   );
-  useEffect8(() => {
+  useEffect9(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = useMemo7(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return useMemo7(
+  const displayNodes = useMemo8(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return useMemo8(
     () => ({
       ...controller,
       state,
@@ -1837,7 +1914,7 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-import { useEffect as useEffect9, useRef as useRef14 } from "react";
+import { useEffect as useEffect10, useRef as useRef14 } from "react";
 import {
   ANIMATION_EASING_LABELS,
   ANIMATION_EASING_PRESETS,
@@ -1846,7 +1923,7 @@ import {
   timeToX,
   xToTime
 } from "@pixerate/editor/canvas";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, 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 = "" }) {
@@ -1861,7 +1938,7 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
     return "";
   })();
   const dragRef = useRef14(null);
-  useEffect9(() => {
+  useEffect10(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
         dragRef.current = null;
@@ -1919,8 +1996,8 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
   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__ */ 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(
+      /* @__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(
         "button",
         {
           type: "button",
@@ -1932,7 +2009,7 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           children: "\u25CF Rec"
         }
       ),
-      /* @__PURE__ */ jsx6("button", { type: "button", className: btn, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
+      /* @__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: [
         formatAnimationTime(state.time),
         " / ",
@@ -1948,13 +2025,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__ */ 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__ */ 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__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "select",
         {
           "aria-label": "Loop",
@@ -1962,12 +2039,12 @@ 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__ */ jsx6("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
+          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ jsx7("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
         }
       )
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx6("div", { style: { width: labelWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ jsx7("div", { style: { width: labelWidth }, className: "shrink-0" }),
       /* @__PURE__ */ jsxs6(
         "div",
         {
@@ -1976,15 +2053,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           style: { width },
           onPointerDown: onRulerDown,
           children: [
-            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 } })
+            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 } })
           ]
         }
       )
     ] }),
-    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: [
+    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__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "checkbox",
@@ -1999,9 +2076,9 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
         ] })
       ] }),
       /* @__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(
+        /* @__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(
           "button",
           {
             type: "button",
@@ -2099,7 +2176,7 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasComponents.ts
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo8, useRef as useRef15 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo9, useRef as useRef15 } from "react";
 import {
   createCanvasComponentsController
 } from "@pixerate/editor/canvas";
@@ -2108,7 +2185,7 @@ function useCanvasComponents(options) {
   nodesRef.current = options.nodes;
   const optionsRef = useRef15(options);
   optionsRef.current = options;
-  const controller = useMemo8(
+  const controller = useMemo9(
     () => createCanvasComponentsController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -2144,15 +2221,15 @@ function useCanvasComponents(options) {
 }
 
 // src/canvas/CanvasComponentsPanel.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import {
   CANVAS_COMPONENT_DRAG_TYPE,
   inspectCanvasInstance,
   listCanvasComponents
 } from "@pixerate/editor/canvas";
-import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function InlineField({ value, label, onCommit }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "input",
     {
       type: "text",
@@ -2183,10 +2260,10 @@ function CanvasComponentsPanel({
   search = true,
   className = ""
 }) {
-  const [query, setQuery] = useState7("");
-  const [propsOpen, setPropsOpen] = useState7(null);
-  const [menuFor, setMenuFor] = useState7(null);
-  const [editing, setEditing] = useState7(null);
+  const [query, setQuery] = useState8("");
+  const [propsOpen, setPropsOpen] = useState8(null);
+  const [menuFor, setMenuFor] = useState8(null);
+  const [editing, setEditing] = useState8(null);
   const { components: all, sets } = listCanvasComponents(nodes);
   const q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
@@ -2216,16 +2293,16 @@ function CanvasComponentsPanel({
       },
       children: [
         /* @__PURE__ */ jsxs7("span", { className: "truncate", children: [
-          /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
+          /* @__PURE__ */ jsx8("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
           name
         ] }),
-        /* @__PURE__ */ jsx7("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
+        /* @__PURE__ */ jsx8("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__ */ jsx7(
+    search ? /* @__PURE__ */ jsx8(
       "input",
       {
         type: "search",
@@ -2239,7 +2316,7 @@ function CanvasComponentsPanel({
       /* @__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__ */ jsxs7(Fragment, { children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -2251,7 +2328,7 @@ function CanvasComponentsPanel({
               children: "+\xA0Variant"
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -2266,8 +2343,8 @@ function CanvasComponentsPanel({
           )
         ] }) : null
       ] }),
-      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(
+      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(
           InlineField,
           {
             value: option.name,
@@ -2275,7 +2352,7 @@ function CanvasComponentsPanel({
             onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
           }
         ),
-        /* @__PURE__ */ jsx7("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ jsx8(
           InlineField,
           {
             value,
@@ -2285,7 +2362,7 @@ function CanvasComponentsPanel({
           value
         )) })
       ] }, option.name)) }) : null,
-      /* @__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__ */ 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: [
           item(
             v.id,
@@ -2297,7 +2374,7 @@ function CanvasComponentsPanel({
               setMenuFor(v.id);
             } : void 0
           ),
-          components ? /* @__PURE__ */ jsx7(
+          components ? /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -2312,7 +2389,7 @@ 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__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -2326,7 +2403,7 @@ function CanvasComponentsPanel({
               children: "Edit values\u2026"
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -2340,7 +2417,7 @@ function CanvasComponentsPanel({
               children: "Duplicate"
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -2372,8 +2449,8 @@ function CanvasComponentsPanel({
             },
             children: [
               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(
+                /* @__PURE__ */ jsx8("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ jsx8(
                   "input",
                   {
                     type: "text",
@@ -2385,8 +2462,8 @@ function CanvasComponentsPanel({
                 )
               ] }, option.name)),
               /* @__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" })
+                /* @__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" })
               ] })
             ]
           }
@@ -2394,7 +2471,7 @@ function CanvasComponentsPanel({
       ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    all.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2415,25 +2492,25 @@ function CanvasInstanceInspector({
   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__ */ 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
+      /* @__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
     ] }),
     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(
+      /* @__PURE__ */ jsx8("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
+      /* @__PURE__ */ jsx8(
         "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__ */ jsx7("option", { value: v, children: v }, v))
+          children: option.values.map((v) => /* @__PURE__ */ jsx8("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__ */ 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(
+      /* @__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(
         "input",
         {
           type: "text",
@@ -2448,21 +2525,21 @@ function CanvasInstanceInspector({
           }
         },
         String(p.value)
-      ) : /* @__PURE__ */ jsx7(
+      ) : /* @__PURE__ */ jsx8(
         "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__ */ jsx7("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__ */ jsx8("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__ */ jsx7("span", { className: "text-muted-foreground", children: "Overrides" }),
+      /* @__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__ */ jsx7("span", { className: "mr-1 truncate", children: o.name }),
+        /* @__PURE__ */ jsx8("span", { className: "mr-1 truncate", children: o.name }),
         o.groups.map((g) => /* @__PURE__ */ jsxs7(
           "button",
           {
@@ -2482,9 +2559,9 @@ function CanvasInstanceInspector({
     ] }) : null,
     /* @__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(
+        /* @__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(
           "button",
           {
             type: "button",
@@ -2495,8 +2572,8 @@ function CanvasInstanceInspector({
             children: "Push changes"
           }
         )
-      ] }) : /* @__PURE__ */ jsx7("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
-      /* @__PURE__ */ jsx7(
+      ] }) : /* @__PURE__ */ jsx8("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -2553,6 +2630,17 @@ import {
   streamlinePoints,
   strokePointsToPathData as strokePointsToPathData2,
   strokeToShapeNode,
+  pointerPenSample as pointerPenSample2,
+  freehandBrushstroke,
+  isBrushedShape as isBrushedShape2,
+  listCanvasBrushes as listCanvasBrushes2,
+  validateCanvasBrush,
+  renderShapeBrushstroke as renderShapeBrushstroke2,
+  getBrushedShapeSvg,
+  loadCanvasBrushstrokeRenderer,
+  brushstrokeScaleBucket as brushstrokeScaleBucket2,
+  pathDataToPolyline,
+  profileAlongPolyline,
   CANVAS_GRADIENT_PRESETS,
   isCanvasGradient,
   parseCssGradient,
@@ -2564,7 +2652,7 @@ import {
 // src/canvas/MermaidFamilyScene.tsx
 import { useId } from "react";
 import { diagramTextBaseline } from "@pixerate/editor/canvas";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function MermaidFamilyScene({
   scene,
   padding = 16,
@@ -2609,14 +2697,14 @@ function MermaidFamilyScene({
       onClick: interactive ? (event) => onSelect?.(null, event) : void 0,
       children: [
         /* @__PURE__ */ jsxs8("defs", { children: [
-          /* @__PURE__ */ jsx8("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx8("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
-          /* @__PURE__ */ jsx8("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx8("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
+          /* @__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 } }) })
         ] }),
         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__ */ jsx8(
+              return /* @__PURE__ */ jsx9(
                 "rect",
                 {
                   ...common,
@@ -2631,9 +2719,9 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "circle":
-              return /* @__PURE__ */ jsx8("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
+              return /* @__PURE__ */ jsx9("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
             case "line":
-              return /* @__PURE__ */ jsx8(
+              return /* @__PURE__ */ jsx9(
                 "line",
                 {
                   ...common,
@@ -2649,7 +2737,7 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "path":
-              return /* @__PURE__ */ jsx8(
+              return /* @__PURE__ */ jsx9(
                 "path",
                 {
                   ...common,
@@ -2663,7 +2751,7 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "text":
-              return /* @__PURE__ */ jsx8(
+              return /* @__PURE__ */ jsx9(
                 "text",
                 {
                   ...common,
@@ -2691,7 +2779,7 @@ function MermaidFamilyScene({
 }
 
 // src/canvas/useMermaidDiagram.ts
-import { useEffect as useEffect10, useMemo as useMemo9, useRef as useRef16, useState as useState8, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo10, useRef as useRef16, useState as useState9, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   DiagramController
 } from "@pixerate/editor/diagram";
@@ -2719,19 +2807,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 = useMemo9(
+  const canvas = useMemo10(
     () => mermaidToCanvas(state.document, { ...layoutOptions, editable: state.editable }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, state.editable]
   );
-  const scene = useMemo9(
+  const scene = useMemo10(
     () => 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);
   layoutRef.current = canvas.layout;
-  const actions = useMemo9(
+  const actions = useMemo10(
     () => ({
       apply: (ops, label) => controller.apply(ops, label),
       load: (source, options) => controller.load(source, options),
@@ -2770,11 +2858,11 @@ function useMermaidStream(source, options = {}) {
   const { complete = false, duration = 300, ...layoutOptions } = options;
   const stream = useRef16(null);
   if (!stream.current) stream.current = new DiagramStream(layoutOptions);
-  const result = useMemo9(() => stream.current.update(source, complete), [source, complete]);
-  const [shown, setShown] = useState8({ layout: result.layout, settled: true });
+  const result = useMemo10(() => stream.current.update(source, complete), [source, complete]);
+  const [shown, setShown] = useState9({ layout: result.layout, settled: true });
   const shownRef = useRef16(shown.layout);
   shownRef.current = shown.layout;
-  useEffect10(() => {
+  useEffect11(() => {
     const target = result.layout;
     if (!target) return setShown({ layout: null, settled: true });
     const from = shownRef.current;
@@ -2791,7 +2879,7 @@ function useMermaidStream(source, options = {}) {
     return () => cancelAnimationFrame(frame);
   }, [result.layout, duration]);
   const doc = result.document.tier === "editable" ? result.document : null;
-  const canvas = useMemo9(() => {
+  const canvas = useMemo10(() => {
     if (!doc || !shown.layout) return { nodes: [], edges: [] };
     const placed = new Set(Object.keys(shown.layout.positions));
     const graph = {
@@ -2807,7 +2895,7 @@ function useMermaidStream(source, options = {}) {
 
 // src/canvas/MermaidDiagramNode.tsx
 import { MERMAID_SHAPE_PAINT, mermaidLabelLines, mermaidNodeMembers, mermaidNodePaint, mermaidShapePaths } from "@pixerate/editor/canvas";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function mermaidNodeStyle(styles = {}, selected = false) {
   const paint = mermaidNodePaint(styles, selected);
   const { color, "stroke-width": strokeWidth, "stroke-dasharray": strokeDasharray, ...vars } = paint;
@@ -2825,14 +2913,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__ */ jsx9("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__ */ jsx9("path", { d: path.d, style: { ...MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__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(
           "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__ */ jsx9("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
-              members.length > 0 && /* @__PURE__ */ jsx9("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__ */ jsx9("div", { children: m }, i)) })
+              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)) })
             ]
           }
         ),
@@ -2859,7 +2947,7 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
         color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
       },
       children: [
-        /* @__PURE__ */ jsx9("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
+        /* @__PURE__ */ jsx10("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
         children
       ]
     }
@@ -2867,20 +2955,20 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
 }
 
 // src/canvas/MermaidThumbnail.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { parseMermaid } from "@pixerate/editor/diagram";
 import { mermaidThumbnailSvg } from "@pixerate/editor/canvas";
-import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
 function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
-  const doc = useMemo10(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
+  const doc = useMemo11(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
   const key = JSON.stringify(options);
-  const drawn = useMemo10(
+  const drawn = useMemo11(
     () => 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__ */ jsx10(Fragment2, { children: fallback });
-  return /* @__PURE__ */ jsx10("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
+  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 } });
 }
 
 // src/canvas/useDiagramDirector.ts
@@ -2904,13 +2992,13 @@ function usePresenceState(presence) {
 }
 
 // src/canvas/DiagramPresenceLayer.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   const { actors } = usePresenceState(presence);
   if (!actors.length) return null;
-  return /* @__PURE__ */ jsx11("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__ */ jsx11("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__ */ jsx11("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__ */ jsx11("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__ */ 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 })
   ] }, a.id)) });
 }
 export {
@@ -2950,6 +3038,8 @@ export {
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   ShapeNode,
+  ShapeNodeZoomContext,
+  ShapeNodeZoomProvider,
   TOKEN_BINDINGS_DATA_KEY,
   TOKEN_MODES_DATA_KEY,
   TokenBindingPicker,
@@ -2975,6 +3065,7 @@ export {
   bindCanvasToken3 as bindCanvasToken,
   blendLayout,
   boundsOf,
+  brushstrokeScaleBucket2 as brushstrokeScaleBucket,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement2 as calculateDirectionalDisplacement,
   canCombineShapeNodes,
@@ -3040,6 +3131,7 @@ export {
   flowSide,
   formatAnimationTime2 as formatAnimationTime,
   formatOklab,
+  freehandBrushstroke,
   getAbsolutePosition,
   getAnimatableProperty,
   getAnimatedProperties,
@@ -3050,6 +3142,7 @@ export {
   getAutoLayoutGrid,
   getAutoLayoutInsertTarget,
   getBindableTokenProperties2 as getBindableTokenProperties,
+  getBrushedShapeSvg,
   getCanvasComponentDragId,
   getCanvasTokenProperty,
   getCenteredNodePosition2 as getCenteredNodePosition,
@@ -3092,6 +3185,7 @@ export {
   isAnimationEasing,
   isAnimationKeyframe,
   isAutoLayoutFrame,
+  isBrushedShape2 as isBrushedShape,
   isCanvasComponent,
   isCanvasComponentSet,
   isCanvasGradient,
@@ -3114,7 +3208,9 @@ export {
   layoutUpMany,
   linearPositionTrajectory2 as linearPositionTrajectory,
   linearTrajectory,
+  listCanvasBrushes2 as listCanvasBrushes,
   listCanvasComponents2 as listCanvasComponents,
+  loadCanvasBrushstrokeRenderer,
   lockNodes,
   makeSizingCoherent,
   matchArrangeShortcut2 as matchArrangeShortcut,
@@ -3149,15 +3245,18 @@ export {
   parseSvgPath,
   pasteKeyframes,
   pathBoolean,
+  pathDataToPolyline,
   placeBeside2 as placeBeside,
   playWebAnimations,
   pointInBezierPath,
   pointInMultiPolygon,
   pointInRings,
+  pointerPenSample2 as pointerPenSample,
   polygonArea,
   polygonBoolean,
   polygonToSvgPath,
   positionToSide,
+  profileAlongPolyline,
   pruneCanvasTokenModes,
   pushCanvasInstanceOverrides,
   readAnimatableValue,
@@ -3171,6 +3270,7 @@ export {
   removeTrack,
   renameCanvasVariantProperty,
   renameCanvasVariantValue,
+  renderShapeBrushstroke2 as renderShapeBrushstroke,
   reorderNodes,
   repositionNodesTo,
   resetCanvasInstanceOverrides,
@@ -3231,6 +3331,7 @@ export {
   useCanvasArrange,
   useCanvasArrangeShortcuts,
   useCanvasAutoLayout,
+  useCanvasBrushes,
   useCanvasCapture,
   useCanvasClipboard,
   useCanvasComponents,
@@ -3248,7 +3349,9 @@ export {
   useMermaidDiagram,
   useMermaidStream,
   usePresenceState,
+  useShapeBrushstroke,
   useStreamingCanvas,
+  validateCanvasBrush,
   withNodeAnimation,
   withStyleSize,
   wouldCreateComponentCycle,