@semiont/react-ui 0.5.26 → 0.5.28

package/src/components/modals/SearchResultsStep.tsx

@@ -1,124 +1,99 @@
 'use client';
+import { WizardFooter } from './WizardFooter';
 
-import type { GatheredContext, ResourceDescriptor } from '@semiont/core';
-import { ContextSummary } from './ContextSummary';
-import type { ContextSummaryTranslations } from './ContextSummary';
+import type { ResourceDescriptor } from '@semiont/core';
 
 export type ScoredResult = ResourceDescriptor & {
   score?: number;
   matchReason?: string;
 };
 
+/**
+ * Pure RESULTS (GEP D10, amended): ranked rows with scores and Link buttons.
+ * The evidence display is the HOST's job — the wizard stacks the full
+ * display-only GatherContextStep (with the collapsed strategy band) above
+ * this step, the same grammar as the configure steps.
+ */
 export interface SearchResultsStepProps {
   results: ScoredResult[];
-  context: GatheredContext;
   onLink: (resourceId: string) => void;
   onBack: () => void;
-  onCancel: () => void;
   translations: {
     noResults: string;
     link: string;
     back: string;
-    cancel: string;
     score: string;
-  } & ContextSummaryTranslations;
+  };
 }
 
 export function SearchResultsStep({
   results,
-  context,
   onLink,
   onBack,
-  onCancel,
   translations: t,
 }: SearchResultsStepProps) {
   return (
     <>
-      {/* Two-pane layout: context left, results right */}
-      <div className="semiont-search-results__two-pane">
-        {/* Left: Gathered Context */}
-        <div className="semiont-search-results__context-pane">
-          <ContextSummary context={context} translations={t} />
-        </div>
-
-        {/* Right: Results List */}
-        <div className="semiont-search-results__results-pane">
-          {results.length === 0 ? (
-            <div className="semiont-modal__empty-state" style={{ textAlign: 'center', padding: '2rem 0' }}>
-              {t.noResults}
-            </div>
-          ) : (
-            results.map((result) => {
-              const id = result['@id'];
-              return (
-                <div
-                  key={id}
-                  style={{
-                    padding: '0.75rem',
-                    borderBottom: '1px solid var(--semiont-border-primary)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: '0.75rem',
-                  }}
-                >
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ fontWeight: 500, color: 'var(--semiont-text-primary)' }}>
-                      {result.name}
+      <div className="semiont-search-results">
+        {results.length === 0 ? (
+          <div className="semiont-modal__empty-state" style={{ textAlign: 'center', padding: '2rem 0' }}>
+            {t.noResults}
+          </div>
+        ) : (
+          results.map((result) => {
+            const id = result['@id'];
+            return (
+              <div
+                key={id}
+                style={{
+                  padding: '0.75rem',
+                  borderBottom: '1px solid var(--semiont-border-primary)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '0.75rem',
+                }}
+              >
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontWeight: 500, color: 'var(--semiont-text-primary)' }}>
+                    {result.name}
+                  </div>
+                  {result.description && (
+                    <div style={{
+                      fontSize: 'var(--semiont-text-sm)',
+                      color: 'var(--semiont-text-secondary)',
+                      marginTop: '0.25rem',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}>
+                      {result.description}
                     </div>
-                    {result.description && (
-                      <div style={{
-                        fontSize: 'var(--semiont-text-sm)',
-                        color: 'var(--semiont-text-secondary)',
-                        marginTop: '0.25rem',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                      }}>
-                        {result.description}
-                      </div>
+                  )}
+                  <div style={{ fontSize: 'var(--semiont-text-xs)', color: 'var(--semiont-text-tertiary)', marginTop: '0.25rem', display: 'flex', gap: '0.5rem' }}>
+                    {result.score !== undefined && (
+                      <span>{t.score}: {result.score}</span>
+                    )}
+                    {result.matchReason && (
+                      <span>{result.matchReason}</span>
                     )}
-                    <div style={{ fontSize: 'var(--semiont-text-xs)', color: 'var(--semiont-text-tertiary)', marginTop: '0.25rem', display: 'flex', gap: '0.5rem' }}>
-                      {result.score !== undefined && (
-                        <span>{t.score}: {result.score}</span>
-                      )}
-                      {result.matchReason && (
-                        <span>{result.matchReason}</span>
-                      )}
-                    </div>
                   </div>
-                  <button
-                    type="button"
-                    onClick={() => onLink(id)}
-                    className="semiont-button--primary"
-                    style={{ flexShrink: 0 }}
-                  >
-                    🔗 {t.link}
-                  </button>
                 </div>
-              );
-            })
-          )}
-        </div>
+                <button
+                  type="button"
+                  onClick={() => onLink(id)}
+                  className="semiont-button--primary"
+                  style={{ flexShrink: 0 }}
+                >
+                  🔗 {t.link}
+                </button>
+              </div>
+            );
+          })
+        )}
       </div>
 
-      {/* Action Buttons */}
-      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
-        <button
-          type="button"
-          onClick={onCancel}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ✕ {t.cancel}
-        </button>
-        <button
-          type="button"
-          onClick={onBack}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ◀ {t.back}
-        </button>
-      </div>
+      <WizardFooter backLabel={t.back} onBack={onBack} />
     </>
   );
 }

package/src/components/modals/WizardFooter.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+/**
+ * The one wizard footer (WIZARD-NAVIGATION D7).
+ *
+ * Four steps used to hand-build this markup, which is how four different footers
+ * happened: three carried a `✕ Cancel` that duplicated the corner control, one had no
+ * footer at all, and every button stretched to equal width so "leave" read as a peer of
+ * "do the thing".
+ *
+ * The grammar, settled in D1/D2:
+ *   • Dismissal is NOT here. The corner ✕, Esc and the backdrop are the way out, and
+ *     they are the same on every step including the one with no footer.
+ *   • Retreat is chrome: quiet, left, no emoji.
+ *   • Advance is the decision: filled, right, one verb.
+ */
+
+export interface WizardFooterPrimary {
+  label: string;
+  /** Shown while `pending`; falls back to `label`. */
+  pendingLabel?: string;
+  pending?: boolean;
+  /**
+   * The action's PRECONDITION is not met yet (e.g. the review step waiting on
+   * gather). Unlike `pending` — the action itself running — this disables only
+   * the primary: retreat must stay live while a precondition loads.
+   */
+  disabled?: boolean;
+  type: 'submit' | 'button';
+  onClick?: () => void;
+}
+
+export interface WizardFooterProps {
+  /** Omit both to render no retreat — correct on the first step. */
+  backLabel?: string;
+  onBack?: () => void;
+  /** Omit on steps whose action lives elsewhere (search results links per row). */
+  primary?: WizardFooterPrimary;
+}
+
+export function WizardFooter({ backLabel, onBack, primary }: WizardFooterProps) {
+  const pending = primary?.pending ?? false;
+
+  return (
+    <div className="semiont-modal__actions semiont-modal__actions--wizard">
+      {onBack && backLabel && (
+        <button
+          type="button"
+          onClick={onBack}
+          className="semiont-button--secondary semiont-wizard-footer__back"
+          disabled={pending}
+        >
+          ◀ {backLabel}
+        </button>
+      )}
+      {primary && (
+        <button
+          type={primary.type}
+          {...(primary.onClick ? { onClick: primary.onClick } : {})}
+          className="semiont-button--primary"
+          disabled={pending || (primary.disabled ?? false)}
+          data-pending={pending ? 'true' : 'false'}
+        >
+          {pending ? (primary.pendingLabel ?? primary.label) : primary.label}
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,152 @@
+/**
+ * COMPOSE-IN-MODAL P1 — the compose strategy's form, as a pure step.
+ *
+ * The from-reference slice of the compose page, lifted: name, save location,
+ * entity types (read-only tags when the reference fixed them, picker
+ * otherwise), language, and the editor. Deliberately NONE of the page's
+ * upload/format/encoding machinery — the fences reference mode already
+ * proved are here as absence pins. The draft is CONTROLLED by the host
+ * (WIZARD-NAVIGATION D3: stepping Back must not discard typed work), and
+ * the evidence display is the host's job (plan A3: no context redux here).
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ComposeStep, type ComposeDraft } from '../ComposeStep';
+
+// Mock CodeMirrorRenderer to avoid CodeMirror dependencies (same mock the
+// compose page's own tests use).
+vi.mock('../../CodeMirrorRenderer', () => ({
+  CodeMirrorRenderer: ({ content, onChange, editable }: any) => (
+    <textarea
+      data-testid="code-editor"
+      value={content}
+      disabled={!editable}
+      onChange={(e) => onChange?.(e.target.value)}
+    />
+  ),
+}));
+
+const T = {
+  resourceTitle: 'New resource title',
+  resourceTitlePlaceholder: 'Title…',
+  saveLocation: 'Save location',
+  entityTypes: 'Entity types',
+  language: 'Language',
+  contentLabel: 'Content',
+  back: 'Back',
+  createAndLink: 'Create & Link',
+  creatingAndLinking: 'Creating…',
+};
+
+const DRAFT: ComposeDraft = {
+  name: 'Black Hawk',
+  storagePath: 'people/black-hawk.md',
+  content: 'Sauk leader.',
+  entityTypes: [],
+  language: 'en',
+};
+
+function renderStep(over: Partial<React.ComponentProps<typeof ComposeStep>> = {}) {
+  const onDraftChange = vi.fn();
+  const onBack = vi.fn();
+  const onCompose = vi.fn<(p: unknown) => Promise<void>>().mockResolvedValue(undefined);
+  const utils = render(
+    <ComposeStep
+      draft={DRAFT}
+      onDraftChange={onDraftChange}
+      referenceEntityTypes={['Person']}
+      entityTypeOptions={['Person', 'Topic', 'Location']}
+      showLineNumbers={false}
+      hoverDelayMs={300}
+      onBack={onBack}
+      onCompose={onCompose}
+      translations={T}
+      {...over}
+    />,
+  );
+  return { ...utils, onDraftChange, onBack, onCompose };
+}
+
+describe('ComposeStep — the from-reference slice, and nothing else', () => {
+  it('renders the draft: name, save location, content, language', () => {
+    renderStep();
+    expect(screen.getByLabelText(T.resourceTitle)).toHaveValue('Black Hawk');
+    expect(screen.getByLabelText(T.saveLocation)).toHaveValue('people/black-hawk.md');
+    expect(screen.getByTestId('code-editor')).toHaveValue('Sauk leader.');
+    expect(screen.getByLabelText(T.language)).toBeInTheDocument();
+  });
+
+  it('edits flow through onDraftChange — the host owns the draft (D3)', () => {
+    const { onDraftChange } = renderStep();
+    fireEvent.change(screen.getByLabelText(T.resourceTitle), { target: { value: 'Black Hawk (Sauk)' } });
+    expect(onDraftChange).toHaveBeenCalledWith({ name: 'Black Hawk (Sauk)' });
+    fireEvent.change(screen.getByTestId('code-editor'), { target: { value: 'A Sauk leader.' } });
+    expect(onDraftChange).toHaveBeenCalledWith({ content: 'A Sauk leader.' });
+  });
+
+  it('reference-fixed entity types render as read-only tags, not a picker (D6)', () => {
+    renderStep(); // referenceEntityTypes: ['Person']
+    expect(screen.getByText('Person')).toBeInTheDocument();
+    // No toggling: the types were chosen when the reference was created.
+    expect(screen.queryByRole('button', { name: /Person/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Topic/ })).not.toBeInTheDocument();
+  });
+
+  it('an empty reference set falls back to the picker over the owner-supplied options (D6)', () => {
+    const { onDraftChange } = renderStep({ referenceEntityTypes: [] });
+    const topic = screen.getByRole('button', { name: /Topic/ });
+    fireEvent.click(topic);
+    expect(onDraftChange).toHaveBeenCalledWith({ entityTypes: ['Topic'] });
+  });
+
+  it('carries NONE of the page-only machinery: no upload, no format, no encoding', () => {
+    const { container } = renderStep();
+    expect(container.querySelector('.semiont-form__upload-dropzone')).toBeNull();
+    expect(container.querySelector('.semiont-form__content-source-toggle')).toBeNull();
+    expect(container.querySelector('#format-select')).toBeNull();
+    expect(container.querySelector('#charset-select')).toBeNull();
+  });
+
+  it('renders no context of its own — the evidence is host-stacked (A3)', () => {
+    const { container } = renderStep();
+    expect(container.querySelector('.semiont-gather-pane')).toBeNull();
+    expect(container.querySelector('.semiont-gather__outer')).toBeNull();
+  });
+
+  it('submit emits the full params with the file:// prefix applied at the seam', async () => {
+    const { onCompose } = renderStep({ referenceEntityTypes: ['Person'] });
+    fireEvent.click(screen.getByRole('button', { name: T.createAndLink }));
+    await waitFor(() => expect(onCompose).toHaveBeenCalledTimes(1));
+    expect(onCompose).toHaveBeenCalledWith({
+      name: 'Black Hawk',
+      storagePath: 'file://people/black-hawk.md',
+      content: 'Sauk leader.',
+      entityTypes: ['Person'],
+      language: 'en',
+    });
+  });
+
+  it('the footer is a wizard footer: Back + Create, pending while in flight, re-enabled on rejection (A4)', async () => {
+    let reject!: (e: Error) => void;
+    const onCompose = vi.fn(() => new Promise<void>((_, r) => { reject = r; }));
+    const { container } = renderStep({ onCompose });
+
+    expect(container.querySelector('.semiont-modal__actions--wizard')).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: T.createAndLink }));
+    expect(await screen.findByRole('button', { name: T.creatingAndLinking })).toBeDisabled();
+
+    reject(new Error('boom'));
+    expect(await screen.findByRole('button', { name: T.createAndLink })).toBeEnabled();
+  });
+
+  it('Back is the only retreat and dismissal never lives in the footer (A4)', () => {
+    const { container, onBack } = renderStep();
+    const footerButtons = Array.from(
+      container.querySelectorAll('.semiont-modal__actions button'),
+    ).map((b) => b.textContent ?? '');
+    expect(footerButtons.filter((l) => /cancel|✕/i.test(l))).toEqual([]);
+    fireEvent.click(screen.getByRole('button', { name: `◀ ${T.back}` }));
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -16,13 +16,12 @@ const t = {
   includeSummary: 'Include summary',
   depth: 'Depth',
   maxResources: 'Max resources',
-  cancel: 'Cancel',
   gather: 'Gather',
 };
 
 describe('ConfigureGatherStep', () => {
   it('renders the intro and the default option values', () => {
-    render(<ConfigureGatherStep onGather={vi.fn()} onCancel={vi.fn()} translations={t} />);
+    render(<ConfigureGatherStep onGather={vi.fn()} translations={t} />);
     expect(screen.getByText('Choose what to include.')).toBeInTheDocument();
     expect(screen.getByLabelText('Include content')).toBeChecked();
     expect(screen.getByLabelText('Include summary')).toBeChecked();
@@ -32,14 +31,14 @@ describe('ConfigureGatherStep', () => {
 
   it('emits the default config on submit', () => {
     const onGather = vi.fn();
-    render(<ConfigureGatherStep onGather={onGather} onCancel={vi.fn()} translations={t} />);
+    render(<ConfigureGatherStep onGather={onGather} translations={t} />);
     fireEvent.click(screen.getByRole('button', { name: /Gather/ }));
     expect(onGather).toHaveBeenCalledWith({ includeContent: true, includeSummary: true, depth: 2, maxResources: 10 });
   });
 
   it('reflects edits in the emitted config', () => {
     const onGather = vi.fn();
-    render(<ConfigureGatherStep onGather={onGather} onCancel={vi.fn()} translations={t} />);
+    render(<ConfigureGatherStep onGather={onGather} translations={t} />);
     fireEvent.click(screen.getByLabelText('Include content')); // uncheck
     fireEvent.click(screen.getByLabelText('Include summary')); // uncheck
     fireEvent.change(screen.getByLabelText('Depth'), { target: { value: '4' } });
@@ -48,32 +47,21 @@ describe('ConfigureGatherStep', () => {
     expect(onGather).toHaveBeenCalledWith({ includeContent: false, includeSummary: false, depth: 4, maxResources: 25 });
   });
 
-  it('honors the defaults prop', () => {
-    const onGather = vi.fn();
-    render(
-      <ConfigureGatherStep
-        defaults={{ includeSummary: false, depth: 1, maxResources: 5 }}
-        onGather={onGather}
-        onCancel={vi.fn()}
-        translations={t}
-      />,
-    );
-    expect(screen.getByLabelText('Include summary')).not.toBeChecked();
-    expect(screen.getByLabelText('Depth')).toHaveValue(1);
-    fireEvent.click(screen.getByRole('button', { name: /Gather/ }));
-    expect(onGather).toHaveBeenCalledWith({ includeContent: true, includeSummary: false, depth: 1, maxResources: 5 });
-  });
-
-  it('calls onCancel from the cancel button', () => {
-    const onCancel = vi.fn();
-    render(<ConfigureGatherStep onGather={vi.fn()} onCancel={onCancel} translations={t} />);
-    fireEvent.click(screen.getByRole('button', { name: /Cancel/ }));
-    expect(onCancel).toHaveBeenCalledTimes(1);
+  it('the footer is the wizard footer: advance only, no dismissal, no flex (GFR A5)', () => {
+    // Dismissal lives on the modal's corner ✕/Esc/backdrop, never in a step
+    // footer (WIZARD-NAVIGATION D1); this is the first step, so no retreat either.
+    const { container } = render(<ConfigureGatherStep onGather={vi.fn()} translations={t} />);
+    const footer = container.querySelector('.semiont-modal__actions--wizard');
+    expect(footer).not.toBeNull();
+    const buttons = Array.from(footer!.querySelectorAll('button'));
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]!.textContent).not.toMatch(/cancel|✕/i);
+    expect(buttons[0]!.className).not.toContain('semiont-button--flex');
   });
 
   it('renders the children slot (exclusion picker)', () => {
     render(
-      <ConfigureGatherStep onGather={vi.fn()} onCancel={vi.fn()} translations={t}>
+      <ConfigureGatherStep onGather={vi.fn()} translations={t}>
         <div>EXCLUDE-SLOT</div>
       </ConfigureGatherStep>,
     );