@pixerate/editor-react 0.68.0 → 0.69.0

package/dist/paint-editor/index.d.ts

@@ -1,4 +1,4 @@
-import { PaintEditorController, PaintEditorState, PaintEditorOptions, PaintTool, SliderControl } from '@pixerate/editor/paint-editor';
+import { PaintEditorController, PaintEditorState, PaintDirectorOptions, PaintPresence, PaintDirector, PaintEditorOptions, PaintTool, PaintView, SliderControl } from '@pixerate/editor/paint-editor';
 import React__default from 'react';
 
 interface UsePaintEditorReturn {
@@ -13,6 +13,15 @@ interface UsePaintEditorReturn {
 declare function usePaintEditor(options?: PaintEditorOptions | PaintEditorController): UsePaintEditorReturn;
 /** Subscribes to a controller's state. */
 declare function usePaintEditorState(controller: PaintEditorController): PaintEditorState;
+/**
+ * A `PaintPresence` and `PaintDirector` for a paint editor: pass `presence` to `PaintEditor` (or
+ * `PaintCanvas`) and `director` to `createPaintEditorToolProvider`, so agent strokes are painted
+ * live by a cursor on the canvas. Options are read on the first render.
+ */
+declare function usePaintDirector(controller: PaintEditorController, options?: Omit<PaintDirectorOptions, 'clock'>): {
+    presence: PaintPresence;
+    director: PaintDirector;
+};
 
 interface PaintCanvasProps {
     controller: PaintEditorController;
@@ -24,6 +33,8 @@ interface PaintCanvasProps {
     fitOnMount?: boolean;
     /** Called with a refusal (hidden or locked layer). */
     onError?: (message: string | null) => void;
+    /** Agent cursors to draw over the canvas (see `PaintDirector` and `usePaintDirector`). */
+    presence?: PaintPresence;
     className?: string;
 }
 /**
@@ -34,6 +45,22 @@ interface PaintCanvasProps {
  * rotation. Guides and floating reference images are drawn on top.
  */
 declare const PaintCanvas: React__default.FC<PaintCanvasProps>;
+/**
+ * Agent cursors and notes over the canvas. Positions are document pixels, placed through the view
+ * (zoom, pan, rotation, mirroring), while the cursors themselves stay upright and unscaled.
+ */
+declare const PaintPresenceLayer: React__default.FC<{
+    presence: PaintPresence;
+    view: PaintView;
+    canvas: {
+        width: number;
+        height: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+}>;
 
 interface PaintToolbarProps {
     controller: PaintEditorController;
@@ -108,6 +135,8 @@ interface PaintEditorProps {
     fileName?: string;
     /** Height of the editor (default 720 px). */
     height?: number | string;
+    /** Agent cursors to draw over the canvas (see `usePaintDirector`). */
+    presence?: PaintPresence;
     className?: string;
 }
 /**
@@ -127,4 +156,4 @@ declare const PaintSlider: React__default.FC<{
     onCommit?: (v: number) => void;
 }>;
 
-export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, type UsePaintEditorReturn, usePaintEditor, usePaintEditorState };
+export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, type UsePaintEditorReturn, usePaintDirector, usePaintEditor, usePaintEditorState };

package/dist/paint-editor/index.js

@@ -1,6 +1,6 @@
 // src/paint-editor/usePaintEditor.ts
 import { useMemo, useState, useSyncExternalStore } from "react";
-import { PaintEditorController } from "@pixerate/editor/paint-editor";
+import { PaintDirector, PaintEditorController, PaintPresence } from "@pixerate/editor/paint-editor";
 function usePaintEditor(options = {}) {
   const [controller] = useState(() => options instanceof PaintEditorController ? options : new PaintEditorController(options));
   const state = usePaintEditorState(controller);
@@ -13,19 +13,27 @@ function usePaintEditorState(controller) {
     () => controller.getState()
   );
 }
+function usePaintDirector(controller, options = {}) {
+  const [value] = useState(() => {
+    const presence = new PaintPresence();
+    return { presence, director: new PaintDirector(controller, presence, options) };
+  });
+  return value;
+}
 
 // src/paint-editor/PaintCanvas.tsx
-import { useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { useEffect, useMemo as useMemo2, useRef, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   PaintCanvasPresenter,
   PaintGesture,
+  documentToScreen,
   fitZoom,
   guideOverlay,
   handlePaintShortcut,
   viewCssTransform
 } from "@pixerate/editor/paint-editor";
 import { jsx, jsxs } from "react/jsx-runtime";
-var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount = true, onError, className }) => {
+var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount = true, onError, presence, className }) => {
   const state = usePaintEditorState(controller);
   const viewport = useRef(null);
   const canvas = useRef(null);
@@ -140,6 +148,7 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
           predicted.length > 0 && /* @__PURE__ */ jsx("polyline", { points: predicted.map((p) => `${p.x},${p.y}`).join(" "), fill: "none", stroke: state.color, strokeOpacity: 0.5, strokeWidth: Math.max(1, state.brush.tip.size / 2), strokeLinecap: "round" })
         ] }),
         state.guides.references.filter((r) => r.visible).map((r) => /* @__PURE__ */ jsx(ReferencePanel, { controller, id: r.id }, r.id)),
+        presence && /* @__PURE__ */ jsx(PaintPresenceLayer, { presence, view: state.view, canvas: doc, viewport: size }),
         /* @__PURE__ */ jsxs("div", { className: "absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none", "data-testid": "paint-view-status", children: [
           Math.round(state.view.zoom * 100),
           "% \xB7 ",
@@ -151,6 +160,16 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
     }
   );
 };
+var PaintPresenceLayer = ({ presence, view, canvas, viewport }) => {
+  const { actors } = useSyncExternalStore2(presence.subscribe, presence.getState, presence.getState);
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", "data-paint-presence": "", "aria-hidden": "true", children: actors.map((a) => {
+    const p = documentToScreen(view, canvas, viewport, a.x, a.y);
+    return /* @__PURE__ */ jsxs("div", { className: "absolute", style: { left: p.x, top: p.y }, "data-actor": a.id, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "20", viewBox: "0 0 18 20", className: "drop-shadow-md", style: { transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ jsx("path", { d: "M0 0 L0 15 L4.5 10.8 L7.6 17 L10.2 15.8 L7.2 9.7 L13.5 9.4 Z", fill: a.color, stroke: "white", strokeWidth: "1.4", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-4 top-4 w-max max-w-[240px] rounded-md px-2 py-0.5 text-[11px] font-semibold text-white shadow", style: { background: a.color }, children: a.message ?? a.name })
+    ] }, a.id);
+  }) });
+};
 var ReferencePanel = ({ controller, id }) => {
   const state = usePaintEditorState(controller);
   const ref = state.guides.references.find((r) => r.id === id);
@@ -728,7 +747,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
 
 // src/paint-editor/PaintLayersPanel.tsx
 import { useState as useState6 } from "react";
-import { BLEND_MODES } from "@pixerate/editor/paint-editor";
+import { BLEND_MENU_GROUPS } from "@pixerate/editor/paint-editor";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function siblingIndex(layers, l) {
   const sibs = layers.filter((x) => x.parentId === l.parentId).reverse();
@@ -825,7 +844,7 @@ var PaintLayersPanel = ({ controller, className }) => {
         /* @__PURE__ */ jsx7("span", { className: "w-14 text-slate-400", children: "Blend" }),
         /* @__PURE__ */ jsxs7("select", { "aria-label": "Layer blend", value: active.blend, onChange: (e) => attempt(() => controller.updateLayer(active.id, { blend: e.target.value })), className: "flex-1 rounded bg-slate-800 px-1 py-0.5", children: [
           active.type === "group" && /* @__PURE__ */ jsx7("option", { value: "pass-through", children: "Pass through" }),
-          BLEND_MODES.map((m) => /* @__PURE__ */ jsx7("option", { value: m.id, children: m.label }, m.id))
+          BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ jsx7("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx7("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label))
         ] })
       ] }),
       /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [
@@ -840,7 +859,7 @@ var PaintLayersPanel = ({ controller, className }) => {
 // src/paint-editor/PaintEditor.tsx
 import { useState as useState7 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var PaintEditor = ({ controller, fileName, height = 720, className }) => {
+var PaintEditor = ({ controller, fileName, height = 720, presence, className }) => {
   const [tool, setTool] = useState7("brush");
   const [tab, setTab] = useState7("color");
   const [error, setError] = useState7(null);
@@ -849,7 +868,7 @@ var PaintEditor = ({ controller, fileName, height = 720, className }) => {
     /* @__PURE__ */ jsxs8("div", { className: "flex min-h-0 flex-1 gap-2", children: [
       /* @__PURE__ */ jsx8(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
       /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx8(PaintCanvas, { controller, tool, onError: setError, className: "flex-1 rounded-lg" }),
+        /* @__PURE__ */ jsx8(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
         error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
       ] }),
       /* @__PURE__ */ jsxs8("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
@@ -867,9 +886,11 @@ export {
   PaintCanvas,
   PaintEditor,
   PaintLayersPanel,
+  PaintPresenceLayer,
   PaintSlider,
   PaintToolbar,
   PaperPanel,
+  usePaintDirector,
   usePaintEditor,
   usePaintEditorState
 };