@pixerate/editor-react 0.78.1 → 0.80.0

package/dist/vector/index.d.cts

@@ -1,5 +1,7 @@
-import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit } from '@pixerate/editor/vector';
+import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorEffectsToolProviderOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit } from '@pixerate/editor/vector';
+import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
+import { EffectProvider } from '@pixerate/editor/effects';
 
 /** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */
 declare function useVectorEditorController(options?: VectorEditorOptions): VectorEditorController;
@@ -28,6 +30,11 @@ interface VectorCommandTarget {
  * in `registry` while mounted, so `createCommandToolProvider` exposes them to agents.
  */
 declare function useVectorCommands(registry: VectorCommandTarget | null | undefined, controller: VectorEditorController, options?: VectorCommandOptions): void;
+/**
+ * Registers the vector editor's provider-effect tools (`search_effects`, `apply_effect`, …) in
+ * `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;
 
 interface VectorCanvasProps {
     controller: VectorEditorController;
@@ -186,10 +193,16 @@ interface VectorEditorProps {
     /** Canvas height (default 520px). */
     height?: number | string;
     canvasProps?: Omit<VectorCanvasProps, 'controller'>;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: provider vector effects as groups, with an Effects section under the style panel.
+     * Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
     className?: string;
 }
 /** Toolbar, canvas and style panel for a `VectorEditorController`. */
-declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, className }: VectorEditorProps): React__default.JSX.Element;
+declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, effects, className }: VectorEditorProps): React__default.JSX.Element;
 
 interface VectorGradientEditorProps {
     controller: VectorEditorController;
@@ -304,4 +317,15 @@ interface VectorSymmetryPanelProps {
  */
 declare function VectorSymmetryPanel({ controller, className }: VectorSymmetryPanelProps): 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, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, 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 };
+interface VectorProviderEffectsPanelProps {
+    controller: VectorEditorController;
+    className?: string;
+}
+/**
+ * Provider vector effects in a drawing: add one (its picture at rest becomes a selected group of
+ * editable shapes), draw it again with new values, or detach it to keep the shapes. Motion is
+ * applied in the animation editor.
+ */
+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, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, 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 };

package/dist/vector/index.d.ts

@@ -1,5 +1,7 @@
-import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit } from '@pixerate/editor/vector';
+import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorEffectsToolProviderOptions, VectorRenderFilter, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderMask, VectorRenderNode, VectorRenderText, VectorWidthPointEdit } from '@pixerate/editor/vector';
+import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
+import { EffectProvider } from '@pixerate/editor/effects';
 
 /** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */
 declare function useVectorEditorController(options?: VectorEditorOptions): VectorEditorController;
@@ -28,6 +30,11 @@ interface VectorCommandTarget {
  * in `registry` while mounted, so `createCommandToolProvider` exposes them to agents.
  */
 declare function useVectorCommands(registry: VectorCommandTarget | null | undefined, controller: VectorEditorController, options?: VectorCommandOptions): void;
+/**
+ * Registers the vector editor's provider-effect tools (`search_effects`, `apply_effect`, …) in
+ * `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;
 
 interface VectorCanvasProps {
     controller: VectorEditorController;
@@ -186,10 +193,16 @@ interface VectorEditorProps {
     /** Canvas height (default 520px). */
     height?: number | string;
     canvasProps?: Omit<VectorCanvasProps, 'controller'>;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: provider vector effects as groups, with an Effects section under the style panel.
+     * Optional: without one the editor is as before.
+     */
+    effects?: EffectProvider | null;
     className?: string;
 }
 /** Toolbar, canvas and style panel for a `VectorEditorController`. */
-declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, className }: VectorEditorProps): React__default.JSX.Element;
+declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, effects, className }: VectorEditorProps): React__default.JSX.Element;
 
 interface VectorGradientEditorProps {
     controller: VectorEditorController;
@@ -304,4 +317,15 @@ interface VectorSymmetryPanelProps {
  */
 declare function VectorSymmetryPanel({ controller, className }: VectorSymmetryPanelProps): 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, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, 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 };
+interface VectorProviderEffectsPanelProps {
+    controller: VectorEditorController;
+    className?: string;
+}
+/**
+ * Provider vector effects in a drawing: add one (its picture at rest becomes a selected group of
+ * editable shapes), draw it again with new values, or detach it to keep the shapes. Motion is
+ * applied in the animation editor.
+ */
+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, VectorMaskPanel, type VectorMaskPanelProps, VectorMaskedNodes, 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 };

package/dist/vector/index.js

@@ -1,8 +1,17 @@
+import {
+  EffectParameters,
+  EffectsBrowser,
+  useEffectDescription,
+  useEffects
+} from "../chunk-WOQ3H7KA.js";
+import "../chunk-ZQZAKUUM.js";
+
 // src/vector/useVectorEditor.ts
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import {
   VectorEditorController,
-  createVectorCommands
+  createVectorCommands,
+  createVectorEffectsToolProvider
 } from "@pixerate/editor/vector";
 function useVectorEditorController(options = {}) {
   const ref = useRef(null);
@@ -42,6 +51,13 @@ function useVectorCommands(registry, controller, options = {}) {
     return registry.register(createVectorCommands(controller, { prefix, group, scope }));
   }, [registry, controller, prefix, group, scope]);
 }
+function useVectorEffectsTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly } = options;
+  useEffect(() => {
+    if (!registry) return;
+    return registry.register(createVectorEffectsToolProvider(controller, { id, namespace, readOnly }));
+  }, [registry, controller, id, namespace, readOnly]);
+}
 
 // src/vector/VectorCanvas.tsx
 import React2, { useEffect as useEffect2, useId, useRef as useRef3, useState as useState2 } from "react";
@@ -2764,14 +2780,85 @@ function VectorStylePanel({ controller, className }) {
   ] });
 }
 
+// src/vector/VectorProviderEffectsPanel.tsx
+import { useState as useState7, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs17 } 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;
+  const tag = group.providerEffect;
+  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__ */ jsx17("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider: the shapes are kept as they are." });
+  if (error) return /* @__PURE__ */ jsx17("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ jsx17("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsxs17(Fragment7, { children: [
+    /* @__PURE__ */ jsx17(
+      EffectParameters,
+      {
+        description,
+        values: tag.values,
+        onChange: (k, v) => run(controller.updateVectorEffect(group.id, { [k]: v })),
+        onReset: (k) => run(controller.updateVectorEffect(group.id, { [k]: null })),
+        onPreset: (v) => run(controller.updateVectorEffect(group.id, v))
+      }
+    ),
+    message && /* @__PURE__ */ jsx17("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+function VectorProviderEffectsPanel({ controller, className = "" }) {
+  const state = useVectorEditorState(controller);
+  const provider = useSyncExternalStore2(
+    (cb) => controller.effects.subscribe(cb),
+    () => controller.effects.provider,
+    () => controller.effects.provider
+  );
+  const [browse, setBrowse] = useState7(false);
+  const [message, setMessage] = useState7(null);
+  void state;
+  const groups = controller.vectorEffectGroups();
+  const selected = groups.filter((g) => state.selection.includes(g.id));
+  const run = (work) => {
+    setMessage(null);
+    Promise.resolve().then(work).catch((e) => setMessage(e instanceof Error ? e.message : String(e)));
+  };
+  return /* @__PURE__ */ jsxs17("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Vector effects", "data-vector-provider-effects": "", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx17("span", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ jsx17("button", { type: "button", className: btn, disabled: !provider, "aria-pressed": browse, onClick: () => setBrowse(!browse), children: "Add effect\u2026" })
+    ] }),
+    !provider && /* @__PURE__ */ jsx17("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effect groups are kept as shapes." }),
+    browse && /* @__PURE__ */ jsx17(EffectsBrowser, { provider, kinds: ["vector"], title: "Vector effects", onPick: (e) => (setBrowse(false), run(() => controller.addVectorEffect(e.id))) }),
+    selected.map((g) => /* @__PURE__ */ jsxs17("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-effect-group": g.id, children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx17("span", { className: "min-w-0 flex-1 truncate font-medium", children: g.providerEffect.name ?? g.providerEffect.effect }),
+        /* @__PURE__ */ jsx17("button", { type: "button", className: btn, title: "Keep the shapes as a plain group", onClick: () => run(() => controller.detachVectorEffect(g.id)), children: "Detach" })
+      ] }),
+      /* @__PURE__ */ jsx17(Controls, { controller, group: g })
+    ] }, g.id)),
+    groups.length > 0 && !selected.length && /* @__PURE__ */ jsxs17("p", { className: "text-[11px] text-muted-foreground", children: [
+      "Select an effect group (",
+      groups.length,
+      " in the drawing) to change it."
+    ] }),
+    message && /* @__PURE__ */ jsx17("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+
 // src/vector/VectorEditor.tsx
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
-function VectorEditor({ controller, tools, showStylePanel = true, height = 520, canvasProps, className }) {
-  return /* @__PURE__ */ jsxs17("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
-    /* @__PURE__ */ jsx17(VectorToolbar, { controller, tools }),
-    /* @__PURE__ */ jsxs17("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ jsx17("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx17(VectorCanvas, { controller, ...canvasProps }) }),
-      showStylePanel && /* @__PURE__ */ jsx17(VectorStylePanel, { controller, className: "w-full shrink-0 rounded-md border border-border p-3 md:w-56" })
+import { jsx as jsx18, jsxs as jsxs18 } 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__ */ jsxs18("div", { className: `flex flex-col gap-2 ${className ?? ""}`, "data-vector-editor": "", children: [
+    /* @__PURE__ */ jsx18(VectorToolbar, { controller, tools }),
+    /* @__PURE__ */ jsxs18("div", { className: "flex min-h-0 flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx18("div", { className: "relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40", style: { height }, children: /* @__PURE__ */ jsx18(VectorCanvas, { controller, ...canvasProps }) }),
+      showStylePanel && /* @__PURE__ */ jsxs18("div", { className: "flex w-full shrink-0 flex-col gap-2 md:w-56", children: [
+        /* @__PURE__ */ jsx18(VectorStylePanel, { controller, className: "rounded-md border border-border p-3" }),
+        effectsShown && /* @__PURE__ */ jsx18(VectorProviderEffectsPanel, { controller, className: "rounded-md border border-border p-3" })
+      ] })
     ] })
   ] });
 }
@@ -2790,6 +2877,7 @@ export {
   VectorGradientEditor,
   VectorMaskPanel,
   VectorMaskedNodes,
+  VectorProviderEffectsPanel,
   VectorSceneNodes,
   VectorShadingPanel,
   VectorStylePanel,
@@ -2803,6 +2891,7 @@ export {
   useVectorCommands,
   useVectorEditor,
   useVectorEditorController,
-  useVectorEditorState
+  useVectorEditorState,
+  useVectorEffectsTools
 };
 //# sourceMappingURL=index.js.map