@pixerate/editor-svelte 0.22.0 → 0.24.0

package/dist/image-editor/AdjustmentLayersPanel.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+  import type {
+    AdjustmentKind,
+    AdjustmentLayer,
+    BlendMode,
+    ControlSpec,
+    CurvePoint,
+    ImageEditorController,
+    ImageHistogram,
+  } from '@pixerate/editor/image-editor';
+  import {
+    ADJUSTMENT_KINDS,
+    ADJUSTMENT_LAYER_CONTROLS,
+    ADJUSTMENT_LAYER_OPACITY_CONTROL,
+    BLEND_MODES,
+    HUE_RANGE_LABELS,
+    adjustmentKindLabel,
+    getControlPath,
+    hueRangeWeight,
+    setControlPath,
+  } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+  import ControlSlider from './ControlSlider.svelte';
+  import CurvesEditor from './CurvesEditor.svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** The current layers (`state.adjustments.layers`), bottom to top. Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    histogram?: ImageHistogram | null;
+  }
+
+  let { controller, layers: layersProp, histogram = null }: Props = $props();
+
+  // Follows the controller when no `layers` prop is given.
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    // `subscribe` calls the listener at once: untracked, or the effect would depend on `tick`.
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const layers = $derived.by(() => {
+    void tick;
+    return layersProp ?? controller.getAdjustmentLayers();
+  });
+
+  type Channel = 'master' | 'red' | 'green' | 'blue';
+  const CHANNELS: { id: Channel; label: string }[] = [
+    { id: 'master', label: 'RGB' },
+    { id: 'red', label: 'Red' },
+    { id: 'green', label: 'Green' },
+    { id: 'blue', label: 'Blue' },
+  ];
+  const TONES = [
+    { id: 'shadows', label: 'Shadows' },
+    { id: 'midtones', label: 'Midtones' },
+    { id: 'highlights', label: 'Highlights' },
+  ] as const;
+  type Tone = (typeof TONES)[number]['id'];
+
+  let newKind: AdjustmentKind = $state('curves');
+  let selectedId: string | null = $state(null);
+  let channel: Channel = $state('master');
+  let range = $state(-1);
+  let tone: Tone = $state('midtones');
+
+  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'}`;
+
+  function setParam(layer: AdjustmentLayer, path: string, value: unknown, commit = true) {
+    controller.updateAdjustmentLayer(layer.id, { params: setControlPath(layer.params, path, value) as never }, commit);
+  }
+  const paramValue = (layer: AdjustmentLayer, spec: ControlSpec) => Number(getControlPath(layer.params, spec.id) ?? spec.default);
+
+  function visibleControls(layer: AdjustmentLayer): ControlSpec[] {
+    const all = ADJUSTMENT_LAYER_CONTROLS[layer.kind];
+    switch (layer.kind) {
+      case 'levels':
+        return all.filter((s) => s.id.startsWith(`${channel}.`));
+      case 'hueSaturation':
+        return all.filter((s) =>
+          range === -1 || layer.params.colorize ? !s.id.startsWith('ranges.') : s.id.startsWith(`ranges.${range}.`)
+        );
+      case 'colorBalance':
+        return all.filter((s) => s.id.startsWith(`${tone}.`));
+      default:
+        return [...all];
+    }
+  }
+
+  function stripPoints(bounds: [number, number, number, number]) {
+    return Array.from({ length: 73 }, (_, i) => `${(i / 72) * 360},${20 - hueRangeWeight({ bounds }, i * 5) * 18}`).join(' ');
+  }
+
+  function addLayer() {
+    selectedId = controller.addAdjustmentLayer(newKind);
+    channel = 'master';
+    range = -1;
+  }
+</script>
+
+<div class="flex flex-col gap-2 text-xs" 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>
+  </div>
+  <div class="flex gap-1.5">
+    <select aria-label="New adjustment layer kind" class="{selectClass} 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}>
+      Add Layer
+    </button>
+  </div>
+
+  {#if topFirst.length > 0}
+    <ul class="flex flex-col gap-1" aria-label="Adjustment layers">
+      {#each topFirst as layer (layer.id)}
+        {@const index = layers.indexOf(layer)}
+        {@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'}"
+        >
+          <input
+            type="checkbox"
+            aria-label="Show {label}"
+            checked={layer.enabled}
+            onchange={() => controller.toggleAdjustmentLayer(layer.id)}
+            class="accent-indigo-500"
+          />
+          <button
+            type="button"
+            class="flex-1 text-left truncate {layer.enabled ? 'text-slate-200' : 'text-slate-500 line-through'}"
+            aria-pressed={layer.id === selectedId}
+            onclick={() => (selectedId = layer.id === selectedId ? null : layer.id)}
+          >
+            {label}
+          </button>
+          <button
+            type="button"
+            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"
+          >
+            ↑
+          </button>
+          <button
+            type="button"
+            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"
+          >
+            ↓
+          </button>
+          <button
+            type="button"
+            aria-label="Remove {label}"
+            onclick={() => {
+              controller.removeAdjustmentLayer(layer.id);
+              if (selectedId === layer.id) selectedId = null;
+            }}
+            class="px-1 text-rose-400 hover:text-rose-300"
+          >
+            ✕
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#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 items-center gap-2">
+        <span class="text-slate-400">Blend</span>
+        <select
+          aria-label="Blend mode"
+          class="{selectClass} flex-1"
+          value={layer.blend}
+          onchange={(e) => controller.updateAdjustmentLayer(layer.id, { blend: (e.target as HTMLSelectElement).value as BlendMode })}
+        >
+          {#each BLEND_MODES as m (m.id)}
+            <option value={m.id}>{m.label}</option>
+          {/each}
+        </select>
+      </div>
+      <ControlSlider
+        spec={ADJUSTMENT_LAYER_OPACITY_CONTROL}
+        label="Layer opacity"
+        value={layer.opacity}
+        onchange={(v) => controller.updateAdjustmentLayer(layer.id, { opacity: v })}
+      />
+
+      {#if layer.kind === 'curves' || layer.kind === 'levels'}
+        <div class="flex gap-1" role="group" aria-label={layer.kind === 'curves' ? 'Curve channel' : 'Levels channel'}>
+          {#each CHANNELS as c (c.id)}
+            <button type="button" class={chipClass(channel === c.id)} onclick={() => (channel = c.id)}>{c.label}</button>
+          {/each}
+        </div>
+      {/if}
+
+      {#if layer.kind === 'curves'}
+        <CurvesEditor
+          points={layer.params[channel]}
+          {channel}
+          {histogram}
+          onchange={(points: CurvePoint[], commit: boolean) => setParam(layer, channel, points, commit)}
+        />
+      {:else if layer.kind === 'hueSaturation'}
+        <div class="flex flex-wrap gap-1" role="group" aria-label="Hue range">
+          <button type="button" class={chipClass(range === -1)} onclick={() => (range = -1)}>Master</button>
+          {#each HUE_RANGE_LABELS as name, i (name)}
+            <button type="button" class={chipClass(range === i)} disabled={layer.params.colorize} onclick={() => (range = i)}>
+              {name}
+            </button>
+          {/each}
+        </div>
+        {#if range >= 0 && !layer.params.colorize}
+          <svg viewBox="0 0 360 20" preserveAspectRatio="none" class="w-full h-4 rounded" data-testid="hue-range-strip">
+            <defs>
+              <linearGradient id="pixerate-hue-strip-svelte">
+                {#each [0, 60, 120, 180, 240, 300, 360] as h (h)}
+                  <stop offset="{(h / 360) * 100}%" stop-color="hsl({h}, 90%, 50%)" />
+                {/each}
+              </linearGradient>
+            </defs>
+            <rect width="360" height="20" fill="url(#pixerate-hue-strip-svelte)" opacity="0.6" />
+            <polyline points={stripPoints(layer.params.ranges[range].bounds)} fill="none" stroke="#fff" stroke-width="1.5" />
+          </svg>
+        {/if}
+      {:else if layer.kind === 'colorBalance'}
+        <div class="flex gap-1" role="group" aria-label="Tone">
+          {#each TONES as t (t.id)}
+            <button type="button" class={chipClass(tone === t.id)} onclick={() => (tone = t.id)}>{t.label}</button>
+          {/each}
+        </div>
+      {:else if layer.kind === 'photoFilter'}
+        <label class="flex items-center gap-2 text-slate-300">
+          Filter colour
+          <input
+            type="color"
+            aria-label="Filter colour"
+            value={layer.params.color}
+            oninput={(e) => setParam(layer, 'color', (e.target as HTMLInputElement).value)}
+            class="h-5 w-8 bg-transparent"
+          />
+        </label>
+      {:else if layer.kind === 'invert'}
+        <p class="text-slate-500 text-[11px]">Invert has no settings.</p>
+      {/if}
+
+      {#each visibleControls(layer) as spec (spec.id)}
+        <ControlSlider {spec} value={paramValue(layer, spec)} onchange={(v) => setParam(layer, spec.id, v)} />
+      {/each}
+
+      {#if layer.kind === 'hueSaturation' && range === -1}
+        <label class="flex items-center gap-2 text-slate-300">
+          <input
+            type="checkbox"
+            checked={layer.params.colorize}
+            onchange={(e) => setParam(layer, 'colorize', (e.target as HTMLInputElement).checked)}
+            class="accent-indigo-500"
+          />
+          Colorize
+        </label>
+      {/if}
+      {#if layer.kind === 'colorBalance' || layer.kind === 'photoFilter'}
+        <label class="flex items-center gap-2 text-slate-300">
+          <input
+            type="checkbox"
+            checked={layer.params.preserveLuminosity}
+            onchange={(e) => setParam(layer, 'preserveLuminosity', (e.target as HTMLInputElement).checked)}
+            class="accent-indigo-500"
+          />
+          Preserve luminosity
+        </label>
+      {/if}
+      {#if layer.kind === 'blackWhite'}
+        <label class="flex items-center gap-2 text-slate-300">
+          <input
+            type="checkbox"
+            checked={layer.params.tint !== null}
+            onchange={(e) => setParam(layer, 'tint', (e.target as HTMLInputElement).checked ? '#e1d3b3' : null)}
+            class="accent-indigo-500"
+          />
+          Tint
+          {#if layer.params.tint}
+            <input
+              type="color"
+              aria-label="Tint colour"
+              value={layer.params.tint}
+              oninput={(e) => setParam(layer, 'tint', (e.target as HTMLInputElement).value)}
+              class="h-5 w-8 bg-transparent"
+            />
+          {/if}
+        </label>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { AdjustmentLayer, ImageEditorController, ImageHistogram } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    /** The current layers (`state.adjustments.layers`), bottom to top. Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    histogram?: ImageHistogram | null;
+}
+declare const AdjustmentLayersPanel: import("svelte").Component<Props, {}, "">;
+type AdjustmentLayersPanel = ReturnType<typeof AdjustmentLayersPanel>;
+export default AdjustmentLayersPanel;
+//# sourceMappingURL=AdjustmentLayersPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdjustmentLayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/AdjustmentLayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAER,eAAe,EAIf,qBAAqB,EACrB,cAAc,EACf,MAAM,+BAA+B,CAAC;AAiBvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,qGAAqG;IACrG,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CACnC;AA0NH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/image-editor/ControlSlider.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { ControlSpec } from '@pixerate/editor/image-editor';
+  import { controlTrackBackground, formatControlValue } from '@pixerate/editor/image-editor';
+
+  interface Props {
+    spec: ControlSpec;
+    value: number;
+    onchange: (value: number) => void;
+    disabled?: boolean;
+    /** Overrides `spec.label` (also the accessible name). */
+    label?: string;
+  }
+
+  let { spec, value, onchange, disabled = false, label }: 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">
+    <span>{name}</span>
+    <span class="font-mono">{formatControlValue(spec, value)}</span>
+  </div>
+  <input
+    type="range"
+    min={spec.min}
+    max={spec.max}
+    step={spec.step}
+    aria-label={name}
+    {disabled}
+    {value}
+    oninput={(e) => onchange(Number((e.target as HTMLInputElement).value))}
+    class="w-full accent-indigo-500 disabled:opacity-40"
+  />
+  {#if track}
+    <div class="h-0.5 rounded-full opacity-70" style="background: {track}"></div>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { ControlSpec } from '@pixerate/editor/image-editor';
+interface Props {
+    spec: ControlSpec;
+    value: number;
+    onchange: (value: number) => void;
+    disabled?: boolean;
+    /** Overrides `spec.label` (also the accessible name). */
+    label?: string;
+}
+declare const ControlSlider: import("svelte").Component<Props, {}, "">;
+type ControlSlider = ReturnType<typeof ControlSlider>;
+export default ControlSlider;
+//# sourceMappingURL=ControlSlider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ControlSlider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAI/D,UAAU,KAAK;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/image-editor/CurvesEditor.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type { CurvePoint, ImageHistogram } from '@pixerate/editor/image-editor';
+  import {
+    boxToCurvePoint,
+    curvePointToBox,
+    curveSvgPath,
+    hitTestCurvePoint,
+    histogramPath,
+    insertCurvePoint,
+    moveCurvePoint,
+    removeCurvePoint,
+  } from '@pixerate/editor/image-editor';
+
+  interface Props {
+    points: CurvePoint[];
+    /** `commit` is true for the first change of a gesture (one undo step), false for the drag moves. */
+    onchange: (points: CurvePoint[], commit: boolean) => void;
+    histogram?: ImageHistogram | null;
+    channel?: 'master' | 'red' | 'green' | 'blue';
+    size?: number;
+  }
+
+  let { points, onchange, histogram = null, channel = 'master', size = 200 }: Props = $props();
+
+  const BOX = 256;
+  const STROKE = { master: '#e2e8f0', red: '#ef4444', green: '#22c55e', blue: '#3b82f6' };
+
+  let svgEl: SVGSVGElement | undefined = $state();
+  let drag: number | null = $state(null);
+
+  function toBox(e: MouseEvent) {
+    const rect = svgEl?.getBoundingClientRect();
+    if (!rect || !rect.width || !rect.height) return { x: 0, y: 0 };
+    return { x: ((e.clientX - rect.left) / rect.width) * BOX, y: ((e.clientY - rect.top) / rect.height) * BOX };
+  }
+
+  function onpointerdown(e: PointerEvent) {
+    const { x, y } = toBox(e);
+    let index = hitTestCurvePoint(points, x, y, BOX, BOX, 10);
+    if (index === -1) {
+      const inserted = insertCurvePoint(points, boxToCurvePoint(x, y, BOX, BOX));
+      onchange(inserted.points, true);
+      index = inserted.index;
+    } else {
+      onchange(points, true);
+    }
+    drag = index;
+    (e.target as Element).setPointerCapture?.(e.pointerId);
+  }
+
+  function onpointermove(e: PointerEvent) {
+    if (drag === null) return;
+    const { x, y } = toBox(e);
+    onchange(moveCurvePoint(points, drag, boxToCurvePoint(x, y, BOX, BOX)), false);
+  }
+
+  function ondblclick(e: MouseEvent) {
+    const { x, y } = toBox(e);
+    const index = hitTestCurvePoint(points, x, y, BOX, BOX, 10);
+    if (index !== -1 && points.length > 2) onchange(removeCurvePoint(points, index), true);
+  }
+
+  const histChannel = $derived(channel === 'master' ? 'luminance' : channel);
+</script>
+
+<!-- Curves editor over the histogram: click to add a point, drag to move it, double-click to remove it. -->
+<svg
+  bind:this={svgEl}
+  viewBox="0 0 {BOX} {BOX}"
+  width={size}
+  height={size}
+  role="application"
+  aria-label="{channel} curve"
+  data-testid="curves-editor"
+  class="rounded bg-slate-950/70 touch-none select-none cursor-crosshair"
+  {onpointerdown}
+  {onpointermove}
+  onpointerup={() => (drag = null)}
+  onpointercancel={() => (drag = null)}
+  {ondblclick}
+>
+  {#if histogram && histogram.samples > 0}
+    <path d={histogramPath(histogram, histChannel, BOX, BOX)} fill="rgba(148, 163, 184, 0.25)" />
+  {/if}
+  {#each [64, 128, 192] as v (v)}
+    <g stroke="rgba(148, 163, 184, 0.2)" stroke-width="1">
+      <line x1={v} y1="0" x2={v} y2={BOX} />
+      <line x1="0" y1={v} x2={BOX} y2={v} />
+    </g>
+  {/each}
+  <line x1="0" y1={BOX} x2={BOX} y2="0" stroke="rgba(148, 163, 184, 0.35)" stroke-dasharray="4 4" />
+  <path d={curveSvgPath(points, BOX, BOX)} fill="none" stroke={STROKE[channel]} stroke-width="2" />
+  {#each points as p, i (i)}
+    {@const b = curvePointToBox(p, BOX, BOX)}
+    <circle
+      cx={b.x}
+      cy={b.y}
+      r="5"
+      fill={drag === i ? STROKE[channel] : '#0f172a'}
+      stroke={STROKE[channel]}
+      stroke-width="2"
+      aria-label="Point {p.input} to {p.output}"
+    />
+  {/each}
+</svg>

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

@@ -0,0 +1,13 @@
+import type { CurvePoint, ImageHistogram } from '@pixerate/editor/image-editor';
+interface Props {
+    points: CurvePoint[];
+    /** `commit` is true for the first change of a gesture (one undo step), false for the drag moves. */
+    onchange: (points: CurvePoint[], commit: boolean) => void;
+    histogram?: ImageHistogram | null;
+    channel?: 'master' | 'red' | 'green' | 'blue';
+    size?: number;
+}
+declare const CurvesEditor: import("svelte").Component<Props, {}, "">;
+type CurvesEditor = ReturnType<typeof CurvesEditor>;
+export default CurvesEditor;
+//# sourceMappingURL=CurvesEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurvesEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/CurvesEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAa9E,UAAU,KAAK;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,oGAAoG;IACpG,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAsEH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/image-editor/Histogram.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { ImageHistogram } from '@pixerate/editor/image-editor';
+  import { histogramPath } from '@pixerate/editor/image-editor';
+
+  interface Props {
+    histogram: ImageHistogram | null;
+    /** `rgb` overlays the three channels on the luminance; a single channel draws just that one. */
+    channel?: 'rgb' | 'luminance' | 'red' | 'green' | 'blue';
+    height?: number;
+    class?: string;
+  }
+
+  let { histogram, channel = 'rgb', height = 64, class: className = '' }: Props = $props();
+
+  const W = 256;
+  const FILL: Record<'luminance' | 'red' | 'green' | 'blue', string> = {
+    luminance: 'rgba(148, 163, 184, 0.45)',
+    red: 'rgba(239, 68, 68, 0.45)',
+    green: 'rgba(34, 197, 94, 0.45)',
+    blue: 'rgba(59, 130, 246, 0.45)',
+  };
+
+  const channels = $derived(channel === 'rgb' ? (['luminance', 'red', 'green', 'blue'] as const) : ([channel] as const));
+  const paths = $derived(
+    histogram && histogram.samples > 0 ? channels.map((c) => ({ c, d: histogramPath(histogram, c, W, height) })) : []
+  );
+  const clipLow = $derived(histogram && histogram.samples ? Math.max(...histogram.shadows) / histogram.samples : 0);
+  const clipHigh = $derived(histogram && histogram.samples ? Math.max(...histogram.highlights) / histogram.samples : 0);
+</script>
+
+<svg
+  viewBox="0 0 {W} {height}"
+  preserveAspectRatio="none"
+  role="img"
+  aria-label={histogram ? `Histogram of ${histogram.samples} pixels` : 'Histogram (no data)'}
+  data-testid="image-editor-histogram"
+  class="w-full rounded bg-slate-950/60 {className}"
+  style="height: {height}px"
+>
+  {#each paths as p (p.c)}
+    <path d={p.d} fill={FILL[p.c]} stroke="none" />
+  {/each}
+  {#if clipLow > 0.005}
+    <rect x="0" y="0" width="3" {height} fill="#3b82f6" data-testid="histogram-clip-shadows" />
+  {/if}
+  {#if clipHigh > 0.005}
+    <rect x={W - 3} y="0" width="3" {height} fill="#ef4444" data-testid="histogram-clip-highlights" />
+  {/if}
+</svg>

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

@@ -0,0 +1,12 @@
+import type { ImageHistogram } from '@pixerate/editor/image-editor';
+interface Props {
+    histogram: ImageHistogram | null;
+    /** `rgb` overlays the three channels on the luminance; a single channel draws just that one. */
+    channel?: 'rgb' | 'luminance' | 'red' | 'green' | 'blue';
+    height?: number;
+    class?: string;
+}
+declare const Histogram: import("svelte").Component<Props, {}, "">;
+type Histogram = ReturnType<typeof Histogram>;
+export default Histogram;
+//# sourceMappingURL=Histogram.svelte.d.ts.map

package/dist/image-editor/Histogram.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Histogram.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/Histogram.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAIlE,UAAU,KAAK;IACb,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,gGAAgG;IAChG,OAAO,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}