@pixerate/editor-react 0.86.0 → 0.88.0

package/dist/vector/index.d.cts

@@ -1,4 +1,4 @@
-import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorEffectsToolProviderOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit } from '@pixerate/editor/vector';
+import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorEffectsToolProviderOptions, VectorGenerationToolProviderOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit, VectorArtModel, VectorArtGenerator } from '@pixerate/editor/vector';
 import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
 import { EffectProvider } from '@pixerate/editor/effects';
@@ -35,6 +35,12 @@ declare function useVectorCommands(registry: VectorCommandTarget | null | undefi
  * `registry` while mounted. They work once an effects provider is registered (see `useEffects`).
  */
 declare function useVectorEffectsTools(registry: ToolRegistry | null | undefined, controller: VectorEditorController, options?: VectorEffectsToolProviderOptions): void;
+/**
+ * Registers the vector editor's generative-prompt tools (`list_vector_art_models`,
+ * `generate_vector_art`, `regenerate_vector_art`) for the lifetime of the component. `models` and
+ * `generate` are read fresh on every call, so they may change between renders.
+ */
+declare function useVectorGenerationTools(registry: ToolRegistry | null | undefined, controller: VectorEditorController, options: VectorGenerationToolProviderOptions): void;
 
 interface VectorCanvasProps {
     controller: VectorEditorController;
@@ -311,8 +317,9 @@ interface VectorTracePanelProps {
     className?: string;
 }
 /**
- * Image Trace: pick an image file and trace it into paths, in one colour (dark areas) or a stacked
- * path per colour. The traced group goes on the artboard at its width. One undo step.
+ * Image Trace and stylise: pick an image file and trace it into paths, in one colour (dark areas)
+ * or a stacked path per colour, or stylise it as mosaic tiles, halftone dots, low-poly triangles
+ * or engraving lines. The group goes on the artboard at its width. One undo step.
  */
 declare function VectorTracePanel({ controller, className }: VectorTracePanelProps): React__default.JSX.Element;
 
@@ -360,4 +367,18 @@ interface VectorProviderEffectsPanelProps {
  */
 declare function VectorProviderEffectsPanel({ controller, className }: VectorProviderEffectsPanelProps): React__default.JSX.Element;
 
-export { type UseVectorEditorResult, VectorAppearancePanel, type VectorAppearancePanelProps, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorConnectorPanel, type VectorConnectorPanelProps, VectorConstraintsPanel, type VectorConstraintsPanelProps, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorEnvelopePanel, type VectorEnvelopePanelProps, VectorFilterDefs, VectorFramePanel, type VectorFramePanelProps, VectorGradientAnnotator, VectorGradientDefs, VectorGradientEditor, type VectorGradientEditorProps, VectorLensPanel, type VectorLensPanelProps, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, VectorPagesPanel, type VectorPagesPanelProps, VectorPerspectivePanel, type VectorPerspectivePanelProps, VectorProviderEffectsPanel, type VectorProviderEffectsPanelProps, VectorSceneNodes, VectorShadingPanel, type VectorShadingPanelProps, VectorStylePanel, type VectorStylePanelProps, VectorSymbolsPanel, type VectorSymbolsPanelProps, VectorSymmetryPanel, type VectorSymmetryPanelProps, VectorTextElement, VectorTextPanel, type VectorTextPanelProps, VectorToolbar, type VectorToolbarProps, VectorTracePanel, type VectorTracePanelProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState, useVectorEffectsTools };
+interface VectorGeneratePanelProps {
+    controller: VectorEditorController;
+    /** The host's models (image models are traced or stylised; text models write SVG). */
+    models: readonly VectorArtModel[];
+    /** The host's generator (sends a planned request to its model). */
+    generate: VectorArtGenerator;
+    className?: string;
+}
+/**
+ * Generative prompts: describe art, pick a model (and, for image models, how the picture becomes
+ * vectors) and generate it into the artboard as one editable group. One undo step.
+ */
+declare function VectorGeneratePanel({ controller, models, generate, className }: VectorGeneratePanelProps): React__default.JSX.Element | null;
+
+export { type UseVectorEditorResult, VectorAppearancePanel, type VectorAppearancePanelProps, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorConnectorPanel, type VectorConnectorPanelProps, VectorConstraintsPanel, type VectorConstraintsPanelProps, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorEnvelopePanel, type VectorEnvelopePanelProps, VectorFilterDefs, VectorFramePanel, type VectorFramePanelProps, VectorGeneratePanel, type VectorGeneratePanelProps, VectorGradientAnnotator, VectorGradientDefs, VectorGradientEditor, type VectorGradientEditorProps, VectorLensPanel, type VectorLensPanelProps, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, VectorPagesPanel, type VectorPagesPanelProps, VectorPerspectivePanel, type VectorPerspectivePanelProps, VectorProviderEffectsPanel, type VectorProviderEffectsPanelProps, VectorSceneNodes, VectorShadingPanel, type VectorShadingPanelProps, VectorStylePanel, type VectorStylePanelProps, VectorSymbolsPanel, type VectorSymbolsPanelProps, VectorSymmetryPanel, type VectorSymmetryPanelProps, VectorTextElement, VectorTextPanel, type VectorTextPanelProps, VectorToolbar, type VectorToolbarProps, VectorTracePanel, type VectorTracePanelProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState, useVectorEffectsTools, useVectorGenerationTools };

package/dist/vector/index.d.ts

@@ -1,4 +1,4 @@
-import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorEffectsToolProviderOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit } from '@pixerate/editor/vector';
+import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorEffectsToolProviderOptions, VectorGenerationToolProviderOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit, VectorArtModel, VectorArtGenerator } from '@pixerate/editor/vector';
 import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
 import { EffectProvider } from '@pixerate/editor/effects';
@@ -35,6 +35,12 @@ declare function useVectorCommands(registry: VectorCommandTarget | null | undefi
  * `registry` while mounted. They work once an effects provider is registered (see `useEffects`).
  */
 declare function useVectorEffectsTools(registry: ToolRegistry | null | undefined, controller: VectorEditorController, options?: VectorEffectsToolProviderOptions): void;
+/**
+ * Registers the vector editor's generative-prompt tools (`list_vector_art_models`,
+ * `generate_vector_art`, `regenerate_vector_art`) for the lifetime of the component. `models` and
+ * `generate` are read fresh on every call, so they may change between renders.
+ */
+declare function useVectorGenerationTools(registry: ToolRegistry | null | undefined, controller: VectorEditorController, options: VectorGenerationToolProviderOptions): void;
 
 interface VectorCanvasProps {
     controller: VectorEditorController;
@@ -311,8 +317,9 @@ interface VectorTracePanelProps {
     className?: string;
 }
 /**
- * Image Trace: pick an image file and trace it into paths, in one colour (dark areas) or a stacked
- * path per colour. The traced group goes on the artboard at its width. One undo step.
+ * Image Trace and stylise: pick an image file and trace it into paths, in one colour (dark areas)
+ * or a stacked path per colour, or stylise it as mosaic tiles, halftone dots, low-poly triangles
+ * or engraving lines. The group goes on the artboard at its width. One undo step.
  */
 declare function VectorTracePanel({ controller, className }: VectorTracePanelProps): React__default.JSX.Element;
 
@@ -360,4 +367,18 @@ interface VectorProviderEffectsPanelProps {
  */
 declare function VectorProviderEffectsPanel({ controller, className }: VectorProviderEffectsPanelProps): React__default.JSX.Element;
 
-export { type UseVectorEditorResult, VectorAppearancePanel, type VectorAppearancePanelProps, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorConnectorPanel, type VectorConnectorPanelProps, VectorConstraintsPanel, type VectorConstraintsPanelProps, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorEnvelopePanel, type VectorEnvelopePanelProps, VectorFilterDefs, VectorFramePanel, type VectorFramePanelProps, VectorGradientAnnotator, VectorGradientDefs, VectorGradientEditor, type VectorGradientEditorProps, VectorLensPanel, type VectorLensPanelProps, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, VectorPagesPanel, type VectorPagesPanelProps, VectorPerspectivePanel, type VectorPerspectivePanelProps, VectorProviderEffectsPanel, type VectorProviderEffectsPanelProps, VectorSceneNodes, VectorShadingPanel, type VectorShadingPanelProps, VectorStylePanel, type VectorStylePanelProps, VectorSymbolsPanel, type VectorSymbolsPanelProps, VectorSymmetryPanel, type VectorSymmetryPanelProps, VectorTextElement, VectorTextPanel, type VectorTextPanelProps, VectorToolbar, type VectorToolbarProps, VectorTracePanel, type VectorTracePanelProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState, useVectorEffectsTools };
+interface VectorGeneratePanelProps {
+    controller: VectorEditorController;
+    /** The host's models (image models are traced or stylised; text models write SVG). */
+    models: readonly VectorArtModel[];
+    /** The host's generator (sends a planned request to its model). */
+    generate: VectorArtGenerator;
+    className?: string;
+}
+/**
+ * Generative prompts: describe art, pick a model (and, for image models, how the picture becomes
+ * vectors) and generate it into the artboard as one editable group. One undo step.
+ */
+declare function VectorGeneratePanel({ controller, models, generate, className }: VectorGeneratePanelProps): React__default.JSX.Element | null;
+
+export { type UseVectorEditorResult, VectorAppearancePanel, type VectorAppearancePanelProps, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorConnectorPanel, type VectorConnectorPanelProps, VectorConstraintsPanel, type VectorConstraintsPanelProps, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorEnvelopePanel, type VectorEnvelopePanelProps, VectorFilterDefs, VectorFramePanel, type VectorFramePanelProps, VectorGeneratePanel, type VectorGeneratePanelProps, VectorGradientAnnotator, VectorGradientDefs, VectorGradientEditor, type VectorGradientEditorProps, VectorLensPanel, type VectorLensPanelProps, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, VectorPagesPanel, type VectorPagesPanelProps, VectorPerspectivePanel, type VectorPerspectivePanelProps, VectorProviderEffectsPanel, type VectorProviderEffectsPanelProps, VectorSceneNodes, VectorShadingPanel, type VectorShadingPanelProps, VectorStylePanel, type VectorStylePanelProps, VectorSymbolsPanel, type VectorSymbolsPanelProps, VectorSymmetryPanel, type VectorSymmetryPanelProps, VectorTextElement, VectorTextPanel, type VectorTextPanelProps, VectorToolbar, type VectorToolbarProps, VectorTracePanel, type VectorTracePanelProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState, useVectorEffectsTools, useVectorGenerationTools };

package/dist/vector/index.js

@@ -11,7 +11,8 @@ import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import {
   VectorEditorController,
   createVectorCommands,
-  createVectorEffectsToolProvider
+  createVectorEffectsToolProvider,
+  createVectorGenerationToolProvider
 } from "@pixerate/editor/vector";
 function useVectorEditorController(options = {}) {
   const ref = useRef(null);
@@ -58,6 +59,30 @@ function useVectorEffectsTools(registry, controller, options = {}) {
     return registry.register(createVectorEffectsToolProvider(controller, { id, namespace, readOnly }));
   }, [registry, controller, id, namespace, readOnly]);
 }
+function useVectorGenerationTools(registry, controller, options) {
+  const latest = useRef(options);
+  latest.current = options;
+  const { id, namespace } = options;
+  useEffect(() => {
+    if (!registry) return;
+    const models = () => {
+      const m = latest.current.models;
+      return typeof m === "function" ? m() : m;
+    };
+    return registry.register(
+      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
 import React2, { useEffect as useEffect2, useId, useRef as useRef3, useState as useState2 } from "react";
@@ -252,7 +277,12 @@ var VectorSceneNode = React2.memo(function VectorSceneNode2({ node }) {
   if (node.layers)
     return (
       // Fill and stroke stacks: each layer in order, bottom to top.
-      /* @__PURE__ */ jsx2("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__ */ jsx2(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)) })
+      /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("image", { href: im.href, x: im.x, y: im.y, width: im.width, height: im.height, preserveAspectRatio: "none" }, i)) }, `${layer.kind}-${layer.index}`)
+        ) : /* @__PURE__ */ jsx2(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)
+      ) })
     );
   return /* @__PURE__ */ jsx2(VectorPaintPath, { paint: node, d: node.d, fillRule: node.fillRule, id: node.id, transform: node.transform, filter: node.filter, blendMode: node.blendMode });
 });
@@ -611,6 +641,7 @@ function VectorCanvas({
             overlay.builder.lines.map((d, i) => /* @__PURE__ */ jsx2("path", { "data-vector-builder-line": "", d, fill: "none", stroke: THEME2.builderErase, strokeWidth: 3, strokeLinecap: "round" }, `l${i}`)),
             overlay.builder.trail && /* @__PURE__ */ jsx2("path", { "data-vector-builder-trail": "", d: overlay.builder.trail, fill: "none", stroke: overlay.builder.mode === "erase" ? THEME2.builderErase : accentColor, strokeWidth: 1 })
           ] }),
+          overlay.brush && /* @__PURE__ */ jsx2("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__ */ jsx2(
             "path",
             {
@@ -793,6 +824,7 @@ function VectorCanvas({
 import React10 from "react";
 import {
   VECTOR_TOOLS,
+  VECTOR_DISTORT_BRUSH_MODES,
   VECTOR_TOOL_GLYPHS,
   VECTOR_TOOL_SHORTCUTS,
   VECTOR_EDIT_TOGGLES,
@@ -977,7 +1009,8 @@ import {
   VECTOR_BLEND_MODE_MENU,
   VECTOR_FILTER_MENU,
   VECTOR_STROKE_ALIGN_LABELS,
-  getVectorAppearancePanel
+  getVectorAppearancePanel,
+  vectorBrushstrokeBrushes
 } from "@pixerate/editor/vector";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var buttonClass2 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
@@ -994,6 +1027,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__ */ jsx4("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-layer": `${l.kind}-${l.index}`, "data-vector-brushstroke": "", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx4("input", { type: "checkbox", "aria-label": `${name} visible`, title: "Show", checked: l.visible, onChange: (e) => update(l, { visible: e.target.checked }) }),
+        /* @__PURE__ */ jsx4("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__ */ jsx4("select", { "aria-label": `${name} brush`, className: selectClass2, value: l.brushstroke.brushId, onChange: (e) => controller.setBrushstroke(l.index, { brushId: e.target.value }, { ids }), children: vectorBrushstrokeBrushes().map((b) => /* @__PURE__ */ jsx4("option", { value: b.id, children: b.name }, b.id)) }),
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4("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__ */ jsxs4("div", { className: "text-[11px] text-muted-foreground", "data-vector-layer": `${l.kind}-${l.index}`, children: [
         name,
@@ -1089,7 +1146,8 @@ function VectorAppearancePanel({ controller, className }) {
           onClick: () => controller.addPaintLayer(kind, {}, { ids }),
           children: "+"
         }
-      )
+      ),
+      kind === "stroke" && /* @__PURE__ */ jsx4("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: vectorBrushstrokeBrushes()[0].id }, { ids }), children: "\u270E+" })
     ] }),
     [...layers].reverse().map((l) => layerRow(l, layers.length))
   ] });
@@ -2028,6 +2086,7 @@ function VectorShadingPanel({ controller, className }) {
 
 // src/vector/VectorTracePanel.tsx
 import { useRef as useRef4, useState as useState6 } from "react";
+import { VECTOR_STYLIZE_LABELS, VECTOR_STYLIZE_STYLES } from "@pixerate/editor/vector";
 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";
@@ -2054,7 +2113,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.");
@@ -2065,7 +2125,8 @@ function VectorTracePanel({ controller, className }) {
       /* @__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" })
+        /* @__PURE__ */ jsx14("option", { value: "color", children: "Colours" }),
+        VECTOR_STYLIZE_STYLES.map((s) => /* @__PURE__ */ jsx14("option", { value: s, children: VECTOR_STYLIZE_LABELS[s] }, s))
       ] }),
       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" }),
@@ -2543,6 +2604,20 @@ function VectorToolbar({
           }
         )
       ] }),
+      state.tool === "distort" && /* @__PURE__ */ jsxs19("span", { className: "flex flex-wrap items-center gap-1", "data-vector-distort-options": "", children: [
+        /* @__PURE__ */ jsx19("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: VECTOR_DISTORT_BRUSH_MODES.map((m) => /* @__PURE__ */ jsx19("option", { value: m, children: m[0].toUpperCase() + m.slice(1) }, m)) }),
+        /* @__PURE__ */ jsxs19("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+          "Size",
+          /* @__PURE__ */ jsx19("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__ */ jsxs19("label", { className: "flex items-center gap-1 text-xs text-foreground", children: [
+          "Strength",
+          /* @__PURE__ */ jsx19("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__ */ jsx19(
         "button",
         {
@@ -2997,6 +3072,44 @@ function VectorEditor({ controller, tools, showStylePanel = true, height = 520,
     ] })
   ] });
 }
+
+// src/vector/VectorGeneratePanel.tsx
+import { useState as useState8 } from "react";
+import { VECTOR_GENERATED_IMAGE_AS, generateVectorArt, vectorArtModels } from "@pixerate/editor/vector";
+import { jsx as jsx22, jsxs as jsxs22 } from "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 = vectorArtModels(models);
+  const [prompt, setPrompt] = useState8("");
+  const [model, setModel] = useState8("");
+  const [as, setAs] = useState8("color");
+  const [busy, setBusy] = useState8(false);
+  const [message, setMessage] = useState8(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 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__ */ jsxs22("div", { className: `space-y-1 ${className ?? ""}`, "data-vector-generate-panel": "", "aria-label": "Generate", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx22("span", { className: "w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Generate" }),
+      /* @__PURE__ */ jsx22("select", { "aria-label": "Generation model", className: selectClass15, value: chosen.id, onChange: (e) => setModel(e.target.value), children: usable.map((m) => /* @__PURE__ */ jsx22("option", { value: m.id, children: m.name ?? m.id }, m.id)) }),
+      chosen.media === "image" && /* @__PURE__ */ jsx22("select", { "aria-label": "Image to vectors", className: selectClass15, value: as, onChange: (e) => setAs(e.target.value), children: VECTOR_GENERATED_IMAGE_AS.map((a) => /* @__PURE__ */ jsx22("option", { value: a, children: AS_LABELS[a] }, a)) })
+    ] }),
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx22("span", { className: "w-16" }),
+      /* @__PURE__ */ jsx22("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__ */ jsx22("button", { type: "button", className: buttonClass17, "data-vector-generate-action": "", disabled: !prompt.trim() || busy, onClick: () => void run(), children: busy ? "Generating\u2026" : "Generate" })
+    ] }),
+    message && /* @__PURE__ */ jsx22("p", { className: "text-[11px] text-red-600", children: message })
+  ] });
+}
 export {
   VectorAppearancePanel,
   VectorCanvas,
@@ -3007,6 +3120,7 @@ export {
   VectorEnvelopePanel,
   VectorFilterDefs,
   VectorFramePanel,
+  VectorGeneratePanel,
   VectorGradientAnnotator,
   VectorGradientDefs,
   VectorGradientEditor,
@@ -3030,6 +3144,7 @@ export {
   useVectorEditor,
   useVectorEditorController,
   useVectorEditorState,
-  useVectorEffectsTools
+  useVectorEffectsTools,
+  useVectorGenerationTools
 };
 //# sourceMappingURL=index.js.map