@pixerate/editor-svelte 0.22.0 → 0.23.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/GenerationSettings.svelte

@@ -0,0 +1,174 @@
+<script lang="ts" module>
+  let nextId = 0;
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import {
+    getGenerationControls,
+    getReferenceSlots,
+    getRequestValue,
+    parseControlValue,
+    planGenerationRequest,
+    removeReference,
+    setRequestValue,
+    type GenerationControl,
+    type GenerationPlan,
+    type GenerationReference,
+    type GenerationRequest,
+    type ModelCapabilities,
+    type PlanStrategy,
+    type ReferenceRole
+  } from '@pixerate/editor/generation';
+
+  interface Props {
+    capabilities: ModelCapabilities;
+    /** The request being edited (controlled). */
+    value: GenerationRequest;
+    onchange: (next: GenerationRequest) => void;
+    /** A plan computed elsewhere; otherwise one is computed with `strategy`. */
+    plan?: GenerationPlan;
+    /** Strategy for the built-in plan (default `nearest`). */
+    strategy?: PlanStrategy;
+    /** List plan adjustments and errors under the controls (default `true`). */
+    showAdjustments?: boolean;
+    /** Shows an "Add" button per reference role; you pick the asset and call `onchange`. */
+    onaddreference?: (role: ReferenceRole) => void;
+    /** Custom rendering of a reference chip (default: its id). */
+    reference?: Snippet<[GenerationReference]>;
+    class?: string;
+  }
+
+  let {
+    capabilities,
+    value,
+    onchange,
+    plan: planProp,
+    strategy,
+    showAdjustments = true,
+    onaddreference,
+    reference,
+    class: className = ''
+  }: Props = $props();
+
+  const baseId = `generation-settings-${++nextId}`;
+  const controls = $derived(getGenerationControls(capabilities));
+  const plan = $derived(planProp ?? planGenerationRequest(value, capabilities, { strategy }));
+  const slots = $derived(getReferenceSlots(capabilities, value));
+
+  const inputClass =
+    'w-full rounded-md border border-border bg-background px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring';
+
+  const shown = (control: GenerationControl) => getRequestValue(value, control.key) ?? control.defaultValue;
+  const update = (control: GenerationControl, raw: string | boolean) =>
+    onchange(setRequestValue(value, control.key, parseControlValue(control, raw)));
+</script>
+
+<!-- Headless-styled settings form generated from a model's capabilities. -->
+<div class="flex flex-col gap-3 text-sm {className}" data-generation-settings="" data-model={capabilities.id}>
+  {#each controls as control (control.key)}
+    {@const id = `${baseId}-${control.key}`}
+    {@const current = shown(control)}
+    <div class="flex flex-col gap-1" data-control={control.key}>
+      <label for={id} class="text-xs font-medium text-muted-foreground" title={control.description}>{control.label}</label>
+      {#if control.kind === 'checkbox'}
+        <input
+          {id}
+          type="checkbox"
+          data-field={control.key}
+          checked={Boolean(current)}
+          onchange={(e) => update(control, e.currentTarget.checked)}
+        />
+      {:else if control.kind === 'select'}
+        <select
+          {id}
+          data-field={control.key}
+          class={inputClass}
+          value={current === undefined ? '' : String(current)}
+          onchange={(e) => update(control, e.currentTarget.value)}
+        >
+          {#if current === undefined}<option value="">Default</option>{/if}
+          {#each control.options ?? [] as option (option.value)}
+            <option value={String(option.value)}>{option.label}</option>
+          {/each}
+        </select>
+      {:else if control.kind === 'textarea'}
+        <textarea
+          {id}
+          data-field={control.key}
+          class={inputClass}
+          rows="2"
+          maxlength={control.maxLength}
+          value={typeof getRequestValue(value, control.key) === 'string' ? (getRequestValue(value, control.key) as string) : ''}
+          oninput={(e) => update(control, e.currentTarget.value)}
+        ></textarea>
+      {:else}
+        <div class="flex items-center gap-2">
+          <input
+            {id}
+            type={control.kind === 'range' ? 'range' : 'number'}
+            data-field={control.key}
+            class={control.kind === 'range' ? 'flex-1' : inputClass}
+            min={control.min}
+            max={control.max}
+            step={control.step ?? 'any'}
+            value={typeof current === 'number' ? current : control.kind === 'range' ? (control.min ?? 0) : ''}
+            oninput={(e) => update(control, e.currentTarget.value)}
+          />
+          {#if control.kind === 'range'}
+            <span class="w-10 text-right tabular-nums text-muted-foreground" data-field-value="">
+              {typeof current === 'number' ? current : '–'}
+            </span>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/each}
+
+  {#each slots as slot (slot.role)}
+    <fieldset class="flex flex-col gap-1" data-reference-role={slot.role}>
+      <legend class="text-xs font-medium text-muted-foreground" title={slot.description}>
+        {slot.label}
+        <span class="tabular-nums" data-reference-count="">({slot.references.length}/{slot.max})</span>
+        {#if slot.min > 0}<span class="text-destructive"> *</span>{/if}
+      </legend>
+      <ul class="flex flex-wrap gap-1">
+        {#each slot.references as ref (ref.id)}
+          <li class="flex items-center gap-1 rounded border border-border px-1.5 py-0.5" data-reference-id={ref.id}>
+            {#if reference}{@render reference(ref)}{:else}<span class="max-w-[10rem] truncate">{ref.id}</span>{/if}
+            <button
+              type="button"
+              aria-label="Remove {slot.label} {ref.id}"
+              class="text-muted-foreground hover:text-foreground"
+              onclick={() => onchange(removeReference(value, slot.role, ref.id))}>×</button
+            >
+          </li>
+        {/each}
+        {#if onaddreference && slot.canAdd}
+          <li>
+            <button
+              type="button"
+              class="rounded border border-dashed border-border px-1.5 py-0.5 text-muted-foreground hover:text-foreground"
+              onclick={() => onaddreference(slot.role)}>Add</button
+            >
+          </li>
+        {/if}
+      </ul>
+    </fieldset>
+  {/each}
+
+  {#if showAdjustments && plan.adjustments.length > 0}
+    <ul role="status" class="flex flex-col gap-0.5 text-xs text-muted-foreground" data-generation-adjustments="">
+      {#each plan.adjustments as adjustment, index (index)}
+        <li data-adjustment-field={adjustment.field} data-adjustment-kind={adjustment.kind}>{adjustment.reason}</li>
+      {/each}
+    </ul>
+  {/if}
+  {#if showAdjustments && plan.errors.length > 0}
+    <ul role="alert" class="flex flex-col gap-0.5 text-xs text-destructive" data-generation-errors="">
+      {#each plan.errors as error, index (index)}
+        <li data-error-field={error.field}>{error.message}</li>
+      {/each}
+    </ul>
+  {/if}
+</div>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import { type GenerationPlan, type GenerationReference, type GenerationRequest, type ModelCapabilities, type PlanStrategy, type ReferenceRole } from '@pixerate/editor/generation';
+interface Props {
+    capabilities: ModelCapabilities;
+    /** The request being edited (controlled). */
+    value: GenerationRequest;
+    onchange: (next: GenerationRequest) => void;
+    /** A plan computed elsewhere; otherwise one is computed with `strategy`. */
+    plan?: GenerationPlan;
+    /** Strategy for the built-in plan (default `nearest`). */
+    strategy?: PlanStrategy;
+    /** List plan adjustments and errors under the controls (default `true`). */
+    showAdjustments?: boolean;
+    /** Shows an "Add" button per reference role; you pick the asset and call `onchange`. */
+    onaddreference?: (role: ReferenceRole) => void;
+    /** Custom rendering of a reference chip (default: its id). */
+    reference?: Snippet<[GenerationReference]>;
+    class?: string;
+}
+declare const GenerationSettings: import("svelte").Component<Props, {}, "">;
+type GenerationSettings = ReturnType<typeof GenerationSettings>;
+export default GenerationSettings;
+//# sourceMappingURL=GenerationSettings.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GenerationSettings.svelte.d.ts","sourceRoot":"","sources":["../../src/generation/GenerationSettings.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EASH,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,aAAa,EACnB,MAAM,6BAA6B,CAAC;AAGrC,UAAU,KAAK;IACb,YAAY,EAAE,iBAAiB,CAAC;IAChC,6CAA6C;IAC7C,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wFAAwF;IACxF,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyGH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/generation/JobProgress.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { estimateJobProgress } from '@pixerate/editor/generation';
+
+  interface Props {
+    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;
+    /** Text shown before the time label, e.g. the model name. */
+    title?: string;
+    /** Extra classes for the root. */
+    class?: string;
+  }
+
+  let { startedAt, expectedMs, done = false, now, intervalMs = 1000, title, class: className = '' }: Props = $props();
+
+  let tick = $state(Date.now());
+  const ticking = $derived(!done && now === undefined);
+
+  $effect(() => {
+    if (!ticking) return;
+    tick = Date.now();
+    const id = setInterval(() => (tick = Date.now()), Math.max(16, intervalMs));
+    return () => clearInterval(id);
+  });
+
+  const progress = $derived(estimateJobProgress({ startedAt, expectedMs, done, now: now ?? tick }));
+</script>
+
+<!-- Headless-styled, time-based job progress: held at 95% until `done`, with a "~2m left" / "Almost done…" label. -->
+<div class="flex flex-col gap-1 text-sm {className}" data-job-progress="" data-done={done ? '' : undefined}>
+  <div class="flex items-center justify-between gap-2 text-muted-foreground">
+    {#if title}<span class="truncate text-foreground">{title}</span>{/if}
+    <span data-job-progress-label="" aria-live="polite">{progress.label}</span>
+  </div>
+  <div
+    role="progressbar"
+    aria-label={title ?? 'Generation progress'}
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-valuenow={progress.percent}
+    aria-valuetext="{progress.percent}%, {progress.label}"
+    class="h-1.5 w-full overflow-hidden rounded-full bg-muted"
+  >
+    <div
+      class="h-full rounded-full bg-primary transition-[width] duration-500"
+      style="width: {progress.percent}%; background: var(--primary, currentColor);"
+    ></div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+interface Props {
+    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;
+    /** Text shown before the time label, e.g. the model name. */
+    title?: string;
+    /** Extra classes for the root. */
+    class?: string;
+}
+declare const JobProgress: import("svelte").Component<Props, {}, "">;
+type JobProgress = ReturnType<typeof JobProgress>;
+export default JobProgress;
+//# sourceMappingURL=JobProgress.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JobProgress.svelte.d.ts","sourceRoot":"","sources":["../../src/generation/JobProgress.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,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;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/generation/index.d.ts

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

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

@@ -0,0 +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"}

package/dist/generation/index.js

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

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

@@ -0,0 +1,16 @@
+import { type GenerationPlan, type GenerationRequest, type ModelCapabilities, type PlanAdjustment, type PlanError, type PlanOptions } from "@pixerate/editor/generation";
+export interface SvelteGenerationPlan {
+    readonly plan: GenerationPlan;
+    readonly ok: boolean;
+    /** The adjusted request. */
+    readonly request: GenerationRequest;
+    readonly adjustments: PlanAdjustment[];
+    readonly errors: PlanError[];
+}
+/**
+ * Reactive `planGenerationRequest` (Svelte 5 runes). Pass getters so the plan
+ * follows `$state` request/capabilities/options:
+ * `createGenerationPlan(() => request, () => caps, () => ({ strategy }))`.
+ */
+export declare function createGenerationPlan(request: () => GenerationRequest, capabilities: () => ModelCapabilities, options?: () => PlanOptions): SvelteGenerationPlan;
+//# sourceMappingURL=plan.svelte.d.ts.map