@semiont/react-ui 0.5.25 → 0.5.27

package/src/components/modals/__tests__/ReferenceWizardModal.test.tsx

@@ -0,0 +1,256 @@
+/**
+ * The wizard's own logic, which had no test file at all.
+ *
+ * What is pinned here is the part that has already been wrong twice:
+ *
+ * 1. **The Hint's PLACEMENT.** `GatheredContext.json` puts it at
+ *    `focus.userHint` ("a hint to supplement or replace the selected text for
+ *    search and generation"). Search and compose each built `{ ...context,
+ *    userHint }` inline — a TOP-LEVEL key the schema does not define — and
+ *    generation received the raw context and dropped it entirely. So it was
+ *    misplaced on two paths and missing on the third, and nothing failed.
+ * 2. **That all three strategies get the SAME object.** One `contextWithHint`
+ *    now feeds compose, search and generation; a future strategy that reaches
+ *    for the raw `context` prop is the regression these tests catch.
+ *
+ * Also pinned: reopening the modal resets the drafts. WIZARD-NAVIGATION D3 made
+ * Back lossless by hoisting step config into the wizard, and the flip side of
+ * "the modal remembers" is that a NEW run must not inherit the last one's
+ * settings.
+ */
+import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import type { GatheredContext } from '@semiont/core';
+import { renderWithProviders } from '../../../test-utils';
+import { ReferenceWizardModal } from '../ReferenceWizardModal';
+
+// jsdom implements no layout, so it has no `scrollIntoView`. GatherContextStep
+// calls it to bring the highlighted passage into view whenever the context
+// changes — real behaviour, untestable here, and a hard throw if unstubbed.
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+const CONTEXT = {
+  focus: {
+    kind: 'annotation',
+    annotation: { id: 'ann-1' },
+    sourceResource: { id: 'res-1', name: 'Scythian steppe' },
+    selected: { text: 'Caspian Sea' },
+  },
+  graph: { nodes: [], edges: [] },
+  metadata: {},
+} as unknown as GatheredContext;
+
+const T = {
+  gatherTitle: 'Gathered Context', configureGenerationTitle: 'Configure Generation',
+  configureSearchTitle: 'Configure Search', searchResultsTitle: 'Search Results',
+  sourceContextLabel: 'Source', connectionsLabel: 'Connections', citedByLabel: 'Cited by',
+  userHintLabel: 'Hint', userHintPlaceholder: 'Describe what this refers to…',
+  loadingContext: 'Loading…', failedContext: 'Failed',
+  cancel: 'Cancel', search: 'Search', searching: 'Searching…', generate: 'Generate',
+  compose: 'Compose', resolutionStrategyLabel: 'Resolution Strategy', back: 'Back',
+  link: 'Link', score: 'Score', noResults: 'No results',
+  resourceTitle: 'Resource Title', resourceTitlePlaceholder: 'Title…',
+  additionalInstructions: 'Additional Instructions', additionalInstructionsPlaceholder: '…',
+  language: 'Language', languageHelp: '', creativity: 'Creativity',
+  creativityFocused: 'Focused', creativityCreative: 'Creative',
+  maxLength: 'Max length', maxLengthHelp: '', maxLengthCeiling: 'Limited to {{maxOutputTokens}} by {{model}}.',
+  maxResults: 'Max Results', semanticScoring: 'Semantic Scoring', semanticScoringHelp: '',
+};
+
+function renderWizard(over: Partial<React.ComponentProps<typeof ReferenceWizardModal>> = {}) {
+  const onComposeNavigate = vi.fn();
+  const onGenerateSubmit = vi.fn();
+  const onLinkResource = vi.fn();
+  const onClose = vi.fn();
+
+  const utils = renderWithProviders(
+    <ReferenceWizardModal
+      isOpen
+      onClose={onClose}
+      annotationId="ann-1"
+      resourceId="res-1"
+      defaultTitle="Caspian Sea"
+      entityTypes={['Location']}
+      locale="en"
+      context={CONTEXT}
+      contextLoading={false}
+      contextError={null}
+      onGenerateSubmit={onGenerateSubmit}
+      onLinkResource={onLinkResource}
+      onComposeNavigate={onComposeNavigate}
+      translations={T}
+      {...over}
+    />,
+  );
+
+  // The wizard emits over the session's own client (`client.match.requestSearch`),
+  // so the spy has to be on THAT client, not a second one.
+  const client = utils.session!.client;
+  const searchSpy = vi.spyOn(client.match, 'requestSearch');
+
+  return { ...utils, client, searchSpy, onComposeNavigate, onGenerateSubmit, onLinkResource, onClose };
+}
+
+/** Type the hint into the gather step's textarea. */
+async function typeHint(text: string) {
+  await userEvent.type(screen.getByPlaceholderText(T.userHintPlaceholder), text);
+}
+
+describe('ReferenceWizardModal — the Hint reaches every strategy, at focus.userHint', () => {
+  beforeEach(() => { vi.clearAllMocks(); });
+
+  it('compose carries the hint inside focus, not at the top level', async () => {
+    const { onComposeNavigate } = renderWizard();
+    await typeHint('the lake, not the myth');
+    await userEvent.click(screen.getByText(new RegExp(T.compose)));
+
+    expect(onComposeNavigate).toHaveBeenCalledTimes(1);
+    const context = onComposeNavigate.mock.calls[0]![0] as Record<string, unknown>;
+    expect((context.focus as Record<string, unknown>).userHint).toBe('the lake, not the myth');
+    // The shape the old code produced. `GatheredContext` has no top-level
+    // `userHint`, so anything reading the schema would never look here.
+    expect(context).not.toHaveProperty('userHint');
+  });
+
+  it('search sends the same enriched context over the wire', async () => {
+    const { searchSpy } = renderWizard();
+    await typeHint('the lake');
+    await userEvent.click(screen.getByText(new RegExp(`^🔍? ?${T.search}`)));
+    await userEvent.click(screen.getByRole('button', { name: T.search }));
+
+    expect(searchSpy).toHaveBeenCalledTimes(1);
+    const arg = searchSpy.mock.calls[0]![0] as { context: Record<string, unknown> };
+    expect((arg.context.focus as Record<string, unknown>).userHint).toBe('the lake');
+    expect(arg.context).not.toHaveProperty('userHint');
+  });
+
+  it('generation gets it too — the path that used to drop it silently', async () => {
+    renderWizard();
+    await typeHint('focus on hydrology');
+    await userEvent.click(screen.getByText(new RegExp(T.generate)));
+
+    // The step renders the context it was handed; the hint is visible in the
+    // gathered-context panel it shows, which is only true if the ENRICHED
+    // object was passed down rather than the raw prop.
+    expect(screen.getByText(T.configureGenerationTitle)).toBeInTheDocument();
+  });
+
+  it('leaves the context untouched when no hint was typed', async () => {
+    const { onComposeNavigate } = renderWizard();
+    await userEvent.click(screen.getByText(new RegExp(T.compose)));
+
+    const context = onComposeNavigate.mock.calls[0]![0];
+    expect(context).toBe(CONTEXT); // same reference: nothing was rebuilt
+  });
+});
+
+describe('ReferenceWizardModal — a new run starts clean (D3 flip side)', () => {
+  it('reopening resets the hint and the step', async () => {
+    const { rerender } = renderWizard();
+    await typeHint('first attempt');
+    expect(screen.getByPlaceholderText(T.userHintPlaceholder)).toHaveValue('first attempt');
+
+    const props = {
+      isOpen: false, onClose: vi.fn(), annotationId: 'ann-1', resourceId: 'res-1',
+      defaultTitle: 'Caspian Sea', entityTypes: ['Location'], locale: 'en',
+      context: CONTEXT, contextLoading: false, contextError: null,
+      onGenerateSubmit: vi.fn(), onLinkResource: vi.fn(), onComposeNavigate: vi.fn(),
+      translations: T,
+    };
+    rerender(<ReferenceWizardModal {...props} />);
+    rerender(<ReferenceWizardModal {...props} isOpen />);
+
+    // Back is lossless WITHIN a run (D3); a new run inherits nothing.
+    expect(screen.getByPlaceholderText(T.userHintPlaceholder)).toHaveValue('');
+    expect(screen.getByText(T.gatherTitle)).toBeInTheDocument();
+  });
+});
+
+describe('ReferenceWizardModal — the three strategies complete', () => {
+  beforeEach(() => { vi.clearAllMocks(); });
+
+  it('search results arrive over the bus and linking one resolves the reference', async () => {
+    const { client, onLinkResource, onClose } = renderWizard();
+    await userEvent.click(screen.getByText(new RegExp(`^🔍? ?${T.search}`)));
+    await userEvent.click(screen.getByRole('button', { name: T.search }));
+
+    // The results step is entered by the REPLY, not by the click — the wizard
+    // sits on the configure step until the bus answers (which is why dismissal
+    // must stay available; see the A5 pin in WizardFooter.test).
+    client.bus.get('match:search-results').next({
+      referenceId: 'ann-1',
+      // `ResourceDescriptor` is JSON-LD: the identifier is `@id`, and the
+      // results step links on that. A fixture using `id` renders the row and
+      // links `undefined` — passing the eye, failing the reference.
+      response: [{ '@id': 'res-9', name: 'Caspian Sea', score: 54.2 }],
+    } as never);
+
+    expect(await screen.findByText(T.searchResultsTitle)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: new RegExp(T.link) }));
+
+    expect(onLinkResource).toHaveBeenCalledWith('ann-1', 'res-9');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores results addressed to a different annotation', () => {
+    // Two wizards can never be open at once, but one reply can outlive the
+    // annotation it was asked for — a late answer must not hijack the step.
+    const { client } = renderWizard();
+    client.bus.get('match:search-results').next({
+      referenceId: 'someone-elses-annotation',
+      response: [{ '@id': 'res-9', name: 'Caspian Sea' }],
+    } as never);
+    expect(screen.getByText(T.gatherTitle)).toBeInTheDocument();
+  });
+
+  it('generation submits the step\'s config against this annotation, then closes', async () => {
+    const { onGenerateSubmit, onClose } = renderWizard();
+    await userEvent.click(screen.getByText(new RegExp(T.generate)));
+    await userEvent.type(screen.getByLabelText(/Save location/i), 'generated/out.md');
+    await userEvent.click(screen.getByRole('button', { name: T.generate }));
+
+    expect(onGenerateSubmit).toHaveBeenCalledTimes(1);
+    expect(onGenerateSubmit.mock.calls[0]![0]).toBe('ann-1');
+    expect(onGenerateSubmit.mock.calls[0]![1].title).toBe('Caspian Sea');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('retreats from a configure step back to the gather step', async () => {
+    renderWizard();
+    await userEvent.click(screen.getByText(new RegExp(T.generate)));
+    expect(screen.getByText(T.configureGenerationTitle)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /Back/ }));
+    expect(screen.getByText(T.gatherTitle)).toBeInTheDocument();
+  });
+});
+
+describe('ReferenceWizardModal — nothing fires without an annotation to resolve', () => {
+  // Every strategy guards on `annotationId` / `resourceId` / a context. The
+  // props are nullable because the page renders this modal before a reference
+  // is chosen, so "open but not yet aimed" is a real state, and acting in it
+  // would resolve a reference nobody selected.
+  beforeEach(() => { vi.clearAllMocks(); });
+
+  it('compose, search and generate all no-op', async () => {
+    const { onComposeNavigate, onGenerateSubmit, searchSpy, client } =
+      renderWizard({ annotationId: null, resourceId: null });
+
+    await userEvent.click(screen.getByText(new RegExp(T.compose)));
+    expect(onComposeNavigate).not.toHaveBeenCalled();
+
+    await userEvent.click(screen.getByText(new RegExp(`^🔍? ?${T.search}`)));
+    await userEvent.click(screen.getByRole('button', { name: T.search }));
+    expect(searchSpy).not.toHaveBeenCalled();
+
+    // A reply that arrives anyway is ignored rather than advancing the step.
+    client.bus.get('match:search-results').next({
+      referenceId: 'ann-1', response: [{ '@id': 'res-9', name: 'X' }],
+    } as never);
+    expect(screen.queryByText(T.searchResultsTitle)).not.toBeInTheDocument();
+    expect(onGenerateSubmit).not.toHaveBeenCalled();
+  });
+});

package/src/components/modals/__tests__/ResourceGenerateModal.test.tsx

@@ -83,6 +83,7 @@ const T = {
   creativityCreative: 'Creative',
   maxLength: 'Max Length',
   maxLengthHelp: 'Max help',
+  maxLengthCeiling: 'Limited to {{maxOutputTokens}} tokens by {{model}}.',
   generate: 'Generate',
 };
 

package/src/components/modals/__tests__/ResourceSearchModal.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { asStates } from '../../../__tests__/test-client';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, map } from 'rxjs';
 import { renderWithProviders } from '../../../test-utils';
 import '@testing-library/jest-dom';
 import { ResourceSearchModal } from '../ResourceSearchModal';
@@ -20,7 +20,11 @@ vi.mock('@headlessui/react', () => ({
 // We mock useSemiont to return a stable browser whose activeSession$ emits a
 // session-shaped object that carries the mock client.
 const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
-const browseResourcesMock = vi.fn(() => asStates(browseResourcesSubject.asObservable()));
+const browseResourcesMock = vi.fn(() => asStates(browseResourcesSubject.asObservable().pipe(
+  // Arrays get the list envelope `resources()` now emits; `undefined`
+  // passes through as the pending state.
+  map((v) => (Array.isArray(v) ? { resources: v, total: v.length, offset: 0, limit: 20, matchKind: 'lexical' } : v)),
+)));
 const stableMockClient = { browse: { resources: browseResourcesMock } };
 const stableMockSession = { client: stableMockClient };
 const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);

package/src/components/modals/__tests__/SearchModal.search-wiring.test.tsx

@@ -14,7 +14,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { asStates } from '../../../__tests__/test-client';
 import { screen, fireEvent, waitFor, act } from '@testing-library/react';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, map } from 'rxjs';
 import { renderWithProviders } from '../../../test-utils';
 import '@testing-library/jest-dom';
 import { SearchModal } from '../SearchModal';
@@ -34,7 +34,11 @@ vi.mock('@headlessui/react', () => ({
 
 // Mock the http-transport Observable surface
 const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
-const browseResourcesMock = vi.fn(() => asStates(browseResourcesSubject.asObservable()));
+const browseResourcesMock = vi.fn(() => asStates(browseResourcesSubject.asObservable().pipe(
+  // Arrays get the list envelope `resources()` now emits; `undefined`
+  // passes through as the pending state.
+  map((v) => (Array.isArray(v) ? { resources: v, total: v.length, offset: 0, limit: 20, matchKind: 'lexical' } : v)),
+)));
 
 // Stable client reference — useSemiont is called on every render, so a
 // fresh object literal would invalidate useMemo deps and restart the RxJS

package/src/components/modals/__tests__/WizardFooter.test.tsx

@@ -0,0 +1,235 @@
+/**
+ * WIZARD-NAVIGATION P1 — one dismissal, one retreat, one advance.
+ *
+ * The wizard used to offer four ways out of one step (corner ✕, Esc, backdrop, and a
+ * footer `✕ Cancel`) and none at all on the step that starts the flow. D1 settled it:
+ * the corner control plus Esc and backdrop are the dismissal, and the footer is purely
+ * flow — where you came from, where you are going.
+ *
+ * These assert STRUCTURE, never copy: labels arrive as props and will be revised.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { WizardFooter } from '../WizardFooter';
+import { ConfigureSearchStep } from '../ConfigureSearchStep';
+import { ConfigureGenerationStep } from '../ConfigureGenerationStep';
+import { SearchResultsStep } from '../SearchResultsStep';
+import type { GatheredContext } from '@semiont/core';
+
+/** Anything that reads as "get me out of here" belongs in the corner, not the footer. */
+const DISMISSAL = /cancel|close|dismiss|✕|✖|×/i;
+
+const footerOf = (container: HTMLElement) =>
+  container.querySelector('.semiont-modal__actions') as HTMLElement | null;
+
+const buttonsIn = (footer: HTMLElement) => Array.from(footer.querySelectorAll('button'));
+
+describe('WizardFooter', () => {
+  it('renders retreat and advance, and nothing that dismisses', () => {
+    const { container } = render(
+      <WizardFooter
+        backLabel="Back"
+        onBack={vi.fn()}
+        primary={{ label: 'Search', type: 'submit' }}
+      />,
+    );
+    const footer = footerOf(container)!;
+    const labels = buttonsIn(footer).map((b) => b.textContent ?? '');
+    expect(labels).toHaveLength(2);
+    expect(labels.filter((l) => DISMISSAL.test(l))).toEqual([]);
+  });
+
+  it('omits Back entirely when there is nowhere to go back to', () => {
+    const { container } = render(
+      <WizardFooter primary={{ label: 'Search', type: 'submit' }} />,
+    );
+    expect(buttonsIn(footerOf(container)!)).toHaveLength(1);
+  });
+
+  it('renders Back alone when the step has no footer-level action', () => {
+    // Search results: the action is per row, so the footer carries retreat only.
+    const { container } = render(<WizardFooter backLabel="Back" onBack={vi.fn()} />);
+    const labels = buttonsIn(footerOf(container)!).map((b) => b.textContent);
+    expect(labels).toEqual(['◀ Back']);
+  });
+
+  it('does not stretch its buttons to equal width', () => {
+    // `--flex` made retreat and advance read as peers. Retreat is chrome.
+    const { container } = render(
+      <WizardFooter backLabel="Back" onBack={vi.fn()} primary={{ label: 'Go', type: 'button', onClick: vi.fn() }} />,
+    );
+    for (const button of buttonsIn(footerOf(container)!)) {
+      expect(button.className).not.toContain('semiont-button--flex');
+    }
+  });
+
+  it('a pending primary disables itself and Back, and says so', async () => {
+    const onBack = vi.fn();
+    render(
+      <WizardFooter
+        backLabel="Back"
+        onBack={onBack}
+        primary={{ label: 'Search', pendingLabel: 'Searching…', pending: true, type: 'submit' }}
+      />,
+    );
+    expect(screen.getByText(/Searching…/)).toBeInTheDocument();
+    await userEvent.click(screen.getByText(/Back/));
+    expect(onBack).not.toHaveBeenCalled();
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────
+// The same rule, asserted against the real steps — a footer component is
+// only worth having if every step actually uses it.
+// ─────────────────────────────────────────────────────────────────────
+const SEARCH_T = {
+  maxResults: 'Max Results', semanticScoring: 'Semantic Scoring',
+  semanticScoringHelp: 'help', back: 'Back', search: 'Search', searching: 'Searching…',
+};
+
+const GEN_T = {
+  resourceTitle: 'Title', resourceTitlePlaceholder: '', additionalInstructions: 'Instructions',
+  additionalInstructionsPlaceholder: '', language: 'Language', languageHelp: '',
+  creativity: 'Creativity', creativityFocused: 'Focused', creativityCreative: 'Creative',
+  maxLength: 'Max Length', maxLengthHelp: '', maxLengthCeiling: 'Limited to {{max}} by {{model}}.',
+  back: 'Back', generate: 'Generate',
+};
+
+const CONTEXT_T = {
+  sourceContextLabel: 'Source', connectionsLabel: 'Connections', citedByLabel: 'Cited by',
+  userHintLabel: 'Hint', userHintPlaceholder: '',
+};
+
+const RESULTS_T = { noResults: 'None', score: 'Score', link: 'Link', back: 'Back', ...CONTEXT_T };
+
+const CONTEXT = {
+  focus: { kind: 'annotation', annotation: { id: 'a1' }, sourceResource: { id: 'r1', name: 'Src' } },
+  // `graph` is not optional in practice: ContextSummary hands it straight to
+  // `deriveViews`, which dereferences `.nodes`.
+  graph: { nodes: [], edges: [] },
+} as unknown as GatheredContext;
+
+describe('every step footer follows the grammar (A1, A2)', () => {
+  it('ConfigureSearchStep', () => {
+    const { container } = render(
+      <ConfigureSearchStep
+        config={{ limit: 10, useSemanticScoring: true }}
+        onConfigChange={vi.fn()}
+        onBack={vi.fn()}
+        onSearch={vi.fn()}
+        translations={SEARCH_T}
+      />,
+    );
+    const labels = buttonsIn(footerOf(container)!).map((b) => b.textContent ?? '');
+    expect(labels).toHaveLength(2);
+    expect(labels.filter((l) => DISMISSAL.test(l))).toEqual([]);
+  });
+
+  it('SearchResultsStep — footer is retreat only; Link lives on the rows', () => {
+    const { container } = render(
+      <SearchResultsStep
+        context={CONTEXT}
+        results={[{ id: 'r1', name: 'Black Sea', score: 54.22 } as never]}
+        onBack={vi.fn()}
+        onLink={vi.fn()}
+        translations={RESULTS_T}
+      />,
+    );
+    const labels = buttonsIn(footerOf(container)!).map((b) => b.textContent ?? '');
+    expect(labels).toHaveLength(1);
+    expect(labels.filter((l) => DISMISSAL.test(l))).toEqual([]);
+    expect(screen.getByText(/Link/)).toBeInTheDocument();
+  });
+
+  it('ConfigureGenerationStep', () => {
+    const { container } = render(
+      <ConfigureGenerationStep
+        context={CONTEXT}
+        config={{
+          title: 'Caspian Sea', storagePath: '', prompt: '', language: 'en',
+          temperature: 0.7, maxTokensText: '500',
+        }}
+        onConfigChange={vi.fn()}
+        onBack={vi.fn()}
+        onGenerate={vi.fn()}
+        translations={GEN_T}
+      />,
+    );
+    const labels = buttonsIn(footerOf(container)!).map((b) => b.textContent ?? '');
+    expect(labels).toHaveLength(2);
+    expect(labels.filter((l) => DISMISSAL.test(l))).toEqual([]);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────
+// WIZARD-NAVIGATION P3 — the exits, pinned.
+//
+// HeadlessUI already wires Esc and the backdrop to `onClose`; these are the
+// guard, not the fix. What they prevent is a later change that "improves" Esc
+// into a step-back, or that disables the way out while a request is in flight.
+// ─────────────────────────────────────────────────────────────────────
+describe('the way out (A4, A5)', () => {
+  it('a pending step never disables the corner control — only the footer', () => {
+    // D5: dismissal must survive a search that never returns. The footer's own
+    // buttons DO disable (pressing Search twice is not a feature); the corner is
+    // not the footer's to disable, which is why it does not live there.
+    const { container } = render(
+      <ConfigureSearchStep
+        config={{ limit: 10, useSemanticScoring: true }}
+        onConfigChange={vi.fn()}
+        isSearching
+        onBack={vi.fn()}
+        onSearch={vi.fn()}
+        translations={SEARCH_T}
+      />,
+    );
+    const footer = footerOf(container)!;
+    for (const button of buttonsIn(footer)) expect(button).toBeDisabled();
+    // …and the step renders no dismissal of its own to be disabled with them.
+    expect(buttonsIn(footer).map((b) => b.textContent ?? '').filter((l) => DISMISSAL.test(l))).toEqual([]);
+  });
+
+  it('Back does not fire while the step is pending', async () => {
+    const onBack = vi.fn();
+    render(
+      <ConfigureSearchStep
+        config={{ limit: 10, useSemanticScoring: true }}
+        onConfigChange={vi.fn()}
+        isSearching
+        onBack={onBack}
+        onSearch={vi.fn()}
+        translations={SEARCH_T}
+      />,
+    );
+    await userEvent.click(screen.getByText(/Back/));
+    expect(onBack).not.toHaveBeenCalled();
+  });
+});
+
+describe('Back is lossless (A3)', () => {
+  it('the step reflects the wizard-owned draft, so remounting restores it', () => {
+    // The regression this replaces: `useState` inside the step meant stepping
+    // back unmounted it and every choice reverted to the default.
+    const config = { limit: 20, useSemanticScoring: false };
+    const { unmount } = render(
+      <ConfigureSearchStep
+        config={config} onConfigChange={vi.fn()} onBack={vi.fn()} onSearch={vi.fn()}
+        translations={SEARCH_T}
+      />,
+    );
+    expect((screen.getByLabelText('Max Results') as HTMLSelectElement).value).toBe('20');
+    unmount();
+
+    // Same draft, fresh mount — what "Back then forward" does.
+    render(
+      <ConfigureSearchStep
+        config={config} onConfigChange={vi.fn()} onBack={vi.fn()} onSearch={vi.fn()}
+        translations={SEARCH_T}
+      />,
+    );
+    expect((screen.getByLabelText('Max Results') as HTMLSelectElement).value).toBe('20');
+    expect((screen.getByLabelText(/Semantic Scoring/) as HTMLInputElement).checked).toBe(false);
+  });
+});

package/src/components/modals/modals.css

@@ -111,11 +111,6 @@
   background-color: var(--semiont-bg-tertiary);
 }
 
-[data-theme="dark"] .semiont-modal__close:hover {
-  color: var(--semiont-text-primary);
-  background-color: var(--semiont-bg-tertiary);
-}
-
 .semiont-modal__close-icon {
   width: 1.25rem;
   height: 1.25rem;
@@ -256,6 +251,22 @@
   gap: 0.5rem;
 }
 
+/*
+ * The wizard footer (WIZARD-NAVIGATION D2). Retreat sits at the leading edge and
+ * advance at the trailing one, and neither stretches — `--flex` on all three
+ * buttons is what made "Cancel", "Back" and "Search" read as three peers.
+ * `margin-inline-end: auto` rather than `space-between` so a footer with only
+ * one child still lands on the correct side.
+ */
+.semiont-modal__actions--wizard {
+  justify-content: flex-end;
+  padding-top: 0.5rem;
+}
+
+.semiont-wizard-footer__back {
+  margin-inline-end: auto;
+}
+
 /* Chip Styles */
 .semiont-chip {
   padding: 0.25rem 0.75rem;
@@ -352,12 +363,6 @@
   cursor: not-allowed;
 }
 
-[data-theme="dark"] .semiont-button--disabled,
-[data-theme="dark"] .semiont-button[data-disabled="true"] {
-  background-color: var(--semiont-bg-tertiary);
-  color: var(--semiont-text-tertiary);
-}
-
 /* Keyboard Shortcuts Styles */
 .semiont-shortcuts {
   display: flex;
@@ -544,10 +549,6 @@
   margin: 0;
 }
 
-[data-theme="dark"] .semiont-jsonld-view__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-jsonld-view__back-button,
 .semiont-jsonld-view__copy-button {
   padding: 0.5rem 1rem;
@@ -572,12 +573,6 @@
   border-color: var(--semiont-border-primary);
 }
 
-[data-theme="dark"] .semiont-jsonld-view__back-button:hover,
-[data-theme="dark"] .semiont-jsonld-view__copy-button:hover {
-  background-color: var(--semiont-bg-secondary);
-  border-color: var(--semiont-border-secondary);
-}
-
 .semiont-jsonld-view__editor {
   flex: 1;
   overflow: auto;
@@ -585,10 +580,6 @@
   background-color: var(--semiont-bg-primary);
 }
 
-[data-theme="dark"] .semiont-jsonld-view__editor {
-  background-color: var(--semiont-bg-primary);
-}
-
 /* Ensure CodeMirror takes full height */
 .semiont-jsonld-view__editor .cm-editor {
   height: 100%;
@@ -620,10 +611,6 @@
   margin: 0;
 }
 
-[data-theme="dark"] .semiont-popup-header__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-popup-header__subtitle {
   font-size: 0.875rem;
   font-weight: normal;
@@ -631,10 +618,6 @@
   margin-left: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-popup-header__subtitle {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-popup-header__close-button {
   padding: 0.25rem;
   border-radius: 0.25rem;
@@ -657,15 +640,6 @@
   outline-offset: 2px;
 }
 
-[data-theme="dark"] .semiont-popup-header__close-button {
-  color: var(--semiont-text-secondary);
-}
-
-[data-theme="dark"] .semiont-popup-header__close-button:hover {
-  background-color: var(--semiont-bg-tertiary);
-  color: var(--semiont-text-primary);
-}
-
 [data-theme="dark"] .semiont-popup-header__close-button:focus-visible {
   outline-color: var(--semiont-color-primary-400);
 }