@pixerate/editor-react 0.32.0 → 0.34.0

package/dist/vector/index.js

@@ -140,12 +140,50 @@ function VectorWidthPointEditor({ controller, edit, accentColor = THEME.accent,
 
 // src/vector/VectorCanvas.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function GradientElement({ def }) {
+  const stops = def.stops.map((s, i) => /* @__PURE__ */ jsx2("stop", { offset: s.offset, stopColor: s.stopColor, stopOpacity: s.stopOpacity }, i));
+  return def.type === "radial" ? /* @__PURE__ */ jsx2("radialGradient", { id: def.id, ...def.attrs, children: stops }) : /* @__PURE__ */ jsx2("linearGradient", { id: def.id, ...def.attrs, children: stops });
+}
 function VectorGradientDefs({ defs }) {
   if (!defs.length) return null;
-  return /* @__PURE__ */ jsx2("defs", { children: defs.map((def) => {
-    const stops = def.stops.map((s, i) => /* @__PURE__ */ jsx2("stop", { offset: s.offset, stopColor: s.stopColor, stopOpacity: s.stopOpacity }, i));
-    return def.type === "radial" ? /* @__PURE__ */ jsx2("radialGradient", { id: def.id, ...def.attrs, children: stops }, def.id) : /* @__PURE__ */ jsx2("linearGradient", { id: def.id, ...def.attrs, children: stops }, def.id);
-  }) });
+  return /* @__PURE__ */ jsx2("defs", { children: defs.map(
+    (def) => def.type === "pattern" ? /* @__PURE__ */ jsxs2("pattern", { id: def.id, ...def.attrs, children: [
+      def.gradients.map((g) => /* @__PURE__ */ jsx2(GradientElement, { def: g }, g.id)),
+      def.tiles.map((t, i) => /* @__PURE__ */ jsx2("path", { d: t.d, fill: t.fill }, i))
+    ] }, def.id) : /* @__PURE__ */ jsx2(GradientElement, { def }, def.id)
+  ) });
+}
+function VectorGradientAnnotator({ annotator: g, accentColor = THEME2.accent }) {
+  const r = THEME2.handleRadius + 1.5;
+  const ring = (p, part, size = r) => /* @__PURE__ */ jsx2("circle", { "data-vector-gradient-handle": part, cx: p.x, cy: p.y, r: size + (p.hovered ? 1 : 0), fill: THEME2.handleFill, stroke: accentColor, strokeWidth: p.hovered ? 2 : 1 });
+  return /* @__PURE__ */ jsxs2("g", { "data-vector-gradient-annotator": g.type, children: [
+    g.extent && /* @__PURE__ */ jsx2("path", { "data-vector-gradient-extent": "", d: g.extent, fill: "none", stroke: accentColor, strokeDasharray: "4 3" }),
+    /* @__PURE__ */ jsx2("line", { x1: g.start.x, y1: g.start.y, x2: g.end.x, y2: g.end.y, stroke: "#ffffff", strokeWidth: 3 }),
+    /* @__PURE__ */ jsx2("line", { "data-vector-gradient-bar": "", x1: g.start.x, y1: g.start.y, x2: g.end.x, y2: g.end.y, stroke: accentColor }),
+    g.aspect && /* @__PURE__ */ jsx2("line", { x1: g.start.x, y1: g.start.y, x2: g.aspect.x, y2: g.aspect.y, stroke: accentColor, strokeDasharray: "2 2" }),
+    ring(g.start, "start"),
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        "data-vector-gradient-handle": g.end.handle,
+        x: g.end.x - r,
+        y: g.end.y - r,
+        width: 2 * r,
+        height: 2 * r,
+        fill: THEME2.handleFill,
+        stroke: accentColor,
+        strokeWidth: g.end.hovered ? 2 : 1
+      }
+    ),
+    g.aspect && ring(g.aspect, "aspect", THEME2.handleRadius),
+    g.focal && /* @__PURE__ */ jsx2("g", { "data-vector-gradient-handle": "focal", children: /* @__PURE__ */ jsx2("circle", { cx: g.focal.x, cy: g.focal.y, r: THEME2.handleRadius - 1 + (g.focal.hovered ? 1 : 0), fill: accentColor, stroke: THEME2.handleFill }) }),
+    g.midpoints.map((m) => /* @__PURE__ */ jsx2("path", { "data-vector-gradient-midpoint": m.index, d: vectorDiamondPath(m.x, m.y, 4 + (m.hovered ? 1 : 0)), fill: THEME2.handleFill, stroke: accentColor }, m.index)),
+    g.stops.map((s) => /* @__PURE__ */ jsxs2("g", { "data-vector-gradient-stop": s.index, "data-selected": s.selected || void 0, opacity: g.removing && s.selected ? 0.35 : 1, children: [
+      /* @__PURE__ */ jsx2("line", { x1: s.barX, y1: s.barY, x2: s.x, y2: s.y, stroke: accentColor }),
+      /* @__PURE__ */ jsx2("rect", { x: s.x - 5, y: s.y - 5, width: 10, height: 10, rx: 2, fill: s.color, fillOpacity: s.opacity, stroke: s.selected ? accentColor : "#ffffff", strokeWidth: s.selected || s.hovered ? 2 : 1 }),
+      /* @__PURE__ */ jsx2("rect", { x: s.x - 6.5, y: s.y - 6.5, width: 13, height: 13, rx: 3, fill: "none", stroke: s.selected ? "#ffffff" : accentColor })
+    ] }, s.index))
+  ] });
 }
 function VectorSceneNodes({ nodes }) {
   return /* @__PURE__ */ jsx2(Fragment, { children: nodes.map(
@@ -327,13 +365,28 @@ function VectorCanvas({
         /* @__PURE__ */ jsxs2("g", { "data-vector-overlay": "", pointerEvents: "none", fill: "none", children: [
           overlay.outlines.map((o) => /* @__PURE__ */ jsx2("path", { d: o.d, stroke: accentColor, strokeWidth: o.selected ? 1 : 1.5, opacity: o.selected ? 1 : 0.7 }, o.id)),
           overlay.penPreview && /* @__PURE__ */ jsx2("path", { d: overlay.penPreview, stroke: accentColor, strokeDasharray: "4 3" }),
-          box && /* @__PURE__ */ jsxs2("g", { "data-vector-selection": "", transform: box.transform || void 0, children: [
+          box && /* @__PURE__ */ jsxs2("g", { "data-vector-selection": "", "data-free-distort": box.freeDistort || void 0, transform: box.transform || void 0, children: [
             /* @__PURE__ */ jsx2("rect", { x: box.x, y: box.y, width: box.width, height: box.height, stroke: accentColor }),
             /* @__PURE__ */ jsx2("line", { x1: box.x + box.width / 2, y1: box.y, x2: box.x + box.width / 2, y2: box.y - 24, stroke: accentColor }),
             box.handles.map(
               (h) => h.handle === "rotate" ? /* @__PURE__ */ jsx2("circle", { "data-handle": h.handle, cx: h.x, cy: h.y, r: hs / 2 + 1, fill: THEME2.handleFill, stroke: accentColor }, h.handle) : /* @__PURE__ */ jsx2("rect", { "data-handle": h.handle, x: h.x - hs / 2, y: h.y - hs / 2, width: hs, height: hs, fill: THEME2.handleFill, stroke: accentColor }, h.handle)
             )
           ] }),
+          overlay.distort && /* @__PURE__ */ jsxs2("g", { "data-vector-distort": overlay.distort.mode, children: [
+            /* @__PURE__ */ jsx2("path", { d: overlay.distort.d, stroke: accentColor }),
+            overlay.distort.corners.map((c, i) => /* @__PURE__ */ jsx2("rect", { x: c.x - hs / 2, y: c.y - hs / 2, width: hs, height: hs, fill: THEME2.handleFill, stroke: accentColor }, i))
+          ] }),
+          overlay.envelope && /* @__PURE__ */ jsxs2("g", { "data-vector-envelope-mesh": overlay.envelope.nodeId, children: [
+            /* @__PURE__ */ jsx2("path", { "data-vector-envelope-grid": "", d: overlay.envelope.grid, stroke: accentColor, strokeOpacity: 0.8 }),
+            overlay.envelope.handles.map((h) => /* @__PURE__ */ jsxs2("g", { "data-vector-envelope-handle": h.index, children: [
+              /* @__PURE__ */ jsx2("line", { x1: h.anchorX, y1: h.anchorY, x2: h.x, y2: h.y, stroke: accentColor, strokeOpacity: 0.6 }),
+              /* @__PURE__ */ jsx2("circle", { cx: h.x, cy: h.y, r: THEME2.handleRadius + (h.hovered || h.active ? 1 : 0), fill: h.active ? accentColor : THEME2.handleFill, stroke: accentColor })
+            ] }, h.index)),
+            overlay.envelope.anchors.map((a) => {
+              const size = as + (a.hovered || a.active ? 2 : 0);
+              return /* @__PURE__ */ jsx2("rect", { "data-vector-envelope-anchor": a.index, x: a.x - size / 2, y: a.y - size / 2, width: size, height: size, fill: a.active ? accentColor : THEME2.handleFill, stroke: accentColor }, a.index);
+            })
+          ] }),
           overlay.handles.map((h) => /* @__PURE__ */ jsxs2("g", { "data-vector-handle": h.ref.handle, children: [
             /* @__PURE__ */ jsx2("line", { x1: h.anchorX, y1: h.anchorY, x2: h.x, y2: h.y, stroke: accentColor }),
             /* @__PURE__ */ jsx2("circle", { cx: h.x, cy: h.y, r: THEME2.handleRadius + (h.hovered ? 1 : 0), fill: THEME2.handleFill, stroke: accentColor })
@@ -369,6 +422,7 @@ function VectorCanvas({
             },
             `blend-anchor:${i}`
           )),
+          overlay.gradient && /* @__PURE__ */ jsx2(VectorGradientAnnotator, { annotator: overlay.gradient, accentColor }),
           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 })
@@ -474,7 +528,7 @@ function VectorCanvas({
 }
 
 // src/vector/VectorToolbar.tsx
-import React3 from "react";
+import React4 from "react";
 import {
   VECTOR_TOOLS,
   VECTOR_TOOL_GLYPHS,
@@ -496,7 +550,7 @@ import {
   getVectorSelectionStyle,
   widthProfilePreset,
   widthProfilePresetId,
-  vectorPaintToHex,
+  vectorPaintToHex as vectorPaintToHex2,
   vectorToolLabel
 } from "@pixerate/editor/vector";
 
@@ -643,11 +697,302 @@ function VectorEffectsPanel({ controller, className }) {
   ] });
 }
 
+// src/vector/VectorEnvelopePanel.tsx
+import React3 from "react";
+import { VECTOR_ENVELOPE_STYLE_OPTIONS, getVectorEnvelopePanel } from "@pixerate/editor/vector";
+import { jsx as jsx4, jsxs as jsxs4 } from "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 labelClass2 = "w-full truncate text-[11px] text-muted-foreground";
+var SLIDERS = [
+  { key: "bend", label: "Bend %" },
+  { key: "horizontal", label: "Horizontal distortion %" },
+  { key: "vertical", label: "Vertical distortion %" }
+];
+function VectorEnvelopePanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const panel = getVectorEnvelopePanel(state);
+  const [size, setSize] = React3.useState({ rows: 2, columns: 2 });
+  if (!panel) return null;
+  const env = panel.envelope;
+  const ids = panel.nodeId ? [panel.nodeId] : void 0;
+  const end = () => controller.endMergedEdit();
+  const set = (patch, merge = false) => controller.envelope(patch, { ids, merge });
+  const rows = env?.params.rows ?? size.rows;
+  const columns = env?.params.columns ?? size.columns;
+  const setCount = (key, raw) => {
+    const n = Math.round(parseFloat(raw));
+    if (!Number.isFinite(n) || n < 1 || n > 16) return;
+    if (env) set({ [key]: n });
+    else setSize({ ...size, [key]: n });
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-envelope": "", "aria-label": "Envelope", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Envelope" }),
+      /* @__PURE__ */ jsx4("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__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          "data-vector-envelope-action": "mesh",
+          className: buttonClass2,
+          title: "Make with Mesh",
+          "aria-label": "Make with Mesh",
+          disabled: !panel.canMake || !!env,
+          onClick: () => set({ style: "mesh", rows: size.rows, columns: size.columns }),
+          children: "Mesh"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          "data-vector-envelope-action": "top",
+          className: buttonClass2,
+          title: "Make with Top Object",
+          "aria-label": "Make with Top Object",
+          disabled: !panel.canMakeWithTopObject,
+          onClick: () => controller.makeEnvelopeWithTopObject({ rows: size.rows, columns: size.columns }),
+          children: "Top"
+        }
+      ),
+      /* @__PURE__ */ jsx4("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__ */ jsx4("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" })
+    ] }),
+    env && /* @__PURE__ */ jsxs4("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__ */ jsx4("span", { className: labelClass2, children: "Warp" }),
+      /* @__PURE__ */ jsx4("select", { "aria-label": "Envelope warp", className: selectClass2, value: env.params.style, onChange: (e) => set({ style: e.target.value }), children: VECTOR_ENVELOPE_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx4("option", { value: o.value, children: o.label }, o.value)) })
+    ] }),
+    env && env.params.style !== "mesh" && SLIDERS.map((s) => {
+      const value = env.params[s.key];
+      const onChange = (ev) => {
+        const n = parseFloat(ev.target.value);
+        if (Number.isFinite(n)) set({ [s.key]: n }, true);
+      };
+      return /* @__PURE__ */ jsxs4("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__ */ jsx4("span", { className: labelClass2, children: s.label }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "range",
+            min: -100,
+            max: 100,
+            step: 1,
+            "aria-label": `Envelope ${s.label} slider`,
+            className: "h-4 min-w-0 flex-1 accent-primary",
+            value,
+            onChange,
+            onPointerUp: end,
+            onKeyUp: end,
+            onBlur: end
+          }
+        ),
+        /* @__PURE__ */ jsx4("input", { type: "number", min: -100, max: 100, step: 1, "aria-label": `Envelope ${s.label}`, className: numberClass2, value, onChange, onBlur: end })
+      ] }, s.key);
+    }),
+    env && env.params.style !== "mesh" && /* @__PURE__ */ jsxs4("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__ */ jsx4("span", { className: labelClass2, children: "Orientation" }),
+      /* @__PURE__ */ jsxs4("select", { "aria-label": "Envelope orientation", className: selectClass2, value: env.params.orientation, onChange: (e) => set({ orientation: e.target.value }), children: [
+        /* @__PURE__ */ jsx4("option", { value: "horizontal", children: "Horizontal" }),
+        /* @__PURE__ */ jsx4("option", { value: "vertical", children: "Vertical" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-envelope-param": "mesh", children: [
+      /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate text-[11px] text-muted-foreground", children: "Mesh rows \xD7 columns" }),
+      /* @__PURE__ */ jsx4("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__ */ jsx4("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) })
+    ] }),
+    panel.count > 1 && !panel.canMakeWithTopObject && /* @__PURE__ */ jsx4("p", { className: "text-[11px] text-muted-foreground", children: "Select one object to edit its envelope." }),
+    env && /* @__PURE__ */ jsx4("p", { className: "text-[11px] text-muted-foreground", children: "Edit the mesh with the Envelope tool (U)." })
+  ] });
+}
+
+// src/vector/VectorGradientEditor.tsx
+import {
+  VECTOR_GRADIENT_TYPES,
+  VECTOR_GRADIENT_SPREADS,
+  VECTOR_GRADIENT_INTERPOLATIONS,
+  VECTOR_STROKE_GRADIENT_MODES,
+  VECTOR_GRADIENT_TYPE_LABELS,
+  VECTOR_GRADIENT_SPREAD_LABELS,
+  VECTOR_GRADIENT_INTERPOLATION_LABELS,
+  VECTOR_STROKE_GRADIENT_MODE_LABELS,
+  getVectorGradientEditor,
+  vectorPaintToHex
+} from "@pixerate/editor/vector";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "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 percent = (v) => Math.round(v * 1e3) / 10;
+function VectorGradientEditor({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const ed = getVectorGradientEditor(state);
+  if (!ed) return null;
+  const g = ed.gradient;
+  const sel = ed.selected;
+  const end = () => controller.endMergedEdit();
+  const setType = (value) => {
+    if (value === "solid") {
+      const first = ed.stops[0];
+      controller.setStyle({ [ed.target]: vectorPaintToHex(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
+    } else controller.setGradient({ type: value });
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx5("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
+      ["fill", "stroke"].map((t) => /* @__PURE__ */ jsx5("button", { type: "button", className: buttonClass3, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
+      ed.mixed && /* @__PURE__ */ jsx5("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx5("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
+      /* @__PURE__ */ jsxs5("select", { "aria-label": "Gradient type", className: selectClass3, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
+        /* @__PURE__ */ jsx5("option", { value: "solid", children: "Solid" }),
+        VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ jsx5("option", { value: t, children: VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+      ] }),
+      /* @__PURE__ */ jsx5("button", { type: "button", className: buttonClass3, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
+    ] }),
+    g && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsxs5("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            role: "button",
+            tabIndex: -1,
+            "aria-label": "Add gradient stop",
+            className: "absolute inset-x-1.5 top-0 h-4 cursor-copy rounded border border-border",
+            style: { backgroundImage: `${ed.preview}, repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%)`, backgroundSize: "auto, 8px 8px" },
+            onClick: (e) => {
+              const r = e.currentTarget.getBoundingClientRect();
+              controller.addGradientStop(r.width > 0 ? Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) : 0.5);
+            }
+          }
+        ),
+        ed.stops.map((s) => /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "data-vector-gradient-stop": s.index,
+            "aria-label": `Gradient stop ${s.index + 1} at ${percent(s.offset)}%`,
+            "aria-pressed": s.selected,
+            className: "absolute top-4 h-3.5 w-3 -translate-x-1/2 rounded-sm border border-border aria-pressed:ring-2 aria-pressed:ring-primary",
+            style: { left: `calc(6px + (100% - 12px) * ${s.offset})`, background: s.color, opacity: 0.4 + 0.6 * (s.opacity ?? 1) },
+            onClick: () => controller.selectGradientStop(s.selected ? null : s.index)
+          },
+          s.index
+        ))
+      ] }),
+      sel && /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "color",
+            "aria-label": "Stop colour",
+            className: "h-7 w-9 cursor-pointer rounded border border-border bg-background",
+            value: vectorPaintToHex(sel.color) ?? "#000000",
+            onChange: (e) => controller.setGradientStop(sel.index, { color: e.target.value }, { merge: `gradient-stop-color-${sel.index}` }),
+            onBlur: end
+          }
+        ),
+        /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+          "Opacity",
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              max: 100,
+              step: 5,
+              "aria-label": "Stop opacity",
+              className: numberClass3,
+              value: percent(sel.opacity ?? 1),
+              onChange: (e) => {
+                const n = parseFloat(e.target.value);
+                if (Number.isFinite(n)) controller.setGradientStop(sel.index, { opacity: n / 100 });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+          "At",
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              max: 100,
+              step: 1,
+              "aria-label": "Stop position",
+              className: numberClass3,
+              value: percent(sel.offset),
+              onChange: (e) => {
+                const n = parseFloat(e.target.value);
+                if (Number.isFinite(n)) controller.setGradientStop(sel.index, { offset: n / 100 });
+              }
+            }
+          )
+        ] }),
+        !sel.last && /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+          "Midpoint",
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "number",
+              min: 5,
+              max: 95,
+              step: 1,
+              "aria-label": "Stop midpoint",
+              className: numberClass3,
+              value: percent(sel.midpoint ?? 0.5),
+              onChange: (e) => {
+                const n = parseFloat(e.target.value);
+                if (Number.isFinite(n)) controller.setGradientStop(sel.index, { midpoint: n / 100 });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("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__ */ jsxs5("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx5("span", { className: "w-16", children: "Colours" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Gradient interpolation", className: selectClass3, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx5("option", { value: i, children: VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+      ] }),
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx5("span", { className: "w-16", children: "Smooth" }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 1,
+            step: 0.05,
+            "aria-label": "Gradient smoothness",
+            className: "h-4 flex-1 accent-primary",
+            value: ed.smoothness,
+            onChange: (e) => controller.setGradient({ smoothness: parseFloat(e.target.value) }, { merge: "gradient-smoothness" }),
+            onPointerUp: end,
+            onBlur: end
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx5("span", { className: "w-16", children: "Spread" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Gradient spread", className: selectClass3, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ jsx5("option", { value: sp, children: VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+      ] }),
+      ed.target === "stroke" && /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx5("span", { className: "w-16", children: "On stroke" }),
+        /* @__PURE__ */ jsx5("select", { "aria-label": "Gradient on stroke", className: selectClass3, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ jsx5("option", { value: m, children: VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+      ] })
+    ] })
+  ] });
+}
+
 // src/vector/VectorToolbar.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } 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 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";
+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";
 function VectorToolbar({
   controller,
   tools = VECTOR_TOOLS,
@@ -656,6 +1001,7 @@ function VectorToolbar({
   showSnap = true,
   showPathEdit = true,
   showBlend = true,
+  showDistort = true,
   className
 }) {
   const state = useVectorEditorState(controller);
@@ -663,16 +1009,16 @@ function VectorToolbar({
   const points = state.tool === "direct" ? state.selectedAnchors.length : 0;
   const editing = state.editing;
   const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
-  const [live, setLive] = React3.useState(false);
+  const [live, setLive] = React4.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(
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass4, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ jsxs6("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass2,
+        className: buttonClass4,
         "aria-pressed": state.tool === tool,
         title: `${vectorToolLabel(tool)} (${VECTOR_TOOL_SHORTCUTS[tool]})`,
         "aria-label": vectorToolLabel(tool),
@@ -681,16 +1027,16 @@ function VectorToolbar({
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ jsxs4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ jsxs6("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__ */ jsx4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ jsx4(
+    showSnap && /* @__PURE__ */ jsx6("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         "data-vector-snap": "",
-        className: buttonClass2,
+        className: buttonClass4,
         "aria-pressed": state.snap.objects,
         title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
         "aria-label": VECTOR_SNAP_TITLE,
@@ -698,13 +1044,13 @@ function VectorToolbar({
         children: "Snap"
       }
     ) }),
-    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(
+    showPathEdit && /* @__PURE__ */ jsxs6("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass2,
+          className: buttonClass4,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -713,12 +1059,12 @@ function VectorToolbar({
         },
         a.id
       )),
-      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx4(
+      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass2,
+          className: buttonClass4,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -727,9 +1073,9 @@ function VectorToolbar({
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "range",
@@ -743,9 +1089,9 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           "input",
           {
             type: "number",
@@ -761,12 +1107,12 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ jsx4(
+      state.tool === "paintBucket" && /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass2,
+          className: buttonClass4,
           "aria-pressed": editing.fillGap > 0,
           title: "Close small gaps between path ends when filling",
           "aria-label": "Close gaps",
@@ -775,15 +1121,28 @@ function VectorToolbar({
         }
       )
     ] }),
-    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(
+    showDistort && /* @__PURE__ */ jsx6("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        "data-vector-free-distort": "",
+        className: buttonClass4,
+        "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",
+        onClick: () => controller.setFreeDistort(!state.freeDistort),
+        children: "Distort"
+      }
+    ) }),
+    showBlend && /* @__PURE__ */ jsx6(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsxs6("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
             "data-vector-live-boolean": "",
-            className: buttonClass2,
+            className: buttonClass4,
             "aria-pressed": live,
             title: "Live booleans: keep the shapes editable",
             "aria-label": "Live booleans",
@@ -798,12 +1157,12 @@ function VectorToolbar({
         act("G", "Group", () => controller.group(), count < 1),
         act("U", "Ungroup", () => controller.ungroup(), !groupSelected)
       ] }),
-      /* @__PURE__ */ jsx4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass2,
+          className: buttonClass4,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -812,7 +1171,7 @@ function VectorToolbar({
         },
         a.id
       )) }),
-      /* @__PURE__ */ jsxs4("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ jsxs6("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),
@@ -830,19 +1189,19 @@ function VectorBlendControls({ 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(
+  return /* @__PURE__ */ jsxs6("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ jsx6("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__ */ jsx6(
       "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))
+        children: VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ jsx6("option", { value: sp, children: VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
-    o.spacing !== "smoothColor" && /* @__PURE__ */ jsx4(
+    o.spacing !== "smoothColor" && /* @__PURE__ */ jsx6(
       "input",
       {
         type: "number",
@@ -858,12 +1217,12 @@ function VectorBlendControls({ controller }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "orient",
-        className: buttonClass2,
+        className: buttonClass4,
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
@@ -871,12 +1230,12 @@ function VectorBlendControls({ controller }) {
         children: "\u293F"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "spine",
-        className: buttonClass2,
+        className: buttonClass4,
         title: "Replace Spine (select a blend and a path)",
         "aria-label": "Replace Spine",
         disabled: !blend.canReplaceSpine,
@@ -884,12 +1243,12 @@ function VectorBlendControls({ controller }) {
         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" })
+    /* @__PURE__ */ jsx6("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__ */ jsx6("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass4, 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";
+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";
 function VectorStylePanel({ controller, className }) {
   const state = useVectorEditorState(controller);
   const style = getVectorSelectionStyle(state);
@@ -920,17 +1279,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__ */ jsx4("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ jsx6("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__ */ 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))
+    return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ jsxs6("select", { "aria-label": `${label} arrowhead`, className: selectClass4, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ jsx6("option", { value: "", children: "None" }),
+        VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ jsx6("option", { value: h, children: VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "number",
@@ -938,7 +1297,7 @@ function VectorStylePanel({ controller, className }) {
           step: 0.25,
           "aria-label": `${label} arrowhead scale`,
           title: "Scale (\xD7 stroke width)",
-          className: numberClass2,
+          className: numberClass4,
           value: source[scaleKey],
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -954,14 +1313,14 @@ function VectorStylePanel({ controller, className }) {
   };
   const paintRow = (key, label) => {
     const paint = source[key];
-    const hex = vectorPaintToHex(paint);
+    const hex = vectorPaintToHex2(paint);
     const on = paint !== null && paint !== "none";
-    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 }) }),
+    return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsxs6("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx6("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
         label
       ] }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "color",
@@ -972,17 +1331,18 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      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" })
+      on && !hex && /* @__PURE__ */ jsx6("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  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" }),
+  return /* @__PURE__ */ jsxs6("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ jsx6("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
     paintRow("fill", "Fill"),
     paintRow("stroke", "Stroke"),
-    /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ jsx4("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ jsx4(
+    style && /* @__PURE__ */ jsx6(VectorGradientEditor, { controller }),
+    /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "number",
@@ -998,33 +1358,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__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)) }),
+    /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ jsx6("select", { "aria-label": "Stroke alignment", className: selectClass4, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ jsx6("option", { value: a, children: VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__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(
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ jsxs6(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass2,
+          className: selectClass4,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            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" })
+            VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ jsx6("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ jsx6("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
-          className: buttonClass2,
+          className: buttonClass4,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -1034,27 +1394,27 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    source.hasOpenPath && /* @__PURE__ */ jsxs6(Fragment3, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "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.startArrow || source.endArrow) && /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ jsxs6("select", { "aria-label": "Arrowhead alignment", className: selectClass4, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ jsx6("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ jsx6("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    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(
+    source.corners > 0 && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "number",
           min: 0,
           step: 1,
           "aria-label": "Corner radius",
-          className: numberClass2,
+          className: numberClass4,
           value: Math.round(source.cornerRadius * 100) / 100,
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -1062,12 +1422,12 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__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)) }),
+      /* @__PURE__ */ jsx6("select", { "aria-label": "Corner kind", className: selectClass4, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ jsx6("option", { value: k, children: VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    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(
+    style && /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx6("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "range",
@@ -1081,18 +1441,19 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    style && /* @__PURE__ */ jsx4(VectorEffectsPanel, { controller })
+    style && /* @__PURE__ */ jsx6(VectorEffectsPanel, { controller }),
+    style && /* @__PURE__ */ jsx6(VectorEnvelopePanel, { controller })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
-  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" })
+  return /* @__PURE__ */ jsxs7("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ jsx7(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx7("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx7(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ jsx7(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
     ] })
   ] });
 }
@@ -1100,7 +1461,10 @@ export {
   VectorCanvas,
   VectorEditor,
   VectorEffectsPanel,
+  VectorEnvelopePanel,
+  VectorGradientAnnotator,
   VectorGradientDefs,
+  VectorGradientEditor,
   VectorSceneNodes,
   VectorStylePanel,
   VectorToolbar,