@puredesktop/puredesktop-ui-bridge 2.1.6 → 2.1.8

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

@@ -1,4 +1,12 @@
-import { Check, Download, FileImage, WandSparkles, X } from 'lucide-react'
+import {
+  Check,
+  Download,
+  FileImage,
+  Play,
+  Square,
+  WandSparkles,
+  X,
+} from 'lucide-react'
 import type { CSSProperties, ReactNode } from 'react'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 import { styled } from 'styled-components'
@@ -65,6 +73,14 @@ export interface PrintDesignVisionTypesetting {
   snapshotUrl?: string
   snapshotAlt?: string
   onSnapshotOpen?: () => void
+  /** Issue chips beside the latest page snapshot, flipped to fixed as patches land. */
+  snapshotIssues?: readonly PrintDesignVisionSnapshotIssue[]
+  /**
+   * Accumulating per-render snapshot strip: every checked page and fix
+   * attempt appends a card (image + issue chips) instead of replacing the
+   * previous one, so a run reads as scrollable progress.
+   */
+  snapshotHistory?: readonly PrintDesignVisionSnapshotHistoryEntry[]
   maxFixesPerIssue?: number
   onMaxFixesPerIssueChange?: (value: number) => void
   exportLabel?: string
@@ -72,6 +88,34 @@ export interface PrintDesignVisionTypesetting {
   exportDisabled?: boolean
   onToggle?: (enabled: boolean) => void | Promise<void>
   onExport?: () => void
+  /** Stop a running typesetting loop; shown while progress.state is running. */
+  onStop?: () => void
+}
+
+export interface PrintDesignLivePreview {
+  /** Post-layout Paged.js document HTML (no scripts run on display). */
+  html?: string
+  pageCount?: number
+  loading?: boolean
+}
+
+export interface PrintDesignVisionSnapshotIssue {
+  id: string
+  label: string
+  state: 'open' | 'fixed'
+}
+
+export interface PrintDesignVisionSnapshotHistoryEntry {
+  id: string
+  url: string
+  /** e.g. "Page 2" or "Page 2 · fix 1" */
+  label: string
+  alt?: string
+  /** Empty/omitted issues render a single pass chip. */
+  issues?: readonly PrintDesignVisionSnapshotIssue[]
+  /** Inspector comment shown with the card (recommendation, fix summary). */
+  note?: string
+  onOpen?: () => void
 }
 
 export interface PrintDesignVisionProgress {
@@ -118,6 +162,13 @@ export interface PrintDesignVisionSnapshot {
   onOpen?: () => void
 }
 
+/** Host-document excerpt shown in the live preview instead of sample copy. */
+export interface PrintDesignPreviewDocument {
+  title?: string
+  byline?: string
+  paragraphs?: readonly string[]
+}
+
 export interface PrintDesignPanelProps {
   presets?: readonly PrintDesignThemePreset[]
   value?: PureRenderTheme
@@ -125,6 +176,17 @@ export interface PrintDesignPanelProps {
   density?: PrintDesignPanelDensity
   headerAccessory?: ReactNode
   modes?: readonly PrintDesignMode[]
+  /**
+   * The document being exported, for the live preview. When present, the
+   * preview typesets THIS content (a "Sample" checkbox switches back to the
+   * built-in copy); when absent, the sample is used.
+   */
+  previewDocument?: PrintDesignPreviewDocument
+  /**
+   * Real Paged.js live preview (post-layout HTML, all pages). When present
+   * it replaces the styled facsimile in the workspace well.
+   */
+  livePreview?: PrintDesignLivePreview
   actions?: readonly PrintDesignPanelAction[]
   extractionCapability?: PrintDesignExtractionCapability
   visionTypesetting?: PrintDesignVisionTypesetting
@@ -152,6 +214,12 @@ export interface PrintDesignPopoverProps {
 const DEFAULT_PRESETS: readonly PrintDesignThemePreset[] =
   PURE_RENDER_THEME_PRESETS
 
+const SAMPLE_PREVIEW_PARAGRAPHS: readonly string[] = [
+  'Typography is the craft of endowing human language with a durable visual form. A page earns trust quietly: a steady measure, an even rhythm, ink that sits comfortably on paper.',
+  'The reader should notice none of it. Margins hold the text the way hands hold a book, and the leading you chose above sets the pace at which the eye walks each line — no faster, no slower.',
+  'Change a control and this page follows: display and body faces, the accent that marks structure, the alignment of this very paragraph.',
+]
+
 const DEFAULT_VISION_SAMPLE_REPORT = [
   ['sample', 'No export inspection has run yet.'],
   [
@@ -210,11 +278,32 @@ function snapshotDisplayLabel(
 const Panel = styled.section<{
   $variant: PrintDesignPanelVariant
   $density: PrintDesignPanelDensity
+  $mode: PrintDesignMode
 }>`
   --print-design-page-surface: var(--platform-colors-elevated, #fff);
   --print-design-panel-surface: var(--platform-colors-surface, #ffffff);
   --print-design-preview-paper: #fff;
   --platform-panel-tab-surface: var(--print-design-page-surface);
+  /* Shared export component: identity is INHERITED from the host app via
+     --app-acc / --app-block (Writer citron, Manuscript olive, …). Never a
+     baked-in colour. --app-block is the deep desaturated variant for the one
+     large fill (the Export primary) so white text stays legible on
+     light-base hosts. */
+  --print-design-hue: var(--app-acc, var(--platform-colors-accent));
+  --print-design-hue-block: var(
+    --app-block,
+    var(--app-acc, var(--platform-colors-accent))
+  );
+  --print-design-mono: var(
+    --platform-typography-font-family-mono,
+    'JetBrains Mono',
+    ui-monospace,
+    monospace
+  );
+  --print-design-faint: var(
+    --ink-faint,
+    var(--platform-colors-text-secondary)
+  );
 
   display: grid;
   gap: ${({ $variant }) =>
@@ -230,7 +319,9 @@ const Panel = styled.section<{
     $variant === 'workspace'
       ? `
         flex: 1 1 auto;
-        grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
+        /* Merged Typesetter: DesignMain (controls | well) plus a slim right
+           rail carrying the run summary/Activity ledger. */
+        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
         grid-template-rows: auto minmax(0, 1fr);
         align-content: stretch;
         align-items: stretch;
@@ -398,6 +489,8 @@ const WorkspaceSummaryText = styled.span`
   max-width: 260px;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--print-design-faint);
+  font-family: var(--print-design-mono);
 `
 
 const WorkspaceSummarySwatches = styled.span`
@@ -424,11 +517,36 @@ const HeaderActionButton = styled(Button)`
   white-space: nowrap;
 `
 
+/**
+ * The one identity-carrying primary in this component. Uses the host's
+ * --app-block (deep desaturated hue, white text) so it reads correctly on
+ * light-base hosts like Writer/Manuscript — never a hard-coded colour.
+ */
+const ExportPrimaryButton = styled(HeaderActionButton)`
+  && {
+    border-color: var(--print-design-hue-block);
+    background: var(--print-design-hue-block);
+    color: #fff;
+  }
+
+  &&:hover:not(:disabled) {
+    border-color: var(--print-design-hue-block);
+    background: color-mix(
+      in oklch,
+      var(--print-design-hue-block) 92%,
+      white 8%
+    );
+  }
+`
+
 const SectionTitle = styled.div`
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
+  color: var(--print-design-faint);
+  font-family: var(--print-design-mono);
+  font-size: 10px;
   font-weight: var(--platform-typography-font-weight-semibold);
+  letter-spacing: 0.08em;
   line-height: 1.2;
+  text-transform: uppercase;
 `
 
 const DesignSection = styled.section<{ $variant: PrintDesignPanelVariant }>`
@@ -481,18 +599,15 @@ const DesignMain = styled.div<{
   gap: var(--platform-spacing-sm);
   background: var(--print-design-page-surface);
 
-  ${({ $variant, $mode }) =>
+  ${({ $variant }) =>
     $variant === 'workspace'
       ? `
+        /* Merged view: slim controls column, the page well takes the rest. */
         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)'};
+        grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr) auto;
+        gap: var(--platform-spacing-md);
         min-height: 0;
         overflow: hidden;
       `
@@ -513,33 +628,18 @@ const WorkspaceControls = styled.div<{
       ? `
         display: grid;
         align-content: start;
-        gap: var(--platform-spacing-md);
+        gap: var(--platform-spacing-lg);
         min-width: 0;
         min-height: 0;
         overflow: auto;
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
         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<{
@@ -553,29 +653,14 @@ const WorkspaceFooter = styled.div<{
         align-self: end;
         gap: var(--platform-spacing-sm);
         min-width: 0;
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
         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<{
@@ -586,7 +671,8 @@ const WorkspaceCanvas = styled.div<{
     $variant === 'workspace'
       ? `
         display: grid;
-        align-content: start;
+        grid-template-rows: minmax(0, 1fr);
+        align-content: stretch;
         gap: var(--platform-spacing-md);
         min-width: 0;
         min-height: 0;
@@ -598,22 +684,6 @@ const WorkspaceCanvas = styled.div<{
       : `
         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 }>`
@@ -650,6 +720,157 @@ const DesignReadout = styled.aside<{ $variant: PrintDesignPanelVariant }>`
       : ''}
 `
 
+/**
+ * Live typeset preview: a miniature page rendered from the ACTIVE theme —
+ * fonts, ink/paper/accent, lead, alignment — updating with every control.
+ * The stage sits on --well so the page floats like paper.
+ */
+const PreviewStage = styled.div`
+  container-type: inline-size;
+  display: grid;
+  align-content: start;
+  justify-items: center;
+  gap: var(--platform-spacing-sm);
+  width: 100%;
+  min-height: 0;
+  padding: var(--platform-spacing-md);
+  border-radius: var(--platform-radius-md);
+  background: var(--well, var(--platform-colors-surface-active, #eceef1));
+  overflow: auto;
+`
+
+const PreviewPage = styled.div<{
+  $paper: string
+  $ink: string
+  $bodyFont: string
+  $lead: number
+  $justified: boolean
+}>`
+  /* Fill the preview column (the whole point of the pane) and size type
+     with the container so the page reads like a page at any width. NOTE:
+     padding is in cqw, not % — percentage padding resolves against the
+     CONTAINING BLOCK's width, which blew the margins up to stage-width
+     proportions. */
+  width: min(92cqw, 720px);
+  aspect-ratio: 1 / 1.414;
+  padding: 6.5cqw 6cqw;
+  background: ${({ $paper }) => $paper};
+  box-shadow:
+    0 1px 2px rgba(15, 18, 20, 0.14),
+    0 10px 28px rgba(15, 18, 20, 0.14);
+  color: ${({ $ink }) => $ink};
+  font-family: ${({ $bodyFont }) => $bodyFont};
+  font-size: clamp(10.5px, 1.7cqw, 16px);
+  line-height: ${({ $lead }) => $lead};
+  text-align: ${({ $justified }) => ($justified ? 'justify' : 'left')};
+  overflow: hidden;
+  user-select: none;
+`
+
+const PreviewKicker = styled.div<{ $accent: string; $labelFont: string }>`
+  margin-bottom: 0.9em;
+  color: ${({ $accent }) => $accent};
+  font-family: ${({ $labelFont }) => $labelFont};
+  font-size: 0.72em;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+`
+
+const PreviewTitle = styled.div<{ $displayFont: string }>`
+  margin-bottom: 0.35em;
+  font-family: ${({ $displayFont }) => $displayFont};
+  font-size: 1.8em;
+  font-weight: 600;
+  line-height: 1.18;
+  text-align: left;
+`
+
+const PreviewByline = styled.div`
+  margin-bottom: 1.4em;
+  font-size: 0.82em;
+  opacity: 0.72;
+  text-align: left;
+`
+
+const PreviewRule = styled.div<{ $accent: string }>`
+  height: 1.5px;
+  margin-bottom: 1.4em;
+  background: ${({ $accent }) => $accent};
+`
+
+const PreviewParagraph = styled.p`
+  margin: 0 0 0.9em;
+  hyphens: auto;
+`
+
+const PreviewFolio = styled.div`
+  margin-top: 1.6em;
+  font-family: var(--print-design-mono);
+  font-size: 0.72em;
+  opacity: 0.55;
+  text-align: center;
+`
+
+/** Vision mode: the LIVE page snapshot from the Paged.js inspection pass. */
+const PreviewSnapshotButton = styled.button`
+  display: block;
+  width: min(92cqw, 720px);
+  padding: 0;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 2px;
+  background: var(--print-design-preview-paper);
+  box-shadow:
+    0 1px 2px rgba(15, 18, 20, 0.14),
+    0 10px 28px rgba(15, 18, 20, 0.14);
+  cursor: pointer;
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`
+
+const PreviewSampleToggle = styled.label`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 5px;
+  color: var(--print-design-faint);
+  font-family: var(--print-design-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  input {
+    margin: 0;
+    accent-color: var(--print-design-hue);
+  }
+
+  &[data-disabled='true'] {
+    opacity: 0.5;
+    cursor: default;
+  }
+`
+
+const PreviewMeta = styled.div`
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--print-design-faint);
+  font-family: var(--print-design-mono);
+  font-size: var(--platform-typography-font-size-xs);
+`
+
+const ActivityScroll = styled.div<{ $tall?: boolean }>`
+  /* In vision mode the report IS the rail's main content — let it run tall. */
+  max-height: ${({ $tall }) => ($tall ? 'none' : '200px')};
+  min-height: 0;
+  overflow: auto;
+`
+
 const ModeTabs = styled(PanelTabStrip<PrintDesignMode>)`
   grid-area: nav;
   justify-self: start;
@@ -702,12 +923,14 @@ const PresetOption = styled.button<{
   padding: ${({ $density }) =>
     $density === 'compact' ? '3px 8px' : '5px 9px'};
   border: 1px solid var(--platform-colors-border);
+  /* Selected preset carries the HOST hue (edge + underline), not the theme
+     accent — identity marks the choice, preset palettes stay content. */
   border-color: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-accent, var(--platform-colors-border))'
-      : 'var(--platform-colors-border)'};
+    $active ? 'var(--print-design-hue)' : 'var(--platform-colors-border)'};
   border-radius: var(--platform-radius-sm);
   background: var(--print-design-panel-surface);
+  box-shadow: ${({ $active }) =>
+    $active ? 'inset 0 -2px 0 0 var(--print-design-hue)' : 'none'};
   color: var(--platform-colors-text);
   font: inherit;
   font-size: var(--platform-typography-font-size-xs);
@@ -747,8 +970,9 @@ const ControlStack = styled.div`
 
 const ReferenceGrid = styled.div<{ $variant: PrintDesignPanelVariant }>`
   display: grid;
+  /* Workspace: the controls column is narrow — stack Image and Describe. */
   grid-template-columns: ${({ $variant }) =>
-    $variant === 'popover' || $variant === 'workspace'
+    $variant === 'popover'
       ? 'minmax(240px, 0.72fr) minmax(360px, 1.28fr)'
       : 'minmax(0, 1fr)'};
   gap: var(--platform-spacing-sm);
@@ -790,8 +1014,11 @@ const VisionPanel = styled.div<{ $variant: PrintDesignPanelVariant }>`
     $variant === 'workspace'
       ? `
         grid-template-columns: minmax(0, 1fr);
-        align-items: start;
+        grid-template-rows: auto minmax(0, 1fr);
+        align-content: stretch;
+        align-items: stretch;
         gap: var(--platform-spacing-sm);
+        min-height: 0;
       `
       : ''}
 `
@@ -812,11 +1039,11 @@ const VisionSettingsRail = styled.div<{ $variant: PrintDesignPanelVariant }>`
 `
 
 const VisionEvidenceColumn = styled.div`
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--platform-spacing-sm);
   min-width: 0;
   min-height: 0;
-  align-content: start;
 `
 
 const VisionSettingsStrip = styled.div`
@@ -1226,16 +1453,17 @@ const ManualGrid = styled.div<{
     $variant === 'popover'
       ? 'repeat(3, minmax(132px, 156px))'
       : $variant === 'workspace'
-      ? 'repeat(3, minmax(160px, 1fr))'
+      ? 'repeat(2, minmax(160px, 1fr))'
       : $density === 'compact'
       ? 'repeat(2, minmax(0, 1fr))'
       : 'repeat(3, minmax(0, 1fr))'};
+  /* 8px rhythm between tune rows. */
   gap: ${({ $density, $variant }) =>
     $variant === 'popover'
       ? 'var(--platform-spacing-xs) var(--platform-spacing-sm)'
       : $density === 'compact'
       ? 'var(--platform-spacing-xs)'
-      : 'var(--platform-spacing-sm)'};
+      : '8px 16px'};
   justify-content: start;
   max-width: ${({ $variant }) => ($variant === 'popover' ? '504px' : 'none')};
 
@@ -1254,10 +1482,13 @@ const ManualGrid = styled.div<{
 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);
+  gap: 4px;
+  color: var(--print-design-faint);
+  font-family: var(--print-design-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
   line-height: 1.2;
+  text-transform: uppercase;
 
   ${({ $span }) =>
     $span === 'wide'
@@ -1271,7 +1502,7 @@ const ManualField = styled.label<{ $span?: 'wide' }>`
       : ''}
 `
 
-const ManualInput = styled.input`
+const ManualInput = styled.input<{ $mono?: boolean }>`
   width: 100%;
   min-width: 0;
   min-height: 28px;
@@ -1281,15 +1512,64 @@ const ManualInput = styled.input`
   background: var(--print-design-page-surface);
   color: var(--platform-colors-text);
   font: inherit;
+  font-family: ${({ $mono }) =>
+    $mono ? 'var(--print-design-mono)' : 'inherit'};
   font-size: var(--platform-typography-font-size-xs);
+  letter-spacing: normal;
   line-height: 1.2;
+  text-transform: none;
+`
+
+/**
+ * Ink / Paper / Accent as SWATCH CHIPS + hex, not full-width colour slabs
+ * (the fill-large mistake — a giant Accent bar read as identity; these are
+ * the DOCUMENT's colours and stay user-set, just presented small). The chip
+ * is bordered so a white Paper value still reads as a control, and the
+ * invisible native input keeps the OS picker.
+ */
+const ColorChipsRow = styled.div`
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+`
+
+const ColorChipSwatch = styled.span<{ $color: string }>`
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: ${({ $color }) => $color};
+  cursor: pointer;
 
-  &[type='color'] {
-    height: 28px;
-    padding: 2px;
+  input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
   }
 `
 
+const ColorChipValue = styled.span`
+  align-self: center;
+  color: var(--platform-colors-text);
+  font-family: var(--print-design-mono);
+  font-size: var(--platform-typography-font-size-xs);
+  letter-spacing: normal;
+  text-transform: lowercase;
+`
+
+const ColorChipControl = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+`
+
 const ManualSelect = styled.select`
   width: 100%;
   min-width: 0;
@@ -1345,8 +1625,9 @@ const StatusText = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
+  color: var(--print-design-faint);
+  font-family: var(--print-design-mono);
+  font-size: var(--platform-typography-font-size-xs);
   line-height: var(--platform-typography-line-height-base);
 `
 
@@ -1418,53 +1699,225 @@ const DecisionType = styled.span<{ $type: string }>`
   white-space: nowrap;
 `
 
-const DecisionMessage = styled(Text)`
+const VisionPagesScroll = styled.div`
+  /* The grey well: same treatment as the app page surfaces — pages sit
+     forward on a sunken ground so each snapshot reads as a PAGE. */
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-xl, 32px);
+  /* Fill the canvas column — no dead white band under the well. */
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  padding: var(--platform-spacing-lg, 24px);
+  background: var(--well, var(--platform-colors-background, #ececec));
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+`
+
+const VisionPageCard = styled.div`
+  /* Page + its annotation rail travel as one centered unit — the notes sit
+     right beside the page, not stranded at the far edge of the well. */
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--platform-spacing-md);
   min-width: 0;
-  display: block;
-  padding-top: 1px;
+`
+
+const VisionPageImageButton = styled.button`
+  display: flex;
+  justify-content: center;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: zoom-in;
+
+  img {
+    display: block;
+    /* Fit the WHOLE page in the frame. */
+    max-height: 60vh;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+    background: #fff;
+    box-shadow:
+      0 1px 2px rgb(0 0 0 / 0.16),
+      0 10px 28px rgb(0 0 0 / 0.14);
+  }
+`
+
+const VisionPageAnnotations = styled.div`
+  /* White rail: the card's label, chips and inspector note on a raised
+     surface beside the page. */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 0 0 240px;
+  width: 240px;
+  padding: 12px 14px;
+  background: var(--platform-colors-elevated, #fff);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+`
+
+const VisionPageNote = styled.span`
   color: var(--platform-colors-text-secondary);
   font-size: var(--platform-typography-font-size-xs);
-  line-height: 1.55;
+  line-height: 1.5;
   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;
+/**
+ * Presentation chrome injected into the live preview document: the grey
+ * well behind centered pages with a paper shadow — matching the snapshot
+ * strip. The iframe cannot read the app's CSS variables, so the well
+ * colour is a fixed fallback.
+ */
+const LIVE_PREVIEW_CHROME = `<style data-live-preview-chrome>
+  html, body { background: #eceef1 !important; }
+  .pagedjs_pages { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 28px 0; }
+  .pagedjs_page { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 10px 28px rgb(0 0 0 / 0.14); }
+</style>`
+
+function livePreviewDocument(html: string): string {
+  return html.includes('</head>')
+    ? html.replace('</head>', `${LIVE_PREVIEW_CHROME}</head>`)
+    : `${LIVE_PREVIEW_CHROME}${html}`
+}
 
-  &::before {
-    content: '';
-    width: 0.75em;
-    height: 0.75em;
-    border: 1px solid var(--platform-colors-border);
-    border-radius: 2px;
-    background: ${({ $color }) => $color};
-  }
+const LivePreviewFrame = styled.iframe`
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 480px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--well, var(--platform-colors-background, #ececec));
 `
 
-const DecisionLink = styled.a`
-  color: var(--platform-colors-accent);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
+const WellViewSwitch = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
 `
 
-const HiddenFile = styled.input`
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  position: absolute;
-  pointer-events: none;
+const WellViewButton = styled.button<{ $active: boolean }>`
+  font-family: var(--print-design-mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: var(--platform-radius-sm);
+  border: 1px solid
+    ${({ $active }) =>
+      $active ? 'var(--print-design-hue)' : 'var(--platform-colors-border)'};
+  background: ${({ $active }) =>
+    $active
+      ? 'color-mix(in srgb, var(--print-design-hue) 10%, transparent)'
+      : 'transparent'};
+  color: var(--platform-colors-text);
+  cursor: pointer;
 `
 
-export function PrintDesignPopover({
+const PageZoomOverlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(15 17 21 / 0.62);
+  cursor: zoom-out;
+`
+
+const PageZoomImage = styled.img`
+  max-width: 92vw;
+  max-height: 92vh;
+  width: auto;
+  height: auto;
+  background: #fff;
+  box-shadow: 0 24px 80px rgb(0 0 0 / 0.45);
+`
+
+const SnapshotHistoryLabel = styled.span`
+  font-family: var(--print-design-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--print-design-faint, var(--platform-colors-text-secondary));
+`
+
+const SnapshotIssueList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+`
+
+const SnapshotIssueRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+`
+
+const SnapshotIssueLabel = styled.span<{ $fixed: boolean }>`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  text-decoration: ${({ $fixed }) => ($fixed ? 'line-through' : 'none')};
+  opacity: ${({ $fixed }) => ($fixed ? 0.7 : 1)};
+`
+
+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',
@@ -1623,6 +2076,15 @@ function paperColorForTheme(theme: PureRenderTheme): string {
   return theme.color.paper ?? theme.color.surface ?? '#FFFFFF'
 }
 
+/** Numeric leading for the live preview page (type.lead is number | string). */
+function previewLeadValue(theme: PureRenderTheme): number {
+  const lead =
+    typeof theme.type.lead === 'number'
+      ? theme.type.lead
+      : Number.parseFloat(theme.type.lead)
+  return Number.isFinite(lead) && lead >= 1.1 && lead <= 2.4 ? lead : 1.5
+}
+
 function fontRoleForFamily(family: string | undefined): 'serif' | 'sans' {
   return /sans|inter|arial|helvetica|system-ui/i.test(family ?? '')
     ? 'sans'
@@ -1846,10 +2308,15 @@ export function PrintDesignPanel({
   actions = [],
   extractionCapability,
   visionTypesetting,
+  previewDocument,
+  livePreview,
   onThemeChange,
   onProfileExtractRequest,
 }: PrintDesignPanelProps): React.ReactElement {
   const imageInputId = useId()
+  // Preview shows the host document by default; "Sample" opts back into the
+  // built-in copy (and is forced when the host supplies no content).
+  const [useSampleContent, setUseSampleContent] = useState(false)
   const [mode, setMode] = useState<PrintDesignMode>('preset')
   const [presetId, setPresetId] = useState(presets[0]?.id ?? 'default')
   const [description, setDescription] = useState('')
@@ -1880,6 +2347,59 @@ export function PrintDesignPanel({
   const [manualAlign, setManualAlign] = useState<'justified' | 'flush-left'>(
     'justified',
   )
+  const [manualHeadingRule, setManualHeadingRule] = useState<
+    'none' | 'underline'
+  >('none')
+  const [manualEyebrow, setManualEyebrow] = useState('')
+  const [manualDropCap, setManualDropCap] = useState(false)
+  const [manualColumns, setManualColumns] = useState<1 | 2>(1)
+  const [manualMarginY, setManualMarginY] = useState('')
+  const [manualMarginX, setManualMarginX] = useState('')
+  const [manualTableRule, setManualTableRule] = useState<
+    'hairline' | 'light' | 'medium'
+  >('light')
+  const [manualTableHeader, setManualTableHeader] = useState<
+    'default' | 'plain' | 'shaded' | 'accent'
+  >('default')
+  const [manualTableDensity, setManualTableDensity] = useState<
+    'airy' | 'regular' | 'compact'
+  >('regular')
+  const [manualTableGrid, setManualTableGrid] = useState(false)
+  const [manualRunningHeader, setManualRunningHeader] = useState<
+    'none' | 'title' | 'section' | 'custom'
+  >('none')
+  const [manualRunningHeaderText, setManualRunningHeaderText] = useState('')
+  const [manualFolio, setManualFolio] = useState<'page' | 'none'>('page')
+  const [manualFolioSlot, setManualFolioSlot] = useState<
+    'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-right'
+  >('bottom-center')
+  const [manualFolioStyle, setManualFolioStyle] = useState<
+    'plain' | 'accent' | 'of-total'
+  >('plain')
+  const [manualCoverPage, setManualCoverPage] = useState(false)
+  const [manualCoverBackground, setManualCoverBackground] = useState('')
+  const [manualCoverAuthor, setManualCoverAuthor] = useState('')
+  const [manualCoverDate, setManualCoverDate] = useState('')
+  const [manualCoverImage, setManualCoverImage] = useState('')
+  const [manualToc, setManualToc] = useState(false)
+  const coverImageInputRef = useRef<HTMLInputElement | null>(null)
+  // Workspace: the Reference (image/describe) inputs start collapsed.
+  const [referenceOpen, setReferenceOpen] = useState(false)
+  const [manualLogo, setManualLogo] = useState('')
+  const [manualLogoSlot, setManualLogoSlot] = useState<
+    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  >('top-right')
+  // Which face the well shows once a run exists: the live preview or the
+  // last run's annotated pages. Style edits flip back to live and mark the
+  // pages stale until the next Run.
+  const [wellView, setWellView] = useState<'live' | 'pages'>('pages')
+  const [stripStale, setStripStale] = useState(false)
+  // In-window zoom for page snapshots — no external viewer.
+  const [zoomedPage, setZoomedPage] = useState<{
+    url: string
+    alt: string
+  } | null>(null)
+  const logoFileInputRef = useRef<HTMLInputElement | null>(null)
   const [decisions, setDecisions] = useState<readonly [string, string][]>([])
   const [status, setStatus] = useState<string>(
     onProfileExtractRequest ? 'Ready' : 'Preset/manual only',
@@ -1898,9 +2418,15 @@ export function PrintDesignPanel({
   }, [modes])
 
   useEffect(() => {
+    // Workspace is ONE merged view — pin mode to 'preset' so no stale tab
+    // state (or host default) can hide the design controls.
+    if (variant === 'workspace') {
+      if (mode !== 'preset') setMode('preset')
+      return
+    }
     if (modeOptions.some(option => option.value === mode)) return
     setMode(modeOptions[0]?.value ?? 'preset')
-  }, [mode, modeOptions])
+  }, [mode, modeOptions, variant])
 
   useEffect(() => {
     if (!value) return
@@ -1940,8 +2466,61 @@ export function PrintDesignPanel({
     setManualMeasure(activeTheme.type.measure)
     setManualLead(String(activeTheme.type.lead))
     setManualAlign(manualAlignForTheme(activeTheme.setting?.align))
+    setManualHeadingRule(
+      activeTheme.setting?.headingRule === 'underline' ? 'underline' : 'none',
+    )
+    setManualEyebrow(activeTheme.setting?.eyebrowText ?? '')
+    setManualDropCap(activeTheme.setting?.dropCap === true)
+    setManualColumns(activeTheme.page?.columns === 2 ? 2 : 1)
+    const marginParts = activeTheme.page?.margin?.trim().split(/\s+/) ?? []
+    setManualMarginY(marginParts[0] ?? '')
+    setManualMarginX(marginParts[1] ?? marginParts[0] ?? '')
+    const tableRules = activeTheme.profile_rules?.table
+    setManualTableRule(
+      tableRules?.rule_weight === 'hairline' ||
+        tableRules?.rule_weight === 'medium'
+        ? tableRules.rule_weight
+        : 'light',
+    )
+    setManualTableHeader(
+      tableRules?.header_treatment === 'plain' ||
+        tableRules?.header_treatment === 'shaded' ||
+        tableRules?.header_treatment === 'accent'
+        ? tableRules.header_treatment
+        : 'default',
+    )
+    setManualTableDensity(
+      tableRules?.density === 'airy'
+        ? 'airy'
+        : tableRules?.density === 'dense' || tableRules?.density === 'compact'
+        ? 'compact'
+        : 'regular',
+    )
+    setManualTableGrid(tableRules?.grid === 'lines')
+    setManualRunningHeader(activeTheme.setting?.runningHeader ?? 'none')
+    setManualRunningHeaderText(activeTheme.setting?.runningHeaderText ?? '')
+    setManualFolio(activeTheme.setting?.folio === 'none' ? 'none' : 'page')
+    setManualFolioSlot(activeTheme.setting?.folioSlot ?? 'bottom-center')
+    setManualFolioStyle(activeTheme.setting?.folioStyle ?? 'plain')
+    setManualCoverPage(activeTheme.setting?.coverPage === true)
+    setManualCoverBackground(activeTheme.setting?.coverBackground ?? '')
+    setManualCoverAuthor(activeTheme.setting?.coverAuthor ?? '')
+    setManualCoverDate(activeTheme.setting?.coverDate ?? '')
+    setManualCoverImage(activeTheme.setting?.coverImageDataUri ?? '')
+    setManualToc(activeTheme.setting?.toc === true)
+    setManualLogo(activeTheme.setting?.logoDataUri ?? '')
+    setManualLogoSlot(activeTheme.setting?.logoSlot ?? 'top-right')
   }, [activeTheme])
 
+  useEffect(() => {
+    if (!zoomedPage) return
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') setZoomedPage(null)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [zoomedPage])
+
   function extractionUnavailableReason(
     targetMode: PrintDesignMode,
   ): string | undefined {
@@ -1979,7 +2558,10 @@ export function PrintDesignPanel({
       ? `${images.length} images`
       : images[0]?.name ?? 'Choose image'
   const imageButtonLabel = images.length > 0 ? 'Replace image' : 'Choose image'
-  const unifiedDesignMode = mode === 'preset'
+  // The merged workspace view has no tabs — design controls ALWAYS show
+  // there, whatever mode state was left behind (e.g. 'vision' from before
+  // the merge, preserved across HMR or by a host).
+  const unifiedDesignMode = mode === 'preset' || variant === 'workspace'
   const rawVisionReport = visionTypesetting?.report?.length
     ? visionTypesetting.report
     : []
@@ -1998,6 +2580,66 @@ export function PrintDesignPanel({
       ? [...liveReadoutEntries].reverse()
       : liveReadoutEntries
   const visionEvidence = visionTypesetting?.evidence ?? []
+  // The vision canvas owns ALL information — there is no right rail in
+  // vision mode (the report lives in Design mode's Activity section).
+  const snapshotHistory =
+    mode === 'vision' || variant === 'workspace'
+      ? visionTypesetting?.snapshotHistory ?? []
+      : []
+  // New cards append at the bottom — keep the strip pinned to the latest
+  // render so a running sweep reads as progress.
+  const snapshotHistoryRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => {
+    const node = snapshotHistoryRef.current
+    if (!node) return
+    if (typeof node.scrollTo === 'function') {
+      node.scrollTo({ top: node.scrollHeight, behavior: 'smooth' })
+    } else {
+      node.scrollTop = node.scrollHeight
+    }
+  }, [snapshotHistory.length])
+  // Bidirectional contract: new run output pulls the well back to the
+  // pages view and clears staleness; a cleared history resets it.
+  const prevHistoryLengthRef = useRef(0)
+  useEffect(() => {
+    const prev = prevHistoryLengthRef.current
+    prevHistoryLengthRef.current = snapshotHistory.length
+    if (snapshotHistory.length === 0) {
+      setStripStale(false)
+      return
+    }
+    if (snapshotHistory.length > prev) {
+      setWellView('pages')
+      setStripStale(false)
+    }
+  }, [snapshotHistory.length])
+  // Style edits make the last run's snapshots stale — show the live
+  // preview until the user runs typesetting again.
+  const markDesignEdited = (): void => {
+    if (prevHistoryLengthRef.current > 0) {
+      setStripStale(true)
+      setWellView('live')
+    }
+  }
+  const hasHostPreviewContent = Boolean(
+    previewDocument?.paragraphs?.length || previewDocument?.title?.trim(),
+  )
+  const previewUsesSample = useSampleContent || !hasHostPreviewContent
+  const previewContent = previewUsesSample
+    ? {
+        title: 'The Shape of a Page',
+        byline: `A. Reader · Typeset with ${activeTheme.name}`,
+        paragraphs: SAMPLE_PREVIEW_PARAGRAPHS,
+      }
+    : {
+        title: previewDocument?.title?.trim() || 'Untitled document',
+        byline:
+          previewDocument?.byline?.trim() ||
+          `Typeset with ${activeTheme.name}`,
+        paragraphs: previewDocument?.paragraphs?.length
+          ? previewDocument.paragraphs.slice(0, 4)
+          : SAMPLE_PREVIEW_PARAGRAPHS,
+      }
   const imageSectionEnabled = !modes || modes.includes('image')
   const descriptionSectionEnabled = !modes || modes.includes('description')
   const showPresets = unifiedDesignMode
@@ -2013,24 +2655,40 @@ export function PrintDesignPanel({
     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
+  // Export ALWAYS just exports the PDF. The vision inspection loop is its
+  // own explicit action — a separate Run button shown only in the vision
+  // tab (pressing Export there previously ran the whole loop, and there was
+  // no way to simply export).
+  const headerExportDisabled = exportAction?.disabled || exportAction?.busy
+  const headerExportBusy = exportAction?.busy
   const headerExportLabel =
     headerExportBusy && exportAction
       ? exportAction.busyLabel ?? exportAction.label
-      : (routeExportThroughVision
-          ? visionTypesetting?.exportLabel
-          : exportAction?.label) ?? exportAction?.label
+      : exportAction?.label
+  const visionRunning = visionTypesetting?.progress?.state === 'running'
+  // While a loop runs, the Run button becomes STOP (the sweep walks every
+  // page until end-of-document or the user halts it).
+  const visionRunAction =
+    (mode === 'vision' || variant === 'workspace') &&
+    visionTypesetting?.enabled === true &&
+    visionTypesetting.onExport !== undefined
+      ? visionRunning && visionTypesetting.onStop
+        ? {
+            label: 'Stop',
+            stop: true as const,
+            disabled: false,
+            onClick: visionTypesetting.onStop,
+          }
+        : {
+            label: visionRunning ? 'Running…' : 'Run typesetting',
+            stop: false as const,
+            disabled:
+              visionRunning ||
+              visionTypesetting.exportBusy === true ||
+              visionTypesetting.exportDisabled === true,
+            onClick: visionTypesetting.onExport,
+          }
+      : null
   const showModeActionButton =
     mode !== 'preset' &&
     mode !== 'manual' &&
@@ -2043,6 +2701,7 @@ export function PrintDesignPanel({
       setDecisions([['apply', `${preset.label} preset selected`]])
       onThemeChange?.(preset.theme)
       setStatus('Ready')
+      markDesignEdited()
     }
   }
 
@@ -2125,6 +2784,29 @@ export function PrintDesignPanel({
       measure: string
       lead: string
       align: 'justified' | 'flush-left'
+      headingRule: 'none' | 'underline'
+      eyebrowText: string
+      dropCap: boolean
+      columns: 1 | 2
+      marginY: string
+      marginX: string
+      tableRule: 'hairline' | 'light' | 'medium'
+      tableHeader: 'default' | 'plain' | 'shaded' | 'accent'
+      tableDensity: 'airy' | 'regular' | 'compact'
+      tableGrid: boolean
+      runningHeader: 'none' | 'title' | 'section' | 'custom'
+      runningHeaderText: string
+      folio: 'page' | 'none'
+      folioSlot: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-right'
+      folioStyle: 'plain' | 'accent' | 'of-total'
+      coverPage: boolean
+      coverBackground: string
+      coverAuthor: string
+      coverDate: string
+      coverImageDataUri: string
+      toc: boolean
+      logoDataUri: string
+      logoSlot: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
     }> = {},
   ): void {
     const ink = overrides.ink ?? manualInk
@@ -2135,6 +2817,38 @@ export function PrintDesignPanel({
     const labelRole = overrides.labelFont ?? manualLabelFont
     const measure = overrides.measure ?? manualMeasure
     const align = overrides.align ?? manualAlign
+    const headingRule = overrides.headingRule ?? manualHeadingRule
+    const eyebrowText = overrides.eyebrowText ?? manualEyebrow
+    const dropCap = overrides.dropCap ?? manualDropCap
+    const columns = overrides.columns ?? manualColumns
+    const marginY = (overrides.marginY ?? manualMarginY).trim()
+    const marginX = (overrides.marginX ?? manualMarginX).trim()
+    const pageMargin = marginY
+      ? marginX && marginX !== marginY
+        ? `${marginY} ${marginX}`
+        : marginY
+      : undefined
+    const tableRule = overrides.tableRule ?? manualTableRule
+    const tableHeader = overrides.tableHeader ?? manualTableHeader
+    const tableDensity = overrides.tableDensity ?? manualTableDensity
+    const tableGrid = overrides.tableGrid ?? manualTableGrid
+    const runningHeader = overrides.runningHeader ?? manualRunningHeader
+    const runningHeaderText =
+      overrides.runningHeaderText ?? manualRunningHeaderText
+    const folio = overrides.folio ?? manualFolio
+    const folioSlot = overrides.folioSlot ?? manualFolioSlot
+    const folioStyle = overrides.folioStyle ?? manualFolioStyle
+    const coverPage = overrides.coverPage ?? manualCoverPage
+    const requestedToc = overrides.toc ?? manualToc
+    const coverBackground = overrides.coverBackground ?? manualCoverBackground
+    const coverAuthor = overrides.coverAuthor ?? manualCoverAuthor
+    const coverDate = overrides.coverDate ?? manualCoverDate
+    const coverImageDataUri =
+      overrides.coverImageDataUri ?? manualCoverImage
+    // Contents implies a cover.
+    const toc = coverPage ? requestedToc : false
+    const logoDataUri = overrides.logoDataUri ?? manualLogo
+    const logoSlot = overrides.logoSlot ?? manualLogoSlot
     const leadText = overrides.lead ?? manualLead
     const lead = Number.parseFloat(leadText)
     const nextLead = Number.isFinite(lead) && lead >= 1.2 ? lead : 1.5
@@ -2165,10 +2879,31 @@ export function PrintDesignPanel({
         },
       },
       rhythm: `${(10.6 * nextLead).toFixed(1)}pt`,
+      page: {
+        ...activeTheme.page,
+        columns,
+        margin: pageMargin,
+      },
       setting: {
         ...activeTheme.setting,
         align,
         hyphenate: align === 'justified',
+        headingRule,
+        eyebrowText: eyebrowText.trim() || undefined,
+        dropCap,
+        runningHeader,
+        runningHeaderText: runningHeaderText.trim() || undefined,
+        folio,
+        folioSlot,
+        folioStyle,
+        coverPage,
+        coverBackground: coverBackground.trim() || undefined,
+        coverAuthor: coverAuthor.trim() || undefined,
+        coverDate: coverDate.trim() || undefined,
+        coverImageDataUri: coverImageDataUri.trim() || undefined,
+        toc,
+        logoDataUri: logoDataUri.trim() || undefined,
+        logoSlot,
       },
       profile_rules: {
         ...activeTheme.profile_rules,
@@ -2176,6 +2911,19 @@ export function PrintDesignPanel({
           ...activeTheme.profile_rules?.caption,
           label_style: labelRole === 'sans' ? 'small-caps' : 'plain',
         },
+        table: {
+          ...activeTheme.profile_rules?.table,
+          rule_weight: tableRule,
+          density:
+            tableDensity === 'airy'
+              ? 'airy'
+              : tableDensity === 'compact'
+              ? 'dense'
+              : 'balanced',
+          header_treatment:
+            tableHeader === 'default' ? undefined : tableHeader,
+          grid: tableGrid ? 'lines' : 'none',
+        },
       },
       enforced_rules: [
         ...(activeTheme.enforced_rules ?? []),
@@ -2190,6 +2938,7 @@ export function PrintDesignPanel({
     ])
     onThemeChange?.(theme)
     setStatus('Ready')
+    markDesignEdited()
   }
 
   async function chooseImages(files: readonly File[]): Promise<void> {
@@ -2241,10 +2990,50 @@ export function PrintDesignPanel({
     }
   }
 
+  // Live theme facsimile — shown in the popover readout AND as the merged
+  // workspace well's idle state (until a run fills it with real pages).
+  const facsimilePreview = (
+    <PreviewStage aria-label="Live typeset preview">
+      <PreviewPage
+        $paper={paperColorForTheme(activeTheme)}
+        $ink={activeTheme.color.ink}
+        $bodyFont={activeTheme.type.fonts.serif}
+        $lead={previewLeadValue(activeTheme)}
+        $justified={activeTheme.setting?.align !== 'flush-left'}
+      >
+        <PreviewKicker
+          $accent={activeTheme.color.accent}
+          $labelFont={activeTheme.type.fonts.sans}
+        >
+          {previewUsesSample
+            ? activeTheme.setting?.eyebrowText?.trim() || 'Research Article'
+            : activeTheme.setting?.eyebrowText?.trim() || 'Your document'}
+        </PreviewKicker>
+        <PreviewTitle
+          $displayFont={
+            activeTheme.type.fonts.display ?? activeTheme.type.fonts.serif
+          }
+        >
+          {previewContent.title}
+        </PreviewTitle>
+        <PreviewByline>{previewContent.byline}</PreviewByline>
+        <PreviewRule $accent={activeTheme.color.accent} />
+        {previewContent.paragraphs.map((paragraph, index) => (
+          <PreviewParagraph key={index}>{paragraph}</PreviewParagraph>
+        ))}
+        <PreviewFolio>· 1 ·</PreviewFolio>
+      </PreviewPage>
+      <PreviewMeta title={activeDesignSummary}>
+        {activeDesignSummary}
+      </PreviewMeta>
+    </PreviewStage>
+  )
+
   return (
     <Panel
       $variant={variant}
       $density={panelDensity}
+      $mode={mode}
       data-density={panelDensity}
       data-panel-variant={variant}
       aria-label="Print design"
@@ -2265,36 +3054,59 @@ export function PrintDesignPanel({
             </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 ? (
+        {variant !== 'workspace' ? (
+          // Workspace is ONE merged Typesetter view — no Design/vision tabs.
+          <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"
+          />
+        ) : null}
+        {exportAction || headerAccessory || visionRunAction ? (
           <HeaderActions>
             {headerAccessory}
-            {exportAction ? (
+            {visionRunAction ? (
               <HeaderActionButton
                 type="button"
-                variant={exportAction.variant ?? 'primary'}
-                disabled={headerExportDisabled}
-                onClick={() => {
-                  if (routeExportThroughVision) {
-                    visionTypesetting?.onExport?.()
-                  } else {
-                    exportAction.onClick()
-                  }
-                }}
+                variant="subtle"
+                disabled={visionRunAction.disabled}
+                onClick={() => visionRunAction.onClick?.()}
               >
-                {exportAction.icon}
-                {headerExportLabel}
+                <PlatformIcon
+                  icon={visionRunAction.stop ? Square : Play}
+                  size={14}
+                />
+                {visionRunAction.label}
               </HeaderActionButton>
             ) : null}
+            {exportAction ? (
+              (exportAction.variant ?? 'primary') === 'primary' ? (
+                <ExportPrimaryButton
+                  type="button"
+                  variant="primary"
+                  disabled={headerExportDisabled}
+                  onClick={() => exportAction.onClick()}
+                >
+                  {exportAction.icon}
+                  {headerExportLabel}
+                </ExportPrimaryButton>
+              ) : (
+                <HeaderActionButton
+                  type="button"
+                  variant={exportAction.variant}
+                  disabled={headerExportDisabled}
+                  onClick={() => exportAction.onClick()}
+                >
+                  {exportAction.icon}
+                  {headerExportLabel}
+                </HeaderActionButton>
+              )
+            ) : null}
           </HeaderActions>
         ) : null}
       </HeaderRow>
@@ -2305,7 +3117,18 @@ export function PrintDesignPanel({
             <DesignSection $variant={variant}>
               <SectionHeader>
                 <SectionTitle>Reference</SectionTitle>
+                {variant === 'workspace' ? (
+                  // Collapsed by default: the image/describe extraction
+                  // inputs are occasional-use and ate half the column.
+                  <ReferenceButton
+                    type="button"
+                    onClick={() => setReferenceOpen(open => !open)}
+                  >
+                    {referenceOpen ? 'Hide' : 'Show'}
+                  </ReferenceButton>
+                ) : null}
               </SectionHeader>
+              {variant !== 'workspace' || referenceOpen ? (
               <ReferenceGrid $variant={variant}>
                 {(unifiedDesignMode && imageSectionEnabled) ||
                 mode === 'image' ? (
@@ -2377,6 +3200,7 @@ export function PrintDesignPanel({
                   </ReferencePane>
                 ) : null}
               </ReferenceGrid>
+              ) : null}
             </DesignSection>
           ) : null}
 
@@ -2384,7 +3208,35 @@ export function PrintDesignPanel({
             <DesignSection $variant={variant}>
               <SectionHeader>
                 <SectionTitle>Presets</SectionTitle>
+                {variant === 'workspace' ? (
+                  <PresetPreview aria-hidden="true">
+                    <Swatch $color={activeTheme.color.ink} />
+                    <Swatch $color={activeTheme.color.accent} />
+                    <Swatch $color={paperColorForTheme(activeTheme)} />
+                  </PresetPreview>
+                ) : null}
               </SectionHeader>
+              {variant === 'workspace' ? (
+                // Compact dropdown — the full list ate half the column.
+                <ManualSelect
+                  aria-label="Print theme presets"
+                  value={
+                    presets.some(preset => preset.id === presetId)
+                      ? presetId
+                      : ''
+                  }
+                  onChange={event => applyPreset(event.currentTarget.value)}
+                >
+                  {presets.some(preset => preset.id === presetId) ? null : (
+                    <option value="">Custom theme</option>
+                  )}
+                  {presets.map(preset => (
+                    <option key={preset.id} value={preset.id}>
+                      {preset.label}
+                    </option>
+                  ))}
+                </ManualSelect>
+              ) : (
               <PresetList $variant={variant} aria-label="Print theme presets">
                 {presets.map(preset => (
                   <PresetOption
@@ -2415,6 +3267,7 @@ export function PrintDesignPanel({
                   </PresetOption>
                 ))}
               </PresetList>
+              )}
             </DesignSection>
           ) : null}
 
@@ -2437,42 +3290,62 @@ export function PrintDesignPanel({
                 $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>
+                <ColorChipsRow>
+                  <ManualField>
+                    Ink
+                    <ColorChipControl>
+                      <ColorChipSwatch $color={manualInk}>
+                        <input
+                          type="color"
+                          aria-label="Ink color"
+                          value={manualInk}
+                          onChange={event => {
+                            const ink = event.currentTarget.value
+                            setManualInk(ink)
+                            applyManualTheme({ ink })
+                          }}
+                        />
+                      </ColorChipSwatch>
+                      <ColorChipValue>{manualInk}</ColorChipValue>
+                    </ColorChipControl>
+                  </ManualField>
+                  <ManualField>
+                    Paper
+                    <ColorChipControl>
+                      <ColorChipSwatch $color={manualPaper}>
+                        <input
+                          type="color"
+                          aria-label="Paper color"
+                          value={manualPaper}
+                          onChange={event => {
+                            const paper = event.currentTarget.value
+                            setManualPaper(paper)
+                            applyManualTheme({ paper })
+                          }}
+                        />
+                      </ColorChipSwatch>
+                      <ColorChipValue>{manualPaper}</ColorChipValue>
+                    </ColorChipControl>
+                  </ManualField>
+                  <ManualField>
+                    Accent
+                    <ColorChipControl>
+                      <ColorChipSwatch $color={manualAccent}>
+                        <input
+                          type="color"
+                          aria-label="Accent color"
+                          value={manualAccent}
+                          onChange={event => {
+                            const accent = event.currentTarget.value
+                            setManualAccent(accent)
+                            applyManualTheme({ accent })
+                          }}
+                        />
+                      </ColorChipSwatch>
+                      <ColorChipValue>{manualAccent}</ColorChipValue>
+                    </ColorChipControl>
+                  </ManualField>
+                </ColorChipsRow>
                 <ManualField>
                   Display
                   <ManualSelect
@@ -2524,6 +3397,7 @@ export function PrintDesignPanel({
                 <ManualField>
                   Measure
                   <ManualInput
+                    $mono
                     value={manualMeasure}
                     onChange={event => {
                       const measure = event.currentTarget.value
@@ -2535,6 +3409,7 @@ export function PrintDesignPanel({
                 <ManualField>
                   Lead
                   <ManualInput
+                    $mono
                     value={manualLead}
                     onChange={event => {
                       const lead = event.currentTarget.value
@@ -2559,13 +3434,495 @@ export function PrintDesignPanel({
                     <option value="flush-left">Flush left</option>
                   </ManualSelect>
                 </ManualField>
+                <ManualField>
+                  Heading rule
+                  <ManualSelect
+                    value={manualHeadingRule}
+                    onChange={event => {
+                      const headingRule = event.currentTarget.value as
+                        | 'none'
+                        | 'underline'
+                      setManualHeadingRule(headingRule)
+                      applyManualTheme({ headingRule })
+                    }}
+                  >
+                    <option value="none">None</option>
+                    <option value="underline">Accent underline</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Drop cap
+                  <ManualSelect
+                    value={manualDropCap ? 'on' : 'off'}
+                    onChange={event => {
+                      const dropCap = event.currentTarget.value === 'on'
+                      setManualDropCap(dropCap)
+                      applyManualTheme({ dropCap })
+                    }}
+                  >
+                    <option value="off">Off</option>
+                    <option value="on">Accent letter</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Eyebrow
+                  <ManualInput
+                    value={manualEyebrow}
+                    placeholder="e.g. Essay · July 2026"
+                    onChange={event => {
+                      const eyebrowText = event.currentTarget.value
+                      setManualEyebrow(eyebrowText)
+                      applyManualTheme({ eyebrowText })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Margins · top/bottom
+                  <ManualInput
+                    $mono
+                    value={manualMarginY}
+                    placeholder="e.g. 20mm"
+                    onChange={event => {
+                      const marginY = event.currentTarget.value
+                      setManualMarginY(marginY)
+                      applyManualTheme({ marginY })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Margins · sides
+                  <ManualInput
+                    $mono
+                    value={manualMarginX}
+                    placeholder="e.g. 18mm"
+                    onChange={event => {
+                      const marginX = event.currentTarget.value
+                      setManualMarginX(marginX)
+                      applyManualTheme({ marginX })
+                    }}
+                  />
+                </ManualField>
+                <ManualField>
+                  Columns
+                  <ManualSelect
+                    value={String(manualColumns)}
+                    onChange={event => {
+                      const columns =
+                        event.currentTarget.value === '2' ? 2 : (1 as const)
+                      setManualColumns(columns)
+                      applyManualTheme({ columns })
+                    }}
+                  >
+                    <option value="1">Single column</option>
+                    <option value="2">Two columns</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Cover
+                  <ManualSelect
+                    value={manualCoverPage ? 'on' : 'off'}
+                    onChange={event => {
+                      const coverPage = event.currentTarget.value === 'on'
+                      setManualCoverPage(coverPage)
+                      applyManualTheme({ coverPage })
+                    }}
+                  >
+                    <option value="off">Off</option>
+                    <option value="on">Cover page</option>
+                  </ManualSelect>
+                </ManualField>
+                {manualCoverPage ? (
+                  <>
+                    <ManualField>
+                      Cover background
+                      <ManualInput
+                        $mono
+                        value={manualCoverBackground}
+                        placeholder="e.g. #10241E"
+                        onChange={event => {
+                          const coverBackground = event.currentTarget.value
+                          setManualCoverBackground(coverBackground)
+                          applyManualTheme({ coverBackground })
+                        }}
+                      />
+                    </ManualField>
+                    <ManualField>
+                      Cover author
+                      <ManualInput
+                        value={manualCoverAuthor}
+                        placeholder="e.g. A. Hyde"
+                        onChange={event => {
+                          const coverAuthor = event.currentTarget.value
+                          setManualCoverAuthor(coverAuthor)
+                          applyManualTheme({ coverAuthor })
+                        }}
+                      />
+                    </ManualField>
+                    <ManualField>
+                      Cover date
+                      <ManualInput
+                        value={manualCoverDate}
+                        placeholder="e.g. July 2026"
+                        onChange={event => {
+                          const coverDate = event.currentTarget.value
+                          setManualCoverDate(coverDate)
+                          applyManualTheme({ coverDate })
+                        }}
+                      />
+                    </ManualField>
+                    <ManualField>
+                      Cover image
+                      <ReferenceButton
+                        type="button"
+                        onClick={() => coverImageInputRef.current?.click()}
+                      >
+                        {manualCoverImage ? 'Replace image' : 'Choose image'}
+                      </ReferenceButton>
+                      {manualCoverImage ? (
+                        <ReferenceButton
+                          type="button"
+                          onClick={() => {
+                            setManualCoverImage('')
+                            applyManualTheme({ coverImageDataUri: '' })
+                          }}
+                        >
+                          Remove image
+                        </ReferenceButton>
+                      ) : null}
+                      <HiddenFile
+                        ref={coverImageInputRef}
+                        type="file"
+                        accept="image/png,image/jpeg,image/webp,image/svg+xml"
+                        aria-label="Choose cover image"
+                        onChange={event => {
+                          const file = event.currentTarget.files?.[0]
+                          event.currentTarget.value = ''
+                          if (!file) return
+                          const reader = new FileReader()
+                          reader.onload = () => {
+                            const coverImageDataUri =
+                              typeof reader.result === 'string'
+                                ? reader.result
+                                : ''
+                            if (!coverImageDataUri) return
+                            setManualCoverImage(coverImageDataUri)
+                            applyManualTheme({ coverImageDataUri })
+                          }
+                          reader.readAsDataURL(file)
+                        }}
+                      />
+                    </ManualField>
+                  </>
+                ) : null}
+                {manualCoverPage ? (
+                  // Contents implies a cover — no toc without one.
+                  <ManualField>
+                    Contents
+                    <ManualSelect
+                      value={manualToc ? 'on' : 'off'}
+                      onChange={event => {
+                        const toc = event.currentTarget.value === 'on'
+                        setManualToc(toc)
+                        applyManualTheme({ toc })
+                      }}
+                    >
+                      <option value="off">Off</option>
+                      <option value="on">Generated contents</option>
+                    </ManualSelect>
+                  </ManualField>
+                ) : null}
+                <ManualField>
+                  Running header
+                  <ManualSelect
+                    value={manualRunningHeader}
+                    onChange={event => {
+                      const runningHeader = event.currentTarget.value as
+                        | 'none'
+                        | 'title'
+                        | 'section'
+                        | 'custom'
+                      setManualRunningHeader(runningHeader)
+                      applyManualTheme({ runningHeader })
+                    }}
+                  >
+                    <option value="none">None</option>
+                    <option value="title">Document title</option>
+                    <option value="section">Section titles</option>
+                    <option value="custom">Custom text</option>
+                  </ManualSelect>
+                </ManualField>
+                {manualRunningHeader === 'custom' ? (
+                  <ManualField>
+                    Header text
+                    <ManualInput
+                      value={manualRunningHeaderText}
+                      placeholder="e.g. Draft · Confidential"
+                      onChange={event => {
+                        const runningHeaderText = event.currentTarget.value
+                        setManualRunningHeaderText(runningHeaderText)
+                        applyManualTheme({ runningHeaderText })
+                      }}
+                    />
+                  </ManualField>
+                ) : null}
+                <ManualField>
+                  Footer
+                  <ManualSelect
+                    value={manualFolio === 'none' ? 'none' : manualFolioStyle}
+                    onChange={event => {
+                      const value = event.currentTarget.value
+                      if (value === 'none') {
+                        setManualFolio('none')
+                        applyManualTheme({ folio: 'none' })
+                        return
+                      }
+                      const folioStyle = value as
+                        | 'plain'
+                        | 'accent'
+                        | 'of-total'
+                      setManualFolio('page')
+                      setManualFolioStyle(folioStyle)
+                      applyManualTheme({ folio: 'page', folioStyle })
+                    }}
+                  >
+                    <option value="plain">Page number</option>
+                    <option value="accent">Accent number</option>
+                    <option value="of-total">Page X / Y</option>
+                    <option value="none">None</option>
+                  </ManualSelect>
+                </ManualField>
+                {manualFolio !== 'none' ? (
+                  <ManualField>
+                    Footer slot
+                    <ManualSelect
+                      value={manualFolioSlot}
+                      onChange={event => {
+                        const folioSlot = event.currentTarget.value as
+                          | 'bottom-center'
+                          | 'bottom-left'
+                          | 'bottom-right'
+                          | 'top-right'
+                        setManualFolioSlot(folioSlot)
+                        applyManualTheme({ folioSlot })
+                      }}
+                    >
+                      <option value="bottom-center">Bottom · center</option>
+                      <option value="bottom-left">Bottom · left</option>
+                      <option value="bottom-right">Bottom · right</option>
+                      <option value="top-right">Top · right</option>
+                    </ManualSelect>
+                  </ManualField>
+                ) : null}
+                <ManualField>
+                  Tables
+                  <ManualSelect
+                    value={
+                      !manualTableGrid &&
+                      manualTableRule === 'hairline' &&
+                      manualTableHeader === 'default' &&
+                      manualTableDensity === 'regular'
+                        ? 'quiet'
+                        : !manualTableGrid &&
+                          manualTableRule === 'light' &&
+                          manualTableHeader === 'plain' &&
+                          manualTableDensity === 'regular'
+                        ? 'ruled'
+                        : manualTableGrid &&
+                          manualTableRule === 'light' &&
+                          manualTableHeader === 'shaded' &&
+                          manualTableDensity === 'compact'
+                        ? 'grid'
+                        : !manualTableGrid &&
+                          manualTableRule === 'medium' &&
+                          manualTableHeader === 'accent' &&
+                          manualTableDensity === 'airy'
+                        ? 'ledger'
+                        : 'custom'
+                    }
+                    onChange={event => {
+                      const presetsByName: Record<
+                        string,
+                        {
+                          tableRule: 'hairline' | 'light' | 'medium'
+                          tableHeader: 'default' | 'plain' | 'shaded' | 'accent'
+                          tableDensity: 'airy' | 'regular' | 'compact'
+                          tableGrid: boolean
+                        }
+                      > = {
+                        quiet: {
+                          tableRule: 'hairline',
+                          tableHeader: 'default',
+                          tableDensity: 'regular',
+                          tableGrid: false,
+                        },
+                        ruled: {
+                          tableRule: 'light',
+                          tableHeader: 'plain',
+                          tableDensity: 'regular',
+                          tableGrid: false,
+                        },
+                        grid: {
+                          tableRule: 'light',
+                          tableHeader: 'shaded',
+                          tableDensity: 'compact',
+                          tableGrid: true,
+                        },
+                        ledger: {
+                          tableRule: 'medium',
+                          tableHeader: 'accent',
+                          tableDensity: 'airy',
+                          tableGrid: false,
+                        },
+                      }
+                      const preset = presetsByName[event.currentTarget.value]
+                      if (!preset) return
+                      setManualTableRule(preset.tableRule)
+                      setManualTableHeader(preset.tableHeader)
+                      setManualTableDensity(preset.tableDensity)
+                      setManualTableGrid(preset.tableGrid)
+                      applyManualTheme(preset)
+                    }}
+                  >
+                    <option value="custom">Custom</option>
+                    <option value="quiet">Quiet (hairlines)</option>
+                    <option value="ruled">Ruled</option>
+                    <option value="grid">Bordered grid</option>
+                    <option value="ledger">Ledger (accent header)</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Table borders
+                  <ManualSelect
+                    value={manualTableGrid ? 'grid' : manualTableRule}
+                    onChange={event => {
+                      const value = event.currentTarget.value
+                      if (value === 'grid') {
+                        setManualTableGrid(true)
+                        applyManualTheme({ tableGrid: true })
+                        return
+                      }
+                      const tableRule = value as
+                        | 'hairline'
+                        | 'light'
+                        | 'medium'
+                      setManualTableGrid(false)
+                      setManualTableRule(tableRule)
+                      applyManualTheme({ tableGrid: false, tableRule })
+                    }}
+                  >
+                    <option value="hairline">Hairline rules</option>
+                    <option value="light">Light rules</option>
+                    <option value="medium">Medium rules</option>
+                    <option value="grid">Full grid</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Header row
+                  <ManualSelect
+                    value={manualTableHeader}
+                    onChange={event => {
+                      const tableHeader = event.currentTarget.value as
+                        | 'default'
+                        | 'plain'
+                        | 'shaded'
+                        | 'accent'
+                      setManualTableHeader(tableHeader)
+                      applyManualTheme({ tableHeader })
+                    }}
+                  >
+                    <option value="default">Small caps</option>
+                    <option value="plain">Plain</option>
+                    <option value="shaded">Shaded</option>
+                    <option value="accent">Accent fill</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Table density
+                  <ManualSelect
+                    value={manualTableDensity}
+                    onChange={event => {
+                      const tableDensity = event.currentTarget.value as
+                        | 'airy'
+                        | 'regular'
+                        | 'compact'
+                      setManualTableDensity(tableDensity)
+                      applyManualTheme({ tableDensity })
+                    }}
+                  >
+                    <option value="airy">Airy</option>
+                    <option value="regular">Regular</option>
+                    <option value="compact">Compact</option>
+                  </ManualSelect>
+                </ManualField>
+                <ManualField>
+                  Logo
+                  <ReferenceButton
+                    type="button"
+                    onClick={() => logoFileInputRef.current?.click()}
+                  >
+                    {manualLogo ? 'Replace logo' : 'Choose logo'}
+                  </ReferenceButton>
+                  <HiddenFile
+                    ref={logoFileInputRef}
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp,image/svg+xml"
+                    aria-label="Choose logo image"
+                    onChange={event => {
+                      const file = event.currentTarget.files?.[0]
+                      event.currentTarget.value = ''
+                      if (!file) return
+                      const reader = new FileReader()
+                      reader.onload = () => {
+                        const logoDataUri =
+                          typeof reader.result === 'string'
+                            ? reader.result
+                            : ''
+                        if (!logoDataUri) return
+                        setManualLogo(logoDataUri)
+                        applyManualTheme({ logoDataUri })
+                      }
+                      reader.readAsDataURL(file)
+                    }}
+                  />
+                </ManualField>
+                {manualLogo ? (
+                  <ManualField>
+                    Logo slot
+                    <ManualSelect
+                      value={manualLogoSlot}
+                      onChange={event => {
+                        const logoSlot = event.currentTarget.value as
+                          | 'top-left'
+                          | 'top-right'
+                          | 'bottom-left'
+                          | 'bottom-right'
+                        setManualLogoSlot(logoSlot)
+                        applyManualTheme({ logoSlot })
+                      }}
+                    >
+                      <option value="top-left">Header · left</option>
+                      <option value="top-right">Header · right</option>
+                      <option value="bottom-left">Footer · left</option>
+                      <option value="bottom-right">Footer · right</option>
+                    </ManualSelect>
+                    <ReferenceButton
+                      type="button"
+                      onClick={() => {
+                        setManualLogo('')
+                        applyManualTheme({ logoDataUri: '' })
+                      }}
+                    >
+                      Remove logo
+                    </ReferenceButton>
+                  </ManualField>
+                ) : null}
               </ManualGrid>
             </DesignSection>
           ) : null}
         </WorkspaceControls>
 
         <WorkspaceCanvas $variant={variant} $mode={mode}>
-          {mode === 'vision' ? (
+          {mode === 'vision' || variant === 'workspace' ? (
             <VisionPanel
               $variant={variant}
               aria-label="Beta vision typesetting"
@@ -2644,6 +4001,143 @@ export function PrintDesignPanel({
                     </VisionProgressLabel>
                   </VisionProgressStrip>
                 ) : null}
+                {variant === 'workspace' && snapshotHistory.length > 0 ? (
+                  // Bidirectional views: the last run's annotated pages vs
+                  // the live preview. Style edits auto-flip to live and
+                  // mark the pages stale until the next Run.
+                  <WellViewSwitch aria-label="Well view">
+                    <WellViewButton
+                      type="button"
+                      $active={wellView === 'live'}
+                      onClick={() => setWellView('live')}
+                    >
+                      Live preview
+                    </WellViewButton>
+                    <WellViewButton
+                      type="button"
+                      $active={wellView === 'pages'}
+                      onClick={() => setWellView('pages')}
+                    >
+                      {stripStale ? 'Run pages · stale' : 'Run pages'}
+                    </WellViewButton>
+                  </WellViewSwitch>
+                ) : null}
+                {snapshotHistory.length > 0 &&
+                (variant !== 'workspace' || wellView === 'pages') ? (
+                  // The document, page by page: every checked page and fix
+                  // attempt appends an annotated card (screenshot + issue /
+                  // fixed chips + inspector comment). Auto-follows the
+                  // newest card while the sweep runs; scrollable after.
+                  <VisionPagesScroll
+                    ref={snapshotHistoryRef}
+                    aria-label="Page snapshot history"
+                  >
+                    {snapshotHistory.map(entry => (
+                      <VisionPageCard key={entry.id}>
+                        <VisionPageImageButton
+                          type="button"
+                          aria-label={entry.alt ?? entry.label}
+                          onClick={() =>
+                            setZoomedPage({
+                              url: entry.url,
+                              alt: entry.alt ?? entry.label,
+                            })
+                          }
+                        >
+                          <img src={entry.url} alt={entry.alt ?? entry.label} />
+                        </VisionPageImageButton>
+                        <VisionPageAnnotations>
+                          <SnapshotHistoryLabel>
+                            {entry.label}
+                          </SnapshotHistoryLabel>
+                          <SnapshotIssueList
+                            aria-label={`${entry.label} issues`}
+                          >
+                            {entry.issues?.length ? (
+                              entry.issues.map(issue => (
+                                <SnapshotIssueRow key={issue.id}>
+                                  <DecisionType
+                                    $type={
+                                      issue.state === 'fixed' ? 'fix' : 'issue'
+                                    }
+                                  >
+                                    {issue.state === 'fixed'
+                                      ? 'fixed'
+                                      : 'issue'}
+                                  </DecisionType>
+                                  <SnapshotIssueLabel
+                                    $fixed={issue.state === 'fixed'}
+                                  >
+                                    {issue.label}
+                                  </SnapshotIssueLabel>
+                                </SnapshotIssueRow>
+                              ))
+                            ) : (
+                              <SnapshotIssueRow>
+                                <DecisionType $type="pass">pass</DecisionType>
+                                <SnapshotIssueLabel $fixed={false}>
+                                  no layout issues
+                                </SnapshotIssueLabel>
+                              </SnapshotIssueRow>
+                            )}
+                          </SnapshotIssueList>
+                          {entry.note ? (
+                            <VisionPageNote>{entry.note}</VisionPageNote>
+                          ) : null}
+                        </VisionPageAnnotations>
+                      </VisionPageCard>
+                    ))}
+                  </VisionPagesScroll>
+                ) : variant === 'workspace' &&
+                  (snapshotHistory.length > 0 ||
+                    (visionEvidence.length === 0 &&
+                      !visionTypesetting?.snapshotUrl)) ? (
+                  // Merged view, live face: the REAL Paged.js preview when
+                  // the host supplies one (all pages, scrollable, adopted
+                  // fixes included); the styled facsimile until then.
+                  <>
+                    <SectionHeader>
+                      <SectionTitle>
+                        {livePreview?.html
+                          ? `Live preview${
+                              livePreview.pageCount
+                                ? ` · ${livePreview.pageCount} page(s)`
+                                : ''
+                            }`
+                          : 'Preview'}
+                      </SectionTitle>
+                      {livePreview?.html ? null : (
+                        <PreviewSampleToggle
+                          data-disabled={!hasHostPreviewContent}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={previewUsesSample}
+                            disabled={!hasHostPreviewContent}
+                            onChange={event =>
+                              setUseSampleContent(event.currentTarget.checked)
+                            }
+                          />
+                          Sample
+                        </PreviewSampleToggle>
+                      )}
+                      <StatusText title={displayedStatus}>
+                        {livePreview?.loading
+                          ? 'Laying out pages…'
+                          : displayedStatus}
+                      </StatusText>
+                    </SectionHeader>
+                    {livePreview?.html ? (
+                      <LivePreviewFrame
+                        sandbox=""
+                        srcDoc={livePreviewDocument(livePreview.html)}
+                        title="Live paged preview"
+                      />
+                    ) : (
+                      facsimilePreview
+                    )}
+                  </>
+                ) : (
                 <VisionSnapshotGrid $hasEvidence={visionEvidence.length > 0}>
                   <VisionSnapshotFrame>
                     <VisionSnapshotLabel>
@@ -2685,10 +4179,17 @@ export function PrintDesignPanel({
                         ))}
                       </VisionEvidenceList>
                     ) : visionTypesetting?.snapshotUrl ? (
-                      visionTypesetting.onSnapshotOpen ? (
+                      <>
                         <VisionSnapshotButton
                           type="button"
-                          onClick={visionTypesetting.onSnapshotOpen}
+                          onClick={() =>
+                            setZoomedPage({
+                              url: visionTypesetting.snapshotUrl!,
+                              alt:
+                                visionTypesetting.snapshotAlt ??
+                                'Visual typesetting page snapshot',
+                            })
+                          }
                           aria-label="Open page snapshot preview"
                         >
                           <VisionSnapshotImage
@@ -2699,15 +4200,27 @@ export function PrintDesignPanel({
                             }
                           />
                         </VisionSnapshotButton>
-                      ) : (
-                        <VisionSnapshotImage
-                          src={visionTypesetting.snapshotUrl}
-                          alt={
-                            visionTypesetting.snapshotAlt ??
-                            'Visual typesetting page snapshot'
-                          }
-                        />
-                      )
+                        {visionTypesetting.snapshotIssues?.length ? (
+                          <SnapshotIssueList aria-label="Latest page issues">
+                            {visionTypesetting.snapshotIssues.map(issue => (
+                              <SnapshotIssueRow key={issue.id}>
+                                <DecisionType
+                                  $type={
+                                    issue.state === 'fixed' ? 'fix' : 'issue'
+                                  }
+                                >
+                                  {issue.state === 'fixed' ? 'fixed' : 'issue'}
+                                </DecisionType>
+                                <SnapshotIssueLabel
+                                  $fixed={issue.state === 'fixed'}
+                                >
+                                  {issue.label}
+                                </SnapshotIssueLabel>
+                              </SnapshotIssueRow>
+                            ))}
+                          </SnapshotIssueList>
+                        ) : null}
+                      </>
                     ) : (
                       <VisionSnapshotPage aria-label="Sample PDF page snapshot">
                         <VisionPageHeading />
@@ -2740,6 +4253,7 @@ export function PrintDesignPanel({
                     </VisionSnapshotCopy>
                   )}
                 </VisionSnapshotGrid>
+                )}
               </VisionEvidenceColumn>
             </VisionPanel>
           ) : null}
@@ -2827,21 +4341,70 @@ export function PrintDesignPanel({
         </WorkspaceFooter>
       </DesignMain>
 
-      {variant !== 'sidebar' ? (
+      {variant === 'workspace' ? (
+        // Merged view's right rail: the run summary / design ledger.
         <DesignReadout $variant={variant} aria-label="Live design readout">
           <DesignSection $variant={variant}>
             <SectionHeader>
-              <SectionTitle>Live readout</SectionTitle>
+              <SectionTitle>Activity</SectionTitle>
               <StatusText title={displayedStatus}>{displayedStatus}</StatusText>
             </SectionHeader>
             {displayedReadoutEntries.length > 0 ? (
-              <DecisionReadout entries={displayedReadoutEntries} />
+              <ActivityScroll $tall>
+                <DecisionReadout entries={displayedReadoutEntries} />
+              </ActivityScroll>
+            ) : (
+              <StatusText>No design decisions yet.</StatusText>
+            )}
+          </DesignSection>
+        </DesignReadout>
+      ) : null}
+      {variant === 'popover' && mode !== 'vision' ? (
+        <DesignReadout $variant={variant} aria-label="Live design readout">
+          <DesignSection $variant={variant}>
+              <SectionHeader>
+                <SectionTitle>Preview</SectionTitle>
+                <PreviewSampleToggle data-disabled={!hasHostPreviewContent}>
+                  <input
+                    type="checkbox"
+                    checked={previewUsesSample}
+                    disabled={!hasHostPreviewContent}
+                    onChange={event =>
+                      setUseSampleContent(event.currentTarget.checked)
+                    }
+                  />
+                  Sample
+                </PreviewSampleToggle>
+                <StatusText title={displayedStatus}>
+                  {displayedStatus}
+                </StatusText>
+              </SectionHeader>
+              {facsimilePreview}
+          </DesignSection>
+          <DesignSection $variant={variant}>
+            <SectionHeader>
+              <SectionTitle>Activity</SectionTitle>
+            </SectionHeader>
+            {displayedReadoutEntries.length > 0 ? (
+              <ActivityScroll $tall={false}>
+                <DecisionReadout entries={displayedReadoutEntries} />
+              </ActivityScroll>
             ) : (
               <StatusText>No design decisions yet.</StatusText>
             )}
           </DesignSection>
         </DesignReadout>
       ) : null}
+      {zoomedPage ? (
+        // In-window zoom: click anywhere (or Esc) to dismiss.
+        <PageZoomOverlay
+          role="dialog"
+          aria-label="Page snapshot zoom"
+          onClick={() => setZoomedPage(null)}
+        >
+          <PageZoomImage src={zoomedPage.url} alt={zoomedPage.alt} />
+        </PageZoomOverlay>
+      ) : null}
     </Panel>
   )
 }