@pixerate/editor-react 0.72.0 → 0.74.0

package/dist/vector/index.cjs

@@ -32,10 +32,13 @@ var vector_exports = {};
 __export(vector_exports, {
   VectorAppearancePanel: () => VectorAppearancePanel,
   VectorCanvas: () => VectorCanvas,
+  VectorConnectorPanel: () => VectorConnectorPanel,
+  VectorConstraintsPanel: () => VectorConstraintsPanel,
   VectorEditor: () => VectorEditor,
   VectorEffectsPanel: () => VectorEffectsPanel,
   VectorEnvelopePanel: () => VectorEnvelopePanel,
   VectorFilterDefs: () => VectorFilterDefs,
+  VectorFramePanel: () => VectorFramePanel,
   VectorGradientAnnotator: () => VectorGradientAnnotator,
   VectorGradientDefs: () => VectorGradientDefs,
   VectorGradientEditor: () => VectorGradientEditor,
@@ -43,6 +46,9 @@ __export(vector_exports, {
   VectorMaskedNodes: () => VectorMaskedNodes,
   VectorSceneNodes: () => VectorSceneNodes,
   VectorStylePanel: () => VectorStylePanel,
+  VectorSymbolsPanel: () => VectorSymbolsPanel,
+  VectorTextElement: () => VectorTextElement,
+  VectorTextPanel: () => VectorTextPanel,
   VectorToolbar: () => VectorToolbar,
   VectorWidthPointEditor: () => VectorWidthPointEditor,
   useVectorCommands: () => useVectorCommands,
@@ -115,11 +121,11 @@ function VectorWidthPointEditor({ controller, edit, accentColor = import_vector2
     refocus();
     controller.closeWidthPointEdit();
   };
-  const num = (v) => v.trim() !== "" && Number.isFinite(Number(v)) ? Number(v) : void 0;
+  const num2 = (v) => v.trim() !== "" && Number.isFinite(Number(v)) ? Number(v) : void 0;
   const apply = () => {
-    const t = num(position);
+    const t = num2(position);
     refocus();
-    controller.commitWidthPointEdit({ t: t === void 0 ? void 0 : Math.min(Math.max(t, 0), 100) / 100, left: num(left), right: num(right) });
+    controller.commitWidthPointEdit({ t: t === void 0 ? void 0 : Math.min(Math.max(t, 0), 100) / 100, left: num2(left), right: num2(right) });
   };
   const stop = (e) => e.stopPropagation();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -235,9 +241,42 @@ function VectorFilterDefs({ filters }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("filter", { id: f.id, filterUnits: "userSpaceOnUse", x: f.x, y: f.y, width: f.width, height: f.height, colorInterpolationFilters: "sRGB", children: f.primitives.map(primitive) }, f.id)) });
 }
 var blendStyle = (blendMode) => blendMode ? { mixBlendMode: blendMode } : void 0;
+function VectorTextElement({ node }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-id": node.id, "data-vector-text": "", transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.layers.map((layer, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "text",
+    {
+      "data-vector-layer": layer.kind,
+      xmlSpace: "preserve",
+      fill: layer.fill,
+      stroke: layer.stroke,
+      strokeWidth: layer.stroke === "none" ? void 0 : layer.strokeWidth,
+      strokeLinejoin: layer.strokeLinejoin,
+      strokeDasharray: layer.strokeDasharray,
+      opacity: layer.opacity < 1 ? layer.opacity : void 0,
+      style: { whiteSpace: "pre", ...blendStyle(layer.blendMode) },
+      children: node.spans.map((sp, k) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "tspan",
+        {
+          x: sp.x,
+          y: sp.y,
+          rotate: sp.rotate,
+          fontFamily: sp.fontFamily,
+          fontSize: sp.fontSize,
+          fontWeight: sp.fontWeight,
+          fontStyle: sp.fontStyle,
+          textDecoration: sp.textDecoration,
+          fill: layer.runFills && sp.fill ? sp.fill : void 0,
+          children: sp.text
+        },
+        k
+      ))
+    },
+    i
+  )) });
+}
 function VectorSceneNodes({ nodes }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: nodes.map(
-    (node) => node.kind === "group" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    (node) => node.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorTextElement, { node }, node.id) : node.kind === "group" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "g",
       {
         "data-vector-id": node.id,
@@ -368,10 +407,13 @@ function VectorCanvas({
 }) {
   const state = useVectorEditorState(controller);
   const svgRef = (0, import_react3.useRef)(null);
+  const textRef = (0, import_react3.useRef)(null);
+  const editingText = state.textEdit?.nodeId ?? null;
   const fitted = (0, import_react3.useRef)(!fitOnMount);
   const uid = (0, import_react3.useId)().replace(/:/g, "");
   const scene = (0, import_vector3.getVectorSceneRenderData)(state, { idPrefix: `ve${uid}-` });
   const overlay = (0, import_vector3.getVectorOverlayRenderData)(state);
+  const host = (0, import_vector3.getVectorSymbolEditBackground)(state, { idPrefix: `ve${uid}-host-` });
   (0, import_react3.useEffect)(() => {
     const el = svgRef.current;
     if (!el || fitted.current) return;
@@ -387,6 +429,11 @@ function VectorCanvas({
     observer.observe(el);
     return () => observer.disconnect();
   }, [controller]);
+  (0, import_react3.useEffect)(() => {
+    if (!editingText) return;
+    const t = setTimeout(() => textRef.current?.focus({ preventScroll: true }), 0);
+    return () => clearTimeout(t);
+  }, [editingText]);
   (0, import_react3.useEffect)(() => {
     const el = svgRef.current;
     if (!el) return;
@@ -472,7 +519,30 @@ function VectorCanvas({
             stroke: "rgba(0,0,0,0.12)"
           }
         ),
+        host && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-symbol-host": "", opacity: 0.3, pointerEvents: "none", transform: host.transform, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorGradientDefs, { defs: host.defs }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorFilterDefs, { filters: host.filters }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorSceneNodes, { nodes: host.nodes })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-scene": "", transform: scene.transform, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorSceneNodes, { nodes: scene.nodes }) }),
+        overlay.frames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-frame-labels": "", children: overlay.frames.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "text",
+          {
+            "data-vector-frame-label": f.id,
+            x: f.x,
+            y: f.y - 6,
+            fontSize: 11,
+            fontWeight: f.selected ? 600 : 400,
+            fill: f.selected ? accentColor : "#737373",
+            style: { fontFamily: "system-ui, sans-serif", cursor: "default", userSelect: "none" },
+            onPointerDown: (e) => {
+              e.stopPropagation();
+              controller.select([f.id]);
+            },
+            children: f.name
+          },
+          f.id
+        )) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-overlay": "", pointerEvents: "none", fill: "none", children: [
           overlay.outlines.map((o) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: o.d, stroke: accentColor, strokeWidth: o.selected ? 1 : 1.5, opacity: o.selected ? 1 : 0.7 }, o.id)),
           overlay.penPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: overlay.penPreview, stroke: accentColor, strokeDasharray: "4 3" }),
@@ -614,6 +684,38 @@ function VectorCanvas({
             }
           ),
           overlay.cutPoint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { "data-vector-cut-point": "", cx: overlay.cutPoint.x, cy: overlay.cutPoint.y, r: import_vector3.VECTOR_OVERLAY_THEME.handleRadius + 1, fill: import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }),
+          overlay.text && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-text-edit": overlay.text.nodeId, "data-editing": overlay.text.editing || void 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: overlay.text.frame, stroke: accentColor, strokeDasharray: overlay.text.editing ? "3 2" : void 0, opacity: 0.8 }),
+            overlay.text.selection.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-text-selection": "", d, fill: accentColor, fillOpacity: 0.25, stroke: "none" }, i)),
+            overlay.text.caret && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { "data-vector-text-caret": "", x1: overlay.text.caret.x1, y1: overlay.text.caret.y1, x2: overlay.text.caret.x2, y2: overlay.text.caret.y2, stroke: accentColor, strokeWidth: 1.5 }),
+            overlay.text.overflow && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-text-overflow": "", transform: `translate(${overlay.text.overflow.x} ${overlay.text.overflow.y})`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: -5, y: -5, width: 10, height: 10, fill: import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: "#dc2626" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M-3 0H3M0 -3V3", stroke: "#dc2626" })
+            ] })
+          ] }),
+          overlay.trackingPoints.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-tracking-point": "", d: `M${t.x - 5} ${t.y}H${t.x + 5}M${t.x} ${t.y - 5}V${t.y + 5}`, stroke: guideColor, strokeWidth: 1.5 }, `track:${i}`)),
+          overlay.typedEntry && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-typed-entry": "", transform: `translate(${overlay.typedEntry.x + 14} ${overlay.typedEntry.y + 18})`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: -3, y: -12, width: overlay.typedEntry.text.length * 7 + 8, height: 17, rx: 3, fill: import_vector3.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: 1, y: 1, fontSize: 11, fill: accentColor, style: { fontFamily: "ui-monospace, monospace" }, children: overlay.typedEntry.text })
+          ] }),
+          overlay.connectorSites.map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "circle",
+            {
+              "data-vector-connection-site": s.side,
+              "data-active": s.active || void 0,
+              cx: s.x,
+              cy: s.y,
+              r: s.active ? 5 : 3.5,
+              fill: s.active ? accentColor : import_vector3.VECTOR_OVERLAY_THEME.handleFill,
+              stroke: accentColor
+            },
+            `site:${s.nodeId}:${s.side}`
+          )),
+          overlay.constraints.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { "data-vector-constraint-glyph": c.kind, "data-satisfied": c.satisfied ? "true" : "false", children: [
+            c.dimension && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: c.dimension.x1, y1: c.dimension.y1, x2: c.dimension.x2, y2: c.dimension.y2, stroke: c.satisfied ? import_vector3.VECTOR_OVERLAY_THEME.guide : "#dc2626", strokeDasharray: "2 2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: c.x, y: c.y, fontSize: 10, textAnchor: "middle", fill: c.satisfied ? accentColor : "#dc2626", stroke: "#ffffff", strokeWidth: 3, paintOrder: "stroke", style: { fontFamily: "system-ui, sans-serif" }, children: c.label })
+          ] }, `constraint:${c.id}`)),
+          overlay.textBox && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { "data-vector-text-box": "", x: overlay.textBox.x, y: overlay.textBox.y, width: overlay.textBox.width, height: overlay.textBox.height, stroke: accentColor, strokeDasharray: "3 2" }),
           overlay.marquee && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "rect",
             {
@@ -646,6 +748,78 @@ function VectorCanvas({
           )),
           overlay.status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { "data-vector-status": "", x: 8, y: "100%", dy: -8, fontSize: 11, fill: accentColor, style: { fontFamily: "system-ui, sans-serif" }, children: overlay.status })
         ] }),
+        state.textEdit && overlay.text && // A hidden textarea at the caret takes typing and composed (IME) text.
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("foreignObject", { x: overlay.text.caret?.x1 ?? 0, y: overlay.text.caret?.y1 ?? 0, width: 1, height: 1, style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "textarea",
+          {
+            ref: textRef,
+            "data-testid": "vector-type-input",
+            "aria-label": "Text",
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            style: { position: "absolute", width: 1, height: 1, padding: 0, border: 0, opacity: 0, resize: "none", overflow: "hidden" },
+            onPointerDown: (e) => e.stopPropagation(),
+            onInput: (e) => {
+              const el = e.currentTarget;
+              if (e.nativeEvent.isComposing) return;
+              if (el.value) controller.textInput(el.value);
+              el.value = "";
+            },
+            onCompositionEnd: (e) => {
+              const el = e.currentTarget;
+              if (el.value) controller.textInput(el.value);
+              el.value = "";
+            },
+            onKeyDown: (e) => {
+              e.stopPropagation();
+              if (e.nativeEvent.isComposing) return;
+              if (e.key.length === 1 && !e.metaKey && !e.ctrlKey) return;
+              if (controller.keyDown((0, import_vector3.toVectorKeyInput)(e))) e.preventDefault();
+              if (!controller.getState().textEdit) svgRef.current?.focus({ preventScroll: true });
+            },
+            onKeyUp: (e) => e.stopPropagation(),
+            onCopy: (e) => {
+              const text = controller.getSelectedText();
+              if (text) {
+                e.clipboardData.setData("text/plain", text);
+                e.preventDefault();
+              }
+              e.stopPropagation();
+            },
+            onCut: (e) => {
+              const text = controller.cutText();
+              if (text) {
+                e.clipboardData.setData("text/plain", text);
+                e.preventDefault();
+              }
+              e.stopPropagation();
+            },
+            onPaste: (e) => {
+              const text = e.clipboardData.getData("text/plain");
+              if (text) controller.textInput(text);
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }
+        ) }),
+        state.symbolEdit && // Isolation mode: which symbol, and the way out (Escape with nothing selected works too).
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("foreignObject", { "data-vector-symbol-edit": state.symbolEdit.symbolId, x: 8, y: 8, width: 320, height: 32, style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: { display: "inline-flex", alignItems: "center", gap: 8, padding: "4px 8px", borderRadius: 6, background: "rgba(15,23,42,0.85)", color: "#fff", font: "12px system-ui, sans-serif" },
+            onPointerDown: (e) => e.stopPropagation(),
+            onDoubleClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                "Symbol: ",
+                state.symbolEdit.name
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", "aria-label": "Exit symbol", style: { border: "1px solid rgba(255,255,255,0.4)", borderRadius: 4, padding: "0 6px", background: "transparent", color: "#fff", cursor: "pointer" }, onClick: () => controller.exitSymbolEdit(), children: "Done" })
+            ]
+          }
+        ) }),
         edit && editAt && // Width Point Edit (double-click with the width tool), beside the point.
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("foreignObject", { "data-vector-width-point-edit": "", x: editAt.x + 12, y: editAt.y + 12, width: 180, height: 140, style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorWidthPointEditor, { controller, edit, accentColor }, `${edit.nodeId}:${edit.index}:${edit.t}`) })
       ]
@@ -654,8 +828,8 @@ function VectorCanvas({
 }
 
 // src/vector/VectorToolbar.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_vector9 = require("@pixerate/editor/vector");
+var import_react8 = __toESM(require("react"), 1);
+var import_vector14 = require("@pixerate/editor/vector");
 
 // src/vector/VectorEffectsPanel.tsx
 var import_vector4 = require("@pixerate/editor/vector");
@@ -1234,16 +1408,528 @@ function VectorMaskPanel({ controller, className }) {
   ] });
 }
 
-// src/vector/VectorGradientEditor.tsx
+// src/vector/VectorTextPanel.tsx
+var import_react5 = require("react");
 var import_vector8 = require("@pixerate/editor/vector");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var buttonClass5 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var inputClass = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var labelClass4 = "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground";
+var num = (v) => {
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : null;
+};
+function VectorTextPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const listId = `vector-fonts-${(0, import_react5.useId)().replace(/:/g, "")}`;
+  const panel = (0, import_vector8.getVectorTextPanel)(state);
+  if (!panel) return null;
+  const f = panel.font;
+  const style = (patch, merge) => (0, import_vector8.applyVectorTextStyle)(controller, patch, merge ? { merge } : {});
+  const where = panel.target === "range" ? "Selected characters" : panel.target === "nodes" ? "Selected text" : "New text";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-text-panel": panel.target, "aria-label": "Text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: labelClass4, children: "Text" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-muted-foreground", children: where })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          "aria-label": "Font family",
+          className: inputClass,
+          list: listId,
+          placeholder: "Mixed",
+          defaultValue: f.fontFamily ?? "",
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.target.blur();
+          },
+          onBlur: (e) => {
+            const v = e.target.value.trim();
+            if (v && v !== f.fontFamily) style({ fontFamily: v });
+          }
+        },
+        `family:${f.fontFamily}`
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("datalist", { id: listId, children: panel.families.map((fam) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: fam }, fam)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("select", { "aria-label": "Font weight", className: inputClass, value: f.fontWeight ?? "", onChange: (e) => style({ fontWeight: Number(e.target.value) }), children: [
+        f.fontWeight === null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Mixed" }),
+        import_vector8.VECTOR_FONT_WEIGHTS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: w.value, children: w.label }, w.value)),
+        f.fontWeight !== null && !import_vector8.VECTOR_FONT_WEIGHTS.some((w) => w.value === f.fontWeight) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: f.fontWeight, children: f.fontWeight })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          type: "number",
+          "aria-label": "Font size",
+          title: "Font size",
+          className: `${inputClass} w-14 flex-none`,
+          min: 0.5,
+          step: 1,
+          placeholder: "\u2014",
+          value: f.fontSize === null ? "" : Math.round(f.fontSize * 100) / 100,
+          onChange: (e) => {
+            const v = num(e.target.value);
+            if (v !== null && v >= 0.5) style({ fontSize: v }, "text-size");
+          },
+          onBlur: () => controller.endMergedEdit()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Bold", "aria-pressed": (f.fontWeight ?? 0) >= 600, onClick: () => style({ fontWeight: (f.fontWeight ?? 400) >= 600 ? 400 : 700 }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("b", { children: "B" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Italic", "aria-pressed": f.italic === true, onClick: () => style({ italic: !f.italic }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { children: "I" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Underline", "aria-pressed": f.underline === true, onClick: () => style({ underline: !f.underline }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("u", { children: "U" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Strike through", "aria-pressed": f.strikethrough === true, onClick: () => style({ strikethrough: !f.strikethrough }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s", { children: "S" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex flex-1 items-center gap-1 text-xs text-foreground", title: "Tracking (1/1000 em)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "VA" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "number",
+            "aria-label": "Tracking",
+            className: inputClass,
+            step: 10,
+            placeholder: "\u2014",
+            value: f.tracking ?? "",
+            onChange: (e) => style({ tracking: num(e.target.value) ?? 0 }, "text-tracking"),
+            onBlur: () => controller.endMergedEdit()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex flex-1 items-center gap-1 text-xs text-foreground", title: "Leading (empty: auto)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "\u2195" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "number",
+            "aria-label": "Leading",
+            className: inputClass,
+            min: 0,
+            step: 1,
+            placeholder: "Auto",
+            value: f.leading ?? "",
+            onChange: (e) => style({ leading: num(e.target.value) }, "text-leading"),
+            onBlur: () => controller.endMergedEdit()
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": "Alignment", children: import_vector8.VECTOR_TEXT_ALIGN_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        className: buttonClass5,
+        "aria-label": `Align ${o.label}`,
+        "aria-pressed": panel.align === o.value,
+        onClick: () => (0, import_vector8.applyVectorParagraphStyle)(controller, { align: o.value }),
+        children: o.label
+      },
+      o.value
+    )) }),
+    panel.target !== "defaults" && panel.ids.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass5,
+          "aria-pressed": panel.frame === "point",
+          title: "Point text: no wrapping",
+          onClick: () => controller.setTextFrame(panel.ids[0], { kind: "point" }),
+          children: "Point"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass5,
+          "aria-pressed": panel.frame === "area",
+          title: "Area text: wraps in a box",
+          onClick: () => controller.setTextFrame(panel.ids[0], { kind: "area" }),
+          children: "Area"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass5,
+          "data-vector-text-action": "type-on-path",
+          disabled: !panel.pathId,
+          title: panel.pathId ? "Type on a Path: set text along the selected path" : "Select a path to set text along it",
+          onClick: () => {
+            const r = controller.typeOnPath(panel.pathId, { text: "Text on a path" });
+            if (r.ok && r.id) controller.editText(r.id, { anchor: 0, focus: "Text on a path".length });
+          },
+          children: "Type on path"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass5,
+          "data-vector-text-action": "create-outlines",
+          disabled: panel.target !== "nodes" || !panel.outlines,
+          title: panel.outlines ? "Create Outlines: turn the text into paths" : "Create Outlines needs a font with outlines (load one)",
+          onClick: () => controller.createOutlines({ ids: panel.ids }),
+          children: "Create outlines"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/vector/VectorSymbolsPanel.tsx
+var import_react6 = require("react");
+var import_vector9 = require("@pixerate/editor/vector");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var buttonClass6 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 var selectClass5 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass4 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
-var buttonClass5 = "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 labelClass5 = "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground";
+function VectorSymbolsPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const uid = (0, import_react6.useId)().replace(/:/g, "");
+  const panel = (0, import_vector9.getVectorSymbolsPanel)(state, { idPrefix: `vsym${uid}-` });
+  const [error, setError] = (0, import_react6.useState)(null);
+  const report = (r) => setError(r.ok ? null : r.message ?? null);
+  const inst = panel.instance;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-symbols-panel": "", "aria-label": "Symbols", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: labelClass5, children: "Symbols" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, "data-vector-symbol-action": "make", disabled: !panel.canMake, title: "New Symbol from the selection (F8)", onClick: () => report(controller.makeSymbol()), children: "New" }),
+      panel.editing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, "data-vector-symbol-action": "exit", title: "Leave the symbol (Escape)", onClick: () => controller.exitSymbolEdit(), children: "Done" })
+    ] }),
+    panel.symbols.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "space-y-1", children: panel.symbols.map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { "data-vector-symbol": s.id, "data-editing": s.editing || void 0, className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { viewBox: s.viewBox, width: 28, height: 28, className: "shrink-0 rounded border border-border bg-background", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorGradientDefs, { defs: s.scene.defs }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorFilterDefs, { filters: s.scene.filters }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorSceneNodes, { nodes: s.scene.nodes })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "min-w-0 flex-1 truncate text-xs text-foreground", title: `${s.name} \xB7 ${s.instances} instance${s.instances === 1 ? "" : "s"}`, children: [
+        s.name,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-muted-foreground", children: [
+          "\xB7 ",
+          s.instances
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, "aria-label": `Place ${s.name}`, title: "Place an instance", onClick: () => report(controller.placeSymbol(s.id)), children: "+" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, "aria-label": `Edit ${s.name}`, "aria-pressed": s.editing, title: "Edit Symbol (isolation mode)", onClick: () => report(controller.editSymbol(s.id)), children: "\u270E" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, "aria-label": `Delete ${s.name}`, title: "Delete the symbol (its instances become groups)", onClick: () => report(controller.deleteSymbol(s.id, { detach: true })), children: "\xD7" })
+    ] }, s.id)) }),
+    inst && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", "data-vector-instance": inst.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Instance symbol", className: selectClass5, value: inst.symbolId, onChange: (e) => report(controller.replaceSymbol(e.target.value, { ids: [inst.id] })), children: panel.symbols.map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: s.id, children: s.name }, s.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, title: "Break Link to Symbol: a plain group of its art", onClick: () => report(controller.detachInstances({ ids: [inst.id] })), children: "Detach" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", "aria-label": "Scale strokes", checked: inst.scaleStrokes, onChange: (e) => report(controller.setInstanceOptions({ scaleStrokes: e.target.checked }, { ids: [inst.id] })) }),
+          "Scale strokes"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Paint every fill of the art in this instance", children: [
+          "Tint",
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              type: "color",
+              "aria-label": "Instance fill",
+              className: "h-6 w-8 rounded border border-border",
+              value: (0, import_vector9.vectorPaintToHex)(inst.fill ?? void 0) ?? "#000000",
+              onChange: (e) => report(controller.setInstanceOptions({ fill: e.target.value }, { ids: [inst.id] }))
+            }
+          )
+        ] }),
+        inst.fill !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, "aria-label": "Clear tint", onClick: () => report(controller.setInstanceOptions({ fill: null }, { ids: [inst.id] })), children: "\xD7" })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-destructive", children: error })
+  ] });
+}
+
+// src/vector/VectorConstraintsPanel.tsx
+var import_react7 = require("react");
+var import_vector10 = require("@pixerate/editor/vector");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var buttonClass7 = "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 inputClass2 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var labelClass6 = "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground";
+function VectorConstraintsPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const panel = (0, import_vector10.getVectorConstraintPanel)(state);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [param, setParam] = (0, import_react7.useState)({ name: "", value: "" });
+  const report = (r) => setError(r.ok ? null : r.message ?? null);
+  const add = (a) => report(controller.addConstraint({ kind: a.kind, refs: a.refs }));
+  if (!panel.actions.length && !panel.constraints.length && !state.document.constraints?.length && state.tool !== "direct") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-constraints-panel": "", "data-dof-status": panel.dof.status, "aria-label": "Constraints", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: labelClass6, children: "Constraints" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1 truncate text-[11px] text-muted-foreground", "data-vector-dof": "", children: panel.dof.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: buttonClass7, title: "Auto Constrain: add what the selection (or the drawing) nearly satisfies", onClick: () => report(controller.autoConstrain()), children: "Auto" })
+    ] }),
+    panel.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Add constraint", children: panel.actions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: buttonClass7, "data-vector-constraint-action": a.kind, title: `Add ${a.label}`, onClick: () => add(a), children: a.label }, a.kind)) }),
+    panel.constraints.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "space-y-1", children: panel.constraints.map((c) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { "data-vector-constraint": c.id, "data-satisfied": c.satisfied && !c.conflict ? "true" : "false", className: "flex items-center gap-1 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: `min-w-0 flex-1 truncate ${c.conflict || !c.satisfied ? "text-destructive" : ""}`, children: [
+        c.label,
+        c.name ? ` ${c.name}` : ""
+      ] }),
+      c.value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "input",
+        {
+          "aria-label": `Value of ${c.name ?? c.id}`,
+          className: `${inputClass2} w-16 flex-none`,
+          defaultValue: c.value,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.target.blur();
+          },
+          onBlur: (e) => {
+            if (e.target.value.trim() !== c.value) report(controller.setConstraintValue(c.id, e.target.value));
+          }
+        },
+        `${c.id}:${c.value}`
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: buttonClass7, "aria-label": `Remove ${c.label} constraint`, onClick: () => report(controller.removeConstraints([c.id])), children: "\xD7" })
+    ] }, c.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1", "aria-label": "Parameters", children: [
+      panel.parameters.map((p) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1 text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-12 truncate font-mono", children: p.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "input",
+          {
+            "aria-label": `Parameter ${p.name}`,
+            className: inputClass2,
+            defaultValue: p.value,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") e.target.blur();
+            },
+            onBlur: (e) => {
+              if (e.target.value.trim() !== p.value) report(controller.setConstraintValue(p.name, e.target.value));
+            }
+          },
+          `${p.name}:${p.value}`
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-10 text-right text-muted-foreground", children: p.result === null ? "!" : Math.round(p.result * 100) / 100 })
+      ] }, p.name)),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "form",
+        {
+          className: "flex items-center gap-1",
+          onSubmit: (e) => {
+            e.preventDefault();
+            if (!param.name.trim()) return;
+            const r = controller.setConstraintValue(param.name.trim(), param.value);
+            report(r);
+            if (r.ok) setParam({ name: "", value: "" });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { "aria-label": "New parameter name", placeholder: "name", className: `${inputClass2} w-12 flex-none`, value: param.name, onChange: (e) => setParam({ ...param, name: e.target.value }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { "aria-label": "New parameter value", placeholder: "value", className: inputClass2, value: param.value, onChange: (e) => setParam({ ...param, value: e.target.value }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "submit", className: buttonClass7, "aria-label": "Add parameter", children: "+" })
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-[11px] text-destructive", children: error })
+  ] });
+}
+
+// src/vector/VectorFramePanel.tsx
+var import_vector11 = require("@pixerate/editor/vector");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var buttonClass8 = "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 selectClass6 = "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 VectorFramePanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const panel = (0, import_vector11.getVectorFramePanel)(state);
+  const f = panel.frame;
+  const ids = f ? [f.id] : void 0;
+  const fillHex = f ? (0, import_vector11.vectorPaintToHex)(f.frame.fill ?? null) : null;
+  const number = (key, label) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-4 text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "input",
+      {
+        type: "number",
+        step: "1",
+        min: key === "width" || key === "height" ? 1 : void 0,
+        "aria-label": `Frame ${key}`,
+        className: numberClass4,
+        defaultValue: Math.round(f.frame[key] * 100) / 100,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") e.currentTarget.blur();
+        },
+        onBlur: (e) => {
+          const n = parseFloat(e.target.value);
+          if (Number.isFinite(n) && n !== Math.round(f.frame[key] * 100) / 100 && (key === "x" || key === "y" || n > 0)) controller.setFrame({ [key]: n }, { ids });
+        }
+      },
+      `${f.id}:${f.frame[key]}`
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-frame-panel": "", "aria-label": "Frame", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Frame" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          "data-vector-frame-action": "frame-selection",
+          className: buttonClass8,
+          title: "Frame Selection: put the selection in a frame fitted to it",
+          "aria-label": "Frame Selection",
+          disabled: !state.selection.length,
+          onClick: () => controller.frameSelection(),
+          children: "Frame selection"
+        }
+      )
+    ] }),
+    f && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2", "data-vector-frame": f.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-1", children: [
+        number("x", "X"),
+        number("y", "Y"),
+        number("width", "W"),
+        number("height", "H")
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Frame fill on",
+              checked: f.frame.fill !== void 0 && f.frame.fill !== null,
+              onChange: (e) => controller.setFrame({ fill: e.target.checked ? fillHex ?? "#ffffff" : null }, { ids })
+            }
+          ),
+          "Fill"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            type: "color",
+            "aria-label": "Frame fill colour",
+            className: "h-7 w-10 cursor-pointer rounded border border-border bg-background disabled:opacity-40",
+            disabled: f.frame.fill === void 0 || f.frame.fill === null,
+            value: fillHex ?? "#ffffff",
+            onChange: (e) => controller.setFrame({ fill: e.target.value }, { ids, merge: "frame-fill" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Hide what lies outside the frame", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "checkbox", "aria-label": "Clip content", checked: f.frame.clip !== false, onChange: (e) => controller.setFrame({ clip: e.target.checked }, { ids }) }),
+          "Clip"
+        ] })
+      ] })
+    ] }),
+    panel.resizing && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", "data-vector-resizing": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-16", children: "Horizontal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "select",
+          {
+            "aria-label": "Horizontal constraint",
+            className: selectClass6,
+            value: panel.resizing.horizontal,
+            onChange: (e) => controller.setResizing({ horizontal: e.target.value }, { ids: panel.resizing.ids }),
+            children: [
+              panel.resizing.horizontal === "mixed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "mixed", disabled: true, children: "Mixed" }),
+              import_vector11.VECTOR_HORIZONTAL_RESIZING.map((h) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: h, children: import_vector11.VECTOR_HORIZONTAL_RESIZING_LABELS[h] }, h))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-16", children: "Vertical" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "select",
+          {
+            "aria-label": "Vertical constraint",
+            className: selectClass6,
+            value: panel.resizing.vertical,
+            onChange: (e) => controller.setResizing({ vertical: e.target.value }, { ids: panel.resizing.ids }),
+            children: [
+              panel.resizing.vertical === "mixed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "mixed", disabled: true, children: "Mixed" }),
+              import_vector11.VECTOR_VERTICAL_RESIZING.map((v) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: v, children: import_vector11.VECTOR_VERTICAL_RESIZING_LABELS[v] }, v))
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/vector/VectorConnectorPanel.tsx
+var import_vector12 = require("@pixerate/editor/vector");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var buttonClass9 = "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 selectClass7 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass5 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
+function VectorConnectorPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const panel = (0, import_vector12.getVectorConnectorPanel)(state);
+  if (!panel) return null;
+  const ids = [panel.id];
+  const end = (key, label, e) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1", "data-vector-connector-end": key, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
+    e ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "select",
+        {
+          "aria-label": `${label} side`,
+          className: selectClass7,
+          value: e.side ?? "auto",
+          onChange: (ev) => controller.setConnector({ [key]: { nodeId: e.nodeId, side: ev.target.value } }, { ids }),
+          children: import_vector12.VECTOR_CONNECTOR_SIDES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: s, children: import_vector12.VECTOR_CONNECTOR_SIDE_LABELS[s] }, s))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: buttonClass9, title: "Unglue: the end stays where it is", "aria-label": `Unglue ${label.toLowerCase()}`, onClick: () => controller.setConnector({ [key]: null }, { ids }), children: "Unglue" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Free" })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-connector-panel": panel.id, "aria-label": "Connector", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Connector" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("select", { "aria-label": "Connector route", className: selectClass7, value: panel.route, onChange: (e) => controller.setConnector({ route: e.target.value }, { ids }), children: import_vector12.VECTOR_CONNECTOR_ROUTES.map((r) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: r, children: import_vector12.VECTOR_CONNECTOR_ROUTE_LABELS[r] }, r)) }),
+      panel.route === "elbow" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "input",
+        {
+          type: "number",
+          min: "0",
+          step: "1",
+          "aria-label": "Elbow radius",
+          title: "Corner radius of the bends",
+          className: numberClass5,
+          value: panel.radius,
+          onChange: (e) => {
+            const n = parseFloat(e.target.value);
+            if (Number.isFinite(n) && n >= 0) controller.setConnector({ radius: n }, { ids });
+          }
+        }
+      )
+    ] }),
+    end("start", "Start", panel.start),
+    end("end", "End", panel.end)
+  ] });
+}
+
+// src/vector/VectorGradientEditor.tsx
+var import_vector13 = require("@pixerate/editor/vector");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var selectClass8 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass6 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
+var buttonClass10 = "inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 var percent = (v) => Math.round(v * 1e3) / 10;
 function VectorGradientEditor({ controller, className }) {
   const state = useVectorEditorState(controller);
-  const ed = (0, import_vector8.getVectorGradientEditor)(state);
+  const ed = (0, import_vector13.getVectorGradientEditor)(state);
   if (!ed) return null;
   const g = ed.gradient;
   const sel = ed.selected;
@@ -1251,26 +1937,26 @@ function VectorGradientEditor({ controller, className }) {
   const setType = (value) => {
     if (value === "solid") {
       const first = ed.stops[0];
-      controller.setStyle({ [ed.target]: (0, import_vector8.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
+      controller.setStyle({ [ed.target]: (0, import_vector13.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
     } else controller.setGradient({ type: value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
-      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
-      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
+      ["fill", "stroke"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
+      ed.mixed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("select", { "aria-label": "Gradient type", className: selectClass5, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "solid", children: "Solid" }),
-        import_vector8.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: t, children: import_vector8.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("select", { "aria-label": "Gradient type", className: selectClass8, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "solid", children: "Solid" }),
+        import_vector13.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: t, children: import_vector13.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
     ] }),
-    g && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    g && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             role: "button",
@@ -1284,7 +1970,7 @@ function VectorGradientEditor({ controller, className }) {
             }
           }
         ),
-        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ed.stops.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             type: "button",
@@ -1298,21 +1984,21 @@ function VectorGradientEditor({ controller, className }) {
           s.index
         ))
       ] }),
-      sel && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      sel && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             type: "color",
             "aria-label": "Stop colour",
             className: "h-7 w-9 cursor-pointer rounded border border-border bg-background",
-            value: (0, import_vector8.vectorPaintToHex)(sel.color) ?? "#000000",
+            value: (0, import_vector13.vectorPaintToHex)(sel.color) ?? "#000000",
             onChange: (e) => controller.setGradientStop(sel.index, { color: e.target.value }, { merge: `gradient-stop-color-${sel.index}` }),
             onBlur: end
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Opacity",
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "input",
             {
               type: "number",
@@ -1320,7 +2006,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 5,
               "aria-label": "Stop opacity",
-              className: numberClass4,
+              className: numberClass6,
               value: percent(sel.opacity ?? 1),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -1329,9 +2015,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "At",
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "input",
             {
               type: "number",
@@ -1339,7 +2025,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 100,
               step: 1,
               "aria-label": "Stop position",
-              className: numberClass4,
+              className: numberClass6,
               value: percent(sel.offset),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -1348,9 +2034,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        !sel.last && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Midpoint",
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "input",
             {
               type: "number",
@@ -1358,7 +2044,7 @@ function VectorGradientEditor({ controller, className }) {
               max: 95,
               step: 1,
               "aria-label": "Stop midpoint",
-              className: numberClass4,
+              className: numberClass6,
               value: percent(sel.midpoint ?? 0.5),
               onChange: (e) => {
                 const n = parseFloat(e.target.value);
@@ -1367,15 +2053,15 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: buttonClass5, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass10, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Colours" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass5, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector8.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: i, children: import_vector8.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "Colours" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass8, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector13.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: i, children: import_vector13.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Smooth" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "Smooth" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             type: "range",
@@ -1391,26 +2077,26 @@ function VectorGradientEditor({ controller, className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "Spread" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { "aria-label": "Gradient spread", className: selectClass5, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector8.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: sp, children: import_vector8.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "Spread" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient spread", className: selectClass8, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector13.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: sp, children: import_vector13.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
       ] }),
-      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16", children: "On stroke" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass5, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector8.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: m, children: import_vector8.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+      ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-16", children: "On stroke" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass8, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector13.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: m, children: import_vector13.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
       ] })
     ] })
   ] });
 }
 
 // src/vector/VectorToolbar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var VECTOR_SNAP_TITLE = "Snap to objects";
 var modKeyLabel = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "") ? "\u2318" : "Ctrl";
-var buttonClass6 = "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 buttonClass11 = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 function VectorToolbar({
   controller,
-  tools = import_vector9.VECTOR_TOOLS,
+  tools = import_vector14.VECTOR_TOOLS,
   showHistory = true,
   showArrange = true,
   showSnap = true,
@@ -1424,49 +2110,69 @@ function VectorToolbar({
   const points = state.tool === "direct" ? state.selectedAnchors.length : 0;
   const editing = state.editing;
   const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
-  const maskSelected = state.selection.some((id) => (0, import_vector9.isVectorMaskGroup)(controller.getNode(id)));
-  const [live, setLive] = import_react5.default.useState(false);
+  const maskSelected = state.selection.some((id) => (0, import_vector14.isVectorMaskGroup)(controller.getNode(id)));
+  const [live, setLive] = import_react8.default.useState(false);
   const booleanDisabled = live ? count < 1 : count < 2;
-  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: buttonClass6, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: buttonClass11, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass6,
+        className: buttonClass11,
         "aria-pressed": state.tool === tool,
-        title: `${(0, import_vector9.vectorToolLabel)(tool)} (${import_vector9.VECTOR_TOOL_SHORTCUTS[tool]})`,
-        "aria-label": (0, import_vector9.vectorToolLabel)(tool),
+        title: `${(0, import_vector14.vectorToolLabel)(tool)} (${import_vector14.VECTOR_TOOL_SHORTCUTS[tool]})`,
+        "aria-label": (0, import_vector14.vectorToolLabel)(tool),
         onClick: () => controller.setTool(tool),
-        children: import_vector9.VECTOR_TOOL_GLYPHS[tool]
+        children: import_vector14.VECTOR_TOOL_GLYPHS[tool]
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
       act("\u21B6", state.canUndo ? `Undo ${state.undoLabel}` : "Undo", () => controller.undo(), !state.canUndo),
       act("\u21B7", state.canRedo ? `Redo ${state.redoLabel}` : "Redo", () => controller.redo(), !state.canRedo)
     ] }),
-    showSnap && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "button",
-      {
-        type: "button",
-        "data-vector-snap": "",
-        className: buttonClass6,
-        "aria-pressed": state.snap.objects,
-        title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
-        "aria-label": VECTOR_SNAP_TITLE,
-        onClick: () => controller.toggleSnapping(),
-        children: "Snap"
-      }
-    ) }),
-    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      import_vector9.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    showSnap && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          type: "button",
+          "data-vector-snap": "",
+          className: buttonClass11,
+          "aria-pressed": state.snap.objects,
+          title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
+          "aria-label": VECTOR_SNAP_TITLE,
+          onClick: () => controller.toggleSnapping(),
+          children: "Snap"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "select",
+        {
+          "data-vector-polar": "",
+          "aria-label": "Polar tracking increment",
+          title: "Polar tracking: the angles drawn points snap to from where they leave",
+          className: "h-8 rounded-md border border-border bg-background px-1 text-xs",
+          value: String((0, import_vector14.vectorPolarIncrementOf)(state.snap.angles) ?? ""),
+          onChange: (e) => controller.setSnap({ angles: (0, import_vector14.vectorPolarAngles)(Number(e.target.value)) }),
+          children: [
+            (0, import_vector14.vectorPolarIncrementOf)(state.snap.angles) === null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Custom" }),
+            [90, 45, 30, 15].map((n) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("option", { value: n, children: [
+              n,
+              "\xB0"
+            ] }, n))
+          ]
+        }
+      )
+    ] }),
+    showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      import_vector14.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass6,
+          className: buttonClass11,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -1475,12 +2181,12 @@ function VectorToolbar({
         },
         a.id
       )),
-      import_vector9.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_vector14.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass6,
+          className: buttonClass11,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -1489,9 +2195,9 @@ function VectorToolbar({
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "input",
           {
             type: "range",
@@ -1505,9 +2211,9 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "input",
           {
             type: "number",
@@ -1523,26 +2229,26 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass6,
+          className: buttonClass11,
           "aria-pressed": editing.fillGap > 0,
           title: "Close small gaps between path ends when filling",
           "aria-label": "Close gaps",
-          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector9.VECTOR_FILL_GAP }),
+          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector14.VECTOR_FILL_GAP }),
           children: "Gaps"
         }
       )
     ] }),
-    showDistort && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    showDistort && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
         "data-vector-free-distort": "",
-        className: buttonClass6,
+        className: buttonClass11,
         "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",
@@ -1550,15 +2256,15 @@ function VectorToolbar({
         children: "Distort"
       }
     ) }),
-    showBlend && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorBlendControls, { controller }),
-    showArrange && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    showBlend && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
             "data-vector-live-boolean": "",
-            className: buttonClass6,
+            className: buttonClass11,
             "aria-pressed": live,
             title: "Live booleans: keep the shapes editable",
             "aria-label": "Live booleans",
@@ -1575,12 +2281,12 @@ function VectorToolbar({
         act("\u25D0", `Make Clipping Mask (${modKeyLabel()}+7)`, () => controller.makeMask("clip"), count < 2),
         act("\u25D1", `Release Mask (${modKeyLabel()}+Alt+7)`, () => controller.releaseMask(), !maskSelected)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector9.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector14.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass6,
+          className: buttonClass11,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -1589,7 +2295,7 @@ function VectorToolbar({
         },
         a.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
         act("\u21C8", "Bring to Front", () => controller.arrange("front"), count < 1),
         act("\u21CA", "Send to Back", () => controller.arrange("back"), count < 1),
         act("\u21E4", "Align Left", () => controller.align("left"), count < 1),
@@ -1604,22 +2310,22 @@ function VectorToolbar({
 }
 function VectorBlendControls({ controller }) {
   const state = useVectorEditorState(controller);
-  const blend = (0, import_vector9.getVectorBlendControls)(state);
+  const blend = (0, import_vector14.getVectorBlendControls)(state);
   const o = blend.options;
   const selected = blend.ids.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass6, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass11, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "select",
       {
         "aria-label": "Blend spacing",
         className: "h-7 rounded border border-border bg-background px-1 text-xs",
         value: o.spacing,
-        onChange: (e) => (0, import_vector9.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
-        children: import_vector9.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: sp, children: import_vector9.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+        onChange: (e) => (0, import_vector14.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
+        children: import_vector14.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: sp, children: import_vector14.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
-    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "input",
       {
         type: "number",
@@ -1631,29 +2337,29 @@ function VectorBlendControls({ controller }) {
         onChange: (e) => {
           const n = parseFloat(e.target.value);
           if (!Number.isFinite(n) || n <= 0) return;
-          (0, import_vector9.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
+          (0, import_vector14.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "orient",
-        className: buttonClass6,
+        className: buttonClass11,
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
-        onClick: () => (0, import_vector9.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
+        onClick: () => (0, import_vector14.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
         children: "\u293F"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "spine",
-        className: buttonClass6,
+        className: buttonClass11,
         title: "Replace Spine (select a blend and a path)",
         "aria-label": "Replace Spine",
         disabled: !blend.canReplaceSpine,
@@ -1661,15 +2367,15 @@ function VectorBlendControls({ controller }) {
         children: "\u2307"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass6, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass6, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass11, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass11, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
   ] });
 }
-var selectClass6 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
-var numberClass5 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
+var selectClass9 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var numberClass7 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
 function VectorStylePanel({ controller, className }) {
   const state = useVectorEditorState(controller);
-  const style = (0, import_vector9.getVectorSelectionStyle)(state);
+  const style = (0, import_vector14.getVectorSelectionStyle)(state);
   const d = state.defaults;
   const source = style ?? {
     fill: d.fill ?? null,
@@ -1682,9 +2388,10 @@ function VectorStylePanel({ controller, className }) {
     arrowAlign: d.arrowAlign ?? "extend",
     startArrowScale: d.startArrowScale ?? 1,
     endArrowScale: d.endArrowScale ?? 1,
-    widthProfile: (0, import_vector9.widthProfilePresetId)(d.strokeWidthProfile),
+    widthProfile: (0, import_vector14.widthProfilePresetId)(d.strokeWidthProfile),
     cornerRadius: d.cornerRadius,
     cornerKind: d.cornerKind ?? "round",
+    cornerSmoothing: 0,
     corners: 1,
     hasOpenPath: true
   };
@@ -1695,19 +2402,19 @@ function VectorStylePanel({ controller, className }) {
   };
   const setProfile = (id) => {
     if (style) controller.setWidthProfile(id);
-    else controller.setDefaults({ strokeWidthProfile: (0, import_vector9.widthProfilePreset)(id)?.length ? (0, import_vector9.widthProfilePreset)(id) : null });
+    else controller.setDefaults({ strokeWidthProfile: (0, import_vector14.widthProfilePreset)(id)?.length ? (0, import_vector14.widthProfilePreset)(id) : null });
   };
-  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
   const arrowRow = (end, label) => {
     const key = end === "start" ? "startArrow" : "endArrow";
     const scaleKey = end === "start" ? "startArrowScale" : "endArrowScale";
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass6, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "None" }),
-        import_vector9.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: h, children: import_vector9.VECTOR_ARROWHEAD_LABELS[h] }, h))
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass9, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "None" }),
+        import_vector14.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: h, children: import_vector14.VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           type: "number",
@@ -1715,7 +2422,7 @@ function VectorStylePanel({ controller, className }) {
           step: 0.25,
           "aria-label": `${label} arrowhead scale`,
           title: "Scale (\xD7 stroke width)",
-          className: numberClass5,
+          className: numberClass7,
           value: source[scaleKey],
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -1731,14 +2438,14 @@ function VectorStylePanel({ controller, className }) {
   };
   const paintRow = (key, label) => {
     const paint = source[key];
-    const hex = (0, import_vector9.vectorPaintToHex)(paint);
+    const hex = (0, import_vector14.vectorPaintToHex)(paint);
     const on = paint !== null && paint !== "none";
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
         label
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           type: "color",
@@ -1749,18 +2456,18 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
-      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
     paintRow("fill", "Fill"),
     paintRow("stroke", "Stroke"),
-    style && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorGradientEditor, { controller }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorGradientEditor, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           type: "number",
@@ -1776,33 +2483,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass6, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector9.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: a, children: import_vector9.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass9, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector14.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: a, children: import_vector14.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16", children: "Profile" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass6,
+          className: selectClass9,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            import_vector9.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: p.id, children: p.label }, p.id)),
-            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
+            import_vector14.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
-          className: buttonClass6,
+          className: buttonClass11,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -1812,27 +2519,27 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    source.hasOpenPath && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "End"),
-      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16", children: "Heads" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass6, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "extend", children: "Tip past end" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "tip", children: "Tip at end" })
+      (source.startArrow || source.endArrow) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("select", { "aria-label": "Arrowhead alignment", className: selectClass9, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    source.corners > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           type: "number",
           min: 0,
           step: 1,
           "aria-label": "Corner radius",
-          className: numberClass5,
+          className: numberClass7,
           value: Math.round(source.cornerRadius * 100) / 100,
           onChange: (e) => {
             const n = parseFloat(e.target.value);
@@ -1840,12 +2547,29 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("select", { "aria-label": "Corner kind", className: selectClass6, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector9.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: k, children: import_vector9.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("select", { "aria-label": "Corner kind", className: selectClass9, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector14.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: k, children: import_vector14.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16", children: "Opacity" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "corner-smoothing", title: "Corner smoothing: squircle corners that ease into the curve (0.6 is iOS-like)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Smoothing" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: 1,
+          step: 0.05,
+          "aria-label": "Corner smoothing",
+          className: "h-4 flex-1 accent-primary",
+          value: source.cornerSmoothing,
+          onChange: (e) => controller.setCornerSmoothing(parseFloat(e.target.value), { merge: "corner-smoothing" }),
+          onPointerUp: () => controller.endMergedEdit()
+        }
+      )
+    ] }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           type: "range",
@@ -1859,21 +2583,26 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorAppearancePanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorEffectsPanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorEnvelopePanel, { controller }),
-    style && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VectorMaskPanel, { controller })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorTextPanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorAppearancePanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorEffectsPanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorEnvelopePanel, { controller }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorMaskPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorFramePanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorConnectorPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorConstraintsPanel, { controller }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VectorSymbolsPanel, { controller })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
     ] })
   ] });
 }
@@ -1881,10 +2610,13 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
 0 && (module.exports = {
   VectorAppearancePanel,
   VectorCanvas,
+  VectorConnectorPanel,
+  VectorConstraintsPanel,
   VectorEditor,
   VectorEffectsPanel,
   VectorEnvelopePanel,
   VectorFilterDefs,
+  VectorFramePanel,
   VectorGradientAnnotator,
   VectorGradientDefs,
   VectorGradientEditor,
@@ -1892,6 +2624,9 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
   VectorMaskedNodes,
   VectorSceneNodes,
   VectorStylePanel,
+  VectorSymbolsPanel,
+  VectorTextElement,
+  VectorTextPanel,
   VectorToolbar,
   VectorWidthPointEditor,
   useVectorCommands,