@pixerate/editor-react 0.82.0 → 0.84.0

package/dist/vector/index.cjs

@@ -42,8 +42,10 @@ __export(vector_exports, {
   VectorGradientAnnotator: () => VectorGradientAnnotator,
   VectorGradientDefs: () => VectorGradientDefs,
   VectorGradientEditor: () => VectorGradientEditor,
+  VectorLensPanel: () => VectorLensPanel,
   VectorMaskPanel: () => VectorMaskPanel,
   VectorMaskedNodes: () => VectorMaskedNodes,
+  VectorPerspectivePanel: () => VectorPerspectivePanel,
   VectorProviderEffectsPanel: () => VectorProviderEffectsPanel,
   VectorSceneNodes: () => VectorSceneNodes,
   VectorShadingPanel: () => VectorShadingPanel,
@@ -693,6 +695,11 @@ function VectorCanvas({
             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.perspective && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-perspective-grid": "", fill: "none", pointerEvents: "none", children: [
+            overlay.perspective.planes.map((pl) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-perspective-plane": pl.plane, "data-active": pl.active || void 0, d: pl.d, stroke: pl.active ? accentColor : guideColor, strokeWidth: pl.active ? 1 : 0.75, opacity: pl.active ? 0.55 : 0.25 }, pl.plane)),
+            overlay.perspective.vanishingPoints.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { "data-vector-vanishing-point": i, cx: v.x, cy: v.y, r: 4, stroke: accentColor, strokeWidth: 1.5 }, i)),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { "data-vector-perspective-origin": "", cx: overlay.perspective.origin.x, cy: overlay.perspective.origin.y, r: 3, fill: accentColor })
+          ] }),
           overlay.symmetry.map((sy) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-symmetry-axes": sy.nodeId, stroke: accentColor, strokeDasharray: sy.drawing ? void 0 : "6 4", opacity: sy.drawing ? 0.9 : 0.6, children: sy.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: l.x1, y1: l.y1, x2: l.x2, y2: l.y2 }, i)) }, `sym:${sy.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: [
@@ -829,8 +836,8 @@ function VectorCanvas({
 }
 
 // src/vector/VectorToolbar.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_vector16 = require("@pixerate/editor/vector");
+var import_react11 = __toESM(require("react"), 1);
+var import_vector18 = require("@pixerate/editor/vector");
 
 // src/vector/VectorEffectsPanel.tsx
 var import_vector4 = require("@pixerate/editor/vector");
@@ -2081,16 +2088,114 @@ function VectorSymmetryPanel({ controller, className }) {
   ] });
 }
 
-// src/vector/VectorGradientEditor.tsx
+// src/vector/VectorPerspectivePanel.tsx
+var import_react10 = __toESM(require("react"), 1);
 var import_vector15 = require("@pixerate/editor/vector");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var buttonClass13 = "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 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 var selectClass10 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass9 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
-var buttonClass13 = "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 PLANE_LABELS = { floor: "Floor", left: "Left wall", right: "Right wall", side: "Side wall", front: "Front" };
+function VectorPerspectivePanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const grid = state.document.perspective ?? null;
+  const planes = grid ? (0, import_vector15.vectorPerspectivePlanes)(grid) : [];
+  const [attachTo, setAttachTo] = import_react10.default.useState("");
+  const target = (state.perspectivePlane ?? attachTo) || planes[0];
+  const add = (n) => controller.setPerspective((0, import_vector15.vectorPerspectivePreset)(n, state.document.width, state.document.height));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-perspective-panel": "", "aria-label": "Perspective", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Perspective" }),
+      [1, 2, 3].map((n) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: buttonClass13, "aria-pressed": grid?.vanishingPoints.length === n, "data-vector-perspective-preset": n, title: `A ${n}-point perspective grid for the page`, onClick: () => add(n), children: [
+        n,
+        "-pt"
+      ] }, n))
+    ] }),
+    grid && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("select", { "aria-label": "Draw on plane", title: "New rectangles, ellipses, polygons and stars are drawn on this plane", className: selectClass10, value: state.perspectivePlane ?? "", onChange: (e) => controller.setPerspectivePlane(e.target.value || null), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "Draw flat" }),
+        planes.map((p) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("option", { value: p, children: [
+          "Draw on ",
+          PLANE_LABELS[p].toLowerCase()
+        ] }, p))
+      ] })
+    ] }),
+    grid && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16" }),
+      !state.perspectivePlane && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Attach to plane", className: "h-7 w-24 rounded border border-border bg-background px-1 text-xs", value: attachTo || planes[0], onChange: (e) => setAttachTo(e.target.value), children: planes.map((p) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: p, children: PLANE_LABELS[p] }, p)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass13, disabled: !state.selection.length, title: "Lay the selection onto the plane (read flat from the grid's origin)", onClick: () => controller.attachToPerspective(target), children: "Attach" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Show the grid on the canvas", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "checkbox", "aria-label": "Show perspective grid", checked: grid.visible !== false, onChange: (e) => controller.setPerspective({ ...grid, visible: e.target.checked }) }),
+        "Show"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass13, title: "Remove the grid (art on it stays)", onClick: () => controller.setPerspective(null), children: "Remove" })
+    ] })
+  ] });
+}
+
+// src/vector/VectorLensPanel.tsx
+var import_vector16 = require("@pixerate/editor/vector");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var selectClass11 = "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 VectorLensPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const path = state.selection.map((id) => controller.getNode(id)).find((n) => n?.type === "path" && n.subpaths.some((sp) => sp.closed) && !n.connector);
+  if (!path) return null;
+  const lens = path.lens ?? null;
+  const spec = lens ? import_vector16.VECTOR_LENS_SPECS[lens.type] : null;
+  const ids = [path.id];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-lens-panel": "", "aria-label": "Lens", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Lens" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "select",
+        {
+          "aria-label": "Lens type",
+          className: selectClass11,
+          value: lens?.type ?? "",
+          onChange: (e) => e.target.value ? controller.setLens({ type: e.target.value }, { ids }) : controller.setLens(null, { ids }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", children: "None" }),
+            import_vector16.VECTOR_LENS_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: t, children: import_vector16.VECTOR_LENS_LABELS[t] }, t))
+          ]
+        }
+      )
+    ] }),
+    lens && spec && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "input",
+        {
+          type: "number",
+          "aria-label": "Lens amount",
+          title: `Amount: ${spec.unit} (${spec.min} to ${spec.max})`,
+          className: numberClass9,
+          min: spec.min,
+          max: spec.max,
+          step: lens.type === "magnify" ? 0.1 : 1,
+          value: lens.amount,
+          onChange: (e) => {
+            const v = parseFloat(e.target.value);
+            if (Number.isFinite(v)) controller.setLens({ amount: Math.min(spec.max, Math.max(spec.min, v)) }, { ids, merge: `lens-amount-${path.id}` });
+          }
+        }
+      ),
+      spec.color !== null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "color", "aria-label": "Lens colour", title: "Lens colour", className: "h-7 w-9 rounded border border-border bg-background", value: lens.color ?? spec.color, onChange: (e) => controller.setLens({ color: e.target.value }, { ids, merge: `lens-color-${path.id}` }) })
+    ] })
+  ] });
+}
+
+// src/vector/VectorGradientEditor.tsx
+var import_vector17 = require("@pixerate/editor/vector");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var selectClass12 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass10 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
+var buttonClass14 = "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_vector15.getVectorGradientEditor)(state);
+  const ed = (0, import_vector17.getVectorGradientEditor)(state);
   if (!ed) return null;
   const g = ed.gradient;
   const sel = ed.selected;
@@ -2098,26 +2203,26 @@ function VectorGradientEditor({ controller, className }) {
   const setType = (value) => {
     if (value === "solid") {
       const first = ed.stops[0];
-      controller.setStyle({ [ed.target]: (0, import_vector15.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
+      controller.setStyle({ [ed.target]: (0, import_vector17.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
     } else controller.setGradient({ type: value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
-      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass13, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
-      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
+      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: buttonClass14, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
+      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("select", { "aria-label": "Gradient type", className: selectClass10, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "solid", children: "Solid" }),
-        import_vector15.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: t, children: import_vector15.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("select", { "aria-label": "Gradient type", className: selectClass12, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "solid", children: "Solid" }),
+        import_vector17.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: t, children: import_vector17.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass13, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: buttonClass14, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
     ] }),
-    g && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    g && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             role: "button",
@@ -2131,7 +2236,7 @@ function VectorGradientEditor({ controller, className }) {
             }
           }
         ),
-        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -2145,21 +2250,21 @@ function VectorGradientEditor({ controller, className }) {
           s.index
         ))
       ] }),
-      sel && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      sel && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             type: "color",
             "aria-label": "Stop colour",
             className: "h-7 w-9 cursor-pointer rounded border border-border bg-background",
-            value: (0, import_vector15.vectorPaintToHex)(sel.color) ?? "#000000",
+            value: (0, import_vector17.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_runtime15.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Opacity",
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "input",
             {
               type: "number",
@@ -2167,7 +2272,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 5,
               "aria-label": "Stop opacity",
-              className: numberClass9,
+              className: numberClass10,
               value: percent(sel.opacity ?? 1),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -2176,9 +2281,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "At",
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "input",
             {
               type: "number",
@@ -2186,7 +2291,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 1,
               "aria-label": "Stop position",
-              className: numberClass9,
+              className: numberClass10,
               value: percent(sel.offset),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -2195,9 +2300,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Midpoint",
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "input",
             {
               type: "number",
@@ -2205,7 +2310,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 95,
               step: 1,
               "aria-label": "Stop midpoint",
-              className: numberClass9,
+              className: numberClass10,
               value: percent(sel.midpoint ?? 0.5),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -2214,15 +2319,15 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: buttonClass13, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: buttonClass14, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Colours" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass10, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector15.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: i, children: import_vector15.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-16", children: "Colours" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass12, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector17.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: i, children: import_vector17.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Smooth" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-16", children: "Smooth" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             type: "range",
@@ -2238,26 +2343,26 @@ function VectorGradientEditor({ controller, className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "Spread" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Gradient spread", className: selectClass10, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector15.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: sp, children: import_vector15.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-16", children: "Spread" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("select", { "aria-label": "Gradient spread", className: selectClass12, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector17.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: sp, children: import_vector17.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
       ] }),
-      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-16", children: "On stroke" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass10, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector15.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: m, children: import_vector15.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-16", children: "On stroke" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass12, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector17.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: m, children: import_vector17.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
       ] })
     ] })
   ] });
 }
 
 // src/vector/VectorToolbar.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = 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 buttonClass14 = "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 buttonClass15 = "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_vector16.VECTOR_TOOLS,
+  tools = import_vector18.VECTOR_TOOLS,
   showHistory = true,
   showArrange = true,
   showSnap = true,
@@ -2271,36 +2376,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_vector16.isVectorMaskGroup)(controller.getNode(id)));
-  const [live, setLive] = import_react10.default.useState(false);
+  const maskSelected = state.selection.some((id) => (0, import_vector18.isVectorMaskGroup)(controller.getNode(id)));
+  const [live, setLive] = import_react11.default.useState(false);
   const booleanDisabled = live ? count < 1 : count < 2;
-  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: buttonClass14, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: buttonClass15, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass14,
+        className: buttonClass15,
         "aria-pressed": state.tool === tool,
-        title: `${(0, import_vector16.vectorToolLabel)(tool)} (${import_vector16.VECTOR_TOOL_SHORTCUTS[tool]})`,
-        "aria-label": (0, import_vector16.vectorToolLabel)(tool),
+        title: `${(0, import_vector18.vectorToolLabel)(tool)} (${import_vector18.VECTOR_TOOL_SHORTCUTS[tool]})`,
+        "aria-label": (0, import_vector18.vectorToolLabel)(tool),
         onClick: () => controller.setTool(tool),
-        children: import_vector16.VECTOR_TOOL_GLYPHS[tool]
+        children: import_vector18.VECTOR_TOOL_GLYPHS[tool]
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime16.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    showSnap && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           "data-vector-snap": "",
-          className: buttonClass14,
+          className: buttonClass15,
           "aria-pressed": state.snap.objects,
           title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
           "aria-label": VECTOR_SNAP_TITLE,
@@ -2308,18 +2413,18 @@ function VectorToolbar({
           children: "Snap"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.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_vector16.vectorPolarIncrementOf)(state.snap.angles) ?? ""),
-          onChange: (e) => controller.setSnap({ angles: (0, import_vector16.vectorPolarAngles)(Number(e.target.value)) }),
+          value: String((0, import_vector18.vectorPolarIncrementOf)(state.snap.angles) ?? ""),
+          onChange: (e) => controller.setSnap({ angles: (0, import_vector18.vectorPolarAngles)(Number(e.target.value)) }),
           children: [
-            (0, import_vector16.vectorPolarIncrementOf)(state.snap.angles) === null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", children: "Custom" }),
-            [90, 45, 30, 15].map((n) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("option", { value: n, children: [
+            (0, import_vector18.vectorPolarIncrementOf)(state.snap.angles) === null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "", children: "Custom" }),
+            [90, 45, 30, 15].map((n) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("option", { value: n, children: [
               n,
               "\xB0"
             ] }, n))
@@ -2327,13 +2432,13 @@ function VectorToolbar({
         }
       )
     ] }),
-    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      import_vector16.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      import_vector18.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass14,
+          className: buttonClass15,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -2342,12 +2447,12 @@ function VectorToolbar({
         },
         a.id
       )),
-      import_vector16.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_vector18.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass14,
+          className: buttonClass15,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -2356,9 +2461,9 @@ function VectorToolbar({
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             type: "range",
@@ -2372,9 +2477,9 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             type: "number",
@@ -2390,26 +2495,26 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass14,
+          className: buttonClass15,
           "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_vector16.VECTOR_FILL_GAP }),
+          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector18.VECTOR_FILL_GAP }),
           children: "Gaps"
         }
       )
     ] }),
-    showDistort && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    showDistort && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
         "data-vector-free-distort": "",
-        className: buttonClass14,
+        className: buttonClass15,
         "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",
@@ -2417,15 +2522,15 @@ function VectorToolbar({
         children: "Distort"
       }
     ) }),
-    showBlend && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorBlendControls, { controller }),
-    showArrange && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    showBlend && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             type: "button",
             "data-vector-live-boolean": "",
-            className: buttonClass14,
+            className: buttonClass15,
             "aria-pressed": live,
             title: "Live booleans: keep the shapes editable",
             "aria-label": "Live booleans",
@@ -2442,12 +2547,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_runtime16.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector16.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector18.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass14,
+          className: buttonClass15,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -2456,7 +2561,7 @@ function VectorToolbar({
         },
         a.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.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),
@@ -2471,22 +2576,22 @@ function VectorToolbar({
 }
 function VectorBlendControls({ controller }) {
   const state = useVectorEditorState(controller);
-  const blend = (0, import_vector16.getVectorBlendControls)(state);
+  const blend = (0, import_vector18.getVectorBlendControls)(state);
   const o = blend.options;
   const selected = blend.ids.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass14, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass15, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.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_vector16.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
-        children: import_vector16.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: sp, children: import_vector16.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+        onChange: (e) => (0, import_vector18.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
+        children: import_vector18.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: sp, children: import_vector18.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
-    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
       {
         type: "number",
@@ -2498,29 +2603,29 @@ function VectorBlendControls({ controller }) {
         onChange: (e) => {
           const n = parseFloat(e.target.value);
           if (!Number.isFinite(n) || n <= 0) return;
-          (0, import_vector16.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
+          (0, import_vector18.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "orient",
-        className: buttonClass14,
+        className: buttonClass15,
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
-        onClick: () => (0, import_vector16.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
+        onClick: () => (0, import_vector18.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
         children: "\u293F"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "spine",
-        className: buttonClass14,
+        className: buttonClass15,
         title: "Replace Spine (select a blend and a path)",
         "aria-label": "Replace Spine",
         disabled: !blend.canReplaceSpine,
@@ -2528,15 +2633,15 @@ function VectorBlendControls({ controller }) {
         children: "\u2307"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass14, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass14, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass15, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass15, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
   ] });
 }
-var selectClass11 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass10 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
+var selectClass13 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass11 = "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_vector16.getVectorSelectionStyle)(state);
+  const style = (0, import_vector18.getVectorSelectionStyle)(state);
   const d = state.defaults;
   const source = style ?? {
     fill: d.fill ?? null,
@@ -2549,7 +2654,7 @@ function VectorStylePanel({ controller, className }) {
     arrowAlign: d.arrowAlign ?? "extend",
     startArrowScale: d.startArrowScale ?? 1,
     endArrowScale: d.endArrowScale ?? 1,
-    widthProfile: (0, import_vector16.widthProfilePresetId)(d.strokeWidthProfile),
+    widthProfile: (0, import_vector18.widthProfilePresetId)(d.strokeWidthProfile),
     cornerRadius: d.cornerRadius,
     cornerKind: d.cornerKind ?? "round",
     cornerSmoothing: 0,
@@ -2563,19 +2668,19 @@ function VectorStylePanel({ controller, className }) {
   };
   const setProfile = (id) => {
     if (style) controller.setWidthProfile(id);
-    else controller.setDefaults({ strokeWidthProfile: (0, import_vector16.widthProfilePreset)(id)?.length ? (0, import_vector16.widthProfilePreset)(id) : null });
+    else controller.setDefaults({ strokeWidthProfile: (0, import_vector18.widthProfilePreset)(id)?.length ? (0, import_vector18.widthProfilePreset)(id) : null });
   };
-  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime16.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass11, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", children: "None" }),
-        import_vector16.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: h, children: import_vector16.VECTOR_ARROWHEAD_LABELS[h] }, h))
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass13, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "", children: "None" }),
+        import_vector18.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: h, children: import_vector18.VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "number",
@@ -2583,7 +2688,7 @@ function VectorStylePanel({ controller, className }) {
           step: 0.25,
           "aria-label": `${label} arrowhead scale`,
           title: "Scale (\xD7 stroke width)",
-          className: numberClass10,
+          className: numberClass11,
           value: source[scaleKey],
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -2599,14 +2704,14 @@ function VectorStylePanel({ controller, className }) {
   };
   const paintRow = (key, label) => {
     const paint = source[key];
-    const hex = (0, import_vector16.vectorPaintToHex)(paint);
+    const hex = (0, import_vector18.vectorPaintToHex)(paint);
     const on = paint !== null && paint !== "none";
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime18.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "color",
@@ -2617,18 +2722,18 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
-      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime16.jsx)(VectorGradientEditor, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    style && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorGradientEditor, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "number",
@@ -2644,33 +2749,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass11, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector16.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: a, children: import_vector16.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass13, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector18.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: a, children: import_vector18.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16", children: "Profile" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass11,
+          className: selectClass13,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            import_vector16.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: p.id, children: p.label }, p.id)),
-            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
+            import_vector18.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
-          className: buttonClass14,
+          className: buttonClass15,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -2680,27 +2785,27 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "End"),
-      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16", children: "Heads" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass11, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "extend", children: "Tip past end" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "tip", children: "Tip at end" })
+      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass13, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "number",
           min: 0,
           step: 1,
           "aria-label": "Corner radius",
-          className: numberClass10,
+          className: numberClass11,
           value: Math.round(source.cornerRadius * 100) / 100,
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -2708,12 +2813,12 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("select", { "aria-label": "Corner kind", className: selectClass11, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector16.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: k, children: import_vector16.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Corner kind", className: selectClass13, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector18.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: k, children: import_vector18.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("span", { className: "w-16", children: "Smoothing" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsx)("span", { className: "w-16", children: "Smoothing" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "range",
@@ -2728,9 +2833,9 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16", children: "Opacity" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    style && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "range",
@@ -2744,33 +2849,35 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorTextPanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorAppearancePanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorEffectsPanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorEnvelopePanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorMaskPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorFramePanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorConnectorPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorShadingPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorSymmetryPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorTracePanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorConstraintsPanel, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VectorSymbolsPanel, { controller })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorTextPanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorAppearancePanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorEffectsPanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorEnvelopePanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorMaskPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorFramePanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorConnectorPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorShadingPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorSymmetryPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorPerspectivePanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorLensPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorTracePanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorConstraintsPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VectorSymbolsPanel, { controller })
   ] });
 }
 
 // src/effects/useEffects.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useEffects(host, provider) {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!host || !provider) return;
     return host.useEffects(provider);
   }, [host, provider]);
 }
 function useEffectDescription(provider, effect) {
-  const [state, setState] = (0, import_react11.useState)({ key: "", description: null, error: null });
+  const [state, setState] = (0, import_react12.useState)({ key: "", description: null, error: null });
   const key = provider && effect ? `${provider.id}:${effect}` : "";
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!provider || !effect) return;
     let live = true;
     Promise.resolve().then(() => provider.describe(effect)).then(
@@ -2785,13 +2892,13 @@ function useEffectDescription(provider, effect) {
 }
 
 // src/effects/EffectThumbnail.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_effects = require("@pixerate/editor/effects");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function EffectThumbnail({ provider, effect, width = 96, height = 54, className = "" }) {
-  const ref = (0, import_react12.useRef)(null);
-  const [failed, setFailed] = (0, import_react12.useState)(effect.kind === "motion");
-  (0, import_react12.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  const [failed, setFailed] = (0, import_react13.useState)(effect.kind === "motion");
+  (0, import_react13.useEffect)(() => {
     if (effect.kind === "motion") return;
     let live = true;
     (0, import_effects.renderEffectThumbnail)(provider, effect, { width, height }).then(
@@ -2806,28 +2913,28 @@ function EffectThumbnail({ provider, effect, width = 96, height = 54, className
       live = false;
     };
   }, [provider, effect, width, height]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       className: `relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] ${className}`,
       style: { aspectRatio: `${width} / ${height}` },
       "data-effect-thumbnail": effect.id,
-      children: failed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground", children: effect.kind === "motion" ? "Motion" : "No preview" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("canvas", { ref, width, height, className: "h-full w-full", "aria-hidden": "true" })
+      children: failed ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground", children: effect.kind === "motion" ? "Motion" : "No preview" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("canvas", { ref, width, height, className: "h-full w-full", "aria-hidden": "true" })
     }
   );
 }
 
 // src/effects/EffectsBrowser.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_effects2 = require("@pixerate/editor/effects");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function EffectsBrowser({ provider, uses, kinds, onPick, thumbnails = true, title = "Effects", className = "" }) {
-  const [all, setAll] = (0, import_react13.useState)([]);
-  const [query, setQuery] = (0, import_react13.useState)("");
-  const [category, setCategory] = (0, import_react13.useState)("");
-  const [use, setUse] = (0, import_react13.useState)("");
-  const [error, setError] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
+  const [all, setAll] = (0, import_react14.useState)([]);
+  const [query, setQuery] = (0, import_react14.useState)("");
+  const [category, setCategory] = (0, import_react14.useState)("");
+  const [use, setUse] = (0, import_react14.useState)("");
+  const [error, setError] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
     if (!provider) return setAll([]);
     let live = true;
     Promise.resolve().then(() => provider.list()).then(
@@ -2838,8 +2945,8 @@ function EffectsBrowser({ provider, uses, kinds, onPick, thumbnails = true, titl
       live = false;
     };
   }, [provider]);
-  const [found, setFound] = (0, import_react13.useState)([]);
-  (0, import_react13.useEffect)(() => {
+  const [found, setFound] = (0, import_react14.useState)([]);
+  (0, import_react14.useEffect)(() => {
     if (!provider) return setFound([]);
     let live = true;
     Promise.resolve().then(() => provider.search(query, { ...category ? { category } : {}, ...use ? { use } : {} })).then((list) => live && setFound(list), () => live && setFound([]));
@@ -2848,14 +2955,14 @@ function EffectsBrowser({ provider, uses, kinds, onPick, thumbnails = true, titl
     };
   }, [provider, query, category, use]);
   const allowed = (e) => (!kinds || kinds.includes(e.kind)) && (uses ? e.kind !== "motion" || uses.includes("motion") : e.kind !== "motion") && (!uses || e.uses.some((u) => uses.includes(u)));
-  const categories = (0, import_react13.useMemo)(() => [...new Set(all.filter(allowed).map((e) => e.category))], [all, uses, kinds]);
+  const categories = (0, import_react14.useMemo)(() => [...new Set(all.filter(allowed).map((e) => e.category))], [all, uses, kinds]);
   const shown = found.filter(allowed);
   if (!provider)
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground ${className}`, "data-effects-browser": "", "data-effects-unavailable": "", children: "No effects provider is registered, so effects cannot be added. Effects already in the document are kept." });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: `flex flex-col gap-2 ${className}`, "data-effects-browser": "", "aria-label": "Effects browser", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-xs font-semibold", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground ${className}`, "data-effects-browser": "", "data-effects-unavailable": "", children: "No effects provider is registered, so effects cannot be added. Effects already in the document are kept." });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("section", { className: `flex flex-col gap-2 ${className}`, "data-effects-browser": "", "aria-label": "Effects browser", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-xs font-semibold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           type: "search",
@@ -2866,17 +2973,17 @@ function EffectsBrowser({ provider, uses, kinds, onPick, thumbnails = true, titl
           onChange: (e) => setQuery(e.currentTarget.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Category", value: category, onChange: (e) => setCategory(e.currentTarget.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "", children: "All categories" }),
-        categories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: c, children: c }, c))
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Category", value: category, onChange: (e) => setCategory(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: "", children: "All categories" }),
+        categories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: c, children: c }, c))
       ] }),
-      uses && uses.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Use", value: use, onChange: (e) => setUse(e.currentTarget.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "", children: "Any use" }),
-        uses.map((u) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: u, children: import_effects2.EFFECT_USE_LABELS[u] }, u))
+      uses && uses.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Use", value: use, onChange: (e) => setUse(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: "", children: "Any use" }),
+        uses.map((u) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: u, children: import_effects2.EFFECT_USE_LABELS[u] }, u))
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "grid max-h-96 grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5 overflow-y-auto", role: "list", children: shown.map((e) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "grid max-h-96 grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5 overflow-y-auto", role: "list", children: shown.map((e) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
         type: "button",
@@ -2885,25 +2992,25 @@ function EffectsBrowser({ provider, uses, kinds, onPick, thumbnails = true, titl
         "data-effect-id": e.id,
         onClick: () => onPick(e),
         children: [
-          thumbnails && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EffectThumbnail, { provider, effect: e }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-[11px] font-medium", children: e.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-[10px] text-muted-foreground", children: e.uses.map((u) => import_effects2.EFFECT_USE_LABELS[u]).join(" \xB7 ") })
+          thumbnails && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EffectThumbnail, { provider, effect: e }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-[11px] font-medium", children: e.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-[10px] text-muted-foreground", children: e.uses.map((u) => import_effects2.EFFECT_USE_LABELS[u]).join(" \xB7 ") })
         ]
       }
     ) }, e.id)) }),
-    !shown.length && !error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects match." })
+    !shown.length && !error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects match." })
   ] });
 }
 
 // src/effects/EffectParameters.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_effects3 = require("@pixerate/editor/effects");
 var import_parameters2 = require("@pixerate/editor/parameters");
 
 // src/parameters/fields.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_parameters = require("@pixerate/editor/parameters");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var parameterInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
 var parameterButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
 var rangeClass = "h-4 w-full min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50";
@@ -2927,7 +3034,7 @@ function ParameterCommitInput({ value, onCommit, multiline, className, onKeyDown
     onKeyDown: keyDown,
     ...rest
   };
-  return multiline ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("textarea", { ...props, className: `${props.className} h-auto min-h-[3.5rem] py-1` }, value) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "text", ...props }, value);
+  return multiline ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { ...props, className: `${props.className} h-auto min-h-[3.5rem] py-1` }, value) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "text", ...props }, value);
 }
 var plainNumber = (field, value) => (0, import_parameters.formatParameterNumber)({ ...field, unit: void 0 }, value);
 function ParameterNumberInput({
@@ -2938,8 +3045,8 @@ function ParameterNumberInput({
   id,
   "aria-label": ariaLabel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       ParameterCommitInput,
       {
         id,
@@ -2961,21 +3068,21 @@ function ParameterNumberInput({
         }
       }
     ),
-    field.unit && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground", children: field.unit })
+    field.unit && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground", children: field.unit })
   ] });
 }
 function ParameterSlider(props) {
   const { field, value, onChange, onGestureStart, onGestureEnd, disabled } = props;
-  const dragging = (0, import_react14.useRef)(false);
+  const dragging = (0, import_react15.useRef)(false);
   const end = () => {
     if (!dragging.current) return;
     dragging.current = false;
     onGestureEnd?.();
   };
-  if (!(0, import_parameters.isSliderField)(field)) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterNumberInput, { ...props });
+  if (!(0, import_parameters.isSliderField)(field)) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterNumberInput, { ...props });
   const step = (0, import_parameters.parameterStep)(field);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "input",
       {
         type: "range",
@@ -2998,11 +3105,11 @@ function ParameterSlider(props) {
         onChange: (e) => onChange((0, import_parameters.clampParameterNumber)(field, Number(e.target.value)))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterNumberInput, { ...props, id: props.id, "aria-label": `${(0, import_parameters.parameterLabel)(field)} value` }) })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterNumberInput, { ...props, id: props.id, "aria-label": `${(0, import_parameters.parameterLabel)(field)} value` }) })
   ] });
 }
 function ParameterToggle({ field, value, onChange, disabled, id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "button",
     {
       type: "button",
@@ -3013,7 +3120,7 @@ function ParameterToggle({ field, value, onChange, disabled, id }) {
       disabled: disabled || field.readOnly,
       onClick: () => onChange(!value),
       className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50 ${value ? "bg-primary" : "bg-muted"}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "span",
         {
           className: `pointer-events-none block h-4 w-4 rounded-full bg-background shadow transition-transform ${value ? "translate-x-4" : "translate-x-0.5"}`
@@ -3026,7 +3133,7 @@ function ParameterSelect({ field, value, onChange, disabled, id }) {
   const options = (0, import_parameters.getChoiceOptions)(field);
   const off = disabled || field.readOnly;
   if (field.control === "segmented") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "radiogroup", "aria-label": (0, import_parameters.parameterLabel)(field), className: "inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "radiogroup", "aria-label": (0, import_parameters.parameterLabel)(field), className: "inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       {
         type: "button",
@@ -3042,7 +3149,7 @@ function ParameterSelect({ field, value, onChange, disabled, id }) {
     )) });
   }
   const index = options.findIndex((o) => o.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "select",
     {
       id,
@@ -3054,12 +3161,12 @@ function ParameterSelect({ field, value, onChange, disabled, id }) {
         if (option) onChange(option.value);
       },
       className: parameterInputClass,
-      children: options.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: String(i), title: o.description, children: (0, import_parameters.choiceOptionLabel)(o) }, String(o.value)))
+      children: options.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: String(i), title: o.description, children: (0, import_parameters.choiceOptionLabel)(o) }, String(o.value)))
     }
   );
 }
 function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd, disabled, id }) {
-  const picking = (0, import_react14.useRef)(false);
+  const picking = (0, import_react15.useRef)(false);
   const alpha = !!field.alpha;
   const hex = (0, import_parameters.normalizeHexColor)(value, true) ?? "#000000ff";
   const rgb = hex.slice(0, 7);
@@ -3075,11 +3182,11 @@ function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd,
     picking.current = false;
     onGestureEnd?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "absolute inset-0", style: { background: alpha ? hex : rgb } }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "absolute inset-0", style: { background: alpha ? hex : rgb } }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             type: "color",
@@ -3095,7 +3202,7 @@ function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd,
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         ParameterCommitInput,
         {
           id,
@@ -3111,7 +3218,7 @@ function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd,
         }
       )
     ] }),
-    alpha && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    alpha && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "input",
       {
         type: "range",
@@ -3129,10 +3236,10 @@ function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd,
         onChange: (e) => onChange(`${rgb}${Number(e.target.value).toString(16).padStart(2, "0")}`)
       }
     ),
-    field.swatches && field.swatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-wrap gap-1", children: field.swatches.map((s) => {
+    field.swatches && field.swatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-wrap gap-1", children: field.swatches.map((s) => {
       const swatch = (0, import_parameters.normalizeHexColor)(s, alpha);
       if (!swatch) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "button",
         {
           type: "button",
@@ -3151,11 +3258,11 @@ function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd,
 }
 function ParameterVector({ field, value, onChange, disabled, id }) {
   const size = (0, import_parameters.vectorSize)(field);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }, children: Array.from({ length: size }, (_, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }, children: Array.from({ length: size }, (_, i) => {
     const component = (0, import_parameters.vectorComponentField)(field, i);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex min-w-0 items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "w-3 shrink-0 text-[10px] uppercase text-muted-foreground", children: component.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex min-w-0 items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-3 shrink-0 text-[10px] uppercase text-muted-foreground", children: component.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         ParameterNumberInput,
         {
           field: component,
@@ -3172,11 +3279,11 @@ function ParameterVector({ field, value, onChange, disabled, id }) {
 function ParameterImage({ field, value, onChange, disabled, id, resolveFile }) {
   const off = disabled || field.readOnly;
   const name = (0, import_parameters.parameterLabel)(field);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input bg-muted", children: value ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src: value, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "None" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input bg-muted", children: value ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: value, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "None" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           ParameterCommitInput,
           {
             id,
@@ -3187,10 +3294,10 @@ function ParameterImage({ field, value, onChange, disabled, id, resolveFile }) {
             onCommit: (text) => onChange(text.trim())
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-1", children: [
-          resolveFile && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: `${parameterButtonClass} cursor-pointer ${off ? "pointer-events-none opacity-50" : ""}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-1", children: [
+          resolveFile && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: `${parameterButtonClass} cursor-pointer ${off ? "pointer-events-none opacity-50" : ""}`, children: [
             "Choose file\u2026",
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "input",
               {
                 type: "file",
@@ -3206,11 +3313,11 @@ function ParameterImage({ field, value, onChange, disabled, id, resolveFile }) {
               }
             )
           ] }),
-          value && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: parameterButtonClass, disabled: off, onClick: () => onChange(""), "aria-label": `Clear ${name}`, children: "Clear" })
+          value && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: parameterButtonClass, disabled: off, onClick: () => onChange(""), "aria-label": `Clear ${name}`, children: "Clear" })
         ] })
       ] })
     ] }),
-    field.options && field.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-wrap gap-1", children: field.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    field.options && field.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-wrap gap-1", children: field.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       {
         type: "button",
@@ -3220,14 +3327,14 @@ function ParameterImage({ field, value, onChange, disabled, id, resolveFile }) {
         disabled: off,
         onClick: () => onChange(o.url),
         className: "h-9 w-12 overflow-hidden rounded border border-input aria-pressed:ring-2 aria-pressed:ring-primary",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src: o.url, alt: "", className: "h-full w-full object-cover" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: o.url, alt: "", className: "h-full w-full object-cover" })
       },
       o.url
     )) })
   ] });
 }
 function ParameterText({ field, value, onChange, disabled, id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ParameterCommitInput,
     {
       id,
@@ -3246,31 +3353,31 @@ function ParameterFieldControl({ field, value, onChange, resolveFile, ...rest })
   switch (field.type) {
     case "number":
     case "int":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterSlider, { field, value, onChange: set, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterSlider, { field, value, onChange: set, ...rest });
     case "boolean":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterToggle, { field, value, onChange: set, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterToggle, { field, value, onChange: set, ...rest });
     case "choice":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterSelect, { field, value, onChange: set, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterSelect, { field, value, onChange: set, ...rest });
     case "color":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterColor, { field, value, onChange: set, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterColor, { field, value, onChange: set, ...rest });
     case "vector":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterVector, { field, value, onChange: set, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterVector, { field, value, onChange: set, ...rest });
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterImage, { field, value, onChange: set, resolveFile, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterImage, { field, value, onChange: set, resolveFile, ...rest });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ParameterText, { field, value, onChange: set, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ParameterText, { field, value, onChange: set, ...rest });
   }
 }
 
 // src/effects/EffectParameters.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function EffectParameters({ description, values, onChange, onReset, keyframed, onPreset, disabled = false, className = "" }) {
-  const fields = (0, import_react15.useMemo)(() => (0, import_effects3.effectParameterFields)(description), [description]);
-  const idBase = (0, import_react15.useId)();
-  const gesture = import_react15.default.useRef(null);
-  const count = import_react15.default.useRef(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `space-y-2 ${className}`, "data-effect-parameters": description.id, children: [
-    onPreset && description.presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  const fields = (0, import_react16.useMemo)(() => (0, import_effects3.effectParameterFields)(description), [description]);
+  const idBase = (0, import_react16.useId)();
+  const gesture = import_react16.default.useRef(null);
+  const count = import_react16.default.useRef(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `space-y-2 ${className}`, "data-effect-parameters": description.id, children: [
+    onPreset && description.presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "select",
       {
         className: "w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs",
@@ -3282,8 +3389,8 @@ function EffectParameters({ description, values, onChange, onReset, keyframed, o
           if (preset) onPreset({ ...description.defaults, ...preset.values });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: "", children: "Presets\u2026" }),
-          description.presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: p.name, children: p.name }, p.name))
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "", children: "Presets\u2026" }),
+          description.presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: p.name, children: p.name }, p.name))
         ]
       }
     ),
@@ -3293,13 +3400,13 @@ function EffectParameters({ description, values, onChange, onReset, keyframed, o
       const keyed = keyframed?.has(field.id) ?? false;
       const value = (0, import_effects3.effectFieldValue)(field, values[field.id]);
       const changed = !keyed && !(0, import_parameters2.parameterValuesEqual)(value, field.default);
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-1", "data-effect-control": field.id, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium", title: field.description, children: label }),
-          keyed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "keyframed" }),
-          onReset && changed && !disabled && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "rounded px-1 text-[11px] text-muted-foreground hover:text-foreground", "aria-label": `Reset ${label}`, onClick: () => onReset(field.id), children: "\u21BA" })
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1", "data-effect-control": field.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium", title: field.description, children: label }),
+          keyed && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "keyframed" }),
+          onReset && changed && !disabled && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: "rounded px-1 text-[11px] text-muted-foreground hover:text-foreground", "aria-label": `Reset ${label}`, onClick: () => onReset(field.id), children: "\u21BA" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ParameterFieldControl,
           {
             field,
@@ -3313,25 +3420,25 @@ function EffectParameters({ description, values, onChange, onReset, keyframed, o
         )
       ] }, field.id);
     }),
-    !fields.length && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No controls." })
+    !fields.length && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No controls." })
   ] });
 }
 
 // src/vector/VectorProviderEffectsPanel.tsx
-var import_react16 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var btn = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
 function Controls({ controller, group }) {
   const provider = controller.effectsProvider;
   const tag = group.providerEffect;
   const { description, error } = useEffectDescription(provider, tag.effect);
-  const [message, setMessage] = (0, import_react16.useState)(null);
+  const [message, setMessage] = (0, import_react17.useState)(null);
   const run = (work) => void work.then(() => setMessage(null), (e) => setMessage(e instanceof Error ? e.message : String(e)));
-  if (!provider) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider: the shapes are kept as they are." });
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[11px] text-amber-500", children: error });
-  if (!description) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  if (!provider) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider: the shapes are kept as they are." });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       EffectParameters,
       {
         description,
@@ -3341,18 +3448,18 @@ function Controls({ controller, group }) {
         onPreset: (v) => run(controller.updateVectorEffect(group.id, v))
       }
     ),
-    message && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+    message && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
   ] });
 }
 function VectorProviderEffectsPanel({ controller, className = "" }) {
   const state = useVectorEditorState(controller);
-  const provider = (0, import_react16.useSyncExternalStore)(
+  const provider = (0, import_react17.useSyncExternalStore)(
     (cb) => controller.effects.subscribe(cb),
     () => controller.effects.provider,
     () => controller.effects.provider
   );
-  const [browse, setBrowse] = (0, import_react16.useState)(false);
-  const [message, setMessage] = (0, import_react16.useState)(null);
+  const [browse, setBrowse] = (0, import_react17.useState)(false);
+  const [message, setMessage] = (0, import_react17.useState)(null);
   void state;
   const groups = controller.vectorEffectGroups();
   const selected = groups.filter((g) => state.selection.includes(g.id));
@@ -3360,41 +3467,41 @@ function VectorProviderEffectsPanel({ controller, className = "" }) {
     setMessage(null);
     Promise.resolve().then(work).catch((e) => setMessage(e instanceof Error ? e.message : String(e)));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Vector effects", "data-vector-provider-effects": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex-1 font-semibold", children: "Effects" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: btn, disabled: !provider, "aria-pressed": browse, onClick: () => setBrowse(!browse), children: "Add effect\u2026" })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Vector effects", "data-vector-provider-effects": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: btn, disabled: !provider, "aria-pressed": browse, onClick: () => setBrowse(!browse), children: "Add effect\u2026" })
     ] }),
-    !provider && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effect groups are kept as shapes." }),
-    browse && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EffectsBrowser, { provider, kinds: ["vector"], title: "Vector effects", onPick: (e) => (setBrowse(false), run(() => controller.addVectorEffect(e.id))) }),
-    selected.map((g) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-effect-group": g.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "min-w-0 flex-1 truncate font-medium", children: g.providerEffect.name ?? g.providerEffect.effect }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: btn, title: "Keep the shapes as a plain group", onClick: () => run(() => controller.detachVectorEffect(g.id)), children: "Detach" })
+    !provider && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effect groups are kept as shapes." }),
+    browse && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EffectsBrowser, { provider, kinds: ["vector"], title: "Vector effects", onPick: (e) => (setBrowse(false), run(() => controller.addVectorEffect(e.id))) }),
+    selected.map((g) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-effect-group": g.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 flex-1 truncate font-medium", children: g.providerEffect.name ?? g.providerEffect.effect }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: btn, title: "Keep the shapes as a plain group", onClick: () => run(() => controller.detachVectorEffect(g.id)), children: "Detach" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Controls, { controller, group: g })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Controls, { controller, group: g })
     ] }, g.id)),
-    groups.length > 0 && !selected.length && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
+    groups.length > 0 && !selected.length && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
       "Select an effect group (",
       groups.length,
       " in the drawing) to change it."
     ] }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+    message && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, effects, className }) {
   useEffects(controller, effects);
   const effectsShown = !!effects || controller.vectorEffectGroups().length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full shrink-0 flex-col gap-2 md:w-56", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VectorStylePanel, { controller, className: "rounded-md border border-border p-3" }),
-        effectsShown && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VectorProviderEffectsPanel, { controller, className: "rounded-md border border-border p-3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full shrink-0 flex-col gap-2 md:w-56", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VectorStylePanel, { controller, className: "rounded-md border border-border p-3" }),
+        effectsShown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VectorProviderEffectsPanel, { controller, className: "rounded-md border border-border p-3" })
       ] })
     ] })
   ] });
@@ -3413,8 +3520,10 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
   VectorGradientAnnotator,
   VectorGradientDefs,
   VectorGradientEditor,
+  VectorLensPanel,
   VectorMaskPanel,
   VectorMaskedNodes,
+  VectorPerspectivePanel,
   VectorProviderEffectsPanel,
   VectorSceneNodes,
   VectorShadingPanel,