@pixerate/editor-react 0.86.0 → 0.88.0

package/dist/vector/index.cjs

@@ -39,6 +39,7 @@ __export(vector_exports, {
   VectorEnvelopePanel: () => VectorEnvelopePanel,
   VectorFilterDefs: () => VectorFilterDefs,
   VectorFramePanel: () => VectorFramePanel,
+  VectorGeneratePanel: () => VectorGeneratePanel,
   VectorGradientAnnotator: () => VectorGradientAnnotator,
   VectorGradientDefs: () => VectorGradientDefs,
   VectorGradientEditor: () => VectorGradientEditor,
@@ -62,7 +63,8 @@ __export(vector_exports, {
   useVectorEditor: () => useVectorEditor,
   useVectorEditorController: () => useVectorEditorController,
   useVectorEditorState: () => useVectorEditorState,
-  useVectorEffectsTools: () => useVectorEffectsTools
+  useVectorEffectsTools: () => useVectorEffectsTools,
+  useVectorGenerationTools: () => useVectorGenerationTools
 });
 module.exports = __toCommonJS(vector_exports);
 
@@ -114,6 +116,30 @@ function useVectorEffectsTools(registry, controller, options = {}) {
     return registry.register((0, import_vector.createVectorEffectsToolProvider)(controller, { id, namespace, readOnly }));
   }, [registry, controller, id, namespace, readOnly]);
 }
+function useVectorGenerationTools(registry, controller, options) {
+  const latest = (0, import_react.useRef)(options);
+  latest.current = options;
+  const { id, namespace } = options;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    const models = () => {
+      const m = latest.current.models;
+      return typeof m === "function" ? m() : m;
+    };
+    return registry.register(
+      (0, import_vector.createVectorGenerationToolProvider)(controller, {
+        id,
+        namespace,
+        models,
+        generate: (request, context) => latest.current.generate(request, context),
+        readOnly: () => {
+          const r = latest.current.readOnly;
+          return (typeof r === "function" ? r() : r) ?? false;
+        }
+      })
+    );
+  }, [registry, controller, id, namespace]);
+}
 
 // src/vector/VectorCanvas.tsx
 var import_react3 = __toESM(require("react"), 1);
@@ -299,7 +325,12 @@ var VectorSceneNode = import_react3.default.memo(function VectorSceneNode2({ nod
   if (node.layers)
     return (
       // Fill and stroke stacks: each layer in order, bottom to top.
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.layers.map(
+        (layer) => layer.kind === "brushstroke" ? (
+          // A brushstroke: its rendered brush images over their boxes.
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { "data-vector-layer": `brushstroke-${layer.index}`, opacity: layer.opacity < 1 ? layer.opacity : void 0, style: blendStyle(layer.blendMode), children: (layer.images ?? []).map((im, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("image", { href: im.href, x: im.x, y: im.y, width: im.width, height: im.height, preserveAspectRatio: "none" }, i)) }, `${layer.kind}-${layer.index}`)
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)
+      ) })
     );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VectorPaintPath, { paint: node, d: node.d, fillRule: node.fillRule, id: node.id, transform: node.transform, filter: node.filter, blendMode: node.blendMode });
 });
@@ -658,6 +689,7 @@ function VectorCanvas({
             overlay.builder.lines.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-builder-line": "", d, fill: "none", stroke: import_vector3.VECTOR_OVERLAY_THEME.builderErase, strokeWidth: 3, strokeLinecap: "round" }, `l${i}`)),
             overlay.builder.trail && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { "data-vector-builder-trail": "", d: overlay.builder.trail, fill: "none", stroke: overlay.builder.mode === "erase" ? import_vector3.VECTOR_OVERLAY_THEME.builderErase : accentColor, strokeWidth: 1 })
           ] }),
+          overlay.brush && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { "data-vector-brush": "", cx: overlay.brush.x, cy: overlay.brush.y, r: overlay.brush.r, fill: "none", stroke: accentColor, strokeWidth: 1, strokeDasharray: "4 3", pointerEvents: "none" }),
           overlay.toolStroke && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "path",
             {
@@ -838,7 +870,7 @@ function VectorCanvas({
 
 // src/vector/VectorToolbar.tsx
 var import_react11 = __toESM(require("react"), 1);
-var import_vector19 = require("@pixerate/editor/vector");
+var import_vector20 = require("@pixerate/editor/vector");
 
 // src/vector/VectorEffectsPanel.tsx
 var import_vector4 = require("@pixerate/editor/vector");
@@ -1006,6 +1038,30 @@ function VectorAppearancePanel({ controller, className }) {
   const update = (l, patch, merge = false) => controller.updatePaintLayer(l.kind, l.index, patch, { ids, merge });
   const layerRow = (l, count) => {
     const name = `${l.kind === "fill" ? "Fill" : "Stroke"} ${l.index + 1}`;
+    if (l.brushstroke)
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-layer": `${l.kind}-${l.index}`, "data-vector-brushstroke": "", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", "aria-label": `${name} visible`, title: "Show", checked: l.visible, onChange: (e) => update(l, { visible: e.target.checked }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "color", "aria-label": `${name} colour`, className: "h-7 w-10 cursor-pointer rounded border border-border bg-background", value: l.color ?? "#000000", onChange: (e) => controller.setBrushstroke(l.index, { color: e.target.value }, { ids, merge: true }), onBlur: end }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { "aria-label": `${name} brush`, className: selectClass2, value: l.brushstroke.brushId, onChange: (e) => controller.setBrushstroke(l.index, { brushId: e.target.value }, { ids }), children: (0, import_vector5.vectorBrushstrokeBrushes)().map((b) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: b.id, children: b.name }, b.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "number",
+            min: 0.5,
+            step: 0.5,
+            "aria-label": `${name} brush size`,
+            title: "Brush size",
+            className: numberClass2,
+            value: l.brushstroke.size,
+            onChange: (e) => {
+              const n = parseFloat(e.target.value);
+              if (Number.isFinite(n) && n > 0) controller.setBrushstroke(l.index, { size: Math.min(500, n) }, { ids, merge: true });
+            },
+            onBlur: end
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Remove", "aria-label": `Remove ${name}`, onClick: () => controller.removePaintLayer("stroke", l.index, { ids }), children: "\xD7" })
+      ] }) }, `${l.kind}-${l.index}`);
     if (l.unknownKind)
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-[11px] text-muted-foreground", "data-vector-layer": `${l.kind}-${l.index}`, children: [
         name,
@@ -1101,7 +1157,8 @@ function VectorAppearancePanel({ controller, className }) {
           onClick: () => controller.addPaintLayer(kind, {}, { ids }),
           children: "+"
         }
-      )
+      ),
+      kind === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: buttonClass2, title: "Add a brushstroke (a natural-media brush along the path)", "aria-label": "Add brushstroke", "data-vector-add-brushstroke": "", disabled: !ids.length, onClick: () => controller.addBrushstroke({ brushId: (0, import_vector5.vectorBrushstrokeBrushes)()[0].id }, { ids }), children: "\u270E+" })
     ] }),
     [...layers].reverse().map((l) => layerRow(l, layers.length))
   ] });
@@ -2021,6 +2078,7 @@ function VectorShadingPanel({ controller, className }) {
 
 // src/vector/VectorTracePanel.tsx
 var import_react9 = require("react");
+var import_vector15 = require("@pixerate/editor/vector");
 var import_jsx_runtime14 = require("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";
@@ -2047,7 +2105,8 @@ function VectorTracePanel({ controller, className }) {
       const pixels = await filePixels(file);
       const doc = controller.getState().document;
       const width = Math.min(doc.width, pixels.width);
-      const r = controller.traceImage(pixels, { mode, colors, width, name: file.name.replace(/\.[^.]+$/, "") || "Image Trace" });
+      const name = file.name.replace(/\.[^.]+$/, "") || void 0;
+      const r = mode === "threshold" || mode === "color" ? controller.traceImage(pixels, { mode, colors, width, name: name ?? "Image Trace" }) : controller.stylizeImage(pixels, mode, { width, ...name ? { name } : {} });
       setMessage(r.ok ? null : r.message);
     } catch {
       setMessage("That file could not be read as an image.");
@@ -2058,7 +2117,8 @@ function VectorTracePanel({ controller, className }) {
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Trace" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("select", { "aria-label": "Trace mode", className: selectClass9, value: mode, onChange: (e) => setMode(e.target.value), children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "threshold", children: "Black & white" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "color", children: "Colours" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "color", children: "Colours" }),
+        import_vector15.VECTOR_STYLIZE_STYLES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: s, children: import_vector15.VECTOR_STYLIZE_LABELS[s] }, s))
       ] }),
       mode === "color" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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" }),
@@ -2082,14 +2142,14 @@ function VectorTracePanel({ controller, className }) {
 }
 
 // src/vector/VectorSymmetryPanel.tsx
-var import_vector15 = require("@pixerate/editor/vector");
+var import_vector16 = require("@pixerate/editor/vector");
 var import_jsx_runtime15 = require("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);
-  const group = state.selection.map((id) => controller.getNode(id)).find(import_vector15.isVectorSymmetryGroup) ?? null;
+  const group = state.selection.map((id) => controller.getNode(id)).find(import_vector16.isVectorSymmetryGroup) ?? null;
   const s = group?.symmetry;
   const ids = group ? [group.id] : void 0;
   const drawing = !!group && state.symmetryTarget === group.id;
@@ -2099,7 +2159,7 @@ function VectorSymmetryPanel({ controller, className }) {
       !group && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Symmetry mode", className: selectClass10, value: s.mode, onChange: (e) => controller.setSymmetry({ mode: e.target.value }, { ids }), children: import_vector15.VECTOR_SYMMETRY_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: m, children: import_vector15.VECTOR_SYMMETRY_MODE_LABELS[m] }, m)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("select", { "aria-label": "Symmetry mode", className: selectClass10, value: s.mode, onChange: (e) => controller.setSymmetry({ mode: e.target.value }, { ids }), children: import_vector16.VECTOR_SYMMETRY_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: m, children: import_vector16.VECTOR_SYMMETRY_MODE_LABELS[m] }, m)) }),
         s.mode === "radial" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", title: "Mirror each copy too (kaleidoscope)", children: [
@@ -2120,7 +2180,7 @@ function VectorSymmetryPanel({ controller, className }) {
 
 // src/vector/VectorPerspectivePanel.tsx
 var import_react10 = __toESM(require("react"), 1);
-var import_vector16 = require("@pixerate/editor/vector");
+var import_vector17 = require("@pixerate/editor/vector");
 var import_jsx_runtime16 = require("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";
@@ -2128,10 +2188,10 @@ var PLANE_LABELS = { floor: "Floor", left: "Left wall", right: "Right wall", sid
 function VectorPerspectivePanel({ controller, className }) {
   const state = useVectorEditorState(controller);
   const grid = state.document.perspective ?? null;
-  const planes = grid ? (0, import_vector16.vectorPerspectivePlanes)(grid) : [];
+  const planes = grid ? (0, import_vector17.vectorPerspectivePlanes)(grid) : [];
   const [attachTo, setAttachTo] = import_react10.default.useState("");
   const target = (state.perspectivePlane ?? attachTo) || planes[0];
-  const add = (n) => controller.setPerspective((0, import_vector16.vectorPerspectivePreset)(n, state.document.width, state.document.height));
+  const add = (n) => controller.setPerspective((0, import_vector17.vectorPerspectivePreset)(n, state.document.width, state.document.height));
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-perspective-panel": "", "aria-label": "Perspective", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Perspective" }),
@@ -2164,7 +2224,7 @@ function VectorPerspectivePanel({ controller, className }) {
 }
 
 // src/vector/VectorLensPanel.tsx
-var import_vector17 = require("@pixerate/editor/vector");
+var import_vector18 = require("@pixerate/editor/vector");
 var import_jsx_runtime17 = require("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";
@@ -2173,7 +2233,7 @@ function VectorLensPanel({ controller, className }) {
   const path = state.selection.map((id) => controller.getNode(id)).find((n) => n?.type === "path" && n.subpaths.some((sp) => sp.closed) && !n.connector);
   if (!path) return null;
   const lens = path.lens ?? null;
-  const spec = lens ? import_vector17.VECTOR_LENS_SPECS[lens.type] : null;
+  const spec = lens ? import_vector18.VECTOR_LENS_SPECS[lens.type] : null;
   const ids = [path.id];
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-lens-panel": "", "aria-label": "Lens", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
@@ -2187,7 +2247,7 @@ function VectorLensPanel({ controller, className }) {
           onChange: (e) => e.target.value ? controller.setLens({ type: e.target.value }, { ids }) : controller.setLens(null, { ids }),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "", children: "None" }),
-            import_vector17.VECTOR_LENS_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: t, children: import_vector17.VECTOR_LENS_LABELS[t] }, t))
+            import_vector18.VECTOR_LENS_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: t, children: import_vector18.VECTOR_LENS_LABELS[t] }, t))
           ]
         }
       )
@@ -2217,7 +2277,7 @@ function VectorLensPanel({ controller, className }) {
 }
 
 // src/vector/VectorGradientEditor.tsx
-var import_vector18 = require("@pixerate/editor/vector");
+var import_vector19 = require("@pixerate/editor/vector");
 var import_jsx_runtime18 = require("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";
@@ -2225,7 +2285,7 @@ var buttonClass15 = "inline-flex h-7 min-w-7 items-center justify-center rounded
 var percent = (v) => Math.round(v * 1e3) / 10;
 function VectorGradientEditor({ controller, className }) {
   const state = useVectorEditorState(controller);
-  const ed = (0, import_vector18.getVectorGradientEditor)(state);
+  const ed = (0, import_vector19.getVectorGradientEditor)(state);
   if (!ed) return null;
   const g = ed.gradient;
   const sel = ed.selected;
@@ -2233,7 +2293,7 @@ function VectorGradientEditor({ controller, className }) {
   const setType = (value) => {
     if (value === "solid") {
       const first = ed.stops[0];
-      controller.setStyle({ [ed.target]: (0, import_vector18.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
+      controller.setStyle({ [ed.target]: (0, import_vector19.vectorPaintToHex)(first?.color) ?? first?.color ?? "#000000" }, void 0, { label: "Solid Colour" });
     } else controller.setGradient({ type: value });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `space-y-1.5 ${className ?? ""}`, "data-vector-gradient-editor": ed.target, "aria-label": "Gradient", children: [
@@ -2246,7 +2306,7 @@ function VectorGradientEditor({ controller, className }) {
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16 text-xs text-foreground", children: "Type" }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("select", { "aria-label": "Gradient type", className: selectClass13, value: ed.type ?? "solid", onChange: (e) => setType(e.target.value), children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "solid", children: "Solid" }),
-        import_vector18.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: t, children: import_vector18.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
+        import_vector19.VECTOR_GRADIENT_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: t, children: import_vector19.VECTOR_GRADIENT_TYPE_LABELS[t] }, t))
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: buttonClass15, "aria-label": "Reverse gradient", title: "Reverse gradient", disabled: !g, onClick: () => controller.reverseGradient(), children: "\u21C4" })
     ] }),
@@ -2287,7 +2347,7 @@ function VectorGradientEditor({ controller, className }) {
             type: "color",
             "aria-label": "Stop colour",
             className: "h-7 w-9 cursor-pointer rounded border border-border bg-background",
-            value: (0, import_vector18.vectorPaintToHex)(sel.color) ?? "#000000",
+            value: (0, import_vector19.vectorPaintToHex)(sel.color) ?? "#000000",
             onChange: (e) => controller.setGradientStop(sel.index, { color: e.target.value }, { merge: `gradient-stop-color-${sel.index}` }),
             onBlur: end
           }
@@ -2353,7 +2413,7 @@ function VectorGradientEditor({ controller, className }) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Colours" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass13, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector18.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: i, children: import_vector18.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Gradient interpolation", className: selectClass13, value: ed.interpolation, onChange: (e) => controller.setGradient({ interpolation: e.target.value }), children: import_vector19.VECTOR_GRADIENT_INTERPOLATIONS.map((i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: i, children: import_vector19.VECTOR_GRADIENT_INTERPOLATION_LABELS[i] }, i)) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Smooth" }),
@@ -2375,11 +2435,11 @@ function VectorGradientEditor({ controller, className }) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "Spread" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Gradient spread", className: selectClass13, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector18.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: sp, children: import_vector18.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Gradient spread", className: selectClass13, value: ed.spread, onChange: (e) => controller.setGradient({ spread: e.target.value }), children: import_vector19.VECTOR_GRADIENT_SPREADS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: sp, children: import_vector19.VECTOR_GRADIENT_SPREAD_LABELS[sp] }, sp)) })
       ] }),
       ed.target === "stroke" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "flex items-center gap-1.5 text-xs text-foreground", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-16", children: "On stroke" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass13, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector18.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: m, children: import_vector18.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("select", { "aria-label": "Gradient on stroke", className: selectClass13, value: ed.strokeMode, onChange: (e) => controller.setGradient({ strokeMode: e.target.value }), children: import_vector19.VECTOR_STROKE_GRADIENT_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: m, children: import_vector19.VECTOR_STROKE_GRADIENT_MODE_LABELS[m] }, m)) })
       ] })
     ] })
   ] });
@@ -2392,7 +2452,7 @@ var modKeyLabel = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.te
 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 = import_vector19.VECTOR_TOOLS,
+  tools = import_vector20.VECTOR_TOOLS,
   showHistory = true,
   showArrange = true,
   showSnap = true,
@@ -2406,7 +2466,7 @@ function VectorToolbar({
   const points = state.tool === "direct" ? state.selectedAnchors.length : 0;
   const editing = state.editing;
   const groupSelected = state.selection.some((id) => controller.getNode(id)?.type === "group");
-  const maskSelected = state.selection.some((id) => (0, import_vector19.isVectorMaskGroup)(controller.getNode(id)));
+  const maskSelected = state.selection.some((id) => (0, import_vector20.isVectorMaskGroup)(controller.getNode(id)));
   const [live, setLive] = import_react11.default.useState(false);
   const booleanDisabled = live ? count < 1 : count < 2;
   const act = (label, title, run, disabled = false) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: buttonClass16, title, "aria-label": title, disabled, onClick: () => void run(), children: label }, label);
@@ -2418,10 +2478,10 @@ function VectorToolbar({
         "data-vector-tool": tool,
         className: buttonClass16,
         "aria-pressed": state.tool === tool,
-        title: `${(0, import_vector19.vectorToolLabel)(tool)} (${import_vector19.VECTOR_TOOL_SHORTCUTS[tool]})`,
-        "aria-label": (0, import_vector19.vectorToolLabel)(tool),
+        title: `${(0, import_vector20.vectorToolLabel)(tool)} (${import_vector20.VECTOR_TOOL_SHORTCUTS[tool]})`,
+        "aria-label": (0, import_vector20.vectorToolLabel)(tool),
         onClick: () => controller.setTool(tool),
-        children: import_vector19.VECTOR_TOOL_GLYPHS[tool]
+        children: import_vector20.VECTOR_TOOL_GLYPHS[tool]
       },
       tool
     )) }),
@@ -2450,10 +2510,10 @@ function VectorToolbar({
           "aria-label": "Polar tracking increment",
           title: "Polar tracking: the angles drawn points snap to from where they leave",
           className: "h-8 rounded-md border border-border bg-background px-1 text-xs",
-          value: String((0, import_vector19.vectorPolarIncrementOf)(state.snap.angles) ?? ""),
-          onChange: (e) => controller.setSnap({ angles: (0, import_vector19.vectorPolarAngles)(Number(e.target.value)) }),
+          value: String((0, import_vector20.vectorPolarIncrementOf)(state.snap.angles) ?? ""),
+          onChange: (e) => controller.setSnap({ angles: (0, import_vector20.vectorPolarAngles)(Number(e.target.value)) }),
           children: [
-            (0, import_vector19.vectorPolarIncrementOf)(state.snap.angles) === null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "", children: "Custom" }),
+            (0, import_vector20.vectorPolarIncrementOf)(state.snap.angles) === null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "", children: "Custom" }),
             [90, 45, 30, 15].map((n) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("option", { value: n, children: [
               n,
               "\xB0"
@@ -2463,7 +2523,7 @@ function VectorToolbar({
       )
     ] }),
     showPathEdit && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Path editing", children: [
-      import_vector19.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_vector20.VECTOR_PATH_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
           type: "button",
@@ -2477,7 +2537,7 @@ function VectorToolbar({
         },
         a.id
       )),
-      import_vector19.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_vector20.VECTOR_EDIT_TOGGLES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
           type: "button",
@@ -2525,6 +2585,20 @@ function VectorToolbar({
           }
         )
       ] }),
+      state.tool === "distort" && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "flex flex-wrap items-center gap-1", "data-vector-distort-options": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("select", { "aria-label": "Distort brush", title: "What the brush does to the outlines it passes over", className: "h-7 rounded border border-border bg-background px-1 text-xs", value: editing.distortMode, onChange: (e) => controller.setEditing({ distortMode: e.target.value }), children: import_vector20.VECTOR_DISTORT_BRUSH_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: m, children: m[0].toUpperCase() + m.slice(1) }, m)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+          "Size",
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "number", min: 1, step: 1, "aria-label": "Distort brush size", className: "h-7 w-16 rounded border border-border bg-background px-1.5 text-xs", value: editing.distortSize, onChange: (e) => {
+            const n = parseFloat(e.target.value);
+            if (Number.isFinite(n) && n > 0) controller.setEditing({ distortSize: n });
+          } })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+          "Strength",
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "range", min: 0, max: 1, step: 0.05, "aria-label": "Distort brush strength", className: "h-4 w-20 accent-primary", value: editing.distortStrength, onChange: (e) => controller.setEditing({ distortStrength: parseFloat(e.target.value) }) })
+        ] })
+      ] }),
       state.tool === "paintBucket" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
@@ -2534,7 +2608,7 @@ function VectorToolbar({
           "aria-pressed": editing.fillGap > 0,
           title: "Close small gaps between path ends when filling",
           "aria-label": "Close gaps",
-          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector19.VECTOR_FILL_GAP }),
+          onClick: () => controller.setEditing({ fillGap: editing.fillGap > 0 ? 0 : import_vector20.VECTOR_FILL_GAP }),
           children: "Gaps"
         }
       )
@@ -2577,7 +2651,7 @@ function VectorToolbar({
         act("\u25D0", `Make Clipping Mask (${modKeyLabel()}+7)`, () => controller.makeMask("clip"), count < 2),
         act("\u25D1", `Release Mask (${modKeyLabel()}+Alt+7)`, () => controller.releaseMask(), !maskSelected)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector19.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Pathfinder", children: import_vector20.VECTOR_PATHFINDER_ACTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
           type: "button",
@@ -2606,7 +2680,7 @@ function VectorToolbar({
 }
 function VectorBlendControls({ controller }) {
   const state = useVectorEditorState(controller);
-  const blend = (0, import_vector19.getVectorBlendControls)(state);
+  const blend = (0, import_vector20.getVectorBlendControls)(state);
   const o = blend.options;
   const selected = blend.ids.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ml-1 flex items-center gap-1", role: "group", "aria-label": "Blend", "data-vector-blend-controls": "", children: [
@@ -2617,8 +2691,8 @@ function VectorBlendControls({ controller }) {
         "aria-label": "Blend spacing",
         className: "h-7 rounded border border-border bg-background px-1 text-xs",
         value: o.spacing,
-        onChange: (e) => (0, import_vector19.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
-        children: import_vector19.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: sp, children: import_vector19.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
+        onChange: (e) => (0, import_vector20.applyVectorBlendOptions)(controller, { spacing: e.target.value }),
+        children: import_vector20.VECTOR_BLEND_SPACINGS.map((sp) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: sp, children: import_vector20.VECTOR_BLEND_SPACING_LABELS[sp] }, sp))
       }
     ),
     o.spacing !== "smoothColor" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2633,7 +2707,7 @@ function VectorBlendControls({ controller }) {
         onChange: (e) => {
           const n = parseFloat(e.target.value);
           if (!Number.isFinite(n) || n <= 0) return;
-          (0, import_vector19.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
+          (0, import_vector20.applyVectorBlendOptions)(controller, o.spacing === "steps" ? { steps: n } : { distance: n });
         }
       }
     ),
@@ -2646,7 +2720,7 @@ function VectorBlendControls({ controller }) {
         "aria-pressed": o.orientToSpine,
         title: "Orient steps to the spine",
         "aria-label": "Orient to spine",
-        onClick: () => (0, import_vector19.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
+        onClick: () => (0, import_vector20.applyVectorBlendOptions)(controller, { orientToSpine: !o.orientToSpine }),
         children: "\u293F"
       }
     ),
@@ -2671,7 +2745,7 @@ var selectClass14 = "h-7 min-w-0 flex-1 rounded border border-border bg-backgrou
 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);
-  const style = (0, import_vector19.getVectorSelectionStyle)(state);
+  const style = (0, import_vector20.getVectorSelectionStyle)(state);
   const d = state.defaults;
   const source = style ?? {
     fill: d.fill ?? null,
@@ -2684,7 +2758,7 @@ function VectorStylePanel({ controller, className }) {
     arrowAlign: d.arrowAlign ?? "extend",
     startArrowScale: d.startArrowScale ?? 1,
     endArrowScale: d.endArrowScale ?? 1,
-    widthProfile: (0, import_vector19.widthProfilePresetId)(d.strokeWidthProfile),
+    widthProfile: (0, import_vector20.widthProfilePresetId)(d.strokeWidthProfile),
     cornerRadius: d.cornerRadius,
     cornerKind: d.cornerKind ?? "round",
     cornerSmoothing: 0,
@@ -2698,7 +2772,7 @@ function VectorStylePanel({ controller, className }) {
   };
   const setProfile = (id) => {
     if (style) controller.setWidthProfile(id);
-    else controller.setDefaults({ strokeWidthProfile: (0, import_vector19.widthProfilePreset)(id)?.length ? (0, import_vector19.widthProfilePreset)(id) : null });
+    else controller.setDefaults({ strokeWidthProfile: (0, import_vector20.widthProfilePreset)(id)?.length ? (0, import_vector20.widthProfilePreset)(id) : null });
   };
   const mixed = (key) => style?.mixed[key] ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[11px] text-muted-foreground", children: "Mixed" }) : null;
   const arrowRow = (end, label) => {
@@ -2708,7 +2782,7 @@ function VectorStylePanel({ controller, className }) {
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "w-16 text-xs text-foreground", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("select", { "aria-label": `${label} arrowhead`, className: selectClass14, value: source[key] ?? "", onChange: (e) => apply({ [key]: e.target.value || null }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "", children: "None" }),
-        import_vector19.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: h, children: import_vector19.VECTOR_ARROWHEAD_LABELS[h] }, h))
+        import_vector20.VECTOR_ARROWHEADS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: h, children: import_vector20.VECTOR_ARROWHEAD_LABELS[h] }, h))
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
@@ -2734,7 +2808,7 @@ function VectorStylePanel({ controller, className }) {
   };
   const paintRow = (key, label) => {
     const paint = source[key];
-    const hex = (0, import_vector19.vectorPaintToHex)(paint);
+    const hex = (0, import_vector20.vectorPaintToHex)(paint);
     const on = paint !== null && paint !== "none";
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", "data-vector-style": key, children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex w-16 items-center gap-1.5 text-xs text-foreground", children: [
@@ -2781,7 +2855,7 @@ function VectorStylePanel({ controller, className }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "strokeAlign", children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "w-16", children: "Align" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass14, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector19.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: a, children: import_vector19.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("select", { "aria-label": "Stroke alignment", className: selectClass14, value: source.strokeAlign, onChange: (e) => apply({ strokeAlign: e.target.value }), children: Object.keys(import_vector20.VECTOR_STROKE_ALIGN_LABELS).map((a) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: a, children: import_vector20.VECTOR_STROKE_ALIGN_LABELS[a] }, a)) }),
       mixed("strokeAlign")
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "widthProfile", children: [
@@ -2796,7 +2870,7 @@ function VectorStylePanel({ controller, className }) {
             if (e.target.value !== "custom") setProfile(e.target.value);
           },
           children: [
-            import_vector19.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: p.id, children: p.label }, p.id)),
+            import_vector20.VECTOR_WIDTH_PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: p.id, children: p.label }, p.id)),
             source.widthProfile === "custom" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "custom", disabled: true, children: "Custom" })
           ]
         }
@@ -2843,7 +2917,7 @@ function VectorStylePanel({ controller, className }) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("select", { "aria-label": "Corner kind", className: selectClass14, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector19.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: k, children: import_vector19.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("select", { "aria-label": "Corner kind", className: selectClass14, value: source.cornerKind, onChange: (e) => setCorners({ kind: e.target.value }), children: import_vector20.VECTOR_CORNER_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: k, children: import_vector20.VECTOR_CORNER_KIND_LABELS[k] }, k)) }),
       mixed("cornerRadius")
     ] }),
     style && source.corners > 0 && source.cornerKind === "round" && source.cornerRadius > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "flex items-center gap-2 text-xs text-foreground", "data-vector-style": "corner-smoothing", title: "Corner smoothing: squircle corners that ease into the curve (0.6 is iOS-like)", children: [
@@ -3537,6 +3611,44 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
     ] })
   ] });
 }
+
+// src/vector/VectorGeneratePanel.tsx
+var import_react18 = require("react");
+var import_vector21 = require("@pixerate/editor/vector");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var buttonClass17 = "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 selectClass15 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
+var AS_LABELS = { color: "Traced in colour", threshold: "Traced in one colour", mosaic: "Mosaic", halftone: "Halftone", lowPoly: "Low poly", hatch: "Engraving" };
+function VectorGeneratePanel({ controller, models, generate, className }) {
+  const usable = (0, import_vector21.vectorArtModels)(models);
+  const [prompt, setPrompt] = (0, import_react18.useState)("");
+  const [model, setModel] = (0, import_react18.useState)("");
+  const [as, setAs] = (0, import_react18.useState)("color");
+  const [busy, setBusy] = (0, import_react18.useState)(false);
+  const [message, setMessage] = (0, import_react18.useState)(null);
+  const chosen = usable.find((m) => m.id === model) ?? usable[0];
+  if (!usable.length) return null;
+  const run = async () => {
+    setBusy(true);
+    setMessage(null);
+    const r = await (0, import_vector21.generateVectorArt)(controller, { prompt, model: chosen.id, as, idempotencyKey: `${Date.now()}-${Math.random().toString(36).slice(2)}` }, { models, generate });
+    setBusy(false);
+    setMessage(r.ok ? null : r.message ?? "Generation failed.");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `space-y-1 ${className ?? ""}`, "data-vector-generate-panel": "", "aria-label": "Generate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Generate" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("select", { "aria-label": "Generation model", className: selectClass15, value: chosen.id, onChange: (e) => setModel(e.target.value), children: usable.map((m) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: m.id, children: m.name ?? m.id }, m.id)) }),
+      chosen.media === "image" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("select", { "aria-label": "Image to vectors", className: selectClass15, value: as, onChange: (e) => setAs(e.target.value), children: import_vector21.VECTOR_GENERATED_IMAGE_AS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: a, children: AS_LABELS[a] }, a)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "w-16" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { type: "text", "aria-label": "Prompt", placeholder: "Describe the art\u2026", className: "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1.5 text-xs", value: prompt, onChange: (e) => setPrompt(e.target.value), onKeyDown: (e) => e.key === "Enter" && prompt.trim() && !busy && void run() }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: buttonClass17, "data-vector-generate-action": "", disabled: !prompt.trim() || busy, onClick: () => void run(), children: busy ? "Generating\u2026" : "Generate" })
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-[11px] text-red-600", children: message })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   VectorAppearancePanel,
@@ -3548,6 +3660,7 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
   VectorEnvelopePanel,
   VectorFilterDefs,
   VectorFramePanel,
+  VectorGeneratePanel,
   VectorGradientAnnotator,
   VectorGradientDefs,
   VectorGradientEditor,
@@ -3571,6 +3684,7 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
   useVectorEditor,
   useVectorEditorController,
   useVectorEditorState,
-  useVectorEffectsTools
+  useVectorEffectsTools,
+  useVectorGenerationTools
 });
 //# sourceMappingURL=index.cjs.map