@pixerate/editor-react 0.74.0 → 0.75.1

package/dist/vector/index.cjs

@@ -45,11 +45,13 @@ __export(vector_exports, {
   VectorMaskPanel: () => VectorMaskPanel,
   VectorMaskedNodes: () => VectorMaskedNodes,
   VectorSceneNodes: () => VectorSceneNodes,
+  VectorShadingPanel: () => VectorShadingPanel,
   VectorStylePanel: () => VectorStylePanel,
   VectorSymbolsPanel: () => VectorSymbolsPanel,
   VectorTextElement: () => VectorTextElement,
   VectorTextPanel: () => VectorTextPanel,
   VectorToolbar: () => VectorToolbar,
+  VectorTracePanel: () => VectorTracePanel,
   VectorWidthPointEditor: () => VectorWidthPointEditor,
   useVectorCommands: () => useVectorCommands,
   useVectorEditor: () => useVectorEditor,
@@ -275,48 +277,19 @@ function VectorTextElement({ node }) {
   )) });
 }
 function VectorSceneNodes({ nodes }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: nodes.map(
-    (node) => node.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorTextElement, { node }, node.id) : node.kind === "group" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "g",
-      {
-        "data-vector-id": node.id,
-        "data-vector-mask": node.mask?.type,
-        transform: node.transform,
-        opacity: node.opacity < 1 ? node.opacity : void 0,
-        filter: node.filter,
-        style: blendStyle(node.blendMode),
-        children: node.mask ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorMaskedNodes, { mask: node.mask, nodes: node.children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorSceneNodes, { nodes: node.children })
-      },
-      node.id
-    ) : node.layers ? (
-      // Fill and stroke stacks: each layer in order, bottom to top.
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "g",
-        {
-          "data-vector-id": node.id,
-          transform: node.transform,
-          opacity: node.opacity < 1 ? node.opacity : void 0,
-          filter: node.filter,
-          style: blendStyle(node.blendMode),
-          children: node.layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`))
-        },
-        node.id
-      )
-    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      VectorPaintPath,
-      {
-        paint: node,
-        d: node.d,
-        fillRule: node.fillRule,
-        id: node.id,
-        transform: node.transform,
-        filter: node.filter,
-        blendMode: node.blendMode
-      },
-      node.id
-    )
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorSceneNode, { node }, node.id)) });
 }
+var VectorSceneNode = import_react3.default.memo(function VectorSceneNode2({ node }) {
+  if (node.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorTextElement, { node });
+  if (node.kind === "group")
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-id": node.id, "data-vector-mask": node.mask?.type, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.mask ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorMaskedNodes, { mask: node.mask, nodes: node.children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorSceneNodes, { nodes: node.children }) });
+  if (node.layers)
+    return (
+      // Fill and stroke stacks: each layer in order, bottom to top.
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)) })
+    );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPaintPath, { paint: node, d: node.d, fillRule: node.fillRule, id: node.id, transform: node.transform, filter: node.filter, blendMode: node.blendMode });
+});
 function VectorMaskedNodes({ mask, nodes }) {
   const b = mask.bounds;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
@@ -411,7 +384,8 @@ function VectorCanvas({
   const editingText = state.textEdit?.nodeId ?? null;
   const fitted = (0, import_react3.useRef)(!fitOnMount);
   const uid = (0, import_react3.useId)().replace(/:/g, "");
-  const scene = (0, import_vector3.getVectorSceneRenderData)(state, { idPrefix: `ve${uid}-` });
+  const [size, setSize] = (0, import_react3.useState)(null);
+  const scene = (0, import_vector3.getVectorSceneRenderData)(state, { idPrefix: `ve${uid}-`, ...size ? { viewportSize: size } : {} });
   const overlay = (0, import_vector3.getVectorOverlayRenderData)(state);
   const host = (0, import_vector3.getVectorSymbolEditBackground)(state, { idPrefix: `ve${uid}-host-` });
   (0, import_react3.useEffect)(() => {
@@ -429,6 +403,18 @@ function VectorCanvas({
     observer.observe(el);
     return () => observer.disconnect();
   }, [controller]);
+  (0, import_react3.useEffect)(() => {
+    const el = svgRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) setSize((s) => s && s.width === r.width && s.height === r.height ? s : { width: r.width, height: r.height });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
   (0, import_react3.useEffect)(() => {
     if (!editingText) return;
     const t = setTimeout(() => textRef.current?.focus({ preventScroll: true }), 0);
@@ -564,8 +550,8 @@ function VectorCanvas({
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: h.x, cy: h.y, r: import_vector3.VECTOR_OVERLAY_THEME.handleRadius + (h.hovered || h.active ? 1 : 0), fill: h.active ? accentColor : import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor })
             ] }, h.index)),
             overlay.envelope.anchors.map((a) => {
-              const size = as + (a.hovered || a.active ? 2 : 0);
-              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { "data-vector-envelope-anchor": a.index, x: a.x - size / 2, y: a.y - size / 2, width: size, height: size, fill: a.active ? accentColor : import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }, a.index);
+              const size2 = as + (a.hovered || a.active ? 2 : 0);
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { "data-vector-envelope-anchor": a.index, x: a.x - size2 / 2, y: a.y - size2 / 2, width: size2, height: size2, fill: a.active ? accentColor : import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }, a.index);
             })
           ] }),
           overlay.handles.map((h) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-handle": h.ref.handle, children: [
@@ -573,10 +559,10 @@ function VectorCanvas({
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: h.x, cy: h.y, r: import_vector3.VECTOR_OVERLAY_THEME.handleRadius + (h.hovered ? 1 : 0), fill: import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor })
           ] }, `${h.ref.nodeId}:${h.ref.subpath}:${h.ref.index}:${h.ref.handle}`)),
           overlay.anchors.map((a) => {
-            const size = as + (a.hovered ? 2 : 0);
+            const size2 = as + (a.hovered ? 2 : 0);
             const fill = a.selected ? accentColor : import_vector3.VECTOR_OVERLAY_THEME.handleFill;
             const key = `${a.ref.nodeId}:${a.ref.subpath}:${a.ref.index}`;
-            return a.type === "corner" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { "data-vector-anchor": a.ref.index, x: a.x - size / 2, y: a.y - size / 2, width: size, height: size, fill, stroke: accentColor }, key) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { "data-vector-anchor": a.ref.index, cx: a.x, cy: a.y, r: size / 2, fill, stroke: accentColor }, key);
+            return a.type === "corner" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { "data-vector-anchor": a.ref.index, x: a.x - size2 / 2, y: a.y - size2 / 2, width: size2, height: size2, fill, stroke: accentColor }, key) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { "data-vector-anchor": a.ref.index, cx: a.x, cy: a.y, r: size2 / 2, fill, stroke: accentColor }, key);
           }),
           overlay.cornerWidgets.map((w) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-corner-widget": w.ref.index, "data-corner-kind": w.kind, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: w.x, cy: w.y, r: import_vector3.VECTOR_OVERLAY_THEME.cornerWidgetRadius + (w.hovered ? 1 : 0), fill: import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }),
@@ -693,6 +679,10 @@ function VectorCanvas({
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M-3 0H3M0 -3V3", stroke: "#dc2626" })
             ] })
           ] }),
+          overlay.shading.map((sh) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-shading": sh.kind, children: [
+            sh.lines.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d, stroke: accentColor, strokeWidth: 1, opacity: 0.7 }, i)),
+            sh.points.map((p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { "data-vector-shading-point": p.index, "data-selected": p.selected || void 0, cx: p.x, cy: p.y, r: p.selected ? 6 : 4.5, fill: p.color, stroke: p.selected ? accentColor : "#ffffff", strokeWidth: p.selected ? 2 : 1.5 }, p.index))
+          ] }, `shading:${sh.nodeId}`)),
           overlay.trackingPoints.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-tracking-point": "", d: `M${t.x - 5} ${t.y}H${t.x + 5}M${t.x} ${t.y - 5}V${t.y + 5}`, stroke: guideColor, strokeWidth: 1.5 }, `track:${i}`)),
           overlay.typedEntry && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-typed-entry": "", transform: `translate(${overlay.typedEntry.x + 14} ${overlay.typedEntry.y + 18})`, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: -3, y: -12, width: overlay.typedEntry.text.length * 7 + 8, height: 17, rx: 3, fill: import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }),
@@ -828,8 +818,8 @@ function VectorCanvas({
 }
 
 // src/vector/VectorToolbar.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_vector14 = require("@pixerate/editor/vector");
+var import_react10 = __toESM(require("react"), 1);
+var import_vector15 = require("@pixerate/editor/vector");
 
 // src/vector/VectorEffectsPanel.tsx
 var import_vector4 = require("@pixerate/editor/vector");
@@ -1920,16 +1910,130 @@ function VectorConnectorPanel({ controller, className }) {
   ] });
 }
 
-// src/vector/VectorGradientEditor.tsx
+// src/vector/VectorShadingPanel.tsx
+var import_react8 = require("react");
 var import_vector13 = require("@pixerate/editor/vector");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var buttonClass10 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
+var numberClass6 = "h-7 w-12 rounded border border-border bg-background px-1.5 text-xs";
+function VectorShadingPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const [rows, setRows] = (0, import_react8.useState)(2);
+  const [columns, setColumns] = (0, import_react8.useState)(2);
+  const path = state.selection.map((id) => controller.getNode(id)).find((n) => n?.type === "path");
+  if (!path) return null;
+  const fill = path.fill;
+  const sel = state.shadingPoint?.nodeId === path.id ? state.shadingPoint : null;
+  const mesh = (0, import_vector13.isVectorMeshGradient)(fill) ? fill : null;
+  const free = (0, import_vector13.isVectorFreeformGradient)(fill) ? fill : null;
+  const color = sel ? mesh ? mesh.colors[sel.index] : free?.points[sel.index]?.color : void 0;
+  const opacity = sel ? mesh ? mesh.opacities?.[sel.index] ?? 1 : free?.points[sel.index]?.opacity ?? 1 : 1;
+  const spread = sel && free ? free.points[sel.index]?.spread ?? 0 : 0;
+  const edit = (patch, merge) => {
+    if (!sel) return;
+    if (mesh) controller.setMeshPoint(path.id, sel.index, patch, merge ? { merge } : {});
+    else controller.setFreeformPoint(path.id, sel.index, patch, merge ? { merge } : {});
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-shading-panel": path.id, "aria-label": "Mesh and freeform gradient", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Shading" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", min: 1, max: 32, "aria-label": "Mesh rows", title: "Mesh rows", className: numberClass6, value: rows, onChange: (e) => setRows(Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 1))) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-muted-foreground", children: "\xD7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "number", min: 1, max: 32, "aria-label": "Mesh columns", title: "Mesh columns", className: numberClass6, value: columns, onChange: (e) => setColumns(Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 1))) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "data-vector-shading-action": "mesh", title: "Create Gradient Mesh: smooth patches whose points blend colours (edit them with the Gradient tool)", onClick: () => controller.setMeshGradient({ rows, columns }, { ids: [path.id] }), children: "Mesh" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "data-vector-shading-action": "freeform", title: "Freeform Gradient: colour points blended across the shape (click inside with the Gradient tool to add one)", onClick: () => controller.setFreeformGradient({}, { ids: [path.id] }), children: "Freeform" })
+    ] }),
+    (mesh || free) && !sel && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
+      "Gradient tool (G): drag points; ",
+      free ? "click inside to add one, Alt-click to remove." : "pick one to colour it."
+    ] }),
+    sel && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-2", "data-vector-shading-point": sel.index, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "w-16 text-xs text-foreground", children: [
+        "Point ",
+        sel.index
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "color", "aria-label": "Point colour", className: "h-7 w-10 cursor-pointer rounded border border-border bg-background", value: (0, import_vector13.vectorPaintToHex)(color ?? "#000000") ?? "#000000", onChange: (e) => edit({ color: e.target.value }, "shading-color") }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "range", min: 0, max: 1, step: 0.05, "aria-label": "Point opacity", title: "Opacity", className: "h-4 w-20 accent-primary", value: opacity, onChange: (e) => edit({ opacity: parseFloat(e.target.value) }, "shading-opacity") }),
+      free && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "range", min: 0, max: 1, step: 0.05, "aria-label": "Point spread", title: "Spread: pure colour round the point", className: "h-4 w-20 accent-primary", value: spread, onChange: (e) => edit({ spread: parseFloat(e.target.value) }, "shading-spread") }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "aria-label": "Remove point", onClick: () => controller.removeFreeformPoint(path.id, sel.index), children: "Remove" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/vector/VectorTracePanel.tsx
+var import_react9 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var buttonClass11 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
 var selectClass8 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass6 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
-var buttonClass10 = "inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var numberClass7 = "h-7 w-12 rounded border border-border bg-background px-1.5 text-xs";
+async function filePixels(file, max = 1e6) {
+  const bitmap = await createImageBitmap(file);
+  const k = Math.min(1, Math.sqrt(max / (bitmap.width * bitmap.height)));
+  const width = Math.max(1, Math.round(bitmap.width * k));
+  const height = Math.max(1, Math.round(bitmap.height * k));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(bitmap, 0, 0, width, height);
+  return { width, height, data: ctx.getImageData(0, 0, width, height).data };
+}
+function VectorTracePanel({ controller, className }) {
+  const input = (0, import_react9.useRef)(null);
+  const [mode, setMode] = (0, import_react9.useState)("threshold");
+  const [colors, setColors] = (0, import_react9.useState)(6);
+  const [message, setMessage] = (0, import_react9.useState)(null);
+  const trace = async (file) => {
+    try {
+      const pixels = await filePixels(file);
+      const doc = controller.getState().document;
+      const width = Math.min(doc.width, pixels.width);
+      const r = controller.traceImage(pixels, { mode, colors, width, name: file.name.replace(/\.[^.]+$/, "") || "Image Trace" });
+      setMessage(r.ok ? null : r.message);
+    } catch {
+      setMessage("That file could not be read as an image.");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `space-y-1 ${className ?? ""}`, "data-vector-trace-panel": "", "aria-label": "Image trace", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Trace" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("select", { "aria-label": "Trace mode", className: selectClass8, value: mode, onChange: (e) => setMode(e.target.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "threshold", children: "Black & white" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "color", children: "Colours" })
+      ] }),
+      mode === "color" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "number", min: 2, max: 32, "aria-label": "Trace colours", title: "Colours", className: numberClass7, value: colors, onChange: (e) => setColors(Math.max(2, Math.min(32, parseInt(e.target.value, 10) || 2))) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: buttonClass11, "data-vector-trace-action": "", title: "Image Trace: pick an image to turn into paths", onClick: () => input.current?.click(), children: "Image\u2026" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "input",
+        {
+          ref: input,
+          type: "file",
+          accept: "image/*",
+          hidden: true,
+          onChange: (e) => {
+            const file = e.target.files?.[0];
+            e.target.value = "";
+            if (file) void trace(file);
+          }
+        }
+      )
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[11px] text-red-600", children: message })
+  ] });
+}
+
+// src/vector/VectorGradientEditor.tsx
+var import_vector14 = require("@pixerate/editor/vector");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var selectClass9 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass8 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
+var buttonClass12 = "inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 var percent = (v) => Math.round(v * 1e3) / 10;
 function VectorGradientEditor({ controller, className }) {
   const state = useVectorEditorState(controller);
-  const ed = (0, import_vector13.getVectorGradientEditor)(state);
+  const ed = (0, import_vector14.getVectorGradientEditor)(state);
   if (!ed) return null;
   const g = ed.gradient;
   const sel = ed.selected;
@@ -1937,26 +2041,26 @@ function VectorGradientEditor({ controller, className }) {
   const setType = (value) => {
     if (value === "solid") {
       const first = ed.stops[0];
-      controller.setStyle({ [ed.target]: (0, import_vector13.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
+      controller.setStyle({ [ed.target]: (0, import_vector14.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
     } else controller.setGradient({ type: value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
-      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
-      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
+      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: buttonClass12, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
+      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("select", { "aria-label": "Gradient type", className: selectClass8, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "solid", children: "Solid" }),
-        import_vector13.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: t, children: import_vector13.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("select", { "aria-label": "Gradient type", className: selectClass9, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "solid", children: "Solid" }),
+        import_vector14.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: t, children: import_vector14.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: buttonClass12, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
     ] }),
-    g && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    g && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
           {
             role: "button",
@@ -1970,7 +2074,7 @@ function VectorGradientEditor({ controller, className }) {
             }
           }
         ),
-        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "button",
           {
             type: "button",
@@ -1984,21 +2088,21 @@ function VectorGradientEditor({ controller, className }) {
           s.index
         ))
       ] }),
-      sel && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      sel && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
           {
             type: "color",
             "aria-label": "Stop colour",
             className: "h-7 w-9 cursor-pointer rounded border border-border bg-background",
-            value: (0, import_vector13.vectorPaintToHex)(sel.color) ?? "#000000",
+            value: (0, import_vector14.vectorPaintToHex)(sel.color) ?? "#000000",
             onChange: (e) => controller.setGradientStop(sel.index, { color: e.target.value }, { merge: `gradient-stop-color-${sel.index}` }),
             onBlur: end
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Opacity",
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "number",
@@ -2006,7 +2110,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 5,
               "aria-label": "Stop opacity",
-              className: numberClass6,
+              className: numberClass8,
               value: percent(sel.opacity ?? 1),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -2015,9 +2119,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "At",
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "number",
@@ -2025,7 +2129,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 1,
               "aria-label": "Stop position",
-              className: numberClass6,
+              className: numberClass8,
               value: percent(sel.offset),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -2034,9 +2138,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Midpoint",
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               type: "number",
@@ -2044,7 +2148,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 95,
               step: 1,
               "aria-label": "Stop midpoint",
-              className: numberClass6,
+              className: numberClass8,
               value: percent(sel.midpoint ?? 0.5),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -2053,15 +2157,15 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: buttonClass12, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "Colours" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass8, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector13.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: i, children: import_vector13.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-16", children: "Colours" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass9, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector14.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: i, children: import_vector14.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "Smooth" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-16", children: "Smooth" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "input",
           {
             type: "range",
@@ -2077,26 +2181,26 @@ function VectorGradientEditor({ controller, className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "Spread" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient spread", className: selectClass8, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector13.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: sp, children: import_vector13.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-16", children: "Spread" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("select", { "aria-label": "Gradient spread", className: selectClass9, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector14.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: sp, children: import_vector14.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
       ] }),
-      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "On stroke" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass8, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector13.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: m, children: import_vector13.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-16", children: "On stroke" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass9, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector14.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: m, children: import_vector14.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
       ] })
     ] })
   ] });
 }
 
 // src/vector/VectorToolbar.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var VECTOR_SNAP_TITLE = "Snap to objects";
 var modKeyLabel = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "") ? "\u2318" : "Ctrl";
-var buttonClass11 = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var buttonClass13 = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 function VectorToolbar({
   controller,
-  tools = import_vector14.VECTOR_TOOLS,
+  tools = import_vector15.VECTOR_TOOLS,
   showHistory = true,
   showArrange = true,
   showSnap = true,
@@ -2110,36 +2214,36 @@ function VectorToolbar({
   const points = state.tool === "direct" ? state.selectedAnchors.length : 0;
   const editing = state.editing;
   const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
-  const maskSelected = state.selection.some((id) => (0, import_vector14.isVectorMaskGroup)(controller.getNode(id)));
-  const [live, setLive] = import_react8.default.useState(false);
+  const maskSelected = state.selection.some((id) => (0, import_vector15.isVectorMaskGroup)(controller.getNode(id)));
+  const [live, setLive] = import_react10.default.useState(false);
   const booleanDisabled = live ? count < 1 : count < 2;
-  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: buttonClass11, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass13, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass11,
+        className: buttonClass13,
         "aria-pressed": state.tool === tool,
-        title: `${(0, import_vector14.vectorToolLabel)(tool)} (${import_vector14.VECTOR_TOOL_SHORTCUTS[tool]})`,
-        "aria-label": (0, import_vector14.vectorToolLabel)(tool),
+        title: `${(0, import_vector15.vectorToolLabel)(tool)} (${import_vector15.VECTOR_TOOL_SHORTCUTS[tool]})`,
+        "aria-label": (0, import_vector15.vectorToolLabel)(tool),
         onClick: () => controller.setTool(tool),
-        children: import_vector14.VECTOR_TOOL_GLYPHS[tool]
+        children: import_vector15.VECTOR_TOOL_GLYPHS[tool]
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
       act("\u21B6", state.canUndo ? `Undo ${state.undoLabel}` : "Undo", () => controller.undo(), !state.canUndo),
       act("\u21B7", state.canRedo ? `Redo ${state.redoLabel}` : "Redo", () => controller.redo(), !state.canRedo)
     ] }),
-    showSnap && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    showSnap && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
           "data-vector-snap": "",
-          className: buttonClass11,
+          className: buttonClass13,
           "aria-pressed": state.snap.objects,
           title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
           "aria-label": VECTOR_SNAP_TITLE,
@@ -2147,18 +2251,18 @@ function VectorToolbar({
           children: "Snap"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "select",
         {
           "data-vector-polar": "",
           "aria-label": "Polar tracking increment",
           title: "Polar tracking: the angles drawn points snap to from where they leave",
           className: "h-8 rounded-md border border-border bg-background px-1 text-xs",
-          value: String((0, import_vector14.vectorPolarIncrementOf)(state.snap.angles) ?? ""),
-          onChange: (e) => controller.setSnap({ angles: (0, import_vector14.vectorPolarAngles)(Number(e.target.value)) }),
+          value: String((0, import_vector15.vectorPolarIncrementOf)(state.snap.angles) ?? ""),
+          onChange: (e) => controller.setSnap({ angles: (0, import_vector15.vectorPolarAngles)(Number(e.target.value)) }),
           children: [
-            (0, import_vector14.vectorPolarIncrementOf)(state.snap.angles) === null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Custom" }),
-            [90, 45, 30, 15].map((n) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("option", { value: n, children: [
+            (0, import_vector15.vectorPolarIncrementOf)(state.snap.angles) === null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "Custom" }),
+            [90, 45, 30, 15].map((n) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("option", { value: n, children: [
               n,
               "\xB0"
             ] }, n))
@@ -2166,13 +2270,13 @@ function VectorToolbar({
         }
       )
     ] }),
-    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      import_vector14.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      import_vector15.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass11,
+          className: buttonClass13,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -2181,12 +2285,12 @@ function VectorToolbar({
         },
         a.id
       )),
-      import_vector14.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_vector15.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass11,
+          className: buttonClass13,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -2195,9 +2299,9 @@ function VectorToolbar({
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "input",
           {
             type: "range",
@@ -2211,9 +2315,9 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "input",
           {
             type: "number",
@@ -2229,26 +2333,26 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass11,
+          className: buttonClass13,
           "aria-pressed": editing.fillGap > 0,
           title: "Close small gaps between path ends when filling",
           "aria-label": "Close gaps",
-          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector14.VECTOR_FILL_GAP }),
+          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector15.VECTOR_FILL_GAP }),
           children: "Gaps"
         }
       )
     ] }),
-    showDistort && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    showDistort && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
         "data-vector-free-distort": "",
-        className: buttonClass11,
+        className: buttonClass13,
         "aria-pressed": state.freeDistort,
         title: `Free Distort: drag a corner of the selection box to distort in perspective (Shift+Alt+${modKeyLabel()}: symmetric perspective; ${modKeyLabel()}-drag a side to skew)`,
         "aria-label": "Free Distort",
@@ -2256,15 +2360,15 @@ function VectorToolbar({
         children: "Distort"
       }
     ) }),
-    showBlend && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorBlendControls, { controller }),
-    showArrange && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    showBlend && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             type: "button",
             "data-vector-live-boolean": "",
-            className: buttonClass11,
+            className: buttonClass13,
             "aria-pressed": live,
             title: "Live booleans: keep the shapes editable",
             "aria-label": "Live booleans",
@@ -2281,12 +2385,12 @@ function VectorToolbar({
         act("\u25D0", `Make Clipping Mask (${modKeyLabel()}+7)`, () => controller.makeMask("clip"), count < 2),
         act("\u25D1", `Release Mask (${modKeyLabel()}+Alt+7)`, () => controller.releaseMask(), !maskSelected)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector14.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector15.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass11,
+          className: buttonClass13,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -2295,7 +2399,7 @@ function VectorToolbar({
         },
         a.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
         act("\u21C8", "Bring to Front", () => controller.arrange("front"), count < 1),
         act("\u21CA", "Send to Back", () => controller.arrange("back"), count < 1),
         act("\u21E4", "Align Left", () => controller.align("left"), count < 1),
@@ -2310,22 +2414,22 @@ function VectorToolbar({
 }
 function VectorBlendControls({ controller }) {
   const state = useVectorEditorState(controller);
-  const blend = (0, import_vector14.getVectorBlendControls)(state);
+  const blend = (0, import_vector15.getVectorBlendControls)(state);
   const o = blend.options;
   const selected = blend.ids.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass11, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass13, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "select",
       {
         "aria-label": "Blend spacing",
         className: "h-7 rounded border border-border bg-background px-1 text-xs",
         value: o.spacing,
-        onChange: (e) => (0, import_vector14.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
-        children: import_vector14.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: sp, children: import_vector14.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+        onChange: (e) => (0, import_vector15.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
+        children: import_vector15.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: sp, children: import_vector15.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
-    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
         type: "number",
@@ -2337,29 +2441,29 @@ function VectorBlendControls({ controller }) {
         onChange: (e) => {
           const n = parseFloat(e.target.value);
           if (!Number.isFinite(n) || n <= 0) return;
-          (0, import_vector14.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
+          (0, import_vector15.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "orient",
-        className: buttonClass11,
+        className: buttonClass13,
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
-        onClick: () => (0, import_vector14.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
+        onClick: () => (0, import_vector15.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
         children: "\u293F"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "spine",
-        className: buttonClass11,
+        className: buttonClass13,
         title: "Replace Spine (select a blend and a path)",
         "aria-label": "Replace Spine",
         disabled: !blend.canReplaceSpine,
@@ -2367,15 +2471,15 @@ function VectorBlendControls({ controller }) {
         children: "\u2307"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass11, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass11, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass13, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass13, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
   ] });
 }
-var selectClass9 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass7 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
+var selectClass10 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass9 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
 function VectorStylePanel({ controller, className }) {
   const state = useVectorEditorState(controller);
-  const style = (0, import_vector14.getVectorSelectionStyle)(state);
+  const style = (0, import_vector15.getVectorSelectionStyle)(state);
   const d = state.defaults;
   const source = style ?? {
     fill: d.fill ?? null,
@@ -2388,7 +2492,7 @@ function VectorStylePanel({ controller, className }) {
     arrowAlign: d.arrowAlign ?? "extend",
     startArrowScale: d.startArrowScale ?? 1,
     endArrowScale: d.endArrowScale ?? 1,
-    widthProfile: (0, import_vector14.widthProfilePresetId)(d.strokeWidthProfile),
+    widthProfile: (0, import_vector15.widthProfilePresetId)(d.strokeWidthProfile),
     cornerRadius: d.cornerRadius,
     cornerKind: d.cornerKind ?? "round",
     cornerSmoothing: 0,
@@ -2402,19 +2506,19 @@ function VectorStylePanel({ controller, className }) {
   };
   const setProfile = (id) => {
     if (style) controller.setWidthProfile(id);
-    else controller.setDefaults({ strokeWidthProfile: (0, import_vector14.widthProfilePreset)(id)?.length ? (0, import_vector14.widthProfilePreset)(id) : null });
+    else controller.setDefaults({ strokeWidthProfile: (0, import_vector15.widthProfilePreset)(id)?.length ? (0, import_vector15.widthProfilePreset)(id) : null });
   };
-  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
   const arrowRow = (end, label) => {
     const key = end === "start" ? "startArrow" : "endArrow";
     const scaleKey = end === "start" ? "startArrowScale" : "endArrowScale";
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass9, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "None" }),
-        import_vector14.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: h, children: import_vector14.VECTOR_ARROWHEAD_LABELS[h] }, h))
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass10, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "None" }),
+        import_vector15.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: h, children: import_vector15.VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "number",
@@ -2422,7 +2526,7 @@ function VectorStylePanel({ controller, className }) {
           step: 0.25,
           "aria-label": `${label} arrowhead scale`,
           title: "Scale (\xD7 stroke width)",
-          className: numberClass7,
+          className: numberClass9,
           value: source[scaleKey],
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -2438,14 +2542,14 @@ function VectorStylePanel({ controller, className }) {
   };
   const paintRow = (key, label) => {
     const paint = source[key];
-    const hex = (0, import_vector14.vectorPaintToHex)(paint);
+    const hex = (0, import_vector15.vectorPaintToHex)(paint);
     const on = paint !== null && paint !== "none";
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
         label
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "color",
@@ -2456,18 +2560,18 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
-      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
     paintRow("fill", "Fill"),
     paintRow("stroke", "Stroke"),
-    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorGradientEditor, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    style && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorGradientEditor, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "number",
@@ -2483,33 +2587,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass9, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector14.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: a, children: import_vector14.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass10, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector15.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: a, children: import_vector15.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Profile" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass9,
+          className: selectClass10,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            import_vector14.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: p.id, children: p.label }, p.id)),
-            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
+            import_vector15.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
-          className: buttonClass11,
+          className: buttonClass13,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -2519,27 +2623,27 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "End"),
-      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Heads" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass9, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "extend", children: "Tip past end" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "tip", children: "Tip at end" })
+      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass10, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "number",
           min: 0,
           step: 1,
           "aria-label": "Corner radius",
-          className: numberClass7,
+          className: numberClass9,
           value: Math.round(source.cornerRadius * 100) / 100,
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -2547,12 +2651,12 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("select", { "aria-label": "Corner kind", className: selectClass9, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector14.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: k, children: import_vector14.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Corner kind", className: selectClass10, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector15.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: k, children: import_vector15.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "corner-smoothing", title: "Corner smoothing: squircle corners that ease into the curve (0.6 is iOS-like)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Smoothing" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "corner-smoothing", title: "Corner smoothing: squircle corners that ease into the curve (0.6 is iOS-like)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Smoothing" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "range",
@@ -2567,9 +2671,9 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Opacity" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    style && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "range",
@@ -2583,26 +2687,28 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorTextPanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorAppearancePanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorEffectsPanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorEnvelopePanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorMaskPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorFramePanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorConnectorPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorConstraintsPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorSymbolsPanel, { controller })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorTextPanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorAppearancePanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorEffectsPanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorEnvelopePanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorMaskPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorFramePanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorConnectorPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorShadingPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorTracePanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorConstraintsPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VectorSymbolsPanel, { controller })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
     ] })
   ] });
 }
@@ -2623,11 +2729,13 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
   VectorMaskPanel,
   VectorMaskedNodes,
   VectorSceneNodes,
+  VectorShadingPanel,
   VectorStylePanel,
   VectorSymbolsPanel,
   VectorTextElement,
   VectorTextPanel,
   VectorToolbar,
+  VectorTracePanel,
   VectorWidthPointEditor,
   useVectorCommands,
   useVectorEditor,