[MaggieAppleton]

Part of the design-audit honesty pass (base: #626). The authored-content, controls, errors and foundations plates now render the components and rules the app renders.

What was fake, and what it renders now

Authored content. StaticPlanEditor hard-coded design-audit-static-plan inside @chopin/editor, and the audit used it to override .plan-content padding, .plan-workspace/.plan-document height, .mdxeditor min-height, image and diagram max-height, the research composer's width and the research cards' height. StaticPlanEditor now takes a className. Every specimen sits on the real paper and measure. The only context the plate sets is --document-trailing-space: 0px, so a specimen ends where its content ends.

Research. The composer now renders inside ResearchDraftShell, the shell the live composer opens in. The cards stack in the document column at their real width, not in a 15rem grid.

Tables. The selected-cell, toolbar and overflow states were a hand-built <table> with fake "Add row/Add column" buttons. They are now:

• the default table at document size
• a phone-width document (with the compact gutter its media query picks), where the real table overflow lane shows
• the real phone action dock, rendered through TableActionToolbarView

Buttons. Hover and press were faked with [data-audit-state] rules that copied theme.css values, and btn-outline had none. theme.css now has a data-force-state seam inside each button variant's hover and press selectors (&:is(:hover, [data-force-state="hover"]):not(:disabled)) and on the global focus ring. The copied rules are deleted. Specificity is unchanged and nothing in the app sets the attribute. Outline now shows its real hover and press.

Icon buttons render the real IconButton in its ghost, nested and compact recipes. Its hover/focus fill in navigation.css also answers data-force-state, and IconButton passes the attribute through. The sidebar-placement variants only reveal on row hover, so they belong to the sidebar plate.

Links. .design-audit-link was invented. A new link utility in theme.css uses the dominant live treatment (brand ink, underline on hover). repository-picker.tsx ("Configure", "Try again") and build-view (.build-link) now use it; both were the same treatment written ad hoc. The plate shows only the states links actually have: Default, Hover and Focus. Two call sites were left alone because they look different: new-document-dialog's always-underlined text-brand link and .navigation-creation-status button.

Fields. The overrides of .field padding, font and width are removed, and the inputs use the live classes (field h-8 w-full px-2 text-sm; the textarea uses excerpt-correction's classes). The visuals Select was never used live, so it leaves the plate. The adoption plate now says no shared control is adopted.

Errors. TerminalAlert took its colour from audit CSS; it now passes text-sm text-destructive-ink as production does. The recoverable case is the real NavigationError (InlineNotice with its retry), not a fake box.

Foundations. The presentation table's forced min-width is gone; the narrow example is now labelled a narrow container. The invented icon "active/disabled" colours are replaced by the real default and icon-danger roles.

Extractions

• TableActionToolbarView in packages/editor/src/table/action-toolbar.tsx is a pure move of the dock markup. TableActionToolbar keeps the Lexical selection sync, placement and scroll padding, and renders the view with the same props, classes, aria and handlers. A unit test covers the view's groups, align label and placement.
• ResearchDraftShell and TableActionToolbarView are now exported from @chopin/editor.

Risks

• theme.css touches every button variant and the global focus ring. The selectors keep their specificity, and the button plate renders identically to before, apart from Outline gaining its real states.
• .build-link hover underline is now gated by @media (hover: hover), like Tailwind's hover: on the other two sites. Touch devices no longer keep a sticky underline.
• The table rails (TableChrome in full mode) need an editable editor with a live cell selection, so they are not shown. The phone dock shows no selected-cell wash for the same reason.
• e2e/design/snapshots baselines will change for these plates. responsive.e2e.ts now checks the real table's overflow lane. The old keyboard-scroll check exercised the fake focusable wrapper; a read-only editor table has no focus stop.

Design contract

The reviewed hashes are renewed in a separate commit. Data flow is unchanged for foundations.tsx, icons.tsx, controls.tsx, repository-picker.tsx and static-plan-editor.tsx. One new exact exception covers StaticPlanEditor's forwarded className, using the same reason as the other class-forwarding components.

Checks

bun run types, bun test apps/web packages/editor (1677 pass), bun scripts/check-design-contract.ts, bun scripts/check-tokens.ts, bunx oxlint on changed files.

🤖 Generated with Claude Code