@pixerate/editor-svelte 0.22.0 → 0.24.0

package/dist/find-replace/FindReplaceBar.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { FIND_OPTION_TOGGLES, formatFindStatus } from "@pixerate/editor";
+  import { createFindReplace, type SvelteFindReplace } from "./findReplace.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    class?: string;
+    /** Render even while the find state is closed (default: only after Mod+F / Mod+H / `openFindReplace`). */
+    alwaysOpen?: boolean;
+    /** Show the "More options" toggle. Default `true`. */
+    showMoreOptions?: boolean;
+    /** Called after the bar closes (Escape or the close button). */
+    onclose?: () => void;
+  }
+
+  let {
+    editor = null,
+    class: className = "flex flex-col gap-1 rounded-md border border-border bg-background p-1 text-sm shadow-sm",
+    alwaysOpen = false,
+    showMoreOptions = true,
+    onclose,
+  }: Props = $props();
+
+  const inputClass =
+    "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
+  const buttonClass =
+    "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
+  const toggleClass = (on: boolean) =>
+    `${buttonClass} font-mono ${on ? "bg-primary/10 text-primary" : "text-muted-foreground"}`;
+  const basicToggles = FIND_OPTION_TOGGLES.filter((t) => !t.advanced);
+  const advancedToggles = FIND_OPTION_TOGGLES.filter((t) => t.advanced);
+
+  let find = $state.raw<SvelteFindReplace>(createFindReplace(null));
+  let moreOpen = $state(false);
+  let findInput = $state<HTMLInputElement | null>(null);
+
+  $effect(() => {
+    const f = createFindReplace(editor);
+    find = f;
+    return () => f.destroy();
+  });
+
+  let visible = $derived(find.available && (alwaysOpen || find.open));
+  let showReplace = $derived(find.mode === "replace");
+  let status = $derived(
+    formatFindStatus({
+      query: find.query,
+      matches: find.matches,
+      currentIndex: find.currentIndex,
+      error: find.error,
+      truncated: find.truncated,
+    }),
+  );
+  let hasMatches = $derived(find.matchCount > 0);
+
+  // Mod+F / Mod+H (in the editor or the bar) focus and select the find field.
+  $effect(() => {
+    if (!visible || find.focusRequest === 0 || !findInput) return;
+    findInput.focus();
+    findInput.select();
+  });
+
+  const isMod = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;
+
+  function close() {
+    find.close();
+    editor?.commands.focus();
+    onclose?.();
+  }
+
+  function onBarKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    } else if (isMod(e) && (e.key === "f" || e.key === "F")) {
+      e.preventDefault();
+      find.show("find");
+    } else if (isMod(e) && (e.key === "h" || e.key === "H")) {
+      e.preventDefault();
+      find.show("replace");
+    }
+  }
+
+  function onFindKeyDown(e: KeyboardEvent) {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    if (e.shiftKey) find.previous();
+    else find.next();
+  }
+
+  function onReplaceKeyDown(e: KeyboardEvent) {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    if (isMod(e)) find.replaceAll();
+    else find.replace();
+  }
+</script>
+
+{#if visible}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div class={className} role="search" aria-label="Find and replace" onkeydown={onBarKeyDown}>
+    <div class="flex items-center gap-1">
+      <button
+        type="button"
+        class={buttonClass}
+        aria-label="Toggle replace"
+        aria-expanded={showReplace}
+        onclick={() => find.show(showReplace ? "find" : "replace")}
+      >
+        {showReplace ? "▾" : "▸"}
+      </button>
+      <input
+        bind:this={findInput}
+        type="text"
+        class={inputClass}
+        placeholder="Find"
+        aria-label="Find"
+        aria-invalid={!!find.error}
+        value={find.query}
+        oninput={(e) => find.setQuery(e.currentTarget.value)}
+        onkeydown={onFindKeyDown}
+      />
+      {#each basicToggles as t (t.key)}
+        <button
+          type="button"
+          class={toggleClass(!!find.options[t.key])}
+          aria-label={t.label}
+          title={t.label}
+          aria-pressed={!!find.options[t.key]}
+          onclick={() => find.toggleOption(t.key)}
+        >
+          {t.short}
+        </button>
+      {/each}
+      <span
+        class={`min-w-[5rem] px-1 text-center text-xs ${find.error ? "text-destructive" : "text-muted-foreground"}`}
+        aria-live="polite"
+        role={find.error ? "alert" : "status"}
+        data-testid="find-status"
+      >
+        {status}
+      </span>
+      <button type="button" class={buttonClass} aria-label="Previous match" disabled={!hasMatches} onclick={() => find.previous()}>
+        &uarr;
+      </button>
+      <button type="button" class={buttonClass} aria-label="Next match" disabled={!hasMatches} onclick={() => find.next()}>
+        &darr;
+      </button>
+      {#if showMoreOptions}
+        <button
+          type="button"
+          class={buttonClass}
+          aria-label="More options"
+          aria-expanded={moreOpen}
+          onclick={() => (moreOpen = !moreOpen)}
+        >
+          &hellip;
+        </button>
+      {/if}
+      <button type="button" class={buttonClass} aria-label="Close find" onclick={close}>&times;</button>
+    </div>
+    {#if showReplace}
+      <div class="flex items-center gap-1 pl-7">
+        <input
+          type="text"
+          class={inputClass}
+          placeholder="Replace"
+          aria-label="Replace"
+          value={find.replacement}
+          oninput={(e) => find.setReplacement(e.currentTarget.value)}
+          onkeydown={onReplaceKeyDown}
+        />
+        <button
+          type="button"
+          class={buttonClass}
+          disabled={!hasMatches || find.currentIndex < 0}
+          onclick={() => find.replace()}
+        >
+          Replace
+        </button>
+        <button type="button" class={buttonClass} disabled={!hasMatches} onclick={() => find.replaceAll()}>
+          Replace all
+        </button>
+        {#if find.lastReplaceCount !== null}
+          <span class="px-1 text-xs text-muted-foreground" aria-live="polite">
+            {find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced`}
+          </span>
+        {/if}
+      </div>
+    {/if}
+    {#if showMoreOptions && moreOpen}
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-1 pl-7 text-xs text-muted-foreground">
+        {#each advancedToggles as t (t.key)}
+          <label class="flex items-center gap-1">
+            <input type="checkbox" checked={!!find.options[t.key]} onchange={() => find.toggleOption(t.key)} />
+            {t.label}
+          </label>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/find-replace/FindReplaceBar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Editor } from "@tiptap/core";
+interface Props {
+    editor?: Editor | null;
+    class?: string;
+    /** Render even while the find state is closed (default: only after Mod+F / Mod+H / `openFindReplace`). */
+    alwaysOpen?: boolean;
+    /** Show the "More options" toggle. Default `true`. */
+    showMoreOptions?: boolean;
+    /** Called after the bar closes (Escape or the close button). */
+    onclose?: () => void;
+}
+declare const FindReplaceBar: import("svelte").Component<Props, {}, "">;
+type FindReplaceBar = ReturnType<typeof FindReplaceBar>;
+export default FindReplaceBar;
+//# sourceMappingURL=FindReplaceBar.svelte.d.ts.map

package/dist/find-replace/FindReplaceBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FindReplaceBar.svelte.d.ts","sourceRoot":"","sources":["../../src/find-replace/FindReplaceBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAKzC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAsJH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/find-replace/findReplace.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Editor } from "@tiptap/core";
+import { type FindOptions, type FindReplaceMode, type FindReplaceSnapshot } from "@pixerate/editor";
+export interface SvelteFindReplace extends FindReplaceSnapshot {
+    /** Whether the editor has the `FindReplace` extension. */
+    readonly available: boolean;
+    readonly matchCount: number;
+    show(mode?: FindReplaceMode): void;
+    close(): void;
+    setQuery(query: string): void;
+    setReplacement(replacement: string): void;
+    setOptions(options: Partial<FindOptions>): void;
+    toggleOption(option: keyof FindOptions): void;
+    next(): void;
+    previous(): void;
+    replace(): void;
+    replaceAll(): void;
+    clear(): void;
+    subscribe(run: (value: FindReplaceSnapshot) => void): () => void;
+    destroy(): void;
+}
+/**
+ * Reactive (runes) and Svelte-store-compatible view of an editor's Find and
+ * Replace state (`FindReplace` extension) with its commands. Call
+ * `destroy()` when done (or create it inside a component).
+ */
+export declare function createFindReplace(editor: Editor | null | undefined): SvelteFindReplace;
+//# sourceMappingURL=findReplace.svelte.d.ts.map

package/dist/find-replace/findReplace.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findReplace.svelte.d.ts","sourceRoot":"","sources":["../../src/find-replace/findReplace.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACzB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,0DAA0D;IAC1D,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAChD,YAAY,CAAC,MAAM,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC9C,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,IAAI,IAAI,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,UAAU,IAAI,IAAI,CAAC;IACnB,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IACjE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,iBAAiB,CAyEtF"}

package/dist/find-replace/findReplace.svelte.js

@@ -0,0 +1,79 @@
+import { EMPTY_FIND_REPLACE_SNAPSHOT, getFindReplaceStore, } from "@pixerate/editor";
+/**
+ * Reactive (runes) and Svelte-store-compatible view of an editor's Find and
+ * Replace state (`FindReplace` extension) with its commands. Call
+ * `destroy()` when done (or create it inside a component).
+ */
+export function createFindReplace(editor) {
+    const store = getFindReplaceStore(editor ?? null);
+    let snapshot = $state.raw(store?.getSnapshot() ?? EMPTY_FIND_REPLACE_SNAPSHOT);
+    const unsubscribe = store
+        ? store.subscribe((value) => {
+            snapshot = value;
+        })
+        : () => { };
+    const run = (fn) => {
+        if (editor && !editor.isDestroyed && store)
+            fn(editor);
+    };
+    return {
+        get available() {
+            return !!store;
+        },
+        get open() {
+            return snapshot.open;
+        },
+        get mode() {
+            return snapshot.mode;
+        },
+        get query() {
+            return snapshot.query;
+        },
+        get replacement() {
+            return snapshot.replacement;
+        },
+        get options() {
+            return snapshot.options;
+        },
+        get matches() {
+            return snapshot.matches;
+        },
+        get matchCount() {
+            return snapshot.matches.length;
+        },
+        get currentIndex() {
+            return snapshot.currentIndex;
+        },
+        get error() {
+            return snapshot.error;
+        },
+        get truncated() {
+            return snapshot.truncated;
+        },
+        get lastReplaceCount() {
+            return snapshot.lastReplaceCount;
+        },
+        get focusRequest() {
+            return snapshot.focusRequest;
+        },
+        show: (mode = "find") => run((e) => e.commands.openFindReplace({ mode })),
+        close: () => run((e) => e.commands.closeFindReplace()),
+        setQuery: (query) => run((e) => e.commands.setSearch({ query })),
+        setReplacement: (replacement) => run((e) => e.commands.setSearch({ replacement })),
+        setOptions: (options) => run((e) => e.commands.setSearch({ options })),
+        toggleOption: (option) => run((e) => e.commands.setSearch({ options: { [option]: !snapshot.options[option] } })),
+        next: () => run((e) => e.commands.findNext()),
+        previous: () => run((e) => e.commands.findPrevious()),
+        replace: () => run((e) => e.commands.replaceCurrent()),
+        replaceAll: () => run((e) => e.commands.replaceAll()),
+        clear: () => run((e) => e.commands.clearSearch()),
+        subscribe(runFn) {
+            if (!store) {
+                runFn(EMPTY_FIND_REPLACE_SNAPSHOT);
+                return () => { };
+            }
+            return store.subscribe(runFn);
+        },
+        destroy: unsubscribe,
+    };
+}

package/dist/find-replace/index.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from "svelte";
+import type FindReplaceBarComponent from "./FindReplaceBar.svelte";
+export { default as FindReplaceBar } from "./FindReplaceBar.svelte";
+export * from "./findReplace.svelte.js";
+export type FindReplaceBarProps = ComponentProps<typeof FindReplaceBarComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/find-replace/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/find-replace/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,yBAAyB,CAAC;AAExC,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/find-replace/index.js

@@ -0,0 +1,2 @@
+export { default as FindReplaceBar } from "./FindReplaceBar.svelte";
+export * from "./findReplace.svelte.js";

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>