Design: the studio's head, tell box and shelf rows use the design system, and their studio-* and shelf-* classes leave §5d #3630

The studio's app head, tell box, run trail, shelf rows and feed cards now use §5's own parts, and all eight classes are gone from src/web/studio/style.ts and from §5d. No other page used them, so none was kept. The required before/after screenshots are not in this pull: Chromium could not run in my sandbox (it needs a unix socket, which is denied), so they still need to be taken from this pull's preview.

What moved where

• App head (previews.ts): .page-head studio-head is now plain .page-head, and its <h1> is a .bar, so the badge still sits beside the name and wraps. live.ts now finds the head's word and timing at .page-head h1 .badge and .page-head .env-facts span. The phone-only wrapping for the facts line moved onto .env-facts itself (overflow-wrap: anywhere in style/content.ts).
• Tell box (app.ts): just card comment-form. Its spacing, wrapping, 16px text and 44px buttons on touch screens already come from those components and the shared touch rules. The textarea's minimum height goes from 72px to the default 88px.
• A run's word and Stop (now.ts): they sit directly in .row-trail rather than in a .studio-ask-actions span. On a phone they no longer stack full-width.
• Shelf rows (shelf.ts): the meta line is now <strong data-word>word</strong> · who · when · description. Before, the description came first and a flex wrapper kept the word from being cut off. Now the word leads, so the line's one ellipsis falls on the description. The full description is still in the row's title attribute, so nothing a person reads is lost. This order change is the one visible difference to look at.
• Feed and flow cards (feed.ts, flow_card.ts): the fcard-app class is dropped and muted small stays. On a phone the card head wraps on its own.
• Stylesheet and docs: studio/style.ts keeps only the live-swap flash, the word badges, the feed and two feed phone rules. Its bullet leaves §5d. bun scripts/design-lint.ts passes, and --update lowered input in docs/design/baseline.json from 2 to 1.

Tests. Four existing tests named the old classes, so I updated them because the issue removes those classes:

• studio.test.ts now checks stylesheet placement with @keyframes studio-flash.
• studio-phone.test.ts checks the phone rules that remain.
• studio-door.test.ts checks .page-head h1 .badge, the selector live.ts now reads.
• web-apps.test.ts checks for class="row".

A new test in studio.test.ts asserts that none of the eight names appears in a class on /, /alice/notes or /apps. It fails on the base and passes here. The type check is clean, and the 20 studio, shelf, feed and app test files I ran (379 tests) all pass. I did not run the whole suite.

To try it: open the preview's /, an app's page (signed in as its owner) and /apps, in light and dark, at desktop and 390px wide.

🤖 Generated with Claude Code

Closes #3616

The studio's app head, tell box, run trail, shelf rows and feed cards now use §5's own parts, and all eight classes are gone from src/web/studio/style.ts and from §5d. No other page used them, so none was kept. The required before/after screenshots are not in this pull: Chromium could not run in my sandbox (it needs a unix socket, which is denied), so they still need to be taken from this pull's preview.

What moved where

• App head (previews.ts): .page-head studio-head is now plain .page-head, and its <h1> is a .bar, so the badge still sits beside the name and wraps. live.ts now finds the head's word and timing at .page-head h1 .badge and .page-head .env-facts span. The phone-only wrapping for the facts line moved onto .env-facts itself (overflow-wrap: anywhere in style/content.ts).
• Tell box (app.ts): just card comment-form. Its spacing, wrapping, 16px text and 44px buttons on touch screens already come from those components and the shared touch rules. The textarea's minimum height goes from 72px to the default 88px.
• A run's word and Stop (now.ts): they sit directly in .row-trail rather than in a .studio-ask-actions span. On a phone they no longer stack full-width.
• Shelf rows (shelf.ts): the meta line is now <strong data-word>word</strong> · who · when · description. Before, the description came first and a flex wrapper kept the word from being cut off. Now the word leads, so the line's one ellipsis falls on the description. The full description is still in the row's title attribute, so nothing a person reads is lost. This order change is the one visible difference to look at.
• Feed and flow cards (feed.ts, flow_card.ts): the fcard-app class is dropped and muted small stays. On a phone the card head wraps on its own.
• Stylesheet and docs: studio/style.ts keeps only the live-swap flash, the word badges, the feed and two feed phone rules. Its bullet leaves §5d. bun scripts/design-lint.ts passes, and --update lowered input in docs/design/baseline.json from 2 to 1.

Tests. Four existing tests named the old classes, so I updated them because the issue removes those classes:

• studio.test.ts now checks stylesheet placement with @keyframes studio-flash.
• studio-phone.test.ts checks the phone rules that remain.
• studio-door.test.ts checks .page-head h1 .badge, the selector live.ts now reads.
• web-apps.test.ts checks for class="row".

A new test in studio.test.ts asserts that none of the eight names appears in a class on /, /alice/notes or /apps. It fails on the base and passes here. The type check is clean, and the 20 studio, shelf, feed and app test files I ran (379 tests) all pass. I did not run the whole suite.

To try it: open the preview's /, an app's page (signed in as its owner) and /apps, in light and dark, at desktop and 390px wide.

🤖 Generated with Claude Code