@pixerate/editor-svelte 0.23.0 → 0.24.0

package/dist/fileImport.svelte.js

@@ -1,4 +1,4 @@
-import { FileImportController, } from "@pixerate/editor";
+import { FileImportController, summarizeImportStructure, } from "@pixerate/editor";
 /**
  * Imports markdown, HTML, plain-text and RTF files (or anything registered
  * with `registerImportAdapter` for the `document` target) into an editor,
@@ -14,6 +14,7 @@ export function createFileImport(getEditor, options = {}) {
         return editor && !editor.isDestroyed ? editor : null;
     }, options);
     let state = $state(controller.getState());
+    let summary = $derived(summarizeImportStructure(state.lastOutcomes));
     controller.subscribe((next) => {
         state = next;
     });
@@ -27,6 +28,15 @@ export function createFileImport(getEditor, options = {}) {
         get lastOutcomes() {
             return state.lastOutcomes;
         },
+        /**
+         * Structures detected in the last import (headings, lists, tables,
+         * columns), or `null` when no adapter reported any (only structure-aware
+         * adapters such as PDF do). Turn PDF detection off with
+         * `setOptions({ adapterOptions: { pdf: { structure: false } } })`.
+         */
+        get structureSummary() {
+            return summary;
+        },
         /** Value for `<input type="file" accept={…}>`. */
         get accept() {
             return controller.accept;

package/dist/generation/AssetMentionChips.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import {
+    defaultAssetRoleOptions,
+    describeAssetMentions,
+    findTextMentions,
+    getAssetRoleOptions,
+    setMentionRoleInText,
+    type AssetInfo,
+    type AssetMentionChip,
+    type AssetRoleOption,
+    type ModelCapabilities
+  } from '@pixerate/editor/generation';
+
+  interface Props {
+    /** Prompt text containing `@asset` / `@asset:role` mentions. */
+    content: string;
+    /** Called with the text after a role is picked (`@fox` → `@fox:style_ref`). */
+    onchange: (next: string) => void;
+    /** Mentionable assets; mentions that match none (by id or label) are not shown. */
+    assets: readonly AssetInfo[];
+    /** The selected model: its roles are offered and mentions are checked against it. */
+    capabilities?: ModelCapabilities;
+    /** Role options (default: the model's roles, else the built-in roles). */
+    roles?: readonly AssetRoleOption[];
+    /** Custom chip content (default: the asset label). */
+    asset?: Snippet<[AssetMentionChip]>;
+    class?: string;
+  }
+
+  let { content, onchange, assets, capabilities, roles, asset, class: className = '' }: Props = $props();
+
+  let open = $state<number | null>(null);
+  let rootEl = $state<HTMLDivElement | null>(null);
+  const chips = $derived(describeAssetMentions(findTextMentions(content), assets, capabilities));
+  const options = $derived(roles ?? (capabilities ? getAssetRoleOptions(capabilities) : defaultAssetRoleOptions()));
+
+  $effect(() => {
+    if (open === null) return;
+    const onPointer = (event: MouseEvent) => {
+      if (!rootEl?.contains(event.target as Node)) open = null;
+    };
+    document.addEventListener('mousedown', onPointer);
+    return () => document.removeEventListener('mousedown', onPointer);
+  });
+
+  const pick = (chip: AssetMentionChip, role: string | null) => {
+    open = null;
+    if (chip.start === undefined) return;
+    onchange(setMentionRoleInText(content, chip.start, role));
+  };
+  const problemOf = (chip: AssetMentionChip) =>
+    chip.issues.find((issue) => issue.severity === 'error') ?? chip.issues.find((issue) => issue.severity === 'warning');
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') open = null;
+  };
+</script>
+
+<!-- Asset mentions as chips with role badges and a role picker popover. -->
+{#if chips.length > 0}
+  <div bind:this={rootEl} class="flex flex-wrap gap-1.5 {className}" data-asset-mention-chips="">
+    {#each chips as chip (`${chip.start}-${chip.index}`)}
+      {@const problem = problemOf(chip)}
+      {@const isOpen = open === chip.index}
+      <span class="relative inline-flex" data-asset-chip={chip.asset.id}>
+        <button
+          type="button"
+          aria-haspopup="listbox"
+          aria-expanded={isOpen}
+          title={problem?.message}
+          data-issue={problem?.code}
+          onclick={() => (open = isOpen ? null : chip.index)}
+          onkeydown={onKey}
+          class="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs {problem?.severity === 'error'
+            ? 'border-red-500/60'
+            : problem
+              ? 'border-amber-500/60'
+              : 'border-border'} bg-muted/40 hover:bg-muted"
+        >
+          <span>{#if asset}{@render asset(chip)}{:else}@{chip.asset.label ?? chip.handle}{/if}</span>
+          <span
+            class="rounded px-1 text-[10px] uppercase tracking-wide {chip.role ? 'bg-primary/15' : 'opacity-60'}"
+            data-role-badge={chip.role ?? ''}>{chip.roleLabel ?? 'No role'}</span
+          >
+        </button>
+        {#if isOpen}
+          <div
+            role="listbox"
+            tabindex="-1"
+            aria-label="Role for {chip.asset.label ?? chip.handle}"
+            class="absolute left-0 top-full z-50 mt-1 flex min-w-[12rem] flex-col rounded-md border border-border bg-background p-1 text-xs shadow-lg"
+            data-role-picker=""
+            onkeydown={onKey}
+          >
+            {#each options as option (option.role)}
+              <button
+                type="button"
+                role="option"
+                aria-selected={chip.role === option.role}
+                data-role-option={option.role}
+                title={option.description}
+                onclick={() => pick(chip, option.role)}
+                class="flex items-center justify-between gap-2 rounded px-2 py-1 text-left hover:bg-muted"
+              >
+                <span>{option.label}</span>{#if option.accepts?.length}<span class="text-[10px] opacity-60"
+                    >{option.accepts.join(', ')}</span
+                  >{/if}
+              </button>
+            {/each}
+            <button
+              type="button"
+              role="option"
+              aria-selected={!chip.role}
+              data-role-option=""
+              onclick={() => pick(chip, null)}
+              class="rounded px-2 py-1 text-left opacity-70 hover:bg-muted">No role</button
+            >
+            {#if chip.issues.length > 0}
+              <ul class="mt-1 border-t border-border px-2 pt-1 text-[10px]" data-chip-issues="">
+                {#each chip.issues as issue, i (i)}
+                  <li class={issue.severity === 'error' ? 'text-red-500' : 'text-amber-500'}>{issue.message}</li>
+                {/each}
+              </ul>
+            {/if}
+          </div>
+        {/if}
+      </span>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import { type AssetInfo, type AssetMentionChip, type AssetRoleOption, type ModelCapabilities } from '@pixerate/editor/generation';
+interface Props {
+    /** Prompt text containing `@asset` / `@asset:role` mentions. */
+    content: string;
+    /** Called with the text after a role is picked (`@fox` → `@fox:style_ref`). */
+    onchange: (next: string) => void;
+    /** Mentionable assets; mentions that match none (by id or label) are not shown. */
+    assets: readonly AssetInfo[];
+    /** The selected model: its roles are offered and mentions are checked against it. */
+    capabilities?: ModelCapabilities;
+    /** Role options (default: the model's roles, else the built-in roles). */
+    roles?: readonly AssetRoleOption[];
+    /** Custom chip content (default: the asset label). */
+    asset?: Snippet<[AssetMentionChip]>;
+    class?: string;
+}
+declare const AssetMentionChips: import("svelte").Component<Props, {}, "">;
+type AssetMentionChips = ReturnType<typeof AssetMentionChips>;
+export default AssetMentionChips;
+//# sourceMappingURL=AssetMentionChips.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetMentionChips.svelte.d.ts","sourceRoot":"","sources":["../../src/generation/AssetMentionChips.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAMH,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACvB,MAAM,6BAA6B,CAAC;AAGrC,UAAU,KAAK;IACb,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mFAAmF;IACnF,MAAM,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,qFAAqF;IACrF,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyEH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

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