@pixerate/editor-react 0.66.0 → 0.68.0

package/dist/vector/index.cjs

@@ -30,10 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/vector/index.ts
 var vector_exports = {};
 __export(vector_exports, {
+  VectorAppearancePanel: () => VectorAppearancePanel,
   VectorCanvas: () => VectorCanvas,
   VectorEditor: () => VectorEditor,
   VectorEffectsPanel: () => VectorEffectsPanel,
   VectorEnvelopePanel: () => VectorEnvelopePanel,
+  VectorFilterDefs: () => VectorFilterDefs,
   VectorGradientAnnotator: () => VectorGradientAnnotator,
   VectorGradientDefs: () => VectorGradientDefs,
   VectorGradientEditor: () => VectorGradientEditor,
@@ -91,7 +93,7 @@ function useVectorCommands(registry, controller, options = {}) {
 }
 
 // src/vector/VectorCanvas.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"), 1);
 var import_vector3 = require("@pixerate/editor/vector");
 
 // src/vector/VectorWidthPointEditor.tsx
@@ -224,37 +226,95 @@ function VectorGradientAnnotator({ annotator: g, accentColor = import_vector3.VE
     ] }, s.index))
   ] });
 }
+function VectorFilterDefs({ filters }) {
+  if (!filters.length) return null;
+  const primitive = (p, key) => import_react3.default.createElement(p.tag, { key, ...p.attrs }, p.children?.map(primitive));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("filter", { id: f.id, filterUnits: "userSpaceOnUse", x: f.x, y: f.y, width: f.width, height: f.height, colorInterpolationFilters: "sRGB", children: f.primitives.map(primitive) }, f.id)) });
+}
+var blendStyle = (blendMode) => blendMode ? { mixBlendMode: blendMode } : void 0;
 function VectorSceneNodes({ nodes }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: nodes.map(
-    (node) => node.kind === "group" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorSceneNodes, { nodes: node.children }) }, node.id) : node.strokeParts ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPartedPath, { node }, node.id) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "path",
+    (node) => node.kind === "group" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "g",
       {
         "data-vector-id": node.id,
         transform: node.transform,
+        opacity: node.opacity < 1 ? node.opacity : void 0,
+        filter: node.filter,
+        style: blendStyle(node.blendMode),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorSceneNodes, { nodes: node.children })
+      },
+      node.id
+    ) : node.layers ? (
+      // Fill and stroke stacks: each layer in order, bottom to top.
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "g",
+        {
+          "data-vector-id": node.id,
+          transform: node.transform,
+          opacity: node.opacity < 1 ? node.opacity : void 0,
+          filter: node.filter,
+          style: blendStyle(node.blendMode),
+          children: node.layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`))
+        },
+        node.id
+      )
+    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      VectorPaintPath,
+      {
+        paint: node,
         d: node.d,
-        fill: node.fill,
         fillRule: node.fillRule,
-        stroke: node.stroke,
-        strokeWidth: node.stroke === "none" ? void 0 : node.strokeWidth,
-        strokeLinecap: node.strokeLinecap,
-        strokeLinejoin: node.strokeLinejoin,
-        strokeDasharray: node.strokeDasharray,
-        opacity: node.opacity < 1 ? node.opacity : void 0
+        id: node.id,
+        transform: node.transform,
+        filter: node.filter,
+        blendMode: node.blendMode
       },
       node.id
     )
   ) });
 }
-function VectorPartedPath({ node }) {
-  const sp = node.strokeParts;
+function VectorPaintPath({
+  paint,
+  d,
+  fillRule,
+  id,
+  transform,
+  filter,
+  blendMode,
+  layer
+}) {
+  const opacity = paint.opacity < 1 ? paint.opacity : void 0;
+  const style = blendStyle(blendMode ?? (layer ? paint.blendMode : void 0));
+  const sp = paint.strokeParts;
+  if (!sp)
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        "data-vector-id": id,
+        "data-vector-layer": layer,
+        transform,
+        d,
+        fill: paint.fill,
+        fillRule,
+        stroke: paint.stroke,
+        strokeWidth: paint.stroke === "none" ? void 0 : paint.strokeWidth,
+        strokeLinecap: paint.strokeLinecap,
+        strokeLinejoin: paint.strokeLinejoin,
+        strokeDasharray: paint.strokeDasharray,
+        opacity,
+        filter,
+        style
+      }
+    );
   const clip = sp.clip;
   const b = clip?.bounds;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-id": node.id, "data-vector-stroke-align": sp.align, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, children: [
-    clip && b && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: clip.kind === "clip" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: clip.id, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: node.d, clipRule: node.fillRule }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mask", { id: clip.id, maskUnits: "userSpaceOnUse", x: b.x, y: b.y, width: b.width, height: b.height, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-id": id, "data-vector-layer": layer, "data-vector-stroke-align": sp.align, transform, opacity, filter, style, children: [
+    clip && b && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: clip.kind === "clip" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: clip.id, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d, clipRule: fillRule }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mask", { id: clip.id, maskUnits: "userSpaceOnUse", x: b.x, y: b.y, width: b.width, height: b.height, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: b.x, y: b.y, width: b.width, height: b.height, fill: "#fff" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: node.d, fill: "#000", fillRule: node.fillRule })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d, fill: "#000", fillRule })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-part": "fill", d: node.d, fill: node.fill, fillRule: node.fillRule, stroke: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-part": "fill", d, fill: paint.fill, fillRule, stroke: "none" }),
     sp.outline !== void 0 ? (
       // A variable-width stroke: its outline, filled.
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -262,7 +322,7 @@ function VectorPartedPath({ node }) {
         {
           "data-vector-part": "stroke-outline",
           d: sp.outline,
-          fill: node.stroke,
+          fill: paint.stroke,
           clipPath: clip?.kind === "clip" ? `url(#${clip.id})` : void 0,
           mask: clip?.kind === "mask" ? `url(#${clip.id})` : void 0
         }
@@ -273,16 +333,16 @@ function VectorPartedPath({ node }) {
         "data-vector-part": "stroke",
         d: sp.d,
         fill: "none",
-        stroke: node.stroke,
+        stroke: paint.stroke,
         strokeWidth: sp.width,
-        strokeLinecap: node.strokeLinecap,
-        strokeLinejoin: node.strokeLinejoin,
-        strokeDasharray: node.strokeDasharray,
+        strokeLinecap: paint.strokeLinecap,
+        strokeLinejoin: paint.strokeLinejoin,
+        strokeDasharray: paint.strokeDasharray,
         clipPath: clip?.kind === "clip" ? `url(#${clip.id})` : void 0,
         mask: clip?.kind === "mask" ? `url(#${clip.id})` : void 0
       }
     ),
-    sp.heads.map((head, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-part": "head", d: head, fill: node.stroke }, i))
+    sp.heads.map((head, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-part": "head", d: head, fill: paint.stroke }, i))
   ] });
 }
 function VectorCanvas({
@@ -388,6 +448,7 @@ function VectorCanvas({
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: 8, y: 8, width: 8, height: 8, fill: "#e5e7eb" })
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorGradientDefs, { defs: scene.defs }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorFilterDefs, { filters: scene.filters }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "rect",
           {
@@ -568,7 +629,7 @@ function VectorCanvas({
 
 // src/vector/VectorToolbar.tsx
 var import_react5 = __toESM(require("react"), 1);
-var import_vector7 = require("@pixerate/editor/vector");
+var import_vector8 = require("@pixerate/editor/vector");
 
 // src/vector/VectorEffectsPanel.tsx
 var import_vector4 = require("@pixerate/editor/vector");
@@ -710,14 +771,222 @@ function VectorEffectsPanel({ controller, className }) {
   ] });
 }
 
-// src/vector/VectorEnvelopePanel.tsx
-var import_react4 = __toESM(require("react"), 1);
+// src/vector/VectorAppearancePanel.tsx
 var import_vector5 = require("@pixerate/editor/vector");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var buttonClass2 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
 var numberClass2 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
 var selectClass2 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var headingClass = "text-[11px] font-medium uppercase tracking-wide text-muted-foreground";
 var labelClass2 = "w-full truncate text-[11px] text-muted-foreground";
+function VectorAppearancePanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const panel = (0, import_vector5.getVectorAppearancePanel)(state);
+  if (!panel) return null;
+  const end = () => controller.endMergedEdit();
+  const ids = panel.pathIds;
+  const update = (l, patch, merge = false) => controller.updatePaintLayer(l.kind, l.index, patch, { ids, merge });
+  const layerRow = (l, count) => {
+    const name = `${l.kind === "fill" ? "Fill" : "Stroke"} ${l.index + 1}`;
+    if (l.unknownKind)
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-[11px] text-muted-foreground", "data-vector-layer": `${l.kind}-${l.index}`, children: [
+        name,
+        ": ",
+        l.unknownKind,
+        " (not drawn by this version)"
+      ] }, `${l.kind}-${l.index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-layer": `${l.kind}-${l.index}`, "data-vector-layer-editing": l.editing ? "" : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", "aria-label": `${name} visible`, title: "Show", checked: l.visible, onChange: (e) => update(l, { visible: e.target.checked }) }),
+        l.gradient ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${name} gradient`,
+            title: "Edit this gradient",
+            className: "h-7 w-10 rounded border border-border",
+            style: { background: l.swatch },
+            onClick: () => controller.setGradientTarget(l.kind, l.index)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "color",
+            "aria-label": `${name} colour`,
+            className: "h-7 w-10 cursor-pointer rounded border border-border bg-background",
+            value: l.color ?? "#000000",
+            onChange: (e) => update(l, { paint: e.target.value }, true),
+            onBlur: end
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "number",
+            min: 0,
+            max: 100,
+            step: 5,
+            "aria-label": `${name} opacity`,
+            title: "Opacity %",
+            className: numberClass2,
+            value: Math.round(l.opacity * 100),
+            onChange: (e) => {
+              const n = parseFloat(e.target.value);
+              if (Number.isFinite(n)) update(l, { opacity: Math.min(100, Math.max(0, n)) / 100 }, true);
+            },
+            onBlur: end
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": `${name} blend mode`, className: selectClass2, value: l.blendMode, onChange: (e) => update(l, { blendMode: e.target.value }), children: import_vector5.VECTOR_BLEND_MODE_MENU.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.mode, children: m.label }, m.mode)) })
+      ] }),
+      l.kind === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "number",
+            min: 0,
+            step: 0.5,
+            "aria-label": `${name} width`,
+            title: "Width",
+            className: numberClass2,
+            value: l.strokeWidth ?? 1,
+            onChange: (e) => {
+              const n = parseFloat(e.target.value);
+              if (Number.isFinite(n) && n >= 0) update(l, { strokeWidth: n }, true);
+            },
+            onBlur: end
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": `${name} alignment`, className: selectClass2, value: l.strokeAlign ?? "center", onChange: (e) => update(l, { strokeAlign: e.target.value }), children: Object.keys(import_vector5.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: a, children: import_vector5.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Edit gradient", "aria-label": `Edit ${name} gradient`, "aria-pressed": l.editing, onClick: () => controller.setGradientTarget(l.kind, l.index), children: "\u270E" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Move up", "aria-label": `Move ${name} up`, disabled: l.index === count - 1, onClick: () => controller.movePaintLayer(l.kind, l.index, l.index + 1, { ids }), children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Move down", "aria-label": `Move ${name} down`, disabled: l.index === 0, onClick: () => controller.movePaintLayer(l.kind, l.index, l.index - 1, { ids }), children: "\u2193" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Remove", "aria-label": `Remove ${name}`, onClick: () => controller.removePaintLayer(l.kind, l.index, { ids }), children: "\xD7" })
+      ] })
+    ] }, `${l.kind}-${l.index}`);
+  };
+  const stack = (kind, layers, mixed) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-1", "data-vector-stack": kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `flex-1 ${headingClass}`, children: kind === "fill" ? "Fills" : "Strokes" }),
+      mixed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass2,
+          title: kind === "fill" ? "Add fill" : "Add stroke",
+          "aria-label": kind === "fill" ? "Add fill" : "Add stroke",
+          disabled: !ids.length,
+          onClick: () => controller.addPaintLayer(kind, {}, { ids }),
+          children: "+"
+        }
+      )
+    ] }),
+    [...layers].reverse().map((l) => layerRow(l, layers.length))
+  ] });
+  const filterNode = panel.filterNodeId;
+  const setFilter = (f, key, value, merge) => {
+    if (filterNode) controller.updateFilter(filterNode, f.id, { params: { [key]: value } }, { merge });
+  };
+  const filterParam = (f, spec) => {
+    const label = `${f.label} ${spec.label}`;
+    if (spec.kind === "color")
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-filter-param": spec.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-14 truncate text-[11px] text-muted-foreground", children: spec.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "color",
+            "aria-label": label,
+            className: "h-7 w-10 cursor-pointer rounded border border-border bg-background",
+            value: /^#[0-9a-f]{6}$/i.test(String(f.params[spec.key])) ? String(f.params[spec.key]) : "#000000",
+            onChange: (e) => setFilter(f, spec.key, e.target.value, true),
+            onBlur: end
+          }
+        )
+      ] }, spec.key);
+    if (spec.kind !== "number") return null;
+    const value = Number(f.params[spec.key] ?? 0);
+    const onChange = (e) => {
+      const n = parseFloat(e.target.value);
+      if (Number.isFinite(n)) setFilter(f, spec.key, n, true);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-filter-param": spec.key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: labelClass2, children: spec.label }),
+      spec.slider && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          type: "range",
+          min: spec.min,
+          max: spec.max,
+          step: spec.step,
+          "aria-label": `${label} slider`,
+          className: "h-4 min-w-0 flex-1 accent-primary",
+          value,
+          onChange,
+          onPointerUp: end,
+          onKeyUp: end,
+          onBlur: end
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", min: spec.min, max: spec.max, step: spec.step, "aria-label": label, className: numberClass2, value: Math.round(value * 1e3) / 1e3, onChange, onBlur: end })
+    ] }, spec.key);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-appearance": "", "aria-label": "Appearance", children: [
+    ids.length > 0 && stack("stroke", panel.strokes, panel.mixed.strokes),
+    ids.length > 0 && stack("fill", panel.fills, panel.mixed.fills),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "blendMode", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-16", children: "Blend" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Blend mode", className: selectClass2, value: panel.blendMode, onChange: (e) => controller.setBlendMode(e.target.value, { ids: panel.nodeIds }), children: import_vector5.VECTOR_BLEND_MODE_MENU.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.mode, children: m.label }, m.mode)) }),
+      panel.mixed.blendMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2", "data-vector-filters": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `w-16 ${headingClass}`, children: "Filters" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "select",
+          {
+            "aria-label": "Add filter",
+            className: selectClass2,
+            value: "",
+            onChange: (e) => {
+              if (e.target.value) controller.addFilter(e.target.value, { ids: panel.nodeIds });
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "Add filter\u2026" }),
+              import_vector5.VECTOR_FILTER_MENU.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.type, children: m.label }, m.type))
+            ]
+          }
+        )
+      ] }),
+      !filterNode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Select one object to edit its filters." }),
+      filterNode && panel.filters.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-1 rounded border border-border p-1.5", "data-vector-filter": f.id, "data-vector-filter-type": f.type, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-xs font-medium text-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", "aria-label": `${f.label} on`, checked: f.enabled, onChange: (e) => controller.updateFilter(filterNode, f.id, { enabled: e.target.checked }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: f.label })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Move up", "aria-label": `Move ${f.label} up`, disabled: i === 0, onClick: () => controller.moveFilter(filterNode, f.id, i - 1), children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Move down", "aria-label": `Move ${f.label} down`, disabled: i === panel.filters.length - 1, onClick: () => controller.moveFilter(filterNode, f.id, i + 1), children: "\u2193" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Remove", "aria-label": `Remove ${f.label}`, onClick: () => controller.removeFilter(filterNode, f.id), children: "\xD7" })
+        ] }),
+        f.specs.map((spec) => filterParam(f, spec))
+      ] }, f.id))
+    ] })
+  ] });
+}
+
+// src/vector/VectorEnvelopePanel.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_vector6 = require("@pixerate/editor/vector");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var buttonClass3 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
+var numberClass3 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
+var selectClass3 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var labelClass3 = "w-full truncate text-[11px] text-muted-foreground";
 var SLIDERS = [
   { key: "bend", label: "Bend %" },
   { key: "horizontal", label: "Horizontal distortion %" },
@@ -725,7 +994,7 @@ var SLIDERS = [
 ];
 function VectorEnvelopePanel({ controller, className }) {
   const state = useVectorEditorState(controller);
-  const panel = (0, import_vector5.getVectorEnvelopePanel)(state);
+  const panel = (0, import_vector6.getVectorEnvelopePanel)(state);
   const [size, setSize] = import_react4.default.useState({ rows: 2, columns: 2 });
   if (!panel) return null;
   const env = panel.envelope;
@@ -740,16 +1009,16 @@ function VectorEnvelopePanel({ controller, className }) {
     if (env) set({ [key]: n });
     else setSize({ ...size, [key]: n });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-envelope": "", "aria-label": "Envelope", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Envelope" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "data-vector-envelope-action": "warp", className: buttonClass2, title: "Make with Warp", "aria-label": "Make with Warp", disabled: !panel.canMake || !!env, onClick: () => set({ style: "arc", bend: 50 }), children: "Warp" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-envelope": "", "aria-label": "Envelope", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Envelope" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "data-vector-envelope-action": "warp", className: buttonClass3, title: "Make with Warp", "aria-label": "Make with Warp", disabled: !panel.canMake || !!env, onClick: () => set({ style: "arc", bend: 50 }), children: "Warp" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
           "data-vector-envelope-action": "mesh",
-          className: buttonClass2,
+          className: buttonClass3,
           title: "Make with Mesh",
           "aria-label": "Make with Mesh",
           disabled: !panel.canMake || !!env,
@@ -757,12 +1026,12 @@ function VectorEnvelopePanel({ controller, className }) {
           children: "Mesh"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
           "data-vector-envelope-action": "top",
-          className: buttonClass2,
+          className: buttonClass3,
           title: "Make with Top Object",
           "aria-label": "Make with Top Object",
           disabled: !panel.canMakeWithTopObject,
@@ -770,12 +1039,12 @@ function VectorEnvelopePanel({ controller, className }) {
           children: "Top"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "data-vector-envelope-action": "release", className: buttonClass2, title: "Release Envelope", "aria-label": "Release Envelope", disabled: !panel.canRelease, onClick: () => controller.releaseEnvelope(), children: "Release" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "data-vector-envelope-action": "expand", className: buttonClass2, title: "Expand Envelope", "aria-label": "Expand Envelope", disabled: !panel.canRelease, onClick: () => controller.expandAppearance(), children: "Expand" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "data-vector-envelope-action": "release", className: buttonClass3, title: "Release Envelope", "aria-label": "Release Envelope", disabled: !panel.canRelease, onClick: () => controller.releaseEnvelope(), children: "Release" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "data-vector-envelope-action": "expand", className: buttonClass3, title: "Expand Envelope", "aria-label": "Expand Envelope", disabled: !panel.canRelease, onClick: () => controller.expandAppearance(), children: "Expand" })
     ] }),
-    env && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-envelope-param": "style", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: labelClass2, children: "Warp" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": "Envelope warp", className: selectClass2, value: env.params.style, onChange: (e) => set({ style: e.target.value }), children: import_vector5.VECTOR_ENVELOPE_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: o.value, children: o.label }, o.value)) })
+    env && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-envelope-param": "style", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClass3, children: "Warp" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { "aria-label": "Envelope warp", className: selectClass3, value: env.params.style, onChange: (e) => set({ style: e.target.value }), children: import_vector6.VECTOR_ENVELOPE_STYLE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: o.value, children: o.label }, o.value)) })
     ] }),
     env && env.params.style !== "mesh" && SLIDERS.map((s) => {
       const value = env.params[s.key];
@@ -783,9 +1052,9 @@ function VectorEnvelopePanel({ controller, className }) {
         const n = parseFloat(ev.target.value);
         if (Number.isFinite(n)) set({ [s.key]: n }, true);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-envelope-param": s.key, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: labelClass2, children: s.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-envelope-param": s.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClass3, children: s.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "input",
           {
             type: "range",
@@ -801,36 +1070,36 @@ function VectorEnvelopePanel({ controller, className }) {
             onBlur: end
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", min: -100, max: 100, step: 1, "aria-label": `Envelope ${s.label}`, className: numberClass2, value, onChange, onBlur: end })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "number", min: -100, max: 100, step: 1, "aria-label": `Envelope ${s.label}`, className: numberClass3, value, onChange, onBlur: end })
       ] }, s.key);
     }),
-    env && env.params.style !== "mesh" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-envelope-param": "orientation", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: labelClass2, children: "Orientation" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("select", { "aria-label": "Envelope orientation", className: selectClass2, value: env.params.orientation, onChange: (e) => set({ orientation: e.target.value }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "horizontal", children: "Horizontal" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "vertical", children: "Vertical" })
+    env && env.params.style !== "mesh" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-envelope-param": "orientation", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClass3, children: "Orientation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("select", { "aria-label": "Envelope orientation", className: selectClass3, value: env.params.orientation, onChange: (e) => set({ orientation: e.target.value }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "horizontal", children: "Horizontal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "vertical", children: "Vertical" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-envelope-param": "mesh", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 flex-1 truncate text-[11px] text-muted-foreground", children: "Mesh rows \xD7 columns" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", min: 1, max: 16, step: 1, "aria-label": "Envelope mesh rows", className: numberClass2, value: rows, onChange: (e) => setCount("rows", e.target.value) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "number", min: 1, max: 16, step: 1, "aria-label": "Envelope mesh columns", className: numberClass2, value: columns, onChange: (e) => setCount("columns", e.target.value) })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-envelope-param": "mesh", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "min-w-0 flex-1 truncate text-[11px] text-muted-foreground", children: "Mesh rows \xD7 columns" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "number", min: 1, max: 16, step: 1, "aria-label": "Envelope mesh rows", className: numberClass3, value: rows, onChange: (e) => setCount("rows", e.target.value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "number", min: 1, max: 16, step: 1, "aria-label": "Envelope mesh columns", className: numberClass3, value: columns, onChange: (e) => setCount("columns", e.target.value) })
     ] }),
-    panel.count > 1 && !panel.canMakeWithTopObject && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Select one object to edit its envelope." }),
-    env && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Edit the mesh with the Envelope tool (U)." })
+    panel.count > 1 && !panel.canMakeWithTopObject && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Select one object to edit its envelope." }),
+    env && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Edit the mesh with the Envelope tool (U)." })
   ] });
 }
 
 // src/vector/VectorGradientEditor.tsx
-var import_vector6 = require("@pixerate/editor/vector");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var selectClass3 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass3 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
-var buttonClass3 = "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 import_vector7 = require("@pixerate/editor/vector");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var selectClass4 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass4 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
+var buttonClass4 = "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_vector6.getVectorGradientEditor)(state);
+  const ed = (0, import_vector7.getVectorGradientEditor)(state);
   if (!ed) return null;
   const g = ed.gradient;
   const sel = ed.selected;
@@ -838,26 +1107,26 @@ function VectorGradientEditor({ controller, className }) {
   const setType = (value) => {
     if (value === "solid") {
       const first = ed.stops[0];
-      controller.setStyle({ [ed.target]: (0, import_vector6.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
+      controller.setStyle({ [ed.target]: (0, import_vector7.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
     } else controller.setGradient({ type: value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
-      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: buttonClass3, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
-      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
+      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: buttonClass4, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
+      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("select", { "aria-label": "Gradient type", className: selectClass3, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "solid", children: "Solid" }),
-        import_vector6.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: t, children: import_vector6.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { "aria-label": "Gradient type", className: selectClass4, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "solid", children: "Solid" }),
+        import_vector7.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: t, children: import_vector7.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: buttonClass3, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: buttonClass4, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
     ] }),
-    g && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    g && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             role: "button",
@@ -871,7 +1140,7 @@ function VectorGradientEditor({ controller, className }) {
             }
           }
         ),
-        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -885,21 +1154,21 @@ function VectorGradientEditor({ controller, className }) {
           s.index
         ))
       ] }),
-      sel && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      sel && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             type: "color",
             "aria-label": "Stop colour",
             className: "h-7 w-9 cursor-pointer rounded border border-border bg-background",
-            value: (0, import_vector6.vectorPaintToHex)(sel.color) ?? "#000000",
+            value: (0, import_vector7.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_runtime5.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Opacity",
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               type: "number",
@@ -907,7 +1176,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 5,
               "aria-label": "Stop opacity",
-              className: numberClass3,
+              className: numberClass4,
               value: percent(sel.opacity ?? 1),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -916,9 +1185,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "At",
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               type: "number",
@@ -926,7 +1195,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 1,
               "aria-label": "Stop position",
-              className: numberClass3,
+              className: numberClass4,
               value: percent(sel.offset),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -935,9 +1204,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Midpoint",
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               type: "number",
@@ -945,7 +1214,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 95,
               step: 1,
               "aria-label": "Stop midpoint",
-              className: numberClass3,
+              className: numberClass4,
               value: percent(sel.midpoint ?? 0.5),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -954,15 +1223,15 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: buttonClass3, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: buttonClass4, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16", children: "Colours" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass3, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector6.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: i, children: import_vector6.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Colours" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass4, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector7.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: i, children: import_vector7.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16", children: "Smooth" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Smooth" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             type: "range",
@@ -978,26 +1247,26 @@ function VectorGradientEditor({ controller, className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16", children: "Spread" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { "aria-label": "Gradient spread", className: selectClass3, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector6.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: sp, children: import_vector6.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Spread" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { "aria-label": "Gradient spread", className: selectClass4, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector7.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: sp, children: import_vector7.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
       ] }),
-      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16", children: "On stroke" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass3, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector6.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: m, children: import_vector6.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "On stroke" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass4, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector7.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: m, children: import_vector7.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
       ] })
     ] })
   ] });
 }
 
 // src/vector/VectorToolbar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = 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 buttonClass4 = "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 buttonClass5 = "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_vector7.VECTOR_TOOLS,
+  tools = import_vector8.VECTOR_TOOLS,
   showHistory = true,
   showArrange = true,
   showSnap = true,
@@ -1013,32 +1282,32 @@ function VectorToolbar({
   const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
   const [live, setLive] = import_react5.default.useState(false);
   const booleanDisabled = live ? count < 1 : count < 2;
-  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: buttonClass4, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass4,
+        className: buttonClass5,
         "aria-pressed": state.tool === tool,
-        title: `${(0, import_vector7.vectorToolLabel)(tool)} (${import_vector7.VECTOR_TOOL_SHORTCUTS[tool]})`,
-        "aria-label": (0, import_vector7.vectorToolLabel)(tool),
+        title: `${(0, import_vector8.vectorToolLabel)(tool)} (${import_vector8.VECTOR_TOOL_SHORTCUTS[tool]})`,
+        "aria-label": (0, import_vector8.vectorToolLabel)(tool),
         onClick: () => controller.setTool(tool),
-        children: import_vector7.VECTOR_TOOL_GLYPHS[tool]
+        children: import_vector8.VECTOR_TOOL_GLYPHS[tool]
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    showSnap && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
         "data-vector-snap": "",
-        className: buttonClass4,
+        className: buttonClass5,
         "aria-pressed": state.snap.objects,
         title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
         "aria-label": VECTOR_SNAP_TITLE,
@@ -1046,13 +1315,13 @@ function VectorToolbar({
         children: "Snap"
       }
     ) }),
-    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      import_vector7.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      import_vector8.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass4,
+          className: buttonClass5,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -1061,12 +1330,12 @@ function VectorToolbar({
         },
         a.id
       )),
-      import_vector7.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_vector8.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass4,
+          className: buttonClass5,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -1075,9 +1344,9 @@ function VectorToolbar({
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             type: "range",
@@ -1091,9 +1360,9 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             type: "number",
@@ -1109,26 +1378,26 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass4,
+          className: buttonClass5,
           "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_vector7.VECTOR_FILL_GAP }),
+          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector8.VECTOR_FILL_GAP }),
           children: "Gaps"
         }
       )
     ] }),
-    showDistort && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    showDistort && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
         "data-vector-free-distort": "",
-        className: buttonClass4,
+        className: buttonClass5,
         "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",
@@ -1136,15 +1405,15 @@ function VectorToolbar({
         children: "Distort"
       }
     ) }),
-    showBlend && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VectorBlendControls, { controller }),
-    showArrange && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    showBlend && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
             "data-vector-live-boolean": "",
-            className: buttonClass4,
+            className: buttonClass5,
             "aria-pressed": live,
             title: "Live booleans: keep the shapes editable",
             "aria-label": "Live booleans",
@@ -1159,12 +1428,12 @@ function VectorToolbar({
         act("G", "Group", () => controller.group(), count < 1),
         act("U", "Ungroup", () => controller.ungroup(), !groupSelected)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector7.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector8.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass4,
+          className: buttonClass5,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -1173,7 +1442,7 @@ function VectorToolbar({
         },
         a.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.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),
@@ -1188,22 +1457,22 @@ function VectorToolbar({
 }
 function VectorBlendControls({ controller }) {
   const state = useVectorEditorState(controller);
-  const blend = (0, import_vector7.getVectorBlendControls)(state);
+  const blend = (0, import_vector8.getVectorBlendControls)(state);
   const o = blend.options;
   const selected = blend.ids.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass4, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass5, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.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_vector7.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
-        children: import_vector7.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: sp, children: import_vector7.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+        onChange: (e) => (0, import_vector8.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
+        children: import_vector8.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: sp, children: import_vector8.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
-    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "input",
       {
         type: "number",
@@ -1215,29 +1484,29 @@ function VectorBlendControls({ controller }) {
         onChange: (e) => {
           const n = parseFloat(e.target.value);
           if (!Number.isFinite(n) || n <= 0) return;
-          (0, import_vector7.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
+          (0, import_vector8.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "orient",
-        className: buttonClass4,
+        className: buttonClass5,
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
-        onClick: () => (0, import_vector7.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
+        onClick: () => (0, import_vector8.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
         children: "\u293F"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "spine",
-        className: buttonClass4,
+        className: buttonClass5,
         title: "Replace Spine (select a blend and a path)",
         "aria-label": "Replace Spine",
         disabled: !blend.canReplaceSpine,
@@ -1245,15 +1514,15 @@ function VectorBlendControls({ controller }) {
         children: "\u2307"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass4, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass4, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass5, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass5, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
   ] });
 }
-var selectClass4 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass4 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
+var selectClass5 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass5 = "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_vector7.getVectorSelectionStyle)(state);
+  const style = (0, import_vector8.getVectorSelectionStyle)(state);
   const d = state.defaults;
   const source = style ?? {
     fill: d.fill ?? null,
@@ -1266,7 +1535,7 @@ function VectorStylePanel({ controller, className }) {
     arrowAlign: d.arrowAlign ?? "extend",
     startArrowScale: d.startArrowScale ?? 1,
     endArrowScale: d.endArrowScale ?? 1,
-    widthProfile: (0, import_vector7.widthProfilePresetId)(d.strokeWidthProfile),
+    widthProfile: (0, import_vector8.widthProfilePresetId)(d.strokeWidthProfile),
     cornerRadius: d.cornerRadius,
     cornerKind: d.cornerKind ?? "round",
     corners: 1,
@@ -1279,19 +1548,19 @@ function VectorStylePanel({ controller, className }) {
   };
   const setProfile = (id) => {
     if (style) controller.setWidthProfile(id);
-    else controller.setDefaults({ strokeWidthProfile: (0, import_vector7.widthProfilePreset)(id)?.length ? (0, import_vector7.widthProfilePreset)(id) : null });
+    else controller.setDefaults({ strokeWidthProfile: (0, import_vector8.widthProfilePreset)(id)?.length ? (0, import_vector8.widthProfilePreset)(id) : null });
   };
-  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass4, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "None" }),
-        import_vector7.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: h, children: import_vector7.VECTOR_ARROWHEAD_LABELS[h] }, h))
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass5, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "None" }),
+        import_vector8.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: h, children: import_vector8.VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           type: "number",
@@ -1299,7 +1568,7 @@ function VectorStylePanel({ controller, className }) {
           step: 0.25,
           "aria-label": `${label} arrowhead scale`,
           title: "Scale (\xD7 stroke width)",
-          className: numberClass4,
+          className: numberClass5,
           value: source[scaleKey],
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -1315,14 +1584,14 @@ function VectorStylePanel({ controller, className }) {
   };
   const paintRow = (key, label) => {
     const paint = source[key];
-    const hex = (0, import_vector7.vectorPaintToHex)(paint);
+    const hex = (0, import_vector8.vectorPaintToHex)(paint);
     const on = paint !== null && paint !== "none";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime7.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           type: "color",
@@ -1333,18 +1602,18 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
-      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsx)(VectorGradientEditor, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    style && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VectorGradientEditor, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           type: "number",
@@ -1360,33 +1629,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass4, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector7.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: a, children: import_vector7.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass5, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector8.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: a, children: import_vector8.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Profile" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass4,
+          className: selectClass5,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            import_vector7.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: p.id, children: p.label }, p.id)),
-            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
+            import_vector8.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
-          className: buttonClass4,
+          className: buttonClass5,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -1396,27 +1665,27 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "End"),
-      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Heads" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass4, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "extend", children: "Tip past end" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "tip", children: "Tip at end" })
+      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass5, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           type: "number",
           min: 0,
           step: 1,
           "aria-label": "Corner radius",
-          className: numberClass4,
+          className: numberClass5,
           value: Math.round(source.cornerRadius * 100) / 100,
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -1424,12 +1693,12 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { "aria-label": "Corner kind", className: selectClass4, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector7.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: k, children: import_vector7.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { "aria-label": "Corner kind", className: selectClass5, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector8.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: k, children: import_vector8.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16", children: "Opacity" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    style && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           type: "range",
@@ -1443,28 +1712,31 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VectorEffectsPanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VectorEnvelopePanel, { controller })
+    style && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VectorAppearancePanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VectorEffectsPanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VectorEnvelopePanel, { controller })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
     ] })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  VectorAppearancePanel,
   VectorCanvas,
   VectorEditor,
   VectorEffectsPanel,
   VectorEnvelopePanel,
+  VectorFilterDefs,
   VectorGradientAnnotator,
   VectorGradientDefs,
   VectorGradientEditor,