Follows #431 (the parser, now merged; this branch is rebased onto main). PR 2 of the wireframe fences plan: the editor renderer.

## What changes

- `kindOf("wireframe")` → `"wireframe"`, and **Wireframe** joins the language list. No slash-menu entry yet: there is no fitting icon, and adding one would touch `@chopin/icons`, which #430 and #432 also change. The Planner (PR 3) is the main author. - `@chopin/diagrams/wireframe/view` is a lazy `<Wireframe>` that renders the parsed tree as inert React DOM. It uses no `innerHTML` and no real controls, so buttons, fields and tabs are spans. It uses style A, the hairline blueprint: greyscale hairlines on a dotted inset stage, an ink-filled primary button, crossed-box images, and status shown by shape. All 17 kinds are covered, including `row flow` connectors and numbered `note -> target` callouts. Callouts sit in a side rail when the drawing is at least 40rem wide and below it otherwise. - **Accessibility.** The drawing is a `region` named from its top-level label (for example "Implementation wireframe"). Inert content is hidden from assistive technology, so the region carries a visually hidden outline of the same tree plus a list of the notes. - **Chromeless frame.** There is no label, language tag, source toggle or language picker. Clicking the drawing, or pressing Enter on it, puts the Lexical caret in the canonical code node, and the source folds open below the drawing while the stage shows the focus ring. Escape or blur folds it shut. Hovering only darkens the hairline. Lexical's code node stays the only editable copy. - **Invalid source.** The block renders as plain code with no chrome. After the existing 600 ms error delay, it shows the problem with its line number (`Line 3: Unknown kind "buton".`). The stored language is unchanged, and fixing the text brings the drawing back. While someone is typing in a wireframe that was valid, the last drawing stays above the source, faded. A folded wireframe keeps its drawing while a remote edit is re-parsed, so collaborators do not see it flicker. - **Narrow widths.** Container queries make the drawing reflow: rows stack, navigation wraps, and flow arrows point down. - **Gallery.** `/diagram-gallery#wireframes` shows a document specimen with one valid fence and one invalid fence, three samples, and a 375px narrow column.

## Tests

- **Unit:** `outline.test.ts` covers callout numbering and targets, the region label and the text alternative. `view.test.tsx` checks that the drawing is inert, has no controls, escapes markup and covers every kind. - **Gallery Playwright** (`bun run diagrams:test` on port 5492): 14 passed, 2 skipped. - **`e2e/wireframe.e2e.ts`** (not run locally because of port collisions; CI will run it): a fence renders without a toggle or label, clicking in reveals the source and editing redraws it, Escape and blur fold it, an invalid fence falls back with its error and fixing it restores the drawing, and a narrow viewport reflows. - `bun test`, `bun run types` and `bun run ci` pass.

## Conflicts with #430 and #432

The diff in `code.ts`, `render-blocks.tsx` and `styles.css` is kept small: - the chrome portal condition is untouched (a wireframe just gets no chrome slot); - the code-box border selector changes from `:not([data-plan-presentation="diagram"])` to `:not([data-plan-presentation])`; - the wireframe rules are added after the Mermaid placeholder rule.

The focus-ring rules live in `apps/web/src/theme.css` beside the existing preview ring, as the focus tests require.

No design-contract review hashes changed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

The preview deployment for **chopin** is ready. 🟢

[Open app](http://436-chopin.githubnext.com) | [Open Build Logs](https://next-appserver.tail49836a.ts.net/project/l9buznc9ua1if0vflxrjwajs/environment/lxqsvczv19eopxk29vfb46mj/application/hb85gdd9mwqqlfwcteflvpbj/deployment/14qypwwyntujyf8iwakxdl9u) | [Open Application Logs](https://next-appserver.tail49836a.ts.net/project/l9buznc9ua1if0vflxrjwajs/environment/lxqsvczv19eopxk29vfb46mj/application/hb85gdd9mwqqlfwcteflvpbj/logs)

Last updated at: 2026-10-09 14:18:32 CET