@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

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

@@ -0,0 +1,1446 @@
+// @vitest-environment happy-dom
+import { act } from 'react'
+import type React from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  DEFAULT_PURE_RENDER_THEME,
+  PURE_RENDER_THEME_PRESETS,
+  parsePureRenderThemeJson,
+  reconcilePrintStyleProfiles,
+  type PrintStyleProfile,
+} from '../../bridge/pureRender/index.js'
+import { PrintDesignPanel, PrintDesignPopover } from './PrintDesignPanel.js'
+;(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true
+
+function render(ui: React.ReactElement): {
+  container: HTMLDivElement
+  root: Root
+} {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => {
+    root.render(ui)
+  })
+  return { container, root }
+}
+
+function buttonByText(container: Element, text: string): HTMLButtonElement {
+  const button = Array.from(container.querySelectorAll('button')).find(
+    candidate => candidate.textContent?.trim() === text,
+  )
+  expect(button).toBeDefined()
+  return button as HTMLButtonElement
+}
+
+function click(button: HTMLButtonElement): void {
+  act(() => {
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  })
+}
+
+function fillTextarea(
+  textarea: HTMLTextAreaElement | null,
+  value: string,
+): void {
+  expect(textarea).not.toBeNull()
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLTextAreaElement.prototype,
+    'value',
+  )?.set
+  act(() => {
+    setter?.call(textarea, value)
+    textarea?.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
+function changeInput(
+  input: HTMLInputElement | HTMLSelectElement,
+  value: string,
+): void {
+  const setter = Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(input),
+    'value',
+  )?.set
+  act(() => {
+    setter?.call(input, value)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+  vi.clearAllMocks()
+  delete (globalThis as { createImageBitmap?: unknown }).createImageBitmap
+})
+
+describe('PrintDesignPanel', () => {
+  it('closes the popover when pressing outside it', () => {
+    const onClose = vi.fn()
+    const { container } = render(
+      <div>
+        <PrintDesignPopover open onClose={onClose}>
+          <button type="button">Inside</button>
+        </PrintDesignPopover>
+        <button type="button">Outside</button>
+      </div>,
+    )
+
+    click(buttonByText(container, 'Inside'))
+    expect(onClose).not.toHaveBeenCalled()
+
+    buttonByText(container, 'Outside').dispatchEvent(
+      new Event('pointerdown', { bubbles: true }),
+    )
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('uses the workspace panel as the modal chrome without a legacy title bar', () => {
+    const onClose = vi.fn()
+    const { container } = render(
+      <PrintDesignPopover open title={null} onClose={onClose}>
+        <PrintDesignPanel
+          variant="workspace"
+          actions={[
+            {
+              id: 'export-pdf',
+              label: 'Export PDF',
+              onClick: vi.fn(),
+            },
+          ]}
+        />
+      </PrintDesignPopover>,
+    )
+
+    expect(container.textContent).toContain('Design - PDF Typesetter')
+    expect(container.textContent).toContain('Export PDF')
+    expect(container.querySelector('[aria-label="Print design"]')).not.toBeNull()
+    expect(
+      container.querySelector('[aria-label="Close print design"]'),
+    ).not.toBeNull()
+    expect(container.textContent?.match(/Design - PDF Typesetter/g)).toHaveLength(
+      1,
+    )
+    expect(document.head.textContent).toMatch(/width:\s*100vw/)
+    expect(document.head.textContent).toMatch(/height:\s*100vh/)
+    expect(document.head.textContent).toMatch(/border-radius:\s*0/)
+  })
+
+  it('renders quiet source labels, compact presets, and secondary status copy', () => {
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel variant="popover" onThemeChange={onThemeChange} />,
+    )
+
+    expect(container.textContent).toContain('Design')
+    expect(container.textContent).toContain('Beta vision typesetting')
+    expect(container.textContent).toContain('Tune')
+    expect(container.textContent).toContain('Image')
+    expect(container.textContent).toContain('Describe')
+    expect(container.textContent).not.toContain('JSON')
+    expect(container.textContent).not.toContain('Concerns')
+    expect(container.textContent).toContain('Clean')
+    expect(container.textContent).toContain('Journal Article')
+    expect(container.textContent).toContain('Quiet Book')
+    expect(container.textContent).toContain('Draft Writer')
+    expect(container.textContent).toContain('Aa')
+    expect(container.textContent).toContain('Preset/manual only')
+    expect(
+      container.querySelector('[aria-label="Active theme swatches"]'),
+    ).toBeNull()
+    expect(container.querySelector('[data-mode-count="2"]')).not.toBeNull()
+    expect(
+      container
+        .querySelector('section[aria-label="Print design"]')
+        ?.getAttribute('data-density'),
+    ).toBe('compact')
+
+    const selected = buttonByText(container, 'CleanAa')
+    expect(selected.getAttribute('aria-pressed')).toBe('true')
+
+    click(buttonByText(container, 'Journal ArticleAa'))
+
+    expect(onThemeChange).toHaveBeenCalledWith(
+      PURE_RENDER_THEME_PRESETS.find(preset => preset.id === 'journal-article')
+        ?.theme,
+    )
+    expect(container.textContent).toContain('Ready')
+    expect(container.textContent).toContain('Journal Article preset selected')
+    expect(container.querySelector('details')).toBeNull()
+  })
+
+  it('shows beta vision typesetting controls and report', () => {
+    const onToggle = vi.fn()
+    const onExport = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        visionTypesetting={{
+          enabled: true,
+          status: 'Enabled with test vision.',
+          report: [
+            ['pass', 'Reference pages inspected.'],
+            ['apply', 'Safe print tokens compiled.'],
+          ],
+          onToggle,
+          onExport,
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    expect(container.textContent).toContain('Use beta vision typesetting')
+    expect(container.textContent).toContain('Enabled with test vision.')
+    expect(container.textContent).toContain('Reference pages inspected.')
+
+    const checkbox = container.querySelector<HTMLInputElement>(
+      'input[type="checkbox"]',
+    )
+    expect(checkbox?.checked).toBe(true)
+    act(() => {
+      checkbox?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+    expect(onToggle).toHaveBeenCalledWith(false)
+
+    click(buttonByText(container, 'Export PDF'))
+    expect(onExport).toHaveBeenCalledOnce()
+  })
+
+  it('shows a sample page inspection when beta vision has not run yet', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: false,
+          status: 'Ready for beta inspection.',
+          onToggle: vi.fn(),
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    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()
+  })
+
+  it('shows a provided live beta vision snapshot instead of the sample page', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: true,
+          snapshotUrl: 'file:///tmp/pure-render-page-2.png',
+          snapshotAlt: 'Rendered PDF page 2',
+          report: [['pass', 'Rendered page 2 inspected.']],
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    const image = container.querySelector<HTMLImageElement>(
+      'img[alt="Rendered PDF page 2"]',
+    )
+    expect(image?.getAttribute('src')).toBe(
+      'file:///tmp/pure-render-page-2.png',
+    )
+    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', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: true,
+          evidence: [
+            {
+              id: 'baseline',
+              label: 'Baseline page 2',
+              imageUrl: 'preview:///tmp/baseline.png',
+              imageAlt: 'Baseline problem page',
+              note: 'A section heading is separated from its figure.',
+              tone: 'warning',
+            },
+            {
+              id: 'compact-figure',
+              label: 'Compact figure candidate page 2',
+              imageUrl: 'preview:///tmp/candidate.png',
+              imageAlt: 'Candidate problem page',
+              note: 'Candidate reduced the pre-figure blank.',
+              tone: 'candidate',
+            },
+          ],
+          report: [['warn', 'A section heading appears separated.']],
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    expect(container.textContent).toContain('Baseline page 2')
+    expect(container.textContent).toContain(
+      'A section heading is separated from its figure.',
+    )
+    expect(container.textContent).toContain('Compact figure candidate page 2')
+    expect(container.textContent).toContain(
+      'Candidate reduced the pre-figure blank.',
+    )
+    expect(container.textContent).not.toContain('Visual preflight sample')
+    expect(
+      container.querySelector('img[alt="Baseline problem page"]'),
+    ).not.toBeNull()
+    expect(
+      container.querySelector('img[alt="Candidate problem page"]'),
+    ).not.toBeNull()
+  })
+
+  it('shows multi-page beta vision evidence in a carousel', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: true,
+          maxFixesPerIssue: 3,
+          onMaxFixesPerIssueChange: vi.fn(),
+          evidence: [
+            {
+              id: 'baseline',
+              label: 'Baseline issue',
+              note: 'Figure moved to the next page.',
+              tone: 'warning',
+              snapshots: [
+                {
+                  page: 2,
+                  pageCount: 5,
+                  role: 'problem',
+                  imageUrl: 'preview:///tmp/page-2.png',
+                  imageAlt: 'Problem page',
+                },
+                {
+                  page: 3,
+                  pageCount: 5,
+                  role: 'figure',
+                  imageUrl: 'preview:///tmp/page-3.png',
+                  imageAlt: 'Figure page',
+                },
+              ],
+            },
+          ],
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    expect(container.textContent).toContain('Baseline issue')
+    expect(container.textContent).toContain('Figure moved to the next page.')
+    expect(container.textContent).toContain(
+      'Baseline issue · problem · page 2 of 5',
+    )
+    expect(container.querySelector('img[alt="Problem page"]')).not.toBeNull()
+
+    click(
+      container.querySelector(
+        'button[aria-label="Next page for Baseline issue"]',
+      ) as HTMLButtonElement,
+    )
+
+    expect(container.textContent).toContain(
+      'Baseline issue · figure · page 3 of 5',
+    )
+    expect(container.querySelector('img[alt="Figure page"]')).not.toBeNull()
+  })
+
+  it('shows high-level beta progress above evidence', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: true,
+          progress: {
+            state: 'running',
+            label: 'Pass 1 · Fix 1 rendering compact figure candidate',
+          },
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    expect(container.textContent).toContain('In flight')
+    expect(container.textContent).toContain(
+      'Pass 1 · Fix 1 rendering compact figure candidate',
+    )
+  })
+
+  it('uses a workspace layout with persistent readout and vision evidence canvas', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          progress: {
+            state: 'running',
+            label: 'Pass 2 · checking Fix 1',
+          },
+          report: [
+            ['pdf', 'Baseline PDF: /tmp/baseline.pdf'],
+            ['issue', 'Issue 1: stranded heading on page 2.'],
+            ['fix', 'Fix 1 rendering compact figure candidate.'],
+          ],
+          evidence: [
+            {
+              id: 'issue-1',
+              label: 'Baseline page 2',
+              note: 'A section heading is separated from the figure.',
+              tone: 'warning',
+              snapshots: [
+                {
+                  page: 2,
+                  pageCount: 5,
+                  role: 'problem',
+                  imageUrl: 'preview:///tmp/page-2.png',
+                  imageAlt: 'Problem page',
+                },
+              ],
+            },
+          ],
+        }}
+        actions={[
+          {
+            id: 'export-pdf',
+            label: 'Export PDF',
+            onClick: vi.fn(),
+          },
+        ]}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    expect(
+      container.querySelector('[data-panel-variant="workspace"]'),
+    ).not.toBeNull()
+    expect(container.textContent).toContain('Design - PDF Typesetter')
+    expect(container.textContent).toContain('Clean · Justified · 34rem')
+    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(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', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          progress: {
+            state: 'running',
+            label: 'Pass 1 · inspecting baseline',
+          },
+          report: [
+            ['pdf', 'PDF (Jun 18, 2026, 10:50 AM): /tmp/baseline.pdf'],
+            ['issue', 'Issue 1: stranded heading on page 2.'],
+          ],
+          evidence: [
+            {
+              id: 'issue-1',
+              label: 'Baseline page 2',
+              note: 'A section heading is separated from the figure.',
+              tone: 'warning',
+              snapshots: [
+                {
+                  page: 2,
+                  pageCount: 5,
+                  role: 'problem',
+                  imageUrl: 'preview:///tmp/page-2.png',
+                  imageAlt: 'Problem page',
+                },
+              ],
+            },
+          ],
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    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')
+  })
+
+  it('groups workspace readout entries by visual pass', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="workspace"
+        visionTypesetting={{
+          enabled: true,
+          report: [
+            ['pdf', 'PDF (Jun 18, 2026, 10:50 AM): /tmp/baseline.pdf'],
+            ['issue', 'Pass 1 · Issue 1: stranded heading on page 2.'],
+            ['fix', 'Pass 1 · Fix 1: compact figure candidate.'],
+            ['check', 'Pass 2 · checking downstream issue positions.'],
+          ],
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+
+    const readout = container.querySelector(
+      '[aria-label="Live design readout"]',
+    )
+    expect(
+      readout?.querySelector('[aria-label="Pass 2 event group"]'),
+    ).not.toBeNull()
+    expect(
+      readout?.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')
+  })
+
+  it('opens passed fix comparisons from evidence only when available', () => {
+    const write = vi.fn()
+    const close = vi.fn()
+    const open = vi.spyOn(window, 'open').mockReturnValue({
+      document: { write, close },
+    } as unknown as Window)
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: true,
+          report: [['fix', 'Fix 1 rendering compact figure candidate.']],
+          evidence: [
+            {
+              id: 'baseline',
+              label: 'Baseline issue',
+              note: 'Issue is still present.',
+              tone: 'warning',
+              snapshots: [
+                {
+                  page: 2,
+                  pageCount: 5,
+                  role: 'problem',
+                  imageUrl: 'preview:///tmp/baseline-page-2.png',
+                },
+              ],
+            },
+            {
+              id: 'fixed',
+              label: 'Fix 1',
+              note: 'Issue resolved.',
+              tone: 'pass',
+              snapshots: [
+                {
+                  page: 2,
+                  pageCount: 5,
+                  role: 'candidate',
+                  imageUrl: 'preview:///tmp/fix-page-2.png',
+                },
+              ],
+              comparison: {
+                title: 'Issue 1 · Fix 1 comparison',
+                issueLabel: 'Issue 1: stranded heading',
+                fixLabel: 'Fix 1: compact figure',
+                resultSummary: 'Resolved by compacting the figure.',
+                baseline: {
+                  label: 'Baseline issue',
+                  note: 'Issue is still present.',
+                  pdfPath: '/tmp/baseline.pdf',
+                  snapshots: [
+                    {
+                      page: 2,
+                      pageCount: 5,
+                      role: 'problem',
+                      imageUrl: 'preview:///tmp/baseline-page-2.png',
+                    },
+                  ],
+                },
+                fixed: {
+                  label: 'Fix 1',
+                  note: 'Issue resolved.',
+                  pdfPath: '/tmp/fixed.pdf',
+                  snapshots: [
+                    {
+                      page: 2,
+                      pageCount: 5,
+                      role: 'candidate',
+                      imageUrl: 'preview:///tmp/fix-page-2.png',
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        }}
+      />,
+    )
+
+    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 =>
+        button.textContent?.includes('View fix comparison'),
+      ),
+    ).toHaveLength(1)
+
+    click(buttonByText(container, 'View fix comparison'))
+
+    expect(open).toHaveBeenCalledWith('', '_blank')
+    expect(write).toHaveBeenCalledWith(
+      expect.stringContaining('Issue 1 · Fix 1 comparison'),
+    )
+    expect(write).toHaveBeenCalledWith(
+      expect.stringContaining('preview:///tmp/baseline-page-2.png'),
+    )
+    expect(write).toHaveBeenCalledWith(
+      expect.stringContaining('preview:///tmp/fix-page-2.png'),
+    )
+    expect(close).toHaveBeenCalledOnce()
+  })
+
+  it('reports max beta vision fixes per issue changes', () => {
+    const onMaxFixesPerIssueChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: true,
+          maxFixesPerIssue: 2,
+          onMaxFixesPerIssueChange,
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Beta vision typesetting'))
+    const input = Array.from(container.querySelectorAll('input')).find(
+      candidate => candidate.getAttribute('type') === 'number',
+    ) as HTMLInputElement
+    changeInput(input, '5')
+
+    expect(onMaxFixesPerIssueChange).toHaveBeenCalledWith(5)
+  })
+
+  it('ships parseable shared presets for manuscript, book, and writer', () => {
+    expect(PURE_RENDER_THEME_PRESETS.map(preset => preset.id)).toEqual([
+      'default-manuscript',
+      'journal-article',
+      'quiet-book',
+      'classic-essay',
+      'modern-report',
+      'scholarly-book',
+      'conference-paper',
+      'draft-writer',
+    ])
+
+    for (const preset of PURE_RENDER_THEME_PRESETS) {
+      expect(parsePureRenderThemeJson(JSON.stringify(preset.theme)).name).toBe(
+        preset.theme.name,
+      )
+    }
+  })
+
+  it('marks a persisted preset theme as selected after app reload', () => {
+    const reloadedPreset = PURE_RENDER_THEME_PRESETS.find(
+      preset => preset.id === 'quiet-book',
+    )
+    expect(reloadedPreset).toBeDefined()
+
+    const { container } = render(
+      <PrintDesignPanel value={reloadedPreset?.theme} />,
+    )
+
+    expect(
+      buttonByText(container, 'Quiet BookAa').getAttribute('aria-pressed'),
+    ).toBe('true')
+  })
+
+  it('updates tune controls to match the selected preset theme', () => {
+    const journalPreset = PURE_RENDER_THEME_PRESETS.find(
+      preset => preset.id === 'journal-article',
+    )
+    expect(journalPreset).toBeDefined()
+    const { container } = render(<PrintDesignPanel />)
+
+    click(buttonByText(container, 'Journal ArticleAa'))
+
+    const colorInputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input[type="color"]'),
+    )
+    expect(colorInputs[0]?.value.toLowerCase()).toBe(
+      journalPreset!.theme.color.ink.toLowerCase(),
+    )
+    expect(colorInputs[1]?.value.toLowerCase()).toBe(
+      (
+        journalPreset!.theme.color.paper ??
+        journalPreset!.theme.color.surface ??
+        '#ffffff'
+      ).toLowerCase(),
+    )
+    expect(colorInputs[2]?.value.toLowerCase()).toBe(
+      journalPreset!.theme.color.accent.toLowerCase(),
+    )
+
+    const textInputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input:not([type])'),
+    )
+    expect(textInputs[0]?.value).toBe(journalPreset!.theme.type.measure)
+    expect(textInputs[1]?.value).toBe(String(journalPreset!.theme.type.lead))
+  })
+
+  it('allows a compact density in sidebar placement for app panels', () => {
+    const { container } = render(<PrintDesignPanel density="compact" />)
+
+    expect(
+      container
+        .querySelector('section[aria-label="Print design"]')
+        ?.getAttribute('data-density'),
+    ).toBe('compact')
+  })
+
+  it('renders quiet busy labels for print actions', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        density="compact"
+        actions={[
+          {
+            id: 'render-pdf',
+            label: 'Export PDF',
+            busyLabel: 'Rendering…',
+            busy: true,
+            onClick: vi.fn(),
+          },
+        ]}
+      />,
+    )
+
+    expect(container.textContent).toContain('Rendering…')
+    expect(container.textContent).not.toContain('Rendering...')
+  })
+
+  it('can hide extraction modes for preset/manual-only app surfaces', () => {
+    const { container } = render(
+      <PrintDesignPanel modes={['preset', 'manual', 'json']} />,
+    )
+
+    expect(container.querySelector('[data-mode-count="3"]')).not.toBeNull()
+    expect(container.textContent).toContain('Preset')
+    expect(container.textContent).toContain('Tune')
+    expect(container.textContent).toContain('JSON')
+    expect(container.textContent).not.toContain('Image')
+    expect(container.textContent).not.toContain('Describe')
+  })
+
+  it('applies manual controls as theme tokens without CSS output', () => {
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel onThemeChange={onThemeChange} />,
+    )
+
+    const colorInputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input[type="color"]'),
+    )
+    expect(colorInputs).toHaveLength(3)
+    changeInput(colorInputs[0]!, '#222222')
+    changeInput(colorInputs[1]!, '#ffffff')
+    changeInput(colorInputs[2]!, '#5f7f6c')
+    const textInputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input:not([type])'),
+    )
+    changeInput(textInputs[0]!, '32rem')
+    changeInput(textInputs[1]!, '1.6')
+    const selects = Array.from(container.querySelectorAll('select'))
+    expect(selects).toHaveLength(4)
+    changeInput(selects[0]!, 'sans')
+    changeInput(selects[1]!, 'serif')
+    changeInput(selects[2]!, 'sans')
+    changeInput(selects[3]!, 'flush-left')
+
+    expect(onThemeChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'Manual Theme',
+        color: expect.objectContaining({
+          ink: '#222222',
+          paper: '#ffffff',
+          accent: '#5f7f6c',
+        }),
+        type: expect.objectContaining({
+          measure: '32rem',
+          lead: 1.6,
+          fonts: expect.objectContaining({
+            display: '"Source Sans 3", system-ui, sans-serif',
+            serif: '"Source Serif 4", Georgia, serif',
+            sans: '"Source Sans 3", system-ui, sans-serif',
+          }),
+        }),
+        setting: expect.objectContaining({
+          align: 'flush-left',
+          hyphenate: false,
+        }),
+        profile_rules: expect.objectContaining({
+          caption: expect.objectContaining({ label_style: 'small-caps' }),
+        }),
+      }),
+    )
+    expect(container.textContent).toContain(
+      'sans display, serif body, sans labels',
+    )
+    expect(container.textContent).toContain('manual controls emit theme tokens')
+  })
+
+  it('validates image type before extraction', () => {
+    const onProfileExtractRequest = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel onProfileExtractRequest={onProfileExtractRequest} />,
+    )
+
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')
+    expect(input).not.toBeNull()
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: [new File(['not image'], 'notes.txt', { type: 'text/plain' })],
+    })
+    act(() => {
+      input?.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    expect(container.textContent).toContain('Use PNG, JPEG, or WebP')
+    expect(
+      container.querySelector('[title="Use PNG, JPEG, or WebP"]'),
+    ).not.toBeNull()
+    click(buttonByText(container, 'Choose image'))
+    expect(onProfileExtractRequest).not.toHaveBeenCalled()
+  })
+
+  it('accepts supported image filenames when the browser omits MIME type', async () => {
+    const onProfileExtractRequest = vi.fn(
+      async (): Promise<PrintStyleProfile> => ({
+        schema_version: '1.0',
+        sources: [{ id: 'mime-empty' }],
+        exemplar_quality: {
+          usable: true,
+          reason: 'test profile',
+          confidence: 0.8,
+        },
+        observations: {},
+        rules: [{ rule: 'safe image extraction', confidence: 0.8 }],
+        derived: null,
+      }),
+    )
+    const { container } = render(
+      <PrintDesignPanel onProfileExtractRequest={onProfileExtractRequest} />,
+    )
+
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')
+    expect(input).not.toBeNull()
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: [new File(['image bytes'], 'reference.PNG', { type: '' })],
+    })
+    await act(async () => {
+      input?.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    expect(onProfileExtractRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        image: expect.objectContaining({ name: 'reference.PNG' }),
+        images: [expect.objectContaining({ name: 'reference.PNG' })],
+      }),
+    )
+    expect(container.textContent).toContain('Compiled')
+    expect(container.textContent).not.toContain('Apply')
+  })
+
+  it('validates image size before extraction', () => {
+    const onProfileExtractRequest = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel onProfileExtractRequest={onProfileExtractRequest} />,
+    )
+
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')
+    expect(input).not.toBeNull()
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: [
+        new File([new Uint8Array(8 * 1024 * 1024 + 1)], 'huge.png', {
+          type: 'image/png',
+        }),
+      ],
+    })
+    act(() => {
+      input?.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    expect(container.textContent).toContain('Image too large')
+    expect(container.querySelector('[title="Image too large"]')).not.toBeNull()
+    click(buttonByText(container, 'Choose image'))
+    expect(onProfileExtractRequest).not.toHaveBeenCalled()
+  })
+
+  it('keeps long reference image names constrained in compact image controls', async () => {
+    const { container } = render(
+      <PrintDesignPanel variant="popover" onProfileExtractRequest={vi.fn()} />,
+    )
+
+    const longName =
+      'comparative-manuscript-reference-spread-with-running-heads-tables-and-ornaments.png'
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: [new File(['fake'], longName, { type: 'image/png' })],
+    })
+    await act(async () => {
+      input?.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    const imageLabel = container.querySelector(`[title="${longName}"]`)
+    expect(imageLabel).not.toBeNull()
+    expect(imageLabel?.textContent).toContain(longName)
+    expect(buttonByText(container, 'Replace image')).toBeDefined()
+    expect(buttonByText(container, 'Replace image').textContent).not.toContain(
+      longName,
+    )
+  })
+
+  it('passes multiple reference images to extraction requests', async () => {
+    const onProfileExtractRequest = vi.fn(
+      async (): Promise<PrintStyleProfile> => ({
+        schema_version: '1.0',
+        sources: [{ id: 'multi-image' }],
+        exemplar_quality: {
+          usable: true,
+          reason: 'test profile',
+          confidence: 0.8,
+        },
+        observations: {},
+        rules: [{ rule: 'quiet print', confidence: 0.8 }],
+        derived: null,
+      }),
+    )
+    const { container } = render(
+      <PrintDesignPanel onProfileExtractRequest={onProfileExtractRequest} />,
+    )
+
+    const files = [
+      new File(['a'], 'spread-a.png', { type: 'image/png' }),
+      new File(['b'], 'spread-b.jpg', { type: 'image/jpeg' }),
+    ]
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: files,
+    })
+    await act(async () => {
+      input?.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    expect(container.textContent).toContain('2 images')
+
+    expect(onProfileExtractRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        mode: 'image',
+        image: files[0],
+        images: files,
+      }),
+    )
+  })
+
+  it('shows multi-image reference conflicts in extraction decisions', async () => {
+    const onThemeChange = vi.fn()
+    const onProfileExtractRequest = vi.fn(
+      async (): Promise<PrintStyleProfile> =>
+        reconcilePrintStyleProfiles([
+          {
+            schema_version: '1.0',
+            sources: [{ id: 'journal-page.png' }],
+            exemplar_quality: {
+              usable: true,
+              reason: 'usable',
+              confidence: 0.82,
+            },
+            observations: {
+              palette: [
+                {
+                  role: 'surface',
+                  approx_hex: '#ffffff',
+                  confidence: 0.96,
+                },
+                {
+                  role: 'ink',
+                  approx_hex: '#171717',
+                  confidence: 0.84,
+                },
+                {
+                  role: 'accent',
+                  approx_hex: '#9a1f2e',
+                  confidence: 0.82,
+                },
+              ],
+              type: [
+                {
+                  role: 'body',
+                  class: 'serif',
+                  serif_detail: 'bracketed',
+                  confidence: 0.86,
+                },
+              ],
+              text_setting: { alignment: 'justified', confidence: 0.82 },
+            },
+            rules: [{ rule: 'keep scholarly spacing', confidence: 0.8 }],
+            derived: null,
+          },
+          {
+            schema_version: '1.0',
+            sources: [{ id: 'book-opener.png' }],
+            exemplar_quality: {
+              usable: true,
+              reason: 'usable',
+              confidence: 0.8,
+            },
+            observations: {
+              palette: [
+                {
+                  role: 'surface',
+                  approx_hex: '#ffffff',
+                  confidence: 0.96,
+                },
+                {
+                  role: 'ink',
+                  approx_hex: '#171717',
+                  confidence: 0.84,
+                },
+                {
+                  role: 'accent',
+                  approx_hex: '#174f7a',
+                  confidence: 0.8,
+                },
+              ],
+              type: [{ role: 'body', class: 'sans', confidence: 0.74 }],
+              text_setting: { alignment: 'flush-left', confidence: 0.78 },
+            },
+            rules: [{ rule: 'keep book opener restrained', confidence: 0.72 }],
+            derived: null,
+          },
+        ]),
+    )
+    const { container } = render(
+      <PrintDesignPanel
+        onThemeChange={onThemeChange}
+        onProfileExtractRequest={onProfileExtractRequest}
+      />,
+    )
+
+    const files = [
+      new File(['a'], 'journal-page.png', { type: 'image/png' }),
+      new File(['b'], 'book-opener.png', { type: 'image/png' }),
+    ]
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: files,
+    })
+    await act(async () => {
+      input?.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    expect(container.textContent).toContain('Compiled')
+    expect(container.textContent).toContain(
+      'Reference conflict: accent color disagrees',
+    )
+    expect(container.textContent).toContain(
+      'Reference conflict: body font class disagrees',
+    )
+    expect(onThemeChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        enforced_rules: expect.not.arrayContaining([
+          expect.stringContaining('Reference conflict:'),
+        ]),
+      }),
+    )
+  })
+
+  it('reports extraction unavailable without blocking manual themes', () => {
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel onThemeChange={onThemeChange} />,
+    )
+
+    expect(container.textContent).toContain('Preset/manual only')
+    expect(buttonByText(container, 'Choose image').disabled).toBe(false)
+    expect(buttonByText(container, 'Extract from description').disabled).toBe(
+      true,
+    )
+
+    const colorInputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input[type="color"]'),
+    )
+    changeInput(colorInputs[0]!, '#222222')
+
+    expect(onThemeChange).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'Manual Theme' }),
+    )
+  })
+
+  it('explains provider image limits while keeping other design paths available', () => {
+    const onThemeChange = vi.fn()
+    const onProfileExtractRequest = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        onThemeChange={onThemeChange}
+        onProfileExtractRequest={onProfileExtractRequest}
+        extractionCapability={{
+          image: false,
+          description: true,
+          imageReason:
+            'Selected model cannot read images. Presets/manual still work.',
+        }}
+      />,
+    )
+
+    expect(container.textContent).toContain('Preset')
+    expect(buttonByText(container, 'Choose image').disabled).toBe(false)
+    expect(buttonByText(container, 'Extract from description').disabled).toBe(
+      false,
+    )
+
+    const colorInputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>('input[type="color"]'),
+    )
+    changeInput(colorInputs[0]!, '#222222')
+
+    expect(onThemeChange).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'Manual Theme' }),
+    )
+    expect(onProfileExtractRequest).not.toHaveBeenCalled()
+  })
+
+  it('samples image colors into manual tokens even when extraction is unavailable', async () => {
+    const onThemeChange = vi.fn()
+    const bitmap = { close: vi.fn() }
+    ;(globalThis as { createImageBitmap?: unknown }).createImageBitmap = vi.fn(
+      async () => bitmap,
+    )
+    const originalGetContext = HTMLCanvasElement.prototype.getContext
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(((
+      contextId: string,
+    ) => {
+      if (contextId !== '2d')
+        return originalGetContext.call(
+          document.createElement('canvas'),
+          contextId,
+        )
+      return {
+        drawImage: vi.fn(),
+        getImageData: vi.fn(() => {
+          const data = new Uint8ClampedArray(48)
+          data.set([16, 16, 16, 255], 0)
+          data.set([255, 255, 255, 255], 16)
+          data.set([120, 40, 180, 255], 32)
+          return { data }
+        }),
+      } as unknown as CanvasRenderingContext2D
+    }) as typeof HTMLCanvasElement.prototype.getContext)
+
+    const { container } = render(
+      <PrintDesignPanel
+        onThemeChange={onThemeChange}
+        onProfileExtractRequest={vi.fn()}
+        extractionCapability={{
+          image: false,
+          imageReason: 'Selected model cannot read images.',
+        }}
+      />,
+    )
+
+    const image = new File(['fake'], 'reference.png', { type: 'image/png' })
+    const input =
+      container.querySelector<HTMLInputElement>('input[type="file"]')
+    Object.defineProperty(input, 'files', {
+      configurable: true,
+      value: [image],
+    })
+    await act(async () => {
+      input?.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    expect(container.textContent).toContain('Selected model cannot read images')
+    expect(container.textContent).toContain(
+      'accent #7828b4 from local image colors',
+    )
+    expect(container.querySelector('details')).toBeNull()
+    expect(bitmap.close).toHaveBeenCalledOnce()
+
+    expect(onThemeChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        color: expect.objectContaining({
+          ink: '#101010',
+          paper: '#ffffff',
+          accent: '#7828b4',
+        }),
+      }),
+    )
+  })
+
+  it('keeps advanced JSON mode available without replacing the quiet preset surface', () => {
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        modes={['preset', 'json']}
+        value={DEFAULT_PURE_RENDER_THEME}
+        onThemeChange={onThemeChange}
+      />,
+    )
+
+    click(buttonByText(container, 'JSON'))
+
+    const textarea = container.querySelector('textarea')
+    expect(textarea?.getAttribute('placeholder')).toBe('Paste theme JSON')
+
+    fillTextarea(textarea, JSON.stringify(DEFAULT_PURE_RENDER_THEME))
+
+    click(buttonByText(container, 'Use JSON'))
+
+    expect(onThemeChange).toHaveBeenCalledWith(DEFAULT_PURE_RENDER_THEME)
+    expect(container.textContent).toContain('Applied')
+  })
+
+  it('renders shared print workflow actions from host apps', () => {
+    const onRenderPdf = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        actions={[
+          {
+            id: 'render-pdf',
+            label: 'Render PDF',
+            variant: 'primary',
+            onClick: onRenderPdf,
+          },
+        ]}
+      />,
+    )
+
+    click(buttonByText(container, 'Render PDF'))
+
+    expect(onRenderPdf).toHaveBeenCalledOnce()
+  })
+
+  it('routes persistent export through beta vision when enabled', () => {
+    const onRenderPdf = vi.fn()
+    const onVisionExport = vi.fn()
+    const { container } = render(
+      <PrintDesignPanel
+        actions={[
+          {
+            id: 'render-pdf',
+            label: 'Export PDF',
+            variant: 'primary',
+            onClick: onRenderPdf,
+          },
+        ]}
+        visionTypesetting={{
+          enabled: true,
+          status: 'Enabled',
+          onExport: onVisionExport,
+        }}
+      />,
+    )
+
+    click(buttonByText(container, 'Export PDF'))
+
+    expect(onVisionExport).toHaveBeenCalledOnce()
+    expect(onRenderPdf).not.toHaveBeenCalled()
+  })
+
+  it('keeps beta vision report entries in the persistent live readout', () => {
+    const { container } = render(
+      <PrintDesignPanel
+        variant="popover"
+        visionTypesetting={{
+          enabled: true,
+          status: 'Enabled',
+          report: [
+            ['status', 'Vision beta is enabled.'],
+            ['apply', 'Safe print tokens will be used.'],
+          ],
+          onToggle: vi.fn(),
+        }}
+      />,
+    )
+
+    expect(
+      buttonByText(container, 'Design').getAttribute('aria-selected'),
+    ).toBe('true')
+    const readout = container.querySelector(
+      '[aria-label="Live design readout"]',
+    )
+    expect(readout?.textContent).toContain('Vision beta is enabled.')
+    expect(readout?.textContent).toContain('Safe print tokens will be used.')
+    expect(readout?.querySelector('details')).toBeNull()
+  })
+
+  it('routes extraction through the compiler and shows decisions in the event stream', async () => {
+    const onThemeChange = vi.fn()
+    const onProfileExtractRequest = vi.fn(
+      async (): Promise<PrintStyleProfile> => {
+        return {
+          schema_version: '1.0',
+          sources: [{ id: 'description', note: 'test design description' }],
+          exemplar_quality: {
+            usable: true,
+            reason: 'test profile',
+            confidence: 0.9,
+          },
+          observations: {
+            palette: [
+              {
+                role: 'ink',
+                approx_hex: '#111111',
+                coverage: 'frequent',
+                where_seen: 'body text',
+                confidence: 0.9,
+              },
+              {
+                role: 'surface',
+                approx_hex: '#ffffff',
+                coverage: 'dominant',
+                where_seen: 'paper',
+                confidence: 0.9,
+              },
+              {
+                role: 'accent',
+                approx_hex: '#335f8f',
+                coverage: 'sparse',
+                where_seen: 'headings',
+                confidence: 0.8,
+              },
+            ],
+            type: [
+              {
+                role: 'display',
+                class: 'serif',
+                serif_detail: 'hairline',
+                confidence: 0.8,
+              },
+              {
+                role: 'body',
+                class: 'serif',
+                serif_detail: 'bracketed',
+                confidence: 0.8,
+              },
+              { role: 'caption', class: 'sans', confidence: 0.8 },
+            ],
+            type_pairing: { size_contrast: 'moderate', confidence: 0.8 },
+            text_setting: {
+              alignment: 'justified',
+              hyphenation: 'present',
+              measure_cpl: 62,
+              leading_feel: 'normal',
+              confidence: 0.8,
+            },
+            type_scale: {
+              body_pt: 10.8,
+              title_scale: 2.1,
+              section_scale: 1.28,
+              confidence: 0.82,
+            },
+            page_model: { columns: 1, confidence: 0.7 },
+            opener: {
+              spacing: 'generous',
+              ornament: 'rule',
+              confidence: 0.75,
+            },
+            ornaments: {
+              kind: 'fleuron',
+              weight: 'hairline',
+              placement: 'chapter opener',
+              confidence: 0.72,
+            },
+          },
+          rules: [
+            {
+              rule: 'Use restrained rules.',
+              evidence: 'test profile rule',
+              confidence: 0.8,
+            },
+          ],
+          derived: null,
+        }
+      },
+    )
+    const { container } = render(
+      <PrintDesignPanel
+        onThemeChange={onThemeChange}
+        onProfileExtractRequest={onProfileExtractRequest}
+      />,
+    )
+
+    const textarea = container.querySelector('textarea')
+    fillTextarea(textarea, 'scholarly but quiet')
+
+    await act(async () => {
+      buttonByText(container, 'Extract from description').dispatchEvent(
+        new MouseEvent('click', { bubbles: true }),
+      )
+    })
+
+    expect(onProfileExtractRequest).toHaveBeenCalledWith(
+      expect.objectContaining({ mode: 'description' }),
+    )
+    expect(onThemeChange).toHaveBeenCalled()
+    expect(container.textContent).toContain('Compiled')
+
+    expect(container.querySelector('details')).toBeNull()
+    expect(container.textContent).toContain('licensed substitutes')
+    expect(container.textContent).toContain('point sizes are approximate')
+    expect(container.textContent).toContain('page geometry is approximate')
+    expect(container.textContent).toContain('custom ornament replication')
+    expect(container.textContent).toContain('#111111')
+    expect(container.textContent).toContain('#335f8f')
+  })
+})