@pixerate/editor-svelte 0.78.0 → 0.79.0

package/dist/paint-editor/PaintCanvas.svelte

@@ -7,10 +7,12 @@
     handlePaintShortcut,
     viewCssTransform,
     type PaintEditorController,
+    type PaintPresence,
     type PaintTool,
   } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import { paintEditorState } from './paintEditorRune.svelte.js';
+  import PaintPresenceLayer from './PaintPresenceLayer.svelte';
   import ReferencePanel from './ReferencePanel.svelte';
 
   interface Props {
@@ -23,9 +25,11 @@
     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 `createPaintDirector`). */
+    presence?: PaintPresence;
     class?: string;
   }
-  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, class: className = '' }: Props = $props();
+  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, class: className = '' }: Props = $props();
 
   const editor = paintEditorState(() => controller);
   const snap = $derived(editor.current);
@@ -157,6 +161,7 @@
   {#each snap.guides.references.filter((r) => r.visible) as r (r.id)}
     <ReferencePanel {controller} reference={r} />
   {/each}
+  {#if presence}<PaintPresenceLayer {presence} view={snap.view} canvas={doc} viewport={size} />{/if}
   <div class="absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none" data-testid="paint-view-status">
     {Math.round(snap.view.zoom * 100)}% · {Math.round(snap.view.rotation)}°{snap.view.mirror ? ' · mirrored' : ''}
   </div>

package/dist/paint-editor/PaintCanvas.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type PaintEditorController, type PaintPresence, type PaintTool } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** The active tool (default brush). */
@@ -9,6 +9,8 @@ interface Props {
     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 `createPaintDirector`). */
+    presence?: PaintPresence;
     class?: string;
 }
 declare const PaintCanvas: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/PaintCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaintCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintCanvas.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,+BAA+B,CAAC;AAMvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsHH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PaintCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintCanvas.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,+BAA+B,CAAC;AAOvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwHH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/paint-editor/PaintEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PaintEditorController, PaintTool } from '@pixerate/editor/paint-editor';
+  import type { PaintEditorController, PaintPresence, PaintTool } from '@pixerate/editor/paint-editor';
   import BrushPanel from './BrushPanel.svelte';
   import ColorPanel from './ColorPanel.svelte';
   import PaintCanvas from './PaintCanvas.svelte';
@@ -14,9 +14,11 @@
     fileName?: string;
     /** Height of the editor (default 720 px). */
     height?: number | string;
+    /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
+    presence?: PaintPresence;
     class?: string;
   }
-  let { controller, fileName, height = 720, class: className = '' }: Props = $props();
+  let { controller, fileName, height = 720, presence, class: className = '' }: Props = $props();
   let tool = $state<PaintTool>('brush');
   let tab = $state<'color' | 'paper' | 'layers'>('color');
   let error = $state<string | null>(null);
@@ -28,7 +30,7 @@
   <div class="flex min-h-0 flex-1 gap-2">
     <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
     <div class="flex min-w-0 flex-1 flex-col">
-      <PaintCanvas {controller} {tool} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <PaintCanvas {controller} {tool} {presence} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
       {#if error}<p role="alert" class="mt-1 text-[11px] text-rose-400">{error}</p>{/if}
     </div>
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">

package/dist/paint-editor/PaintEditor.svelte.d.ts

@@ -1,10 +1,12 @@
-import type { PaintEditorController } from '@pixerate/editor/paint-editor';
+import type { PaintEditorController, PaintPresence } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** Base name of saved and exported files (default `painting`). */
     fileName?: string;
     /** Height of the editor (default 720 px). */
     height?: number | string;
+    /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
+    presence?: PaintPresence;
     class?: string;
 }
 declare const PaintEditor: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/PaintEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaintEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAa,MAAM,+BAA+B,CAAC;AAUpF,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"PaintEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAa,MAAM,+BAA+B,CAAC;AAUnG,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/paint-editor/PaintLayersPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BLEND_MODES, type BlendMode, type PaintEditorController, type PaintLayerInfo } from '@pixerate/editor/paint-editor';
+  import { BLEND_MENU_GROUPS, type BlendMode, type PaintEditorController, type PaintLayerInfo } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
@@ -91,8 +91,12 @@
         <span class="w-14 text-slate-400">Blend</span>
         <select aria-label="Layer blend" value={active.blend} onchange={(e) => run(() => controller.updateLayer(active.id, { blend: e.currentTarget.value as BlendMode }))} class="flex-1 rounded bg-slate-800 px-1 py-0.5">
           {#if active.type === 'group'}<option value="pass-through">Pass through</option>{/if}
-          {#each BLEND_MODES as m (m.id)}
-            <option value={m.id}>{m.label}</option>
+          {#each BLEND_MENU_GROUPS as g (g.label)}
+            <optgroup label={g.label}>
+              {#each g.modes as m (m.id)}
+                <option value={m.id} title={m.description}>{m.label}</option>
+              {/each}
+            </optgroup>
           {/each}
         </select>
       </label>

package/dist/paint-editor/PaintLayersPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaintLayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintLayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+B,KAAK,qBAAqB,EAAuB,MAAM,+BAA+B,CAAC;AAK3H,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwFH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PaintLayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintLayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,qBAAqB,EAAuB,MAAM,+BAA+B,CAAC;AAKjI,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4FH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/paint-editor/PaintPresenceLayer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { documentToScreen, type PaintPresence, type PaintPresenceState, type PaintView } from '@pixerate/editor/paint-editor';
+
+  interface Props {
+    /** Agent cursors to draw (see `PaintDirector`). */
+    presence: PaintPresence;
+    view: PaintView;
+    canvas: { width: number; height: number };
+    viewport: { width: number; height: number };
+  }
+
+  let { presence, view, canvas, viewport }: Props = $props();
+
+  let current: PaintPresenceState = $state.raw({ actors: [] });
+  $effect(() => {
+    current = presence.getState();
+    return presence.subscribe((next) => {
+      current = next;
+    });
+  });
+</script>
+
+<!-- Agent cursors in document pixels, placed through the view; the cursors stay upright and unscaled. -->
+<div class="pointer-events-none absolute inset-0 overflow-hidden" data-paint-presence="" aria-hidden="true">
+  {#each current.actors as a (a.id)}
+    {@const p = documentToScreen(view, canvas, viewport, a.x, a.y)}
+    <div class="absolute" style={`left: ${p.x}px; top: ${p.y}px`} data-actor={a.id}>
+      <svg width="18" height="20" viewBox="0 0 18 20" class="drop-shadow-md" style={`transform-origin: 0 0; ${a.pressed ? 'transform: scale(0.85)' : ''}`}>
+        <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" stroke-width="1.4" stroke-linejoin="round" />
+      </svg>
+      <span class="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}`}>{a.message ?? a.name}</span>
+    </div>
+  {/each}
+</div>

package/dist/paint-editor/PaintPresenceLayer.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type PaintPresence, type PaintView } from '@pixerate/editor/paint-editor';
+interface Props {
+    /** Agent cursors to draw (see `PaintDirector`). */
+    presence: PaintPresence;
+    view: PaintView;
+    canvas: {
+        width: number;
+        height: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+}
+declare const PaintPresenceLayer: import("svelte").Component<Props, {}, "">;
+type PaintPresenceLayer = ReturnType<typeof PaintPresenceLayer>;
+export default PaintPresenceLayer;
+//# sourceMappingURL=PaintPresenceLayer.svelte.d.ts.map

package/dist/paint-editor/PaintPresenceLayer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintPresenceLayer.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintPresenceLayer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,aAAa,EAA2B,KAAK,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG5H,UAAU,KAAK;IACb,mDAAmD;IACnD,QAAQ,EAAE,aAAa,CAAC;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7C;AA+BH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

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

@@ -14,7 +14,8 @@ export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
-export { createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
+export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
+export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
 export type PaintEditorProps = ComponentProps<typeof PaintEditorComponent>;
 export type PaintCanvasProps = ComponentProps<typeof PaintCanvasComponent>;
 export type PaintToolbarProps = ComponentProps<typeof PaintToolbarComponent>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/paint-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE1F,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/paint-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/G,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC"}

package/dist/paint-editor/index.js

@@ -6,4 +6,5 @@ export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
-export { createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
+export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
+export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';

package/dist/paint-editor/paintEditorRune.svelte.d.ts

@@ -1,4 +1,4 @@
-import { PaintEditorController, type PaintEditorOptions, type PaintEditorState } from '@pixerate/editor/paint-editor';
+import { PaintDirector, PaintEditorController, PaintPresence, type PaintDirectorOptions, type PaintEditorOptions, type PaintEditorState } from '@pixerate/editor/paint-editor';
 /**
  * A `PaintEditorController` (created from `options`, or the one given) with its state as a
  * rune: `editor.state` updates after every change. Call `destroy()` to unsubscribe.
@@ -12,6 +12,15 @@ export declare function createReactivePaintEditor(options?: PaintEditorOptions |
 export declare function paintEditorState(controller: () => PaintEditorController): {
     readonly current: 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.
+ */
+export declare function createPaintDirector(controller: PaintEditorController, options?: Omit<PaintDirectorOptions, 'clock'>): {
+    presence: PaintPresence;
+    director: PaintDirector;
+};
 export declare const chip: (on: boolean) => string;
 export declare const button = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40";
 export declare const panel = "flex flex-col gap-2 text-xs text-slate-200";

package/dist/paint-editor/paintEditorRune.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paintEditorRune.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/paintEditorRune.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtH;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAkB,GAAG,qBAA0B;;;;EAiBjG;AAED,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAoBhH;AAED,eAAO,MAAM,IAAI,GAAI,IAAI,OAAO,WAAwH,CAAC;AACzJ,eAAO,MAAM,MAAM,qGAAqG,CAAC;AACzH,eAAO,MAAM,KAAK,+CAA+C,CAAC;AAElE,qGAAqG;AACrG,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,CAQtF"}
+{"version":3,"file":"paintEditorRune.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/paintEditorRune.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,EAAE,KAAK,oBAAoB,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAE/K;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAkB,GAAG,qBAA0B;;;;EAiBjG;AAED,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAoBhH;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,qBAAqB,EAAE,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAM,GAAG;IAAE,QAAQ,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,CAG9K;AAED,eAAO,MAAM,IAAI,GAAI,IAAI,OAAO,WAAwH,CAAC;AACzJ,eAAO,MAAM,MAAM,qGAAqG,CAAC;AACzH,eAAO,MAAM,KAAK,+CAA+C,CAAC;AAElE,qGAAqG;AACrG,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,CAQtF"}

package/dist/paint-editor/paintEditorRune.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from 'svelte';
-import { PaintEditorController } from '@pixerate/editor/paint-editor';
+import { PaintDirector, PaintEditorController, PaintPresence } from '@pixerate/editor/paint-editor';
 /**
  * A `PaintEditorController` (created from `options`, or the one given) with its state as a
  * rune: `editor.state` updates after every change. Call `destroy()` to unsubscribe.
@@ -44,6 +44,15 @@ export function paintEditorState(controller) {
         },
     };
 }
+/**
+ * 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.
+ */
+export function createPaintDirector(controller, options = {}) {
+    const presence = new PaintPresence();
+    return { presence, director: new PaintDirector(controller, presence, options) };
+}
 export const chip = (on) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
 export const button = 'px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40';
 export const panel = 'flex flex-col gap-2 text-xs text-slate-200';

package/dist/vector/VectorCanvas.svelte

@@ -260,6 +260,19 @@
         <circle cx={w.x} cy={w.y} r={1.5} fill={accentColor} />
       </g>
     {/each}
+    {#each overlay.masks as m (m.id)}
+      <path
+        data-vector-mask-indicator={m.id}
+        data-mask-type={m.type}
+        data-inverted={m.invert || undefined}
+        d={m.d}
+        fill="none"
+        stroke={THEME.mask}
+        stroke-width={m.editing ? 1.5 : 1}
+        stroke-dasharray={m.editing ? undefined : THEME.maskDash}
+        opacity={m.enabled ? 1 : 0.5}
+      />
+    {/each}
     {#each overlay.blend.spines as sp (sp.id)}
       <g data-vector-blend-spine={sp.id} data-replaced={sp.replaced || undefined}>
         <path d={sp.d} fill="none" stroke={accentColor} stroke-dasharray="4 3" />

package/dist/vector/VectorCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAsSH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAySH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorMaskPanel.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { VECTOR_MASK_TYPE_OPTIONS, getVectorMaskPanel, type VectorEditorController, type VectorMaskType } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Masks of the selection: Make Clipping Mask, Make Opacity Mask (the topmost selected object
+   * masks the others) and Release; for a mask group (or something inside one) its type, Invert, a
+   * switch that turns the mask off by hiding it, and Edit Mask / Edit Contents, which select the
+   * mask (a path opens for anchor editing) or what it masks. Each change is one undo step.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const panel = $derived(getVectorMaskPanel(view));
+  const g = $derived(panel?.group ?? null);
+  const ids = $derived(g ? [g.id] : undefined);
+
+  const buttonClass =
+    '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';
+  const selectClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+</script>
+
+{#if panel}
+  <div class="space-y-2 {className}" data-vector-mask-panel="" aria-label="Mask">
+    <div class="flex flex-wrap items-center gap-1">
+      <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Mask</span>
+      <button
+        type="button"
+        data-vector-mask-action="clip"
+        class={buttonClass}
+        title={panel.makeHint ?? 'Make Clipping Mask: the topmost object clips the others'}
+        aria-label="Make Clipping Mask"
+        disabled={!panel.canMake}
+        onclick={() => controller.makeMask('clip')}
+      >
+        Clip
+      </button>
+      <button
+        type="button"
+        data-vector-mask-action="opacity"
+        class={buttonClass}
+        title={panel.makeHint ?? 'Make Opacity Mask: the topmost object fades the others by its brightness'}
+        aria-label="Make Opacity Mask"
+        disabled={!panel.canMake}
+        onclick={() => controller.makeMask('luminance')}
+      >
+        Opacity
+      </button>
+      <button
+        type="button"
+        data-vector-mask-action="release"
+        class={buttonClass}
+        title="Release: the mask goes back on top and draws as itself"
+        aria-label="Release Mask"
+        disabled={!g}
+        onclick={() => controller.releaseMask({ ids })}
+      >
+        Release
+      </button>
+    </div>
+    {#if g}
+      <div class="space-y-2" data-vector-mask-group={g.id} data-mask-type={g.type}>
+        <div class="flex items-center gap-1">
+          <select
+            aria-label="Mask type"
+            class={selectClass}
+            value={g.type}
+            title={VECTOR_MASK_TYPE_OPTIONS.find((o) => o.value === g.type)?.title}
+            onchange={(e) => controller.setMaskOptions({ type: e.currentTarget.value as VectorMaskType }, { ids })}
+          >
+            {#each VECTOR_MASK_TYPE_OPTIONS as o (o.value)}
+              <option value={o.value} title={o.title}>{o.label}</option>
+            {/each}
+          </select>
+          <label class="flex items-center gap-1 text-xs text-foreground" title="Show the contents where the mask hides them">
+            <input type="checkbox" aria-label="Invert mask" checked={g.invert} onchange={(e) => controller.setMaskOptions({ invert: e.currentTarget.checked }, { ids })} />
+            Invert
+          </label>
+        </div>
+        <div class="flex flex-wrap items-center gap-1">
+          <button
+            type="button"
+            data-vector-mask-action="edit-mask"
+            class={buttonClass}
+            aria-pressed={g.editing === 'mask'}
+            title="Edit Mask: select the mask (a path opens for anchor editing)"
+            aria-label="Edit Mask"
+            onclick={() => controller.editMask({ id: g.id })}
+          >
+            Edit mask
+          </button>
+          <button
+            type="button"
+            data-vector-mask-action="edit-contents"
+            class={buttonClass}
+            aria-pressed={g.editing === 'contents'}
+            title="Edit Contents: select what the mask masks"
+            aria-label="Edit Contents"
+            disabled={!g.contents.length}
+            onclick={() => controller.editMaskContents({ id: g.id })}
+          >
+            Contents
+          </button>
+          <button
+            type="button"
+            data-vector-mask-action="toggle"
+            class={buttonClass}
+            aria-pressed={g.enabled}
+            title={g.enabled ? 'Turn the mask off (hide it): the contents draw whole' : 'Turn the mask on'}
+            aria-label="Mask on"
+            onclick={() => controller.setMaskOptions({ enabled: !g.enabled }, { ids })}
+          >
+            {g.enabled ? 'On' : 'Off'}
+          </button>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/vector/VectorMaskPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Masks of the selection: Make Clipping Mask, Make Opacity Mask (the topmost selected object
+ * masks the others) and Release; for a mask group (or something inside one) its type, Invert, a
+ * switch that turns the mask off by hiding it, and Edit Mask / Edit Contents, which select the
+ * mask (a path opens for anchor editing) or what it masks. Each change is one undo step.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorMaskPanel: import("svelte").Component<Props, {}, "">;
+type VectorMaskPanel = ReturnType<typeof VectorMaskPanel>;
+export default VectorMaskPanel;
+//# sourceMappingURL=VectorMaskPanel.svelte.d.ts.map

package/dist/vector/VectorMaskPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorMaskPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorMaskPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,sBAAsB,EAAuB,MAAM,yBAAyB,CAAC;AAIvI;;;;;GAKG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgEH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/vector/VectorMaskedNodes.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { VectorRenderMask, VectorRenderNode } from '@pixerate/editor/vector';
+  import VectorSceneNodes from './VectorSceneNodes.svelte';
+
+  /**
+   * A mask group's contents under its mask: the `<clipPath>` (clip) or `<mask>` (alpha, luminance;
+   * the mask drawn inside, through the inverting filter when inverted), and an inner `<g>` that
+   * references it. The group's own transform, opacity, blend mode and filter are on the outer `<g>`.
+   */
+  interface Props {
+    mask: VectorRenderMask;
+    nodes: readonly VectorRenderNode[];
+  }
+
+  let { mask, nodes }: Props = $props();
+</script>
+
+<defs>
+  {#if mask.clip}
+    <clipPath id={mask.id}>
+      {#each mask.clip as c, i (i)}
+        <path d={c.d} clip-rule={c.clipRule} />
+      {/each}
+    </clipPath>
+  {:else if mask.bounds}
+    <mask
+      id={mask.id}
+      maskUnits="userSpaceOnUse"
+      x={mask.bounds.x}
+      y={mask.bounds.y}
+      width={mask.bounds.width}
+      height={mask.bounds.height}
+      style={mask.type === 'alpha' ? 'mask-type: alpha' : undefined}
+    >
+      {#if mask.filter}
+        <g filter={mask.filter}><VectorSceneNodes nodes={mask.nodes ?? []} /></g>
+      {:else}
+        <VectorSceneNodes nodes={mask.nodes ?? []} />
+      {/if}
+    </mask>
+  {/if}
+</defs>
+<g data-vector-masked="" clip-path={mask.clip ? `url(#${mask.id})` : undefined} mask={mask.clip ? undefined : `url(#${mask.id})`}>
+  <VectorSceneNodes {nodes} />
+</g>

package/dist/vector/VectorMaskedNodes.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { VectorRenderMask, VectorRenderNode } from '@pixerate/editor/vector';
+/**
+ * A mask group's contents under its mask: the `<clipPath>` (clip) or `<mask>` (alpha, luminance;
+ * the mask drawn inside, through the inverting filter when inverted), and an inner `<g>` that
+ * references it. The group's own transform, opacity, blend mode and filter are on the outer `<g>`.
+ */
+interface Props {
+    mask: VectorRenderMask;
+    nodes: readonly VectorRenderNode[];
+}
+declare const VectorMaskedNodes: import("svelte").Component<Props, {}, "">;
+type VectorMaskedNodes = ReturnType<typeof VectorMaskedNodes>;
+export default VectorMaskedNodes;
+//# sourceMappingURL=VectorMaskedNodes.svelte.d.ts.map

package/dist/vector/VectorMaskedNodes.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorMaskedNodes.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorMaskedNodes.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAIhF;;;;GAIG;AACH,UAAU,KAAK;IACb,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AAgCH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/vector/VectorSceneNodes.svelte

@@ -2,6 +2,7 @@
   import type { VectorRenderNode } from '@pixerate/editor/vector';
   import Self from './VectorSceneNodes.svelte';
   import VectorPaintPath from './VectorPaintPath.svelte';
+  import VectorMaskedNodes from './VectorMaskedNodes.svelte';
 
   interface Props {
     nodes: readonly VectorRenderNode[];
@@ -13,8 +14,19 @@
 
 {#each nodes as node (node.id)}
   {#if node.kind === 'group'}
-    <g data-vector-id={node.id} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined} filter={node.filter} style={blend(node.blendMode)}>
-      <Self nodes={node.children} />
+    <g
+      data-vector-id={node.id}
+      data-vector-mask={node.mask?.type}
+      transform={node.transform}
+      opacity={node.opacity < 1 ? node.opacity : undefined}
+      filter={node.filter}
+      style={blend(node.blendMode)}
+    >
+      {#if node.mask}
+        <VectorMaskedNodes mask={node.mask} nodes={node.children} />
+      {:else}
+        <Self nodes={node.children} />
+      {/if}
     </g>
   {:else if node.layers}
     <!-- Fill and stroke stacks: each layer in order, bottom to top. -->

package/dist/vector/VectorSceneNodes.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorSceneNodes.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorSceneNodes.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AA8BH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VectorSceneNodes.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorSceneNodes.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AAmCH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/VectorStylePanel.svelte

@@ -20,6 +20,7 @@
   import VectorEffectsPanel from './VectorEffectsPanel.svelte';
   import VectorAppearancePanel from './VectorAppearancePanel.svelte';
   import VectorEnvelopePanel from './VectorEnvelopePanel.svelte';
+  import VectorMaskPanel from './VectorMaskPanel.svelte';
   import VectorGradientEditor from './VectorGradientEditor.svelte';
 
   interface Props {
@@ -225,5 +226,6 @@
     <VectorAppearancePanel {controller} />
     <VectorEffectsPanel {controller} />
     <VectorEnvelopePanel {controller} />
+    <VectorMaskPanel {controller} />
   {/if}
 </div>

package/dist/vector/VectorStylePanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiKH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAUjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmKH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/VectorToolbar.svelte

@@ -8,6 +8,7 @@
     VECTOR_PATHFINDER_ACTIONS,
     VECTOR_FILL_GAP,
     vectorToolLabel,
+    isVectorMaskGroup,
     type VectorEditorController,
     type VectorTool
   } from '@pixerate/editor/vector';
@@ -61,6 +62,7 @@
   const count = $derived(view.selection.length);
   const points = $derived(view.tool === 'direct' ? view.selectedAnchors.length : 0);
   const groupSelected = $derived(view.selection.some((id) => controller.getNode(id)?.type === 'group'));
+  const maskSelected = $derived(view.selection.some((id) => isVectorMaskGroup(controller.getNode(id))));
 
   // Live booleans keep the operands editable; a lone live group or its operands take the operation too.
   let live = $state(false);
@@ -71,7 +73,9 @@
     { label: '∩', title: 'Intersect', run: () => controller.booleanOp('intersect', { live }), disabled: booleanDisabled },
     { label: '⊻', title: 'Exclude', run: () => controller.booleanOp('exclude', { live }), disabled: booleanDisabled },
     { label: 'G', title: 'Group', run: () => controller.group(), disabled: count < 1 },
-    { label: 'U', title: 'Ungroup', run: () => controller.ungroup(), disabled: !groupSelected }
+    { label: 'U', title: 'Ungroup', run: () => controller.ungroup(), disabled: !groupSelected },
+    { label: '◐', title: `Make Clipping Mask (${modKey}+7)`, run: () => controller.makeMask('clip'), disabled: count < 2 },
+    { label: '◑', title: `Release Mask (${modKey}+Alt+7)`, run: () => controller.releaseMask(), disabled: !maskSelected }
   ]);
   const arrange = $derived([
     { label: '⇈', title: 'Bring to Front', run: () => controller.arrange('front'), disabled: count < 1 },

package/dist/vector/VectorToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiJH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAUH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoJH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/vector/index.d.ts

@@ -8,6 +8,8 @@ export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
 export { default as VectorEnvelopePanel } from "./VectorEnvelopePanel.svelte";
+export { default as VectorMaskPanel } from "./VectorMaskPanel.svelte";
+export { default as VectorMaskedNodes } from "./VectorMaskedNodes.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
 export { default as VectorGradientDefs } from "./VectorGradientDefs.svelte";
 export { default as VectorFilterDefs } from "./VectorFilterDefs.svelte";

package/dist/vector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/vector/index.js

@@ -5,6 +5,8 @@ export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
 export { default as VectorEnvelopePanel } from "./VectorEnvelopePanel.svelte";
+export { default as VectorMaskPanel } from "./VectorMaskPanel.svelte";
+export { default as VectorMaskedNodes } from "./VectorMaskedNodes.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
 export { default as VectorGradientDefs } from "./VectorGradientDefs.svelte";
 export { default as VectorFilterDefs } from "./VectorFilterDefs.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.78.0",
+  "version": "0.79.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -139,7 +139,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.106.0"
+    "@pixerate/editor": "0.108.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",