[individual11]

Part 2 of v0.2's plan, React side. Released as 0.3.0 after this.

Imported from @tsquare-js/react/editor (review fix)

The editor and playground are a second entry point, so the main one never loads tsquare/editor (CodeMirror). Measured with esbuild: an app importing only Wireframe went from 617 KB gzipped (CodeMirror included) to 489 KB; the playground is 617 KB. test/package.test.ts checks what each entry reaches, the shared chunk and "use client".

Components

• <WireframeEditor> (tsquare 0.12's tsquare/editor): highlighting, autocomplete (languageData()), problems underlined ~300 ms after typing stops (with the message on hover), Enter keeps indentation, a pasted model reply is trimmed to its code block. Props: value/defaultValue, onChange, onProblems, autocomplete, lineNumbers, ariaLabel, className, style. A ref (WireframeEditorHandle) gets getText, setText, focus, goToLine. A new value replaces the text unless it's the editor's own change coming back.
• <WireframePlayground>: editor + viewer on one text. layout "auto" (row ≥ 900px wide, column below, via a container query), "row" or "column". While typing (until 400 ms without a change) the board redraws on the 200 ms streaming throttle and problems wait; then the editor underlines them and the board gets "N problems · showing the last valid board" (dimmed). Also showProblems, chips, zoomControls, autocomplete, lineNumbers, onProblems, and the same ref.
• Viewer: calls destroy() on unmount (part 1's known leak).

Narrow editors (added after review of a screenshot)

In a 760px playground the editor was 303px wide while the example's lines needed 746px: most of each line was hidden behind sideways scrolling.

• layout="auto" stacks below 900px (was 640px), and side by side the editor and board share the width half and half (was 2:3).
• Long lines wrap by default (lineWrapping, tsquare 0.12.1's new editor option), each continuation 4 spaces past its line's indentation; lineWrapping={false} scrolls sideways instead.
• Checked in Chrome: the 760px playground now stacks with a 758px editor and nothing hidden; forced side by side, the 379px editor wraps every line and doesn't scroll sideways.

Styles

The editor's colors come from the --tsquare-* theme (its highlighting keeps the editor's light/dark defaults unless --tsquare-syntax-* is set); .tsquare-editor 20rem and .tsquare-playground 36rem by default (--tsquare-editor-height, --tsquare-playground-height). All rules stay in :where().

Docs

New docs/editor.md and docs/playground.md (props tables, typing behavior, ref methods, saving the text, bundle size); the overview's "which component" table and styling.md cover them. The site picks the pages up from the package once it pins 0.3.0 (they're linked from the overview's table, so they join the nav and previous/next in order).

Verification

• npm test: 20 (was 15): editor (text, aria, ref.setText → onChange, unmount removes it; problems underlined only after a pause, onProblems with the list and [] on fix; controlled value; options), playground (board and 4 chips; nothing while typing, then note + underline + dim + onProblems; layout, showProblems={false} keeps underlines), viewer destroy on unmount; docs (examples typecheck, every prop of the two new components documented). Three consecutive runs green.
• In Chrome (a demo with the playground and an editor): side by side at 1280px; typing buton shows nothing at once, then the underline, the note, the dimmed board and onProblems; autocomplete offers button; hovering the underline shows the message; at 375px it stacks; data-theme="dark" turns the editor and viewer dark; no console errors.
• Test setup only: jsdom needs its own AbortController and Window globals (the viewer's listeners, CodeMirror's measuring); browsers and Jest/Vitest's jsdom environments provide them.

🤖 Generated with Claude Code

[Copilot]

🟡 Changes recommended

Mount-time ref calls can fail silently, the persistence example can overwrite another sketch, and viewer-only bundles can retain the editor dependency.

3 open issues

• Changing sketch ID saves stale state under the new ID · New
• Imperative handle is exposed before editor initialization · New
• Unannotated forwardRef calls prevent editor tree-shaking · New

What changed in this PR

Adds React editing components alongside the existing wireframe viewer, with live previews and delayed problem reporting.

Changes:

• Adds WireframeEditor and responsive WireframePlayground.
• Adds themed styles and viewer cleanup on unmount.
• Updates tsquare, documentation, and component tests.

File	Description
test/​react.test.tsx	Tests editors, playground behavior, styles, and cleanup.
test/​docs.test.ts	Checks new component prop documentation.
src/​viewer.tsx	Destroys the viewer on unmount.
src/​styles.css	Adds editor themes and playground layouts.
src/​playground.tsx	Combines editing and live preview.
src/​index.ts	Exports new components and types.
src/​editor.tsx	Wraps the editor with diagnostics and ref methods.
README.md	Introduces editing components.
package.json	Updates tsquare to 0.12.
package-lock.json	Locks the updated dependency.
docs/​styling.md	Documents editor and playground styling.
docs/​README.md	Extends component selection guidance.
docs/​playground.md	Documents playground usage and persistence.
docs/​editor.md	Documents editor props and controls.
CHANGELOG.md	Records new features and cleanup.

_{Review effort: Balanced}