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

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

@@ -0,0 +1,3043 @@
+import { Check, Download, FileImage, WandSparkles, X } from 'lucide-react'
+import type { CSSProperties, ReactNode } from 'react'
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+import {
+  DEFAULT_PURE_RENDER_THEME,
+  PRINT_STYLE_PROFILE_SCHEMA,
+  PRINT_TOKEN_EXTRACTION_PROMPT,
+  PURE_RENDER_THEME_PRESETS,
+  buildPrintStyleProfilePrompt,
+  compilePrintTheme,
+  parsePureRenderThemeJson,
+  type PrintStyleProfile,
+  type PureRenderTheme,
+} from '../../bridge/pureRender/index.js'
+import { PlatformIcon } from '../chrome/PlatformIcon.js'
+import { PanelTabStrip } from '../chrome/PanelTabStrip.js'
+import { Button } from '../common/buttons/Button.js'
+import { FlexRow } from '../common/containers/flex.js'
+import { TextAreaField } from '../common/inputs/TextAreaField.js'
+import { Text } from '../common/typography/Text.js'
+
+export type PrintDesignMode =
+  | 'preset'
+  | 'vision'
+  | 'manual'
+  | 'json'
+  | 'image'
+  | 'description'
+export type PrintDesignPanelVariant = 'sidebar' | 'popover' | 'workspace'
+export type PrintDesignPanelDensity = 'comfortable' | 'compact'
+
+export interface PrintDesignThemePreset {
+  id: string
+  label: string
+  theme: PureRenderTheme
+}
+
+export interface PrintDesignPanelAction {
+  id: string
+  label: string
+  icon?: ReactNode
+  disabled?: boolean
+  busy?: boolean
+  busyLabel?: string
+  variant?: 'primary' | 'subtle' | 'ghost' | 'text'
+  onClick: () => void
+}
+
+export interface PrintDesignExtractionCapability {
+  image?: boolean
+  description?: boolean
+  reason?: string
+  imageReason?: string
+  descriptionReason?: string
+}
+
+export interface PrintDesignVisionTypesetting {
+  enabled?: boolean
+  loading?: boolean
+  status?: string
+  progress?: PrintDesignVisionProgress
+  report?: readonly [string, string][]
+  evidence?: readonly PrintDesignVisionEvidence[]
+  snapshotUrl?: string
+  snapshotAlt?: string
+  onSnapshotOpen?: () => void
+  maxFixesPerIssue?: number
+  onMaxFixesPerIssueChange?: (value: number) => void
+  exportLabel?: string
+  exportBusy?: boolean
+  exportDisabled?: boolean
+  onToggle?: (enabled: boolean) => void | Promise<void>
+  onExport?: () => void
+}
+
+export interface PrintDesignVisionProgress {
+  state: 'idle' | 'running' | 'complete' | 'stopped' | 'pass'
+  label: string
+}
+
+export interface PrintDesignVisionEvidence {
+  id: string
+  label: string
+  snapshots?: readonly PrintDesignVisionSnapshot[]
+  imageUrl?: string
+  imageAlt?: string
+  note?: string
+  tone?: 'neutral' | 'warning' | 'candidate' | 'pass'
+  onOpen?: () => void
+  comparison?: PrintDesignVisionComparison
+}
+
+export interface PrintDesignVisionComparison {
+  title: string
+  issueLabel: string
+  fixLabel: string
+  resultSummary: string
+  baseline: PrintDesignVisionComparisonSide
+  fixed: PrintDesignVisionComparisonSide
+}
+
+export interface PrintDesignVisionComparisonSide {
+  label: string
+  note?: string
+  pdfPath?: string
+  snapshots: readonly PrintDesignVisionSnapshot[]
+}
+
+export interface PrintDesignVisionSnapshot {
+  id?: string
+  page: number
+  pageCount?: number
+  imageUrl: string
+  imageAlt?: string
+  label?: string
+  role?: 'problem' | 'figure' | 'image' | 'caption' | 'sample' | 'candidate'
+  onOpen?: () => void
+}
+
+export interface PrintDesignPanelProps {
+  presets?: readonly PrintDesignThemePreset[]
+  value?: PureRenderTheme
+  variant?: PrintDesignPanelVariant
+  density?: PrintDesignPanelDensity
+  headerAccessory?: ReactNode
+  modes?: readonly PrintDesignMode[]
+  actions?: readonly PrintDesignPanelAction[]
+  extractionCapability?: PrintDesignExtractionCapability
+  visionTypesetting?: PrintDesignVisionTypesetting
+  onThemeChange?: (theme: PureRenderTheme) => void
+  onProfileExtractRequest?: (input: {
+    mode: Extract<PrintDesignMode, 'image' | 'description'>
+    prompt: string
+    promptTemplate: string
+    schema: typeof PRINT_STYLE_PROFILE_SCHEMA
+    modelPrompt: string
+    image?: File
+    images?: readonly File[]
+  }) => Promise<PrintStyleProfile>
+}
+
+export interface PrintDesignPopoverProps {
+  open: boolean
+  children: ReactNode
+  title?: ReactNode
+  className?: string
+  style?: CSSProperties
+  onClose?: () => void
+}
+
+const DEFAULT_PRESETS: readonly PrintDesignThemePreset[] =
+  PURE_RENDER_THEME_PRESETS
+
+const DEFAULT_VISION_SAMPLE_REPORT = [
+  ['sample', 'No export inspection has run yet.'],
+  [
+    'inspect',
+    'The next beta export will render with Paged.js and capture a real page snapshot.',
+  ],
+] as const
+
+const MODE_OPTIONS = [
+  { value: 'preset', label: 'Design' },
+  { value: 'vision', label: 'Beta vision typesetting' },
+  { value: 'manual', label: 'Tune' },
+  { value: 'image', label: 'Image' },
+  { value: 'description', label: 'Describe' },
+  { value: 'json', label: 'JSON' },
+] as const
+
+const MAX_IMAGE_BYTES = 8 * 1024 * 1024
+const IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp'])
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'webp'])
+
+function isSupportedImageFile(file: File): boolean {
+  if (IMAGE_TYPES.has(file.type)) return true
+  if (file.type) return false
+  const extension = file.name.split('.').pop()?.toLowerCase()
+  return Boolean(extension && IMAGE_EXTENSIONS.has(extension))
+}
+
+function evidenceSnapshots(
+  evidence: PrintDesignVisionEvidence,
+): readonly PrintDesignVisionSnapshot[] {
+  if (evidence.snapshots?.length) return evidence.snapshots
+  if (!evidence.imageUrl) return []
+  return [
+    {
+      page: 1,
+      imageUrl: evidence.imageUrl,
+      imageAlt: evidence.imageAlt,
+      label: evidence.label,
+      onOpen: evidence.onOpen,
+    },
+  ]
+}
+
+function snapshotDisplayLabel(
+  evidence: PrintDesignVisionEvidence,
+  snapshot: PrintDesignVisionSnapshot,
+): string {
+  const role = snapshot.role ? `${snapshot.role} · ` : ''
+  const page = snapshot.pageCount
+    ? `page ${snapshot.page} of ${snapshot.pageCount}`
+    : `page ${snapshot.page}`
+  return snapshot.label ?? `${evidence.label} · ${role}${page}`
+}
+
+const Panel = styled.section<{
+  $variant: PrintDesignPanelVariant
+  $density: PrintDesignPanelDensity
+}>`
+  --print-design-page-surface: #fff;
+  --platform-panel-tab-surface: var(--print-design-page-surface);
+
+  display: grid;
+  gap: ${({ $variant }) =>
+    $variant === 'popover'
+      ? 'var(--platform-spacing-xs)'
+      : 'var(--platform-spacing-sm)'};
+  min-width: 0;
+  min-height: 0;
+  background: var(--print-design-page-surface);
+  font-size: var(--platform-typography-font-size-sm);
+
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        flex: 1 1 auto;
+        grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
+        grid-template-rows: auto minmax(0, 1fr);
+        align-content: stretch;
+        align-items: stretch;
+        gap: 0 var(--platform-spacing-md);
+        overflow: hidden;
+      `
+      : $variant === 'popover'
+      ? `
+        flex: 1 1 auto;
+        grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
+        align-content: start;
+        align-items: start;
+        gap: var(--platform-spacing-md);
+      `
+      : ''}
+
+  ${({ $density }) =>
+    $density === 'compact'
+      ? `
+        gap: var(--platform-spacing-xs);
+        font-size: var(--platform-typography-font-size-xs);
+      `
+      : ''}
+`
+
+const Popover = styled.div`
+  --print-design-page-surface: #fff;
+  --platform-panel-tab-surface: var(--print-design-page-surface);
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  width: 100vw;
+  height: 100vh;
+  transform: none;
+  overflow: hidden;
+  padding: var(--platform-spacing-sm) var(--platform-spacing-md)
+    var(--platform-spacing-sm);
+  border: 0;
+  border-radius: 0;
+  background: var(--print-design-page-surface);
+  box-shadow: none;
+
+  @media (max-width: 720px) {
+    padding: var(--platform-spacing-sm);
+  }
+`
+
+const PopoverChrome = styled.div`
+  position: absolute;
+  top: var(--platform-spacing-sm);
+  right: var(--platform-spacing-sm);
+  z-index: 2;
+  display: flex;
+  justify-content: flex-end;
+`
+
+const PopoverIconButton = styled.button`
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--platform-colors-border-strong);
+    outline-offset: 2px;
+  }
+`
+
+const PopoverTitleBar = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 42px var(--platform-spacing-sm) 0;
+  border-bottom: 1px solid var(--platform-colors-divider);
+`
+
+const PopoverTitle = styled.div`
+  margin: 0;
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-md);
+  font-weight: var(--platform-typography-font-weight-semibold);
+  line-height: 1.25;
+`
+
+const HeaderRow = styled(FlexRow)<{ $variant: PrintDesignPanelVariant }>`
+  grid-column: 1 / -1;
+  min-width: 0;
+  align-items: center;
+  padding-right: 42px;
+  border-bottom: 1px solid var(--platform-colors-divider);
+
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(220px, max-content);
+        grid-template-areas:
+          'identity actions'
+          'nav actions';
+        align-items: end;
+        column-gap: var(--platform-spacing-md);
+        row-gap: 0;
+        min-height: 64px;
+        padding: 4px 42px 0 0;
+
+        @media (max-width: 960px) {
+          grid-template-columns: minmax(0, 1fr) auto;
+          grid-template-areas:
+            'identity actions'
+            'nav nav';
+          row-gap: var(--platform-spacing-xs);
+        }
+      `
+      : ''}
+`
+
+const WorkspaceIdentity = styled.div`
+  display: flex;
+  align-items: center;
+  grid-area: identity;
+  min-width: 220px;
+  max-width: 560px;
+  gap: var(--platform-spacing-sm);
+`
+
+const WorkspaceTitle = styled.div`
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-md);
+  font-weight: var(--platform-typography-font-weight-semibold);
+  line-height: 1.2;
+`
+
+const WorkspaceSummary = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  white-space: nowrap;
+
+  @media (max-width: 1180px) {
+    display: none;
+  }
+`
+
+const WorkspaceSummaryText = styled.span`
+  min-width: 0;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const WorkspaceSummarySwatches = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+`
+
+const HeaderActions = styled.div`
+  grid-area: actions;
+  display: inline-flex;
+  align-self: center;
+  align-items: center;
+  justify-self: end;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  margin-left: auto;
+`
+
+const HeaderActionButton = styled(Button)`
+  flex: 0 0 auto;
+  min-height: 28px;
+  padding-inline: var(--platform-spacing-sm);
+  white-space: nowrap;
+`
+
+const SectionTitle = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-semibold);
+  line-height: 1.2;
+`
+
+const DesignSection = styled.section<{ $variant: PrintDesignPanelVariant }>`
+  display: grid;
+  min-width: 0;
+  gap: var(--platform-spacing-sm);
+  padding: ${({ $variant }) =>
+    $variant === 'popover' || $variant === 'workspace'
+      ? '0'
+      : 'var(--platform-spacing-sm)'};
+  border: ${({ $variant }) =>
+    $variant === 'popover' || $variant === 'workspace'
+      ? '0'
+      : '1px solid var(--platform-colors-divider)'};
+  border-radius: ${({ $variant }) =>
+    $variant === 'popover' || $variant === 'workspace'
+      ? '0'
+      : 'var(--platform-radius-md)'};
+  background: var(--print-design-page-surface);
+
+  ${({ $variant }) =>
+    $variant === 'popover' || $variant === 'workspace'
+      ? `
+        padding-top: var(--platform-spacing-md);
+        border-top: 1px solid var(--platform-colors-divider);
+
+        &:first-child {
+          padding-top: 0;
+          border-top: 0;
+        }
+      `
+      : ''}
+`
+
+const SectionHeader = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  min-width: 0;
+  gap: var(--platform-spacing-sm);
+`
+
+const DesignMain = styled.div<{
+  $variant: PrintDesignPanelVariant
+  $mode: PrintDesignMode
+}>`
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  gap: var(--platform-spacing-sm);
+  background: var(--print-design-page-surface);
+
+  ${({ $variant, $mode }) =>
+    $variant === 'workspace'
+      ? `
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
+        grid-template-columns: ${
+          $mode === 'vision'
+            ? 'minmax(0, 1fr)'
+            : 'minmax(0, 1fr)'
+        };
+        grid-template-rows: ${
+          $mode === 'vision' ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) auto'
+        };
+        gap: ${$mode === 'vision' ? '0' : 'var(--platform-spacing-md)'};
+        min-height: 0;
+        overflow: hidden;
+      `
+      : $variant === 'popover'
+      ? `
+        align-content: start;
+        gap: var(--platform-spacing-md);
+      `
+      : ''}
+`
+
+const WorkspaceControls = styled.div<{
+  $variant: PrintDesignPanelVariant
+  $mode: PrintDesignMode
+}>`
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        display: grid;
+        align-content: start;
+        gap: var(--platform-spacing-md);
+        min-width: 0;
+        min-height: 0;
+        overflow: auto;
+        padding-right: var(--platform-spacing-md);
+        border-right: 1px solid var(--platform-colors-divider);
+      `
+      : `
+        display: contents;
+      `}
+
+  ${({ $variant, $mode }) =>
+    $variant === 'workspace' && $mode !== 'vision'
+      ? `
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+        padding-right: var(--platform-spacing-md);
+        border-right: 0;
+      `
+      : ''}
+
+  ${({ $variant, $mode }) =>
+    $variant === 'workspace' && $mode === 'vision'
+      ? `
+        display: none;
+      `
+      : ''}
+`
+
+const WorkspaceFooter = styled.div<{
+  $variant: PrintDesignPanelVariant
+  $mode: PrintDesignMode
+}>`
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        display: grid;
+        align-self: end;
+        gap: var(--platform-spacing-sm);
+        min-width: 0;
+        padding-right: var(--platform-spacing-md);
+        border-right: 1px solid var(--platform-colors-divider);
+      `
+      : `
+        display: contents;
+      `}
+
+  ${({ $variant, $mode }) =>
+    $variant === 'workspace' && $mode === 'vision'
+      ? `
+        display: none;
+      `
+      : ''}
+
+  ${({ $variant, $mode }) =>
+    $variant === 'workspace' && $mode !== 'vision'
+      ? `
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
+        padding-right: var(--platform-spacing-md);
+        border-right: 0;
+      `
+      : ''}
+`
+
+const WorkspaceCanvas = styled.div<{
+  $variant: PrintDesignPanelVariant
+  $mode: PrintDesignMode
+}>`
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        display: grid;
+        align-content: start;
+        gap: var(--platform-spacing-md);
+        min-width: 0;
+        min-height: 0;
+        grid-column: 2 / 3;
+        grid-row: 1 / 3;
+        overflow: auto;
+        padding-right: var(--platform-spacing-xs);
+      `
+      : `
+        display: contents;
+      `}
+
+  ${({ $variant, $mode }) =>
+    $variant === 'workspace' && $mode !== 'vision'
+      ? `
+        display: none;
+      `
+      : ''}
+
+  ${({ $variant, $mode }) =>
+    $variant === 'workspace' && $mode === 'vision'
+      ? `
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+        padding-right: var(--platform-spacing-md);
+      `
+      : ''}
+`
+
+const DesignReadout = styled.aside<{ $variant: PrintDesignPanelVariant }>`
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  gap: var(--platform-spacing-sm);
+
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        grid-column: 2 / 3;
+        grid-row: 2 / 3;
+        overflow: auto;
+        padding-left: var(--platform-spacing-md);
+        border-left: 1px solid var(--platform-colors-divider);
+      `
+      : $variant === 'popover'
+      ? `
+        position: sticky;
+        top: 0;
+        max-height: calc(90vh - 104px);
+        overflow: auto;
+        padding-left: var(--platform-spacing-md);
+        border-left: 1px solid var(--platform-colors-divider);
+      `
+      : ''}
+
+  ${({ $variant }) =>
+    $variant === 'sidebar'
+      ? `
+        display: contents;
+      `
+      : ''}
+`
+
+const ModeTabs = styled(PanelTabStrip<PrintDesignMode>)`
+  grid-area: nav;
+  justify-self: start;
+  min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+
+  @media (max-width: 780px) {
+    width: 100%;
+  }
+`
+
+const Swatch = styled.span<{ $color: string }>`
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 3px;
+  background: ${({ $color }) => $color};
+`
+
+const PresetList = styled.div<{ $variant: PrintDesignPanelVariant }>`
+  display: ${({ $variant }) =>
+    $variant === 'popover' ? 'flex' : 'grid'};
+  grid-template-columns: ${({ $variant }) =>
+    $variant === 'workspace'
+      ? 'repeat(auto-fit, minmax(172px, 1fr))'
+      : 'minmax(0, 1fr)'};
+  flex-wrap: wrap;
+  gap: ${({ $variant }) =>
+    $variant === 'popover' ? 'var(--platform-spacing-xs)' : '4px'};
+
+  @media (max-width: 720px) {
+    display: grid;
+  }
+`
+
+const PresetOption = styled.button<{
+  $active: boolean
+  $density: PrintDesignPanelDensity
+  $variant: PrintDesignPanelVariant
+}>`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: var(--platform-spacing-2xs);
+  min-width: 0;
+  width: ${({ $variant }) => ($variant === 'popover' ? 'auto' : '100%')};
+  flex: ${({ $variant }) =>
+    $variant === 'popover' ? '0 1 148px' : '1 1 auto'};
+  max-width: ${({ $variant }) => ($variant === 'popover' ? '166px' : 'none')};
+  padding: ${({ $density }) =>
+    $density === 'compact' ? '3px 8px' : '5px 9px'};
+  border: 1px solid var(--platform-colors-border);
+  border-color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-accent, var(--platform-colors-border))'
+      : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-sm);
+  background: var(--print-design-page-surface);
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.25;
+  text-align: left;
+
+  &:hover {
+    background: var(--print-design-page-surface);
+  }
+`
+
+const PresetLabel = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const PresetPreview = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const PreviewLetter = styled.span<{ $family: string }>`
+  font-family: ${({ $family }) => $family};
+  font-size: 11px;
+  line-height: 1;
+`
+
+const ControlStack = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-xs);
+`
+
+const ReferenceGrid = styled.div<{ $variant: PrintDesignPanelVariant }>`
+  display: grid;
+  grid-template-columns: ${({ $variant }) =>
+    $variant === 'popover' || $variant === 'workspace'
+      ? 'minmax(240px, 0.72fr) minmax(360px, 1.28fr)'
+      : 'minmax(0, 1fr)'};
+  gap: var(--platform-spacing-sm);
+  align-items: start;
+
+  @media (max-width: 860px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`
+
+const ReferencePane = styled.div<{ $variant: PrintDesignPanelVariant }>`
+  display: grid;
+  min-width: 0;
+  gap: var(--platform-spacing-xs);
+  align-content: start;
+  min-height: ${({ $variant }) => ($variant === 'popover' ? '0' : '128px')};
+  padding: ${({ $variant }) =>
+    $variant === 'popover' ? '0' : 'var(--platform-spacing-sm)'};
+  border: ${({ $variant }) =>
+    $variant === 'popover' ? '0' : '1px solid var(--platform-colors-divider)'};
+  border-radius: ${({ $variant }) =>
+    $variant === 'popover' ? '0' : 'var(--platform-radius-sm)'};
+  background: var(--print-design-page-surface);
+`
+
+const DescribeStack = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-xs);
+`
+
+const VisionPanel = styled.div<{ $variant: PrintDesignPanelVariant }>`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+  align-content: start;
+  min-width: 0;
+  min-height: 0;
+
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        grid-template-columns: minmax(0, 1fr);
+        align-items: start;
+        gap: var(--platform-spacing-sm);
+      `
+      : ''}
+`
+
+const VisionSettingsRail = styled.div<{ $variant: PrintDesignPanelVariant }>`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  align-content: start;
+
+  ${({ $variant }) =>
+    $variant === 'workspace'
+      ? `
+        padding: 0 0 var(--platform-spacing-sm);
+        border-bottom: 1px solid var(--platform-colors-divider);
+      `
+      : ''}
+`
+
+const VisionEvidenceColumn = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  min-height: 0;
+  align-content: start;
+`
+
+const VisionSettingsStrip = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+`
+
+const VisionToggleRow = styled.label`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  flex: 1 1 280px;
+  padding: 0;
+  border: 1px solid var(--platform-colors-border);
+  border: 0;
+  border-radius: 0;
+  background: var(--print-design-page-surface);
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const VisionToggleCopy = styled.span`
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+`
+
+const VisionToggleTitle = styled.span`
+  font-weight: var(--platform-typography-font-weight-semibold);
+`
+
+const VisionToggleStatus = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const VisionCheckbox = styled.input`
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  accent-color: var(--platform-colors-accent, var(--platform-colors-text));
+`
+
+const VisionToggleControls = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  flex: 0 0 auto;
+`
+
+const VisionProgressStrip = styled.div<{
+  $state: PrintDesignVisionProgress['state']
+}>`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid
+    ${({ $state }) =>
+      $state === 'running'
+        ? '#9eb9df'
+        : $state === 'stopped'
+        ? '#dfad59'
+        : $state === 'complete' || $state === 'pass'
+        ? '#8cc7a0'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-sm);
+  background: ${({ $state }) =>
+    $state === 'running'
+      ? '#f8fbff'
+      : $state === 'stopped'
+      ? '#fffaf0'
+      : $state === 'complete' || $state === 'pass'
+      ? '#f8fff9'
+      : '#fff'};
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+const VisionProgressState = styled.span<{
+  $state: PrintDesignVisionProgress['state']
+}>`
+  flex: 0 0 auto;
+  color: ${({ $state }) =>
+    $state === 'running'
+      ? '#426489'
+      : $state === 'stopped'
+      ? '#8a5a10'
+      : $state === 'complete' || $state === 'pass'
+      ? '#2f744b'
+      : 'var(--platform-colors-text-secondary)'};
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-semibold);
+  text-transform: uppercase;
+`
+
+const VisionProgressLabel = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const VisionMaxFixesField = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--platform-spacing-2xs);
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const VisionMaxFixesInput = styled.input`
+  width: 46px;
+  height: 26px;
+  box-sizing: border-box;
+  padding: 0 6px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-xs);
+  background: #fff;
+  color: var(--platform-colors-text);
+  font: inherit;
+`
+
+const VisionSnapshotGrid = styled.div<{ $hasEvidence: boolean }>`
+  display: grid;
+  grid-template-columns: ${({ $hasEvidence }) =>
+    $hasEvidence ? 'minmax(0, 1fr)' : 'minmax(260px, 340px) minmax(0, 1fr)'};
+  gap: var(--platform-spacing-md);
+  align-items: start;
+
+  @media (max-width: 780px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`
+
+const VisionSnapshotFrame = styled.div`
+  display: grid;
+  min-width: 0;
+  gap: var(--platform-spacing-xs);
+`
+
+const VisionEvidenceList = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+  max-height: calc(100vh - 236px);
+  padding-right: var(--platform-spacing-2xs);
+  overflow: auto;
+`
+
+const VisionEvidenceCard = styled.div<{
+  $tone: NonNullable<PrintDesignVisionEvidence['tone']>
+}>`
+  display: grid;
+  grid-template-columns: minmax(300px, 0.78fr) minmax(260px, 0.62fr);
+  gap: var(--platform-spacing-md);
+  align-items: start;
+  padding: var(--platform-spacing-sm) 0 var(--platform-spacing-sm)
+    var(--platform-spacing-sm);
+  border-left: 2px solid
+    ${({ $tone }) =>
+      $tone === 'warning'
+        ? '#d38a16'
+        : $tone === 'candidate'
+        ? '#3268c7'
+        : $tone === 'pass'
+        ? '#2f8b57'
+        : 'var(--platform-colors-border)'};
+  background: #fff;
+
+  @media (max-width: 640px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`
+
+const VisionEvidenceCaption = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-2xs);
+  min-width: 0;
+  padding-top: var(--platform-spacing-2xs);
+`
+
+const VisionEvidenceTitle = styled.div`
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-semibold);
+  line-height: 1.25;
+`
+
+const VisionEvidenceNote = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.35;
+  max-width: 48ch;
+`
+
+const VisionEvidenceActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-2xs);
+  padding-top: var(--platform-spacing-2xs);
+`
+
+const VisionEvidenceActionButton = styled.button`
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 2px 10px;
+  border: 1px solid #8cc7a0;
+  border-radius: 999px;
+  background: #f8fff9;
+  color: #2f744b;
+  font: inherit;
+  font-size: var(--platform-typography-font-size-xs);
+  cursor: pointer;
+`
+
+const VisionCarousel = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-2xs);
+  min-width: 0;
+`
+
+const VisionCarouselControls = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-2xs);
+  min-width: 0;
+`
+
+const VisionCarouselButton = styled.button`
+  appearance: none;
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 999px;
+  background: #fff;
+  color: var(--platform-colors-text);
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.38;
+  }
+`
+
+const VisionCarouselLabel = styled.div`
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const VisionCarouselChips = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+`
+
+const VisionCarouselChip = styled.button<{ $active: boolean }>`
+  appearance: none;
+  min-width: 24px;
+  height: 20px;
+  padding: 0 7px;
+  border: 1px solid
+    ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-accent, var(--platform-colors-text))'
+        : 'var(--platform-colors-border)'};
+  border-radius: 999px;
+  background: ${({ $active }) =>
+    $active
+      ? 'rgb(from var(--platform-colors-accent, #3454d1) r g b / 0.08)'
+      : '#fff'};
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  cursor: pointer;
+`
+
+const VisionSnapshotLabel = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-semibold);
+`
+
+const VisionSnapshotPage = styled.div`
+  position: relative;
+  display: grid;
+  gap: 7px;
+  aspect-ratio: 0.72;
+  width: min(100%, 300px);
+  padding: 20px 18px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: #fff;
+  box-shadow: 0 10px 28px rgb(from var(--platform-colors-text) r g b / 0.08);
+`
+
+const VisionSnapshotImage = styled.img`
+  display: block;
+  width: 100%;
+  max-height: min(680px, calc(100vh - 280px));
+  object-fit: contain;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: #fff;
+`
+
+const VisionSnapshotButton = styled.button`
+  appearance: none;
+  display: inline-flex;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--platform-colors-accent);
+    outline-offset: 3px;
+  }
+`
+
+const VisionPageHeading = styled.div`
+  width: 72%;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--platform-colors-text);
+`
+
+const VisionPageLine = styled.div<{ $width?: string }>`
+  width: ${({ $width }) => $width ?? '100%'};
+  height: 4px;
+  border-radius: 2px;
+  background: rgb(from var(--platform-colors-text) r g b / 0.34);
+`
+
+const VisionPageObject = styled.div`
+  width: 78%;
+  height: 54px;
+  margin: 5px auto 2px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 3px;
+  background: linear-gradient(
+      135deg,
+      rgb(from var(--platform-colors-accent, #3454d1) r g b / 0.16),
+      rgb(from var(--platform-colors-accent, #3454d1) r g b / 0.04)
+    ),
+    #fff;
+`
+
+const VisionSnapshotCopy = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-xs);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.45;
+`
+
+const VisionSnapshotTitle = styled.div`
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-semibold);
+`
+
+const ImageChoiceButton = styled(Button)`
+  width: 100%;
+  justify-content: center;
+`
+
+const ImageSelectionMeta = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-2xs);
+  min-width: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: var(--platform-typography-line-height-base);
+`
+
+const ImageSelectionName = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const ManualGrid = styled.div<{
+  $density: PrintDesignPanelDensity
+  $variant: PrintDesignPanelVariant
+}>`
+  display: grid;
+  grid-template-columns: ${({ $density, $variant }) =>
+    $variant === 'popover'
+      ? 'repeat(3, minmax(132px, 156px))'
+      : $variant === 'workspace'
+      ? 'repeat(3, minmax(160px, 1fr))'
+      : $density === 'compact'
+      ? 'repeat(2, minmax(0, 1fr))'
+      : 'repeat(3, minmax(0, 1fr))'};
+  gap: ${({ $density, $variant }) =>
+    $variant === 'popover'
+      ? 'var(--platform-spacing-xs) var(--platform-spacing-sm)'
+      : $density === 'compact'
+      ? 'var(--platform-spacing-xs)'
+      : 'var(--platform-spacing-sm)'};
+  justify-content: start;
+  max-width: ${({ $variant }) => ($variant === 'popover' ? '504px' : 'none')};
+
+  @media (max-width: 980px) {
+    grid-template-columns: ${({ $variant }) =>
+      $variant === 'popover'
+        ? 'repeat(2, minmax(132px, 156px))'
+        : 'repeat(2, minmax(0, 1fr))'};
+  }
+
+  @media (max-width: 560px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`
+
+const ManualField = styled.label<{ $span?: 'wide' }>`
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.2;
+
+  ${({ $span }) =>
+    $span === 'wide'
+      ? `
+        grid-column: span 2;
+
+        @media (max-width: 560px) {
+          grid-column: auto;
+        }
+      `
+      : ''}
+`
+
+const ManualInput = styled.input`
+  width: 100%;
+  min-width: 0;
+  min-height: 28px;
+  padding: 0 7px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--print-design-page-surface);
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.2;
+
+  &[type='color'] {
+    height: 28px;
+    padding: 2px;
+  }
+`
+
+const ManualSelect = styled.select`
+  width: 100%;
+  min-width: 0;
+  min-height: 28px;
+  padding: 0 7px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--print-design-page-surface);
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.2;
+`
+
+const ReferenceActionRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+`
+
+const ReferenceButton = styled(Button)`
+  flex: 0 1 auto;
+`
+
+const CompactTextArea = styled(TextAreaField)`
+  font-size: var(--platform-typography-font-size-sm);
+
+  textarea {
+    min-height: 0;
+  }
+`
+
+const FooterRow = styled(FlexRow)`
+  min-width: 0;
+`
+
+const ActionRow = styled(FlexRow)<{ $variant: PrintDesignPanelVariant }>`
+  min-width: 0;
+  padding-top: var(--platform-spacing-2xs);
+  border-top: 1px solid var(--platform-colors-divider);
+  flex-wrap: wrap;
+`
+
+const ActionButton = styled(Button)`
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+`
+
+const StatusText = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: var(--platform-typography-line-height-base);
+`
+
+const DecisionStream = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  padding-top: var(--platform-spacing-2xs);
+`
+
+const DecisionList = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-2xs);
+  max-height: calc(100vh - 190px);
+  margin-top: var(--platform-spacing-xs);
+  padding-right: var(--platform-spacing-2xs);
+  overflow: auto;
+  overflow-wrap: break-word;
+`
+
+const DecisionItem = styled.div<{ $type: string; $startsGroup: boolean }>`
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  align-items: start;
+  column-gap: var(--platform-spacing-sm);
+  padding: ${({ $startsGroup }) =>
+    $startsGroup ? '8px 0 6px' : '5px 0 6px'};
+  border-top: 1px solid var(--platform-colors-divider);
+  background: ${({ $type }) => decisionBackground($type)};
+
+  &:first-child {
+    padding: 7px 0 8px;
+    border-top: 0;
+    border-bottom: 1px solid var(--platform-colors-divider);
+    background: ${({ $type }) => currentDecisionBackground($type)};
+
+    > span:first-child {
+      box-shadow: 0 0 0 1px ${({ $type }) => decisionBorder($type)} inset;
+    }
+  }
+`
+
+const DecisionGroupLabel = styled.div`
+  grid-column: 1 / -1;
+  margin-bottom: 3px;
+  color: var(--platform-colors-text);
+  font-size: 10px;
+  font-weight: var(--platform-typography-font-weight-semibold);
+  letter-spacing: 0;
+  line-height: 1.2;
+`
+
+const DecisionType = styled.span<{ $type: string }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 54px;
+  max-width: 54px;
+  min-height: 18px;
+  padding: 1px 4px;
+  border: 1px solid ${({ $type }) => decisionBorder($type)};
+  border-radius: var(--platform-radius-sm);
+  color: ${({ $type }) => decisionText($type)};
+  background: ${({ $type }) => decisionBadgeBackground($type)};
+  font-size: 8.5px;
+  line-height: 1.25;
+  text-align: center;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const DecisionMessage = styled(Text)`
+  min-width: 0;
+  display: block;
+  padding-top: 1px;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.55;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: normal;
+`
+
+const DecisionColor = styled.span<{ $color: string }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin: 0 2px;
+  white-space: nowrap;
+
+  &::before {
+    content: '';
+    width: 0.75em;
+    height: 0.75em;
+    border: 1px solid var(--platform-colors-border);
+    border-radius: 2px;
+    background: ${({ $color }) => $color};
+  }
+`
+
+const DecisionLink = styled.a`
+  color: var(--platform-colors-accent);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+const HiddenFile = styled.input`
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+`
+
+export function PrintDesignPopover({
+  open,
+  children,
+  title = 'Design - PDF Typesetter',
+  className,
+  style,
+  onClose,
+}: PrintDesignPopoverProps): React.ReactElement | null {
+  const popoverRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!open || !onClose) return
+    const closeOnOutsidePointerDown = (event: PointerEvent): void => {
+      const target = event.target
+      if (target instanceof Node && popoverRef.current?.contains(target)) {
+        return
+      }
+      onClose()
+    }
+    window.addEventListener('pointerdown', closeOnOutsidePointerDown)
+    return () =>
+      window.removeEventListener('pointerdown', closeOnOutsidePointerDown)
+  }, [onClose, open])
+
+  if (!open) return null
+  return (
+    <Popover
+      ref={popoverRef}
+      className={className}
+      style={style}
+      onClick={event => event.stopPropagation()}
+    >
+      <PopoverChrome>
+        {onClose ? (
+          <PopoverIconButton
+            type="button"
+            title="Close print design"
+            aria-label="Close print design"
+            onClick={onClose}
+          >
+            <X size={14} aria-hidden="true" />
+          </PopoverIconButton>
+        ) : null}
+      </PopoverChrome>
+      {title ? (
+        <PopoverTitleBar>
+          <PopoverTitle>{title}</PopoverTitle>
+        </PopoverTitleBar>
+      ) : null}
+      {children}
+    </Popover>
+  )
+}
+
+async function sampleImageThemeHints(file: File): Promise<
+  | {
+      ink: string
+      paper: string
+      accent: string
+    }
+  | undefined
+> {
+  if (typeof createImageBitmap !== 'function') return undefined
+  const bitmap = await createImageBitmap(file).catch(() => undefined)
+  if (!bitmap) return undefined
+  try {
+    const size = 48
+    const canvas = document.createElement('canvas')
+    canvas.width = size
+    canvas.height = size
+    const context = canvas.getContext('2d', { willReadFrequently: true })
+    if (!context) return undefined
+    context.drawImage(bitmap, 0, 0, size, size)
+    const pixels = context.getImageData(0, 0, size, size).data
+    const colors: Array<{
+      hex: string
+      luminance: number
+      saturation: number
+    }> = []
+    for (let index = 0; index < pixels.length; index += 16) {
+      const alpha = pixels[index + 3] ?? 0
+      if (alpha < 180) continue
+      const red = pixels[index] ?? 0
+      const green = pixels[index + 1] ?? 0
+      const blue = pixels[index + 2] ?? 0
+      colors.push({
+        hex: rgbToHex(red, green, blue),
+        luminance: relativeLuminance(red, green, blue),
+        saturation: saturation(red, green, blue),
+      })
+    }
+    if (colors.length < 3) return undefined
+    const sorted = [...colors].sort((a, b) => a.luminance - b.luminance)
+    const accent =
+      [...colors].sort((a, b) => b.saturation - a.saturation)[0]?.hex ??
+      DEFAULT_PURE_RENDER_THEME.color.accent
+    return {
+      ink: sorted[0]?.hex ?? DEFAULT_PURE_RENDER_THEME.color.ink,
+      paper:
+        sorted[sorted.length - 1]?.hex ??
+        DEFAULT_PURE_RENDER_THEME.color.paper ??
+        '#FFFFFF',
+      accent,
+    }
+  } finally {
+    bitmap.close()
+  }
+}
+
+function rgbToHex(red: number, green: number, blue: number): string {
+  return `#${[red, green, blue]
+    .map(channel =>
+      Math.max(0, Math.min(255, channel)).toString(16).padStart(2, '0'),
+    )
+    .join('')}`
+}
+
+function relativeLuminance(red: number, green: number, blue: number): number {
+  return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
+}
+
+function saturation(red: number, green: number, blue: number): number {
+  const max = Math.max(red, green, blue)
+  const min = Math.min(red, green, blue)
+  return max === 0 ? 0 : (max - min) / max
+}
+
+function fontStack(
+  role: 'serif' | 'sans',
+  purpose: 'display' | 'body' | 'label',
+): string {
+  if (role === 'sans') return '"Source Sans 3", system-ui, sans-serif'
+  if (purpose === 'display') return '"Newsreader", Georgia, serif'
+  return '"Source Serif 4", Georgia, serif'
+}
+
+function themeMatchesPreset(
+  theme: PureRenderTheme,
+  presetTheme: PureRenderTheme,
+): boolean {
+  return (
+    theme.name === presetTheme.name &&
+    theme.color.ink === presetTheme.color.ink &&
+    theme.color.accent === presetTheme.color.accent &&
+    (theme.color.paper ?? theme.color.surface) ===
+      (presetTheme.color.paper ?? presetTheme.color.surface) &&
+    theme.type.fonts.display === presetTheme.type.fonts.display &&
+    theme.type.fonts.serif === presetTheme.type.fonts.serif &&
+    theme.type.fonts.sans === presetTheme.type.fonts.sans &&
+    theme.type.measure === presetTheme.type.measure &&
+    theme.type.lead === presetTheme.type.lead &&
+    theme.setting?.align === presetTheme.setting?.align
+  )
+}
+
+function paperColorForTheme(theme: PureRenderTheme): string {
+  return theme.color.paper ?? theme.color.surface ?? '#FFFFFF'
+}
+
+function fontRoleForFamily(family: string | undefined): 'serif' | 'sans' {
+  return /sans|inter|arial|helvetica|system-ui/i.test(family ?? '')
+    ? 'sans'
+    : 'serif'
+}
+
+function manualAlignForTheme(
+  align: string | undefined,
+): 'justified' | 'flush-left' {
+  return align === 'flush-left' ? 'flush-left' : 'justified'
+}
+
+function VisionEvidenceCarousel({
+  evidence,
+}: {
+  evidence: PrintDesignVisionEvidence
+}): React.ReactElement | null {
+  const snapshots = evidenceSnapshots(evidence)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const clampedIndex = Math.min(activeIndex, Math.max(snapshots.length - 1, 0))
+  const active = snapshots[clampedIndex]
+
+  useEffect(() => {
+    if (activeIndex > snapshots.length - 1) {
+      setActiveIndex(Math.max(snapshots.length - 1, 0))
+    }
+  }, [activeIndex, snapshots.length])
+
+  if (!active) return null
+
+  const image = (
+    <VisionSnapshotImage
+      src={active.imageUrl}
+      alt={active.imageAlt ?? `${evidence.label} page snapshot`}
+    />
+  )
+
+  return (
+    <VisionCarousel>
+      {active.onOpen ? (
+        <VisionSnapshotButton
+          type="button"
+          onClick={active.onOpen}
+          aria-label={`Open ${snapshotDisplayLabel(evidence, active)}`}
+        >
+          {image}
+        </VisionSnapshotButton>
+      ) : (
+        image
+      )}
+      {snapshots.length > 1 ? (
+        <>
+          <VisionCarouselControls>
+            <VisionCarouselButton
+              type="button"
+              disabled={clampedIndex === 0}
+              aria-label={`Previous page for ${evidence.label}`}
+              onClick={() => setActiveIndex(Math.max(clampedIndex - 1, 0))}
+            >
+              ‹
+            </VisionCarouselButton>
+            <VisionCarouselLabel>
+              {snapshotDisplayLabel(evidence, active)}
+            </VisionCarouselLabel>
+            <VisionCarouselButton
+              type="button"
+              disabled={clampedIndex === snapshots.length - 1}
+              aria-label={`Next page for ${evidence.label}`}
+              onClick={() =>
+                setActiveIndex(Math.min(clampedIndex + 1, snapshots.length - 1))
+              }
+            >
+              ›
+            </VisionCarouselButton>
+          </VisionCarouselControls>
+          <VisionCarouselChips aria-label={`${evidence.label} pages`}>
+            {snapshots.map((snapshot, index) => (
+              <VisionCarouselChip
+                key={snapshot.id ?? `${snapshot.page}-${index}`}
+                type="button"
+                $active={index === clampedIndex}
+                onClick={() => setActiveIndex(index)}
+              >
+                {snapshot.page}
+              </VisionCarouselChip>
+            ))}
+          </VisionCarouselChips>
+        </>
+      ) : null}
+    </VisionCarousel>
+  )
+}
+
+function openVisionComparisonWindow(
+  comparison: PrintDesignVisionComparison,
+): void {
+  const target = window.open('', '_blank')
+  if (!target) return
+  target.document.write(visionComparisonHtml(comparison))
+  target.document.close()
+}
+
+function visionComparisonHtml(comparison: PrintDesignVisionComparison): string {
+  const payload = JSON.stringify(comparison).replace(/</g, '\\u003c')
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>${escapeHtml(comparison.title)}</title>
+  <style>
+    :root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202428; background: #f5f5f2; }
+    body { margin: 0; }
+    header { padding: 20px 24px 14px; border-bottom: 1px solid #ddd; background: #fff; }
+    h1 { margin: 0 0 8px; font-size: 20px; font-weight: 650; }
+    .meta { display: grid; gap: 4px; color: #60666d; font-size: 13px; line-height: 1.4; }
+    main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 18px 24px 24px; }
+    section { min-width: 0; background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 14px; }
+    h2 { margin: 0 0 10px; font-size: 15px; }
+    .note { min-height: 44px; margin-bottom: 12px; color: #60666d; font-size: 13px; line-height: 1.4; }
+    .stage { display: grid; gap: 10px; }
+    img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; }
+    .controls { display: flex; align-items: center; gap: 8px; }
+    button { border: 1px solid #ccc; background: #fff; border-radius: 999px; min-width: 28px; height: 28px; cursor: pointer; }
+    button:disabled { opacity: .35; cursor: default; }
+    .label { flex: 1; min-width: 0; color: #60666d; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .pdf { margin-top: 8px; font-size: 12px; }
+    .pdf a { color: #2457a6; }
+    @media (max-width: 900px) { main { grid-template-columns: minmax(0, 1fr); } }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>${escapeHtml(comparison.title)}</h1>
+    <div class="meta">
+      <div>${escapeHtml(comparison.issueLabel)}</div>
+      <div>${escapeHtml(comparison.fixLabel)}</div>
+      <div>${escapeHtml(comparison.resultSummary)}</div>
+    </div>
+  </header>
+  <main>
+    <section data-side="baseline"></section>
+    <section data-side="fixed"></section>
+  </main>
+  <script>
+    const comparison = ${payload};
+    const state = { baseline: 0, fixed: 0 };
+    function sideLabel(side, snapshot) {
+      const role = snapshot.role ? snapshot.role + " · " : "";
+      const page = snapshot.pageCount ? "page " + snapshot.page + " of " + snapshot.pageCount : "page " + snapshot.page;
+      return snapshot.label || side.label + " · " + role + page;
+    }
+    function renderSide(key, side) {
+      const host = document.querySelector('[data-side="' + key + '"]');
+      const snapshots = side.snapshots || [];
+      const index = Math.min(state[key], Math.max(snapshots.length - 1, 0));
+      const snapshot = snapshots[index];
+      host.innerHTML = "";
+      const title = document.createElement("h2");
+      title.textContent = side.label;
+      host.appendChild(title);
+      const note = document.createElement("div");
+      note.className = "note";
+      note.textContent = side.note || "";
+      host.appendChild(note);
+      if (!snapshot) return;
+      const stage = document.createElement("div");
+      stage.className = "stage";
+      const image = document.createElement("img");
+      image.src = snapshot.imageUrl;
+      image.alt = snapshot.imageAlt || side.label;
+      stage.appendChild(image);
+      if (snapshots.length > 1) {
+        const controls = document.createElement("div");
+        controls.className = "controls";
+        const previous = document.createElement("button");
+        previous.textContent = "<";
+        previous.disabled = index === 0;
+        previous.onclick = () => { state[key] = Math.max(0, index - 1); renderSide(key, side); };
+        const label = document.createElement("div");
+        label.className = "label";
+        label.textContent = sideLabel(side, snapshot);
+        const next = document.createElement("button");
+        next.textContent = ">";
+        next.disabled = index === snapshots.length - 1;
+        next.onclick = () => { state[key] = Math.min(snapshots.length - 1, index + 1); renderSide(key, side); };
+        controls.append(previous, label, next);
+        stage.appendChild(controls);
+      } else {
+        const label = document.createElement("div");
+        label.className = "label";
+        label.textContent = sideLabel(side, snapshot);
+        stage.appendChild(label);
+      }
+      if (side.pdfPath) {
+        const pdf = document.createElement("div");
+        pdf.className = "pdf";
+        const link = document.createElement("a");
+        link.href = ${JSON.stringify(
+          'file://',
+        )} + side.pdfPath.split('/').map(encodeURIComponent).join('/');
+        link.textContent = side.pdfPath.split('/').pop() || side.pdfPath;
+        pdf.append("PDF: ", link);
+        stage.appendChild(pdf);
+      }
+      host.appendChild(stage);
+    }
+    renderSide("baseline", comparison.baseline);
+    renderSide("fixed", comparison.fixed);
+  </script>
+</body>
+</html>`
+}
+
+export function PrintDesignPanel({
+  presets = DEFAULT_PRESETS,
+  value,
+  variant = 'sidebar',
+  density,
+  headerAccessory,
+  modes,
+  actions = [],
+  extractionCapability,
+  visionTypesetting,
+  onThemeChange,
+  onProfileExtractRequest,
+}: PrintDesignPanelProps): React.ReactElement {
+  const imageInputId = useId()
+  const [mode, setMode] = useState<PrintDesignMode>('preset')
+  const [presetId, setPresetId] = useState(presets[0]?.id ?? 'default')
+  const [description, setDescription] = useState('')
+  const [themeJson, setThemeJson] = useState('')
+  const [images, setImages] = useState<readonly File[]>([])
+  const [manualInk, setManualInk] = useState(
+    DEFAULT_PURE_RENDER_THEME.color.ink,
+  )
+  const [manualPaper, setManualPaper] = useState(
+    DEFAULT_PURE_RENDER_THEME.color.paper ??
+      DEFAULT_PURE_RENDER_THEME.color.surface ??
+      '#FFFFFF',
+  )
+  const [manualAccent, setManualAccent] = useState(
+    DEFAULT_PURE_RENDER_THEME.color.accent,
+  )
+  const [manualDisplayFont, setManualDisplayFont] = useState<'serif' | 'sans'>(
+    'serif',
+  )
+  const [manualBodyFont, setManualBodyFont] = useState<'serif' | 'sans'>(
+    'serif',
+  )
+  const [manualLabelFont, setManualLabelFont] = useState<'serif' | 'sans'>(
+    'sans',
+  )
+  const [manualMeasure, setManualMeasure] = useState('34rem')
+  const [manualLead, setManualLead] = useState('1.5')
+  const [manualAlign, setManualAlign] = useState<'justified' | 'flush-left'>(
+    'justified',
+  )
+  const [decisions, setDecisions] = useState<readonly [string, string][]>([])
+  const [status, setStatus] = useState<string>(
+    onProfileExtractRequest ? 'Ready' : 'Preset/manual only',
+  )
+  const panelDensity: PrintDesignPanelDensity =
+    density ??
+    (variant === 'popover' || variant === 'workspace'
+      ? 'compact'
+      : 'comfortable')
+  const modeOptions = useMemo(() => {
+    const defaultModes = MODE_OPTIONS.filter(
+      option => option.value === 'preset' || option.value === 'vision',
+    )
+    const allowed = new Set(modes ?? defaultModes.map(option => option.value))
+    return MODE_OPTIONS.filter(option => allowed.has(option.value))
+  }, [modes])
+
+  useEffect(() => {
+    if (modeOptions.some(option => option.value === mode)) return
+    setMode(modeOptions[0]?.value ?? 'preset')
+  }, [mode, modeOptions])
+
+  useEffect(() => {
+    if (!value) return
+    const matchingPreset = presets.find(preset =>
+      themeMatchesPreset(value, preset.theme),
+    )
+    if (matchingPreset) setPresetId(matchingPreset.id)
+  }, [presets, value])
+
+  const activeTheme = useMemo(
+    () =>
+      value ??
+      presets.find(preset => preset.id === presetId)?.theme ??
+      DEFAULT_PURE_RENDER_THEME,
+    [presetId, presets, value],
+  )
+  const activePresetLabel =
+    presets.find(preset => themeMatchesPreset(activeTheme, preset.theme))
+      ?.label ??
+    activeTheme.name ??
+    'Custom theme'
+  const activeDesignSummary = `${activePresetLabel} · ${
+    activeTheme.setting?.align === 'flush-left' ? 'Flush left' : 'Justified'
+  } · ${activeTheme.type.measure}`
+
+  useEffect(() => {
+    setManualInk(activeTheme.color.ink)
+    setManualPaper(paperColorForTheme(activeTheme))
+    setManualAccent(activeTheme.color.accent)
+    setManualDisplayFont(fontRoleForFamily(activeTheme.type.fonts.display))
+    setManualBodyFont(fontRoleForFamily(activeTheme.type.fonts.serif))
+    setManualLabelFont(
+      activeTheme.profile_rules?.caption?.label_style === 'plain'
+        ? 'serif'
+        : 'sans',
+    )
+    setManualMeasure(activeTheme.type.measure)
+    setManualLead(String(activeTheme.type.lead))
+    setManualAlign(manualAlignForTheme(activeTheme.setting?.align))
+  }, [activeTheme])
+
+  function extractionUnavailableReason(
+    targetMode: PrintDesignMode,
+  ): string | undefined {
+    if (targetMode !== 'image' && targetMode !== 'description') {
+      return undefined
+    }
+    if (!onProfileExtractRequest) return 'Extraction unavailable'
+    if (targetMode === 'image' && extractionCapability?.image === false) {
+      return (
+        extractionCapability.imageReason ??
+        extractionCapability.reason ??
+        'Image extraction unavailable for the selected model'
+      )
+    }
+    if (
+      targetMode === 'description' &&
+      extractionCapability?.description === false
+    ) {
+      return (
+        extractionCapability.descriptionReason ??
+        extractionCapability.reason ??
+        'Description extraction unavailable for the selected model'
+      )
+    }
+    return undefined
+  }
+
+  const unavailableReason = extractionUnavailableReason(mode)
+  const displayedStatus =
+    unavailableReason && (mode === 'image' || mode === 'description')
+      ? unavailableReason
+      : status
+  const imageChoiceLabel =
+    images.length > 1
+      ? `${images.length} images`
+      : images[0]?.name ?? 'Choose image'
+  const imageButtonLabel = images.length > 0 ? 'Replace image' : 'Choose image'
+  const unifiedDesignMode = mode === 'preset'
+  const rawVisionReport = visionTypesetting?.report?.length
+    ? visionTypesetting.report
+    : []
+  const visionReport = rawVisionReport
+  const sampleVisionReport =
+    mode === 'vision' && rawVisionReport.length === 0
+      ? DEFAULT_VISION_SAMPLE_REPORT
+      : []
+  const liveReadoutEntries = [
+    ...sampleVisionReport,
+    ...visionReport,
+    ...decisions,
+  ]
+  const displayedReadoutEntries =
+    variant === 'workspace'
+      ? [...liveReadoutEntries].reverse()
+      : liveReadoutEntries
+  const visionEvidence = visionTypesetting?.evidence ?? []
+  const imageSectionEnabled = !modes || modes.includes('image')
+  const descriptionSectionEnabled = !modes || modes.includes('description')
+  const showPresets = unifiedDesignMode
+  const showManualControls = unifiedDesignMode || mode === 'manual'
+  const showReferenceInputs =
+    (unifiedDesignMode && (imageSectionEnabled || descriptionSectionEnabled)) ||
+    mode === 'image' ||
+    mode === 'description'
+  const hasHostExportAction = actions.some(
+    action => /export/i.test(action.id) || /export\s+pdf/i.test(action.label),
+  )
+  const exportAction = actions.find(
+    action => /export/i.test(action.id) || /export\s+pdf/i.test(action.label),
+  )
+  const secondaryActions = actions.filter(action => action !== exportAction)
+  const routeExportThroughVision =
+    visionTypesetting?.enabled === true &&
+    visionTypesetting.onExport !== undefined &&
+    exportAction !== undefined
+  const headerExportDisabled =
+    exportAction?.disabled ||
+    exportAction?.busy ||
+    (routeExportThroughVision &&
+      (visionTypesetting?.exportDisabled || visionTypesetting?.exportBusy))
+  const headerExportBusy = routeExportThroughVision
+    ? visionTypesetting?.exportBusy
+    : exportAction?.busy
+  const headerExportLabel =
+    headerExportBusy && exportAction
+      ? exportAction.busyLabel ?? exportAction.label
+      : (routeExportThroughVision
+          ? visionTypesetting?.exportLabel
+          : exportAction?.label) ?? exportAction?.label
+  const showModeActionButton =
+    mode !== 'preset' &&
+    mode !== 'manual' &&
+    (mode !== 'vision' || !hasHostExportAction)
+
+  function applyPreset(id: string): void {
+    setPresetId(id)
+    const preset = presets.find(item => item.id === id)
+    if (preset) {
+      setDecisions([['apply', `${preset.label} preset selected`]])
+      onThemeChange?.(preset.theme)
+      setStatus('Ready')
+    }
+  }
+
+  async function extract(input?: {
+    mode?: Extract<PrintDesignMode, 'image' | 'description'>
+    images?: readonly File[]
+    prompt?: string
+  }): Promise<void> {
+    const targetMode =
+      input?.mode ?? (mode === 'image' || mode === 'description' ? mode : null)
+    if (!targetMode) return
+    const targetImages = input?.images ?? images
+    const targetPrompt = input?.prompt ?? description
+    const unavailable = extractionUnavailableReason(targetMode)
+    if (unavailable) {
+      setStatus(unavailable)
+      return
+    }
+    if (targetMode === 'image' && targetImages.length === 0) {
+      setStatus('Choose image')
+      return
+    }
+    const requestProfile = onProfileExtractRequest
+    if (!requestProfile) {
+      setStatus('Extraction unavailable')
+      return
+    }
+    setStatus('Extracting')
+    try {
+      const profile = await requestProfile({
+        mode: targetMode,
+        prompt: targetPrompt,
+        promptTemplate: PRINT_TOKEN_EXTRACTION_PROMPT,
+        schema: PRINT_STYLE_PROFILE_SCHEMA,
+        modelPrompt: buildPrintStyleProfilePrompt({
+          mode: targetMode === 'image' ? 'image' : 'description',
+          concerns: targetPrompt,
+          imageName:
+            targetImages.map(file => file.name).join(', ') || undefined,
+          imageMimeType:
+            targetImages.length === 1
+              ? targetImages[0]?.type
+              : 'multiple images',
+        }),
+        image: targetImages[0],
+        images: targetImages,
+      })
+      const result = compilePrintTheme(profile)
+      setDecisions(result.decisions)
+      if (result.theme) {
+        onThemeChange?.(result.theme)
+        setStatus('Compiled')
+      } else {
+        setStatus(result.decisions[0]?.[1] ?? 'Profile rejected')
+      }
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : String(error))
+    }
+  }
+
+  function applyThemeJson(): void {
+    try {
+      const theme = parsePureRenderThemeJson(themeJson)
+      setDecisions([['apply', `${theme.name} JSON selected`]])
+      onThemeChange?.(theme)
+      setStatus('Applied')
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : String(error))
+    }
+  }
+
+  function applyManualTheme(
+    overrides: Partial<{
+      ink: string
+      paper: string
+      accent: string
+      displayFont: 'serif' | 'sans'
+      bodyFont: 'serif' | 'sans'
+      labelFont: 'serif' | 'sans'
+      measure: string
+      lead: string
+      align: 'justified' | 'flush-left'
+    }> = {},
+  ): void {
+    const ink = overrides.ink ?? manualInk
+    const paper = overrides.paper ?? manualPaper
+    const accent = overrides.accent ?? manualAccent
+    const displayRole = overrides.displayFont ?? manualDisplayFont
+    const bodyRole = overrides.bodyFont ?? manualBodyFont
+    const labelRole = overrides.labelFont ?? manualLabelFont
+    const measure = overrides.measure ?? manualMeasure
+    const align = overrides.align ?? manualAlign
+    const leadText = overrides.lead ?? manualLead
+    const lead = Number.parseFloat(leadText)
+    const nextLead = Number.isFinite(lead) && lead >= 1.2 ? lead : 1.5
+    const displayFont = fontStack(displayRole, 'display')
+    const bodyFont = fontStack(bodyRole, 'body')
+    const labelFont = fontStack(labelRole, 'label')
+    const theme: PureRenderTheme = {
+      ...activeTheme,
+      name: 'Manual Theme',
+      color: {
+        ...activeTheme.color,
+        ink,
+        'ink-soft': activeTheme.color['ink-soft'],
+        surface: paper,
+        paper,
+        accent,
+        'accent-ink': accent,
+      },
+      type: {
+        ...activeTheme.type,
+        lead: nextLead,
+        measure: measure.trim() || activeTheme.type.measure,
+        fonts: {
+          ...activeTheme.type.fonts,
+          display: displayFont,
+          serif: bodyFont,
+          sans: labelFont,
+        },
+      },
+      rhythm: `${(10.6 * nextLead).toFixed(1)}pt`,
+      setting: {
+        ...activeTheme.setting,
+        align,
+        hyphenate: align === 'justified',
+      },
+      profile_rules: {
+        ...activeTheme.profile_rules,
+        caption: {
+          ...activeTheme.profile_rules?.caption,
+          label_style: labelRole === 'sans' ? 'small-caps' : 'plain',
+        },
+      },
+      enforced_rules: [
+        ...(activeTheme.enforced_rules ?? []),
+        'Manual theme controls produced token JSON only.',
+      ],
+    }
+    setDecisions([
+      ['tune', `ink ${ink}, paper ${paper}, accent ${accent}`],
+      ['tune', `${displayRole} display, ${bodyRole} body, ${labelRole} labels`],
+      ['tune', `${measure}, lead ${nextLead}, ${align}`],
+      ['note', 'manual controls emit theme tokens, not CSS'],
+    ])
+    onThemeChange?.(theme)
+    setStatus('Ready')
+  }
+
+  async function chooseImages(files: readonly File[]): Promise<void> {
+    if (files.length === 0) {
+      setImages([])
+      setStatus('Choose image')
+      return
+    }
+    const valid: File[] = []
+    for (const file of files) {
+      if (!isSupportedImageFile(file)) {
+        setImages([])
+        setStatus('Use PNG, JPEG, or WebP')
+        return
+      }
+      if (file.size > MAX_IMAGE_BYTES) {
+        setImages([])
+        setStatus('Image too large')
+        return
+      }
+      valid.push(file)
+    }
+    setImages(valid)
+    setStatus(
+      onProfileExtractRequest
+        ? 'Extracting'
+        : valid.length > 1
+        ? `${valid.length} images ready`
+        : 'Image ready',
+    )
+    const sampled = await sampleImageThemeHints(valid[0]!)
+    if (sampled) {
+      setManualInk(sampled.ink)
+      setManualPaper(sampled.paper)
+      setManualAccent(sampled.accent)
+      applyManualTheme({
+        ink: sampled.ink,
+        paper: sampled.paper,
+        accent: sampled.accent,
+      })
+      setDecisions([
+        ['sample', `ink ${sampled.ink}, paper ${sampled.paper}`],
+        ['sample', `accent ${sampled.accent} from local image colors`],
+      ])
+      setStatus('Image sampled')
+    }
+    if (onProfileExtractRequest) {
+      await extract({ mode: 'image', images: valid, prompt: description })
+    }
+  }
+
+  return (
+    <Panel
+      $variant={variant}
+      $density={panelDensity}
+      data-density={panelDensity}
+      data-panel-variant={variant}
+      aria-label="Print design"
+    >
+      <HeaderRow
+        $variant={variant}
+        $align="center"
+        $justify="start"
+        $gap="sm"
+      >
+        {variant === 'workspace' ? (
+          <WorkspaceIdentity>
+            <WorkspaceTitle>Design - PDF Typesetter</WorkspaceTitle>
+            <WorkspaceSummary aria-label="Active print design">
+              <WorkspaceSummaryText title={activeDesignSummary}>
+                {activeDesignSummary}
+              </WorkspaceSummaryText>
+              <WorkspaceSummarySwatches aria-hidden="true">
+                <Swatch $color={activeTheme.color.ink} />
+                <Swatch $color={activeTheme.color.accent} />
+                <Swatch $color={paperColorForTheme(activeTheme)} />
+              </WorkspaceSummarySwatches>
+            </WorkspaceSummary>
+          </WorkspaceIdentity>
+        ) : null}
+        <ModeTabs
+          items={modeOptions.map(option => ({
+            id: option.value,
+            label: option.label,
+          }))}
+          activeId={mode}
+          onSelect={setMode}
+          data-mode-count={modeOptions.length}
+          aria-label="Print design source"
+        />
+        {exportAction || headerAccessory ? (
+          <HeaderActions>
+            {headerAccessory}
+            {exportAction ? (
+              <HeaderActionButton
+                type="button"
+                variant={exportAction.variant ?? 'primary'}
+                disabled={headerExportDisabled}
+                onClick={() => {
+                  if (routeExportThroughVision) {
+                    visionTypesetting?.onExport?.()
+                  } else {
+                    exportAction.onClick()
+                  }
+                }}
+              >
+                {exportAction.icon}
+                {headerExportLabel}
+              </HeaderActionButton>
+            ) : null}
+          </HeaderActions>
+        ) : null}
+      </HeaderRow>
+
+      <DesignMain $variant={variant} $mode={mode}>
+        <WorkspaceControls $variant={variant} $mode={mode}>
+          {showReferenceInputs ? (
+            <DesignSection $variant={variant}>
+              <SectionHeader>
+                <SectionTitle>Reference</SectionTitle>
+              </SectionHeader>
+              <ReferenceGrid $variant={variant}>
+                {(unifiedDesignMode && imageSectionEnabled) ||
+                mode === 'image' ? (
+                  <ReferencePane $variant={variant}>
+                    <ControlStack>
+                      <SectionTitle>Image</SectionTitle>
+                      <ImageChoiceButton
+                        type="button"
+                        variant="subtle"
+                        onClick={() =>
+                          document.getElementById(imageInputId)?.click()
+                        }
+                      >
+                        <PlatformIcon icon={FileImage} size={14} />
+                        {imageButtonLabel}
+                      </ImageChoiceButton>
+                      {images.length > 0 ? (
+                        <ImageSelectionMeta title={imageChoiceLabel}>
+                          <PlatformIcon icon={FileImage} size={14} />
+                          <ImageSelectionName>
+                            {imageChoiceLabel}
+                          </ImageSelectionName>
+                        </ImageSelectionMeta>
+                      ) : null}
+                      <HiddenFile
+                        id={imageInputId}
+                        type="file"
+                        accept="image/*"
+                        multiple
+                        onChange={event => {
+                          void chooseImages(
+                            Array.from(event.currentTarget.files ?? []),
+                          )
+                        }}
+                      />
+                    </ControlStack>
+                  </ReferencePane>
+                ) : null}
+                {(unifiedDesignMode && descriptionSectionEnabled) ||
+                mode === 'description' ? (
+                  <ReferencePane $variant={variant}>
+                    <DescribeStack>
+                      <SectionTitle>Describe</SectionTitle>
+                      <CompactTextArea
+                        rows={panelDensity === 'compact' ? 5 : 6}
+                        value={description}
+                        placeholder={
+                          'Example: I would like an academic article feel. Tables should have a blue header. Keep the body quiet and readable.'
+                        }
+                        onChange={event =>
+                          setDescription(event.currentTarget.value)
+                        }
+                      />
+                      <ReferenceActionRow>
+                        <ReferenceButton
+                          type="button"
+                          variant="subtle"
+                          disabled={
+                            extractionUnavailableReason('description') !==
+                            undefined
+                          }
+                          onClick={() => void extract({ mode: 'description' })}
+                        >
+                          <PlatformIcon icon={WandSparkles} size={14} />
+                          Extract from description
+                        </ReferenceButton>
+                      </ReferenceActionRow>
+                    </DescribeStack>
+                  </ReferencePane>
+                ) : null}
+              </ReferenceGrid>
+            </DesignSection>
+          ) : null}
+
+          {showPresets ? (
+            <DesignSection $variant={variant}>
+              <SectionHeader>
+                <SectionTitle>Presets</SectionTitle>
+              </SectionHeader>
+              <PresetList $variant={variant} aria-label="Print theme presets">
+                {presets.map(preset => (
+                  <PresetOption
+                    key={preset.id}
+                    type="button"
+                    $active={preset.id === presetId}
+                    $density={panelDensity}
+                    $variant={variant}
+                    aria-pressed={preset.id === presetId}
+                    onClick={() => applyPreset(preset.id)}
+                  >
+                    <PresetLabel>{preset.label}</PresetLabel>
+                    <PresetPreview aria-hidden="true">
+                      <PreviewLetter
+                        $family={
+                          preset.theme.type.fonts.display ??
+                          preset.theme.type.fonts.sans
+                        }
+                      >
+                        Aa
+                      </PreviewLetter>
+                      <Swatch $color={preset.theme.color.ink} />
+                      <Swatch $color={preset.theme.color.accent} />
+                      {preset.id === presetId ? (
+                        <PlatformIcon icon={Check} size={12} />
+                      ) : null}
+                    </PresetPreview>
+                  </PresetOption>
+                ))}
+              </PresetList>
+            </DesignSection>
+          ) : null}
+
+          {mode === 'json' ? (
+            <CompactTextArea
+              rows={panelDensity === 'compact' ? 6 : 8}
+              value={themeJson}
+              placeholder="Paste theme JSON"
+              onChange={event => setThemeJson(event.currentTarget.value)}
+            />
+          ) : null}
+
+          {showManualControls ? (
+            <DesignSection $variant={variant}>
+              <SectionHeader>
+                <SectionTitle>Tune</SectionTitle>
+              </SectionHeader>
+              <ManualGrid
+                $density={panelDensity}
+                $variant={variant}
+                aria-label="Manual theme controls"
+              >
+                <ManualField>
+                  Ink
+                  <ManualInput
+                    type="color"
+                    value={manualInk}
+                    onChange={event => {
+                      const ink = event.currentTarget.value
+                      setManualInk(ink)
+                      applyManualTheme({ ink })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Paper
+                  <ManualInput
+                    type="color"
+                    value={manualPaper}
+                    onChange={event => {
+                      const paper = event.currentTarget.value
+                      setManualPaper(paper)
+                      applyManualTheme({ paper })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Accent
+                  <ManualInput
+                    type="color"
+                    value={manualAccent}
+                    onChange={event => {
+                      const accent = event.currentTarget.value
+                      setManualAccent(accent)
+                      applyManualTheme({ accent })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Display
+                  <ManualSelect
+                    value={manualDisplayFont}
+                    onChange={event => {
+                      const displayFont = event.currentTarget.value as
+                        | 'serif'
+                        | 'sans'
+                      setManualDisplayFont(displayFont)
+                      applyManualTheme({ displayFont })
+                    }}
+                  >
+                    <option value="serif">Serif</option>
+                    <option value="sans">Sans</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Body
+                  <ManualSelect
+                    value={manualBodyFont}
+                    onChange={event => {
+                      const bodyFont = event.currentTarget.value as
+                        | 'serif'
+                        | 'sans'
+                      setManualBodyFont(bodyFont)
+                      applyManualTheme({ bodyFont })
+                    }}
+                  >
+                    <option value="serif">Serif</option>
+                    <option value="sans">Sans</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Labels
+                  <ManualSelect
+                    value={manualLabelFont}
+                    onChange={event => {
+                      const labelFont = event.currentTarget.value as
+                        | 'serif'
+                        | 'sans'
+                      setManualLabelFont(labelFont)
+                      applyManualTheme({ labelFont })
+                    }}
+                  >
+                    <option value="sans">Sans</option>
+                    <option value="serif">Serif</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Measure
+                  <ManualInput
+                    value={manualMeasure}
+                    onChange={event => {
+                      const measure = event.currentTarget.value
+                      setManualMeasure(measure)
+                      applyManualTheme({ measure })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Lead
+                  <ManualInput
+                    value={manualLead}
+                    onChange={event => {
+                      const lead = event.currentTarget.value
+                      setManualLead(lead)
+                      applyManualTheme({ lead })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Align
+                  <ManualSelect
+                    value={manualAlign}
+                    onChange={event => {
+                      const align = event.currentTarget.value as
+                        | 'justified'
+                        | 'flush-left'
+                      setManualAlign(align)
+                      applyManualTheme({ align })
+                    }}
+                  >
+                    <option value="justified">Justified</option>
+                    <option value="flush-left">Flush left</option>
+                  </ManualSelect>
+                </ManualField>
+              </ManualGrid>
+            </DesignSection>
+          ) : null}
+        </WorkspaceControls>
+
+        <WorkspaceCanvas $variant={variant} $mode={mode}>
+          {mode === 'vision' ? (
+            <VisionPanel $variant={variant} aria-label="Beta vision typesetting">
+              <VisionSettingsRail $variant={variant}>
+                <VisionSettingsStrip>
+                  <SectionTitle>Beta settings</SectionTitle>
+                  <VisionToggleRow>
+                    <VisionToggleCopy>
+                      <VisionToggleTitle>
+                        Use beta vision typesetting
+                      </VisionToggleTitle>
+                      <VisionToggleStatus>
+                        {visionTypesetting?.status ??
+                          (visionTypesetting?.enabled
+                            ? 'Vision beta enabled.'
+                            : 'Vision beta off.')}
+                      </VisionToggleStatus>
+                    </VisionToggleCopy>
+                    <VisionToggleControls>
+                      <VisionCheckbox
+                        type="checkbox"
+                        checked={visionTypesetting?.enabled === true}
+                        disabled={
+                          visionTypesetting?.loading ||
+                          visionTypesetting?.onToggle === undefined
+                        }
+                        onChange={event => {
+                          void visionTypesetting?.onToggle?.(
+                            event.currentTarget.checked,
+                          )
+                        }}
+                      />
+                    </VisionToggleControls>
+                  </VisionToggleRow>
+                  <VisionMaxFixesField>
+                    Max fixes per issue
+                    <VisionMaxFixesInput
+                      type="number"
+                      min={0}
+                      max={5}
+                      value={visionTypesetting?.maxFixesPerIssue ?? 2}
+                      disabled={
+                        visionTypesetting?.loading ||
+                        visionTypesetting?.onMaxFixesPerIssueChange ===
+                          undefined
+                      }
+                      onChange={event => {
+                        const value = Math.max(
+                          0,
+                          Math.min(
+                            5,
+                            Number.parseInt(event.currentTarget.value, 10) ||
+                              0,
+                          ),
+                        )
+                        visionTypesetting?.onMaxFixesPerIssueChange?.(value)
+                      }}
+                    />
+                  </VisionMaxFixesField>
+                </VisionSettingsStrip>
+              </VisionSettingsRail>
+              <VisionEvidenceColumn>
+                {visionTypesetting?.progress ? (
+                  <VisionProgressStrip
+                    $state={visionTypesetting.progress.state}
+                  >
+                    <VisionProgressState
+                      $state={visionTypesetting.progress.state}
+                    >
+                      {progressStateLabel(visionTypesetting.progress.state)}
+                    </VisionProgressState>
+                    <VisionProgressLabel
+                      title={visionTypesetting.progress.label}
+                    >
+                      {visionTypesetting.progress.label}
+                    </VisionProgressLabel>
+                  </VisionProgressStrip>
+                ) : null}
+                <VisionSnapshotGrid $hasEvidence={visionEvidence.length > 0}>
+                  <VisionSnapshotFrame>
+                    <VisionSnapshotLabel>
+                      Sample page snapshot
+                    </VisionSnapshotLabel>
+                    {visionEvidence.length > 0 ? (
+                      <VisionEvidenceList>
+                        {visionEvidence.map(evidence => (
+                          <VisionEvidenceCard
+                            key={evidence.id}
+                            $tone={evidence.tone ?? 'neutral'}
+                          >
+                            <VisionEvidenceCarousel evidence={evidence} />
+                            <VisionEvidenceCaption>
+                              <VisionEvidenceTitle>
+                                {evidence.label}
+                              </VisionEvidenceTitle>
+                              {evidence.note ? (
+                                <VisionEvidenceNote>
+                                  {evidence.note}
+                                </VisionEvidenceNote>
+                              ) : null}
+                              {evidence.comparison ? (
+                                <VisionEvidenceActions>
+                                  <VisionEvidenceActionButton
+                                    type="button"
+                                    onClick={() =>
+                                      openVisionComparisonWindow(
+                                        evidence.comparison!,
+                                      )
+                                    }
+                                  >
+                                    View fix comparison
+                                  </VisionEvidenceActionButton>
+                                </VisionEvidenceActions>
+                              ) : null}
+                            </VisionEvidenceCaption>
+                          </VisionEvidenceCard>
+                        ))}
+                      </VisionEvidenceList>
+                    ) : visionTypesetting?.snapshotUrl ? (
+                      visionTypesetting.onSnapshotOpen ? (
+                        <VisionSnapshotButton
+                          type="button"
+                          onClick={visionTypesetting.onSnapshotOpen}
+                          aria-label="Open page snapshot preview"
+                        >
+                          <VisionSnapshotImage
+                            src={visionTypesetting.snapshotUrl}
+                            alt={
+                              visionTypesetting.snapshotAlt ??
+                              'Visual typesetting page snapshot'
+                            }
+                          />
+                        </VisionSnapshotButton>
+                      ) : (
+                        <VisionSnapshotImage
+                          src={visionTypesetting.snapshotUrl}
+                          alt={
+                            visionTypesetting.snapshotAlt ??
+                            'Visual typesetting page snapshot'
+                          }
+                        />
+                      )
+                    ) : (
+                      <VisionSnapshotPage aria-label="Sample PDF page snapshot">
+                        <VisionPageHeading />
+                        <VisionPageLine />
+                        <VisionPageLine $width="92%" />
+                        <VisionPageLine $width="98%" />
+                        <VisionPageObject />
+                        <VisionPageLine $width="88%" />
+                        <VisionPageLine />
+                        <VisionPageLine $width="72%" />
+                        <VisionPageLine $width="94%" />
+                        <VisionPageLine $width="84%" />
+                      </VisionSnapshotPage>
+                    )}
+                  </VisionSnapshotFrame>
+                  {visionEvidence.length > 0 ? null : (
+                    <VisionSnapshotCopy>
+                      <VisionSnapshotTitle>
+                        Visual preflight sample
+                      </VisionSnapshotTitle>
+                      <span>
+                        When no export inspection has run yet, the typesetter
+                        keeps a sample page in view and reports the checks it
+                        will run against the next rendered PDF.
+                      </span>
+                      <span>
+                        After a beta export, this area can be replaced by the
+                        live page snapshot from the PDF inspection pass.
+                      </span>
+                    </VisionSnapshotCopy>
+                  )}
+                </VisionSnapshotGrid>
+              </VisionEvidenceColumn>
+            </VisionPanel>
+          ) : null}
+        </WorkspaceCanvas>
+
+        <WorkspaceFooter $variant={variant} $mode={mode}>
+          <DesignSection $variant={variant}>
+            <FooterRow $align="center" $justify="between" $gap="sm">
+              <StatusText title={displayedStatus}>{displayedStatus}</StatusText>
+              {showModeActionButton ? (
+                <Button
+                  type="button"
+                  variant="primary"
+                  disabled={
+                    (mode === 'image' || mode === 'description') &&
+                    unavailableReason !== undefined
+                      ? true
+                      : mode === 'vision'
+                      ? visionTypesetting?.exportDisabled ||
+                        visionTypesetting?.exportBusy ||
+                        visionTypesetting?.onExport === undefined
+                      : false
+                  }
+                  onClick={() => {
+                    if (mode === 'vision') visionTypesetting?.onExport?.()
+                    else if (mode === 'json') applyThemeJson()
+                    else if (mode === 'image' && images.length === 0)
+                      document.getElementById(imageInputId)?.click()
+                    else void extract()
+                  }}
+                >
+                  <PlatformIcon
+                    icon={
+                      mode === 'json'
+                        ? WandSparkles
+                        : mode === 'vision'
+                        ? Download
+                        : WandSparkles
+                    }
+                    size={14}
+                  />
+                  {mode === 'json'
+                    ? 'Use JSON'
+                    : mode === 'vision'
+                    ? visionTypesetting?.exportBusy
+                      ? 'Exporting…'
+                      : visionTypesetting?.exportLabel ?? 'Export PDF'
+                    : mode === 'image' && images.length === 0
+                    ? 'Choose image'
+                    : mode === 'image'
+                    ? 'Update'
+                    : 'Extract'}
+                </Button>
+              ) : null}
+            </FooterRow>
+
+            {secondaryActions.length > 0 ? (
+              <ActionRow
+                $variant={variant}
+                $align="center"
+                $justify="start"
+                $gap="xs"
+              >
+                {secondaryActions.map(action => (
+                  <ActionButton
+                    key={action.id}
+                    type="button"
+                    variant={action.variant ?? 'subtle'}
+                    disabled={action.disabled || action.busy}
+                    onClick={action.onClick}
+                  >
+                    {action.icon}
+                    {action.busy
+                      ? action.busyLabel ?? action.label
+                      : action.label}
+                  </ActionButton>
+                ))}
+              </ActionRow>
+            ) : null}
+
+            {liveReadoutEntries.length > 0 && variant === 'sidebar' ? (
+              <DecisionReadout entries={displayedReadoutEntries} />
+            ) : null}
+          </DesignSection>
+        </WorkspaceFooter>
+      </DesignMain>
+
+      {variant !== 'sidebar' ? (
+        <DesignReadout $variant={variant} aria-label="Live design readout">
+          <DesignSection $variant={variant}>
+            <SectionHeader>
+              <SectionTitle>Live readout</SectionTitle>
+              <StatusText title={displayedStatus}>{displayedStatus}</StatusText>
+            </SectionHeader>
+            {displayedReadoutEntries.length > 0 ? (
+              <DecisionReadout entries={displayedReadoutEntries} />
+            ) : (
+              <StatusText>No design decisions yet.</StatusText>
+            )}
+          </DesignSection>
+        </DesignReadout>
+      ) : null}
+    </Panel>
+  )
+}
+
+function DecisionReadout({
+  entries,
+}: {
+  entries: readonly (readonly [string, string])[]
+}): React.ReactElement {
+  let previousGroup: string | undefined
+  return (
+    <DecisionStream>
+      <DecisionList>
+        {entries.map(([type, message], index) => {
+          const group = decisionGroupLabel(message)
+          const startsGroup = group !== undefined && group !== previousGroup
+          if (group) previousGroup = group
+          return (
+            <DecisionItem
+              key={`${type}-${index}`}
+              $type={type}
+              $startsGroup={startsGroup}
+            >
+              {startsGroup ? (
+                <DecisionGroupLabel aria-label={`${group} event group`}>
+                  {group}
+                </DecisionGroupLabel>
+              ) : null}
+              <DecisionType $type={type}>{type.toUpperCase()}</DecisionType>
+              <DecisionMessage size="sm" tone="secondary">
+                {formatDecisionMessage(message)}
+              </DecisionMessage>
+            </DecisionItem>
+          )
+        })}
+      </DecisionList>
+    </DecisionStream>
+  )
+}
+
+function formatDecisionMessage(message: string): ReactNode {
+  const pdfMatch = message.match(/^PDF(?:\s+\((.*?)\))?:\s+(.+\.pdf)$/i)
+  if (pdfMatch) {
+    const timestamp = pdfMatch[1]
+    const pdfPath = pdfMatch[2] ?? ''
+    return (
+      <DecisionLink href={fileUrlForPath(pdfPath)}>
+        {timestamp
+          ? `${timestamp} · ${fileNameFromPath(pdfPath)}`
+          : fileNameFromPath(pdfPath)}
+      </DecisionLink>
+    )
+  }
+  const parts = message.split(/(#[0-9a-fA-F]{6}\b)/g)
+  return parts.map((part, index) =>
+    /^#[0-9a-fA-F]{6}$/.test(part) ? (
+      <DecisionColor key={`${part}-${index}`} $color={part}>
+        {part}
+      </DecisionColor>
+    ) : (
+      part
+    ),
+  )
+}
+
+function decisionGroupLabel(message: string): string | undefined {
+  const passMatch = message.match(/\bPass\s+(\d+)\b/i)
+  if (!passMatch) return undefined
+  return `Pass ${passMatch[1]}`
+}
+
+function fileNameFromPath(path: string): string {
+  return path.split('/').filter(Boolean).pop() ?? path
+}
+
+function fileUrlForPath(path: string): string {
+  return `file://${path
+    .split('/')
+    .map(part => encodeURIComponent(part))
+    .join('/')}`
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function progressStateLabel(state: PrintDesignVisionProgress['state']): string {
+  switch (state) {
+    case 'running':
+      return 'In flight'
+    case 'complete':
+      return 'Complete'
+    case 'stopped':
+      return 'Stopped'
+    case 'pass':
+      return 'Pass'
+    default:
+      return 'Ready'
+  }
+}
+
+function decisionTone(type: string): 'warn' | 'good' | 'info' | 'neutral' {
+  const normalized = type.toLowerCase()
+  if (
+    ['warn', 'warning', 'reject', 'fallback', 'stopped', 'issue'].includes(
+      normalized,
+    )
+  ) {
+    return 'warn'
+  }
+  if (['pass', 'apply', 'fix'].includes(normalized)) return 'good'
+  if (
+    [
+      'candidate',
+      'vision',
+      'inspect',
+      'snapshot',
+      'pdf',
+      'sample',
+      'check',
+      'progress',
+    ].includes(normalized)
+  ) {
+    return 'info'
+  }
+  return 'neutral'
+}
+
+function decisionBadgeBackground(type: string): string {
+  switch (decisionTone(type)) {
+    case 'warn':
+      return '#fff6e5'
+    case 'good':
+      return '#effaf3'
+    case 'info':
+      return '#f1f6ff'
+    default:
+      return 'var(--print-design-page-surface)'
+  }
+}
+
+function decisionBackground(type: string): string {
+  switch (decisionTone(type)) {
+    case 'warn':
+      return 'linear-gradient(90deg, #fffaf0, transparent 44%)'
+    case 'good':
+      return 'linear-gradient(90deg, #f8fff9, transparent 36%)'
+    case 'info':
+      return 'linear-gradient(90deg, #f8fbff, transparent 36%)'
+    default:
+      return 'transparent'
+  }
+}
+
+function currentDecisionBackground(type: string): string {
+  switch (decisionTone(type)) {
+    case 'warn':
+      return 'linear-gradient(90deg, #fff4dc, transparent 58%)'
+    case 'good':
+      return 'linear-gradient(90deg, #effaf3, transparent 52%)'
+    case 'info':
+      return 'linear-gradient(90deg, #eef5ff, transparent 52%)'
+    default:
+      return 'var(--print-design-page-surface)'
+  }
+}
+
+function decisionBorder(type: string): string {
+  switch (decisionTone(type)) {
+    case 'warn':
+      return '#dfad59'
+    case 'good':
+      return '#8cc7a0'
+    case 'info':
+      return '#9eb9df'
+    default:
+      return 'var(--platform-colors-border)'
+  }
+}
+
+function decisionText(type: string): string {
+  switch (decisionTone(type)) {
+    case 'warn':
+      return '#8a5a10'
+    case 'good':
+      return '#2f744b'
+    case 'info':
+      return '#426489'
+    default:
+      return 'var(--platform-colors-text-secondary)'
+  }
+}