@pixerate/editor-svelte 0.21.0 → 0.23.0

package/dist/generation/plan.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan.svelte.d.ts","sourceRoot":"","sources":["../../src/generation/plan.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;IACpC,QAAQ,CAAC,WAAW,EAAE,cAAc,EAAE,CAAC;IACvC,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,iBAAiB,EAChC,YAAY,EAAE,MAAM,iBAAiB,EACrC,OAAO,GAAE,MAAM,WAAwB,GACtC,oBAAoB,CAmBtB"}

package/dist/generation/plan.svelte.js

@@ -0,0 +1,26 @@
+import { planGenerationRequest, } from "@pixerate/editor/generation";
+/**
+ * Reactive `planGenerationRequest` (Svelte 5 runes). Pass getters so the plan
+ * follows `$state` request/capabilities/options:
+ * `createGenerationPlan(() => request, () => caps, () => ({ strategy }))`.
+ */
+export function createGenerationPlan(request, capabilities, options = () => ({})) {
+    const plan = $derived(planGenerationRequest(request(), capabilities(), options()));
+    return {
+        get plan() {
+            return plan;
+        },
+        get ok() {
+            return plan.ok;
+        },
+        get request() {
+            return plan.request;
+        },
+        get adjustments() {
+            return plan.adjustments;
+        },
+        get errors() {
+            return plan.errors;
+        },
+    };
+}

package/dist/generation/progress.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type JobProgressEstimate } from "@pixerate/editor/generation";
+export interface JobProgressOptions {
+    startedAt: number | Date | string;
+    expectedMs?: number;
+    done?: boolean;
+    /** Fixed current time (disables ticking; useful for SSR and tests). */
+    now?: number | Date | string;
+    /** Update interval while running in ms (default 1000). */
+    intervalMs?: number;
+}
+export interface SvelteJobProgress {
+    readonly progress: JobProgressEstimate;
+    readonly percent: number;
+    readonly label: string;
+    /** Stops ticking. */
+    destroy(): void;
+}
+/**
+ * Ticking `estimateJobProgress` (Svelte 5 runes). Pass a getter so it follows
+ * `$state` options; it ticks every `intervalMs` while not `done` and no fixed
+ * `now` is given (browser only; nothing ticks during SSR). Call `destroy()`
+ * when done (e.g. in `onDestroy`).
+ */
+export declare function createJobProgress(options: () => JobProgressOptions): SvelteJobProgress;
+//# sourceMappingURL=progress.svelte.d.ts.map

package/dist/generation/progress.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.svelte.d.ts","sourceRoot":"","sources":["../../src/generation/progress.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAE5F,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,kBAAkB,GAAG,iBAAiB,CA2BtF"}

package/dist/generation/progress.svelte.js

@@ -0,0 +1,36 @@
+import { estimateJobProgress } from "@pixerate/editor/generation";
+/**
+ * Ticking `estimateJobProgress` (Svelte 5 runes). Pass a getter so it follows
+ * `$state` options; it ticks every `intervalMs` while not `done` and no fixed
+ * `now` is given (browser only; nothing ticks during SSR). Call `destroy()`
+ * when done (e.g. in `onDestroy`).
+ */
+export function createJobProgress(options) {
+    let tick = $state(Date.now());
+    const timer = typeof window !== "undefined"
+        ? setInterval(() => {
+            const current = options();
+            if (!current.done && current.now === undefined)
+                tick = Date.now();
+        }, Math.max(16, options().intervalMs ?? 1000))
+        : null;
+    const progress = $derived.by(() => {
+        const { startedAt, expectedMs, done, now } = options();
+        return estimateJobProgress({ startedAt, expectedMs, done, now: now ?? tick });
+    });
+    return {
+        get progress() {
+            return progress;
+        },
+        get percent() {
+            return progress.percent;
+        },
+        get label() {
+            return progress.label;
+        },
+        destroy() {
+            if (timer !== null)
+                clearInterval(timer);
+        },
+    };
+}

package/dist/history/createHistoryShortcuts.d.ts

@@ -1,4 +1,4 @@
-import { HistoryManager } from "@pixerate/editor/history";
+import type { HistoryManager } from "@pixerate/editor/history";
 export interface HistoryShortcutsOptions {
     /**
      * Whether keyboard shortcuts are enabled. Defaults to true.

package/dist/history/createHistoryShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createHistoryShortcuts.d.ts","sourceRoot":"","sources":["../../src/history/createHistoryShortcuts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IACrC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,cAAc,EACvB,OAAO,GAAE,uBAA4B,GACpC;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAqEzB"}
+{"version":3,"file":"createHistoryShortcuts.d.ts","sourceRoot":"","sources":["../../src/history/createHistoryShortcuts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IACrC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,cAAc,EACvB,OAAO,GAAE,uBAA4B,GACpC;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAqCzB"}

package/dist/history/createHistoryShortcuts.js

@@ -1,3 +1,4 @@
+import { matchHistoryShortcut } from "@pixerate/editor/commands";
 /**
  * Attaches keyboard listeners for Undo (Mod+Z) and Redo (Mod+Shift+Z / Mod+Y).
  * Returns an object with a `destroy()` function for lifecycle cleanup.
@@ -13,39 +14,16 @@ export function createHistoryShortcuts(manager, options = {}) {
     }
     const handleKeyDown = (event) => {
         const e = event;
-        const isMac = typeof navigator !== "undefined" &&
-            /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-        const modifier = isMac ? e.metaKey : e.ctrlKey;
-        if (!modifier)
-            return;
-        if (ignoreEditableElements && typeof document !== "undefined") {
-            const targetEl = (e.target || document.activeElement);
-            if (targetEl && targetEl.tagName) {
-                const tagName = targetEl.tagName.toLowerCase();
-                const isInput = tagName === "input" || tagName === "textarea";
-                const isContentEditable = targetEl.isContentEditable ||
-                    targetEl.getAttribute?.("contenteditable") === "true";
-                if (isInput || isContentEditable) {
-                    return;
-                }
-            }
+        // Default bindings from the command system: Mod+Z, Mod+Shift+Z and (off macOS) Mod+Y,
+        // matched by `event.code` with `Mod` = ⌘ on macOS and Ctrl elsewhere.
+        const action = matchHistoryShortcut(e, { allowInEditable: !ignoreEditableElements });
+        if (action === "undo" && manager.getState().canUndo) {
+            e.preventDefault();
+            manager.undo();
         }
-        const key = e.key?.toLowerCase();
-        // Undo: Mod+Z (without Shift)
-        if (key === "z" && !e.shiftKey) {
-            if (manager.getState().canUndo) {
-                e.preventDefault();
-                manager.undo();
-            }
-            return;
-        }
-        // Redo: Mod+Shift+Z or (on non-Mac) Mod+Y
-        const isRedoKey = (key === "z" && e.shiftKey) || (!isMac && key === "y" && !e.shiftKey);
-        if (isRedoKey) {
-            if (manager.getState().canRedo) {
-                e.preventDefault();
-                manager.redo();
-            }
+        else if (action === "redo" && manager.getState().canRedo) {
+            e.preventDefault();
+            manager.redo();
         }
     };
     eventTarget.addEventListener("keydown", handleKeyDown);

package/dist/history/history.svelte.d.ts

@@ -1,14 +1,23 @@
-import { HistoryManager, HistoryState, Command, HistoryManagerOptions } from "@pixerate/editor/history";
+import { HistoryManager, HistoryState, HistoryEntry, HistoryMark, MergedExecutionOptions, Command, HistoryManagerOptions } from "@pixerate/editor/history";
 export interface SvelteHistory extends HistoryState {
     readonly manager: HistoryManager;
+    /** History panel rows (undo steps, then redo steps). */
+    readonly entries: HistoryEntry[];
     undo(): boolean;
     redo(): boolean;
     clear(): void;
     execute(command: Command): void;
-    executeMerged(command: Command, options?: {
-        windowMs?: number;
-    }): void;
+    executeMerged(command: Command, options?: MergedExecutionOptions): void;
     batch(name: string, fn: () => void): void;
+    /** Undoes / redoes until the entry at `index` is current (`-1` = before all). */
+    goTo(index: number): number;
+    /** Captures the current point, e.g. when a drag starts. */
+    mark(): HistoryMark;
+    /** Takes back every step since `mark` without leaving redo (Escape-cancel). */
+    revertTo(mark: HistoryMark): number;
+    /** Joins every merged execute into one step until `endGesture`. */
+    beginGesture(key: string): void;
+    endGesture(): void;
     subscribe(run: (value: HistoryState) => void): () => void;
 }
 /**

package/dist/history/history.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"history.svelte.d.ts","sourceRoot":"","sources":["../../src/history/history.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,OAAO,EAEP,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,IAAI,IAAI,OAAO,CAAC;IAChB,IAAI,IAAI,OAAO,CAAC;IAChB,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC3D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,gBAAgB,CAAC,EAAE,cAAc,GAAG,qBAAqB,GACxD,aAAa,CA2Cf"}
+{"version":3,"file":"history.svelte.d.ts","sourceRoot":"","sources":["../../src/history/history.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,OAAO,EAEP,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,wDAAwD;IACxD,QAAQ,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC;IACjC,IAAI,IAAI,OAAO,CAAC;IAChB,IAAI,IAAI,OAAO,CAAC;IAChB,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACxE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;IAC1C,iFAAiF;IACjF,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,IAAI,IAAI,WAAW,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAAC;IACpC,mEAAmE;IACnE,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,IAAI,IAAI,CAAC;IACnB,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC3D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,gBAAgB,CAAC,EAAE,cAAc,GAAG,qBAAqB,GACxD,aAAa,CAqDf"}

package/dist/history/history.svelte.js

@@ -32,12 +32,22 @@ export function createHistory(managerOrOptions) {
         get manager() {
             return manager;
         },
+        get entries() {
+            // Reading `state` makes the getter reactive; getEntries() is cached per change.
+            void state;
+            return manager.getEntries();
+        },
         undo: () => manager.undo(),
         redo: () => manager.redo(),
         clear: () => manager.clear(),
         execute: (cmd) => manager.execute(cmd),
         executeMerged: (cmd, opts) => manager.executeMerged(cmd, opts),
         batch: (name, fn) => manager.batch(name, fn),
+        goTo: (index) => manager.goTo(index),
+        mark: () => manager.mark(),
+        revertTo: (m) => manager.revertTo(m),
+        beginGesture: (key) => manager.beginGesture(key),
+        endGesture: () => manager.endGesture(),
         subscribe: (run) => manager.subscribe(run),
     };
 }

package/dist/history/historyDirty.svelte.d.ts

@@ -0,0 +1,31 @@
+import { DirtyTracker, type DirtyTrackerOptions, type HistoryManager } from "@pixerate/editor/history";
+export interface CreateHistoryDirtyOptions<T> extends DirtyTrackerOptions<T> {
+    /** The history whose changes re-check the document (a `createHistory().manager`). */
+    history: HistoryManager;
+    /** Reads the current document value. */
+    getValue: () => T;
+    /** Existing tracker to drive. */
+    tracker?: DirtyTracker<T>;
+}
+export interface SvelteHistoryDirty<T> {
+    /** Whether the document differs from the saved state (reactive). */
+    readonly isDirty: boolean;
+    /** Marks the current document as saved. */
+    markClean(): void;
+    /** Runs a load / restore without marking the document dirty (re-entrant). */
+    suppress<R>(fn: () => R): R;
+    /** Re-checks after a change made outside the history. */
+    refresh(): boolean;
+    readonly tracker: DirtyTracker<T>;
+    /** Stops following the history. */
+    destroy(): void;
+}
+/**
+ * Svelte 5 rune: dirty-vs-saved tracking bound to a HistoryManager. Undoing
+ * back to the saved state makes the document clean again, so a navigation
+ * guard fed with `isDirty` stops prompting.
+ *
+ * Usage: `createNavigationGuard({ isDirty: () => dirty.isDirty })`.
+ */
+export declare function createHistoryDirty<T>(options: CreateHistoryDirtyOptions<T>): SvelteHistoryDirty<T>;
+//# sourceMappingURL=historyDirty.svelte.d.ts.map

package/dist/history/historyDirty.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"historyDirty.svelte.d.ts","sourceRoot":"","sources":["../../src/history/historyDirty.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,yBAAyB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC1E,qFAAqF;IACrF,OAAO,EAAE,cAAc,CAAC;IACxB,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,oEAAoE;IACpE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,IAAI,IAAI,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5B,yDAAyD;IACzD,OAAO,IAAI,OAAO,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAClC,mCAAmC;IACnC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACpC,kBAAkB,CAAC,CAAC,CAAC,CAsBvB"}

package/dist/history/historyDirty.svelte.js

@@ -0,0 +1,30 @@
+import { bindDirtyToHistory, } from "@pixerate/editor/history";
+/**
+ * Svelte 5 rune: dirty-vs-saved tracking bound to a HistoryManager. Undoing
+ * back to the saved state makes the document clean again, so a navigation
+ * guard fed with `isDirty` stops prompting.
+ *
+ * Usage: `createNavigationGuard({ isDirty: () => dirty.isDirty })`.
+ */
+export function createHistoryDirty(options) {
+    const binding = bindDirtyToHistory(options);
+    let isDirty = $state(binding.dirty);
+    const unsubscribe = binding.subscribe((dirty) => {
+        isDirty = dirty;
+    });
+    return {
+        get isDirty() {
+            return isDirty;
+        },
+        markClean: () => binding.markClean(),
+        suppress: (fn) => binding.suppress(fn),
+        refresh: () => binding.refresh(),
+        get tracker() {
+            return binding.tracker;
+        },
+        destroy() {
+            unsubscribe();
+            binding.destroy();
+        },
+    };
+}

package/dist/history/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./history.svelte.js";
 export * from "./createHistoryShortcuts.js";
+export * from "./historyDirty.svelte.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/history/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/history/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC"}

package/dist/history/index.js

@@ -1,2 +1,3 @@
 export * from "./history.svelte.js";
 export * from "./createHistoryShortcuts.js";
+export * from "./historyDirty.svelte.js";

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"}