@pixerate/editor-react 0.30.0 → 0.32.0

package/dist/vector/index.js

@@ -348,6 +348,27 @@ function VectorCanvas({
             /* @__PURE__ */ jsx2("circle", { cx: w.x, cy: w.y, r: THEME2.cornerWidgetRadius + (w.hovered ? 1 : 0), fill: THEME2.handleFill, stroke: accentColor }),
             /* @__PURE__ */ jsx2("circle", { cx: w.x, cy: w.y, r: 1.5, fill: accentColor })
           ] }, `corner:${w.ref.nodeId}:${w.ref.subpath}:${w.ref.index}`)),
+          overlay.blend.spines.map((sp) => /* @__PURE__ */ jsxs2("g", { "data-vector-blend-spine": sp.id, "data-replaced": sp.replaced || void 0, children: [
+            /* @__PURE__ */ jsx2("path", { d: sp.d, fill: "none", stroke: accentColor, strokeDasharray: "4 3" }),
+            sp.keys.map((k, i) => /* @__PURE__ */ jsx2("circle", { cx: k.x, cy: k.y, r: THEME2.handleRadius, fill: THEME2.handleFill, stroke: accentColor }, i))
+          ] }, `blend:${sp.id}`)),
+          overlay.blend.start && /* @__PURE__ */ jsxs2("g", { "data-vector-blend-start": "", children: [
+            /* @__PURE__ */ jsx2("path", { d: overlay.blend.start.d, fill: "none", stroke: accentColor, strokeWidth: 2 }),
+            overlay.blend.start.anchor && /* @__PURE__ */ jsx2("circle", { cx: overlay.blend.start.anchor.x, cy: overlay.blend.start.anchor.y, r: THEME2.handleRadius + 1, fill: accentColor })
+          ] }),
+          overlay.blend.anchors.map((a, i) => /* @__PURE__ */ jsx2(
+            "rect",
+            {
+              "data-vector-blend-anchor": i,
+              x: a.x - as / 2,
+              y: a.y - as / 2,
+              width: as,
+              height: as,
+              fill: a.hovered ? accentColor : THEME2.handleFill,
+              stroke: accentColor
+            },
+            `blend-anchor:${i}`
+          )),
           overlay.widthSpot && /* @__PURE__ */ jsxs2("g", { "data-vector-width-spot": "", children: [
             /* @__PURE__ */ jsx2("line", { x1: overlay.widthSpot.left.x, y1: overlay.widthSpot.left.y, x2: overlay.widthSpot.right.x, y2: overlay.widthSpot.right.y, stroke: accentColor, strokeDasharray: "3 2" }),
             /* @__PURE__ */ jsx2("path", { d: vectorDiamondPath(overlay.widthSpot.x, overlay.widthSpot.y), fill: "none", stroke: accentColor })
@@ -453,6 +474,7 @@ function VectorCanvas({
 }
 
 // src/vector/VectorToolbar.tsx
+import React3 from "react";
 import {
   VECTOR_TOOLS,
   VECTOR_TOOL_GLYPHS,
@@ -467,30 +489,190 @@ import {
   VECTOR_CORNER_KIND_LABELS,
   VECTOR_STROKE_ALIGN_LABELS,
   VECTOR_WIDTH_PRESETS,
+  VECTOR_BLEND_SPACINGS,
+  VECTOR_BLEND_SPACING_LABELS,
+  applyVectorBlendOptions,
+  getVectorBlendControls,
   getVectorSelectionStyle,
   widthProfilePreset,
   widthProfilePresetId,
   vectorPaintToHex,
   vectorToolLabel
 } from "@pixerate/editor/vector";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/vector/VectorEffectsPanel.tsx
+import {
+  VECTOR_EFFECT_MENU,
+  getVectorEffectsPanel
+} from "@pixerate/editor/vector";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var buttonClass = "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 numberClass = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
+var selectClass = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var labelClass = "w-full truncate text-[11px] text-muted-foreground";
+function VectorEffectsPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const panel = getVectorEffectsPanel(state);
+  if (!panel) return null;
+  const nodeId = panel.nodeId;
+  const end = () => controller.endMergedEdit();
+  const set = (e, key, value, merge) => {
+    if (nodeId) controller.updateEffect(nodeId, e.id, { params: { [key]: value } }, { merge });
+  };
+  const number = (e, spec) => {
+    const value = Number(e.params[spec.key] ?? 0);
+    const label = `${e.label} ${spec.label}`;
+    const onChange = (ev) => {
+      const n = parseFloat(ev.target.value);
+      if (Number.isFinite(n)) set(e, spec.key, n, true);
+    };
+    return /* @__PURE__ */ jsxs3("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-effect-param": spec.key, children: [
+      /* @__PURE__ */ jsx3("span", { className: labelClass, children: spec.label }),
+      spec.slider && /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+        "input",
+        {
+          type: "number",
+          min: spec.min,
+          max: spec.max,
+          step: spec.step,
+          "aria-label": label,
+          className: numberClass,
+          value: Math.round(value * 1e3) / 1e3,
+          onChange,
+          onBlur: end
+        }
+      )
+    ] }, spec.key);
+  };
+  const vec2 = (e, spec) => {
+    const v = e.params[spec.key] ?? { x: 0, y: 0 };
+    const field = (axis) => /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "number",
+        step: spec.kind === "vec2" ? spec.step : 1,
+        "aria-label": `${e.label} ${spec.label} ${axis}`,
+        className: numberClass,
+        value: Math.round(v[axis] * 1e3) / 1e3,
+        onChange: (ev) => {
+          const n = parseFloat(ev.target.value);
+          if (Number.isFinite(n)) set(e, spec.key, { ...v, [axis]: n }, true);
+        },
+        onBlur: end
+      }
+    );
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-effect-param": spec.key, children: [
+      /* @__PURE__ */ jsx3("span", { className: labelClass, children: spec.label }),
+      field("x"),
+      field("y")
+    ] }, spec.key);
+  };
+  const param = (e, spec) => {
+    if (spec.kind === "number") return number(e, spec);
+    if (spec.kind === "vec2") return vec2(e, spec);
+    if (spec.kind === "boolean")
+      return /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-effect-param": spec.key, children: [
+        /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate", children: spec.label }),
+        /* @__PURE__ */ jsx3("input", { type: "checkbox", "aria-label": `${e.label} ${spec.label}`, checked: !!e.params[spec.key], onChange: (ev) => set(e, spec.key, ev.target.checked, false) })
+      ] }, spec.key);
+    return /* @__PURE__ */ jsxs3("label", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground", "data-vector-effect-param": spec.key, children: [
+      /* @__PURE__ */ jsx3("span", { className: labelClass, children: spec.label }),
+      /* @__PURE__ */ jsx3("select", { "aria-label": `${e.label} ${spec.label}`, className: selectClass, value: String(e.params[spec.key] ?? ""), onChange: (ev) => set(e, spec.key, ev.target.value, false), children: spec.options.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value)) })
+    ] }, spec.key);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-effects": "", "aria-label": "Effects", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx3("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Effects" }),
+      /* @__PURE__ */ jsxs3(
+        "select",
+        {
+          "aria-label": "Add effect",
+          className: selectClass,
+          value: "",
+          onChange: (ev) => {
+            if (ev.target.value) controller.addEffect(ev.target.value);
+          },
+          children: [
+            /* @__PURE__ */ jsx3("option", { value: "", children: "Add effect\u2026" }),
+            VECTOR_EFFECT_MENU.map((m) => /* @__PURE__ */ jsx3("option", { value: m.type, children: m.label }, m.type))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass, title: "Expand Appearance", "aria-label": "Expand Appearance", disabled: !panel.expandable, onClick: () => controller.expandAppearance(), children: "Expand" })
+    ] }),
+    panel.count > 1 && /* @__PURE__ */ jsx3("p", { className: "text-[11px] text-muted-foreground", children: "Select one object to edit its effects." }),
+    nodeId && panel.effects.map((e, i) => /* @__PURE__ */ jsxs3("div", { className: "space-y-1 rounded border border-border p-1.5", "data-vector-effect": e.id, "data-vector-effect-type": e.type, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs3("label", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ jsx3("input", { type: "checkbox", "aria-label": `${e.label} on`, checked: e.enabled, onChange: (ev) => controller.updateEffect(nodeId, e.id, { enabled: ev.target.checked }) }),
+          /* @__PURE__ */ jsx3("span", { className: "truncate", children: e.label })
+        ] }),
+        /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass, title: "Move up", "aria-label": `Move ${e.label} up`, disabled: i === 0, onClick: () => controller.moveEffect(nodeId, e.id, i - 1), children: "\u2191" }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: buttonClass,
+            title: "Move down",
+            "aria-label": `Move ${e.label} down`,
+            disabled: i === panel.effects.length - 1,
+            onClick: () => controller.moveEffect(nodeId, e.id, i + 1),
+            children: "\u2193"
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass, title: "Remove", "aria-label": `Remove ${e.label}`, onClick: () => controller.removeEffect(nodeId, e.id), children: "\xD7" })
+      ] }),
+      e.specs.map((spec) => param(e, spec))
+    ] }, e.id))
+  ] });
+}
+
+// src/vector/VectorToolbar.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var VECTOR_SNAP_TITLE = "Snap to objects";
 var modKeyLabel = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "") ? "\u2318" : "Ctrl";
-var buttonClass = "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 = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, className }) {
+var buttonClass2 = "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 = VECTOR_TOOLS,
+  showHistory = true,
+  showArrange = true,
+  showSnap = true,
+  showPathEdit = true,
+  showBlend = true,
+  className
+}) {
   const state = useVectorEditorState(controller);
   const count = state.selection.length;
   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 act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
-  return /* @__PURE__ */ jsxs3("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx3(
+  const [live, setLive] = React3.useState(false);
+  const booleanDisabled = live ? count < 1 : count < 2;
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx4("button", { type: "button", className: buttonClass2, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ jsxs4("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass,
+        className: buttonClass2,
         "aria-pressed": state.tool === tool,
         title: `${vectorToolLabel(tool)} (${VECTOR_TOOL_SHORTCUTS[tool]})`,
         "aria-label": vectorToolLabel(tool),
@@ -499,16 +681,16 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ jsxs3("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ jsxs4("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__ */ jsx3("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ jsx3(
+    showSnap && /* @__PURE__ */ jsx4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
         "data-vector-snap": "",
-        className: buttonClass,
+        className: buttonClass2,
         "aria-pressed": state.snap.objects,
         title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
         "aria-label": VECTOR_SNAP_TITLE,
@@ -516,13 +698,13 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
         children: "Snap"
       }
     ) }),
-    showPathEdit && /* @__PURE__ */ jsxs3("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ jsx3(
+    showPathEdit && /* @__PURE__ */ jsxs4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass,
+          className: buttonClass2,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -531,12 +713,12 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
         },
         a.id
       )),
-      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx3(
+      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass,
+          className: buttonClass2,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -545,9 +727,9 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "range",
@@ -561,9 +743,9 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "number",
@@ -579,12 +761,12 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ jsx3(
+      state.tool === "paintBucket" && /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass,
+          className: buttonClass2,
           "aria-pressed": editing.fillGap > 0,
           title: "Close small gaps between path ends when filling",
           "aria-label": "Close gaps",
@@ -593,21 +775,35 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
         }
       )
     ] }),
-    showArrange && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsxs3("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
-        act("\u222A", "Union", () => controller.booleanOp("union"), count < 2),
-        act("\u2212", "Subtract", () => controller.booleanOp("subtract"), count < 2),
-        act("\u2229", "Intersect", () => controller.booleanOp("intersect"), count < 2),
-        act("\u22BB", "Exclude", () => controller.booleanOp("exclude"), count < 2),
+    showBlend && /* @__PURE__ */ jsx4(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsxs4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "data-vector-live-boolean": "",
+            className: buttonClass2,
+            "aria-pressed": live,
+            title: "Live booleans: keep the shapes editable",
+            "aria-label": "Live booleans",
+            onClick: () => setLive(!live),
+            children: "Live"
+          }
+        ),
+        act("\u222A", "Union", () => controller.booleanOp("union", { live }), booleanDisabled),
+        act("\u2212", "Subtract", () => controller.booleanOp("subtract", { live }), booleanDisabled),
+        act("\u2229", "Intersect", () => controller.booleanOp("intersect", { live }), booleanDisabled),
+        act("\u22BB", "Exclude", () => controller.booleanOp("exclude", { live }), booleanDisabled),
         act("G", "Group", () => controller.group(), count < 1),
         act("U", "Ungroup", () => controller.ungroup(), !groupSelected)
       ] }),
-      /* @__PURE__ */ jsx3("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass,
+          className: buttonClass2,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -616,7 +812,7 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
         },
         a.id
       )) }),
-      /* @__PURE__ */ jsxs3("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ jsxs4("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),
@@ -629,8 +825,71 @@ function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, s
     ] })
   ] });
 }
-var selectClass = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
+function VectorBlendControls({ controller }) {
+  const state = useVectorEditorState(controller);
+  const blend = getVectorBlendControls(state);
+  const o = blend.options;
+  const selected = blend.ids.length > 0;
+  return /* @__PURE__ */ jsxs4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ jsx4("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass2, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
+    /* @__PURE__ */ jsx4(
+      "select",
+      {
+        "aria-label": "Blend spacing",
+        className: "h-7 rounded border border-border bg-background px-1 text-xs",
+        value: o.spacing,
+        onChange: (e) => applyVectorBlendOptions(controller, { spacing: e.target.value }),
+        children: VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ jsx4("option", { value: sp, children: VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+      }
+    ),
+    o.spacing !== "smoothColor" && /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "number",
+        min: o.spacing === "steps" ? 1 : 0.5,
+        step: 1,
+        "aria-label": o.spacing === "steps" ? "Blend steps" : "Blend distance",
+        className: "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs",
+        value: o.spacing === "steps" ? o.steps : o.distance,
+        onChange: (e) => {
+          const n = parseFloat(e.target.value);
+          if (!Number.isFinite(n) || n <= 0) return;
+          applyVectorBlendOptions(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "data-vector-blend-action": "orient",
+        className: buttonClass2,
+        "aria-pressed": o.orientToSpine,
+        title: "Orient steps to the spine",
+        "aria-label": "Orient to spine",
+        onClick: () => applyVectorBlendOptions(controller, { orientToSpine: !o.orientToSpine }),
+        children: "\u293F"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "data-vector-blend-action": "spine",
+        className: buttonClass2,
+        title: "Replace Spine (select a blend and a path)",
+        "aria-label": "Replace Spine",
+        disabled: !blend.canReplaceSpine,
+        onClick: () => controller.replaceBlendSpine(),
+        children: "\u2307"
+      }
+    ),
+    /* @__PURE__ */ jsx4("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass2, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
+    /* @__PURE__ */ jsx4("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass2, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
+  ] });
+}
+var selectClass2 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass2 = "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 = getVectorSelectionStyle(state);
@@ -661,17 +920,17 @@ function VectorStylePanel({ controller, className }) {
     if (style) controller.setWidthProfile(id);
     else controller.setDefaults({ strokeWidthProfile: widthProfilePreset(id)?.length ? widthProfilePreset(id) : null });
   };
-  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ jsx3("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ jsx4("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__ */ jsxs3("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ jsx3("span", { className: "w-16 text-xs text-foreground", children: label }),
-      /* @__PURE__ */ jsxs3("select", { "aria-label": `${label} arrowhead`, className: selectClass, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
-        /* @__PURE__ */ jsx3("option", { value: "", children: "None" }),
-        VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ jsx3("option", { value: h, children: VECTOR_ARROWHEAD_LABELS[h] }, h))
+    return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ jsxs4("select", { "aria-label": `${label} arrowhead`, className: selectClass2, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
+        VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ jsx4("option", { value: h, children: VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "number",
@@ -679,7 +938,7 @@ function VectorStylePanel({ controller, className }) {
           step: 0.25,
           "aria-label": `${label} arrowhead scale`,
           title: "Scale (\xD7 stroke width)",
-          className: numberClass,
+          className: numberClass2,
           value: source[scaleKey],
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -697,12 +956,12 @@ function VectorStylePanel({ controller, className }) {
     const paint = source[key];
     const hex = vectorPaintToHex(paint);
     const on = paint !== null && paint !== "none";
-    return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ jsxs3("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
+    return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsxs4("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
         label
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "color",
@@ -713,17 +972,17 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      on && !hex && /* @__PURE__ */ jsx3("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
-      style?.mixed[key] && /* @__PURE__ */ jsx3("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+      on && !hex && /* @__PURE__ */ jsx4("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ jsx4("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  return /* @__PURE__ */ jsxs3("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
-    /* @__PURE__ */ jsx3("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+  return /* @__PURE__ */ jsxs4("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
     paintRow("fill", "Fill"),
     paintRow("stroke", "Stroke"),
-    /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ jsx3("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "number",
@@ -739,33 +998,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
-      /* @__PURE__ */ jsx3("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ jsx3("select", { "aria-label": "Stroke alignment", className: selectClass, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ jsx3("option", { value: a, children: VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ jsx4("select", { "aria-label": "Stroke alignment", className: selectClass2, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ jsx4("option", { value: a, children: VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
-      /* @__PURE__ */ jsx3("span", { className: "w-16", children: "Profile" }),
-      /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ jsxs4(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass,
+          className: selectClass2,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ jsx3("option", { value: p.id, children: p.label }, p.id)),
-            source.widthProfile === "custom" && /* @__PURE__ */ jsx3("option", { value: "custom", disabled: true, children: "Custom" })
+            VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ jsx4("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ jsx4("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
-          className: buttonClass,
+          className: buttonClass2,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -775,27 +1034,27 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    source.hasOpenPath && /* @__PURE__ */ jsxs4(Fragment2, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "End"),
-      (source.startArrow || source.endArrow) && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
-        /* @__PURE__ */ jsx3("span", { className: "w-16", children: "Heads" }),
-        /* @__PURE__ */ jsxs3("select", { "aria-label": "Arrowhead alignment", className: selectClass, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
-          /* @__PURE__ */ jsx3("option", { value: "extend", children: "Tip past end" }),
-          /* @__PURE__ */ jsx3("option", { value: "tip", children: "Tip at end" })
+      (source.startArrow || source.endArrow) && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ jsx4("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ jsxs4("select", { "aria-label": "Arrowhead alignment", className: selectClass2, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ jsx4("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ jsx4("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    source.corners > 0 && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
-      /* @__PURE__ */ jsx3("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
-      /* @__PURE__ */ jsx3(
+    source.corners > 0 && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "number",
           min: 0,
           step: 1,
           "aria-label": "Corner radius",
-          className: numberClass,
+          className: numberClass2,
           value: Math.round(source.cornerRadius * 100) / 100,
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -803,12 +1062,12 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx3("select", { "aria-label": "Corner kind", className: selectClass, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ jsx3("option", { value: k, children: VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ jsx4("select", { "aria-label": "Corner kind", className: selectClass2, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ jsx4("option", { value: k, children: VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    style && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ jsx3("span", { className: "w-16", children: "Opacity" }),
-      /* @__PURE__ */ jsx3(
+    style && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "range",
@@ -821,24 +1080,26 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ opacity: parseFloat(e.target.value) })
         }
       )
-    ] })
+    ] }),
+    style && /* @__PURE__ */ jsx4(VectorEffectsPanel, { controller })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
-  return /* @__PURE__ */ jsxs4("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ jsx4(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ jsx4("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx4(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ jsx4(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ jsx5(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx5("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx5(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ jsx5(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
     ] })
   ] });
 }
 export {
   VectorCanvas,
   VectorEditor,
+  VectorEffectsPanel,
   VectorGradientDefs,
   VectorSceneNodes,
   VectorStylePanel,