@semiont/react-ui 0.5.26 → 0.5.28

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

@@ -0,0 +1,344 @@
+/**
+ * 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 { ConfigureGatherStep } from '../ConfigureGatherStep';
+import { GatherContextStep } from '../GatherContextStep';
+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();
+  });
+
+  it('a disabled primary is not clickable, but Back stays live', async () => {
+    // `disabled` is the action's PRECONDITION loading (review step waiting on
+    // gather) — distinct from `pending`, which is the action itself running and
+    // rightly freezes retreat too. While a precondition loads, retreat must work.
+    const onBack = vi.fn();
+    const onAdvance = vi.fn();
+    render(
+      <WizardFooter
+        backLabel="Back"
+        onBack={onBack}
+        primary={{ label: 'Next', type: 'button', onClick: onAdvance, disabled: true }}
+      />,
+    );
+    await userEvent.click(screen.getByText(/Next/));
+    expect(onAdvance).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByText(/Back/));
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────
+// 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…',
+  searchFailed: 'Search failed',
+};
+
+const GEN_T = {
+  resourceTitle: 'Title', resourceTitlePlaceholder: '', saveLocation: 'Save location', 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',
+  graphPaneTitle: 'In the graph', graphEmpty: 'No links yet.', resourceLinkLabel: 'Resource link',
+};
+
+const GATHER_T = {
+  intro: 'Choose what to include.', includeContent: 'Content', includeSummary: 'Summary',
+  depth: 'Depth', maxResources: 'Max', gather: 'Gather',
+};
+
+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
+        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([]);
+  });
+
+  it('ConfigureGatherStep — first step of the resource-generate flow: advance only (GFR A5)', () => {
+    const { container } = render(
+      <ConfigureGatherStep onGather={vi.fn()} translations={GATHER_T} />,
+    );
+    const labels = buttonsIn(footerOf(container)!).map((b) => b.textContent ?? '');
+    expect(labels).toHaveLength(1); // nowhere to go back to, and dismissal is the corner's job
+    expect(labels.filter((l) => DISMISSAL.test(l))).toEqual([]);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────
+// The THIRD footer species: the resolution CHOOSER. The one deliberate
+// exception to the WizardFooter grammar — a three-way fork the
+// one-retreat-plus-one-advance component cannot express. Its grammar is
+// its own, and this pin is what keeps it a species instead of drift.
+// ─────────────────────────────────────────────────────────────────────
+describe('the resolution chooser (GatherContextStep) — the named exception', () => {
+  const ANNOTATE = {
+    userHint: '',
+    onUserHintChange: vi.fn(),
+    onBind: vi.fn(),
+    onGenerate: vi.fn(),
+    onCompose: vi.fn(),
+    translations: {
+      search: 'Search', generate: 'Generate', compose: 'Compose',
+      resolutionStrategyLabel: 'Strategy', userHintLabel: 'Hint',
+      userHintEffect: 'steers Search and Generate', userHintPlaceholder: '',
+    },
+  };
+  const DISPLAY_T = {
+    loadingContext: 'Loading…', failedContext: 'Failed', ...CONTEXT_T,
+    corpusPaneTitle: 'In the corpus', corpusEmpty: 'Nothing similar.',
+    excludedReceipt: '{{types}} excluded', machineRead: 'OCR', score: 'Score',
+  };
+
+  const chooserButtons = (container: HTMLElement) =>
+    Array.from(container.querySelectorAll('.semiont-gather__actions button'));
+
+  it('three equal-width peers, one of them quiet, none of them dismissal', () => {
+    const { container } = render(
+      <GatherContextStep
+        context={CONTEXT} contextLoading={false} contextError={null}
+        annotate={ANNOTATE} translations={DISPLAY_T}
+      />,
+    );
+    const buttons = chooserButtons(container);
+    expect(buttons).toHaveLength(3);
+    // Equal width is HONEST here — these are actual peers. This is the same
+    // `--flex` the shared footer bans for making retreat read as advance's peer.
+    for (const b of buttons) expect(b.className).toContain('semiont-button--flex');
+    // The AI paths are primary; the manual path's demotion to secondary is the
+    // recorded convention, not drift.
+    const secondary = buttons.filter((b) => b.className.includes('semiont-button--secondary'));
+    expect(secondary).toHaveLength(1);
+    expect(secondary[0]!.textContent).toContain('Compose');
+    // Dismissal stays in the corner, as on every footer.
+    expect(buttons.map((b) => b.textContent ?? '').filter((l) => DISMISSAL.test(l))).toEqual([]);
+  });
+
+  it('ellipses mark step-vs-act: the step-leading choices carry one, the acting one does not', () => {
+    // The "…" is component-owned markup, not translated copy: Search and
+    // Generate lead to another step; Compose acts immediately (navigates away).
+    const { container } = render(
+      <GatherContextStep
+        context={CONTEXT} contextLoading={false} contextError={null}
+        annotate={ANNOTATE} translations={DISPLAY_T}
+      />,
+    );
+    const labels = chooserButtons(container).map((b) => (b.textContent ?? '').trim());
+    expect(labels.filter((l) => l.endsWith('…'))).toHaveLength(2);
+    expect(labels.find((l) => l.includes('Compose'))!.endsWith('…')).toBe(false);
+  });
+
+  it('every choice waits for context', () => {
+    const { container } = render(
+      <GatherContextStep
+        context={CONTEXT} contextLoading contextError={null}
+        annotate={ANNOTATE} translations={DISPLAY_T}
+      />,
+    );
+    for (const b of chooserButtons(container)) expect(b).toBeDisabled();
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────
+// 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);
 }

package/src/components/navigation/NavigationTabs.css

@@ -36,10 +36,6 @@
   align-items: center;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-button {
-  color: inherit;
-}
-
 .semiont-nav-section__header-button:hover {
   opacity: 0.8;
 }
@@ -68,10 +64,6 @@
   text-align: left;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-text {
-  color: inherit;
-}
-
 .semiont-nav-section__header-icon {
   display: flex;
   align-items: center;
@@ -99,14 +91,6 @@
   outline-offset: 2px;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-icon {
-  color: var(--semiont-text-secondary);
-}
-
-[data-theme="dark"] .semiont-nav-section__header-icon:hover {
-  background: var(--semiont-bg-tertiary);
-}
-
 [data-theme="dark"] .semiont-nav-section__header-icon:focus-visible {
   outline-color: var(--semiont-color-primary-400);
 }
@@ -361,10 +345,6 @@
   outline-color: var(--semiont-color-primary-400);
 }
 
-[data-theme="dark"] .semiont-resource-tab__link:visited {
-  color: inherit !important;
-}
-
 /* Resource tab icon (emoji) */
 .semiont-resource-tab__icon {
   flex-shrink: 0;

package/src/components/pdf-annotation/PdfAnnotationCanvas.css

@@ -101,9 +101,16 @@
   scrollbar-width: none; /* standard; Firefox + recent Chromium */
 }
 
-/* WebKit/Safari, which has no `scrollbar-width` support to rely on. */
+/*
+ * WebKit/Safari, which has no `scrollbar-width` support to rely on.
+ *
+ * This hides a SCROLLBAR, not content: `scrollbar-width: none` above already
+ * does the same for every other engine, the rail still scrolls by wheel and
+ * drag, and each page is a focusable button — so tabbing through the rail
+ * scrolls it, which is the keyboard path the rule is protecting.
+ */
 .semiont-pdf-annotation-canvas__strip::-webkit-scrollbar {
-  display: none;
+  display: none; /* stylelint-disable-line semiont/accessibility */
 }
 
 /*
@@ -160,6 +167,18 @@
   font-weight: var(--semiont-font-semibold);
 }
 
+/*
+ * Palette tokens are one fixed hue in both themes, so this marker needs a real
+ * variant — the accent steps lighter against a dark surface (the treatment
+ * `.semiont-checkbox:checked` uses), and the number flips to dark type, which
+ * at this size reads far better on that lighter blue than white does.
+ */
+[data-theme="dark"] .semiont-pdf-annotation-canvas__strip-page[aria-current="page"] {
+  border-color: var(--semiont-color-primary-400);
+  background: var(--semiont-color-primary-400);
+  color: var(--semiont-color-neutral-900);
+}
+
 .semiont-pdf-annotation-canvas__strip-page:focus-visible {
   outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 1px;

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -353,7 +353,7 @@ function PdfPageView({
         });
 
         if (hit) {
-          session?.client.browse.click(hit.annId, hit.annotation.motivation, hitRect);
+          session?.client.browse.click(hit.annId, hitRect);
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -515,7 +515,7 @@ function PdfPageView({
                       cursor: 'pointer',
                       opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                     }}
-                    onClick={(e) => session?.client.browse.click(r.annId, r.annotation.motivation, e.currentTarget.getBoundingClientRect())}
+                    onClick={(e) => session?.client.browse.click(r.annId, e.currentTarget.getBoundingClientRect())}
                     onMouseEnter={() => handleMouseEnter(r.annId)}
                     onMouseLeave={handleMouseLeave}
                   />
@@ -685,7 +685,7 @@ export function PdfAnnotationCanvas({
 
     const uri = resourceUri;
     const outcome = session.client.browse.resourceAnchoredText(toResourceId(uri)).then(
-      (served) => (served && !('declined' in served) ? served : null),
+      (served) => (served && served.kind === 'extracted' ? served : null),
       () => {
         if (resourceAnchoredRef.current?.uri === uri) resourceAnchoredRef.current = null;
         return null;
@@ -861,6 +861,39 @@ export function PdfAnnotationCanvas({
 
   const stripRef = useRef<HTMLDivElement>(null);
 
+  // The strip's CSS scrollport ceiling is 100vh — right when the nearest
+  // scroller is the window, a lie inside an inner-scrolled panel: the sticky
+  // strip then extends below the panel's clip, and `nearest` (below) considers
+  // a tick in that hidden band already in view, so the active page vanished
+  // whenever it crossed the strip's bottom (never the top, whose edges
+  // coincide). Size the scrollport to the scroller that actually clips it;
+  // with no such scroller the CSS ceiling stands.
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (pageLayout !== 'scroll' || !strip) return;
+    let scroller: HTMLElement | null = strip.parentElement;
+    while (scroller) {
+      const overflowY = getComputedStyle(scroller).overflowY;
+      if (overflowY === 'auto' || overflowY === 'scroll') break;
+      scroller = scroller.parentElement;
+    }
+    if (!scroller) return;
+    const clip = scroller;
+    const size = () => { strip.style.maxHeight = `${clip.clientHeight}px`; };
+    size();
+    let observer: ResizeObserver | null = null;
+    try {
+      observer = new ResizeObserver(size);
+      observer.observe(clip);
+    } catch {
+      window.addEventListener('resize', size);
+    }
+    return () => {
+      if (observer) observer.disconnect();
+      else window.removeEventListener('resize', size);
+    };
+  }, [pageLayout, numPages, pageShape]);
+
   useEffect(() => {
     // `nearest` so following the reader never yanks the strip around; it
     // scrolls only when the current rectangle would otherwise leave view.