@pixerate/editor-svelte 0.215.1 → 0.216.1

package/dist/brushes/BrushEditor.svelte

@@ -158,6 +158,7 @@
             {/each}
           </div>
         {/if}
+        {#if c.hint}<p class="text-[10px] leading-snug text-slate-400" data-hint={c.path}>{c.hint}</p>{/if}
         {#if onaddsource && (c.path === 'tip.stamps' || c.path === 'tip.grain.source')}
           {@const label = c.path === 'tip.stamps' ? 'Add image tip…' : 'Add grain image…'}
           <label class={`${button} cursor-pointer self-start`}>

package/dist/brushes/BrushLibraryBrowser.svelte

@@ -21,15 +21,17 @@
   const groups = $derived(brushLibraryGroups(entries, { text, profile }));
 </script>
 
-<!-- The brush library grouped by medium, then variety, with tools as their own group, and a filter (brushLibraryGroups). -->
+<!-- The brush library grouped by medium, then variety, with specialty paint (by kind) and tools as their own groups, and a filter (brushLibraryGroups). -->
 <div class={`flex flex-col gap-1 ${className}`} data-testid="brush-library">
   <input type="search" bind:value={text} placeholder="Find a brush" aria-label="Find a brush" class="rounded bg-slate-800 px-1.5 py-0.5" />
   <div class="flex flex-col gap-1.5" role="listbox" aria-label="Brushes">
     {#each groups as g (g.id)}
-      <div role="group" aria-label={g.title} class="flex flex-col gap-0.5">
-        <span class="text-[10px] uppercase tracking-wide text-slate-500">{g.title}</span>
+      <div role="group" aria-label={g.title} data-group={g.id} class={`flex flex-col gap-0.5 ${g.id === 'specialty' ? 'mt-1 border-t border-indigo-500/40 pt-1' : ''}`}>
+        <span class={`text-[10px] uppercase tracking-wide ${g.id === 'specialty' ? 'text-indigo-300' : 'text-slate-500'}`}>{g.title}</span>
         <div class="grid grid-cols-2 gap-1">
           {#each g.varieties as v (v.variety)}
+            <!-- Specialty paint is listed by kind (Ferrofluid, UV-fluorescent…). -->
+            {#if g.id === 'specialty'}<span class="col-span-2 text-[10px] text-slate-400">{v.title}</span>{/if}
             {#each v.entries as e (e.brush.id)}
               <button
                 type="button"

package/dist/paint-editor/BrushPanel.svelte

@@ -6,15 +6,18 @@
   import BrushEditor from '../brushes/BrushEditor.svelte';
   import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
   import PaintGradientEditor from './PaintGradientEditor.svelte';
+  import SpecialtyGuideCard from './SpecialtyGuideCard.svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
   interface Props {
     controller: PaintEditorController;
     thumbnailWidth?: number;
     thumbnailHeight?: number;
+    /** With it, the specialty guide card has an "Open Specialty panel" button (the paint editor's Specialty tab). */
+    onopenspecialtypanel?: () => void;
     class?: string;
   }
-  let { controller, thumbnailWidth = 112, thumbnailHeight = 32, class: className = '' }: Props = $props();
+  let { controller, thumbnailWidth = 112, thumbnailHeight = 32, onopenspecialtypanel, class: className = '' }: Props = $props();
   const editor = paintEditorState(() => controller);
   const snap = $derived(editor.current);
   const brush = $derived(snap.brush);
@@ -102,9 +105,10 @@
   {/if}
 {/snippet}
 
-<!-- The brush library (BrushLibraryBrowser) and the active brush in the BrushEditor, plus the brush gradient, sticker stamps, what the brush carries, import and export. Images picked for an image tip or grain go into the brush library as sources; Import also reads brush packs (.abr, .brush, .brushset). -->
+<!-- The brush library (BrushLibraryBrowser), a guide card for a specialty brush (SpecialtyGuideCard) and the active brush in the BrushEditor, plus the brush gradient, sticker stamps, what the brush carries, import and export. Images picked for an image tip or grain go into the brush library as sources; Import also reads brush packs (.abr, .brush, .brushset). -->
 <div class={`${panel} ${className}`} data-testid="brush-panel">
   <BrushLibraryBrowser {entries} activeId={brush.id} onselect={(id) => controller.setBrush({ id })} thumbnail={(id) => thumbs.get(id) ?? null} {thumbnailWidth} {thumbnailHeight} />
+  <SpecialtyGuideCard {controller} {onopenspecialtypanel} />
   <BrushEditor
     brush={spec}
     profile={PAINT_PROFILE}

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

@@ -3,6 +3,8 @@ interface Props {
     controller: PaintEditorController;
     thumbnailWidth?: number;
     thumbnailHeight?: number;
+    /** With it, the specialty guide card has an "Open Specialty panel" button (the paint editor's Specialty tab). */
+    onopenspecialtypanel?: () => void;
     class?: string;
 }
 declare const BrushPanel: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/EvolutionPanel.svelte

@@ -3,7 +3,7 @@
   import {
     EVOLUTION_SLIDERS,
     exportProposalContactSheetPng,
-    liveStrokeRefusal,
+    evolutionStrokeRefusal,
     normalizeMutationRates,
     paintProposalGhost,
     proposalGenomeStrokes,
@@ -45,7 +45,7 @@
   let error = $state<string | null>(null);
   const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
 
-  const eligibleStrokes = $derived(editor.current.document.strokes.filter((s) => !liveStrokeRefusal(s.brush)));
+  const eligibleStrokes = $derived(editor.current.document.strokes.filter((s) => !evolutionStrokeRefusal(s.brush)));
   const activeStrokeIds = $derived(selectedStrokes.filter((id) => eligibleStrokes.some((s) => s.id === id)));
   const effectiveStrokeIds = $derived(
     activeStrokeIds.length > 0

package/dist/paint-editor/PaintEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PaintPresence, documentToScreen, screenToDocument, type FillRegionOptions, type PaintEditorController, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
+  import { PaintPresence, documentToScreen, screenToDocument, specialtyInPlay, type FillRegionOptions, type PaintEditorController, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
   import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
   import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
   import PresenceLayer from '../playback/PresenceLayer.svelte';
@@ -9,13 +9,14 @@
   import PaintLayersPanel from './PaintLayersPanel.svelte';
   import PaintToolbar from './PaintToolbar.svelte';
   import PaperPanel from './PaperPanel.svelte';
+  import SpecialtyPanel from './SpecialtyPanel.svelte';
   import WetPanel from './WetPanel.svelte';
   import StickerPanel from './StickerPanel.svelte';
   import StrokePanel from './StrokePanel.svelte';
   import PathStrokePanel from './PathStrokePanel.svelte';
   import EvolutionPanel from './EvolutionPanel.svelte';
   import PaintEffectsPanel from './PaintEffectsPanel.svelte';
-  import { chip, paintEffectsProvider } from './paintEditorRune.svelte.js';
+  import { chip, paintEditorState, paintEffectsProvider } from './paintEditorRune.svelte.js';
 
   interface Props {
     controller: PaintEditorController;
@@ -109,20 +110,24 @@
   };
   let tool = $state<PaintTool>('brush');
   let fillOptions = $state<Omit<FillRegionOptions, 'x' | 'y' | 'points'>>({ reference: 'all', tolerance: 32, closeGap: 4, expand: 1, antialias: true });
-  let tab = $state<'color' | 'wet' | 'paper' | 'layers' | 'effects'>('color');
+  let tab = $state<'color' | 'wet' | 'paper' | 'specialty' | 'layers' | 'effects'>('color');
   const effects = paintEffectsProvider(() => controller);
-  const tabs = $derived(effects.current ? (['color', 'wet', 'paper', 'layers', 'effects'] as const) : (['color', 'wet', 'paper', 'layers'] as const));
+  const tabs = $derived(effects.current ? (['color', 'wet', 'paper', 'specialty', 'layers', 'effects'] as const) : (['color', 'wet', 'paper', 'specialty', 'layers'] as const));
+  const TAB_LABELS = { color: 'Colour', wet: 'Wet', paper: 'Paper', specialty: 'Specialty', layers: 'Layers', effects: 'Effects' } as const;
+  // The Specialty tab's indicator: a specialty brush, or the UV blacklight, heat, magnets or a view tilt in play.
+  const editorState = paintEditorState(() => controller);
+  const specialty = $derived(specialtyInPlay(editorState.current));
   let error = $state<string | null>(null);
 </script>
 
-<!-- Toolbar, brush library, the canvas, and colour / wet media / paper / layers. -->
+<!-- Toolbar, brush library, the canvas, and colour / wet media / paper / specialty paint / layers. -->
 <div bind:this={root} class={`relative flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className}`} style={`height: ${typeof height === 'number' ? `${height}px` : height}`} data-testid="paint-editor">
   {#if playing}
     <PresenceLayer presence={agentPresence} viewport={docToRoot} />
   {/if}
   <PaintToolbar {controller} {tool} ontoolchange={(t) => (tool = t)} {fillOptions} onfilloptionschange={(f) => (fillOptions = f)} {fileName} />
   <div class="flex min-h-0 flex-1 gap-2">
-    <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
+    <BrushPanel {controller} onopenspecialtypanel={() => (tab = 'specialty')} 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} {deviceTilt} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
@@ -131,13 +136,14 @@
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">
       <div class="flex gap-1" role="tablist" aria-label="Paint panels">
         {#each tabs as t (t)}
-          <button type="button" role="tab" aria-selected={tab === t} data-paint-tab={t} class={chip(tab === t)} onclick={() => (tab = t)}>{t === 'color' ? 'Colour' : t === 'wet' ? 'Wet' : t === 'paper' ? 'Paper' : t === 'layers' ? 'Layers' : 'Effects'}</button>
+          <button type="button" role="tab" aria-selected={tab === t} data-paint-tab={t} class={chip(tab === t)} onclick={() => (tab = t)} data-active={t === 'specialty' && specialty ? '' : undefined} title={t === 'specialty' && specialty ? 'Specialty paint is in play' : undefined}>{TAB_LABELS[t]}{#if t === 'specialty' && specialty}<span aria-hidden="true" class="ml-1 text-indigo-300">•</span>{/if}</button>
         {/each}
       </div>
       <div class="flex flex-col gap-2" data-paint-panel={tab}>
         {#if tab === 'color'}<ColorPanel {controller} />{/if}
         {#if tab === 'wet'}<WetPanel {controller} />{/if}
         {#if tab === 'paper'}<PaperPanel {controller} />{/if}
+        {#if tab === 'specialty'}<SpecialtyPanel {controller} />{/if}
         {#if tab === 'layers'}<PaintLayersPanel {controller} /><StrokePanel {controller} /><PathStrokePanel {controller} /><EvolutionPanel {controller} {proposals} /><StickerPanel {controller} />{/if}
         {#if tab === 'effects' && effects.current}<PaintEffectsPanel {controller} />{/if}
       </div>

package/dist/paint-editor/PaperPanel.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-  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 { DEFAULT_BACKLIGHT_COLOR, LIGHT_SLIDERS, PAPER_FAMILIES, PAPER_LIBRARY, PAPER_SLIDERS, patchPath, readPath, renderPaper, type PaintEditorController } from '@pixerate/editor/paint-editor';
   import PaintSlider from './PaintSlider.svelte';
   import PixelCanvas from './PixelCanvas.svelte';
-  import FerroPanel from './FerroPanel.svelte';
   import TimeMachinePanel from './TimeMachinePanel.svelte';
   import CulturePanel from './CulturePanel.svelte';
-  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
   interface Props {
     controller: PaintEditorController;
@@ -22,17 +20,10 @@
     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>
 
-<!-- The paper library by family and the current paper's settings (each change one undo step). -->
+<!-- The paper library by family and the current paper's settings (each change one undo step), and the light for thick paint. The UV blacklight, heat, magnets and view tilt are in SpecialtyPanel. -->
 <div class={`${panel} ${className}`} data-testid="paper-panel">
   {#each PAPER_FAMILIES as family (family)}
     <div>
@@ -74,38 +65,8 @@
     {#each LIGHT_SLIDERS as c (c.path)}
       <PaintSlider control={c} value={readPath(lighting, c.path)} onchange={(v) => run(() => controller.setLighting({ [c.path]: v }))} />
     {/each}
-    {#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>
+    <button type="button" class={`self-start ${button}`} onclick={() => run(() => controller.flattenRelief())}>Flatten relief</button>
   </div>
-  <FerroPanel {controller} />
   <TimeMachinePanel {controller} />
   <CulturePanel {controller} />
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}

package/dist/paint-editor/SpecialtyGuideCard.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { brushSpecialtyGuides, runBrushSpecialtyAction, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { attempt, button, paintEditorState } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    /** With it, an "Open Specialty panel" button (the paint editor switches to its Specialty tab). */
+    onopenspecialtypanel?: () => void;
+    class?: string;
+  }
+  let { controller, onopenspecialtypanel, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const guides = $derived(brushSpecialtyGuides(editor.current));
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+</script>
+
+<!-- How to use the active brush's specialty paint: its how-to, the canvas's live status and one-click setup actions. Nothing for a standard brush. -->
+{#if guides.length}
+  <div class={`flex flex-col gap-2 rounded-lg border border-indigo-500/40 bg-indigo-950/30 p-2 ${className}`} data-testid="brush-specialty-guide">
+    {#each guides as g (g.kind)}
+      <div class="flex flex-col gap-1" data-specialty={g.kind}>
+        <div class="flex items-center gap-1.5">
+          <span class="rounded bg-indigo-600 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-white">Specialty</span>
+          <span class="font-medium text-slate-200">{g.title}</span>
+        </div>
+        <p class="text-[11px] leading-snug text-slate-400">{g.howToUse}</p>
+        <p role="status" data-ready={g.ready} class={`text-[11px] ${g.ready ? 'text-emerald-400' : 'text-amber-400'}`}>{g.ready ? '● ' : '○ '}{g.status}</p>
+        {#if g.actions.length}
+          <div class="flex flex-wrap gap-1">
+            {#each g.actions as a (a.id)}
+              <button type="button" class={button} data-action={a.id} title={a.tool} onclick={() => run(() => runBrushSpecialtyAction(controller, a))}>{a.label}</button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/each}
+    {#if onopenspecialtypanel}
+      <button type="button" class={`${button} self-start`} onclick={onopenspecialtypanel}>Open Specialty panel</button>
+    {/if}
+    {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    /** With it, an "Open Specialty panel" button (the paint editor switches to its Specialty tab). */
+    onopenspecialtypanel?: () => void;
+    class?: string;
+}
+declare const SpecialtyGuideCard: import("svelte").Component<Props, {}, "">;
+type SpecialtyGuideCard = ReturnType<typeof SpecialtyGuideCard>;
+export default SpecialtyGuideCard;

package/dist/paint-editor/SpecialtyPanel.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { UV_LIGHT_SLIDERS, VIEW_TILT_SLIDERS, brushSpecialtyGuides, readPath, requestDeviceTiltPermission, startDeviceTilt, warmCanvasHeat, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import { untrack } from 'svelte';
+  import PaintSlider from './PaintSlider.svelte';
+  import FerroPanel from './FerroPanel.svelte';
+  import SpecialtyGuideCard from './SpecialtyGuideCard.svelte';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const snap = $derived(editor.current);
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  /** Specialty presets offered as a quick pick while a standard brush is active. */
+  const PICKS = ['ferrofluid', 'uv-marker', 'thermo-ink', 'soap-film', 'ghost-wash', 'mutation-wash', 'turing-wash'];
+  const guides = $derived(brushSpecialtyGuides(snap));
+  const picks = $derived(PICKS.flatMap((id) => snap.brushes.filter((b) => b.id === id)));
+  const tilted = $derived(snap.viewTilt.x !== 0 || snap.viewTilt.y !== 0);
+  let tiltFollow = $state(false);
+  $effect(() => {
+    const c = controller;
+    const on = tiltFollow;
+    return on ? untrack(() => startDeviceTilt(c)) : undefined;
+  });
+</script>
+
+<!-- The canvas environment for specialty paint: the brush's guide (or a quick pick), the UV blacklight and heat, magnets, and the view tilt. -->
+<div class={`${panel} ${className}`} data-testid="specialty-panel">
+  {#if guides.length}
+    <SpecialtyGuideCard {controller} />
+  {:else}
+    <div class="flex flex-col gap-1" data-testid="specialty-picks">
+      <span class="text-slate-400">The active brush is a standard one. Pick a specialty brush:</span>
+      <div class="flex flex-wrap gap-1">
+        {#each picks as b (b.id)}
+          <button type="button" class={button} onclick={() => run(() => controller.setBrush({ id: b.id }))}>{b.name}</button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+  <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>
+    <p class="text-[11px] leading-snug text-slate-500">UV-fluorescent ink (UV marker) glows in its own colour under the blacklight; invisible UV ink shows only under it. Thermochromic ink (Thermochromic ink preset) shifts toward its hot colour where the canvas is warm.</p>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" checked={snap.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(snap.uvLight, c.path)} onchange={(v) => run(() => controller.setUvLight({ [c.path]: v }))} />
+    {/each}
+    <span class="text-[11px] text-slate-400" role="status">{snap.heat.hotCells > 0 ? `Canvas heat: ${Math.round(snap.heat.max * 100)}% at its warmest` : 'Canvas is cool'}</span>
+    <div class="flex flex-wrap items-center gap-1">
+      <button type="button" class={button} onclick={() => run(() => controller.paintHeat(warmCanvasHeat(snap.document.canvas)))}>Warm canvas</button>
+      <button type="button" class={button} disabled={snap.heat.hotCells === 0} onclick={() => run(() => controller.advanceHeat(10))}>Step heat</button>
+      <button type="button" class={button} disabled={snap.heat.hotCells === 0} onclick={() => run(() => controller.clearHeat())}>Cool canvas</button>
+    </div>
+  </div>
+  <div class="flex flex-col gap-1.5">
+    <p class="text-[11px] leading-snug text-slate-500">Ferrofluid and Ferro ink pool into liquid magnetic paint that magnets pull into 3D Rosensweig spikes.</p>
+    <FerroPanel {controller} />
+  </div>
+  <div class="flex flex-col gap-1.5" data-testid="view-tilt-panel">
+    <span class="font-medium text-slate-300">Thin-film iridescence &amp; view tilt</span>
+    <p class="text-[11px] leading-snug text-slate-500">Scarab lacquer, Soap film and Pearl glaze shift colour with the viewing angle.</p>
+    {#each VIEW_TILT_SLIDERS as c (c.path)}
+      <PaintSlider control={c} value={readPath(snap.viewTilt, c.path)} onchange={(v) => run(() => controller.setViewTilt({ [c.path]: v }))} />
+    {/each}
+    <div class="flex flex-wrap items-center gap-1">
+      <button type="button" class={button} disabled={!tilted} onclick={() => run(() => controller.setViewTilt({ x: 0, y: 0 }))}>Reset tilt</button>
+      <button
+        type="button"
+        aria-pressed={tiltFollow}
+        class={chip(tiltFollow)}
+        onclick={() =>
+          run(async () => {
+            if (!tiltFollow && !(await requestDeviceTiltPermission())) return;
+            tiltFollow = !tiltFollow;
+          })}
+      >Device tilt</button>
+    </div>
+  </div>
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,8 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    class?: string;
+}
+declare const SpecialtyPanel: import("svelte").Component<Props, {}, "">;
+type SpecialtyPanel = ReturnType<typeof SpecialtyPanel>;
+export default SpecialtyPanel;

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

@@ -7,6 +7,8 @@ import type BrushEditorComponent from '../brushes/BrushEditor.svelte';
 import type BrushLibraryBrowserComponent from '../brushes/BrushLibraryBrowser.svelte';
 import type PaperPanelComponent from './PaperPanel.svelte';
 import type FerroPanelComponent from './FerroPanel.svelte';
+import type SpecialtyPanelComponent from './SpecialtyPanel.svelte';
+import type SpecialtyGuideCardComponent from './SpecialtyGuideCard.svelte';
 import type TimeMachinePanelComponent from './TimeMachinePanel.svelte';
 import type CulturePanelComponent from './CulturePanel.svelte';
 import type ColorPanelComponent from './ColorPanel.svelte';
@@ -27,6 +29,8 @@ export { default as BrushEditor } from '../brushes/BrushEditor.svelte';
 export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as FerroPanel } from './FerroPanel.svelte';
+export { default as SpecialtyPanel } from './SpecialtyPanel.svelte';
+export { default as SpecialtyGuideCard } from './SpecialtyGuideCard.svelte';
 export { default as TimeMachinePanel } from './TimeMachinePanel.svelte';
 export { default as CulturePanel } from './CulturePanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
@@ -52,6 +56,8 @@ export type BrushEditorProps = ComponentProps<typeof BrushEditorComponent>;
 export type BrushLibraryBrowserProps = ComponentProps<typeof BrushLibraryBrowserComponent>;
 export type PaperPanelProps = ComponentProps<typeof PaperPanelComponent>;
 export type FerroPanelProps = ComponentProps<typeof FerroPanelComponent>;
+export type SpecialtyPanelProps = ComponentProps<typeof SpecialtyPanelComponent>;
+export type SpecialtyGuideCardProps = ComponentProps<typeof SpecialtyGuideCardComponent>;
 export type TimeMachinePanelProps = ComponentProps<typeof TimeMachinePanelComponent>;
 export type CulturePanelProps = ComponentProps<typeof CulturePanelComponent>;
 export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;

package/dist/paint-editor/index.js

@@ -8,6 +8,8 @@ export { default as BrushEditor } from '../brushes/BrushEditor.svelte';
 export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as FerroPanel } from './FerroPanel.svelte';
+export { default as SpecialtyPanel } from './SpecialtyPanel.svelte';
+export { default as SpecialtyGuideCard } from './SpecialtyGuideCard.svelte';
 export { default as TimeMachinePanel } from './TimeMachinePanel.svelte';
 export { default as CulturePanel } from './CulturePanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.215.1",
+  "version": "0.216.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.292.0"
+    "@pixerate/editor": "0.294.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",