@pixerate/editor-react 0.22.0 → 0.23.1

package/README.md

@@ -100,6 +100,7 @@ useAgentToolProvider(registry, provider);
 | `@pixerate/editor-react/commands` | `CommandPalette`, `useCommandPalette` (`hotkey: "Mod+K"`), `useCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
 | `@pixerate/editor-react/persistence` | `useAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`, with a recovery check on mount) and `<RecoveryPrompt>` (also re-exported from the root entry) |
 | `@pixerate/editor-react/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments), `useGenerationPlan`, `JobProgress`, `useJobProgress` over `@pixerate/editor/generation` (also re-exported from the root entry) |
+| `@pixerate/editor-react/vector` | `VectorEditor` (toolbar, canvas and style panel), `VectorCanvas` (SVG canvas forwarding pointer, wheel, keyboard and clipboard events), `VectorToolbar`, `VectorStylePanel`, `VectorSceneNodes`, `VectorGradientDefs`, `useVectorEditor`, `useVectorEditorController`, `useVectorEditorState` and `useVectorCommands` over `@pixerate/editor/vector` (see [the vector editor guide](../../docs/vector-editor.md)) |
 | `@pixerate/editor-react/parameters` | `ParametersPanel` (a whole schema with groups, presets, undo / reset / randomize and keyframe diamonds), `useParameters`, `useParametersController`, `useParametersState`, `useParameterCommands`, and the field controls `ParameterFieldControl`, `ParameterSlider`, `ParameterToggle`, `ParameterSelect`, `ParameterColor`, `ParameterVector`, `ParameterImage`, `ParameterText`, `KeyframeDiamond` over `@pixerate/editor/parameters` (see [the parameters guide](../../docs/parameters.md)) |
 | `@pixerate/editor-react/canvas` | `useCanvasGraph`, `useCanvasLayout`, `useCanvasClipboard`, `useCanvasDocking`, `useCanvasShortcuts`, `useCanvasExplosion`, `useStreamingCanvas`, `AgentPresenceLayer`, plus the pure layout helpers from `@pixerate/editor/canvas` |
 

package/dist/vector/index.cjs

@@ -0,0 +1,411 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vector/index.ts
+var vector_exports = {};
+__export(vector_exports, {
+  VectorCanvas: () => VectorCanvas,
+  VectorEditor: () => VectorEditor,
+  VectorGradientDefs: () => VectorGradientDefs,
+  VectorSceneNodes: () => VectorSceneNodes,
+  VectorStylePanel: () => VectorStylePanel,
+  VectorToolbar: () => VectorToolbar,
+  useVectorCommands: () => useVectorCommands,
+  useVectorEditor: () => useVectorEditor,
+  useVectorEditorController: () => useVectorEditorController,
+  useVectorEditorState: () => useVectorEditorState
+});
+module.exports = __toCommonJS(vector_exports);
+
+// src/vector/useVectorEditor.ts
+var import_react = require("react");
+var import_vector = require("@pixerate/editor/vector");
+function useVectorEditorController(options = {}) {
+  const ref = (0, import_react.useRef)(null);
+  if (!ref.current) ref.current = new import_vector.VectorEditorController(options);
+  const controller = ref.current;
+  (0, import_react.useEffect)(() => () => controller.destroy(), [controller]);
+  return controller;
+}
+function useVectorEditorState(controller) {
+  return (0, import_react.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+}
+function useVectorEditor(controllerOrOptions = {}) {
+  const own = (0, import_react.useRef)(null);
+  let controller;
+  if (controllerOrOptions instanceof import_vector.VectorEditorController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new import_vector.VectorEditorController(controllerOrOptions);
+    controller = own.current;
+  }
+  const state = useVectorEditorState(controller);
+  const actions = (0, import_react.useMemo)(
+    () => ({
+      setTool: (tool) => controller.setTool(tool),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo(),
+      deleteSelection: () => void controller.deleteSelection(),
+      toSvg: () => controller.toSvg()
+    }),
+    [controller]
+  );
+  return { controller, state, ...actions };
+}
+function useVectorCommands(registry, controller, options = {}) {
+  const { prefix, group, scope } = options;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    return registry.register((0, import_vector.createVectorCommands)(controller, { prefix, group, scope }));
+  }, [registry, controller, prefix, group, scope]);
+}
+
+// src/vector/VectorCanvas.tsx
+var import_react2 = require("react");
+var import_vector2 = require("@pixerate/editor/vector");
+var import_jsx_runtime = require("react/jsx-runtime");
+function VectorGradientDefs({ defs }) {
+  if (!defs.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: defs.map((def) => {
+    const stops = def.stops.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: s.offset, stopColor: s.stopColor, stopOpacity: s.stopOpacity }, i));
+    return def.type === "radial" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("radialGradient", { id: def.id, ...def.attrs, children: stops }, def.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("linearGradient", { id: def.id, ...def.attrs, children: stops }, def.id);
+  }) });
+}
+function VectorSceneNodes({ nodes }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: nodes.map(
+    (node) => node.kind === "group" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VectorSceneNodes, { nodes: node.children }) }, node.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        "data-vector-id": node.id,
+        transform: node.transform,
+        d: node.d,
+        fill: node.fill,
+        fillRule: node.fillRule,
+        stroke: node.stroke,
+        strokeWidth: node.stroke === "none" ? void 0 : node.strokeWidth,
+        strokeLinecap: node.strokeLinecap,
+        strokeLinejoin: node.strokeLinejoin,
+        strokeDasharray: node.strokeDasharray,
+        opacity: node.opacity < 1 ? node.opacity : void 0
+      },
+      node.id
+    )
+  ) });
+}
+function VectorCanvas({
+  controller,
+  fitOnMount = true,
+  checkerboard = true,
+  accentColor = import_vector2.VECTOR_OVERLAY_THEME.accent,
+  className,
+  style,
+  "aria-label": ariaLabel = "Vector canvas"
+}) {
+  const state = useVectorEditorState(controller);
+  const svgRef = (0, import_react2.useRef)(null);
+  const fitted = (0, import_react2.useRef)(!fitOnMount);
+  const uid = (0, import_react2.useId)().replace(/:/g, "");
+  const scene = (0, import_vector2.getVectorSceneRenderData)(state, { idPrefix: `ve${uid}-` });
+  const overlay = (0, import_vector2.getVectorOverlayRenderData)(state);
+  (0, import_react2.useEffect)(() => {
+    const el = svgRef.current;
+    if (!el || fitted.current) return;
+    const fit = () => {
+      const rect = el.getBoundingClientRect();
+      if (fitted.current || rect.width <= 0 || rect.height <= 0) return;
+      fitted.current = true;
+      controller.zoomToFit({ width: rect.width, height: rect.height });
+    };
+    fit();
+    if (fitted.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(fit);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [controller]);
+  (0, import_react2.useEffect)(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      controller.wheel(local(e), { x: e.deltaX, y: e.deltaY }, (0, import_vector2.toVectorPointerInput)(e));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [controller]);
+  const local = (e) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };
+  };
+  const clipboard = (kind) => (event) => {
+    const native = event && "nativeEvent" in event ? event.nativeEvent : event;
+    const data = native?.clipboardData;
+    if (kind === "paste") {
+      const text2 = data?.getData("text/plain") ?? "";
+      const pasted = text2 ? controller.paste(text2) : controller.paste();
+      if (pasted.length) event.preventDefault?.();
+      return;
+    }
+    const text = kind === "cut" ? controller.cut() : controller.copy();
+    if (text && data) {
+      data.setData("text/plain", text);
+      event.preventDefault?.();
+    }
+  };
+  const hs = import_vector2.VECTOR_OVERLAY_THEME.transformHandleSize;
+  const as = import_vector2.VECTOR_OVERLAY_THEME.anchorSize;
+  const box = overlay.selectionBox;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      ref: svgRef,
+      role: "application",
+      "aria-label": ariaLabel,
+      tabIndex: 0,
+      "data-tool": state.tool,
+      className,
+      style: { display: "block", width: "100%", height: "100%", outline: "none", touchAction: "none", userSelect: "none", cursor: state.cursor, ...style },
+      onPointerDown: (e) => {
+        svgRef.current?.focus({ preventScroll: true });
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        controller.pointerDown(local(e), (0, import_vector2.toVectorPointerInput)(e));
+      },
+      onPointerMove: (e) => controller.pointerMove(local(e), (0, import_vector2.toVectorPointerInput)(e)),
+      onPointerUp: (e) => {
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+        controller.pointerUp(local(e), (0, import_vector2.toVectorPointerInput)(e));
+      },
+      onPointerCancel: () => controller.cancelDrag(),
+      onPointerLeave: () => controller.pointerLeave(),
+      onDoubleClick: (e) => controller.doubleClick(local(e)),
+      onKeyDown: (e) => {
+        if ((0, import_vector2.isVectorTextTarget)(e.target)) return;
+        if (controller.keyDown((0, import_vector2.toVectorKeyInput)(e))) e.preventDefault();
+      },
+      onKeyUp: (e) => controller.keyUp((0, import_vector2.toVectorKeyInput)(e)),
+      onCopy: clipboard("copy"),
+      onCut: clipboard("cut"),
+      onPaste: clipboard("paste"),
+      children: [
+        checkerboard && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("pattern", { id: `ve${uid}-checker`, width: 16, height: 16, patternUnits: "userSpaceOnUse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: 16, height: 16, fill: "#ffffff" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: 8, height: 8, fill: "#e5e7eb" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 8, y: 8, width: 8, height: 8, fill: "#e5e7eb" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VectorGradientDefs, { defs: scene.defs }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "rect",
+          {
+            "data-vector-artboard": "",
+            x: overlay.artboard.x,
+            y: overlay.artboard.y,
+            width: overlay.artboard.width,
+            height: overlay.artboard.height,
+            fill: scene.background ?? (checkerboard ? `url(#ve${uid}-checker)` : "#ffffff"),
+            stroke: "rgba(0,0,0,0.12)"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { "data-vector-scene": "", transform: scene.transform, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VectorSceneNodes, { nodes: scene.nodes }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { "data-vector-overlay": "", pointerEvents: "none", fill: "none", children: [
+          overlay.outlines.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("path", { d: overlay.penPreview, stroke: accentColor, strokeDasharray: "4 3" }),
+          box && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { "data-vector-selection": "", transform: box.transform || void 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: box.x, y: box.y, width: box.width, height: box.height, stroke: accentColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: box.x + box.width / 2, y1: box.y, x2: box.x + box.width / 2, y2: box.y - 24, stroke: accentColor }),
+            box.handles.map(
+              (h) => h.handle === "rotate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { "data-handle": h.handle, cx: h.x, cy: h.y, r: hs / 2 + 1, fill: import_vector2.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }, h.handle) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { "data-handle": h.handle, x: h.x - hs / 2, y: h.y - hs / 2, width: hs, height: hs, fill: import_vector2.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor }, h.handle)
+            )
+          ] }),
+          overlay.handles.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { "data-vector-handle": h.ref.handle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: h.anchorX, y1: h.anchorY, x2: h.x, y2: h.y, stroke: accentColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: h.x, cy: h.y, r: import_vector2.VECTOR_OVERLAY_THEME.handleRadius + (h.hovered ? 1 : 0), fill: import_vector2.VECTOR_OVERLAY_THEME.handleFill, stroke: accentColor })
+          ] }, `${h.ref.nodeId}:${h.ref.subpath}:${h.ref.index}:${h.ref.handle}`)),
+          overlay.anchors.map((a) => {
+            const size = as + (a.hovered ? 2 : 0);
+            const fill = a.selected ? accentColor : import_vector2.VECTOR_OVERLAY_THEME.handleFill;
+            const key = `${a.ref.nodeId}:${a.ref.subpath}:${a.ref.index}`;
+            return a.type === "corner" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { "data-vector-anchor": a.ref.index, x: a.x - size / 2, y: a.y - size / 2, width: size, height: size, fill, stroke: accentColor }, key) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { "data-vector-anchor": a.ref.index, cx: a.x, cy: a.y, r: size / 2, fill, stroke: accentColor }, key);
+          }),
+          state.tool === "pen" && overlay.anchors.some((a) => a.closes && a.hovered) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: overlay.anchors.find((a) => a.closes).x, cy: overlay.anchors.find((a) => a.closes).y, r: as, stroke: accentColor }),
+          overlay.marquee && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "rect",
+            {
+              "data-vector-marquee": "",
+              x: overlay.marquee.x,
+              y: overlay.marquee.y,
+              width: overlay.marquee.width,
+              height: overlay.marquee.height,
+              fill: import_vector2.VECTOR_OVERLAY_THEME.marqueeFill,
+              stroke: accentColor,
+              strokeDasharray: "3 2"
+            }
+          ),
+          overlay.status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { "data-vector-status": "", x: 8, y: "100%", dy: -8, fontSize: 11, fill: accentColor, style: { fontFamily: "system-ui, sans-serif" }, children: overlay.status })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/vector/VectorToolbar.tsx
+var import_vector3 = require("@pixerate/editor/vector");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonClass = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+function VectorToolbar({ controller, tools = import_vector3.VECTOR_TOOLS, showHistory = true, showArrange = true, className }) {
+  const state = useVectorEditorState(controller);
+  const count = state.selection.length;
+  const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: buttonClass, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-vector-tool": tool,
+        className: buttonClass,
+        "aria-pressed": state.tool === tool,
+        title: `${(0, import_vector3.vectorToolLabel)(tool)} (${import_vector3.VECTOR_TOOL_SHORTCUTS[tool]})`,
+        "aria-label": (0, import_vector3.vectorToolLabel)(tool),
+        onClick: () => controller.setTool(tool),
+        children: import_vector3.VECTOR_TOOL_GLYPHS[tool]
+      },
+      tool
+    )) }),
+    showHistory && /* @__PURE__ */ (0, import_jsx_runtime2.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)
+    ] }),
+    showArrange && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        act("\u222A", "Union", () => controller.booleanOp("union"), count < 2),
+        act("\u2212", "Subtract", () => controller.booleanOp("subtract"), count < 2),
+        act("\u2229", "Intersect", () => controller.booleanOp("intersect"), count < 2),
+        act("\u22BB", "Exclude", () => controller.booleanOp("exclude"), count < 2),
+        act("G", "Group", () => controller.group(), count < 1),
+        act("U", "Ungroup", () => controller.ungroup(), !groupSelected)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.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),
+        act("\u2194", "Align Center", () => controller.align("center"), count < 1),
+        act("\u21E5", "Align Right", () => controller.align("right"), count < 1),
+        act("\u2912", "Align Top", () => controller.align("top"), count < 1),
+        act("\u2195", "Align Middle", () => controller.align("middle"), count < 1),
+        act("\u2913", "Align Bottom", () => controller.align("bottom"), count < 1)
+      ] })
+    ] })
+  ] });
+}
+function VectorStylePanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const style = (0, import_vector3.getVectorSelectionStyle)(state);
+  const source = style ?? { fill: state.defaults.fill ?? null, stroke: state.defaults.stroke ?? null, strokeWidth: state.defaults.strokeWidth ?? 1, opacity: 1 };
+  const apply = (patch) => {
+    if (style) controller.setStyle(patch);
+    else controller.setDefaults(patch);
+  };
+  const paintRow = (key, label) => {
+    const paint = source[key];
+    const hex = (0, import_vector3.vectorPaintToHex)(paint);
+    const on = paint !== null && paint !== "none";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(
+        "input",
+        {
+          type: "color",
+          "aria-label": `${label} colour`,
+          className: "h-7 w-10 cursor-pointer rounded border border-border bg-background disabled:opacity-40",
+          disabled: !on,
+          value: hex ?? "#000000",
+          onChange: (e) => apply({ [key]: e.target.value })
+        }
+      ),
+      on && !hex && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+    paintRow("fill", "Fill"),
+    paintRow("stroke", "Stroke"),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          step: 0.5,
+          "aria-label": "Stroke width",
+          className: "h-7 w-20 rounded border border-border bg-background px-1.5 text-xs",
+          value: source.strokeWidth,
+          onChange: (e) => {
+            const n = parseFloat(e.target.value);
+            if (Number.isFinite(n) && n >= 0) apply({ strokeWidth: n });
+          }
+        }
+      )
+    ] }),
+    style && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: 1,
+          step: 0.05,
+          "aria-label": "Opacity",
+          className: "h-4 flex-1 accent-primary",
+          value: source.opacity,
+          onChange: (e) => apply({ opacity: parseFloat(e.target.value) })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/vector/VectorEditor.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VectorCanvas,
+  VectorEditor,
+  VectorGradientDefs,
+  VectorSceneNodes,
+  VectorStylePanel,
+  VectorToolbar,
+  useVectorCommands,
+  useVectorEditor,
+  useVectorEditorController,
+  useVectorEditorState
+});
+//# sourceMappingURL=index.cjs.map

package/dist/vector/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vector/index.ts","../../src/vector/useVectorEditor.ts","../../src/vector/VectorCanvas.tsx","../../src/vector/VectorToolbar.tsx","../../src/vector/VectorEditor.tsx"],"sourcesContent":["export * from './useVectorEditor';\nexport * from './VectorCanvas';\nexport * from './VectorToolbar';\nexport * from './VectorEditor';\n","import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  VectorEditorController,\n  createVectorCommands,\n  type VectorCommandOptions,\n  type VectorEditorOptions,\n  type VectorEditorState,\n  type VectorTool,\n} from '@pixerate/editor/vector';\n\n/** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */\nexport function useVectorEditorController(options: VectorEditorOptions = {}): VectorEditorController {\n  const ref = useRef<VectorEditorController | null>(null);\n  if (!ref.current) ref.current = new VectorEditorController(options);\n  const controller = ref.current;\n  useEffect(() => () => controller.destroy(), [controller]);\n  return controller;\n}\n\n/** The controller's state (re-renders on every change). */\nexport function useVectorEditorState(controller: VectorEditorController): VectorEditorState {\n  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);\n}\n\nexport interface UseVectorEditorResult {\n  controller: VectorEditorController;\n  state: VectorEditorState;\n  setTool: (tool: VectorTool) => void;\n  undo: () => void;\n  redo: () => void;\n  deleteSelection: () => void;\n  toSvg: () => string;\n}\n\n/**\n * Subscribes to a vector editor controller and exposes its state with bound actions. Pass\n * options instead of a controller to create one for the component's lifetime.\n */\nexport function useVectorEditor(controllerOrOptions: VectorEditorController | VectorEditorOptions = {}): UseVectorEditorResult {\n  const own = useRef<VectorEditorController | null>(null);\n  let controller: VectorEditorController;\n  if (controllerOrOptions instanceof VectorEditorController) controller = controllerOrOptions;\n  else {\n    if (!own.current) own.current = new VectorEditorController(controllerOrOptions);\n    controller = own.current;\n  }\n  const state = useVectorEditorState(controller);\n  const actions = useMemo(\n    () => ({\n      setTool: (tool: VectorTool) => controller.setTool(tool),\n      undo: () => void controller.undo(),\n      redo: () => void controller.redo(),\n      deleteSelection: () => void controller.deleteSelection(),\n      toSvg: () => controller.toSvg(),\n    }),\n    [controller],\n  );\n  return { controller, state, ...actions };\n}\n\n/** Anything with `register(specs) → unregister` (a `CommandRegistry`). */\nexport interface VectorCommandTarget {\n  register(specs: any): () => void;\n}\n\n/**\n * Registers the controller's palette / agent commands (`vector.addShape`, `vector.boolean`, …)\n * in `registry` while mounted, so `createCommandToolProvider` exposes them to agents.\n */\nexport function useVectorCommands(\n  registry: VectorCommandTarget | null | undefined,\n  controller: VectorEditorController,\n  options: VectorCommandOptions = {},\n): void {\n  const { prefix, group, scope } = options;\n  useEffect(() => {\n    if (!registry) return;\n    return registry.register(createVectorCommands(controller, { prefix, group, scope }));\n  }, [registry, controller, prefix, group, scope]);\n}\n","import React, { useEffect, useId, useRef } from 'react';\nimport {\n  VECTOR_OVERLAY_THEME as THEME,\n  getVectorOverlayRenderData,\n  getVectorSceneRenderData,\n  isVectorTextTarget,\n  toVectorKeyInput,\n  toVectorPointerInput,\n  type VectorEditorController,\n  type VectorRenderNode,\n  type SvgGradientDef,\n} from '@pixerate/editor/vector';\nimport { useVectorEditorState } from './useVectorEditor';\n\nexport interface VectorCanvasProps {\n  controller: VectorEditorController;\n  /** Fit the artboard into the canvas when it first gets a size (default `true`). */\n  fitOnMount?: boolean;\n  /** Draw a checkerboard behind a transparent artboard (default `true`). */\n  checkerboard?: boolean;\n  /** Overlay accent colour (default sky blue). */\n  accentColor?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  /** Accessible label (default \"Vector canvas\"). */\n  'aria-label'?: string;\n}\n\n/** Renders `<linearGradient>` / `<radialGradient>` descriptors. */\nexport function VectorGradientDefs({ defs }: { defs: readonly SvgGradientDef[] }) {\n  if (!defs.length) return null;\n  return (\n    <defs>\n      {defs.map((def) => {\n        const stops = def.stops.map((s, i) => <stop key={i} offset={s.offset} stopColor={s.stopColor} stopOpacity={s.stopOpacity} />);\n        return def.type === 'radial' ? (\n          <radialGradient key={def.id} id={def.id} {...(def.attrs as any)}>\n            {stops}\n          </radialGradient>\n        ) : (\n          <linearGradient key={def.id} id={def.id} {...(def.attrs as any)}>\n            {stops}\n          </linearGradient>\n        );\n      })}\n    </defs>\n  );\n}\n\n/** Renders scene nodes (paths and groups) from `getVectorSceneRenderData`. */\nexport function VectorSceneNodes({ nodes }: { nodes: readonly VectorRenderNode[] }) {\n  return (\n    <>\n      {nodes.map((node) =>\n        node.kind === 'group' ? (\n          <g key={node.id} data-vector-id={node.id} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined}>\n            <VectorSceneNodes nodes={node.children} />\n          </g>\n        ) : (\n          <path\n            key={node.id}\n            data-vector-id={node.id}\n            transform={node.transform}\n            d={node.d}\n            fill={node.fill}\n            fillRule={node.fillRule}\n            stroke={node.stroke}\n            strokeWidth={node.stroke === 'none' ? undefined : node.strokeWidth}\n            strokeLinecap={node.strokeLinecap as any}\n            strokeLinejoin={node.strokeLinejoin as any}\n            strokeDasharray={node.strokeDasharray}\n            opacity={node.opacity < 1 ? node.opacity : undefined}\n          />\n        ),\n      )}\n    </>\n  );\n}\n\n/**\n * An SVG canvas for a `VectorEditorController`: draws the document and the editing overlay\n * and forwards pointer, wheel, keyboard and clipboard events. Focus it to use shortcuts.\n */\nexport function VectorCanvas({\n  controller,\n  fitOnMount = true,\n  checkerboard = true,\n  accentColor = THEME.accent,\n  className,\n  style,\n  'aria-label': ariaLabel = 'Vector canvas',\n}: VectorCanvasProps) {\n  const state = useVectorEditorState(controller);\n  const svgRef = useRef<SVGSVGElement | null>(null);\n  const fitted = useRef(!fitOnMount);\n  const uid = useId().replace(/:/g, '');\n  const scene = getVectorSceneRenderData(state, { idPrefix: `ve${uid}-` });\n  const overlay = getVectorOverlayRenderData(state);\n\n  useEffect(() => {\n    const el = svgRef.current;\n    if (!el || fitted.current) return;\n    const fit = () => {\n      const rect = el.getBoundingClientRect();\n      if (fitted.current || rect.width <= 0 || rect.height <= 0) return;\n      fitted.current = true;\n      controller.zoomToFit({ width: rect.width, height: rect.height });\n    };\n    fit();\n    if (fitted.current || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(fit);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [controller]);\n\n  // Wheel needs a non-passive listener to stop page scroll / browser zoom.\n  useEffect(() => {\n    const el = svgRef.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      e.preventDefault();\n      controller.wheel(local(e), { x: e.deltaX, y: e.deltaY }, toVectorPointerInput(e));\n    };\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n  }, [controller]);\n\n  const local = (e: { clientX: number; clientY: number }) => {\n    const rect = svgRef.current?.getBoundingClientRect();\n    return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };\n  };\n\n  const clipboard = (kind: 'copy' | 'cut' | 'paste') => (event: React.ClipboardEvent) => {\n    const native = (event && 'nativeEvent' in event ? event.nativeEvent : event) as ClipboardEvent;\n    const data = native?.clipboardData;\n    if (kind === 'paste') {\n      const text = data?.getData('text/plain') ?? '';\n      const pasted = text ? controller.paste(text) : controller.paste();\n      if (pasted.length) event.preventDefault?.();\n      return;\n    }\n    const text = kind === 'cut' ? controller.cut() : controller.copy();\n    if (text && data) {\n      data.setData('text/plain', text);\n      event.preventDefault?.();\n    }\n  };\n\n  const hs = THEME.transformHandleSize;\n  const as = THEME.anchorSize;\n  const box = overlay.selectionBox;\n\n  return (\n    <svg\n      ref={svgRef}\n      role=\"application\"\n      aria-label={ariaLabel}\n      tabIndex={0}\n      data-tool={state.tool}\n      className={className}\n      style={{ display: 'block', width: '100%', height: '100%', outline: 'none', touchAction: 'none', userSelect: 'none', cursor: state.cursor, ...style }}\n      onPointerDown={(e) => {\n        svgRef.current?.focus({ preventScroll: true });\n        (e.currentTarget as Element).setPointerCapture?.(e.pointerId);\n        controller.pointerDown(local(e), toVectorPointerInput(e));\n      }}\n      onPointerMove={(e) => controller.pointerMove(local(e), toVectorPointerInput(e))}\n      onPointerUp={(e) => {\n        (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);\n        controller.pointerUp(local(e), toVectorPointerInput(e));\n      }}\n      onPointerCancel={() => controller.cancelDrag()}\n      onPointerLeave={() => controller.pointerLeave()}\n      onDoubleClick={(e) => controller.doubleClick(local(e))}\n      onKeyDown={(e) => {\n        if (isVectorTextTarget(e.target)) return;\n        if (controller.keyDown(toVectorKeyInput(e))) e.preventDefault();\n      }}\n      onKeyUp={(e) => controller.keyUp(toVectorKeyInput(e))}\n      onCopy={clipboard('copy')}\n      onCut={clipboard('cut')}\n      onPaste={clipboard('paste')}\n    >\n      {checkerboard && (\n        <defs>\n          <pattern id={`ve${uid}-checker`} width={16} height={16} patternUnits=\"userSpaceOnUse\">\n            <rect width={16} height={16} fill=\"#ffffff\" />\n            <rect width={8} height={8} fill=\"#e5e7eb\" />\n            <rect x={8} y={8} width={8} height={8} fill=\"#e5e7eb\" />\n          </pattern>\n        </defs>\n      )}\n      <VectorGradientDefs defs={scene.defs} />\n      <rect\n        data-vector-artboard=\"\"\n        x={overlay.artboard.x}\n        y={overlay.artboard.y}\n        width={overlay.artboard.width}\n        height={overlay.artboard.height}\n        fill={scene.background ?? (checkerboard ? `url(#ve${uid}-checker)` : '#ffffff')}\n        stroke=\"rgba(0,0,0,0.12)\"\n      />\n      <g data-vector-scene=\"\" transform={scene.transform}>\n        <VectorSceneNodes nodes={scene.nodes} />\n      </g>\n      <g data-vector-overlay=\"\" pointerEvents=\"none\" fill=\"none\">\n        {overlay.outlines.map((o) => (\n          <path key={o.id} d={o.d} stroke={accentColor} strokeWidth={o.selected ? 1 : 1.5} opacity={o.selected ? 1 : 0.7} />\n        ))}\n        {overlay.penPreview && <path d={overlay.penPreview} stroke={accentColor} strokeDasharray=\"4 3\" />}\n        {box && (\n          <g data-vector-selection=\"\" transform={box.transform || undefined}>\n            <rect x={box.x} y={box.y} width={box.width} height={box.height} stroke={accentColor} />\n            <line x1={box.x + box.width / 2} y1={box.y} x2={box.x + box.width / 2} y2={box.y - 24} stroke={accentColor} />\n            {box.handles.map((h) =>\n              h.handle === 'rotate' ? (\n                <circle key={h.handle} data-handle={h.handle} cx={h.x} cy={h.y} r={hs / 2 + 1} fill={THEME.handleFill} stroke={accentColor} />\n              ) : (\n                <rect key={h.handle} data-handle={h.handle} x={h.x - hs / 2} y={h.y - hs / 2} width={hs} height={hs} fill={THEME.handleFill} stroke={accentColor} />\n              ),\n            )}\n          </g>\n        )}\n        {overlay.handles.map((h) => (\n          <g key={`${h.ref.nodeId}:${h.ref.subpath}:${h.ref.index}:${h.ref.handle}`} data-vector-handle={h.ref.handle}>\n            <line x1={h.anchorX} y1={h.anchorY} x2={h.x} y2={h.y} stroke={accentColor} />\n            <circle cx={h.x} cy={h.y} r={THEME.handleRadius + (h.hovered ? 1 : 0)} fill={THEME.handleFill} stroke={accentColor} />\n          </g>\n        ))}\n        {overlay.anchors.map((a) => {\n          const size = as + (a.hovered ? 2 : 0);\n          const fill = a.selected ? accentColor : THEME.handleFill;\n          const key = `${a.ref.nodeId}:${a.ref.subpath}:${a.ref.index}`;\n          return a.type === 'corner' ? (\n            <rect key={key} data-vector-anchor={a.ref.index} x={a.x - size / 2} y={a.y - size / 2} width={size} height={size} fill={fill} stroke={accentColor} />\n          ) : (\n            <circle key={key} data-vector-anchor={a.ref.index} cx={a.x} cy={a.y} r={size / 2} fill={fill} stroke={accentColor} />\n          );\n        })}\n        {state.tool === 'pen' && overlay.anchors.some((a) => a.closes && a.hovered) && (\n          <circle cx={overlay.anchors.find((a) => a.closes)!.x} cy={overlay.anchors.find((a) => a.closes)!.y} r={as} stroke={accentColor} />\n        )}\n        {overlay.marquee && (\n          <rect\n            data-vector-marquee=\"\"\n            x={overlay.marquee.x}\n            y={overlay.marquee.y}\n            width={overlay.marquee.width}\n            height={overlay.marquee.height}\n            fill={THEME.marqueeFill}\n            stroke={accentColor}\n            strokeDasharray=\"3 2\"\n          />\n        )}\n        {overlay.status && (\n          <text data-vector-status=\"\" x={8} y=\"100%\" dy={-8} fontSize={11} fill={accentColor} style={{ fontFamily: 'system-ui, sans-serif' }}>\n            {overlay.status}\n          </text>\n        )}\n      </g>\n    </svg>\n  );\n}\n","import React from 'react';\nimport {\n  VECTOR_TOOLS,\n  VECTOR_TOOL_GLYPHS,\n  VECTOR_TOOL_SHORTCUTS,\n  getVectorSelectionStyle,\n  vectorPaintToHex,\n  vectorToolLabel,\n  type VectorEditorController,\n  type VectorTool,\n} from '@pixerate/editor/vector';\nimport { useVectorEditorState } from './useVectorEditor';\n\nconst buttonClass =\n  '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';\n\nexport interface VectorToolbarProps {\n  controller: VectorEditorController;\n  /** Tools to show (default: all). */\n  tools?: readonly VectorTool[];\n  /** Undo / redo buttons (default `true`). */\n  showHistory?: boolean;\n  /** Boolean, group, arrange and align buttons (default `true`). */\n  showArrange?: boolean;\n  className?: string;\n}\n\n/** Tool picker plus undo, boolean operations, grouping, stacking and alignment. */\nexport function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, className }: VectorToolbarProps) {\n  const state = useVectorEditorState(controller);\n  const count = state.selection.length;\n  const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === 'group');\n  const act = (label: string, title: string, run: () => unknown, disabled = false) => (\n    <button key={label} type=\"button\" className={buttonClass} title={title} aria-label={title} disabled={disabled} onClick={() => void run()}>\n      {label}\n    </button>\n  );\n  return (\n    <div role=\"toolbar\" aria-label=\"Vector tools\" className={`flex flex-wrap items-center gap-1 ${className ?? ''}`}>\n      <div className=\"flex items-center gap-1\" role=\"group\" aria-label=\"Tools\">\n        {tools.map((tool) => (\n          <button\n            key={tool}\n            type=\"button\"\n            data-vector-tool={tool}\n            className={buttonClass}\n            aria-pressed={state.tool === tool}\n            title={`${vectorToolLabel(tool)} (${VECTOR_TOOL_SHORTCUTS[tool]})`}\n            aria-label={vectorToolLabel(tool)}\n            onClick={() => controller.setTool(tool)}\n          >\n            {VECTOR_TOOL_GLYPHS[tool]}\n          </button>\n        ))}\n      </div>\n      {showHistory && (\n        <div className=\"ml-1 flex items-center gap-1\" role=\"group\" aria-label=\"History\">\n          {act('↶', state.canUndo ? `Undo ${state.undoLabel}` : 'Undo', () => controller.undo(), !state.canUndo)}\n          {act('↷', state.canRedo ? `Redo ${state.redoLabel}` : 'Redo', () => controller.redo(), !state.canRedo)}\n        </div>\n      )}\n      {showArrange && (\n        <>\n          <div className=\"ml-1 flex items-center gap-1\" role=\"group\" aria-label=\"Combine\">\n            {act('∪', 'Union', () => controller.booleanOp('union'), count < 2)}\n            {act('−', 'Subtract', () => controller.booleanOp('subtract'), count < 2)}\n            {act('∩', 'Intersect', () => controller.booleanOp('intersect'), count < 2)}\n            {act('⊻', 'Exclude', () => controller.booleanOp('exclude'), count < 2)}\n            {act('G', 'Group', () => controller.group(), count < 1)}\n            {act('U', 'Ungroup', () => controller.ungroup(), !groupSelected)}\n          </div>\n          <div className=\"ml-1 flex items-center gap-1\" role=\"group\" aria-label=\"Arrange\">\n            {act('⇈', 'Bring to Front', () => controller.arrange('front'), count < 1)}\n            {act('⇊', 'Send to Back', () => controller.arrange('back'), count < 1)}\n            {act('⇤', 'Align Left', () => controller.align('left'), count < 1)}\n            {act('↔', 'Align Center', () => controller.align('center'), count < 1)}\n            {act('⇥', 'Align Right', () => controller.align('right'), count < 1)}\n            {act('⤒', 'Align Top', () => controller.align('top'), count < 1)}\n            {act('↕', 'Align Middle', () => controller.align('middle'), count < 1)}\n            {act('⤓', 'Align Bottom', () => controller.align('bottom'), count < 1)}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface VectorStylePanelProps {\n  controller: VectorEditorController;\n  className?: string;\n}\n\n/**\n * Fill, stroke, stroke width and opacity of the selection; with nothing selected it edits\n * the defaults for new shapes.\n */\nexport function VectorStylePanel({ controller, className }: VectorStylePanelProps) {\n  const state = useVectorEditorState(controller);\n  const style = getVectorSelectionStyle(state);\n  const source = style ?? { fill: state.defaults.fill ?? null, stroke: state.defaults.stroke ?? null, strokeWidth: state.defaults.strokeWidth ?? 1, opacity: 1 };\n  const apply = (patch: Record<string, unknown>) => {\n    if (style) controller.setStyle(patch);\n    else controller.setDefaults(patch);\n  };\n  const paintRow = (key: 'fill' | 'stroke', label: string) => {\n    const paint = source[key];\n    const hex = vectorPaintToHex(paint);\n    const on = paint !== null && paint !== 'none';\n    return (\n      <div className=\"flex items-center gap-2\" data-vector-style={key}>\n        <label className=\"flex w-16 items-center gap-1.5 text-xs text-foreground\">\n          <input type=\"checkbox\" checked={on} aria-label={`${label} on`} onChange={(e) => apply({ [key]: e.target.checked ? (hex ?? '#000000') : null })} />\n          {label}\n        </label>\n        <input\n          type=\"color\"\n          aria-label={`${label} colour`}\n          className=\"h-7 w-10 cursor-pointer rounded border border-border bg-background disabled:opacity-40\"\n          disabled={!on}\n          value={hex ?? '#000000'}\n          onChange={(e) => apply({ [key]: e.target.value })}\n        />\n        {on && !hex && <span className=\"truncate text-[11px] text-muted-foreground\">{typeof paint === 'string' ? paint : 'Gradient'}</span>}\n        {style?.mixed[key] && <span className=\"text-[11px] text-muted-foreground\">Mixed</span>}\n      </div>\n    );\n  };\n  return (\n    <div className={`space-y-2 ${className ?? ''}`} aria-label={style ? 'Selection style' : 'New shape style'}>\n      <p className=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">{style ? 'Selection' : 'New shapes'}</p>\n      {paintRow('fill', 'Fill')}\n      {paintRow('stroke', 'Stroke')}\n      <label className=\"flex items-center gap-2 text-xs text-foreground\">\n        <span className=\"w-16\">Width</span>\n        <input\n          type=\"number\"\n          min={0}\n          step={0.5}\n          aria-label=\"Stroke width\"\n          className=\"h-7 w-20 rounded border border-border bg-background px-1.5 text-xs\"\n          value={source.strokeWidth}\n          onChange={(e) => {\n            const n = parseFloat(e.target.value);\n            if (Number.isFinite(n) && n >= 0) apply({ strokeWidth: n });\n          }}\n        />\n      </label>\n      {style && (\n        <label className=\"flex items-center gap-2 text-xs text-foreground\">\n          <span className=\"w-16\">Opacity</span>\n          <input\n            type=\"range\"\n            min={0}\n            max={1}\n            step={0.05}\n            aria-label=\"Opacity\"\n            className=\"h-4 flex-1 accent-primary\"\n            value={source.opacity}\n            onChange={(e) => apply({ opacity: parseFloat(e.target.value) })}\n          />\n        </label>\n      )}\n    </div>\n  );\n}\n","import React from 'react';\nimport type { VectorEditorController, VectorTool } from '@pixerate/editor/vector';\nimport { VectorCanvas, type VectorCanvasProps } from './VectorCanvas';\nimport { VectorStylePanel, VectorToolbar } from './VectorToolbar';\n\nexport interface VectorEditorProps {\n  controller: VectorEditorController;\n  /** Tools in the toolbar (default: all). */\n  tools?: readonly VectorTool[];\n  /** The style sidebar (default `true`). */\n  showStylePanel?: boolean;\n  /** Canvas height (default 520px). */\n  height?: number | string;\n  canvasProps?: Omit<VectorCanvasProps, 'controller'>;\n  className?: string;\n}\n\n/** Toolbar, canvas and style panel for a `VectorEditorController`. */\nexport function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }: VectorEditorProps) {\n  return (\n    <div className={`flex flex-col gap-2 ${className ?? ''}`} data-vector-editor=\"\">\n      <VectorToolbar controller={controller} tools={tools} />\n      <div className=\"flex min-h-0 flex-col gap-2 md:flex-row\">\n        <div className=\"relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40\" style={{ height }}>\n          <VectorCanvas controller={controller} {...canvasProps} />\n        </div>\n        {showStylePanel && <VectorStylePanel controller={controller} className=\"w-full shrink-0 rounded-md border border-border p-3 md:w-56\" />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_react","import_vector","THEME","text","import_vector","import_jsx_runtime","import_jsx_runtime"]}

package/dist/vector/index.d.cts

@@ -0,0 +1,95 @@
+import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, SvgGradientDef, VectorRenderNode } from '@pixerate/editor/vector';
+import React__default from 'react';
+
+/** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */
+declare function useVectorEditorController(options?: VectorEditorOptions): VectorEditorController;
+/** The controller's state (re-renders on every change). */
+declare function useVectorEditorState(controller: VectorEditorController): VectorEditorState;
+interface UseVectorEditorResult {
+    controller: VectorEditorController;
+    state: VectorEditorState;
+    setTool: (tool: VectorTool) => void;
+    undo: () => void;
+    redo: () => void;
+    deleteSelection: () => void;
+    toSvg: () => string;
+}
+/**
+ * Subscribes to a vector editor controller and exposes its state with bound actions. Pass
+ * options instead of a controller to create one for the component's lifetime.
+ */
+declare function useVectorEditor(controllerOrOptions?: VectorEditorController | VectorEditorOptions): UseVectorEditorResult;
+/** Anything with `register(specs) → unregister` (a `CommandRegistry`). */
+interface VectorCommandTarget {
+    register(specs: any): () => void;
+}
+/**
+ * Registers the controller's palette / agent commands (`vector.addShape`, `vector.boolean`, …)
+ * in `registry` while mounted, so `createCommandToolProvider` exposes them to agents.
+ */
+declare function useVectorCommands(registry: VectorCommandTarget | null | undefined, controller: VectorEditorController, options?: VectorCommandOptions): void;
+
+interface VectorCanvasProps {
+    controller: VectorEditorController;
+    /** Fit the artboard into the canvas when it first gets a size (default `true`). */
+    fitOnMount?: boolean;
+    /** Draw a checkerboard behind a transparent artboard (default `true`). */
+    checkerboard?: boolean;
+    /** Overlay accent colour (default sky blue). */
+    accentColor?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** Accessible label (default "Vector canvas"). */
+    'aria-label'?: string;
+}
+/** Renders `<linearGradient>` / `<radialGradient>` descriptors. */
+declare function VectorGradientDefs({ defs }: {
+    defs: readonly SvgGradientDef[];
+}): React__default.JSX.Element | null;
+/** Renders scene nodes (paths and groups) from `getVectorSceneRenderData`. */
+declare function VectorSceneNodes({ nodes }: {
+    nodes: readonly VectorRenderNode[];
+}): React__default.JSX.Element;
+/**
+ * An SVG canvas for a `VectorEditorController`: draws the document and the editing overlay
+ * and forwards pointer, wheel, keyboard and clipboard events. Focus it to use shortcuts.
+ */
+declare function VectorCanvas({ controller, fitOnMount, checkerboard, accentColor, className, style, 'aria-label': ariaLabel, }: VectorCanvasProps): React__default.JSX.Element;
+
+interface VectorToolbarProps {
+    controller: VectorEditorController;
+    /** Tools to show (default: all). */
+    tools?: readonly VectorTool[];
+    /** Undo / redo buttons (default `true`). */
+    showHistory?: boolean;
+    /** Boolean, group, arrange and align buttons (default `true`). */
+    showArrange?: boolean;
+    className?: string;
+}
+/** Tool picker plus undo, boolean operations, grouping, stacking and alignment. */
+declare function VectorToolbar({ controller, tools, showHistory, showArrange, className }: VectorToolbarProps): React__default.JSX.Element;
+interface VectorStylePanelProps {
+    controller: VectorEditorController;
+    className?: string;
+}
+/**
+ * Fill, stroke, stroke width and opacity of the selection; with nothing selected it edits
+ * the defaults for new shapes.
+ */
+declare function VectorStylePanel({ controller, className }: VectorStylePanelProps): React__default.JSX.Element;
+
+interface VectorEditorProps {
+    controller: VectorEditorController;
+    /** Tools in the toolbar (default: all). */
+    tools?: readonly VectorTool[];
+    /** The style sidebar (default `true`). */
+    showStylePanel?: boolean;
+    /** Canvas height (default 520px). */
+    height?: number | string;
+    canvasProps?: Omit<VectorCanvasProps, 'controller'>;
+    className?: string;
+}
+/** Toolbar, canvas and style panel for a `VectorEditorController`. */
+declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, className }: VectorEditorProps): React__default.JSX.Element;
+
+export { type UseVectorEditorResult, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorEditor, type VectorEditorProps, VectorGradientDefs, VectorSceneNodes, VectorStylePanel, type VectorStylePanelProps, VectorToolbar, type VectorToolbarProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState };

package/dist/vector/index.d.ts

@@ -0,0 +1,95 @@
+import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, SvgGradientDef, VectorRenderNode } from '@pixerate/editor/vector';
+import React__default from 'react';
+
+/** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */
+declare function useVectorEditorController(options?: VectorEditorOptions): VectorEditorController;
+/** The controller's state (re-renders on every change). */
+declare function useVectorEditorState(controller: VectorEditorController): VectorEditorState;
+interface UseVectorEditorResult {
+    controller: VectorEditorController;
+    state: VectorEditorState;
+    setTool: (tool: VectorTool) => void;
+    undo: () => void;
+    redo: () => void;
+    deleteSelection: () => void;
+    toSvg: () => string;
+}
+/**
+ * Subscribes to a vector editor controller and exposes its state with bound actions. Pass
+ * options instead of a controller to create one for the component's lifetime.
+ */
+declare function useVectorEditor(controllerOrOptions?: VectorEditorController | VectorEditorOptions): UseVectorEditorResult;
+/** Anything with `register(specs) → unregister` (a `CommandRegistry`). */
+interface VectorCommandTarget {
+    register(specs: any): () => void;
+}
+/**
+ * Registers the controller's palette / agent commands (`vector.addShape`, `vector.boolean`, …)
+ * in `registry` while mounted, so `createCommandToolProvider` exposes them to agents.
+ */
+declare function useVectorCommands(registry: VectorCommandTarget | null | undefined, controller: VectorEditorController, options?: VectorCommandOptions): void;
+
+interface VectorCanvasProps {
+    controller: VectorEditorController;
+    /** Fit the artboard into the canvas when it first gets a size (default `true`). */
+    fitOnMount?: boolean;
+    /** Draw a checkerboard behind a transparent artboard (default `true`). */
+    checkerboard?: boolean;
+    /** Overlay accent colour (default sky blue). */
+    accentColor?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** Accessible label (default "Vector canvas"). */
+    'aria-label'?: string;
+}
+/** Renders `<linearGradient>` / `<radialGradient>` descriptors. */
+declare function VectorGradientDefs({ defs }: {
+    defs: readonly SvgGradientDef[];
+}): React__default.JSX.Element | null;
+/** Renders scene nodes (paths and groups) from `getVectorSceneRenderData`. */
+declare function VectorSceneNodes({ nodes }: {
+    nodes: readonly VectorRenderNode[];
+}): React__default.JSX.Element;
+/**
+ * An SVG canvas for a `VectorEditorController`: draws the document and the editing overlay
+ * and forwards pointer, wheel, keyboard and clipboard events. Focus it to use shortcuts.
+ */
+declare function VectorCanvas({ controller, fitOnMount, checkerboard, accentColor, className, style, 'aria-label': ariaLabel, }: VectorCanvasProps): React__default.JSX.Element;
+
+interface VectorToolbarProps {
+    controller: VectorEditorController;
+    /** Tools to show (default: all). */
+    tools?: readonly VectorTool[];
+    /** Undo / redo buttons (default `true`). */
+    showHistory?: boolean;
+    /** Boolean, group, arrange and align buttons (default `true`). */
+    showArrange?: boolean;
+    className?: string;
+}
+/** Tool picker plus undo, boolean operations, grouping, stacking and alignment. */
+declare function VectorToolbar({ controller, tools, showHistory, showArrange, className }: VectorToolbarProps): React__default.JSX.Element;
+interface VectorStylePanelProps {
+    controller: VectorEditorController;
+    className?: string;
+}
+/**
+ * Fill, stroke, stroke width and opacity of the selection; with nothing selected it edits
+ * the defaults for new shapes.
+ */
+declare function VectorStylePanel({ controller, className }: VectorStylePanelProps): React__default.JSX.Element;
+
+interface VectorEditorProps {
+    controller: VectorEditorController;
+    /** Tools in the toolbar (default: all). */
+    tools?: readonly VectorTool[];
+    /** The style sidebar (default `true`). */
+    showStylePanel?: boolean;
+    /** Canvas height (default 520px). */
+    height?: number | string;
+    canvasProps?: Omit<VectorCanvasProps, 'controller'>;
+    className?: string;
+}
+/** Toolbar, canvas and style panel for a `VectorEditorController`. */
+declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, className }: VectorEditorProps): React__default.JSX.Element;
+
+export { type UseVectorEditorResult, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorEditor, type VectorEditorProps, VectorGradientDefs, VectorSceneNodes, VectorStylePanel, type VectorStylePanelProps, VectorToolbar, type VectorToolbarProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState };

package/dist/vector/index.js

@@ -0,0 +1,392 @@
+// src/vector/useVectorEditor.ts
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import {
+  VectorEditorController,
+  createVectorCommands
+} from "@pixerate/editor/vector";
+function useVectorEditorController(options = {}) {
+  const ref = useRef(null);
+  if (!ref.current) ref.current = new VectorEditorController(options);
+  const controller = ref.current;
+  useEffect(() => () => controller.destroy(), [controller]);
+  return controller;
+}
+function useVectorEditorState(controller) {
+  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+}
+function useVectorEditor(controllerOrOptions = {}) {
+  const own = useRef(null);
+  let controller;
+  if (controllerOrOptions instanceof VectorEditorController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new VectorEditorController(controllerOrOptions);
+    controller = own.current;
+  }
+  const state = useVectorEditorState(controller);
+  const actions = useMemo(
+    () => ({
+      setTool: (tool) => controller.setTool(tool),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo(),
+      deleteSelection: () => void controller.deleteSelection(),
+      toSvg: () => controller.toSvg()
+    }),
+    [controller]
+  );
+  return { controller, state, ...actions };
+}
+function useVectorCommands(registry, controller, options = {}) {
+  const { prefix, group, scope } = options;
+  useEffect(() => {
+    if (!registry) return;
+    return registry.register(createVectorCommands(controller, { prefix, group, scope }));
+  }, [registry, controller, prefix, group, scope]);
+}
+
+// src/vector/VectorCanvas.tsx
+import { useEffect as useEffect2, useId, useRef as useRef2 } from "react";
+import {
+  VECTOR_OVERLAY_THEME as THEME,
+  getVectorOverlayRenderData,
+  getVectorSceneRenderData,
+  isVectorTextTarget,
+  toVectorKeyInput,
+  toVectorPointerInput
+} from "@pixerate/editor/vector";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function VectorGradientDefs({ defs }) {
+  if (!defs.length) return null;
+  return /* @__PURE__ */ jsx("defs", { children: defs.map((def) => {
+    const stops = def.stops.map((s, i) => /* @__PURE__ */ jsx("stop", { offset: s.offset, stopColor: s.stopColor, stopOpacity: s.stopOpacity }, i));
+    return def.type === "radial" ? /* @__PURE__ */ jsx("radialGradient", { id: def.id, ...def.attrs, children: stops }, def.id) : /* @__PURE__ */ jsx("linearGradient", { id: def.id, ...def.attrs, children: stops }, def.id);
+  }) });
+}
+function VectorSceneNodes({ nodes }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map(
+    (node) => node.kind === "group" ? /* @__PURE__ */ jsx("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, children: /* @__PURE__ */ jsx(VectorSceneNodes, { nodes: node.children }) }, node.id) : /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-vector-id": node.id,
+        transform: node.transform,
+        d: node.d,
+        fill: node.fill,
+        fillRule: node.fillRule,
+        stroke: node.stroke,
+        strokeWidth: node.stroke === "none" ? void 0 : node.strokeWidth,
+        strokeLinecap: node.strokeLinecap,
+        strokeLinejoin: node.strokeLinejoin,
+        strokeDasharray: node.strokeDasharray,
+        opacity: node.opacity < 1 ? node.opacity : void 0
+      },
+      node.id
+    )
+  ) });
+}
+function VectorCanvas({
+  controller,
+  fitOnMount = true,
+  checkerboard = true,
+  accentColor = THEME.accent,
+  className,
+  style,
+  "aria-label": ariaLabel = "Vector canvas"
+}) {
+  const state = useVectorEditorState(controller);
+  const svgRef = useRef2(null);
+  const fitted = useRef2(!fitOnMount);
+  const uid = useId().replace(/:/g, "");
+  const scene = getVectorSceneRenderData(state, { idPrefix: `ve${uid}-` });
+  const overlay = getVectorOverlayRenderData(state);
+  useEffect2(() => {
+    const el = svgRef.current;
+    if (!el || fitted.current) return;
+    const fit = () => {
+      const rect = el.getBoundingClientRect();
+      if (fitted.current || rect.width <= 0 || rect.height <= 0) return;
+      fitted.current = true;
+      controller.zoomToFit({ width: rect.width, height: rect.height });
+    };
+    fit();
+    if (fitted.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(fit);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [controller]);
+  useEffect2(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      controller.wheel(local(e), { x: e.deltaX, y: e.deltaY }, toVectorPointerInput(e));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [controller]);
+  const local = (e) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };
+  };
+  const clipboard = (kind) => (event) => {
+    const native = event && "nativeEvent" in event ? event.nativeEvent : event;
+    const data = native?.clipboardData;
+    if (kind === "paste") {
+      const text2 = data?.getData("text/plain") ?? "";
+      const pasted = text2 ? controller.paste(text2) : controller.paste();
+      if (pasted.length) event.preventDefault?.();
+      return;
+    }
+    const text = kind === "cut" ? controller.cut() : controller.copy();
+    if (text && data) {
+      data.setData("text/plain", text);
+      event.preventDefault?.();
+    }
+  };
+  const hs = THEME.transformHandleSize;
+  const as = THEME.anchorSize;
+  const box = overlay.selectionBox;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      role: "application",
+      "aria-label": ariaLabel,
+      tabIndex: 0,
+      "data-tool": state.tool,
+      className,
+      style: { display: "block", width: "100%", height: "100%", outline: "none", touchAction: "none", userSelect: "none", cursor: state.cursor, ...style },
+      onPointerDown: (e) => {
+        svgRef.current?.focus({ preventScroll: true });
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        controller.pointerDown(local(e), toVectorPointerInput(e));
+      },
+      onPointerMove: (e) => controller.pointerMove(local(e), toVectorPointerInput(e)),
+      onPointerUp: (e) => {
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+        controller.pointerUp(local(e), toVectorPointerInput(e));
+      },
+      onPointerCancel: () => controller.cancelDrag(),
+      onPointerLeave: () => controller.pointerLeave(),
+      onDoubleClick: (e) => controller.doubleClick(local(e)),
+      onKeyDown: (e) => {
+        if (isVectorTextTarget(e.target)) return;
+        if (controller.keyDown(toVectorKeyInput(e))) e.preventDefault();
+      },
+      onKeyUp: (e) => controller.keyUp(toVectorKeyInput(e)),
+      onCopy: clipboard("copy"),
+      onCut: clipboard("cut"),
+      onPaste: clipboard("paste"),
+      children: [
+        checkerboard && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", { id: `ve${uid}-checker`, width: 16, height: 16, patternUnits: "userSpaceOnUse", children: [
+          /* @__PURE__ */ jsx("rect", { width: 16, height: 16, fill: "#ffffff" }),
+          /* @__PURE__ */ jsx("rect", { width: 8, height: 8, fill: "#e5e7eb" }),
+          /* @__PURE__ */ jsx("rect", { x: 8, y: 8, width: 8, height: 8, fill: "#e5e7eb" })
+        ] }) }),
+        /* @__PURE__ */ jsx(VectorGradientDefs, { defs: scene.defs }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-vector-artboard": "",
+            x: overlay.artboard.x,
+            y: overlay.artboard.y,
+            width: overlay.artboard.width,
+            height: overlay.artboard.height,
+            fill: scene.background ?? (checkerboard ? `url(#ve${uid}-checker)` : "#ffffff"),
+            stroke: "rgba(0,0,0,0.12)"
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { "data-vector-scene": "", transform: scene.transform, children: /* @__PURE__ */ jsx(VectorSceneNodes, { nodes: scene.nodes }) }),
+        /* @__PURE__ */ jsxs("g", { "data-vector-overlay": "", pointerEvents: "none", fill: "none", children: [
+          overlay.outlines.map((o) => /* @__PURE__ */ jsx("path", { d: o.d, stroke: accentColor, strokeWidth: o.selected ? 1 : 1.5, opacity: o.selected ? 1 : 0.7 }, o.id)),
+          overlay.penPreview && /* @__PURE__ */ jsx("path", { d: overlay.penPreview, stroke: accentColor, strokeDasharray: "4 3" }),
+          box && /* @__PURE__ */ jsxs("g", { "data-vector-selection": "", transform: box.transform || void 0, children: [
+            /* @__PURE__ */ jsx("rect", { x: box.x, y: box.y, width: box.width, height: box.height, stroke: accentColor }),
+            /* @__PURE__ */ jsx("line", { x1: box.x + box.width / 2, y1: box.y, x2: box.x + box.width / 2, y2: box.y - 24, stroke: accentColor }),
+            box.handles.map(
+              (h) => h.handle === "rotate" ? /* @__PURE__ */ jsx("circle", { "data-handle": h.handle, cx: h.x, cy: h.y, r: hs / 2 + 1, fill: THEME.handleFill, stroke: accentColor }, h.handle) : /* @__PURE__ */ jsx("rect", { "data-handle": h.handle, x: h.x - hs / 2, y: h.y - hs / 2, width: hs, height: hs, fill: THEME.handleFill, stroke: accentColor }, h.handle)
+            )
+          ] }),
+          overlay.handles.map((h) => /* @__PURE__ */ jsxs("g", { "data-vector-handle": h.ref.handle, children: [
+            /* @__PURE__ */ jsx("line", { x1: h.anchorX, y1: h.anchorY, x2: h.x, y2: h.y, stroke: accentColor }),
+            /* @__PURE__ */ jsx("circle", { cx: h.x, cy: h.y, r: THEME.handleRadius + (h.hovered ? 1 : 0), fill: THEME.handleFill, stroke: accentColor })
+          ] }, `${h.ref.nodeId}:${h.ref.subpath}:${h.ref.index}:${h.ref.handle}`)),
+          overlay.anchors.map((a) => {
+            const size = as + (a.hovered ? 2 : 0);
+            const fill = a.selected ? accentColor : THEME.handleFill;
+            const key = `${a.ref.nodeId}:${a.ref.subpath}:${a.ref.index}`;
+            return a.type === "corner" ? /* @__PURE__ */ jsx("rect", { "data-vector-anchor": a.ref.index, x: a.x - size / 2, y: a.y - size / 2, width: size, height: size, fill, stroke: accentColor }, key) : /* @__PURE__ */ jsx("circle", { "data-vector-anchor": a.ref.index, cx: a.x, cy: a.y, r: size / 2, fill, stroke: accentColor }, key);
+          }),
+          state.tool === "pen" && overlay.anchors.some((a) => a.closes && a.hovered) && /* @__PURE__ */ jsx("circle", { cx: overlay.anchors.find((a) => a.closes).x, cy: overlay.anchors.find((a) => a.closes).y, r: as, stroke: accentColor }),
+          overlay.marquee && /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-vector-marquee": "",
+              x: overlay.marquee.x,
+              y: overlay.marquee.y,
+              width: overlay.marquee.width,
+              height: overlay.marquee.height,
+              fill: THEME.marqueeFill,
+              stroke: accentColor,
+              strokeDasharray: "3 2"
+            }
+          ),
+          overlay.status && /* @__PURE__ */ jsx("text", { "data-vector-status": "", x: 8, y: "100%", dy: -8, fontSize: 11, fill: accentColor, style: { fontFamily: "system-ui, sans-serif" }, children: overlay.status })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/vector/VectorToolbar.tsx
+import {
+  VECTOR_TOOLS,
+  VECTOR_TOOL_GLYPHS,
+  VECTOR_TOOL_SHORTCUTS,
+  getVectorSelectionStyle,
+  vectorPaintToHex,
+  vectorToolLabel
+} from "@pixerate/editor/vector";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonClass = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, className }) {
+  const state = useVectorEditorState(controller);
+  const count = state.selection.length;
+  const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx2("button", { type: "button", className: buttonClass, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ jsxs2("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        "data-vector-tool": tool,
+        className: buttonClass,
+        "aria-pressed": state.tool === tool,
+        title: `${vectorToolLabel(tool)} (${VECTOR_TOOL_SHORTCUTS[tool]})`,
+        "aria-label": vectorToolLabel(tool),
+        onClick: () => controller.setTool(tool),
+        children: VECTOR_TOOL_GLYPHS[tool]
+      },
+      tool
+    )) }),
+    showHistory && /* @__PURE__ */ jsxs2("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)
+    ] }),
+    showArrange && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsxs2("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        act("\u222A", "Union", () => controller.booleanOp("union"), count < 2),
+        act("\u2212", "Subtract", () => controller.booleanOp("subtract"), count < 2),
+        act("\u2229", "Intersect", () => controller.booleanOp("intersect"), count < 2),
+        act("\u22BB", "Exclude", () => controller.booleanOp("exclude"), count < 2),
+        act("G", "Group", () => controller.group(), count < 1),
+        act("U", "Ungroup", () => controller.ungroup(), !groupSelected)
+      ] }),
+      /* @__PURE__ */ jsxs2("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),
+        act("\u2194", "Align Center", () => controller.align("center"), count < 1),
+        act("\u21E5", "Align Right", () => controller.align("right"), count < 1),
+        act("\u2912", "Align Top", () => controller.align("top"), count < 1),
+        act("\u2195", "Align Middle", () => controller.align("middle"), count < 1),
+        act("\u2913", "Align Bottom", () => controller.align("bottom"), count < 1)
+      ] })
+    ] })
+  ] });
+}
+function VectorStylePanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const style = getVectorSelectionStyle(state);
+  const source = style ?? { fill: state.defaults.fill ?? null, stroke: state.defaults.stroke ?? null, strokeWidth: state.defaults.strokeWidth ?? 1, opacity: 1 };
+  const apply = (patch) => {
+    if (style) controller.setStyle(patch);
+    else controller.setDefaults(patch);
+  };
+  const paintRow = (key, label) => {
+    const paint = source[key];
+    const hex = vectorPaintToHex(paint);
+    const on = paint !== null && paint !== "none";
+    return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsxs2("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
+        label
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "color",
+          "aria-label": `${label} colour`,
+          className: "h-7 w-10 cursor-pointer rounded border border-border bg-background disabled:opacity-40",
+          disabled: !on,
+          value: hex ?? "#000000",
+          onChange: (e) => apply({ [key]: e.target.value })
+        }
+      ),
+      on && !hex && /* @__PURE__ */ jsx2("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ jsx2("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+    paintRow("fill", "Fill"),
+    paintRow("stroke", "Stroke"),
+    /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx2("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          step: 0.5,
+          "aria-label": "Stroke width",
+          className: "h-7 w-20 rounded border border-border bg-background px-1.5 text-xs",
+          value: source.strokeWidth,
+          onChange: (e) => {
+            const n = parseFloat(e.target.value);
+            if (Number.isFinite(n) && n >= 0) apply({ strokeWidth: n });
+          }
+        }
+      )
+    ] }),
+    style && /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx2("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: 1,
+          step: 0.05,
+          "aria-label": "Opacity",
+          className: "h-4 flex-1 accent-primary",
+          value: source.opacity,
+          onChange: (e) => apply({ opacity: parseFloat(e.target.value) })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/vector/VectorEditor.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
+  return /* @__PURE__ */ jsxs3("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ jsx3(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx3("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx3(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ jsx3(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+    ] })
+  ] });
+}
+export {
+  VectorCanvas,
+  VectorEditor,
+  VectorGradientDefs,
+  VectorSceneNodes,
+  VectorStylePanel,
+  VectorToolbar,
+  useVectorCommands,
+  useVectorEditor,
+  useVectorEditorController,
+  useVectorEditorState
+};
+//# sourceMappingURL=index.js.map

package/dist/vector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vector/useVectorEditor.ts","../../src/vector/VectorCanvas.tsx","../../src/vector/VectorToolbar.tsx","../../src/vector/VectorEditor.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  VectorEditorController,\n  createVectorCommands,\n  type VectorCommandOptions,\n  type VectorEditorOptions,\n  type VectorEditorState,\n  type VectorTool,\n} from '@pixerate/editor/vector';\n\n/** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */\nexport function useVectorEditorController(options: VectorEditorOptions = {}): VectorEditorController {\n  const ref = useRef<VectorEditorController | null>(null);\n  if (!ref.current) ref.current = new VectorEditorController(options);\n  const controller = ref.current;\n  useEffect(() => () => controller.destroy(), [controller]);\n  return controller;\n}\n\n/** The controller's state (re-renders on every change). */\nexport function useVectorEditorState(controller: VectorEditorController): VectorEditorState {\n  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);\n}\n\nexport interface UseVectorEditorResult {\n  controller: VectorEditorController;\n  state: VectorEditorState;\n  setTool: (tool: VectorTool) => void;\n  undo: () => void;\n  redo: () => void;\n  deleteSelection: () => void;\n  toSvg: () => string;\n}\n\n/**\n * Subscribes to a vector editor controller and exposes its state with bound actions. Pass\n * options instead of a controller to create one for the component's lifetime.\n */\nexport function useVectorEditor(controllerOrOptions: VectorEditorController | VectorEditorOptions = {}): UseVectorEditorResult {\n  const own = useRef<VectorEditorController | null>(null);\n  let controller: VectorEditorController;\n  if (controllerOrOptions instanceof VectorEditorController) controller = controllerOrOptions;\n  else {\n    if (!own.current) own.current = new VectorEditorController(controllerOrOptions);\n    controller = own.current;\n  }\n  const state = useVectorEditorState(controller);\n  const actions = useMemo(\n    () => ({\n      setTool: (tool: VectorTool) => controller.setTool(tool),\n      undo: () => void controller.undo(),\n      redo: () => void controller.redo(),\n      deleteSelection: () => void controller.deleteSelection(),\n      toSvg: () => controller.toSvg(),\n    }),\n    [controller],\n  );\n  return { controller, state, ...actions };\n}\n\n/** Anything with `register(specs) → unregister` (a `CommandRegistry`). */\nexport interface VectorCommandTarget {\n  register(specs: any): () => void;\n}\n\n/**\n * Registers the controller's palette / agent commands (`vector.addShape`, `vector.boolean`, …)\n * in `registry` while mounted, so `createCommandToolProvider` exposes them to agents.\n */\nexport function useVectorCommands(\n  registry: VectorCommandTarget | null | undefined,\n  controller: VectorEditorController,\n  options: VectorCommandOptions = {},\n): void {\n  const { prefix, group, scope } = options;\n  useEffect(() => {\n    if (!registry) return;\n    return registry.register(createVectorCommands(controller, { prefix, group, scope }));\n  }, [registry, controller, prefix, group, scope]);\n}\n","import React, { useEffect, useId, useRef } from 'react';\nimport {\n  VECTOR_OVERLAY_THEME as THEME,\n  getVectorOverlayRenderData,\n  getVectorSceneRenderData,\n  isVectorTextTarget,\n  toVectorKeyInput,\n  toVectorPointerInput,\n  type VectorEditorController,\n  type VectorRenderNode,\n  type SvgGradientDef,\n} from '@pixerate/editor/vector';\nimport { useVectorEditorState } from './useVectorEditor';\n\nexport interface VectorCanvasProps {\n  controller: VectorEditorController;\n  /** Fit the artboard into the canvas when it first gets a size (default `true`). */\n  fitOnMount?: boolean;\n  /** Draw a checkerboard behind a transparent artboard (default `true`). */\n  checkerboard?: boolean;\n  /** Overlay accent colour (default sky blue). */\n  accentColor?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  /** Accessible label (default \"Vector canvas\"). */\n  'aria-label'?: string;\n}\n\n/** Renders `<linearGradient>` / `<radialGradient>` descriptors. */\nexport function VectorGradientDefs({ defs }: { defs: readonly SvgGradientDef[] }) {\n  if (!defs.length) return null;\n  return (\n    <defs>\n      {defs.map((def) => {\n        const stops = def.stops.map((s, i) => <stop key={i} offset={s.offset} stopColor={s.stopColor} stopOpacity={s.stopOpacity} />);\n        return def.type === 'radial' ? (\n          <radialGradient key={def.id} id={def.id} {...(def.attrs as any)}>\n            {stops}\n          </radialGradient>\n        ) : (\n          <linearGradient key={def.id} id={def.id} {...(def.attrs as any)}>\n            {stops}\n          </linearGradient>\n        );\n      })}\n    </defs>\n  );\n}\n\n/** Renders scene nodes (paths and groups) from `getVectorSceneRenderData`. */\nexport function VectorSceneNodes({ nodes }: { nodes: readonly VectorRenderNode[] }) {\n  return (\n    <>\n      {nodes.map((node) =>\n        node.kind === 'group' ? (\n          <g key={node.id} data-vector-id={node.id} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined}>\n            <VectorSceneNodes nodes={node.children} />\n          </g>\n        ) : (\n          <path\n            key={node.id}\n            data-vector-id={node.id}\n            transform={node.transform}\n            d={node.d}\n            fill={node.fill}\n            fillRule={node.fillRule}\n            stroke={node.stroke}\n            strokeWidth={node.stroke === 'none' ? undefined : node.strokeWidth}\n            strokeLinecap={node.strokeLinecap as any}\n            strokeLinejoin={node.strokeLinejoin as any}\n            strokeDasharray={node.strokeDasharray}\n            opacity={node.opacity < 1 ? node.opacity : undefined}\n          />\n        ),\n      )}\n    </>\n  );\n}\n\n/**\n * An SVG canvas for a `VectorEditorController`: draws the document and the editing overlay\n * and forwards pointer, wheel, keyboard and clipboard events. Focus it to use shortcuts.\n */\nexport function VectorCanvas({\n  controller,\n  fitOnMount = true,\n  checkerboard = true,\n  accentColor = THEME.accent,\n  className,\n  style,\n  'aria-label': ariaLabel = 'Vector canvas',\n}: VectorCanvasProps) {\n  const state = useVectorEditorState(controller);\n  const svgRef = useRef<SVGSVGElement | null>(null);\n  const fitted = useRef(!fitOnMount);\n  const uid = useId().replace(/:/g, '');\n  const scene = getVectorSceneRenderData(state, { idPrefix: `ve${uid}-` });\n  const overlay = getVectorOverlayRenderData(state);\n\n  useEffect(() => {\n    const el = svgRef.current;\n    if (!el || fitted.current) return;\n    const fit = () => {\n      const rect = el.getBoundingClientRect();\n      if (fitted.current || rect.width <= 0 || rect.height <= 0) return;\n      fitted.current = true;\n      controller.zoomToFit({ width: rect.width, height: rect.height });\n    };\n    fit();\n    if (fitted.current || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(fit);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [controller]);\n\n  // Wheel needs a non-passive listener to stop page scroll / browser zoom.\n  useEffect(() => {\n    const el = svgRef.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      e.preventDefault();\n      controller.wheel(local(e), { x: e.deltaX, y: e.deltaY }, toVectorPointerInput(e));\n    };\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n  }, [controller]);\n\n  const local = (e: { clientX: number; clientY: number }) => {\n    const rect = svgRef.current?.getBoundingClientRect();\n    return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };\n  };\n\n  const clipboard = (kind: 'copy' | 'cut' | 'paste') => (event: React.ClipboardEvent) => {\n    const native = (event && 'nativeEvent' in event ? event.nativeEvent : event) as ClipboardEvent;\n    const data = native?.clipboardData;\n    if (kind === 'paste') {\n      const text = data?.getData('text/plain') ?? '';\n      const pasted = text ? controller.paste(text) : controller.paste();\n      if (pasted.length) event.preventDefault?.();\n      return;\n    }\n    const text = kind === 'cut' ? controller.cut() : controller.copy();\n    if (text && data) {\n      data.setData('text/plain', text);\n      event.preventDefault?.();\n    }\n  };\n\n  const hs = THEME.transformHandleSize;\n  const as = THEME.anchorSize;\n  const box = overlay.selectionBox;\n\n  return (\n    <svg\n      ref={svgRef}\n      role=\"application\"\n      aria-label={ariaLabel}\n      tabIndex={0}\n      data-tool={state.tool}\n      className={className}\n      style={{ display: 'block', width: '100%', height: '100%', outline: 'none', touchAction: 'none', userSelect: 'none', cursor: state.cursor, ...style }}\n      onPointerDown={(e) => {\n        svgRef.current?.focus({ preventScroll: true });\n        (e.currentTarget as Element).setPointerCapture?.(e.pointerId);\n        controller.pointerDown(local(e), toVectorPointerInput(e));\n      }}\n      onPointerMove={(e) => controller.pointerMove(local(e), toVectorPointerInput(e))}\n      onPointerUp={(e) => {\n        (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);\n        controller.pointerUp(local(e), toVectorPointerInput(e));\n      }}\n      onPointerCancel={() => controller.cancelDrag()}\n      onPointerLeave={() => controller.pointerLeave()}\n      onDoubleClick={(e) => controller.doubleClick(local(e))}\n      onKeyDown={(e) => {\n        if (isVectorTextTarget(e.target)) return;\n        if (controller.keyDown(toVectorKeyInput(e))) e.preventDefault();\n      }}\n      onKeyUp={(e) => controller.keyUp(toVectorKeyInput(e))}\n      onCopy={clipboard('copy')}\n      onCut={clipboard('cut')}\n      onPaste={clipboard('paste')}\n    >\n      {checkerboard && (\n        <defs>\n          <pattern id={`ve${uid}-checker`} width={16} height={16} patternUnits=\"userSpaceOnUse\">\n            <rect width={16} height={16} fill=\"#ffffff\" />\n            <rect width={8} height={8} fill=\"#e5e7eb\" />\n            <rect x={8} y={8} width={8} height={8} fill=\"#e5e7eb\" />\n          </pattern>\n        </defs>\n      )}\n      <VectorGradientDefs defs={scene.defs} />\n      <rect\n        data-vector-artboard=\"\"\n        x={overlay.artboard.x}\n        y={overlay.artboard.y}\n        width={overlay.artboard.width}\n        height={overlay.artboard.height}\n        fill={scene.background ?? (checkerboard ? `url(#ve${uid}-checker)` : '#ffffff')}\n        stroke=\"rgba(0,0,0,0.12)\"\n      />\n      <g data-vector-scene=\"\" transform={scene.transform}>\n        <VectorSceneNodes nodes={scene.nodes} />\n      </g>\n      <g data-vector-overlay=\"\" pointerEvents=\"none\" fill=\"none\">\n        {overlay.outlines.map((o) => (\n          <path key={o.id} d={o.d} stroke={accentColor} strokeWidth={o.selected ? 1 : 1.5} opacity={o.selected ? 1 : 0.7} />\n        ))}\n        {overlay.penPreview && <path d={overlay.penPreview} stroke={accentColor} strokeDasharray=\"4 3\" />}\n        {box && (\n          <g data-vector-selection=\"\" transform={box.transform || undefined}>\n            <rect x={box.x} y={box.y} width={box.width} height={box.height} stroke={accentColor} />\n            <line x1={box.x + box.width / 2} y1={box.y} x2={box.x + box.width / 2} y2={box.y - 24} stroke={accentColor} />\n            {box.handles.map((h) =>\n              h.handle === 'rotate' ? (\n                <circle key={h.handle} data-handle={h.handle} cx={h.x} cy={h.y} r={hs / 2 + 1} fill={THEME.handleFill} stroke={accentColor} />\n              ) : (\n                <rect key={h.handle} data-handle={h.handle} x={h.x - hs / 2} y={h.y - hs / 2} width={hs} height={hs} fill={THEME.handleFill} stroke={accentColor} />\n              ),\n            )}\n          </g>\n        )}\n        {overlay.handles.map((h) => (\n          <g key={`${h.ref.nodeId}:${h.ref.subpath}:${h.ref.index}:${h.ref.handle}`} data-vector-handle={h.ref.handle}>\n            <line x1={h.anchorX} y1={h.anchorY} x2={h.x} y2={h.y} stroke={accentColor} />\n            <circle cx={h.x} cy={h.y} r={THEME.handleRadius + (h.hovered ? 1 : 0)} fill={THEME.handleFill} stroke={accentColor} />\n          </g>\n        ))}\n        {overlay.anchors.map((a) => {\n          const size = as + (a.hovered ? 2 : 0);\n          const fill = a.selected ? accentColor : THEME.handleFill;\n          const key = `${a.ref.nodeId}:${a.ref.subpath}:${a.ref.index}`;\n          return a.type === 'corner' ? (\n            <rect key={key} data-vector-anchor={a.ref.index} x={a.x - size / 2} y={a.y - size / 2} width={size} height={size} fill={fill} stroke={accentColor} />\n          ) : (\n            <circle key={key} data-vector-anchor={a.ref.index} cx={a.x} cy={a.y} r={size / 2} fill={fill} stroke={accentColor} />\n          );\n        })}\n        {state.tool === 'pen' && overlay.anchors.some((a) => a.closes && a.hovered) && (\n          <circle cx={overlay.anchors.find((a) => a.closes)!.x} cy={overlay.anchors.find((a) => a.closes)!.y} r={as} stroke={accentColor} />\n        )}\n        {overlay.marquee && (\n          <rect\n            data-vector-marquee=\"\"\n            x={overlay.marquee.x}\n            y={overlay.marquee.y}\n            width={overlay.marquee.width}\n            height={overlay.marquee.height}\n            fill={THEME.marqueeFill}\n            stroke={accentColor}\n            strokeDasharray=\"3 2\"\n          />\n        )}\n        {overlay.status && (\n          <text data-vector-status=\"\" x={8} y=\"100%\" dy={-8} fontSize={11} fill={accentColor} style={{ fontFamily: 'system-ui, sans-serif' }}>\n            {overlay.status}\n          </text>\n        )}\n      </g>\n    </svg>\n  );\n}\n","import React from 'react';\nimport {\n  VECTOR_TOOLS,\n  VECTOR_TOOL_GLYPHS,\n  VECTOR_TOOL_SHORTCUTS,\n  getVectorSelectionStyle,\n  vectorPaintToHex,\n  vectorToolLabel,\n  type VectorEditorController,\n  type VectorTool,\n} from '@pixerate/editor/vector';\nimport { useVectorEditorState } from './useVectorEditor';\n\nconst buttonClass =\n  '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';\n\nexport interface VectorToolbarProps {\n  controller: VectorEditorController;\n  /** Tools to show (default: all). */\n  tools?: readonly VectorTool[];\n  /** Undo / redo buttons (default `true`). */\n  showHistory?: boolean;\n  /** Boolean, group, arrange and align buttons (default `true`). */\n  showArrange?: boolean;\n  className?: string;\n}\n\n/** Tool picker plus undo, boolean operations, grouping, stacking and alignment. */\nexport function VectorToolbar({ controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, className }: VectorToolbarProps) {\n  const state = useVectorEditorState(controller);\n  const count = state.selection.length;\n  const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === 'group');\n  const act = (label: string, title: string, run: () => unknown, disabled = false) => (\n    <button key={label} type=\"button\" className={buttonClass} title={title} aria-label={title} disabled={disabled} onClick={() => void run()}>\n      {label}\n    </button>\n  );\n  return (\n    <div role=\"toolbar\" aria-label=\"Vector tools\" className={`flex flex-wrap items-center gap-1 ${className ?? ''}`}>\n      <div className=\"flex items-center gap-1\" role=\"group\" aria-label=\"Tools\">\n        {tools.map((tool) => (\n          <button\n            key={tool}\n            type=\"button\"\n            data-vector-tool={tool}\n            className={buttonClass}\n            aria-pressed={state.tool === tool}\n            title={`${vectorToolLabel(tool)} (${VECTOR_TOOL_SHORTCUTS[tool]})`}\n            aria-label={vectorToolLabel(tool)}\n            onClick={() => controller.setTool(tool)}\n          >\n            {VECTOR_TOOL_GLYPHS[tool]}\n          </button>\n        ))}\n      </div>\n      {showHistory && (\n        <div className=\"ml-1 flex items-center gap-1\" role=\"group\" aria-label=\"History\">\n          {act('↶', state.canUndo ? `Undo ${state.undoLabel}` : 'Undo', () => controller.undo(), !state.canUndo)}\n          {act('↷', state.canRedo ? `Redo ${state.redoLabel}` : 'Redo', () => controller.redo(), !state.canRedo)}\n        </div>\n      )}\n      {showArrange && (\n        <>\n          <div className=\"ml-1 flex items-center gap-1\" role=\"group\" aria-label=\"Combine\">\n            {act('∪', 'Union', () => controller.booleanOp('union'), count < 2)}\n            {act('−', 'Subtract', () => controller.booleanOp('subtract'), count < 2)}\n            {act('∩', 'Intersect', () => controller.booleanOp('intersect'), count < 2)}\n            {act('⊻', 'Exclude', () => controller.booleanOp('exclude'), count < 2)}\n            {act('G', 'Group', () => controller.group(), count < 1)}\n            {act('U', 'Ungroup', () => controller.ungroup(), !groupSelected)}\n          </div>\n          <div className=\"ml-1 flex items-center gap-1\" role=\"group\" aria-label=\"Arrange\">\n            {act('⇈', 'Bring to Front', () => controller.arrange('front'), count < 1)}\n            {act('⇊', 'Send to Back', () => controller.arrange('back'), count < 1)}\n            {act('⇤', 'Align Left', () => controller.align('left'), count < 1)}\n            {act('↔', 'Align Center', () => controller.align('center'), count < 1)}\n            {act('⇥', 'Align Right', () => controller.align('right'), count < 1)}\n            {act('⤒', 'Align Top', () => controller.align('top'), count < 1)}\n            {act('↕', 'Align Middle', () => controller.align('middle'), count < 1)}\n            {act('⤓', 'Align Bottom', () => controller.align('bottom'), count < 1)}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface VectorStylePanelProps {\n  controller: VectorEditorController;\n  className?: string;\n}\n\n/**\n * Fill, stroke, stroke width and opacity of the selection; with nothing selected it edits\n * the defaults for new shapes.\n */\nexport function VectorStylePanel({ controller, className }: VectorStylePanelProps) {\n  const state = useVectorEditorState(controller);\n  const style = getVectorSelectionStyle(state);\n  const source = style ?? { fill: state.defaults.fill ?? null, stroke: state.defaults.stroke ?? null, strokeWidth: state.defaults.strokeWidth ?? 1, opacity: 1 };\n  const apply = (patch: Record<string, unknown>) => {\n    if (style) controller.setStyle(patch);\n    else controller.setDefaults(patch);\n  };\n  const paintRow = (key: 'fill' | 'stroke', label: string) => {\n    const paint = source[key];\n    const hex = vectorPaintToHex(paint);\n    const on = paint !== null && paint !== 'none';\n    return (\n      <div className=\"flex items-center gap-2\" data-vector-style={key}>\n        <label className=\"flex w-16 items-center gap-1.5 text-xs text-foreground\">\n          <input type=\"checkbox\" checked={on} aria-label={`${label} on`} onChange={(e) => apply({ [key]: e.target.checked ? (hex ?? '#000000') : null })} />\n          {label}\n        </label>\n        <input\n          type=\"color\"\n          aria-label={`${label} colour`}\n          className=\"h-7 w-10 cursor-pointer rounded border border-border bg-background disabled:opacity-40\"\n          disabled={!on}\n          value={hex ?? '#000000'}\n          onChange={(e) => apply({ [key]: e.target.value })}\n        />\n        {on && !hex && <span className=\"truncate text-[11px] text-muted-foreground\">{typeof paint === 'string' ? paint : 'Gradient'}</span>}\n        {style?.mixed[key] && <span className=\"text-[11px] text-muted-foreground\">Mixed</span>}\n      </div>\n    );\n  };\n  return (\n    <div className={`space-y-2 ${className ?? ''}`} aria-label={style ? 'Selection style' : 'New shape style'}>\n      <p className=\"text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">{style ? 'Selection' : 'New shapes'}</p>\n      {paintRow('fill', 'Fill')}\n      {paintRow('stroke', 'Stroke')}\n      <label className=\"flex items-center gap-2 text-xs text-foreground\">\n        <span className=\"w-16\">Width</span>\n        <input\n          type=\"number\"\n          min={0}\n          step={0.5}\n          aria-label=\"Stroke width\"\n          className=\"h-7 w-20 rounded border border-border bg-background px-1.5 text-xs\"\n          value={source.strokeWidth}\n          onChange={(e) => {\n            const n = parseFloat(e.target.value);\n            if (Number.isFinite(n) && n >= 0) apply({ strokeWidth: n });\n          }}\n        />\n      </label>\n      {style && (\n        <label className=\"flex items-center gap-2 text-xs text-foreground\">\n          <span className=\"w-16\">Opacity</span>\n          <input\n            type=\"range\"\n            min={0}\n            max={1}\n            step={0.05}\n            aria-label=\"Opacity\"\n            className=\"h-4 flex-1 accent-primary\"\n            value={source.opacity}\n            onChange={(e) => apply({ opacity: parseFloat(e.target.value) })}\n          />\n        </label>\n      )}\n    </div>\n  );\n}\n","import React from 'react';\nimport type { VectorEditorController, VectorTool } from '@pixerate/editor/vector';\nimport { VectorCanvas, type VectorCanvasProps } from './VectorCanvas';\nimport { VectorStylePanel, VectorToolbar } from './VectorToolbar';\n\nexport interface VectorEditorProps {\n  controller: VectorEditorController;\n  /** Tools in the toolbar (default: all). */\n  tools?: readonly VectorTool[];\n  /** The style sidebar (default `true`). */\n  showStylePanel?: boolean;\n  /** Canvas height (default 520px). */\n  height?: number | string;\n  canvasProps?: Omit<VectorCanvasProps, 'controller'>;\n  className?: string;\n}\n\n/** Toolbar, canvas and style panel for a `VectorEditorController`. */\nexport function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }: VectorEditorProps) {\n  return (\n    <div className={`flex flex-col gap-2 ${className ?? ''}`} data-vector-editor=\"\">\n      <VectorToolbar controller={controller} tools={tools} />\n      <div className=\"flex min-h-0 flex-col gap-2 md:flex-row\">\n        <div className=\"relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40\" style={{ height }}>\n          <VectorCanvas controller={controller} {...canvasProps} />\n        </div>\n        {showStylePanel && <VectorStylePanel controller={controller} className=\"w-full shrink-0 rounded-md border border-border p-3 md:w-56\" />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAAS,WAAW,SAAS,QAAQ,4BAA4B;AACjE;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AAGA,SAAS,0BAA0B,UAA+B,CAAC,GAA2B;AACnG,QAAM,MAAM,OAAsC,IAAI;AACtD,MAAI,CAAC,IAAI,QAAS,KAAI,UAAU,IAAI,uBAAuB,OAAO;AAClE,QAAM,aAAa,IAAI;AACvB,YAAU,MAAM,MAAM,WAAW,QAAQ,GAAG,CAAC,UAAU,CAAC;AACxD,SAAO;AACT;AAGO,SAAS,qBAAqB,YAAuD;AAC1F,SAAO,qBAAqB,WAAW,WAAW,WAAW,UAAU,WAAW,QAAQ;AAC5F;AAgBO,SAAS,gBAAgB,sBAAoE,CAAC,GAA0B;AAC7H,QAAM,MAAM,OAAsC,IAAI;AACtD,MAAI;AACJ,MAAI,+BAA+B,uBAAwB,cAAa;AAAA,OACnE;AACH,QAAI,CAAC,IAAI,QAAS,KAAI,UAAU,IAAI,uBAAuB,mBAAmB;AAC9E,iBAAa,IAAI;AAAA,EACnB;AACA,QAAM,QAAQ,qBAAqB,UAAU;AAC7C,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,SAAS,CAAC,SAAqB,WAAW,QAAQ,IAAI;AAAA,MACtD,MAAM,MAAM,KAAK,WAAW,KAAK;AAAA,MACjC,MAAM,MAAM,KAAK,WAAW,KAAK;AAAA,MACjC,iBAAiB,MAAM,KAAK,WAAW,gBAAgB;AAAA,MACvD,OAAO,MAAM,WAAW,MAAM;AAAA,IAChC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SAAO,EAAE,YAAY,OAAO,GAAG,QAAQ;AACzC;AAWO,SAAS,kBACd,UACA,YACA,UAAgC,CAAC,GAC3B;AACN,QAAM,EAAE,QAAQ,OAAO,MAAM,IAAI;AACjC,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,WAAO,SAAS,SAAS,qBAAqB,YAAY,EAAE,QAAQ,OAAO,MAAM,CAAC,CAAC;AAAA,EACrF,GAAG,CAAC,UAAU,YAAY,QAAQ,OAAO,KAAK,CAAC;AACjD;;;AC/EA,SAAgB,aAAAA,YAAW,OAAO,UAAAC,eAAc;AAChD;AAAA,EACE,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAuBuC,SAkB1C,UAlB0C,KAuJpC,YAvJoC;AALvC,SAAS,mBAAmB,EAAE,KAAK,GAAwC;AAChF,MAAI,CAAC,KAAK,OAAQ,QAAO;AACzB,SACE,oBAAC,UACE,eAAK,IAAI,CAAC,QAAQ;AACjB,UAAM,QAAQ,IAAI,MAAM,IAAI,CAAC,GAAG,MAAM,oBAAC,UAAa,QAAQ,EAAE,QAAQ,WAAW,EAAE,WAAW,aAAa,EAAE,eAA5D,CAAyE,CAAE;AAC5H,WAAO,IAAI,SAAS,WAClB,oBAAC,oBAA4B,IAAI,IAAI,IAAK,GAAI,IAAI,OAC/C,mBADkB,IAAI,EAEzB,IAEA,oBAAC,oBAA4B,IAAI,IAAI,IAAK,GAAI,IAAI,OAC/C,mBADkB,IAAI,EAEzB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAGO,SAAS,iBAAiB,EAAE,MAAM,GAA2C;AAClF,SACE,gCACG,gBAAM;AAAA,IAAI,CAAC,SACV,KAAK,SAAS,UACZ,oBAAC,OAAgB,kBAAgB,KAAK,IAAI,WAAW,KAAK,WAAW,SAAS,KAAK,UAAU,IAAI,KAAK,UAAU,QAC9G,8BAAC,oBAAiB,OAAO,KAAK,UAAU,KADlC,KAAK,EAEb,IAEA;AAAA,MAAC;AAAA;AAAA,QAEC,kBAAgB,KAAK;AAAA,QACrB,WAAW,KAAK;AAAA,QAChB,GAAG,KAAK;AAAA,QACR,MAAM,KAAK;AAAA,QACX,UAAU,KAAK;AAAA,QACf,QAAQ,KAAK;AAAA,QACb,aAAa,KAAK,WAAW,SAAS,SAAY,KAAK;AAAA,QACvD,eAAe,KAAK;AAAA,QACpB,gBAAgB,KAAK;AAAA,QACrB,iBAAiB,KAAK;AAAA,QACtB,SAAS,KAAK,UAAU,IAAI,KAAK,UAAU;AAAA;AAAA,MAXtC,KAAK;AAAA,IAYZ;AAAA,EAEJ,GACF;AAEJ;AAMO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAC5B,GAAsB;AACpB,QAAM,QAAQ,qBAAqB,UAAU;AAC7C,QAAM,SAASC,QAA6B,IAAI;AAChD,QAAM,SAASA,QAAO,CAAC,UAAU;AACjC,QAAM,MAAM,MAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,QAAM,QAAQ,yBAAyB,OAAO,EAAE,UAAU,KAAK,GAAG,IAAI,CAAC;AACvE,QAAM,UAAU,2BAA2B,KAAK;AAEhD,EAAAC,WAAU,MAAM;AACd,UAAM,KAAK,OAAO;AAClB,QAAI,CAAC,MAAM,OAAO,QAAS;AAC3B,UAAM,MAAM,MAAM;AAChB,YAAM,OAAO,GAAG,sBAAsB;AACtC,UAAI,OAAO,WAAW,KAAK,SAAS,KAAK,KAAK,UAAU,EAAG;AAC3D,aAAO,UAAU;AACjB,iBAAW,UAAU,EAAE,OAAO,KAAK,OAAO,QAAQ,KAAK,OAAO,CAAC;AAAA,IACjE;AACA,QAAI;AACJ,QAAI,OAAO,WAAW,OAAO,mBAAmB,YAAa;AAC7D,UAAM,WAAW,IAAI,eAAe,GAAG;AACvC,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,CAAC;AAGf,EAAAA,WAAU,MAAM;AACd,UAAM,KAAK,OAAO;AAClB,QAAI,CAAC,GAAI;AACT,UAAM,UAAU,CAAC,MAAkB;AACjC,QAAE,eAAe;AACjB,iBAAW,MAAM,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,GAAG,EAAE,OAAO,GAAG,qBAAqB,CAAC,CAAC;AAAA,IAClF;AACA,OAAG,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACxD,WAAO,MAAM,GAAG,oBAAoB,SAAS,OAAO;AAAA,EACtD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,QAAQ,CAAC,MAA4C;AACzD,UAAM,OAAO,OAAO,SAAS,sBAAsB;AACnD,WAAO,EAAE,GAAG,EAAE,WAAW,MAAM,QAAQ,IAAI,GAAG,EAAE,WAAW,MAAM,OAAO,GAAG;AAAA,EAC7E;AAEA,QAAM,YAAY,CAAC,SAAmC,CAAC,UAAgC;AACrF,UAAM,SAAU,SAAS,iBAAiB,QAAQ,MAAM,cAAc;AACtE,UAAM,OAAO,QAAQ;AACrB,QAAI,SAAS,SAAS;AACpB,YAAMC,QAAO,MAAM,QAAQ,YAAY,KAAK;AAC5C,YAAM,SAASA,QAAO,WAAW,MAAMA,KAAI,IAAI,WAAW,MAAM;AAChE,UAAI,OAAO,OAAQ,OAAM,iBAAiB;AAC1C;AAAA,IACF;AACA,UAAM,OAAO,SAAS,QAAQ,WAAW,IAAI,IAAI,WAAW,KAAK;AACjE,QAAI,QAAQ,MAAM;AAChB,WAAK,QAAQ,cAAc,IAAI;AAC/B,YAAM,iBAAiB;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,KAAK,MAAM;AACjB,QAAM,KAAK,MAAM;AACjB,QAAM,MAAM,QAAQ;AAEpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,aAAW,MAAM;AAAA,MACjB;AAAA,MACA,OAAO,EAAE,SAAS,SAAS,OAAO,QAAQ,QAAQ,QAAQ,SAAS,QAAQ,aAAa,QAAQ,YAAY,QAAQ,QAAQ,MAAM,QAAQ,GAAG,MAAM;AAAA,MACnJ,eAAe,CAAC,MAAM;AACpB,eAAO,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;AAC7C,QAAC,EAAE,cAA0B,oBAAoB,EAAE,SAAS;AAC5D,mBAAW,YAAY,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC;AAAA,MAC1D;AAAA,MACA,eAAe,CAAC,MAAM,WAAW,YAAY,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC;AAAA,MAC9E,aAAa,CAAC,MAAM;AAClB,QAAC,EAAE,cAA0B,wBAAwB,EAAE,SAAS;AAChE,mBAAW,UAAU,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC;AAAA,MACxD;AAAA,MACA,iBAAiB,MAAM,WAAW,WAAW;AAAA,MAC7C,gBAAgB,MAAM,WAAW,aAAa;AAAA,MAC9C,eAAe,CAAC,MAAM,WAAW,YAAY,MAAM,CAAC,CAAC;AAAA,MACrD,WAAW,CAAC,MAAM;AAChB,YAAI,mBAAmB,EAAE,MAAM,EAAG;AAClC,YAAI,WAAW,QAAQ,iBAAiB,CAAC,CAAC,EAAG,GAAE,eAAe;AAAA,MAChE;AAAA,MACA,SAAS,CAAC,MAAM,WAAW,MAAM,iBAAiB,CAAC,CAAC;AAAA,MACpD,QAAQ,UAAU,MAAM;AAAA,MACxB,OAAO,UAAU,KAAK;AAAA,MACtB,SAAS,UAAU,OAAO;AAAA,MAEzB;AAAA,wBACC,oBAAC,UACC,+BAAC,aAAQ,IAAI,KAAK,GAAG,YAAY,OAAO,IAAI,QAAQ,IAAI,cAAa,kBACnE;AAAA,8BAAC,UAAK,OAAO,IAAI,QAAQ,IAAI,MAAK,WAAU;AAAA,UAC5C,oBAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAK,WAAU;AAAA,UAC1C,oBAAC,UAAK,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAK,WAAU;AAAA,WACxD,GACF;AAAA,QAEF,oBAAC,sBAAmB,MAAM,MAAM,MAAM;AAAA,QACtC;AAAA,UAAC;AAAA;AAAA,YACC,wBAAqB;AAAA,YACrB,GAAG,QAAQ,SAAS;AAAA,YACpB,GAAG,QAAQ,SAAS;AAAA,YACpB,OAAO,QAAQ,SAAS;AAAA,YACxB,QAAQ,QAAQ,SAAS;AAAA,YACzB,MAAM,MAAM,eAAe,eAAe,UAAU,GAAG,cAAc;AAAA,YACrE,QAAO;AAAA;AAAA,QACT;AAAA,QACA,oBAAC,OAAE,qBAAkB,IAAG,WAAW,MAAM,WACvC,8BAAC,oBAAiB,OAAO,MAAM,OAAO,GACxC;AAAA,QACA,qBAAC,OAAE,uBAAoB,IAAG,eAAc,QAAO,MAAK,QACjD;AAAA,kBAAQ,SAAS,IAAI,CAAC,MACrB,oBAAC,UAAgB,GAAG,EAAE,GAAG,QAAQ,aAAa,aAAa,EAAE,WAAW,IAAI,KAAK,SAAS,EAAE,WAAW,IAAI,OAAhG,EAAE,EAAmG,CACjH;AAAA,UACA,QAAQ,cAAc,oBAAC,UAAK,GAAG,QAAQ,YAAY,QAAQ,aAAa,iBAAgB,OAAM;AAAA,UAC9F,OACC,qBAAC,OAAE,yBAAsB,IAAG,WAAW,IAAI,aAAa,QACtD;AAAA,gCAAC,UAAK,GAAG,IAAI,GAAG,GAAG,IAAI,GAAG,OAAO,IAAI,OAAO,QAAQ,IAAI,QAAQ,QAAQ,aAAa;AAAA,YACrF,oBAAC,UAAK,IAAI,IAAI,IAAI,IAAI,QAAQ,GAAG,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,QAAQ,GAAG,IAAI,IAAI,IAAI,IAAI,QAAQ,aAAa;AAAA,YAC3G,IAAI,QAAQ;AAAA,cAAI,CAAC,MAChB,EAAE,WAAW,WACX,oBAAC,YAAsB,eAAa,EAAE,QAAQ,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,GAAG,KAAK,IAAI,GAAG,MAAM,MAAM,YAAY,QAAQ,eAAlG,EAAE,MAA6G,IAE5H,oBAAC,UAAoB,eAAa,EAAE,QAAQ,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,EAAE,IAAI,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI,MAAM,MAAM,YAAY,QAAQ,eAA1H,EAAE,MAAqI;AAAA,YAEtJ;AAAA,aACF;AAAA,UAED,QAAQ,QAAQ,IAAI,CAAC,MACpB,qBAAC,OAA0E,sBAAoB,EAAE,IAAI,QACnG;AAAA,gCAAC,UAAK,IAAI,EAAE,SAAS,IAAI,EAAE,SAAS,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,aAAa;AAAA,YAC3E,oBAAC,YAAO,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,GAAG,MAAM,gBAAgB,EAAE,UAAU,IAAI,IAAI,MAAM,MAAM,YAAY,QAAQ,aAAa;AAAA,eAF9G,GAAG,EAAE,IAAI,MAAM,IAAI,EAAE,IAAI,OAAO,IAAI,EAAE,IAAI,KAAK,IAAI,EAAE,IAAI,MAAM,EAGvE,CACD;AAAA,UACA,QAAQ,QAAQ,IAAI,CAAC,MAAM;AAC1B,kBAAM,OAAO,MAAM,EAAE,UAAU,IAAI;AACnC,kBAAM,OAAO,EAAE,WAAW,cAAc,MAAM;AAC9C,kBAAM,MAAM,GAAG,EAAE,IAAI,MAAM,IAAI,EAAE,IAAI,OAAO,IAAI,EAAE,IAAI,KAAK;AAC3D,mBAAO,EAAE,SAAS,WAChB,oBAAC,UAAe,sBAAoB,EAAE,IAAI,OAAO,GAAG,EAAE,IAAI,OAAO,GAAG,GAAG,EAAE,IAAI,OAAO,GAAG,OAAO,MAAM,QAAQ,MAAM,MAAY,QAAQ,eAA3H,GAAwI,IAEnJ,oBAAC,YAAiB,sBAAoB,EAAE,IAAI,OAAO,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,GAAG,OAAO,GAAG,MAAY,QAAQ,eAAzF,GAAsG;AAAA,UAEvH,CAAC;AAAA,UACA,MAAM,SAAS,SAAS,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,KACxE,oBAAC,YAAO,IAAI,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,MAAM,EAAG,GAAG,IAAI,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,MAAM,EAAG,GAAG,GAAG,IAAI,QAAQ,aAAa;AAAA,UAEjI,QAAQ,WACP;AAAA,YAAC;AAAA;AAAA,cACC,uBAAoB;AAAA,cACpB,GAAG,QAAQ,QAAQ;AAAA,cACnB,GAAG,QAAQ,QAAQ;AAAA,cACnB,OAAO,QAAQ,QAAQ;AAAA,cACvB,QAAQ,QAAQ,QAAQ;AAAA,cACxB,MAAM,MAAM;AAAA,cACZ,QAAQ;AAAA,cACR,iBAAgB;AAAA;AAAA,UAClB;AAAA,UAED,QAAQ,UACP,oBAAC,UAAK,sBAAmB,IAAG,GAAG,GAAG,GAAE,QAAO,IAAI,IAAI,UAAU,IAAI,MAAM,aAAa,OAAO,EAAE,YAAY,wBAAwB,GAC9H,kBAAQ,QACX;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;ACrQA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAuBH,SA6BI,YAAAC,WA7BJ,OAAAC,MAuBI,QAAAC,aAvBJ;AApBJ,IAAM,cACJ;AAcK,SAAS,cAAc,EAAE,YAAY,QAAQ,cAAc,cAAc,MAAM,cAAc,MAAM,UAAU,GAAuB;AACzI,QAAM,QAAQ,qBAAqB,UAAU;AAC7C,QAAM,QAAQ,MAAM,UAAU;AAC9B,QAAM,gBAAgB,MAAM,UAAU,KAAK,CAAC,OAAO,WAAW,QAAQ,EAAE,GAAG,SAAS,OAAO;AAC3F,QAAM,MAAM,CAAC,OAAe,OAAe,KAAoB,WAAW,UACxE,gBAAAD,KAAC,YAAmB,MAAK,UAAS,WAAW,aAAa,OAAc,cAAY,OAAO,UAAoB,SAAS,MAAM,KAAK,IAAI,GACpI,mBADU,KAEb;AAEF,SACE,gBAAAC,MAAC,SAAI,MAAK,WAAU,cAAW,gBAAe,WAAW,qCAAqC,aAAa,EAAE,IAC3G;AAAA,oBAAAD,KAAC,SAAI,WAAU,2BAA0B,MAAK,SAAQ,cAAW,SAC9D,gBAAM,IAAI,CAAC,SACV,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,oBAAkB;AAAA,QAClB,WAAW;AAAA,QACX,gBAAc,MAAM,SAAS;AAAA,QAC7B,OAAO,GAAG,gBAAgB,IAAI,CAAC,KAAK,sBAAsB,IAAI,CAAC;AAAA,QAC/D,cAAY,gBAAgB,IAAI;AAAA,QAChC,SAAS,MAAM,WAAW,QAAQ,IAAI;AAAA,QAErC,6BAAmB,IAAI;AAAA;AAAA,MATnB;AAAA,IAUP,CACD,GACH;AAAA,IACC,eACC,gBAAAC,MAAC,SAAI,WAAU,gCAA+B,MAAK,SAAQ,cAAW,WACnE;AAAA,UAAI,UAAK,MAAM,UAAU,QAAQ,MAAM,SAAS,KAAK,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,MAAM,OAAO;AAAA,MACpG,IAAI,UAAK,MAAM,UAAU,QAAQ,MAAM,SAAS,KAAK,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,MAAM,OAAO;AAAA,OACvG;AAAA,IAED,eACC,gBAAAA,MAAAF,WAAA,EACE;AAAA,sBAAAE,MAAC,SAAI,WAAU,gCAA+B,MAAK,SAAQ,cAAW,WACnE;AAAA,YAAI,UAAK,SAAS,MAAM,WAAW,UAAU,OAAO,GAAG,QAAQ,CAAC;AAAA,QAChE,IAAI,UAAK,YAAY,MAAM,WAAW,UAAU,UAAU,GAAG,QAAQ,CAAC;AAAA,QACtE,IAAI,UAAK,aAAa,MAAM,WAAW,UAAU,WAAW,GAAG,QAAQ,CAAC;AAAA,QACxE,IAAI,UAAK,WAAW,MAAM,WAAW,UAAU,SAAS,GAAG,QAAQ,CAAC;AAAA,QACpE,IAAI,KAAK,SAAS,MAAM,WAAW,MAAM,GAAG,QAAQ,CAAC;AAAA,QACrD,IAAI,KAAK,WAAW,MAAM,WAAW,QAAQ,GAAG,CAAC,aAAa;AAAA,SACjE;AAAA,MACA,gBAAAA,MAAC,SAAI,WAAU,gCAA+B,MAAK,SAAQ,cAAW,WACnE;AAAA,YAAI,UAAK,kBAAkB,MAAM,WAAW,QAAQ,OAAO,GAAG,QAAQ,CAAC;AAAA,QACvE,IAAI,UAAK,gBAAgB,MAAM,WAAW,QAAQ,MAAM,GAAG,QAAQ,CAAC;AAAA,QACpE,IAAI,UAAK,cAAc,MAAM,WAAW,MAAM,MAAM,GAAG,QAAQ,CAAC;AAAA,QAChE,IAAI,UAAK,gBAAgB,MAAM,WAAW,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAAA,QACpE,IAAI,UAAK,eAAe,MAAM,WAAW,MAAM,OAAO,GAAG,QAAQ,CAAC;AAAA,QAClE,IAAI,UAAK,aAAa,MAAM,WAAW,MAAM,KAAK,GAAG,QAAQ,CAAC;AAAA,QAC9D,IAAI,UAAK,gBAAgB,MAAM,WAAW,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAAA,QACpE,IAAI,UAAK,gBAAgB,MAAM,WAAW,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAAA,SACvE;AAAA,OACF;AAAA,KAEJ;AAEJ;AAWO,SAAS,iBAAiB,EAAE,YAAY,UAAU,GAA0B;AACjF,QAAM,QAAQ,qBAAqB,UAAU;AAC7C,QAAM,QAAQ,wBAAwB,KAAK;AAC3C,QAAM,SAAS,SAAS,EAAE,MAAM,MAAM,SAAS,QAAQ,MAAM,QAAQ,MAAM,SAAS,UAAU,MAAM,aAAa,MAAM,SAAS,eAAe,GAAG,SAAS,EAAE;AAC7J,QAAM,QAAQ,CAAC,UAAmC;AAChD,QAAI,MAAO,YAAW,SAAS,KAAK;AAAA,QAC/B,YAAW,YAAY,KAAK;AAAA,EACnC;AACA,QAAM,WAAW,CAAC,KAAwB,UAAkB;AAC1D,UAAM,QAAQ,OAAO,GAAG;AACxB,UAAM,MAAM,iBAAiB,KAAK;AAClC,UAAM,KAAK,UAAU,QAAQ,UAAU;AACvC,WACE,gBAAAA,MAAC,SAAI,WAAU,2BAA0B,qBAAmB,KAC1D;AAAA,sBAAAA,MAAC,WAAM,WAAU,0DACf;AAAA,wBAAAD,KAAC,WAAM,MAAK,YAAW,SAAS,IAAI,cAAY,GAAG,KAAK,OAAO,UAAU,CAAC,MAAM,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,OAAO,UAAW,OAAO,YAAa,KAAK,CAAC,GAAG;AAAA,QAC/I;AAAA,SACH;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,GAAG,KAAK;AAAA,UACpB,WAAU;AAAA,UACV,UAAU,CAAC;AAAA,UACX,OAAO,OAAO;AAAA,UACd,UAAU,CAAC,MAAM,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,OAAO,MAAM,CAAC;AAAA;AAAA,MAClD;AAAA,MACC,MAAM,CAAC,OAAO,gBAAAA,KAAC,UAAK,WAAU,8CAA8C,iBAAO,UAAU,WAAW,QAAQ,YAAW;AAAA,MAC3H,OAAO,MAAM,GAAG,KAAK,gBAAAA,KAAC,UAAK,WAAU,qCAAoC,mBAAK;AAAA,OACjF;AAAA,EAEJ;AACA,SACE,gBAAAC,MAAC,SAAI,WAAW,aAAa,aAAa,EAAE,IAAI,cAAY,QAAQ,oBAAoB,mBACtF;AAAA,oBAAAD,KAAC,OAAE,WAAU,yEAAyE,kBAAQ,cAAc,cAAa;AAAA,IACxH,SAAS,QAAQ,MAAM;AAAA,IACvB,SAAS,UAAU,QAAQ;AAAA,IAC5B,gBAAAC,MAAC,WAAM,WAAU,mDACf;AAAA,sBAAAD,KAAC,UAAK,WAAU,QAAO,mBAAK;AAAA,MAC5B,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,cAAW;AAAA,UACX,WAAU;AAAA,UACV,OAAO,OAAO;AAAA,UACd,UAAU,CAAC,MAAM;AACf,kBAAM,IAAI,WAAW,EAAE,OAAO,KAAK;AACnC,gBAAI,OAAO,SAAS,CAAC,KAAK,KAAK,EAAG,OAAM,EAAE,aAAa,EAAE,CAAC;AAAA,UAC5D;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACC,SACC,gBAAAC,MAAC,WAAM,WAAU,mDACf;AAAA,sBAAAD,KAAC,UAAK,WAAU,QAAO,qBAAO;AAAA,MAC9B,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,cAAW;AAAA,UACX,WAAU;AAAA,UACV,OAAO,OAAO;AAAA,UACd,UAAU,CAAC,MAAM,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,KAAK,EAAE,CAAC;AAAA;AAAA,MAChE;AAAA,OACF;AAAA,KAEJ;AAEJ;;;AC/IM,gBAAAE,MACA,QAAAC,aADA;AAHC,SAAS,aAAa,EAAE,YAAY,OAAO,iBAAiB,MAAM,SAAS,KAAK,aAAa,UAAU,GAAsB;AAClI,SACE,gBAAAA,MAAC,SAAI,WAAW,uBAAuB,aAAa,EAAE,IAAI,sBAAmB,IAC3E;AAAA,oBAAAD,KAAC,iBAAc,YAAwB,OAAc;AAAA,IACrD,gBAAAC,MAAC,SAAI,WAAU,2CACb;AAAA,sBAAAD,KAAC,SAAI,WAAU,6FAA4F,OAAO,EAAE,OAAO,GACzH,0BAAAA,KAAC,gBAAa,YAAyB,GAAG,aAAa,GACzD;AAAA,MACC,kBAAkB,gBAAAA,KAAC,oBAAiB,YAAwB,WAAU,+DAA8D;AAAA,OACvI;AAAA,KACF;AAEJ;","names":["useEffect","useRef","useRef","useEffect","text","Fragment","jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-react",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "description": "React bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -58,6 +58,11 @@
       "types": "./dist/parameters/index.d.ts",
       "import": "./dist/parameters/index.js",
       "require": "./dist/parameters/index.cjs"
+    },
+    "./vector": {
+      "types": "./dist/vector/index.d.ts",
+      "import": "./dist/vector/index.js",
+      "require": "./dist/vector/index.cjs"
     }
   },
   "typesVersions": {
@@ -85,6 +90,9 @@
       ],
       "parameters": [
         "./dist/parameters/index.d.ts"
+      ],
+      "vector": [
+        "./dist/vector/index.d.ts"
       ]
     }
   },
@@ -99,7 +107,7 @@
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.8",
-    "@pixerate/editor": ">=0.31.0 <1.0.0-0",
+    "@pixerate/editor": ">=0.33.0 <1.0.0-0",
     "@tiptap/core": "^2.11.5",
     "@tiptap/pm": "^2.11.5",
     "@tiptap/react": "^2.11.5",
@@ -126,7 +134,7 @@
     "tsup": "^8.4.0",
     "typescript": "^5.7.3",
     "vitest": "^4.1.11",
-    "@pixerate/editor": "0.31.0"
+    "@pixerate/editor": "0.33.0"
   },
   "scripts": {
     "build": "tsup",