@pixerate/editor-react 0.68.1 → 0.70.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;
@@ -60,8 +87,10 @@ interface BrushPanelProps {
 /**
  * The brush library (thumbnails rendered from a test stroke on the current paper, grouped by
  * category) and the active brush's settings: size, opacity, flow, hardness, spacing, roundness,
- * angle, paper grain, position and pressure smoothing, dynamics and rotation mode. Save the edited
- * brush, import and export libraries as JSON.
+ * angle, paper grain, position and pressure smoothing, dynamics, rotation mode and blend mode;
+ * then the engine's own controls (`brushEngineControls`): blender strength and blend distance,
+ * smudge strength and length, pick-up and mix ratios, RGB / pigment mixing, dirty brush,
+ * multi-colour and the brush load. Save the edited brush, import and export libraries as JSON.
  */
 declare const BrushPanel: React__default.FC<BrushPanelProps>;
 
@@ -87,7 +116,8 @@ interface ColorPanelProps {
 /**
  * Colour: a hue wheel (painter's RYB or RGB) with the chosen harmony marked on it, saturation and
  * value, the paint and second colours, harmony chips, swatches, and a mixing pad to paint on,
- * smear with a palette knife (pigment mixing) and pick from.
+ * smear with a palette knife (pigment mixing) and pick from (with a sample size), mix the paint
+ * and second colours in measured parts on, and keep by name.
  */
 declare const ColorPanel: React__default.FC<ColorPanelProps>;
 
@@ -108,6 +138,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 +159,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);
@@ -458,8 +477,19 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
 
 // src/paint-editor/BrushPanel.tsx
 import { useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
-import { BRUSH_ROTATIONS, BRUSH_SLIDERS, downloadBytes as downloadBytes2, patchPath, readPath } from "@pixerate/editor/paint-editor";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import {
+  BLEND_MENU_GROUPS,
+  BRUSH_ROTATIONS,
+  BRUSH_SLIDERS,
+  brushEngineControls,
+  brushLoadColor,
+  downloadBytes as downloadBytes2,
+  multiColorSliders,
+  patchBrushValue,
+  patchPath,
+  readPath
+} from "@pixerate/editor/paint-editor";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
@@ -473,6 +503,10 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, brushes, paper, thumbnailWidth, thumbnailHeight]
   );
+  const engine = brushEngineControls(brush);
+  const mc = brush.behavior.multicolor;
+  const carried = brushLoadColor(state.mixerLoad);
+  const setColors = (colors) => controller.setBrush({ behavior: { multicolor: { colors } } });
   const slug = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) || "brush";
   return /* @__PURE__ */ jsxs4("div", { className: `${panel} ${className ?? ""}`, "data-testid": "brush-panel", children: [
     /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-2 gap-1", role: "listbox", "aria-label": "Brushes", children: brushes.map((b) => /* @__PURE__ */ jsxs4(
@@ -504,6 +538,68 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
       /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: brush.tip.pressureOpacity, onChange: (e) => controller.setBrush({ tip: { pressureOpacity: e.target.checked } }) }),
         " Pressure \u2192 opacity"
+      ] }),
+      brush.engine === "dab" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ jsx4("select", { "aria-label": "Brush blend", value: brush.tip.blend, onChange: (e) => controller.setBrush({ tip: { blend: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ jsx4("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx4("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label)) })
+      ] })
+    ] }),
+    engine && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-engine", children: [
+      /* @__PURE__ */ jsx4("span", { className: "font-medium text-slate-300", children: engine.title }),
+      engine.sliders.map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path)),
+      engine.mixingPath && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Mixing" }),
+        /* @__PURE__ */ jsxs4(
+          "select",
+          {
+            "aria-label": "Brush mixing",
+            value: engine.mixingPath === "blender.mixing" ? brush.blender.mixing : engine.mixingPath === "smudge.mixing" ? brush.smudge.mixing : brush.behavior.mixing,
+            onChange: (e) => controller.setBrush(patchBrushValue(brush, engine.mixingPath, e.target.value)),
+            className: "rounded bg-slate-800 px-1 py-0.5",
+            children: [
+              /* @__PURE__ */ jsx4("option", { value: "pigment", children: "Pigment" }),
+              /* @__PURE__ */ jsx4("option", { value: "rgb", children: "RGB" })
+            ]
+          }
+        )
+      ] }),
+      engine.dirty && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", title: "Keep the colour the brush picked up for the next stroke (needs Pick-up above 0)", children: [
+        /* @__PURE__ */ jsx4("input", { type: "checkbox", "aria-label": "Dirty brush", checked: brush.behavior.dirty, onChange: (e) => controller.setBrush({ behavior: { dirty: e.target.checked } }) }),
+        " Dirty brush"
+      ] }),
+      engine.multicolor && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "multicolor", children: [
+        /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Multi-colour" }),
+          /* @__PURE__ */ jsxs4("select", { "aria-label": "Multi-colour", value: mc.mode, onChange: (e) => controller.setBrush({ behavior: { multicolor: { mode: e.target.value } } }), className: "rounded bg-slate-800 px-1 py-0.5", children: [
+            /* @__PURE__ */ jsx4("option", { value: "off", children: "Off" }),
+            /* @__PURE__ */ jsx4("option", { value: "tip", children: "Across the tip" }),
+            /* @__PURE__ */ jsx4("option", { value: "dab", children: "Per dab" })
+          ] })
+        ] }),
+        mc.mode !== "off" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", "aria-label": "Multi-colour colours", children: [
+            mc.colors.map((col, i) => /* @__PURE__ */ jsxs4("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx4("input", { type: "color", "aria-label": `Multi-colour ${i + 1}`, value: col, onChange: (e) => setColors(mc.colors.map((x, j) => j === i ? e.target.value : x)), className: "h-5 w-6 rounded bg-transparent" }),
+              /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": `Remove multi-colour ${i + 1}`, className: "px-0.5 text-slate-500 hover:text-white", onClick: () => setColors(mc.colors.filter((_, j) => j !== i)), children: "\xD7" })
+            ] }, i)),
+            mc.colors.length < 8 && /* @__PURE__ */ jsx4("button", { type: "button", className: button, "aria-label": "Add multi-colour", onClick: () => setColors([...mc.colors.length ? mc.colors : [state.color, state.secondaryColor], state.color].slice(0, 8)), children: "+" }),
+            mc.colors.length < 2 && /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-slate-500", children: "Uses the paint and second colours" })
+          ] }),
+          mc.mode === "dab" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Order" }),
+            /* @__PURE__ */ jsxs4("select", { "aria-label": "Colour order", value: mc.order, onChange: (e) => controller.setBrush({ behavior: { multicolor: { order: e.target.value } } }), className: "rounded bg-slate-800 px-1 py-0.5", children: [
+              /* @__PURE__ */ jsx4("option", { value: "sequence", children: "In order" }),
+              /* @__PURE__ */ jsx4("option", { value: "random", children: "Random" })
+            ] })
+          ] }),
+          multiColorSliders(mc.mode).map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path))
+        ] })
+      ] }),
+      engine.load && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Carries" }),
+        /* @__PURE__ */ jsx4("span", { "aria-label": "Brush load", title: carried ?? "Clean", className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: carried ?? "transparent" } }),
+        brush.engine === "mixer" && /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => controller.loadMixerBrush(), children: "Load" }),
+        /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => controller.cleanMixerBrush(brush.engine === "mixer"), children: "Clean" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", children: [
@@ -579,7 +675,9 @@ import {
   HARMONY_KINDS,
   MIXING_PAD_HEIGHT,
   MIXING_PAD_WIDTH,
+  PAD_SAMPLE_SIZES,
   hsvToRgb,
+  padSampleRadius,
   hueToWheel,
   parseHexColor,
   renderColorWheel,
@@ -595,6 +693,9 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
   const [wheel, setWheel] = useState5("ryb");
   const [kind, setKind] = useState5("complementary");
   const [padTool, setPadTool] = useState5("paint");
+  const [sample, setSample] = useState5(3);
+  const [parts, setParts] = useState5([1, 1]);
+  const [padName, setPadName] = useState5("");
   const padPoints = useRef5(null);
   const ring = useMemo5(() => renderColorWheel(wheelSize, wheel), [wheelSize, wheel]);
   const color = state.color;
@@ -706,7 +807,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
           onPointerDown: (e) => {
             const p = padPoint(e);
             if (padTool === "pick") {
-              attempt(() => controller.mixingPadPick(p.x, p.y, { setColor: true }));
+              attempt(() => controller.mixingPadPick(p.x, p.y, { setColor: true, radius: padSampleRadius(sample) }));
               return;
             }
             padPoints.current = [p];
@@ -720,7 +821,44 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
           },
           children: /* @__PURE__ */ jsx6(PixelCanvas, { pixels: pad, label: "Mixing pad pixels", className: "w-full rounded", style: { aspectRatio: `${MIXING_PAD_WIDTH} / ${MIXING_PAD_HEIGHT}` } })
         }
-      )
+      ),
+      /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-slate-400", children: "Sample" }),
+        /* @__PURE__ */ jsx6("select", { "aria-label": "Pick sample size", value: sample, onChange: (e) => setSample(Number(e.target.value)), className: "rounded bg-slate-800 px-1 py-0.5", children: PAD_SAMPLE_SIZES.map((n) => /* @__PURE__ */ jsx6("option", { value: n, children: n === 1 ? "1 px" : `${n}\xD7${n}` }, n)) })
+      ] }) }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: color } }),
+        /* @__PURE__ */ jsx6("input", { type: "number", "aria-label": "Paint colour parts", min: 0, max: 20, value: parts[0], onChange: (e) => setParts([Number(e.target.value), parts[1]]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
+        /* @__PURE__ */ jsx6("span", { className: "text-slate-500", children: ":" }),
+        /* @__PURE__ */ jsx6("input", { type: "number", "aria-label": "Second colour parts", min: 0, max: 20, value: parts[1], onChange: (e) => setParts([parts[0], Number(e.target.value)]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
+        /* @__PURE__ */ jsx6("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: state.secondaryColor } }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            className: button,
+            title: "Mix the paint and second colours in these parts on the pad, and use the mix",
+            onClick: () => attempt(
+              () => controller.mixOnPad(
+                [
+                  { color, parts: parts[0] },
+                  { color: state.secondaryColor, parts: parts[1] }
+                ],
+                { setColor: true }
+              )
+            ),
+            children: "Mix"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("input", { value: padName, placeholder: "Pad name", "aria-label": "Pad name", onChange: (e) => setPadName(e.target.value), className: "w-24 rounded bg-slate-800 px-1.5 py-0.5" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: button, onClick: () => attempt(() => (controller.saveMixingPad(padName || void 0), setPadName(""))), children: "Keep pad" })
+      ] }),
+      state.savedMixingPads.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-0.5", "aria-label": "Kept pads", children: state.savedMixingPads.map((p) => /* @__PURE__ */ jsxs6("li", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", className: `${button} flex-1 text-left`, onClick: () => attempt(() => controller.loadMixingPad(p.id)), children: p.name }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: button, "aria-label": `Remove ${p.name}`, onClick: () => attempt(() => controller.removeMixingPad(p.id)), children: "\xD7" })
+      ] }, p.id)) })
     ] }),
     /* @__PURE__ */ jsx6(ErrorLine, { error })
   ] });
@@ -728,7 +866,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
 
 // src/paint-editor/PaintLayersPanel.tsx
 import { useState as useState6 } from "react";
-import { BLEND_MENU_GROUPS } from "@pixerate/editor/paint-editor";
+import { BLEND_MENU_GROUPS as BLEND_MENU_GROUPS2 } 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 +963,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_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))
+          BLEND_MENU_GROUPS2.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 +978,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 +987,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 +1005,11 @@ export {
   PaintCanvas,
   PaintEditor,
   PaintLayersPanel,
+  PaintPresenceLayer,
   PaintSlider,
   PaintToolbar,
   PaperPanel,
+  usePaintDirector,
   usePaintEditor,
   usePaintEditorState
 };