examples: board — a shared board over a live data source and an optimistic store

[ryansolid]

Requested by Ryan

Summary

Adds examples/board, the first example for the client-owned, persistent corner of the examples grid: a shared board of lists and cards that several tabs drag at once. The grid plan had this corner empty apart from room's /live test bed.

The server sends data only. One live server function yields the whole board on every change, and the browser reconciles it by id into an optimistic store. What the example sets out to show:

• Writes return nothing. Each is an action that writes the store optimistically, sends, and holds with until() for its acknowledgement in the live value itself: the row for a create, and for a write to an existing row its client-minted mutation id in a bounded per-client applied list. A refused or unconfirmed write undoes itself.
• One element per card. Card components are created once at board level and referenced from whichever list holds them, so a move keeps the node, an open editor and its draft.
• One slide. A single FLIP effect animates a local drop, another tab's move, and a refused write going back.
• Pointer drag for cards and lists, Alt+arrow keyboard moves, a server-only rule (eight cards per list) as the demonstrable refusal, presence, and a quiet reconnect line.

Also adds documentation/plans/board-flagship.md (the plan, its decisions, and what was measured) and updates the board entry in examples-grid-plan.md. The commits follow the plan's build steps and each one runs.

Known gaps:

• Focus is lost when an element moves. An editor keeps its draft and selection through another tab's move but loses focus. This waits on the runtime, tracked in Keep element state when the runtime moves a node (moveBefore() and not detaching what is re-inserted) #3997. Keyboard moves restore focus with one commented line, in its own commit (examples(board): keep focus on a card moved by keyboard) so it can be reverted alone.
• Touch dragging is not checked on a device, and dragging near an edge does not scroll the board.
• Everything was checked in Chromium only. Firefox and Safari are unchecked.
• HTTP/2 over the dev server's self-signed HTTPS was not exercised; testing ran over plain HTTP (HTTPS=0).
• The README calls chat this example's twin; chat is still the earlier streaming demo.

No public API changes.

How did you test this change?

From examples/board:

• pnpm check: 20 server checks with no UI (ordering keys, applied ids out of order, another tab overwriting the same card, the card limit, archive, retries, a restart with the file store), then a build, then a scan confirming none of six server-only strings is in the client bundle.
• pnpm typecheck and Prettier on the example's sources.

By hand and by script in Chromium 152, dev build, two tabs, with BOARD_SLOW delaying writes:

• The document contains the board, and after hydration every card element is the server's own node.
• Create, rename, move and archive appear within about 5 ms and cause no DOM change when the server confirms.
• A moved card is the same DOM node before and after, by keyboard and by mouse drag.
• Two moves issued before the first confirms never show the intermediate position.
• While this tab holds an unconfirmed move of a card, another tab's rename of it and move of a different card both land, and the card stays where this tab put it.
• A ninth card into a full list, by create, keyboard or drag, appears and then slides back with the server's wording, which is the same in a production build (HTTP 409).
• With CHAOS_EVERY=1500 there are no DOM mutations to the board on reconnect, an open editor keeps focus and draft, and six consecutive writes land.

Not run: the repository-wide pnpm test. This PR adds an example and two plan documents and touches no package source.

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9c387c8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Size (brotli, eager entry chunk)

scenario	head	vs base	minified vs base	minified vs recorded	cap		lazy chunks (not counted)
signals: core floor (createSignal/Memo/Effect/Root/flush)	7.44 KB	0 B	0 B	+31 B	7.45 KB	✅
signals: + createStore	14.70 KB	0 B	0 B	+23 B	14.71 KB	✅
signals: + isPending/latest	9.70 KB	0 B	0 B	−100 B	9.73 KB	✅
app: render + one signal (the simple-app floor)	9.92 KB	0 B	0 B	−39 B	9.94 KB	✅
app: hydrating (no stores) with Show/For/Loading/Errored/lazy	17.77 KB	0 B	0 B	−464 B	17.93 KB	✅	lazy-page.js 0.04 KB
app: hydrating + every store primitive family	29.20 KB	0 B	0 B	−364 B	29.27 KB	✅	lazy-page.js 0.04 KB
app: CSR with Show/For/Loading/Errored/lazy	13.01 KB	0 B	0 B	0 B	13.03 KB	✅	lazy-page.js 0.04 KB
app: CSR, observe tier (same app on the observe artifacts)	14.57 KB	0 B	0 B	0 B	14.59 KB	✅	lazy-page.js 0.04 KB
app: CSR, observe tier + attribution engine enabled	28.94 KB	0 B	0 B	0 B	28.96 KB	✅	lazy-page.js 0.04 KB
app: compiled floor (one template, one text hole, one delegated click)	10.13 KB	0 B	0 B	−57 B	10.13 KB	⚠️ over by 1 B, 77 B minified headroom
app: compiled CSR (JSX todo app: spread/merge/omit, events, class/style, keyed For, Show, Loading + lazy, store)	25.49 KB	0 B	0 B	+14 B	25.51 KB	✅	stats.js 0.18 KB
app: compiled hydrating (the same JSX todo app through hydrate(), compiled hydratable)	31.21 KB	0 B	0 B	−440 B	31.39 KB	✅	stats.js 0.20 KB
frames: eager client consumer (frames client + transport, lazy codec)	11.43 KB	0 B	0 B	0 B	11.43 KB	✅
page: base server components (hydrating + dynamic + frames + sf reference)	33.93 KB	0 B	0 B	−2083 B	34.33 KB	✅	assets.js 0.78 KB, bind.js 1.83 KB, decode.js 6.23 KB, lazy-page.js 0.04 KB, regions.js 0.80 KB, trace.js 8.79 KB, wire.js 0.93 KB
page: live server components (base + live/GET + action + isPending/latest)	37.67 KB	0 B	0 B	−2199 B	38.15 KB	✅	assets.js 0.78 KB, bind.js 1.83 KB, decode.js 6.23 KB, lazy-page.js 0.04 KB, regions.js 0.80 KB, trace.js 8.79 KB, wire.js 0.93 KB
page: compiled base server components (the base page as JSX: templates with class/style/attributes/events, For/Show; no spread)	34.82 KB	0 B	0 B	−3236 B	35.66 KB	✅	assets.js 0.78 KB, bind.js 1.83 KB, decode.js 6.23 KB, regions.js 0.80 KB, sc-comments.js 0.20 KB, trace.js 8.76 KB, wire.js 0.93 KB
page: compiled live server components (the compiled base page + live/GET + action + isPending/latest)	40.41 KB	0 B	0 B	−3306 B	41.21 KB	✅	eager (counted): web.js 21.39 KB; assets.js 0.78 KB, bind.js 1.83 KB, decode.js 6.23 KB, regions.js 0.79 KB, sc-comments.js 0.19 KB, trace.js 8.77 KB, wire.js 0.93 KB
page: base + router (base page + @solidjs/router: createRouter, two routes, preload, useNavigate)	41.35 KB	0 B	0 B	−2070 B	41.79 KB	✅	assets.js 0.78 KB, bind.js 1.85 KB, decode.js 6.23 KB, lazy-page.js 0.04 KB, regions.js 0.80 KB, server.js 1.02 KB, serverForms.js 3.58 KB, trace.js 8.79 KB, wire.js 0.94 KB
page: live + router (live page + @solidjs/router: createRouter, two routes, preload, useNavigate)	47.08 KB	0 B	0 B	−2148 B	47.49 KB	✅	eager (counted): client.js 27.60 KB; assets.js 0.78 KB, bind.js 1.85 KB, decode.js 6.23 KB, lazy-page.js 0.04 KB, regions.js 0.81 KB, server.js 1.02 KB, serverForms.js 3.32 KB, trace.js 8.75 KB, wire.js 0.94 KB
server: floor (getRequestEvent + isServer)	1.33 KB	0 B	0 B	0 B	1.34 KB	✅
server: renderToString (the server-render floor)	20.40 KB	0 B	0 B	+4 B	20.42 KB	✅

⚠️ Over the brotli cap within the minified allowance (passes)

• app: compiled floor (one template, one text hole, one delegated click): over brotli cap by 1 B; minified 28,386 B vs 28,443 B recorded with the cap (−57 B) — 77 B of the 20 B minified allowance left; +0 B minified over this PR's base

_{Bundled with Rolldown (what Vite ships), brotli q11, decimal KB. A scenario fails only when it is over its brotli cap and its minified size is more than 20 B over the minified recorded with the cap; over the cap within that allowance is brotli layout noise and passes with a warning. Caps and their recorded minified in scripts/size/scenarios.js; the floor and page caps in floor-caps.json are frozen (lower only, or Size-Exception: in the PR body). npm run ratchet lowers caps per RC; it never raises one (scripts/size/README.md).}

[coveralls]

Coverage Report for CI Build 38346430941

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage remained the same at 77.429%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	1321
Covered Lines:	1079
Line Coverage:	81.68%
Relevant Branches:	1036
Covered Branches:	746
Branch Coverage:	72.01%
Branches in Coverage %:	Yes
Coverage Strength:	27.06 hits per line

---

💛 - Coveralls

[codspeed]

Merging this PR will not alter performance

⚠️ 2 benchmarks spent significant time in system calls

System calls cannot be consistently instrumented, so they are not included in the measure, which understates the real cost. Please switch to the Walltime instrument to accurately measure system calls.

Measurement and system calls

• readAllowed
• propagation:diamond

✅ 195 untouched benchmarks

---

_{Comparing claude/project-thread-1ll095 (6ec79b6) with next (6232d18)}