@pixerate/editor-svelte 0.204.0 → 0.205.1

package/dist/paint-editor/BrushPanel.svelte

@@ -56,22 +56,27 @@
   const carried = $derived(brushLoadColor(snap.mixerLoad));
   // The brush's suggested colours, resolved for the colour scheme: one click makes one the paint colour.
   const palette = $derived((spec.colour?.palette ?? []).flatMap((c) => brushColourHex(c, snap.colorScheme) ?? []));
-  const loads = $derived((['dab', 'mixer', 'impasto'].includes(brush.engine) || (brush.engine === 'wet' && brush.wet.tool === 'paint')) && !brush.ghost);
+  const loads = $derived((['dab', 'mixer', 'impasto'].includes(brush.engine) || (brush.engine === 'wet' && brush.wet.tool === 'paint')) && !brush.ghost && !brush.mutation);
   const slug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60) || 'brush';
 </script>
 
 {#snippet extra(section: string)}
   {#if section === 'shape' && brush.engine === 'sticker'}
     <StickerPicker {controller} label="Sticker stamps" selected={brush.sticker.stamps} onpick={(ref) => controller.setBrush({ sticker: { stamps: toggleStickerRef(brush.sticker.stamps, ref) } })} />
-  {:else if section === 'behaviour' && loads}
-    <div class="flex items-center gap-1">
-      <span class="text-slate-400">Carries</span>
-      <span aria-label="Brush load" title={carried ?? 'Clean'} class="h-4 w-4 rounded ring-1 ring-slate-700" style={`background: ${carried ?? 'transparent'}`}></span>
-      {#if brush.engine === 'mixer'}
-        <button type="button" class={button} onclick={() => controller.loadMixerBrush()}>Load</button>
-      {/if}
-      <button type="button" class={button} onclick={() => controller.cleanMixerBrush(brush.engine === 'mixer')}>Clean</button>
-    </div>
+  {:else if section === 'behaviour'}
+    {#if brush.mutation && !snap.hasMutationAgent}
+      <p class="text-[11px] text-amber-400" role="status" data-paint-mutation-unconnected>No agent is connected — mutation strokes will stay as ordinary paint.</p>
+    {/if}
+    {#if loads}
+      <div class="flex items-center gap-1">
+        <span class="text-slate-400">Carries</span>
+        <span aria-label="Brush load" title={carried ?? 'Clean'} class="h-4 w-4 rounded ring-1 ring-slate-700" style={`background: ${carried ?? 'transparent'}`}></span>
+        {#if brush.engine === 'mixer'}
+          <button type="button" class={button} onclick={() => controller.loadMixerBrush()}>Load</button>
+        {/if}
+        <button type="button" class={button} onclick={() => controller.cleanMixerBrush(brush.engine === 'mixer')}>Clean</button>
+      </div>
+    {/if}
   {:else if section === 'colour'}
     {#if palette.length}
       <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Paint with a palette colour">

package/dist/paint-editor/PaintCanvas.svelte

@@ -4,6 +4,7 @@
     PaintGesture,
     drawWaterOverlay,
     fitZoom,
+    startDeviceTilt,
     startWetClock,
     guideOverlay,
     handlePaintShortcut,
@@ -41,9 +42,11 @@
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's, drawn as soft lines (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
   }
-  let { controller, tool = 'brush', fillOptions, showGuides = true, fitOnMount = true, onerror, presence, proposals, agentStrokes, class: className = '' }: Props = $props();
+  let { controller, tool = 'brush', fillOptions, showGuides = true, fitOnMount = true, onerror, presence, proposals, agentStrokes, deviceTilt = false, class: className = '' }: Props = $props();
   let agentLines = $state.raw<PaintAgentStrokesState>({ strokes: [] });
   $effect(() => {
     const store = agentStrokes;
@@ -118,6 +121,13 @@
     return untrack(() => startWetClock(c));
   });
 
+  // Device orientation shifts viewTilt when opted in.
+  $effect(() => {
+    const c = controller;
+    const on = deviceTilt;
+    return on ? untrack(() => startDeviceTilt(c)) : undefined;
+  });
+
   // The water overlay.
   $effect(() => {
     void snap;

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

@@ -17,6 +17,8 @@ interface Props {
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's, drawn as soft lines (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
 }
 declare const PaintCanvas: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/PaintEditor.svelte

@@ -29,6 +29,8 @@
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the
@@ -41,7 +43,7 @@
     /** Bring the editor on screen (switch to its tab) before the agent acts. */
     onplaybackreveal?: () => void | Promise<void>;
   }
-  let { controller, fileName, height = 720, presence, proposals, agentStrokes, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
+  let { controller, fileName, height = 720, presence, proposals, agentStrokes, deviceTilt, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
 
   /** Controls a paint plan can point at, by `{ kind: 'control', id }`. */
   const PAINT_CONTROLS: Record<string, string> = {
@@ -123,7 +125,7 @@
     <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
     <div class="flex min-w-0 flex-1 flex-col">
       <!-- With playback the editor draws the cursor (over the panels too), so the canvas doesn't. -->
-      <PaintCanvas {controller} {tool} {fillOptions} presence={playing ? undefined : presence} {proposals} {agentStrokes} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <PaintCanvas {controller} {tool} {fillOptions} presence={playing ? undefined : presence} {proposals} {agentStrokes} {deviceTilt} 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

@@ -12,6 +12,8 @@ interface Props {
     proposals?: PaintProposals;
     /** Strokes an agent is painting live alongside the user's (see `createPaintAgentStrokes`). */
     agentStrokes?: PaintAgentStrokes;
+    /** Follow device orientation (gyroscope tilt on iPhone and iPad) for thin-film iridescence view tilt. */
+    deviceTilt?: boolean;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the

package/dist/paint-editor/PaintLayersPanel.svelte

@@ -12,7 +12,7 @@
   const editor = paintEditorState(() => controller);
   const layers = $derived.by(() => {
     void editor.current;
-    return untrack(() => controller.listLayers());
+    return untrack(() => controller.listLayers().filter((l) => !l.temporary));
   });
   const active = $derived(layers.find((l) => l.active) ?? null);
   const light = $derived.by(() => {

package/dist/paint-editor/PaperPanel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { DEFAULT_BACKLIGHT_COLOR, LIGHT_SLIDERS, PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath, readPath, renderPaper, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { DEFAULT_BACKLIGHT_COLOR, LIGHT_SLIDERS, PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, UV_LIGHT_SLIDERS, VIEW_TILT_SLIDERS, patchPath, readPath, renderPaper, requestDeviceTiltPermission, startDeviceTilt, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { untrack } from 'svelte';
   import PaintSlider from './PaintSlider.svelte';
   import PixelCanvas from './PixelCanvas.svelte';
-  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
   interface Props {
     controller: PaintEditorController;
@@ -18,6 +19,13 @@
     void editor.current;
     return controller.getLighting();
   });
+  const viewTilt = $derived(editor.current.viewTilt);
+  let tiltFollow = $state(false);
+  $effect(() => {
+    const c = controller;
+    const on = tiltFollow;
+    return on ? untrack(() => startDeviceTilt(c)) : undefined;
+  });
   const previews = new Map(PAPER_LIBRARY.map((p) => [p.preset, { ...SWATCH, data: renderPaper({ ...p, shading: Math.max(0.8, p.shading) }, SWATCH) }]));
 </script>
 
@@ -59,11 +67,40 @@
   </label>
   <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.setPaper({ seed: paper.seed + 1 }))}>New sheet</button>
   <div class="flex flex-col gap-1.5" data-testid="light-panel">
-    <span class="font-medium text-slate-300">Light (thick paint, metallic paper)</span>
+    <span class="font-medium text-slate-300">Light (thick paint, iridescence, metallic paper)</span>
     {#each LIGHT_SLIDERS as c (c.path)}
       <PaintSlider control={c} value={readPath(lighting, c.path)} onchange={(v) => run(() => controller.setLighting({ [c.path]: v }))} />
     {/each}
-    <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.flattenRelief())}>Flatten relief</button>
+    {#each VIEW_TILT_SLIDERS as c (c.path)}
+      <PaintSlider control={c} value={readPath(viewTilt, c.path)} onchange={(v) => run(() => controller.setViewTilt({ [c.path]: v }))} />
+    {/each}
+    <div class="flex flex-wrap items-center gap-1">
+      <button
+        type="button"
+        aria-pressed={tiltFollow}
+        class={chip(tiltFollow)}
+        onclick={() =>
+          run(async () => {
+            if (!tiltFollow && !(await requestDeviceTiltPermission())) return;
+            tiltFollow = !tiltFollow;
+          })}
+      >Device tilt</button>
+      <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.flattenRelief())}>Flatten relief</button>
+    </div>
+  </div>
+  <div class="flex flex-col gap-1.5" data-testid="uv-heat-panel">
+    <span class="font-medium text-slate-300">UV blacklight &amp; heat</span>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" checked={editor.current.uvLight.on} onchange={(e) => run(() => controller.setUvLight({ on: e.currentTarget.checked }))} /> UV blacklight
+    </label>
+    {#each UV_LIGHT_SLIDERS as c (c.path)}
+      <PaintSlider control={c} value={readPath(editor.current.uvLight, c.path)} onchange={(v) => run(() => controller.setUvLight({ [c.path]: v }))} />
+    {/each}
+    <div class="flex items-center gap-1.5">
+      <button type="button" class={button} onclick={() => run(() => controller.advanceHeat(10))}>Step heat</button>
+      <button type="button" class={button} onclick={() => run(() => controller.clearHeat())}>Cool canvas</button>
+      {#if editor.current.heat.hotCells > 0}<span class="text-[11px] text-amber-400">{Math.round(editor.current.heat.max * 100)}% warm</span>{/if}
+    </div>
   </div>
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
 </div>

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

@@ -36,7 +36,7 @@ export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
 export { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
-export { createPaintChangeWatcher, createPaintProposalState, type PaintChangeWatcherRune, type PaintProposalStateRune } from './paintProposalRune.svelte.js';
+export { createMutationRequests, createPaintChangeWatcher, createPaintProposalState, type PaintChangeWatcherRune, type PaintMutationRequestsRune, type PaintProposalStateRune, } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';
 export type PaintEditorProps = ComponentProps<typeof PaintEditorComponent>;
 export type PaintCanvasProps = ComponentProps<typeof PaintCanvasComponent>;

package/dist/paint-editor/index.js

@@ -20,5 +20,5 @@ export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
 export { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
-export { createPaintChangeWatcher, createPaintProposalState } from './paintProposalRune.svelte.js';
+export { createMutationRequests, createPaintChangeWatcher, createPaintProposalState, } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';

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

@@ -55,7 +55,9 @@ export function paintEditorState(controller) {
  */
 export function createPaintDirector(controller, options = {}) {
     const presence = new PaintPresence();
-    return { presence, director: new PaintDirector(controller, presence, options) };
+    const director = new PaintDirector(controller, presence, options);
+    controller.setMutationDirector(director);
+    return { presence, director };
 }
 export { button, chip } from '../brushes/styles.js';
 export const panel = 'flex flex-col gap-2 text-xs text-slate-200';

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

@@ -1,4 +1,4 @@
-import { type PaintChange, type PaintChangeFeed, type PaintEditorController, type PaintProposal, type PaintProposals, type PaintProposalsOptions } from '@pixerate/editor/paint-editor';
+import { type PaintChange, type PaintChangeFeed, type PaintEditorController, type PaintMutationInfo, type PaintMutationRequestListener, type PaintProposal, type PaintProposals, type PaintProposalsOptions } from '@pixerate/editor/paint-editor';
 export interface PaintProposalStateRune {
     /** The framework-free store (for `createPaintProposalToolProvider` and agents). */
     readonly store: PaintProposals;
@@ -30,3 +30,18 @@ export interface PaintChangeWatcherRune {
 export declare function createPaintChangeWatcher(controller: PaintEditorController, options?: {
     onChange?: (change: PaintChange) => void;
 }): PaintChangeWatcherRune;
+export interface PaintMutationRequestsRune {
+    /** Pending mutations waiting for an agent to claim them (`state === 'pending'`). */
+    readonly pending: readonly PaintMutationInfo[];
+    /** Every active or completed mutation in the session. */
+    readonly mutations: readonly PaintMutationInfo[];
+    /** The most recently raised pending mutation, or `null`. */
+    readonly last: PaintMutationInfo | null;
+    destroy(): void;
+}
+/**
+ * Subscribes to mutation requests raised when a user finishes a stroke with a `mutation` brush
+ * and pauses for `settle` seconds, as a Svelte 5 rune. While active, marks an agent listener as
+ * connected on the controller. The same API as React's `useMutationRequests`.
+ */
+export declare function createMutationRequests(controller: PaintEditorController, onRequest?: PaintMutationRequestListener): PaintMutationRequestsRune;

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

@@ -43,3 +43,39 @@ export function createPaintChangeWatcher(controller, options = {}) {
         },
     };
 }
+/**
+ * Subscribes to mutation requests raised when a user finishes a stroke with a `mutation` brush
+ * and pauses for `settle` seconds, as a Svelte 5 rune. While active, marks an agent listener as
+ * connected on the controller. The same API as React's `useMutationRequests`.
+ */
+export function createMutationRequests(controller, onRequest) {
+    let mutations = $state.raw(controller.listMutations({ includeAll: true }));
+    let last = $state.raw(null);
+    const offState = controller.subscribe(() => {
+        mutations = controller.listMutations({ includeAll: true });
+    });
+    const offReq = controller.onMutationRequest((m) => {
+        last = m;
+        onRequest?.(m);
+    });
+    $effect(() => () => {
+        offState();
+        offReq();
+    });
+    return {
+        get pending() {
+            return mutations.filter((m) => m.state === 'pending');
+        },
+        get mutations() {
+            return mutations;
+        },
+        get last() {
+            const p = mutations.filter((m) => m.state === 'pending');
+            return last && p.some((m) => m.id === last.id) ? last : (p[p.length - 1] ?? null);
+        },
+        destroy() {
+            offState();
+            offReq();
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.204.0",
+  "version": "0.205.1",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -184,7 +184,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.274.0"
+    "@pixerate/editor": "0.275.1"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",