@pixerate/editor-svelte 0.108.0 → 0.109.0

package/dist/canvas/createCanvasPlaybackSurface.svelte.d.ts

@@ -1,7 +1,13 @@
 import { type CanvasEdge, type CanvasNode, type NodeRectOptions } from '@pixerate/editor/canvas';
-import type { AgentPlayback, PresenceStore } from '@pixerate/editor/tools';
+import { type AgentPlayback, type PlaybackChromeOptions, type PresenceStore } from '@pixerate/editor/tools';
 type MaybeGetter<T> = T | (() => T);
-export interface CreateCanvasPlaybackSurfaceOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
+/**
+ * `locate`, `locateElement` and `open` (see `PlaybackChromeOptions`) let the host's own chrome over
+ * the canvas (a HUD, toolbar or panels) answer refs the canvas does not find, such as
+ * `{ kind: 'panel' | 'control', id }`: `locate` in flow coordinates, `locateElement` as an element
+ * whose client box is mapped into flow coordinates through the viewport.
+ */
+export interface CreateCanvasPlaybackSurfaceOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> extends PlaybackChromeOptions {
     /** The flow's nodes and edges now (e.g. the `bind:nodes` state). */
     getNodes: () => readonly TNode[];
     getEdges?: () => readonly TEdge[];

package/dist/canvas/createCanvasPlaybackSurface.svelte.js

@@ -1,4 +1,5 @@
 import { createCanvasPlaybackLocator } from '@pixerate/editor/canvas';
+import { locatePlaybackChrome } from '@pixerate/editor/tools';
 import { createPlaybackSurface } from '../playback/playback.svelte.js';
 /**
  * Svelte 5 rune: attaches the node canvas as an agent playback surface under `id` (the canvas tool
@@ -7,15 +8,20 @@ import { createPlaybackSurface } from '../playback/playback.svelte.js';
  * React's `useCanvasPlaybackSurface`.
  */
 export function createCanvasPlaybackSurface(playback, id, options) {
-    const locate = createCanvasPlaybackLocator({
+    const locateFlow = createCanvasPlaybackLocator({
         getNodes: options.getNodes,
         getEdges: () => options.getEdges?.() ?? [],
         rectOptions: options.rectOptions
     });
     const box = () => options.container()?.getBoundingClientRect() ?? null;
+    const fromViewport = (p) => {
+        const r = box();
+        const { x, y, zoom } = options.getViewport();
+        return { x: (p.x - (r?.left ?? 0) - x) / zoom, y: (p.y - (r?.top ?? 0) - y) / zoom };
+    };
     return createPlaybackSurface(playback, id, {
         defaultKind: 'node',
-        locate,
+        locate: (ref) => locateFlow(ref) ?? locatePlaybackChrome(ref, options, fromViewport),
         bounds: () => {
             const r = box();
             const { x, y, zoom } = options.getViewport();
@@ -33,11 +39,10 @@ export function createCanvasPlaybackSurface(playback, id, options) {
             const { x, y, zoom } = options.getViewport();
             return { x: (r?.left ?? 0) + p.x * zoom + x, y: (r?.top ?? 0) + p.y * zoom + y };
         },
-        fromViewport: (p) => {
-            const r = box();
-            const { x, y, zoom } = options.getViewport();
-            return { x: (p.x - (r?.left ?? 0) - x) / zoom, y: (p.y - (r?.top ?? 0) - y) / zoom };
-        },
-        reveal: () => options.reveal?.()
+        fromViewport,
+        reveal: () => options.reveal?.(),
+        get open() {
+            return options.open ? (ref) => options.open?.(ref) : undefined;
+        }
     });
 }

package/dist/image-editor/AdjustmentLayersPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageSectionTitleClass, imageSelectClass } from './styles.js';
   import type {
     AdjustmentKind,
     AdjustmentLayer,
@@ -28,9 +29,11 @@
     /** The current layers (`state.adjustments.layers`), bottom to top. Omit to follow the controller. */
     layers?: AdjustmentLayer[];
     histogram?: ImageHistogram | null;
+    /** Extra classes on the root element. */
+    class?: string;
   }
 
-  let { controller, layers: layersProp, histogram = null }: Props = $props();
+  let { controller, layers: layersProp, histogram = null, class: className = '' }: Props = $props();
 
   // Follows the controller when no `layers` prop is given.
   let tick = $state(0);
@@ -66,10 +69,8 @@
 
   const selected = $derived(layers.find((l) => l.id === selectedId) ?? null);
   const topFirst = $derived([...layers].reverse());
-
-  const selectClass = 'bg-slate-800 border border-slate-700 rounded px-1.5 py-1 text-slate-200';
   const chipClass = (on: boolean) =>
-    `px-2 py-0.5 rounded text-[10px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-400 hover:text-slate-200'}`;
+    `px-2 py-0.5 rounded text-[10px] ${on ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:text-foreground'}`;
 
   function setParam(layer: AdjustmentLayer, path: string, value: unknown, commit = true) {
     controller.updateAdjustmentLayer(layer.id, { params: setControlPath(layer.params, path, value) as never }, commit);
@@ -103,17 +104,17 @@
   }
 </script>
 
-<div class="flex flex-col gap-2 text-xs" data-testid="adjustment-layers-panel">
+<div class="flex flex-col gap-2 text-xs {className}" data-testid="adjustment-layers-panel">
   <div class="flex items-center justify-between">
-    <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Adjustment Layers</span>
+    <span class={imageSectionTitleClass}>Adjustment Layers</span>
   </div>
   <div class="flex gap-1.5">
-    <select aria-label="New adjustment layer kind" class="{selectClass} flex-1" bind:value={newKind}>
+    <select aria-label="New adjustment layer kind" class="{imageSelectClass} flex-1" bind:value={newKind}>
       {#each ADJUSTMENT_KINDS as k (k.kind)}
         <option value={k.kind}>{k.label}</option>
       {/each}
     </select>
-    <button type="button" class="px-2 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-500" onclick={addLayer}>
+    <button type="button" class="px-2 py-1 rounded bg-primary text-primary-foreground hover:bg-primary/90" onclick={addLayer}>
       Add Layer
     </button>
   </div>
@@ -125,19 +126,19 @@
         {@const label = layer.name || adjustmentKindLabel(layer.kind)}
         <li
           class="flex items-center gap-1.5 rounded px-1.5 py-1 {layer.id === selectedId
-            ? 'bg-indigo-600/20 ring-1 ring-indigo-500/50'
-            : 'bg-slate-800/60'}"
+            ? 'bg-primary/20 ring-1 ring-primary/50'
+            : 'bg-muted/60'}"
         >
           <input
             type="checkbox"
             aria-label="Show {label}"
             checked={layer.enabled}
             onchange={() => controller.toggleAdjustmentLayer(layer.id)}
-            class="accent-indigo-500"
+            class="accent-primary"
           />
           <button
             type="button"
-            class="flex-1 text-left truncate {layer.enabled ? 'text-slate-200' : 'text-slate-500 line-through'}"
+            class="flex-1 text-left truncate {layer.enabled ? 'text-foreground' : 'text-muted-foreground line-through'}"
             aria-pressed={layer.id === selectedId}
             onclick={() => (selectedId = layer.id === selectedId ? null : layer.id)}
           >
@@ -148,7 +149,7 @@
             aria-label="Move {label} up"
             disabled={index === layers.length - 1}
             onclick={() => controller.moveAdjustmentLayer(layer.id, index + 1)}
-            class="px-1 text-slate-400 hover:text-slate-200 disabled:opacity-30"
+            class="px-1 text-muted-foreground hover:text-foreground disabled:opacity-30"
           >
             ↑
           </button>
@@ -157,7 +158,7 @@
             aria-label="Move {label} down"
             disabled={index === 0}
             onclick={() => controller.moveAdjustmentLayer(layer.id, index - 1)}
-            class="px-1 text-slate-400 hover:text-slate-200 disabled:opacity-30"
+            class="px-1 text-muted-foreground hover:text-foreground disabled:opacity-30"
           >
             ↓
           </button>
@@ -168,7 +169,7 @@
               controller.removeAdjustmentLayer(layer.id);
               if (selectedId === layer.id) selectedId = null;
             }}
-            class="px-1 text-rose-400 hover:text-rose-300"
+            class="px-1 text-destructive hover:text-destructive"
           >
             ✕
           </button>
@@ -179,12 +180,12 @@
 
   {#if selected}
     {@const layer = selected}
-    <div class="flex flex-col gap-2 rounded border border-slate-700/60 p-2" data-testid="adjustment-layer-editor">
+    <div class="flex flex-col gap-2 rounded border border-border p-2" data-testid="adjustment-layer-editor">
       <div class="flex items-center gap-2">
-        <span class="text-slate-400">Blend</span>
+        <span class="text-muted-foreground">Blend</span>
         <select
           aria-label="Blend mode"
-          class="{selectClass} flex-1"
+          class="{imageSelectClass} flex-1"
           value={layer.blend}
           onchange={(e) => controller.updateAdjustmentLayer(layer.id, { blend: (e.target as HTMLSelectElement).value as BlendMode })}
         >
@@ -244,7 +245,7 @@
           {/each}
         </div>
       {:else if layer.kind === 'photoFilter'}
-        <label class="flex items-center gap-2 text-slate-300">
+        <label class="flex items-center gap-2 text-foreground">
           Filter colour
           <input
             type="color"
@@ -255,7 +256,7 @@
           />
         </label>
       {:else if layer.kind === 'invert'}
-        <p class="text-slate-500 text-[11px]">Invert has no settings.</p>
+        <p class="text-muted-foreground text-[11px]">Invert has no settings.</p>
       {/if}
 
       {#each visibleControls(layer) as spec (spec.id)}
@@ -263,34 +264,34 @@
       {/each}
 
       {#if layer.kind === 'hueSaturation' && range === -1}
-        <label class="flex items-center gap-2 text-slate-300">
+        <label class="flex items-center gap-2 text-foreground">
           <input
             type="checkbox"
             checked={layer.params.colorize}
             onchange={(e) => setParam(layer, 'colorize', (e.target as HTMLInputElement).checked)}
-            class="accent-indigo-500"
+            class="accent-primary"
           />
           Colorize
         </label>
       {/if}
       {#if layer.kind === 'colorBalance' || layer.kind === 'photoFilter'}
-        <label class="flex items-center gap-2 text-slate-300">
+        <label class="flex items-center gap-2 text-foreground">
           <input
             type="checkbox"
             checked={layer.params.preserveLuminosity}
             onchange={(e) => setParam(layer, 'preserveLuminosity', (e.target as HTMLInputElement).checked)}
-            class="accent-indigo-500"
+            class="accent-primary"
           />
           Preserve luminosity
         </label>
       {/if}
       {#if layer.kind === 'blackWhite'}
-        <label class="flex items-center gap-2 text-slate-300">
+        <label class="flex items-center gap-2 text-foreground">
           <input
             type="checkbox"
             checked={layer.params.tint !== null}
             onchange={(e) => setParam(layer, 'tint', (e.target as HTMLInputElement).checked ? '#e1d3b3' : null)}
-            class="accent-indigo-500"
+            class="accent-primary"
           />
           Tint
           {#if layer.params.tint}

package/dist/image-editor/AdjustmentLayersPanel.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     /** The current layers (`state.adjustments.layers`), bottom to top. Omit to follow the controller. */
     layers?: AdjustmentLayer[];
     histogram?: ImageHistogram | null;
+    /** Extra classes on the root element. */
+    class?: string;
 }
 declare const AdjustmentLayersPanel: import("svelte").Component<Props, {}, "">;
 type AdjustmentLayersPanel = ReturnType<typeof AdjustmentLayersPanel>;

package/dist/image-editor/BrushOptionsBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageChipClass, imageColorInputClass } from './styles.js';
   import type { ImageEditorController } from '@pixerate/editor/image-editor';
   import {
     BRUSH_OPTION_CONTROLS,
@@ -41,7 +42,7 @@
   });
   let error = $state<string | null>(null);
 
-  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+  
 
   function attempt(fn: () => unknown) {
     try {
@@ -53,14 +54,14 @@
   }
 </script>
 
-<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="brush-options">
+<div class="flex flex-col gap-2 text-xs text-foreground {className}" data-testid="brush-options">
   <div class="flex flex-wrap gap-1" role="toolbar" aria-label="Paint tools">
     {#each PAINT_TOOLS as t (t.id)}
       <button
         type="button"
         aria-pressed={view.tool === t.id}
         title={t.shortcut ? `${t.label} (${t.shortcut})` : t.label}
-        class={chip(view.tool === t.id)}
+        class={imageChipClass(view.tool === t.id)}
         onclick={() => controller.setTool(t.id)}>{t.label}</button>
     {/each}
   </div>
@@ -72,9 +73,9 @@
         aria-label="Foreground colour"
         value={view.foreground}
         oninput={(e) => controller.setPaintOptions({ foreground: (e.target as HTMLInputElement).value })}
-        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+        class={imageColorInputClass}
       />
-      <span class="text-slate-400">FG</span>
+      <span class="text-muted-foreground">FG</span>
     </label>
     <label class="flex items-center gap-1">
       <input
@@ -82,18 +83,18 @@
         aria-label="Background colour"
         value={view.background}
         oninput={(e) => controller.setPaintOptions({ background: (e.target as HTMLInputElement).value })}
-        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+        class={imageColorInputClass}
       />
-      <span class="text-slate-400">BG</span>
+      <span class="text-muted-foreground">BG</span>
     </label>
-    <button type="button" title="Swap colours (X)" class={chip(false)} onclick={() => controller.swapPaintColors()}>Swap</button>
-    <button type="button" title="Default colours (D)" class={chip(false)} onclick={() => controller.resetPaintColors()}>Default</button>
+    <button type="button" title="Swap colours (X)" class={imageChipClass(false)} onclick={() => controller.swapPaintColors()}>Swap</button>
+    <button type="button" title="Default colours (D)" class={imageChipClass(false)} onclick={() => controller.resetPaintColors()}>Default</button>
     {#if view.tool === 'brush'}
       <button
         type="button"
         aria-pressed={view.paint.type === 'gradient'}
         title="Gradient paint: the brush changes colour as the stroke goes"
-        class={chip(view.paint.type === 'gradient')}
+        class={imageChipClass(view.paint.type === 'gradient')}
         onclick={() => attempt(() => controller.setPaintOptions(view.paint.type === 'gradient' ? { foreground: view.foreground } : { paint: DEFAULT_PAINT_GRADIENT }))}>Gradient</button
       >
     {/if}
@@ -108,16 +109,16 @@
 
   {#if view.tool === 'mixer'}
     {@const load = view.mixerLoad}
-    <div class="flex flex-col gap-2 border-t border-slate-800 pt-2" role="group" aria-label="Mixer Brush" data-testid="mixer-options">
+    <div class="flex flex-col gap-2 border-t border-border pt-2" role="group" aria-label="Mixer Brush" data-testid="mixer-options">
       <div class="flex items-center gap-2">
         <span
           aria-label="Brush load"
           title={load.reservoir ? `Loaded ${rgbUnitToHex(load.reservoir)}, ${Math.round(load.amount * 100)}% left` : 'Unloaded'}
-          class="h-6 w-6 rounded border border-slate-700"
+          class="h-6 w-6 rounded border border-border"
           style:background={load.reservoir ? rgbUnitToHex(load.reservoir) : 'transparent'}
         ></span>
-        <button type="button" title="Fill the reservoir with the foreground colour" class={chip(false)} onclick={() => controller.loadMixerBrush()}>Load brush</button>
-        <button type="button" title="Empty the picked-up colour" class={chip(false)} onclick={() => controller.cleanMixerBrush()}>Clean brush</button>
+        <button type="button" title="Fill the reservoir with the foreground colour" class={imageChipClass(false)} onclick={() => controller.loadMixerBrush()}>Load brush</button>
+        <button type="button" title="Empty the picked-up colour" class={imageChipClass(false)} onclick={() => controller.cleanMixerBrush()}>Clean brush</button>
       </div>
       <div class="flex gap-1" role="group" aria-label="Mixing">
         {#each MIXER_MIXING_OPTIONS as m (m.id)}
@@ -125,21 +126,21 @@
             type="button"
             aria-pressed={view.mixer.mixing === m.id}
             title={m.title}
-            class={chip(view.mixer.mixing === m.id)}
+            class={imageChipClass(view.mixer.mixing === m.id)}
             onclick={() => controller.setPaintOptions({ mixer: { mixing: m.id } })}>{m.label}</button>
         {/each}
       </div>
       {#each MIXER_OPTION_CONTROLS as spec (spec.id)}
         <ControlSlider {spec} value={view.mixer[spec.id]} onchange={(v) => controller.setPaintOptions({ mixer: { [spec.id]: v } })} />
       {/each}
-      <div class="flex flex-wrap gap-3 text-slate-300">
+      <div class="flex flex-wrap gap-3 text-foreground">
         <label class="flex items-center gap-1.5">
           <input
             type="checkbox"
             aria-label="Load the brush after each stroke"
             checked={view.mixer.loadEachStroke}
             onchange={(e) => controller.setPaintOptions({ mixer: { loadEachStroke: (e.target as HTMLInputElement).checked } })}
-            class="accent-indigo-500"
+            class="accent-primary"
           />
           Load each stroke
         </label>
@@ -149,7 +150,7 @@
             aria-label="Clean the brush after each stroke"
             checked={view.mixer.cleanEachStroke}
             onchange={(e) => controller.setPaintOptions({ mixer: { cleanEachStroke: (e.target as HTMLInputElement).checked } })}
-            class="accent-indigo-500"
+            class="accent-primary"
           />
           Clean each stroke
         </label>
@@ -158,12 +159,12 @@
   {/if}
 
   {#if isRetouchPaintTool(view.tool)}
-    <div class="flex flex-col gap-2 border-t border-slate-800 pt-2" role="group" aria-label="Retouch options" data-testid="retouch-options">
+    <div class="flex flex-col gap-2 border-t border-border pt-2" role="group" aria-label="Retouch options" data-testid="retouch-options">
       {#if view.tool === 'clone' || view.tool === 'heal'}
         <div class="flex items-center gap-2">
-          <span class="text-slate-400" data-testid="clone-source">{view.sourceLabel}</span>
+          <span class="text-muted-foreground" data-testid="clone-source">{view.sourceLabel}</span>
           {#if view.cloneSource}
-            <button type="button" title="Forget the source point" class={chip(false)} onclick={() => controller.setCloneSource(null)}>Clear source</button>
+            <button type="button" title="Forget the source point" class={imageChipClass(false)} onclick={() => controller.setCloneSource(null)}>Clear source</button>
           {/if}
         </div>
         <div class="flex flex-col gap-1" role="group" aria-label="Clone source transform" data-testid="clone-transform">
@@ -171,23 +172,23 @@
             <ControlSlider {spec} value={view.cloneView[spec.id]} onchange={(v) => setCloneTransformValue(controller, spec.id, v)} />
           {/each}
           <div class="flex items-center gap-1">
-            <button type="button" aria-pressed={view.cloneView.flipH} title="Mirror the source left to right" class={chip(view.cloneView.flipH)} onclick={() => setCloneTransformValue(controller, 'flipH')}>Flip H</button>
-            <button type="button" aria-pressed={view.cloneView.flipV} title="Mirror the source top to bottom" class={chip(view.cloneView.flipV)} onclick={() => setCloneTransformValue(controller, 'flipV')}>Flip V</button>
+            <button type="button" aria-pressed={view.cloneView.flipH} title="Mirror the source left to right" class={imageChipClass(view.cloneView.flipH)} onclick={() => setCloneTransformValue(controller, 'flipH')}>Flip H</button>
+            <button type="button" aria-pressed={view.cloneView.flipV} title="Mirror the source top to bottom" class={imageChipClass(view.cloneView.flipV)} onclick={() => setCloneTransformValue(controller, 'flipV')}>Flip V</button>
             {#if !view.cloneView.identity}
-              <button type="button" title="Back to 100 %, no flip, 0°" class={chip(false)} onclick={() => controller.setCloneTransform(null)}>Reset transform</button>
+              <button type="button" title="Back to 100 %, no flip, 0°" class={imageChipClass(false)} onclick={() => controller.setCloneTransform(null)}>Reset transform</button>
             {/if}
           </div>
         </div>
       {/if}
       {#each RETOUCH_CHOICES.filter((c) => c.tools.includes(view.tool as never)) as choice (choice.id)}
         <div class="flex flex-wrap items-center gap-1" role="group" aria-label={choice.label}>
-          <span class="text-slate-400">{choice.label}</span>
+          <span class="text-muted-foreground">{choice.label}</span>
           {#each choice.options as o (o.id)}
             <button
               type="button"
               aria-pressed={view.retouch[choice.id] === o.id}
               title={o.title}
-              class={chip(view.retouch[choice.id] === o.id)}
+              class={imageChipClass(view.retouch[choice.id] === o.id)}
               onclick={() => setRetouchChoice(controller, choice.id, o.id)}>{o.label}</button>
           {/each}
         </div>
@@ -195,7 +196,7 @@
       {#each RETOUCH_OPTION_CONTROLS.filter((c) => c.tools.includes(view.tool as never)) as spec (spec.id)}
         <ControlSlider {spec} value={view.retouch[spec.id]} onchange={(v) => controller.setPaintOptions({ retouch: { [spec.id]: v } })} />
       {/each}
-      <div class="flex flex-wrap gap-3 text-slate-300">
+      <div class="flex flex-wrap gap-3 text-foreground">
         {#each RETOUCH_TOGGLES.filter((t) => t.tools.includes(view.tool as never)) as t (t.id)}
           <label class="flex items-center gap-1.5">
             <input
@@ -203,7 +204,7 @@
               aria-label={t.label}
               checked={view.retouch[t.id]}
               onchange={(e) => controller.setPaintOptions({ retouch: { [t.id]: (e.target as HTMLInputElement).checked } })}
-              class="accent-indigo-500"
+              class="accent-primary"
             />
             {t.label}
           </label>
@@ -212,14 +213,14 @@
     </div>
   {/if}
 
-  <div class="flex flex-wrap gap-3 text-slate-300" role="group" aria-label="Pressure">
+  <div class="flex flex-wrap gap-3 text-foreground" role="group" aria-label="Pressure">
     <label class="flex items-center gap-1.5">
       <input
         type="checkbox"
         aria-label="Pressure controls size"
         checked={view.brush.pressureSize}
         onchange={(e) => controller.setPaintOptions({ brush: { pressureSize: (e.target as HTMLInputElement).checked } })}
-        class="accent-indigo-500"
+        class="accent-primary"
       />
       Pressure size
     </label>
@@ -229,17 +230,17 @@
         aria-label="Pressure controls opacity"
         checked={view.brush.pressureOpacity}
         onchange={(e) => controller.setPaintOptions({ brush: { pressureOpacity: (e.target as HTMLInputElement).checked } })}
-        class="accent-indigo-500"
+        class="accent-primary"
       />
       Pressure opacity
     </label>
   </div>
 
   <div class="flex gap-1">
-    <button type="button" class={chip(false)} onclick={() => attempt(() => controller.fillPixels())}>Fill</button>
-    <button type="button" class={chip(false)} onclick={() => attempt(() => controller.clearPixels())}>Clear</button>
+    <button type="button" class={imageChipClass(false)} onclick={() => attempt(() => controller.fillPixels())}>Fill</button>
+    <button type="button" class={imageChipClass(false)} onclick={() => attempt(() => controller.clearPixels())}>Clear</button>
   </div>
   {#if error}
-    <p role="alert" class="text-rose-400">{error}</p>
+    <p role="alert" class="text-destructive">{error}</p>
   {/if}
 </div>

package/dist/image-editor/ColorProfilePanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageChipClass } from './styles.js';
   import type { ImageEditorController, Intent } from '@pixerate/editor/image-editor';
   import { COLOR_MODE_OPTIONS, INTENT_OPTIONS, PROOF_PROFILE_OPTIONS, WORKING_SPACE_OPTIONS, colorPanelView } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -24,9 +25,8 @@
   let intent = $state<Intent>('relative');
   let bpc = $state(true);
   let error = $state<string | null>(null);
-
-  const chip = 'px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white';
-  const select = 'rounded bg-slate-800 px-1 py-0.5 text-[11px] text-slate-200';
+  const chip = imageChipClass(false);
+  const select = 'rounded bg-muted px-1 py-0.5 text-[11px] text-foreground';
 
   function attempt(fn: () => unknown) {
     try {
@@ -51,20 +51,20 @@
   }
 </script>
 
-<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="color-profile-panel">
+<div class="flex flex-col gap-2 text-xs text-foreground {className}" data-testid="color-profile-panel">
   <div class="flex items-center gap-2">
-    <span class="text-slate-400">Profile</span>
+    <span class="text-muted-foreground">Profile</span>
     <span data-testid="color-profile-name">{view.profileName}</span>
   </div>
   <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Colour mode">
-    <span class="text-slate-400">Mode</span>
+    <span class="text-muted-foreground">Mode</span>
     <select aria-label="Colour mode" class={select} value={view.mode} onchange={(e) => attempt(() => controller.setColorMode((e.target as HTMLSelectElement).value as 'rgb' | 'cmyk' | 'lab'))}>
       {#each COLOR_MODE_OPTIONS as o (o.id)}
         <option value={o.id} title={o.title}>{o.label}</option>
       {/each}
     </select>
     {#if view.cmykProfileName}
-      <span class="text-slate-400">{view.cmykProfileName}</span>
+      <span class="text-muted-foreground">{view.cmykProfileName}</span>
     {/if}
   </div>
   <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Assign or convert">
@@ -79,14 +79,14 @@
       {/each}
     </select>
     <label class="flex items-center gap-1">
-      <input type="checkbox" aria-label="Black point compensation" checked={bpc} onchange={(e) => (bpc = (e.target as HTMLInputElement).checked)} class="accent-indigo-500" />
+      <input type="checkbox" aria-label="Black point compensation" checked={bpc} onchange={(e) => (bpc = (e.target as HTMLInputElement).checked)} class="accent-primary" />
       BPC
     </label>
     <button type="button" class={chip} title="Edit › Assign Profile: keep the numbers" onclick={() => attempt(() => controller.assignProfile(target))}>Assign</button>
     <button type="button" class={chip} title="Edit › Convert to Profile: keep the look" onclick={() => attempt(() => controller.convertToProfile(target, { intent, bpc }))}>Convert</button>
   </div>
   <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Proof setup">
-    <span class="text-slate-400">Proof</span>
+    <span class="text-muted-foreground">Proof</span>
     <select
       aria-label="Proof profile"
       class={select}
@@ -108,16 +108,16 @@
         {/each}
       </select>
       <label class="flex items-center gap-1">
-        <input type="checkbox" aria-label="Simulate paper colour" checked={view.proof.simulatePaper} onchange={(e) => proofWith({ simulatePaper: (e.target as HTMLInputElement).checked })} class="accent-indigo-500" />
+        <input type="checkbox" aria-label="Simulate paper colour" checked={view.proof.simulatePaper} onchange={(e) => proofWith({ simulatePaper: (e.target as HTMLInputElement).checked })} class="accent-primary" />
         Paper
       </label>
       <label class="flex items-center gap-1">
-        <input type="checkbox" aria-label="Gamut warning" checked={view.proof.gamutWarning} onchange={(e) => proofWith({ gamutWarning: (e.target as HTMLInputElement).checked })} class="accent-indigo-500" />
+        <input type="checkbox" aria-label="Gamut warning" checked={view.proof.gamutWarning} onchange={(e) => proofWith({ gamutWarning: (e.target as HTMLInputElement).checked })} class="accent-primary" />
         Gamut warning
       </label>
     {/if}
   </div>
   {#if error}
-    <p role="alert" class="text-rose-400">{error}</p>
+    <p role="alert" class="text-destructive">{error}</p>
   {/if}
 </div>

package/dist/image-editor/ControlSlider.svelte

@@ -9,16 +9,18 @@
     disabled?: boolean;
     /** Overrides `spec.label` (also the accessible name). */
     label?: string;
+    /** Extra classes on the root element. */
+    class?: string;
   }
 
-  let { spec, value, onchange, disabled = false, label }: Props = $props();
+  let { spec, value, onchange, disabled = false, label, class: className = '' }: Props = $props();
 
   const name = $derived(label ?? spec.label);
   const track = $derived(controlTrackBackground(spec));
 </script>
 
-<div data-control-id={spec.id}>
-  <div class="flex justify-between text-slate-400 mb-1">
+<div data-control-id={spec.id} class={className || undefined}>
+  <div class="flex justify-between text-muted-foreground mb-1">
     <span>{name}</span>
     <span class="font-mono">{formatControlValue(spec, value)}</span>
   </div>
@@ -31,7 +33,7 @@
     {disabled}
     {value}
     oninput={(e) => onchange(Number((e.target as HTMLInputElement).value))}
-    class="w-full accent-indigo-500 disabled:opacity-40"
+    class="w-full accent-primary disabled:opacity-40"
   />
   {#if track}
     <div class="h-0.5 rounded-full opacity-70" style="background: {track}"></div>

package/dist/image-editor/ControlSlider.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props {
     disabled?: boolean;
     /** Overrides `spec.label` (also the accessible name). */
     label?: string;
+    /** Extra classes on the root element. */
+    class?: string;
 }
 declare const ControlSlider: import("svelte").Component<Props, {}, "">;
 type ControlSlider = ReturnType<typeof ControlSlider>;

package/dist/image-editor/CurvesEditor.svelte

@@ -18,12 +18,14 @@
     histogram?: ImageHistogram | null;
     channel?: 'master' | 'red' | 'green' | 'blue';
     size?: number;
+    /** Extra classes on the root element. */
+    class?: string;
   }
 
-  let { points, onchange, histogram = null, channel = 'master', size = 200 }: Props = $props();
+  let { points, onchange, histogram = null, channel = 'master', size = 200, class: className = '' }: Props = $props();
 
   const BOX = 256;
-  const STROKE = { master: '#e2e8f0', red: '#ef4444', green: '#22c55e', blue: '#3b82f6' };
+  const STROKE = { master: 'var(--foreground, #e2e8f0)', red: '#ef4444', green: '#22c55e', blue: '#3b82f6' };
 
   let svgEl: SVGSVGElement | undefined = $state();
   let drag: number | null = $state(null);
@@ -72,7 +74,7 @@
   role="application"
   aria-label="{channel} curve"
   data-testid="curves-editor"
-  class="rounded bg-slate-950/70 touch-none select-none cursor-crosshair"
+  class="rounded bg-muted/40 touch-none select-none cursor-crosshair {className}"
   {onpointerdown}
   {onpointermove}
   onpointerup={() => (drag = null)}
@@ -96,7 +98,7 @@
       cx={b.x}
       cy={b.y}
       r="5"
-      fill={drag === i ? STROKE[channel] : '#0f172a'}
+      fill={drag === i ? STROKE[channel] : 'var(--background, #0f172a)'}
       stroke={STROKE[channel]}
       stroke-width="2"
       aria-label="Point {p.input} to {p.output}"

package/dist/image-editor/CurvesEditor.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props {
     histogram?: ImageHistogram | null;
     channel?: 'master' | 'red' | 'green' | 'blue';
     size?: number;
+    /** Extra classes on the root element. */
+    class?: string;
 }
 declare const CurvesEditor: import("svelte").Component<Props, {}, "">;
 type CurvesEditor = ReturnType<typeof CurvesEditor>;