@pixerate/editor-react 0.83.0 → 0.85.0

package/dist/vector/index.js

@@ -649,6 +649,11 @@ function VectorCanvas({
             sh.lines.map((d, i) => /* @__PURE__ */ jsx2("path", { d, stroke: accentColor, strokeWidth: 1, opacity: 0.7 }, i)),
             sh.points.map((p) => /* @__PURE__ */ jsx2("circle", { "data-vector-shading-point": p.index, "data-selected": p.selected || void 0, cx: p.x, cy: p.y, r: p.selected ? 6 : 4.5, fill: p.color, stroke: p.selected ? accentColor : "#ffffff", strokeWidth: p.selected ? 2 : 1.5 }, p.index))
           ] }, `shading:${sh.nodeId}`)),
+          overlay.perspective && /* @__PURE__ */ jsxs2("g", { "data-vector-perspective-grid": "", fill: "none", pointerEvents: "none", children: [
+            overlay.perspective.planes.map((pl) => /* @__PURE__ */ jsx2("path", { "data-vector-perspective-plane": pl.plane, "data-active": pl.active || void 0, d: pl.d, stroke: pl.active ? accentColor : guideColor, strokeWidth: pl.active ? 1 : 0.75, opacity: pl.active ? 0.55 : 0.25 }, pl.plane)),
+            overlay.perspective.vanishingPoints.map((v, i) => /* @__PURE__ */ jsx2("circle", { "data-vector-vanishing-point": i, cx: v.x, cy: v.y, r: 4, stroke: accentColor, strokeWidth: 1.5 }, i)),
+            /* @__PURE__ */ jsx2("circle", { "data-vector-perspective-origin": "", cx: overlay.perspective.origin.x, cy: overlay.perspective.origin.y, r: 3, fill: accentColor })
+          ] }),
           overlay.symmetry.map((sy) => /* @__PURE__ */ jsx2("g", { "data-vector-symmetry-axes": sy.nodeId, stroke: accentColor, strokeDasharray: sy.drawing ? void 0 : "6 4", opacity: sy.drawing ? 0.9 : 0.6, children: sy.lines.map((l, i) => /* @__PURE__ */ jsx2("line", { x1: l.x1, y1: l.y1, x2: l.x2, y2: l.y2 }, i)) }, `sym:${sy.nodeId}`)),
           overlay.trackingPoints.map((t, i) => /* @__PURE__ */ jsx2("path", { "data-vector-tracking-point": "", d: `M${t.x - 5} ${t.y}H${t.x + 5}M${t.x} ${t.y - 5}V${t.y + 5}`, stroke: guideColor, strokeWidth: 1.5 }, `track:${i}`)),
           overlay.typedEntry && /* @__PURE__ */ jsxs2("g", { "data-vector-typed-entry": "", transform: `translate(${overlay.typedEntry.x + 14} ${overlay.typedEntry.y + 18})`, children: [
@@ -785,7 +790,7 @@ function VectorCanvas({
 }
 
 // src/vector/VectorToolbar.tsx
-import React9 from "react";
+import React10 from "react";
 import {
   VECTOR_TOOLS,
   VECTOR_TOOL_GLYPHS,
@@ -1881,6 +1886,35 @@ function VectorFramePanel({ controller, className }) {
   ] });
 }
 
+// src/vector/VectorPagesPanel.tsx
+import { isVectorFrame, vectorMasterPages, vectorPages } from "@pixerate/editor/vector";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var buttonClass9 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-[current=true]:bg-primary aria-[current=true]:text-primary-foreground";
+var selectClass7 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+function VectorPagesPanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const pages = vectorPages(state.document);
+  const masters = vectorMasterPages(state.document);
+  const selected = state.selection.map((id) => state.document.nodes.find((n) => n.id === id)).find((n) => isVectorFrame(n));
+  const page = selected && !selected.frame.master ? selected : null;
+  return /* @__PURE__ */ jsxs11("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-pages-panel": "", "aria-label": "Pages", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx11("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Pages" }),
+      pages.map((p, i) => /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass9, "aria-current": state.selection.includes(p.id), "data-vector-page": p.id, title: `Go to ${p.name ?? `page ${i + 1}`}`, onClick: () => controller.goToPage(p.id), children: i + 1 }, p.id)),
+      masters.map((m) => /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass9, "aria-current": state.selection.includes(m.id), "data-vector-master-page": m.id, title: `Go to master page ${m.name ?? ""}`, onClick: () => controller.goToPage(m.id), children: m.name ?? "Master" }, m.id)),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass9, "data-vector-pages-action": "add", title: "Add a page after the last", onClick: () => controller.addPage(), children: "+ Page" }),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass9, "data-vector-pages-action": "master", title: "Add a master page used by every page (headers, footers, {page} numbers)", onClick: () => controller.addMasterPage({ assignTo: "all" }), children: "+ Master" })
+    ] }),
+    page && masters.length > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx11("span", { className: "w-16" }),
+      /* @__PURE__ */ jsxs11("select", { "aria-label": "Master page", className: selectClass7, value: page.frame.masterId ?? "", onChange: (e) => controller.setPageMaster(e.target.value || null, { ids: [page.id] }), children: [
+        /* @__PURE__ */ jsx11("option", { value: "", children: "No master" }),
+        masters.map((m) => /* @__PURE__ */ jsx11("option", { value: m.id, children: m.name ?? "Master" }, m.id))
+      ] })
+    ] })
+  ] });
+}
+
 // src/vector/VectorConnectorPanel.tsx
 import {
   VECTOR_CONNECTOR_ROUTES,
@@ -1889,36 +1923,36 @@ import {
   VECTOR_CONNECTOR_SIDE_LABELS,
   getVectorConnectorPanel
 } from "@pixerate/editor/vector";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var buttonClass9 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
-var selectClass7 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var buttonClass10 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
+var selectClass8 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass5 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
 function VectorConnectorPanel({ controller, className }) {
   const state = useVectorEditorState(controller);
   const panel = getVectorConnectorPanel(state);
   if (!panel) return null;
   const ids = [panel.id];
-  const end = (key, label, e) => /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", "data-vector-connector-end": key, children: [
-    /* @__PURE__ */ jsx11("span", { className: "w-16 text-xs text-foreground", children: label }),
-    e ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
-      /* @__PURE__ */ jsx11(
+  const end = (key, label, e) => /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", "data-vector-connector-end": key, children: [
+    /* @__PURE__ */ jsx12("span", { className: "w-16 text-xs text-foreground", children: label }),
+    e ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
+      /* @__PURE__ */ jsx12(
         "select",
         {
           "aria-label": `${label} side`,
-          className: selectClass7,
+          className: selectClass8,
           value: e.side ?? "auto",
           onChange: (ev) => controller.setConnector({ [key]: { nodeId: e.nodeId, side: ev.target.value } }, { ids }),
-          children: VECTOR_CONNECTOR_SIDES.map((s) => /* @__PURE__ */ jsx11("option", { value: s, children: VECTOR_CONNECTOR_SIDE_LABELS[s] }, s))
+          children: VECTOR_CONNECTOR_SIDES.map((s) => /* @__PURE__ */ jsx12("option", { value: s, children: VECTOR_CONNECTOR_SIDE_LABELS[s] }, s))
         }
       ),
-      /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass9, title: "Unglue: the end stays where it is", "aria-label": `Unglue ${label.toLowerCase()}`, onClick: () => controller.setConnector({ [key]: null }, { ids }), children: "Unglue" })
-    ] }) : /* @__PURE__ */ jsx11("span", { className: "text-[11px] text-muted-foreground", children: "Free" })
+      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass10, title: "Unglue: the end stays where it is", "aria-label": `Unglue ${label.toLowerCase()}`, onClick: () => controller.setConnector({ [key]: null }, { ids }), children: "Unglue" })
+    ] }) : /* @__PURE__ */ jsx12("span", { className: "text-[11px] text-muted-foreground", children: "Free" })
   ] });
-  return /* @__PURE__ */ jsxs11("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-connector-panel": panel.id, "aria-label": "Connector", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx11("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Connector" }),
-      /* @__PURE__ */ jsx11("select", { "aria-label": "Connector route", className: selectClass7, value: panel.route, onChange: (e) => controller.setConnector({ route: e.target.value }, { ids }), children: VECTOR_CONNECTOR_ROUTES.map((r) => /* @__PURE__ */ jsx11("option", { value: r, children: VECTOR_CONNECTOR_ROUTE_LABELS[r] }, r)) }),
-      panel.route === "elbow" && /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs12("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-connector-panel": panel.id, "aria-label": "Connector", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx12("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Connector" }),
+      /* @__PURE__ */ jsx12("select", { "aria-label": "Connector route", className: selectClass8, value: panel.route, onChange: (e) => controller.setConnector({ route: e.target.value }, { ids }), children: VECTOR_CONNECTOR_ROUTES.map((r) => /* @__PURE__ */ jsx12("option", { value: r, children: VECTOR_CONNECTOR_ROUTE_LABELS[r] }, r)) }),
+      panel.route === "elbow" && /* @__PURE__ */ jsx12(
         "input",
         {
           type: "number",
@@ -1943,8 +1977,8 @@ function VectorConnectorPanel({ controller, className }) {
 // src/vector/VectorShadingPanel.tsx
 import { useState as useState5 } from "react";
 import { isVectorFreeformGradient, isVectorMeshGradient, vectorPaintToHex as vectorPaintToHex4 } from "@pixerate/editor/vector";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var buttonClass10 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var buttonClass11 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
 var numberClass6 = "h-7 w-12 rounded border border-border bg-background px-1.5 text-xs";
 function VectorShadingPanel({ controller, className }) {
   const state = useVectorEditorState(controller);
@@ -1964,29 +1998,29 @@ function VectorShadingPanel({ controller, className }) {
     if (mesh) controller.setMeshPoint(path.id, sel.index, patch, merge ? { merge } : {});
     else controller.setFreeformPoint(path.id, sel.index, patch, merge ? { merge } : {});
   };
-  return /* @__PURE__ */ jsxs12("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-shading-panel": path.id, "aria-label": "Mesh and freeform gradient", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsx12("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Shading" }),
-      /* @__PURE__ */ jsx12("input", { type: "number", min: 1, max: 32, "aria-label": "Mesh rows", title: "Mesh rows", className: numberClass6, value: rows, onChange: (e) => setRows(Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 1))) }),
-      /* @__PURE__ */ jsx12("span", { className: "text-xs text-muted-foreground", children: "\xD7" }),
-      /* @__PURE__ */ jsx12("input", { type: "number", min: 1, max: 32, "aria-label": "Mesh columns", title: "Mesh columns", className: numberClass6, value: columns, onChange: (e) => setColumns(Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 1))) }),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass10, "data-vector-shading-action": "mesh", title: "Create Gradient Mesh: smooth patches whose points blend colours (edit them with the Gradient tool)", onClick: () => controller.setMeshGradient({ rows, columns }, { ids: [path.id] }), children: "Mesh" }),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass10, "data-vector-shading-action": "freeform", title: "Freeform Gradient: colour points blended across the shape (click inside with the Gradient tool to add one)", onClick: () => controller.setFreeformGradient({}, { ids: [path.id] }), children: "Freeform" })
+  return /* @__PURE__ */ jsxs13("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-shading-panel": path.id, "aria-label": "Mesh and freeform gradient", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx13("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Shading" }),
+      /* @__PURE__ */ jsx13("input", { type: "number", min: 1, max: 32, "aria-label": "Mesh rows", title: "Mesh rows", className: numberClass6, value: rows, onChange: (e) => setRows(Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 1))) }),
+      /* @__PURE__ */ jsx13("span", { className: "text-xs text-muted-foreground", children: "\xD7" }),
+      /* @__PURE__ */ jsx13("input", { type: "number", min: 1, max: 32, "aria-label": "Mesh columns", title: "Mesh columns", className: numberClass6, value: columns, onChange: (e) => setColumns(Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 1))) }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass11, "data-vector-shading-action": "mesh", title: "Create Gradient Mesh: smooth patches whose points blend colours (edit them with the Gradient tool)", onClick: () => controller.setMeshGradient({ rows, columns }, { ids: [path.id] }), children: "Mesh" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass11, "data-vector-shading-action": "freeform", title: "Freeform Gradient: colour points blended across the shape (click inside with the Gradient tool to add one)", onClick: () => controller.setFreeformGradient({}, { ids: [path.id] }), children: "Freeform" })
     ] }),
-    (mesh || free) && !sel && /* @__PURE__ */ jsxs12("p", { className: "text-[11px] text-muted-foreground", children: [
+    (mesh || free) && !sel && /* @__PURE__ */ jsxs13("p", { className: "text-[11px] text-muted-foreground", children: [
       "Gradient tool (G): drag points; ",
       free ? "click inside to add one, Alt-click to remove." : "pick one to colour it."
     ] }),
-    sel && /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2", "data-vector-shading-point": sel.index, children: [
-      /* @__PURE__ */ jsxs12("span", { className: "w-16 text-xs text-foreground", children: [
+    sel && /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap items-center gap-2", "data-vector-shading-point": sel.index, children: [
+      /* @__PURE__ */ jsxs13("span", { className: "w-16 text-xs text-foreground", children: [
         "Point ",
         sel.index
       ] }),
-      /* @__PURE__ */ jsx12("input", { type: "color", "aria-label": "Point colour", className: "h-7 w-10 cursor-pointer rounded border border-border bg-background", value: vectorPaintToHex4(color ?? "#000000") ?? "#000000", onChange: (e) => edit({ color: e.target.value }, "shading-color") }),
-      /* @__PURE__ */ jsx12("input", { type: "range", min: 0, max: 1, step: 0.05, "aria-label": "Point opacity", title: "Opacity", className: "h-4 w-20 accent-primary", value: opacity, onChange: (e) => edit({ opacity: parseFloat(e.target.value) }, "shading-opacity") }),
-      free && /* @__PURE__ */ jsxs12(Fragment3, { children: [
-        /* @__PURE__ */ jsx12("input", { type: "range", min: 0, max: 1, step: 0.05, "aria-label": "Point spread", title: "Spread: pure colour round the point", className: "h-4 w-20 accent-primary", value: spread, onChange: (e) => edit({ spread: parseFloat(e.target.value) }, "shading-spread") }),
-        /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass10, "aria-label": "Remove point", onClick: () => controller.removeFreeformPoint(path.id, sel.index), children: "Remove" })
+      /* @__PURE__ */ jsx13("input", { type: "color", "aria-label": "Point colour", className: "h-7 w-10 cursor-pointer rounded border border-border bg-background", value: vectorPaintToHex4(color ?? "#000000") ?? "#000000", onChange: (e) => edit({ color: e.target.value }, "shading-color") }),
+      /* @__PURE__ */ jsx13("input", { type: "range", min: 0, max: 1, step: 0.05, "aria-label": "Point opacity", title: "Opacity", className: "h-4 w-20 accent-primary", value: opacity, onChange: (e) => edit({ opacity: parseFloat(e.target.value) }, "shading-opacity") }),
+      free && /* @__PURE__ */ jsxs13(Fragment3, { children: [
+        /* @__PURE__ */ jsx13("input", { type: "range", min: 0, max: 1, step: 0.05, "aria-label": "Point spread", title: "Spread: pure colour round the point", className: "h-4 w-20 accent-primary", value: spread, onChange: (e) => edit({ spread: parseFloat(e.target.value) }, "shading-spread") }),
+        /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass11, "aria-label": "Remove point", onClick: () => controller.removeFreeformPoint(path.id, sel.index), children: "Remove" })
       ] })
     ] })
   ] });
@@ -1994,9 +2028,9 @@ function VectorShadingPanel({ controller, className }) {
 
 // src/vector/VectorTracePanel.tsx
 import { useRef as useRef4, useState as useState6 } from "react";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
-var buttonClass11 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
-var selectClass8 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var buttonClass12 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
+var selectClass9 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass7 = "h-7 w-12 rounded border border-border bg-background px-1.5 text-xs";
 async function filePixels(file, max = 1e6) {
   const bitmap = await createImageBitmap(file);
@@ -2026,16 +2060,16 @@ function VectorTracePanel({ controller, className }) {
       setMessage("That file could not be read as an image.");
     }
   };
-  return /* @__PURE__ */ jsxs13("div", { className: `space-y-1 ${className ?? ""}`, "data-vector-trace-panel": "", "aria-label": "Image trace", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx13("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Trace" }),
-      /* @__PURE__ */ jsxs13("select", { "aria-label": "Trace mode", className: selectClass8, value: mode, onChange: (e) => setMode(e.target.value), children: [
-        /* @__PURE__ */ jsx13("option", { value: "threshold", children: "Black & white" }),
-        /* @__PURE__ */ jsx13("option", { value: "color", children: "Colours" })
+  return /* @__PURE__ */ jsxs14("div", { className: `space-y-1 ${className ?? ""}`, "data-vector-trace-panel": "", "aria-label": "Image trace", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx14("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Trace" }),
+      /* @__PURE__ */ jsxs14("select", { "aria-label": "Trace mode", className: selectClass9, value: mode, onChange: (e) => setMode(e.target.value), children: [
+        /* @__PURE__ */ jsx14("option", { value: "threshold", children: "Black & white" }),
+        /* @__PURE__ */ jsx14("option", { value: "color", children: "Colours" })
       ] }),
-      mode === "color" && /* @__PURE__ */ jsx13("input", { type: "number", min: 2, max: 32, "aria-label": "Trace colours", title: "Colours", className: numberClass7, value: colors, onChange: (e) => setColors(Math.max(2, Math.min(32, parseInt(e.target.value, 10) || 2))) }),
-      /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass11, "data-vector-trace-action": "", title: "Image Trace: pick an image to turn into paths", onClick: () => input.current?.click(), children: "Image\u2026" }),
-      /* @__PURE__ */ jsx13(
+      mode === "color" && /* @__PURE__ */ jsx14("input", { type: "number", min: 2, max: 32, "aria-label": "Trace colours", title: "Colours", className: numberClass7, value: colors, onChange: (e) => setColors(Math.max(2, Math.min(32, parseInt(e.target.value, 10) || 2))) }),
+      /* @__PURE__ */ jsx14("button", { type: "button", className: buttonClass12, "data-vector-trace-action": "", title: "Image Trace: pick an image to turn into paths", onClick: () => input.current?.click(), children: "Image\u2026" }),
+      /* @__PURE__ */ jsx14(
         "input",
         {
           ref: input,
@@ -2050,15 +2084,15 @@ function VectorTracePanel({ controller, className }) {
         }
       )
     ] }),
-    message && /* @__PURE__ */ jsx13("p", { className: "text-[11px] text-red-600", children: message })
+    message && /* @__PURE__ */ jsx14("p", { className: "text-[11px] text-red-600", children: message })
   ] });
 }
 
 // src/vector/VectorSymmetryPanel.tsx
 import { VECTOR_SYMMETRY_MODES, VECTOR_SYMMETRY_MODE_LABELS, isVectorSymmetryGroup } from "@pixerate/editor/vector";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
-var buttonClass12 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
-var selectClass9 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var buttonClass13 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var selectClass10 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass8 = "h-7 w-12 rounded border border-border bg-background px-1.5 text-xs";
 function VectorSymmetryPanel({ controller, className }) {
   const state = useVectorEditorState(controller);
@@ -2066,35 +2100,80 @@ function VectorSymmetryPanel({ controller, className }) {
   const s = group?.symmetry;
   const ids = group ? [group.id] : void 0;
   const drawing = !!group && state.symmetryTarget === group.id;
-  return /* @__PURE__ */ jsxs14("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-symmetry-panel": "", "aria-label": "Symmetry", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsx14("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Symmetry" }),
-      !group && /* @__PURE__ */ jsx14("button", { type: "button", className: buttonClass12, "data-vector-symmetry-action": "make", title: "Make Symmetry: the selection (or nothing yet) mirrored live across a vertical axis", onClick: () => controller.makeSymmetry({ mode: "vertical" }), children: "Mirror" }),
-      !group && /* @__PURE__ */ jsx14("button", { type: "button", className: buttonClass12, "data-vector-symmetry-action": "radial", title: "Make Symmetry: the selection repeated round its centre", onClick: () => controller.makeSymmetry({ mode: "radial", copies: 6 }), children: "Radial" }),
-      group && s && /* @__PURE__ */ jsxs14(Fragment4, { children: [
-        /* @__PURE__ */ jsx14("select", { "aria-label": "Symmetry mode", className: selectClass9, value: s.mode, onChange: (e) => controller.setSymmetry({ mode: e.target.value }, { ids }), children: VECTOR_SYMMETRY_MODES.map((m) => /* @__PURE__ */ jsx14("option", { value: m, children: VECTOR_SYMMETRY_MODE_LABELS[m] }, m)) }),
-        s.mode === "radial" && /* @__PURE__ */ jsxs14(Fragment4, { children: [
-          /* @__PURE__ */ jsx14("input", { type: "number", min: 2, max: 64, "aria-label": "Symmetry copies", title: "Copies round the circle", className: numberClass8, value: s.copies ?? 6, onChange: (e) => controller.setSymmetry({ copies: Math.max(2, Math.min(64, parseInt(e.target.value, 10) || 2)) }, { ids }) }),
-          /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Mirror each copy too (kaleidoscope)", children: [
-            /* @__PURE__ */ jsx14("input", { type: "checkbox", "aria-label": "Mirror copies", checked: !!s.mirror, onChange: (e) => controller.setSymmetry({ mirror: e.target.checked }, { ids }) }),
+  return /* @__PURE__ */ jsxs15("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-symmetry-panel": "", "aria-label": "Symmetry", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx15("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Symmetry" }),
+      !group && /* @__PURE__ */ jsx15("button", { type: "button", className: buttonClass13, "data-vector-symmetry-action": "make", title: "Make Symmetry: the selection (or nothing yet) mirrored live across a vertical axis", onClick: () => controller.makeSymmetry({ mode: "vertical" }), children: "Mirror" }),
+      !group && /* @__PURE__ */ jsx15("button", { type: "button", className: buttonClass13, "data-vector-symmetry-action": "radial", title: "Make Symmetry: the selection repeated round its centre", onClick: () => controller.makeSymmetry({ mode: "radial", copies: 6 }), children: "Radial" }),
+      group && s && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+        /* @__PURE__ */ jsx15("select", { "aria-label": "Symmetry mode", className: selectClass10, value: s.mode, onChange: (e) => controller.setSymmetry({ mode: e.target.value }, { ids }), children: VECTOR_SYMMETRY_MODES.map((m) => /* @__PURE__ */ jsx15("option", { value: m, children: VECTOR_SYMMETRY_MODE_LABELS[m] }, m)) }),
+        s.mode === "radial" && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+          /* @__PURE__ */ jsx15("input", { type: "number", min: 2, max: 64, "aria-label": "Symmetry copies", title: "Copies round the circle", className: numberClass8, value: s.copies ?? 6, onChange: (e) => controller.setSymmetry({ copies: Math.max(2, Math.min(64, parseInt(e.target.value, 10) || 2)) }, { ids }) }),
+          /* @__PURE__ */ jsxs15("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Mirror each copy too (kaleidoscope)", children: [
+            /* @__PURE__ */ jsx15("input", { type: "checkbox", "aria-label": "Mirror copies", checked: !!s.mirror, onChange: (e) => controller.setSymmetry({ mirror: e.target.checked }, { ids }) }),
             "Mirror"
           ] })
         ] })
       ] })
     ] }),
-    group && /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsx14("span", { className: "w-16" }),
-      /* @__PURE__ */ jsx14("button", { type: "button", className: buttonClass12, "aria-pressed": drawing, "data-vector-symmetry-action": "draw", title: "Draw inside: new pen, pencil, shape and text art goes into the group, mirrored as you draw (Escape stops)", onClick: () => drawing ? controller.exitSymmetry() : controller.enterSymmetry(group.id), children: "Draw inside" }),
-      /* @__PURE__ */ jsx14("button", { type: "button", className: buttonClass12, title: "Expand: keep the copies as real objects", onClick: () => controller.releaseSymmetry({ ids, expand: true }), children: "Expand" }),
-      /* @__PURE__ */ jsx14("button", { type: "button", className: buttonClass12, title: "Release: stop repeating (the copies go)", onClick: () => controller.releaseSymmetry({ ids }), children: "Release" })
+    group && /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx15("span", { className: "w-16" }),
+      /* @__PURE__ */ jsx15("button", { type: "button", className: buttonClass13, "aria-pressed": drawing, "data-vector-symmetry-action": "draw", title: "Draw inside: new pen, pencil, shape and text art goes into the group, mirrored as you draw (Escape stops)", onClick: () => drawing ? controller.exitSymmetry() : controller.enterSymmetry(group.id), children: "Draw inside" }),
+      /* @__PURE__ */ jsx15("button", { type: "button", className: buttonClass13, title: "Expand: keep the copies as real objects", onClick: () => controller.releaseSymmetry({ ids, expand: true }), children: "Expand" }),
+      /* @__PURE__ */ jsx15("button", { type: "button", className: buttonClass13, title: "Release: stop repeating (the copies go)", onClick: () => controller.releaseSymmetry({ ids }), children: "Release" })
+    ] })
+  ] });
+}
+
+// src/vector/VectorPerspectivePanel.tsx
+import React9 from "react";
+import { vectorPerspectivePlanes, vectorPerspectivePreset } from "@pixerate/editor/vector";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+var buttonClass14 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var selectClass11 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var PLANE_LABELS = { floor: "Floor", left: "Left wall", right: "Right wall", side: "Side wall", front: "Front" };
+function VectorPerspectivePanel({ controller, className }) {
+  const state = useVectorEditorState(controller);
+  const grid = state.document.perspective ?? null;
+  const planes = grid ? vectorPerspectivePlanes(grid) : [];
+  const [attachTo, setAttachTo] = React9.useState("");
+  const target = (state.perspectivePlane ?? attachTo) || planes[0];
+  const add = (n) => controller.setPerspective(vectorPerspectivePreset(n, state.document.width, state.document.height));
+  return /* @__PURE__ */ jsxs16("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-perspective-panel": "", "aria-label": "Perspective", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx16("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Perspective" }),
+      [1, 2, 3].map((n) => /* @__PURE__ */ jsxs16("button", { type: "button", className: buttonClass14, "aria-pressed": grid?.vanishingPoints.length === n, "data-vector-perspective-preset": n, title: `A ${n}-point perspective grid for the page`, onClick: () => add(n), children: [
+        n,
+        "-pt"
+      ] }, n))
+    ] }),
+    grid && /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx16("span", { className: "w-16" }),
+      /* @__PURE__ */ jsxs16("select", { "aria-label": "Draw on plane", title: "New rectangles, ellipses, polygons and stars are drawn on this plane", className: selectClass11, value: state.perspectivePlane ?? "", onChange: (e) => controller.setPerspectivePlane(e.target.value || null), children: [
+        /* @__PURE__ */ jsx16("option", { value: "", children: "Draw flat" }),
+        planes.map((p) => /* @__PURE__ */ jsxs16("option", { value: p, children: [
+          "Draw on ",
+          PLANE_LABELS[p].toLowerCase()
+        ] }, p))
+      ] })
+    ] }),
+    grid && /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx16("span", { className: "w-16" }),
+      !state.perspectivePlane && /* @__PURE__ */ jsx16("select", { "aria-label": "Attach to plane", className: "h-7 w-24 rounded border border-border bg-background px-1 text-xs", value: attachTo || planes[0], onChange: (e) => setAttachTo(e.target.value), children: planes.map((p) => /* @__PURE__ */ jsx16("option", { value: p, children: PLANE_LABELS[p] }, p)) }),
+      /* @__PURE__ */ jsx16("button", { type: "button", className: buttonClass14, disabled: !state.selection.length, title: "Lay the selection onto the plane (read flat from the grid's origin)", onClick: () => controller.attachToPerspective(target), children: "Attach" }),
+      /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Show the grid on the canvas", children: [
+        /* @__PURE__ */ jsx16("input", { type: "checkbox", "aria-label": "Show perspective grid", checked: grid.visible !== false, onChange: (e) => controller.setPerspective({ ...grid, visible: e.target.checked }) }),
+        "Show"
+      ] }),
+      /* @__PURE__ */ jsx16("button", { type: "button", className: buttonClass14, title: "Remove the grid (art on it stays)", onClick: () => controller.setPerspective(null), children: "Remove" })
     ] })
   ] });
 }
 
 // src/vector/VectorLensPanel.tsx
 import { VECTOR_LENS_LABELS, VECTOR_LENS_SPECS, VECTOR_LENS_TYPES } from "@pixerate/editor/vector";
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
-var selectClass10 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var selectClass12 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass9 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
 function VectorLensPanel({ controller, className }) {
   const state = useVectorEditorState(controller);
@@ -2103,26 +2182,26 @@ function VectorLensPanel({ controller, className }) {
   const lens = path.lens ?? null;
   const spec = lens ? VECTOR_LENS_SPECS[lens.type] : null;
   const ids = [path.id];
-  return /* @__PURE__ */ jsxs15("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-lens-panel": "", "aria-label": "Lens", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsx15("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Lens" }),
-      /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-lens-panel": "", "aria-label": "Lens", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx17("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Lens" }),
+      /* @__PURE__ */ jsxs17(
         "select",
         {
           "aria-label": "Lens type",
-          className: selectClass10,
+          className: selectClass12,
           value: lens?.type ?? "",
           onChange: (e) => e.target.value ? controller.setLens({ type: e.target.value }, { ids }) : controller.setLens(null, { ids }),
           children: [
-            /* @__PURE__ */ jsx15("option", { value: "", children: "None" }),
-            VECTOR_LENS_TYPES.map((t) => /* @__PURE__ */ jsx15("option", { value: t, children: VECTOR_LENS_LABELS[t] }, t))
+            /* @__PURE__ */ jsx17("option", { value: "", children: "None" }),
+            VECTOR_LENS_TYPES.map((t) => /* @__PURE__ */ jsx17("option", { value: t, children: VECTOR_LENS_LABELS[t] }, t))
           ]
         }
       )
     ] }),
-    lens && spec && /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsx15("span", { className: "w-16" }),
-      /* @__PURE__ */ jsx15(
+    lens && spec && /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx17("span", { className: "w-16" }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           type: "number",
@@ -2139,7 +2218,7 @@ function VectorLensPanel({ controller, className }) {
           }
         }
       ),
-      spec.color !== null && /* @__PURE__ */ jsx15("input", { type: "color", "aria-label": "Lens colour", title: "Lens colour", className: "h-7 w-9 rounded border border-border bg-background", value: lens.color ?? spec.color, onChange: (e) => controller.setLens({ color: e.target.value }, { ids, merge: `lens-color-${path.id}` }) })
+      spec.color !== null && /* @__PURE__ */ jsx17("input", { type: "color", "aria-label": "Lens colour", title: "Lens colour", className: "h-7 w-9 rounded border border-border bg-background", value: lens.color ?? spec.color, onChange: (e) => controller.setLens({ color: e.target.value }, { ids, merge: `lens-color-${path.id}` }) })
     ] })
   ] });
 }
@@ -2157,10 +2236,10 @@ import {
   getVectorGradientEditor,
   vectorPaintToHex as vectorPaintToHex5
 } from "@pixerate/editor/vector";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
-var selectClass11 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var selectClass13 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass10 = "h-7 w-14 rounded border border-border bg-background px-1.5 text-xs";
-var buttonClass13 = "inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var buttonClass15 = "inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
 var percent = (v) => Math.round(v * 1e3) / 10;
 function VectorGradientEditor({ controller, className }) {
   const state = useVectorEditorState(controller);
@@ -2175,23 +2254,23 @@ function VectorGradientEditor({ controller, className }) {
       controller.setStyle({ [ed.target]: vectorPaintToHex5(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
     } else controller.setGradient({ type: value });
   };
-  return /* @__PURE__ */ jsxs16("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx16("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
-      ["fill", "stroke"].map((t) => /* @__PURE__ */ jsx16("button", { type: "button", className: buttonClass13, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
-      ed.mixed && /* @__PURE__ */ jsx16("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+  return /* @__PURE__ */ jsxs18("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx18("span", { className: "w-16 text-xs text-foreground", children: "Gradient" }),
+      ["fill", "stroke"].map((t) => /* @__PURE__ */ jsx18("button", { type: "button", className: buttonClass15, "aria-pressed": ed.target === t, onClick: () => controller.setGradientTarget(t), children: t === "fill" ? "Fill" : "Stroke" }, t)),
+      ed.mixed && /* @__PURE__ */ jsx18("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx16("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
-      /* @__PURE__ */ jsxs16("select", { "aria-label": "Gradient type", className: selectClass11, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
-        /* @__PURE__ */ jsx16("option", { value: "solid", children: "Solid" }),
-        VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ jsx16("option", { value: t, children: VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+    /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx18("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
+      /* @__PURE__ */ jsxs18("select", { "aria-label": "Gradient type", className: selectClass13, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
+        /* @__PURE__ */ jsx18("option", { value: "solid", children: "Solid" }),
+        VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ jsx18("option", { value: t, children: VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
       ] }),
-      /* @__PURE__ */ jsx16("button", { type: "button", className: buttonClass13, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
+      /* @__PURE__ */ jsx18("button", { type: "button", className: buttonClass15, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
     ] }),
-    g && /* @__PURE__ */ jsxs16(Fragment5, { children: [
-      /* @__PURE__ */ jsxs16("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
-        /* @__PURE__ */ jsx16(
+    g && /* @__PURE__ */ jsxs18(Fragment5, { children: [
+      /* @__PURE__ */ jsxs18("div", { className: "relative h-8", "data-vector-gradient-ramp": "", children: [
+        /* @__PURE__ */ jsx18(
           "div",
           {
             role: "button",
@@ -2205,7 +2284,7 @@ function VectorGradientEditor({ controller, className }) {
             }
           }
         ),
-        ed.stops.map((s) => /* @__PURE__ */ jsx16(
+        ed.stops.map((s) => /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -2219,8 +2298,8 @@ function VectorGradientEditor({ controller, className }) {
           s.index
         ))
       ] }),
-      sel && /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
-        /* @__PURE__ */ jsx16(
+      sel && /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center gap-1.5", "data-vector-gradient-selected-stop": sel.index, children: [
+        /* @__PURE__ */ jsx18(
           "input",
           {
             type: "color",
@@ -2231,9 +2310,9 @@ function VectorGradientEditor({ controller, className }) {
             onBlur: end
           }
         ),
-        /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs18("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Opacity",
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx18(
             "input",
             {
               type: "number",
@@ -2250,9 +2329,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs18("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "At",
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx18(
             "input",
             {
               type: "number",
@@ -2269,9 +2348,9 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        !sel.last && /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
+        !sel.last && /* @__PURE__ */ jsxs18("label", { className: "flex items-center gap-1 text-[11px] text-muted-foreground", children: [
           "Midpoint",
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx18(
             "input",
             {
               type: "number",
@@ -2288,15 +2367,15 @@ function VectorGradientEditor({ controller, className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx16("button", { type: "button", className: buttonClass13, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
+        /* @__PURE__ */ jsx18("button", { type: "button", className: buttonClass15, "aria-label": "Delete stop", title: "Delete stop", disabled: ed.stops.length <= 2, onClick: () => controller.removeGradientStop(sel.index), children: "\u2715" })
       ] }),
-      /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx16("span", { className: "w-16", children: "Colours" }),
-        /* @__PURE__ */ jsx16("select", { "aria-label": "Gradient interpolation", className: selectClass11, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx16("option", { value: i, children: VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+      /* @__PURE__ */ jsxs18("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx18("span", { className: "w-16", children: "Colours" }),
+        /* @__PURE__ */ jsx18("select", { "aria-label": "Gradient interpolation", className: selectClass13, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ jsx18("option", { value: i, children: VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
       ] }),
-      /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx16("span", { className: "w-16", children: "Smooth" }),
-        /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs18("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx18("span", { className: "w-16", children: "Smooth" }),
+        /* @__PURE__ */ jsx18(
           "input",
           {
             type: "range",
@@ -2312,23 +2391,23 @@ function VectorGradientEditor({ controller, className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx16("span", { className: "w-16", children: "Spread" }),
-        /* @__PURE__ */ jsx16("select", { "aria-label": "Gradient spread", className: selectClass11, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ jsx16("option", { value: sp, children: VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+      /* @__PURE__ */ jsxs18("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx18("span", { className: "w-16", children: "Spread" }),
+        /* @__PURE__ */ jsx18("select", { "aria-label": "Gradient spread", className: selectClass13, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ jsx18("option", { value: sp, children: VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
       ] }),
-      ed.target === "stroke" && /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx16("span", { className: "w-16", children: "On stroke" }),
-        /* @__PURE__ */ jsx16("select", { "aria-label": "Gradient on stroke", className: selectClass11, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ jsx16("option", { value: m, children: VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+      ed.target === "stroke" && /* @__PURE__ */ jsxs18("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx18("span", { className: "w-16", children: "On stroke" }),
+        /* @__PURE__ */ jsx18("select", { "aria-label": "Gradient on stroke", className: selectClass13, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ jsx18("option", { value: m, children: VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
       ] })
     ] })
   ] });
 }
 
 // src/vector/VectorToolbar.tsx
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 var VECTOR_SNAP_TITLE = "Snap to objects";
 var modKeyLabel = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "") ? "\u2318" : "Ctrl";
-var buttonClass14 = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+var buttonClass16 = "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,
@@ -2346,16 +2425,16 @@ function VectorToolbar({
   const editing = state.editing;
   const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
   const maskSelected = state.selection.some((id) => isVectorMaskGroup(controller.getNode(id)));
-  const [live, setLive] = React9.useState(false);
+  const [live, setLive] = React10.useState(false);
   const booleanDisabled = live ? count < 1 : count < 2;
-  const act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx17("button", { type: "button", className: buttonClass14, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
-  return /* @__PURE__ */ jsxs17("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx17("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx17(
+  const act = (label, title, run, disabled = false) => /* @__PURE__ */ jsx19("button", { type: "button", className: buttonClass16, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
+  return /* @__PURE__ */ jsxs19("div", { role: "toolbar", "aria-label": "Vector tools", className: `flex flex-wrap items-center gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Tools", children: tools.map((tool) => /* @__PURE__ */ jsx19(
       "button",
       {
         type: "button",
         "data-vector-tool": tool,
-        className: buttonClass14,
+        className: buttonClass16,
         "aria-pressed": state.tool === tool,
         title: `${vectorToolLabel(tool)} (${VECTOR_TOOL_SHORTCUTS[tool]})`,
         "aria-label": vectorToolLabel(tool),
@@ -2364,17 +2443,17 @@ function VectorToolbar({
       },
       tool
     )) }),
-    showHistory && /* @__PURE__ */ jsxs17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
+    showHistory && /* @__PURE__ */ jsxs19("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "History", children: [
       act("\u21B6", state.canUndo ? `Undo ${state.undoLabel}` : "Undo", () => controller.undo(), !state.canUndo),
       act("\u21B7", state.canRedo ? `Redo ${state.redoLabel}` : "Redo", () => controller.redo(), !state.canRedo)
     ] }),
-    showSnap && /* @__PURE__ */ jsxs17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: [
-      /* @__PURE__ */ jsx17(
+    showSnap && /* @__PURE__ */ jsxs19("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Snapping", children: [
+      /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
           "data-vector-snap": "",
-          className: buttonClass14,
+          className: buttonClass16,
           "aria-pressed": state.snap.objects,
           title: `${VECTOR_SNAP_TITLE} (hold ${modKeyLabel()} to bypass)`,
           "aria-label": VECTOR_SNAP_TITLE,
@@ -2382,7 +2461,7 @@ function VectorToolbar({
           children: "Snap"
         }
       ),
-      /* @__PURE__ */ jsxs17(
+      /* @__PURE__ */ jsxs19(
         "select",
         {
           "data-vector-polar": "",
@@ -2392,8 +2471,8 @@ function VectorToolbar({
           value: String(vectorPolarIncrementOf(state.snap.angles) ?? ""),
           onChange: (e) => controller.setSnap({ angles: vectorPolarAngles(Number(e.target.value)) }),
           children: [
-            vectorPolarIncrementOf(state.snap.angles) === null && /* @__PURE__ */ jsx17("option", { value: "", children: "Custom" }),
-            [90, 45, 30, 15].map((n) => /* @__PURE__ */ jsxs17("option", { value: n, children: [
+            vectorPolarIncrementOf(state.snap.angles) === null && /* @__PURE__ */ jsx19("option", { value: "", children: "Custom" }),
+            [90, 45, 30, 15].map((n) => /* @__PURE__ */ jsxs19("option", { value: n, children: [
               n,
               "\xB0"
             ] }, n))
@@ -2401,13 +2480,13 @@ function VectorToolbar({
         }
       )
     ] }),
-    showPathEdit && /* @__PURE__ */ jsxs17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ jsx17(
+    showPathEdit && /* @__PURE__ */ jsxs19("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
+      VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
           "data-vector-path-action": a.id,
-          className: buttonClass14,
+          className: buttonClass16,
           title: a.shortcut ? `${a.title} (${modKeyLabel()}+${a.shortcut})` : a.title,
           "aria-label": a.title,
           disabled: !a.enabled(count, points),
@@ -2416,12 +2495,12 @@ function VectorToolbar({
         },
         a.id
       )),
-      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx17(
+      VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
           "data-vector-edit": t.key,
-          className: buttonClass14,
+          className: buttonClass16,
           "aria-pressed": editing[t.key],
           title: t.title,
           "aria-label": t.title,
@@ -2430,9 +2509,9 @@ function VectorToolbar({
         },
         t.key
       )),
-      state.tool === "pencil" && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "pencil" && /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Smoothing",
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(
           "input",
           {
             type: "range",
@@ -2446,9 +2525,9 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "eraser" && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+      state.tool === "eraser" && /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
         "Size",
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(
           "input",
           {
             type: "number",
@@ -2464,12 +2543,12 @@ function VectorToolbar({
           }
         )
       ] }),
-      state.tool === "paintBucket" && /* @__PURE__ */ jsx17(
+      state.tool === "paintBucket" && /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
           "data-vector-fill-gap": "",
-          className: buttonClass14,
+          className: buttonClass16,
           "aria-pressed": editing.fillGap > 0,
           title: "Close small gaps between path ends when filling",
           "aria-label": "Close gaps",
@@ -2478,12 +2557,12 @@ function VectorToolbar({
         }
       )
     ] }),
-    showDistort && /* @__PURE__ */ jsx17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ jsx17(
+    showDistort && /* @__PURE__ */ jsx19("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Distort", children: /* @__PURE__ */ jsx19(
       "button",
       {
         type: "button",
         "data-vector-free-distort": "",
-        className: buttonClass14,
+        className: buttonClass16,
         "aria-pressed": state.freeDistort,
         title: `Free Distort: drag a corner of the selection box to distort in perspective (Shift+Alt+${modKeyLabel()}: symmetric perspective; ${modKeyLabel()}-drag a side to skew)`,
         "aria-label": "Free Distort",
@@ -2491,15 +2570,15 @@ function VectorToolbar({
         children: "Distort"
       }
     ) }),
-    showBlend && /* @__PURE__ */ jsx17(VectorBlendControls, { controller }),
-    showArrange && /* @__PURE__ */ jsxs17(Fragment6, { children: [
-      /* @__PURE__ */ jsxs17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
-        /* @__PURE__ */ jsx17(
+    showBlend && /* @__PURE__ */ jsx19(VectorBlendControls, { controller }),
+    showArrange && /* @__PURE__ */ jsxs19(Fragment6, { children: [
+      /* @__PURE__ */ jsxs19("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Combine", children: [
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
             "data-vector-live-boolean": "",
-            className: buttonClass14,
+            className: buttonClass16,
             "aria-pressed": live,
             title: "Live booleans: keep the shapes editable",
             "aria-label": "Live booleans",
@@ -2516,12 +2595,12 @@ function VectorToolbar({
         act("\u25D0", `Make Clipping Mask (${modKeyLabel()}+7)`, () => controller.makeMask("clip"), count < 2),
         act("\u25D1", `Release Mask (${modKeyLabel()}+Alt+7)`, () => controller.releaseMask(), !maskSelected)
       ] }),
-      /* @__PURE__ */ jsx17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
           "data-vector-pathfinder": a.id,
-          className: buttonClass14,
+          className: buttonClass16,
           title: a.title,
           "aria-label": a.title,
           disabled: count < a.min,
@@ -2530,7 +2609,7 @@ function VectorToolbar({
         },
         a.id
       )) }),
-      /* @__PURE__ */ jsxs17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Arrange", children: [
+      /* @__PURE__ */ jsxs19("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),
@@ -2548,19 +2627,19 @@ function VectorBlendControls({ controller }) {
   const blend = getVectorBlendControls(state);
   const o = blend.options;
   const selected = blend.ids.length > 0;
-  return /* @__PURE__ */ jsxs17("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
-    /* @__PURE__ */ jsx17("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass14, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs19("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
+    /* @__PURE__ */ jsx19("button", { type: "button", "data-vector-blend-action": "make", className: buttonClass16, title: "Make Blend", "aria-label": "Make Blend", disabled: !blend.canBlend, onClick: () => controller.blend(), children: "\u29D3" }),
+    /* @__PURE__ */ jsx19(
       "select",
       {
         "aria-label": "Blend spacing",
         className: "h-7 rounded border border-border bg-background px-1 text-xs",
         value: o.spacing,
         onChange: (e) => applyVectorBlendOptions(controller, { spacing: e.target.value }),
-        children: VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ jsx17("option", { value: sp, children: VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+        children: VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ jsx19("option", { value: sp, children: VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
-    o.spacing !== "smoothColor" && /* @__PURE__ */ jsx17(
+    o.spacing !== "smoothColor" && /* @__PURE__ */ jsx19(
       "input",
       {
         type: "number",
@@ -2576,12 +2655,12 @@ function VectorBlendControls({ controller }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx19(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "orient",
-        className: buttonClass14,
+        className: buttonClass16,
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
@@ -2589,12 +2668,12 @@ function VectorBlendControls({ controller }) {
         children: "\u293F"
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx19(
       "button",
       {
         type: "button",
         "data-vector-blend-action": "spine",
-        className: buttonClass14,
+        className: buttonClass16,
         title: "Replace Spine (select a blend and a path)",
         "aria-label": "Replace Spine",
         disabled: !blend.canReplaceSpine,
@@ -2602,11 +2681,11 @@ function VectorBlendControls({ controller }) {
         children: "\u2307"
       }
     ),
-    /* @__PURE__ */ jsx17("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass14, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
-    /* @__PURE__ */ jsx17("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass14, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
+    /* @__PURE__ */ jsx19("button", { type: "button", "data-vector-blend-action": "expand", className: buttonClass16, title: "Expand Blend", "aria-label": "Expand Blend", disabled: !selected, onClick: () => controller.expandBlend(), children: "\u29C9" }),
+    /* @__PURE__ */ jsx19("button", { type: "button", "data-vector-blend-action": "release", className: buttonClass16, title: "Release Blend", "aria-label": "Release Blend", disabled: !selected, onClick: () => controller.releaseBlend(), children: "\u29C4" })
   ] });
 }
-var selectClass12 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var selectClass14 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
 var numberClass11 = "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs";
 function VectorStylePanel({ controller, className }) {
   const state = useVectorEditorState(controller);
@@ -2639,17 +2718,17 @@ function VectorStylePanel({ controller, className }) {
     if (style) controller.setWidthProfile(id);
     else controller.setDefaults({ strokeWidthProfile: widthProfilePreset(id)?.length ? widthProfilePreset(id) : null });
   };
-  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ jsx17("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
+  const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ jsx19("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
   const arrowRow = (end, label) => {
     const key = end === "start" ? "startArrow" : "endArrow";
     const scaleKey = end === "start" ? "startArrowScale" : "endArrowScale";
-    return /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ jsx17("span", { className: "w-16 text-xs text-foreground", children: label }),
-      /* @__PURE__ */ jsxs17("select", { "aria-label": `${label} arrowhead`, className: selectClass12, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
-        /* @__PURE__ */ jsx17("option", { value: "", children: "None" }),
-        VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ jsx17("option", { value: h, children: VECTOR_ARROWHEAD_LABELS[h] }, h))
+    return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsx19("span", { className: "w-16 text-xs text-foreground", children: label }),
+      /* @__PURE__ */ jsxs19("select", { "aria-label": `${label} arrowhead`, className: selectClass14, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
+        /* @__PURE__ */ jsx19("option", { value: "", children: "None" }),
+        VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ jsx19("option", { value: h, children: VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "number",
@@ -2675,12 +2754,12 @@ function VectorStylePanel({ controller, className }) {
     const paint = source[key];
     const hex = vectorPaintToHex6(paint);
     const on = paint !== null && paint !== "none";
-    return /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
-      /* @__PURE__ */ jsxs17("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
-        /* @__PURE__ */ jsx17("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
+    return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
+      /* @__PURE__ */ jsxs19("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
+        /* @__PURE__ */ jsx19("input", { type: "checkbox", checked: on, "aria-label": `${label} on`, onChange: (e) => apply({ [key]: e.target.checked ? hex ?? "#000000" : null }) }),
         label
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "color",
@@ -2691,18 +2770,18 @@ function VectorStylePanel({ controller, className }) {
           onChange: (e) => apply({ [key]: e.target.value })
         }
       ),
-      on && !hex && /* @__PURE__ */ jsx17("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
-      style?.mixed[key] && /* @__PURE__ */ jsx17("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
+      on && !hex && /* @__PURE__ */ jsx19("span", { className: "truncate text-[11px] text-muted-foreground", children: typeof paint === "string" ? paint : "Gradient" }),
+      style?.mixed[key] && /* @__PURE__ */ jsx19("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" })
     ] });
   };
-  return /* @__PURE__ */ jsxs17("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
-    /* @__PURE__ */ jsx17("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
+  return /* @__PURE__ */ jsxs19("div", { className: `space-y-2 ${className ?? ""}`, "aria-label": style ? "Selection style" : "New shape style", children: [
+    /* @__PURE__ */ jsx19("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: style ? "Selection" : "New shapes" }),
     paintRow("fill", "Fill"),
     paintRow("stroke", "Stroke"),
-    style && /* @__PURE__ */ jsx17(VectorGradientEditor, { controller }),
-    /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ jsx17("span", { className: "w-16", children: "Width" }),
-      /* @__PURE__ */ jsx17(
+    style && /* @__PURE__ */ jsx19(VectorGradientEditor, { controller }),
+    /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx19("span", { className: "w-16", children: "Width" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "number",
@@ -2718,33 +2797,33 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
-      /* @__PURE__ */ jsx17("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ jsx17("select", { "aria-label": "Stroke alignment", className: selectClass12, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(VECTOR_STROKE_ALIGN_LABELS2).map((a) => /* @__PURE__ */ jsx17("option", { value: a, children: VECTOR_STROKE_ALIGN_LABELS2[a] }, a)) }),
+    /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
+      /* @__PURE__ */ jsx19("span", { className: "w-16", children: "Align" }),
+      /* @__PURE__ */ jsx19("select", { "aria-label": "Stroke alignment", className: selectClass14, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(VECTOR_STROKE_ALIGN_LABELS2).map((a) => /* @__PURE__ */ jsx19("option", { value: a, children: VECTOR_STROKE_ALIGN_LABELS2[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
-    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
-      /* @__PURE__ */ jsx17("span", { className: "w-16", children: "Profile" }),
-      /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
+      /* @__PURE__ */ jsx19("span", { className: "w-16", children: "Profile" }),
+      /* @__PURE__ */ jsxs19(
         "select",
         {
           "aria-label": "Width profile",
-          className: selectClass12,
+          className: selectClass14,
           value: source.widthProfile,
           onChange: (e) => {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ jsx17("option", { value: p.id, children: p.label }, p.id)),
-            source.widthProfile === "custom" && /* @__PURE__ */ jsx17("option", { value: "custom", disabled: true, children: "Custom" })
+            VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ jsx19("option", { value: p.id, children: p.label }, p.id)),
+            source.widthProfile === "custom" && /* @__PURE__ */ jsx19("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
-          className: buttonClass14,
+          className: buttonClass16,
           title: "Reset to uniform width",
           "aria-label": "Reset to uniform width",
           disabled: source.widthProfile === "uniform" && !style?.mixed.widthProfile,
@@ -2754,20 +2833,20 @@ function VectorStylePanel({ controller, className }) {
       ),
       mixed("widthProfile")
     ] }),
-    source.hasOpenPath && /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    source.hasOpenPath && /* @__PURE__ */ jsxs19(Fragment6, { children: [
       arrowRow("start", "Start"),
       arrowRow("end", "End"),
-      (source.startArrow || source.endArrow) && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
-        /* @__PURE__ */ jsx17("span", { className: "w-16", children: "Heads" }),
-        /* @__PURE__ */ jsxs17("select", { "aria-label": "Arrowhead alignment", className: selectClass12, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
-          /* @__PURE__ */ jsx17("option", { value: "extend", children: "Tip past end" }),
-          /* @__PURE__ */ jsx17("option", { value: "tip", children: "Tip at end" })
+      (source.startArrow || source.endArrow) && /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "arrowAlign", children: [
+        /* @__PURE__ */ jsx19("span", { className: "w-16", children: "Heads" }),
+        /* @__PURE__ */ jsxs19("select", { "aria-label": "Arrowhead alignment", className: selectClass14, value: source.arrowAlign, onChange: (e) => apply({ arrowAlign: e.target.value }), children: [
+          /* @__PURE__ */ jsx19("option", { value: "extend", children: "Tip past end" }),
+          /* @__PURE__ */ jsx19("option", { value: "tip", children: "Tip at end" })
         ] })
       ] })
     ] }),
-    source.corners > 0 && /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
-      /* @__PURE__ */ jsx17("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
-      /* @__PURE__ */ jsx17(
+    source.corners > 0 && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", "data-vector-style": "corners", children: [
+      /* @__PURE__ */ jsx19("span", { className: "w-16 text-xs text-foreground", children: "Corners" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "number",
@@ -2782,12 +2861,12 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx17("select", { "aria-label": "Corner kind", className: selectClass12, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ jsx17("option", { value: k, children: VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ jsx19("select", { "aria-label": "Corner kind", className: selectClass14, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ jsx19("option", { value: k, children: VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
-    style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "corner-smoothing", title: "Corner smoothing: squircle corners that ease into the curve (0.6 is iOS-like)", children: [
-      /* @__PURE__ */ jsx17("span", { className: "w-16", children: "Smoothing" }),
-      /* @__PURE__ */ jsx17(
+    style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "corner-smoothing", title: "Corner smoothing: squircle corners that ease into the curve (0.6 is iOS-like)", children: [
+      /* @__PURE__ */ jsx19("span", { className: "w-16", children: "Smoothing" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "range",
@@ -2802,9 +2881,9 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    style && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
-      /* @__PURE__ */ jsx17("span", { className: "w-16", children: "Opacity" }),
-      /* @__PURE__ */ jsx17(
+    style && /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-2 text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx19("span", { className: "w-16", children: "Opacity" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "range",
@@ -2818,25 +2897,27 @@ function VectorStylePanel({ controller, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx17(VectorTextPanel, { controller }),
-    style && /* @__PURE__ */ jsx17(VectorAppearancePanel, { controller }),
-    style && /* @__PURE__ */ jsx17(VectorEffectsPanel, { controller }),
-    style && /* @__PURE__ */ jsx17(VectorEnvelopePanel, { controller }),
-    style && /* @__PURE__ */ jsx17(VectorMaskPanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorFramePanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorConnectorPanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorShadingPanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorSymmetryPanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorLensPanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorTracePanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorConstraintsPanel, { controller }),
-    /* @__PURE__ */ jsx17(VectorSymbolsPanel, { controller })
+    /* @__PURE__ */ jsx19(VectorTextPanel, { controller }),
+    style && /* @__PURE__ */ jsx19(VectorAppearancePanel, { controller }),
+    style && /* @__PURE__ */ jsx19(VectorEffectsPanel, { controller }),
+    style && /* @__PURE__ */ jsx19(VectorEnvelopePanel, { controller }),
+    style && /* @__PURE__ */ jsx19(VectorMaskPanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorFramePanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorPagesPanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorConnectorPanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorShadingPanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorSymmetryPanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorPerspectivePanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorLensPanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorTracePanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorConstraintsPanel, { controller }),
+    /* @__PURE__ */ jsx19(VectorSymbolsPanel, { controller })
   ] });
 }
 
 // src/vector/VectorProviderEffectsPanel.tsx
 import { useState as useState7, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 var btn = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
 function Controls({ controller, group }) {
   const provider = controller.effectsProvider;
@@ -2844,11 +2925,11 @@ function Controls({ controller, group }) {
   const { description, error } = useEffectDescription(provider, tag.effect);
   const [message, setMessage] = useState7(null);
   const run = (work) => void work.then(() => setMessage(null), (e) => setMessage(e instanceof Error ? e.message : String(e)));
-  if (!provider) return /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider: the shapes are kept as they are." });
-  if (error) return /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-amber-500", children: error });
-  if (!description) return /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
-  return /* @__PURE__ */ jsxs18(Fragment7, { children: [
-    /* @__PURE__ */ jsx18(
+  if (!provider) return /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider: the shapes are kept as they are." });
+  if (error) return /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsxs20(Fragment7, { children: [
+    /* @__PURE__ */ jsx20(
       EffectParameters,
       {
         description,
@@ -2858,7 +2939,7 @@ function Controls({ controller, group }) {
         onPreset: (v) => run(controller.updateVectorEffect(group.id, v))
       }
     ),
-    message && /* @__PURE__ */ jsx18("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+    message && /* @__PURE__ */ jsx20("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
   ] });
 }
 function VectorProviderEffectsPanel({ controller, className = "" }) {
@@ -2877,41 +2958,41 @@ function VectorProviderEffectsPanel({ controller, className = "" }) {
     setMessage(null);
     Promise.resolve().then(work).catch((e) => setMessage(e instanceof Error ? e.message : String(e)));
   };
-  return /* @__PURE__ */ jsxs18("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Vector effects", "data-vector-provider-effects": "", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx18("span", { className: "flex-1 font-semibold", children: "Effects" }),
-      /* @__PURE__ */ jsx18("button", { type: "button", className: btn, disabled: !provider, "aria-pressed": browse, onClick: () => setBrowse(!browse), children: "Add effect\u2026" })
+  return /* @__PURE__ */ jsxs20("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Vector effects", "data-vector-provider-effects": "", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx20("span", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ jsx20("button", { type: "button", className: btn, disabled: !provider, "aria-pressed": browse, onClick: () => setBrowse(!browse), children: "Add effect\u2026" })
     ] }),
-    !provider && /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effect groups are kept as shapes." }),
-    browse && /* @__PURE__ */ jsx18(EffectsBrowser, { provider, kinds: ["vector"], title: "Vector effects", onPick: (e) => (setBrowse(false), run(() => controller.addVectorEffect(e.id))) }),
-    selected.map((g) => /* @__PURE__ */ jsxs18("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-effect-group": g.id, children: [
-      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate font-medium", children: g.providerEffect.name ?? g.providerEffect.effect }),
-        /* @__PURE__ */ jsx18("button", { type: "button", className: btn, title: "Keep the shapes as a plain group", onClick: () => run(() => controller.detachVectorEffect(g.id)), children: "Detach" })
+    !provider && /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effect groups are kept as shapes." }),
+    browse && /* @__PURE__ */ jsx20(EffectsBrowser, { provider, kinds: ["vector"], title: "Vector effects", onPick: (e) => (setBrowse(false), run(() => controller.addVectorEffect(e.id))) }),
+    selected.map((g) => /* @__PURE__ */ jsxs20("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-effect-group": g.id, children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx20("span", { className: "min-w-0 flex-1 truncate font-medium", children: g.providerEffect.name ?? g.providerEffect.effect }),
+        /* @__PURE__ */ jsx20("button", { type: "button", className: btn, title: "Keep the shapes as a plain group", onClick: () => run(() => controller.detachVectorEffect(g.id)), children: "Detach" })
       ] }),
-      /* @__PURE__ */ jsx18(Controls, { controller, group: g })
+      /* @__PURE__ */ jsx20(Controls, { controller, group: g })
     ] }, g.id)),
-    groups.length > 0 && !selected.length && /* @__PURE__ */ jsxs18("p", { className: "text-[11px] text-muted-foreground", children: [
+    groups.length > 0 && !selected.length && /* @__PURE__ */ jsxs20("p", { className: "text-[11px] text-muted-foreground", children: [
       "Select an effect group (",
       groups.length,
       " in the drawing) to change it."
     ] }),
-    message && /* @__PURE__ */ jsx18("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+    message && /* @__PURE__ */ jsx20("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
   ] });
 }
 
 // src/vector/VectorEditor.tsx
-import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, effects, className }) {
   useEffects(controller, effects);
   const effectsShown = !!effects || controller.vectorEffectGroups().length > 0;
-  return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ jsx19(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ jsxs19("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ jsx19("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx19(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ jsxs19("div", { className: "flex w-full shrink-0 flex-col gap-2 md:w-56", children: [
-        /* @__PURE__ */ jsx19(VectorStylePanel, { controller, className: "rounded-md border border-border p-3" }),
-        effectsShown && /* @__PURE__ */ jsx19(VectorProviderEffectsPanel, { controller, className: "rounded-md border border-border p-3" })
+  return /* @__PURE__ */ jsxs21("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ jsx21(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ jsxs21("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx21("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx21(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ jsxs21("div", { className: "flex w-full shrink-0 flex-col gap-2 md:w-56", children: [
+        /* @__PURE__ */ jsx21(VectorStylePanel, { controller, className: "rounded-md border border-border p-3" }),
+        effectsShown && /* @__PURE__ */ jsx21(VectorProviderEffectsPanel, { controller, className: "rounded-md border border-border p-3" })
       ] })
     ] })
   ] });
@@ -2932,6 +3013,8 @@ export {
   VectorLensPanel,
   VectorMaskPanel,
   VectorMaskedNodes,
+  VectorPagesPanel,
+  VectorPerspectivePanel,
   VectorProviderEffectsPanel,
   VectorSceneNodes,
   VectorShadingPanel,