@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.9

package/src/components/common/research/index.ts

@@ -1,7 +1,9 @@
 export {
   EvidenceDossier,
+  dossierMarkdown,
   type EvidenceDossierProps,
   type EvidenceFinding,
   type EvidenceSource,
   type EvidenceStrength,
+  type EvidenceTermNote,
 } from './EvidenceDossier.js'

package/src/components/editor/EditorLinkPromptDialog.tsx

@@ -19,7 +19,7 @@ export function EditorLinkPromptDialog({
   }
 
   return (
-    <Modal open={open} onClose={onCancel} title="Insert link" size="md">
+    <Modal open={open} onClose={onCancel} title="Insert link" size="xs">
       <StyledBody>
         <StyledLinkInput
           autoFocus

package/src/components/print-design/PrintDesignPanel.test.tsx

@@ -228,13 +228,13 @@ describe('PrintDesignPanel', () => {
 
     expect(container.textContent).toContain('Sample page snapshot')
     expect(container.textContent).toContain('Visual preflight sample')
-    expect(container.textContent).toContain('No export inspection has run yet.')
-    expect(container.textContent).toContain(
-      'The next beta export will render with Paged.js and capture a real page snapshot.',
-    )
     expect(
       container.querySelector('[aria-label="Sample PDF page snapshot"]'),
     ).not.toBeNull()
+    // No run has finished — the rail (final run report) stays hidden.
+    expect(
+      container.querySelector('[aria-label="Live design readout"]'),
+    ).toBeNull()
   })
 
   it('shows a provided live beta vision snapshot instead of the sample page', () => {
@@ -261,7 +261,6 @@ describe('PrintDesignPanel', () => {
     expect(
       container.querySelector('[aria-label="Sample PDF page snapshot"]'),
     ).toBeNull()
-    expect(container.textContent).toContain('Rendered page 2 inspected.')
   })
 
   it('shows multiple beta vision evidence snapshots with annotations', () => {
@@ -434,29 +433,38 @@ describe('PrintDesignPanel', () => {
       />,
     )
 
-    click(buttonByText(container, 'Beta vision typesetting'))
-
+    // ONE merged Typesetter view: no Design/vision tabs, controls at left,
+    // vision canvas as the well — all visible at once.
     expect(
       container.querySelector('[data-panel-variant="workspace"]'),
     ).not.toBeNull()
+    expect(
+      Array.from(container.querySelectorAll('button')).some(button =>
+        button.textContent?.includes('Beta vision typesetting'),
+      ),
+    ).toBe(false)
     expect(container.textContent).toContain('Design - PDF Typesetter')
-    expect(container.textContent).toContain('Clean · Justified · 34rem')
+    expect(container.textContent).toContain('Clean · Justified · 38rem')
     expect(container.textContent).toContain('In flight')
     expect(container.textContent).toContain('Pass 2 · checking Fix 1')
     expect(container.textContent).toContain('Beta settings')
     expect(container.textContent).toContain('Use beta vision typesetting')
     expect(container.textContent).toContain('Max fixes per issue')
     expect(container.textContent).toContain('Baseline page 2')
-    expect(container.textContent).toContain('Live readout')
-    expect(container.textContent).toContain('FIX')
-    expect(container.textContent).toContain('ISSUE')
-    expect(container.textContent).toContain('PDF')
+    expect(container.textContent).toContain('Presets')
+    // The right rail carries the run summary / Activity ledger.
+    const readout = container.querySelector(
+      '[aria-label="Live design readout"]',
+    )
+    expect(readout).not.toBeNull()
+    expect(readout?.textContent).toContain('Activity')
+    expect(readout?.textContent).toContain('Issue 1: stranded heading')
     expect(document.head.textContent).not.toMatch(
       /grid-template-columns:\s*minmax\(190px,\s*240px\)\s*minmax\(0,\s*1fr\)/,
     )
   })
 
-  it('keeps the workspace readout visible when switching away from vision', () => {
+  it('shows the run ledger in the controls-column Activity section', () => {
     const { container } = render(
       <PrintDesignPanel
         variant="workspace"
@@ -491,18 +499,12 @@ describe('PrintDesignPanel', () => {
       />,
     )
 
-    click(buttonByText(container, 'Beta vision typesetting'))
-
+    // Evidence in the well and the ledger in the left column Activity —
+    // simultaneously, no tab switching.
     expect(container.textContent).toContain('Baseline page 2')
-
-    click(buttonByText(container, 'Design'))
-
-    const readout = container.querySelector(
-      '[aria-label="Live design readout"]',
-    )
-    expect(readout?.textContent).toContain('Issue 1: stranded heading')
-    expect(readout?.textContent).toContain('baseline.pdf')
-    expect(container.textContent).not.toContain('Baseline page 2')
+    expect(container.textContent).toContain('Issue 1: stranded heading')
+    expect(container.textContent).toContain('baseline.pdf')
+    expect(container.textContent).toContain('Activity')
   })
 
   it('groups workspace readout entries by visual pass', () => {
@@ -521,21 +523,18 @@ describe('PrintDesignPanel', () => {
       />,
     )
 
-    click(buttonByText(container, 'Beta vision typesetting'))
-
-    const readout = container.querySelector(
-      '[aria-label="Live design readout"]',
-    )
+    // Merged view: the grouped ledger renders in the controls-column
+    // Activity section — no tabs, no readout aside.
     expect(
-      readout?.querySelector('[aria-label="Pass 2 event group"]'),
+      container.querySelector('[aria-label="Pass 2 event group"]'),
     ).not.toBeNull()
     expect(
-      readout?.querySelector('[aria-label="Pass 1 event group"]'),
+      container.querySelector('[aria-label="Pass 1 event group"]'),
     ).not.toBeNull()
-    expect(readout?.textContent).toContain('CHECK')
-    expect(readout?.textContent).toContain('FIX')
-    expect(readout?.textContent).toContain('ISSUE')
-    expect(readout?.textContent).toContain('baseline.pdf')
+    expect(container.textContent).toContain('CHECK')
+    expect(container.textContent).toContain('FIX')
+    expect(container.textContent).toContain('ISSUE')
+    expect(container.textContent).toContain('baseline.pdf')
   })
 
   it('opens passed fix comparisons from evidence only when available', () => {
@@ -618,7 +617,6 @@ describe('PrintDesignPanel', () => {
 
     click(buttonByText(container, 'Beta vision typesetting'))
 
-    expect(container.textContent).toContain('FIX')
     expect(container.textContent).toContain('View fix comparison')
     expect(
       Array.from(container.querySelectorAll('button')).filter(button =>
@@ -791,8 +789,11 @@ describe('PrintDesignPanel', () => {
     )
     changeInput(textInputs[0]!, '32rem')
     changeInput(textInputs[1]!, '1.6')
+    // Font roles, align, flourishes (heading rule, drop cap), page
+    // furniture (columns, running header, footer + slot) and Cover.
+    // (Contents only appears once Cover is on.)
     const selects = Array.from(container.querySelectorAll('select'))
-    expect(selects).toHaveLength(4)
+    expect(selects).toHaveLength(15)
     changeInput(selects[0]!, 'sans')
     changeInput(selects[1]!, 'serif')
     changeInput(selects[2]!, 'sans')
@@ -1272,7 +1273,10 @@ describe('PrintDesignPanel', () => {
     expect(onRenderPdf).toHaveBeenCalledOnce()
   })
 
-  it('routes persistent export through beta vision when enabled', () => {
+  it('never routes Export PDF through the vision loop, even when enabled', () => {
+    // Export is always a plain export; the loop has its own Run button in
+    // the vision tab (previously Export silently ran the whole inspection
+    // loop and there was no way to just export).
     const onRenderPdf = vi.fn()
     const onVisionExport = vi.fn()
     const { container } = render(
@@ -1295,8 +1299,8 @@ describe('PrintDesignPanel', () => {
 
     click(buttonByText(container, 'Export PDF'))
 
-    expect(onVisionExport).toHaveBeenCalledOnce()
-    expect(onRenderPdf).not.toHaveBeenCalled()
+    expect(onRenderPdf).toHaveBeenCalledOnce()
+    expect(onVisionExport).not.toHaveBeenCalled()
   })
 
   it('keeps beta vision report entries in the persistent live readout', () => {
@@ -1445,4 +1449,390 @@ describe('PrintDesignPanel', () => {
     expect(container.textContent).toContain('#111111')
     expect(container.textContent).toContain('#335f8f')
   })
+
+  it('inherits the host identity instead of baking in a colour (issue spec)', () => {
+    render(<PrintDesignPanel variant="workspace" />)
+    const css = document.head.textContent ?? ''
+    // Export primary + markers resolve through the host's --app-acc/--app-block
+    // (whitespace-tolerant: styled-components may collapse the declarations).
+    expect(css).toMatch(/--print-design-hue:\s*var\(\s*--app-acc/)
+    expect(css).toMatch(/--app-block/)
+    // Selected preset carries the host-hue edge/underline.
+    expect(css).toMatch(/inset 0 -2px 0 0 var\(--print-design-hue\)/)
+  })
+
+  it('presents Ink/Paper/Accent as swatch chips with hex, not full-width bars', () => {
+    const { container } = render(
+      <PrintDesignPanel variant="workspace" modes={['preset', 'manual']} />,
+    )
+    const pickers = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input[type="color"]'),
+    )
+    expect(pickers).toHaveLength(3)
+    // Each picker is embedded in a 28px chip, and the hex value is visible.
+    for (const picker of pickers) {
+      expect(picker.closest('span')).not.toBeNull()
+    }
+    expect(container.textContent).toMatch(/#[0-9a-fA-F]{6}/)
+  })
+
+  it('previews the host document by default with a Sample opt-out', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        previewDocument={{
+          title: 'Emergent Workflows',
+          byline: 'A. Hyde',
+          paragraphs: ['A first paragraph from the actual manuscript body.'],
+        }}
+      />,
+    )
+    expect(container.textContent).toContain('Emergent Workflows')
+    expect(container.textContent).toContain(
+      'A first paragraph from the actual manuscript body.',
+    )
+    expect(container.textContent).not.toContain('The Shape of a Page')
+
+    // The Sample toggle lives in the well header (the first checkbox in the
+    // merged view is the beta vision toggle).
+    const toggle = container.querySelector<HTMLInputElement>(
+      'label[data-disabled] input[type="checkbox"]',
+    )
+    expect(toggle?.disabled).toBe(false)
+    act(() => {
+      toggle?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+    expect(container.textContent).toContain('The Shape of a Page')
+  })
+
+  it('forces the sample when the host supplies no preview content', () => {
+    const { container } = render(<PrintDesignPanel variant="workspace" />)
+    expect(container.textContent).toContain('The Shape of a Page')
+    const toggle = container.querySelector<HTMLInputElement>(
+      'label[data-disabled] input[type="checkbox"]',
+    )
+    expect(toggle?.disabled).toBe(true)
+  })
+
+  it('shows the vision page snapshot in the preview pane in vision mode', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          snapshotUrl: 'file:///tmp/page-1.png',
+          snapshotAlt: 'Rendered page 1',
+          onToggle: vi.fn(),
+        }}
+      />,
+    )
+    const snapshot = container.querySelector(
+      'img[alt="Rendered page 1"]',
+    )
+    expect(snapshot?.getAttribute('src')).toBe('file:///tmp/page-1.png')
+    // The theme facsimile yields to the real snapshot in vision mode.
+    expect(container.textContent).not.toContain('The Shape of a Page')
+  })
+
+  it('separates Run (vision loop) from Export PDF (plain export)', () => {
+    const onRun = vi.fn()
+    const onPlainExport = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        actions={[
+          {
+            id: 'export-pdf',
+            label: 'Export PDF',
+            variant: 'primary',
+            onClick: onPlainExport,
+          },
+        ]}
+        visionTypesetting={{
+          enabled: true,
+          onToggle: vi.fn(),
+          onExport: onRun,
+        }}
+      />,
+    )
+
+    // Merged view: Run and Export sit side by side; Export stays a plain
+    // export and Run starts the loop.
+    click(buttonByText(container, 'Export PDF'))
+    expect(onPlainExport).toHaveBeenCalledOnce()
+    expect(onRun).not.toHaveBeenCalled()
+
+    click(buttonByText(container, 'Run typesetting'))
+    expect(onRun).toHaveBeenCalledOnce()
+  })
+
+  it('swaps Run for Stop while the vision loop is running', () => {
+    const onRun = vi.fn()
+    const onStop = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          onToggle: vi.fn(),
+          onExport: onRun,
+          onStop,
+          progress: { state: 'running', label: 'Page 2 of 9 · inspecting' },
+        }}
+      />,
+    )
+    // While running, the Run slot becomes a Stop control — always enabled.
+    expect(
+      Array.from(container.querySelectorAll('button')).some(button =>
+        button.textContent?.includes('Run typesetting'),
+      ),
+    ).toBe(false)
+    const stop = buttonByText(container, 'Stop')
+    expect(stop.hasAttribute('disabled')).toBe(false)
+    click(stop)
+    expect(onStop).toHaveBeenCalledOnce()
+    expect(onRun).not.toHaveBeenCalled()
+  })
+
+  it('shows open/fixed issue chips beside the latest page snapshot', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          onToggle: vi.fn(),
+          snapshotUrl: 'file:///tmp/page-3.png',
+          snapshotAlt: 'Page 3 of 9',
+          snapshotIssues: [
+            { id: 'stranded-heading', label: 'stranded heading', state: 'fixed' },
+            { id: 'sparse-sample-page', label: 'sparse sample page', state: 'open' },
+          ],
+        }}
+      />,
+    )
+    const list = container.querySelector('[aria-label="Latest page issues"]')
+    expect(list).not.toBeNull()
+    expect(list?.textContent).toContain('fixed')
+    expect(list?.textContent).toContain('stranded heading')
+    expect(list?.textContent).toContain('issue')
+    expect(list?.textContent).toContain('sparse sample page')
+  })
+
+  it('accumulates page snapshots as a scrollable strip with per-card chips', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          onToggle: vi.fn(),
+          snapshotHistory: [
+            {
+              id: 'p1-check',
+              url: 'file:///tmp/page-1.png',
+              label: 'Page 1',
+              issues: [],
+            },
+            {
+              id: 'p2-check',
+              url: 'file:///tmp/page-2.png',
+              label: 'Page 2',
+              issues: [
+                { id: 'stranded-heading', label: 'stranded heading', state: 'open' },
+              ],
+            },
+            {
+              id: 'p2-fix1',
+              url: 'file:///tmp/page-2-fix.png',
+              label: 'Page 2 · fix 1',
+              issues: [
+                { id: 'stranded-heading', label: 'stranded heading', state: 'fixed' },
+              ],
+            },
+          ],
+        }}
+      />,
+    )
+    const strip = container.querySelector('[aria-label="Page snapshot history"]')
+    expect(strip).not.toBeNull()
+    const images = Array.from(strip?.querySelectorAll('img') ?? [])
+    expect(images.map(img => img.getAttribute('src'))).toEqual([
+      'file:///tmp/page-1.png',
+      'file:///tmp/page-2.png',
+      'file:///tmp/page-2-fix.png',
+    ])
+    // Clean page → pass chip; the fix card flips its chip to fixed.
+    expect(strip?.textContent).toContain('no layout issues')
+    expect(strip?.textContent).toContain('Page 2 · fix 1')
+    expect(strip?.textContent).toContain('fixed')
+  })
+
+  it('zooms a page snapshot in-window instead of opening a viewer', () => {
+    const onOpen = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          onToggle: vi.fn(),
+          snapshotHistory: [
+            {
+              id: 'p1-check',
+              url: 'file:///tmp/page-1.png',
+              label: 'Page 1',
+              issues: [],
+              onOpen,
+            },
+          ],
+        }}
+      />,
+    )
+    const card = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Page 1"]',
+    )
+    expect(card).not.toBeNull()
+    if (!card) throw new Error('page card missing')
+    click(card)
+
+    const zoom = container.querySelector('[aria-label="Page snapshot zoom"]')
+    expect(zoom).not.toBeNull()
+    expect(zoom?.querySelector('img')?.getAttribute('src')).toBe(
+      'file:///tmp/page-1.png',
+    )
+    // No external viewer involved.
+    expect(onOpen).not.toHaveBeenCalled()
+
+    act(() => {
+      zoom?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+    expect(
+      container.querySelector('[aria-label="Page snapshot zoom"]'),
+    ).toBeNull()
+  })
+
+  it('applies flourish controls to the theme', () => {
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel variant="workspace" onThemeChange={onThemeChange} />,
+    )
+    const headingRule = Array.from(
+      container.querySelectorAll<HTMLSelectElement>('select'),
+    ).find(select =>
+      Array.from(select.options).some(
+        option => option.value === 'underline',
+      ),
+    )
+    expect(headingRule).not.toBeNull()
+    if (!headingRule) throw new Error('heading rule select missing')
+    changeInput(headingRule, 'underline')
+    const theme = onThemeChange.mock.calls.at(-1)?.[0]
+    expect(theme?.setting?.headingRule).toBe('underline')
+  })
+
+  it('flips to live preview and marks run pages stale on style edits', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        onThemeChange={vi.fn()}
+        visionTypesetting={{
+          enabled: true,
+          onToggle: vi.fn(),
+          snapshotHistory: [
+            {
+              id: 'p1-check',
+              url: 'file:///tmp/page-1.png',
+              label: 'Page 1',
+              issues: [],
+            },
+          ],
+        }}
+      />,
+    )
+    // With run output present, the pages view shows by default.
+    expect(
+      container.querySelector('[aria-label="Page snapshot history"]'),
+    ).not.toBeNull()
+
+    // Change a style control → live preview returns, pages marked stale.
+    const headingRule = Array.from(
+      container.querySelectorAll<HTMLSelectElement>('select'),
+    ).find(select =>
+      Array.from(select.options).some(option => option.value === 'underline'),
+    )
+    if (!headingRule) throw new Error('heading rule select missing')
+    changeInput(headingRule, 'underline')
+
+    expect(
+      container.querySelector('[aria-label="Page snapshot history"]'),
+    ).toBeNull()
+    expect(container.textContent).toContain('Run pages · stale')
+    expect(container.textContent).toContain('The Shape of a Page')
+
+    // The user can flip back to the (stale) pages manually.
+    click(buttonByText(container, 'Run pages · stale'))
+    expect(
+      container.querySelector('[aria-label="Page snapshot history"]'),
+    ).not.toBeNull()
+  })
+
+  it('shows the real Paged.js live preview in the well when supplied', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        livePreview={{
+          html: '<html><body><div class="pagedjs_page">Page one</div></body></html>',
+          pageCount: 3,
+        }}
+      />,
+    )
+    const frame = container.querySelector<HTMLIFrameElement>(
+      'iframe[title="Live paged preview"]',
+    )
+    expect(frame).not.toBeNull()
+    expect(frame?.getAttribute('srcdoc')).toContain('pagedjs_page')
+    // The grey well + paper shadow ride along inside the preview document.
+    expect(frame?.getAttribute('srcdoc')).toContain('data-live-preview-chrome')
+    expect(container.textContent).toContain('Live preview · 3 page(s)')
+    // The facsimile (and its Sample toggle) yields to the real preview.
+    expect(container.textContent).not.toContain('The Shape of a Page')
+  })
+
+  it('selects presets from a dropdown in the merged workspace view', () => {
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel variant="workspace" onThemeChange={onThemeChange} />,
+    )
+    const presetSelect = container.querySelector<HTMLSelectElement>(
+      'select[aria-label="Print theme presets"]',
+    )
+    expect(presetSelect).not.toBeNull()
+    if (!presetSelect) throw new Error('preset select missing')
+    const journal = Array.from(presetSelect.options).find(option =>
+      option.textContent?.includes('Journal Article'),
+    )
+    expect(journal).toBeDefined()
+    changeInput(presetSelect, journal!.value)
+    expect(onThemeChange).toHaveBeenCalled()
+  })
+
+  it('lets the host set max fixes per issue in the vision tab', () => {
+    const onMaxFixesPerIssueChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          onToggle: vi.fn(),
+          maxFixesPerIssue: 3,
+          onMaxFixesPerIssueChange,
+        }}
+      />,
+    )
+    const input = container.querySelector<HTMLInputElement>(
+      'input[type="number"]',
+    )
+    expect(input?.value).toBe('3')
+    if (!input) throw new Error('max fixes input missing')
+    changeInput(input, '5')
+    expect(onMaxFixesPerIssueChange).toHaveBeenCalledWith(5)
+  })
 })