@pixerate/editor-svelte 0.23.0 → 0.25.0

package/dist/generation/GenerationHistory.svelte

@@ -0,0 +1,161 @@
+<script lang="ts" module>
+  let nextId = 0;
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import {
+    DRIFT_TYPE_LABELS,
+    recreateRequest,
+    referenceRoleLabel,
+    variationRequest,
+    type AssetLookup,
+    type GenerationRecord,
+    type ModelCapabilities,
+    type RecreateMode,
+    type RecreateOptions,
+    type RecreateResult
+  } from '@pixerate/editor/generation';
+  // Not `@pixerate/editor/grammar`: svelte-package keeps type imports in
+  // `.svelte` output, which would pull another core entry into this one.
+  type Template = NonNullable<RecreateOptions['templates']>[number];
+
+  interface Props {
+    records: readonly GenerationRecord[];
+    /** Current templates (drift detection, and resolution in `latest` mode). */
+    templates?: readonly Template[];
+    /** Current models (capability drift and re-planning). */
+    capabilities?: ModelCapabilities | readonly ModelCapabilities[];
+    /** Current assets (missing / changed asset drift). */
+    assets?: AssetLookup;
+    /** Recreate mode (bindable); starts at `exact`. */
+    mode?: RecreateMode;
+    onmodechange?: (mode: RecreateMode) => void;
+    /** "Recreate": receives the rebuilt request and drift report. */
+    onrecreate?: (result: RecreateResult, record: GenerationRecord) => void;
+    /** "Variation": same request with a new seed. */
+    onvariation?: (result: RecreateResult, record: GenerationRecord) => void;
+    onremove?: (record: GenerationRecord) => void;
+    /** Extra content per record (e.g. output thumbnails). */
+    preview?: Snippet<[GenerationRecord]>;
+    emptyText?: string;
+    class?: string;
+  }
+
+  let {
+    records,
+    templates,
+    capabilities,
+    assets,
+    mode = $bindable('exact'),
+    onmodechange,
+    onrecreate,
+    onvariation,
+    onremove,
+    preview,
+    emptyText = 'No generations yet.',
+    class: className = ''
+  }: Props = $props();
+
+  const groupName = `generation-history-mode-${++nextId}`;
+  const options = $derived({ templates, capabilities, assets, mode });
+  const results = $derived(records.map((record) => recreateRequest(record, options)));
+  const models = $derived(
+    capabilities ? (Array.isArray(capabilities) ? capabilities : [capabilities as ModelCapabilities]) : []
+  );
+  const severityClass = {
+    info: 'text-sky-600 dark:text-sky-300',
+    warning: 'text-amber-600 dark:text-amber-300',
+    error: 'text-red-600 dark:text-red-400'
+  } as const;
+
+  const setMode = (next: RecreateMode) => {
+    mode = next;
+    onmodechange?.(next);
+  };
+</script>
+
+<!-- Generation history with drift reports and Recreate / Variation actions. -->
+<div class="flex flex-col gap-2 text-sm {className}" data-generation-history="">
+  <div class="flex items-center gap-2 text-xs" role="radiogroup" aria-label="Recreate mode">
+    {#each ['exact', 'latest'] as const as value (value)}
+      <label class="inline-flex items-center gap-1">
+        <input
+          type="radio"
+          name={groupName}
+          {value}
+          checked={mode === value}
+          onchange={() => setMode(value)}
+          data-mode={value}
+        />
+        {value === 'exact' ? 'Exact (recorded versions)' : 'Latest templates & settings'}
+      </label>
+    {/each}
+  </div>
+  {#if records.length === 0}<p class="text-xs text-muted-foreground">{emptyText}</p>{/if}
+  <ul class="flex flex-col gap-2">
+    {#each records as record, i (record.id)}
+      {@const result = results[i]}
+      {@const model = models.find((m) => m.id === record.provenance.modelId)}
+      <li class="rounded-md border border-border p-2" data-record={record.id} data-drift={result.drift.length}>
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs">
+          <span class="font-medium">{model?.name ?? record.provenance.modelId}</span>
+          <span class="text-muted-foreground">
+            {#if record.kind !== 'generate'}<span data-kind="">{record.kind} · </span>{/if}<time datetime={record.createdAt}
+              >{record.createdAt.replace('T', ' ').slice(0, 16)}</time
+            >{#if record.seed !== undefined}&nbsp;· seed {record.seed}{/if}
+          </span>
+        </div>
+        <p class="mt-1 line-clamp-3 break-words text-xs" data-record-prompt="">{record.provenance.resolvedPrompt}</p>
+        {#if record.assets.length > 0}
+          <div class="mt-1 flex flex-wrap gap-1">
+            {#each record.assets as item (`${item.role}:${item.id}`)}
+              <span class="rounded-full bg-muted px-2 py-0.5 text-[10px]" data-asset-role={item.role}
+                >{item.id} · {referenceRoleLabel(item.role, model)}</span
+              >
+            {/each}
+          </div>
+        {/if}
+        {#if preview}{@render preview(record)}{/if}
+        {#if result.drift.length > 0}
+          <ul class="mt-1 flex flex-col gap-0.5 text-[11px]" data-drift-report="">
+            {#each result.drift as item, j (j)}
+              <li class={severityClass[item.severity]} data-drift-type={item.type}>
+                <strong>{DRIFT_TYPE_LABELS[item.type]}:</strong>
+                {item.message}
+              </li>
+            {/each}
+          </ul>
+        {/if}
+        <div class="mt-2 flex gap-2">
+          {#if onrecreate}
+            <button
+              type="button"
+              disabled={!result.ok}
+              title={!result.ok ? 'This generation cannot be recreated as recorded.' : undefined}
+              onclick={() => onrecreate(result, record)}
+              class="rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50"
+              data-action="recreate">Recreate</button
+            >
+          {/if}
+          {#if onvariation}
+            <button
+              type="button"
+              onclick={() => onvariation(variationRequest(record, {}, options), record)}
+              class="rounded border border-border px-2 py-0.5 text-xs hover:bg-muted"
+              data-action="variation">Variation</button
+            >
+          {/if}
+          {#if onremove}
+            <button
+              type="button"
+              onclick={() => onremove(record)}
+              class="ml-auto rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted"
+              data-action="remove">Remove</button
+            >
+          {/if}
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import { type AssetLookup, type GenerationRecord, type ModelCapabilities, type RecreateMode, type RecreateOptions, type RecreateResult } from '@pixerate/editor/generation';
+type Template = NonNullable<RecreateOptions['templates']>[number];
+interface Props {
+    records: readonly GenerationRecord[];
+    /** Current templates (drift detection, and resolution in `latest` mode). */
+    templates?: readonly Template[];
+    /** Current models (capability drift and re-planning). */
+    capabilities?: ModelCapabilities | readonly ModelCapabilities[];
+    /** Current assets (missing / changed asset drift). */
+    assets?: AssetLookup;
+    /** Recreate mode (bindable); starts at `exact`. */
+    mode?: RecreateMode;
+    onmodechange?: (mode: RecreateMode) => void;
+    /** "Recreate": receives the rebuilt request and drift report. */
+    onrecreate?: (result: RecreateResult, record: GenerationRecord) => void;
+    /** "Variation": same request with a new seed. */
+    onvariation?: (result: RecreateResult, record: GenerationRecord) => void;
+    onremove?: (record: GenerationRecord) => void;
+    /** Extra content per record (e.g. output thumbnails). */
+    preview?: Snippet<[GenerationRecord]>;
+    emptyText?: string;
+    class?: string;
+}
+declare const GenerationHistory: import("svelte").Component<Props, {}, "mode">;
+type GenerationHistory = ReturnType<typeof GenerationHistory>;
+export default GenerationHistory;
+//# sourceMappingURL=GenerationHistory.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GenerationHistory.svelte.d.ts","sourceRoot":"","sources":["../../src/generation/GenerationHistory.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAKH,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,6BAA6B,CAAC;AAIrC,KAAK,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACrC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,SAAS,QAAQ,EAAE,CAAC;IAChC,yDAAyD;IACzD,YAAY,CAAC,EAAE,iBAAiB,GAAG,SAAS,iBAAiB,EAAE,CAAC;IAChE,sDAAsD;IACtD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,iEAAiE;IACjE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxE,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqGH,QAAA,MAAM,iBAAiB,+CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/generation/index.d.ts

@@ -1,10 +1,17 @@
 import type { ComponentProps } from "svelte";
 import type GenerationSettingsComponent from "./GenerationSettings.svelte";
 import type JobProgressComponent from "./JobProgress.svelte";
+import type AssetMentionChipsComponent from "./AssetMentionChips.svelte";
+import type GenerationHistoryComponent from "./GenerationHistory.svelte";
 export { default as GenerationSettings } from "./GenerationSettings.svelte";
 export { default as JobProgress } from "./JobProgress.svelte";
+export { default as AssetMentionChips } from "./AssetMentionChips.svelte";
+export { default as GenerationHistory } from "./GenerationHistory.svelte";
 export * from "./plan.svelte.js";
 export * from "./progress.svelte.js";
+export * from "./records.svelte.js";
 export type GenerationSettingsProps = ComponentProps<typeof GenerationSettingsComponent>;
 export type JobProgressProps = ComponentProps<typeof JobProgressComponent>;
+export type AssetMentionChipsProps = ComponentProps<typeof AssetMentionChipsComponent>;
+export type GenerationHistoryProps = ComponentProps<typeof GenerationHistoryComponent>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/generation/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,2BAA2B,MAAM,6BAA6B,CAAC;AAC3E,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AAErC,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,2BAA2B,CAAC,CAAC;AACzF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/generation/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,2BAA2B,MAAM,6BAA6B,CAAC;AAC3E,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AAEzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AAEpC,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,2BAA2B,CAAC,CAAC;AACzF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC"}

package/dist/generation/index.js

@@ -1,4 +1,7 @@
 export { default as GenerationSettings } from "./GenerationSettings.svelte";
 export { default as JobProgress } from "./JobProgress.svelte";
+export { default as AssetMentionChips } from "./AssetMentionChips.svelte";
+export { default as GenerationHistory } from "./GenerationHistory.svelte";
 export * from "./plan.svelte.js";
 export * from "./progress.svelte.js";
+export * from "./records.svelte.js";

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

@@ -0,0 +1,18 @@
+import type { GenerationRecord, GenerationRecordFilter, GenerationRecordStore } from "@pixerate/editor/generation";
+export interface SvelteGenerationRecords {
+    readonly records: GenerationRecord[];
+    readonly loading: boolean;
+    readonly error: unknown;
+    refresh(): Promise<void>;
+    /** Stops following the store. */
+    destroy(): void;
+}
+/**
+ * Reactive records of a `GenerationRecordStore` (Svelte 5 runes), newest
+ * first, reloaded whenever the store changes. Pass a getter for a reactive
+ * filter: `createGenerationRecords(store, () => ({ model }))`. Call
+ * `destroy()` (or create it inside a component, where it is cleaned up with
+ * the component's effects) to stop listening.
+ */
+export declare function createGenerationRecords(store: GenerationRecordStore, filter?: () => GenerationRecordFilter | undefined): SvelteGenerationRecords;
+//# sourceMappingURL=records.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"records.svelte.d.ts","sourceRoot":"","sources":["../../src/generation/records.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IACrC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,iCAAiC;IACjC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,qBAAqB,EAC5B,MAAM,GAAE,MAAM,sBAAsB,GAAG,SAA2B,GACjE,uBAAuB,CAuDzB"}

package/dist/generation/records.svelte.js

@@ -0,0 +1,66 @@
+/**
+ * Reactive records of a `GenerationRecordStore` (Svelte 5 runes), newest
+ * first, reloaded whenever the store changes. Pass a getter for a reactive
+ * filter: `createGenerationRecords(store, () => ({ model }))`. Call
+ * `destroy()` (or create it inside a component, where it is cleaned up with
+ * the component's effects) to stop listening.
+ */
+export function createGenerationRecords(store, filter = () => undefined) {
+    let records = $state([]);
+    let loading = $state(true);
+    let error = $state(null);
+    let currentFilter = undefined;
+    let generation = 0;
+    const refresh = async () => {
+        const ticket = ++generation;
+        loading = true;
+        try {
+            const next = await store.list(currentFilter);
+            if (ticket !== generation)
+                return;
+            records = next;
+            error = null;
+        }
+        catch (err) {
+            if (ticket === generation)
+                error = err;
+        }
+        finally {
+            if (ticket === generation)
+                loading = false;
+        }
+    };
+    const unsubscribe = store.subscribe(() => void refresh());
+    let stopEffect = null;
+    if ($effect.tracking()) {
+        $effect(() => {
+            currentFilter = filter();
+            void refresh();
+        });
+        $effect(() => unsubscribe);
+    }
+    else {
+        stopEffect = $effect.root(() => {
+            $effect(() => {
+                currentFilter = filter();
+                void refresh();
+            });
+        });
+    }
+    return {
+        get records() {
+            return records;
+        },
+        get loading() {
+            return loading;
+        },
+        get error() {
+            return error;
+        },
+        refresh,
+        destroy() {
+            unsubscribe();
+            stopEffect?.();
+        },
+    };
+}

package/dist/image-editor/ImageEditor.svelte

@@ -20,10 +20,15 @@
     LATEST_PROCESS_VERSION,
     IMAGE_ADJUSTMENT_CONTROLS,
     readAdjustmentControls,
+    DEFAULT_SELECTION_TOOL_OPTIONS,
+    SelectionGesture,
+    type SelectionToolOptions,
   } from '@pixerate/editor/image-editor';
   import ControlSlider from './ControlSlider.svelte';
   import Histogram from './Histogram.svelte';
   import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
+  import SelectionOptionsBar from './SelectionOptionsBar.svelte';
+  import RefineEdgePanel from './RefineEdgePanel.svelte';
   import { onDestroy, untrack } from 'svelte';
   import { createReactiveImageEditor, type ReactiveImageEditor } from './imageEditorState.svelte.js';
 
@@ -60,7 +65,13 @@
 
   let canvasEl = $state<HTMLCanvasElement | null>(null);
   let containerEl = $state<HTMLDivElement | null>(null);
-  let activeTab = $state<'crop' | 'adjust' | 'annotate' | 'depth' | 'ai'>('crop');
+  let activeTab = $state<'crop' | 'adjust' | 'select' | 'annotate' | 'depth' | 'ai'>('crop');
+
+  // Selection tools (magic wand, marquees, lasso): options bar state and the pointer gesture.
+  let selectionOptions = $state<SelectionToolOptions>({ ...DEFAULT_SELECTION_TOOL_OPTIONS });
+  const selectionGesture = $derived(new SelectionGesture(editor.controller, () => selectionOptions));
+  let selectionDraft = $state.raw<ImagePoint[] | null>(null);
+  let selectionError = $state<string | null>(null);
   let activeCropRatio = $state<number | null>(null);
 
   // AI state
@@ -187,6 +198,7 @@
       interactive: true,
       draftAnnotation: overrideAnnotation !== undefined ? overrideAnnotation : draftAnnotation,
       draftCrop: overrideCrop !== undefined ? overrideCrop : draftCrop,
+      draftSelectionPath: selectionDraft,
     });
   }
 
@@ -244,6 +256,13 @@
     if (!canvasEl) return;
     const canvasPt = getCanvasEventPoint(e);
 
+    if (activeTab === 'select') {
+      const gesture = selectionGesture;
+      const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
+      void gesture.begin(imgPt, e).then(() => (selectionError = gesture.error));
+      return;
+    }
+
     if (activeTab === 'crop') {
       const activeCrop = draftCrop || editor.state.crop || {
         x: 0,
@@ -316,6 +335,15 @@
     if (!canvasEl) return;
     const canvasPt = getCanvasEventPoint(e);
 
+    if (activeTab === 'select') {
+      const gesture = selectionGesture;
+      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false))) {
+        selectionDraft = gesture.draftPath;
+        renderCanvas();
+      }
+      return;
+    }
+
     if (activeTab === 'crop') {
       if (cropDragInfo) {
         const currentImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, true);
@@ -468,6 +496,16 @@
     if (!canvasEl) return;
     const canvasPt = getCanvasEventPoint(e);
 
+    if (activeTab === 'select') {
+      const gesture = selectionGesture;
+      if (gesture.active) {
+        gesture.end(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false), e);
+        selectionDraft = null;
+        renderCanvas();
+      }
+      return;
+    }
+
     if (activeTab === 'crop') {
       if (cropDragInfo) {
         if (draftCrop && draftCrop.width >= 20 && draftCrop.height >= 20) {
@@ -621,6 +659,18 @@
       >
         Adjustments
       </button>
+      <button
+        type="button"
+        onclick={() => {
+          activeTab = 'select';
+          editor.setTool('select');
+        }}
+        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'select'
+          ? 'bg-indigo-600 text-white shadow'
+          : 'text-slate-400 hover:text-slate-200'}"
+      >
+        Select & Mask
+      </button>
       <button
         type="button"
         onclick={() => {
@@ -1153,6 +1203,27 @@
         </div>
       {/if}
 
+      <!-- SELECT & MASK: selection tools, refine edge, layer masks -->
+      {#if activeTab === 'select'}
+        <div class="flex flex-col gap-4 text-xs">
+          <SelectionOptionsBar
+            controller={editor.controller}
+            options={selectionOptions}
+            onOptionsChange={(next) => (selectionOptions = next)}
+            selection={editor.state.selection ?? null}
+            quickMask={Boolean(editor.state.quickMask)}
+          />
+          {#if selectionError}
+            <p role="alert" class="text-rose-400">{selectionError}</p>
+          {/if}
+          <RefineEdgePanel
+            controller={editor.controller}
+            selection={editor.state.selection ?? null}
+            layers={editor.state.adjustments.layers}
+          />
+        </div>
+      {/if}
+
       <!-- TAB 5: AI TOOLS / INPAINTING & BACKGROUND REMOVAL -->
       {#if activeTab === 'ai'}
         <div class="flex flex-col gap-4 text-xs">

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

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AAgBzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAw/BH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AAqBzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AA8iCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/RefineEdgePanel.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type {
+    AdjustmentKind,
+    AdjustmentLayer,
+    ImageEditorController,
+    RefineEdgeParams,
+    SelectionMask,
+  } from '@pixerate/editor/image-editor';
+  import {
+    ADJUSTMENT_KINDS,
+    REFINE_EDGE_CONTROLS,
+    adjustmentKindLabel,
+    layerMaskFromSelection,
+  } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The adjustment layers (`state.adjustments.layers`). Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    class?: string;
+  }
+
+  let { controller, selection, layers: layersProp, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const sel = $derived.by(() => {
+    void tick;
+    return selection === undefined ? controller.getSelection() : selection;
+  });
+  const list = $derived.by(() => {
+    void tick;
+    return layersProp ?? controller.getAdjustmentLayers();
+  });
+
+  const DEFAULT_PARAMS: Required<RefineEdgeParams> = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
+  let params = $state<Required<RefineEdgeParams>>({ ...DEFAULT_PARAMS });
+  let busy = $state(false);
+  let error = $state<string | null>(null);
+  let layerId = $state('');
+  let newKind = $state<AdjustmentKind>('hueSaturation');
+  const target = $derived(list.find((l) => l.id === layerId) ?? list[list.length - 1]);
+
+  async function refine() {
+    busy = true;
+    error = null;
+    try {
+      await controller.refineSelection({ ...params });
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    } finally {
+      busy = false;
+    }
+  }
+
+  function newMaskedLayer() {
+    const s = controller.getSelection();
+    if (s) layerId = controller.addAdjustmentLayer({ kind: newKind, mask: layerMaskFromSelection(s) });
+  }
+
+  const button =
+    'px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40';
+</script>
+
+<div data-testid="refine-edge-panel" class="flex flex-col gap-3 text-xs {className}">
+  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Refine Edge</span>
+  {#each REFINE_EDGE_CONTROLS as c (c.id)}
+    <label class="flex flex-col gap-1">
+      <span class="flex justify-between text-slate-400">
+        <span>{c.label}</span>
+        <span class="font-mono">{params[c.id]}{c.unit}</span>
+      </span>
+      <input
+        type="range"
+        min={c.min}
+        max={c.max}
+        step={c.step}
+        aria-label={c.label}
+        value={params[c.id]}
+        oninput={(e) => (params = { ...params, [c.id]: Number((e.currentTarget as HTMLInputElement).value) })}
+        class="w-full accent-indigo-500"
+      />
+    </label>
+  {/each}
+  <label class="flex items-center gap-2 text-slate-300">
+    <input
+      type="checkbox"
+      checked={params.smartRadius}
+      onchange={(e) => (params = { ...params, smartRadius: (e.currentTarget as HTMLInputElement).checked })}
+    />
+    Smart Radius
+  </label>
+  <div class="flex gap-1">
+    <button type="button" class={button} disabled={!sel || busy} onclick={refine}>Refine Edge</button>
+    <button type="button" class={button} onclick={() => (params = { ...DEFAULT_PARAMS })}>Reset</button>
+  </div>
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+
+  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2">Layer Mask</span>
+  <div class="flex gap-1 items-center">
+    <select
+      aria-label="New masked layer kind"
+      value={newKind}
+      onchange={(e) => (newKind = (e.currentTarget as HTMLSelectElement).value as AdjustmentKind)}
+      class="flex-1 bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+    >
+      {#each ADJUSTMENT_KINDS as k (k.kind)}
+        <option value={k.kind}>{k.label}</option>
+      {/each}
+    </select>
+    <button type="button" class={button} disabled={!sel} onclick={newMaskedLayer}>New Masked Layer</button>
+  </div>
+  {#if list.length > 0 && target}
+    <div class="flex flex-col gap-2">
+      <select
+        aria-label="Mask layer"
+        value={target.id}
+        onchange={(e) => (layerId = (e.currentTarget as HTMLSelectElement).value)}
+        class="bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+      >
+        {#each list as l (l.id)}
+          <option value={l.id}>{l.name || adjustmentKindLabel(l.kind)}{l.mask ? ' (masked)' : ''}</option>
+        {/each}
+      </select>
+      <div class="flex flex-wrap gap-1">
+        <button type="button" class={button} disabled={!sel} onclick={() => controller.applySelectionAsLayerMask(target.id)}>
+          Mask with Selection
+        </button>
+        <button type="button" class={button} disabled={!target.mask} onclick={() => controller.selectionFromLayerMask(target.id)}>
+          Load as Selection
+        </button>
+        <button type="button" class={button} disabled={!target.mask} onclick={() => controller.setAdjustmentLayerMask(target.id, null)}>
+          Remove Mask
+        </button>
+      </div>
+      {#if target.mask}
+        <label class="flex flex-col gap-1">
+          <span class="flex justify-between text-slate-400">
+            <span>Density</span>
+            <span class="font-mono">{Math.round((target.mask.density ?? 1) * 100)}%</span>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            step="1"
+            aria-label="Mask density"
+            value={Math.round((target.mask.density ?? 1) * 100)}
+            oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { density: Number((e.currentTarget as HTMLInputElement).value) / 100 })}
+            class="w-full accent-indigo-500"
+          />
+        </label>
+        <label class="flex flex-col gap-1">
+          <span class="flex justify-between text-slate-400">
+            <span>Mask Feather</span>
+            <span class="font-mono">{target.mask.feather ?? 0}px</span>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="50"
+            step="0.5"
+            aria-label="Mask feather"
+            value={target.mask.feather ?? 0}
+            oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { feather: Number((e.currentTarget as HTMLInputElement).value) })}
+            class="w-full accent-indigo-500"
+          />
+        </label>
+      {/if}
+    </div>
+  {/if}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RefineEdgePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/RefineEdgePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAER,eAAe,EACf,qBAAqB,EAErB,aAAa,EACd,MAAM,+BAA+B,CAAC;AAUvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,yFAAyF;IACzF,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4HH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}