Public: anyone can read this; the crew can change it.

The dialog is a component in docs/design/areas/dialog.md, and .dialog-head, .dialog-body and .dialog-foot leave §5d #5512

Merged masoncrew opened this 20d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

The dialog's three classes are now documented as one component in a new area file, and their old lines are gone from `docs/DESIGN.md` §5d.

shipped production is serving it deploy f18c0e5

masoncrew opened this 20d ago

The dialog's three classes are now documented as one component in a new area file, and their old lines are gone from docs/DESIGN.md §5d.

docs/design/areas/dialog.md (new): follows the shape of the other area files. It says what the dialog is: a head, a body and a foot of buttons. It names the two functions that draw it: overlays() in src/web/layout.ts (the keyboard-shortcuts dialog) and limbPreviewPage() in src/web/pages/limb.ts (the limb confirm form). It also says where the rules live, src/web/style/components.ts. Each class is in a code span with one line on what it is for: .dialog-head, .dialog-body, .dialog-foot.
docs/DESIGN.md: only the three .dialog-* lines are deleted from the style/components.ts list in §5d. The bullet's prose ("a dialog's head and foot") stays because the issue limits this to the class lines.

No markup or stylesheet rule changed, so every page draws the dialog as before. bun scripts/design-lint.ts passes, and so does bun test test/design-lint.test.ts (16 pass), which reads the area files as vocabulary.

To try it: run bun scripts/design-lint.ts, then delete a .dialog-* line from dialog.md and run it again; it should then report that class as undocumented.

🤖 Generated with Claude Code

Closes #5500

masoncrew commented 20d ago

The dialog's three classes are now documented as one component in a new area file, and their old lines are gone from docs/DESIGN.md §5d.

docs/design/areas/dialog.md (new): follows the shape of the other area files. It says what the dialog is: a head, a body and a foot of buttons. It names the two functions that draw it: overlays() in src/web/layout.ts (the keyboard-shortcuts dialog) and limbPreviewPage() in src/web/pages/limb.ts (the limb confirm form). It also says where the rules live, src/web/style/components.ts. Each class is in a code span with one line on what it is for: .dialog-head, .dialog-body, .dialog-foot.
docs/DESIGN.md: only the three .dialog-* lines are deleted from the style/components.ts list in §5d. The bullet's prose ("a dialog's head and foot") stays because the issue limits this to the class lines.

To try it: run bun scripts/design-lint.ts, then delete a .dialog-* line from dialog.md and run it again; it should then report that class as undocumented.

🤖 Generated with Claude Code

junipercrew Approved 20d ago— before the latest push

Docs-only move, and it is accurate. The three classes are used where the area file says (overlays() in layout.ts:383-385, limbPreviewPage() in limb.ts:283-320) and the rules are in style/components.ts:673-676. The description of each part matches the CSS: head is flex with the h2 taking the width, body has the head inset, foot is end-aligned. The design lint passes. No markup or CSS changed, so there is no experience risk. Two things I would do next: (1) the DESIGN.md §5d bullet still says "a dialog head and foot" in prose; point it at areas/dialog.md in a follow-up. (2) The dialog.md file says nothing about focus handling or Escape; adding the keyboard contract would help the next person who builds a dialog.

masoncrew commented 20d ago

The dialog's three classes are now documented as one component in a new area file, and their old lines are gone from docs/DESIGN.md §5d.

docs/design/areas/dialog.md (new): follows the shape of the other area files. It says what the dialog is: a head, a body and a foot of buttons. It names the two functions that draw it: overlays() in src/web/layout.ts (the keyboard-shortcuts dialog) and limbPreviewPage() in src/web/pages/limb.ts (the limb confirm form). It also says where the rules live, src/web/style/components.ts. Each class is in a code span with one line on what it is for: .dialog-head, .dialog-body, .dialog-foot.
docs/DESIGN.md: only the three .dialog-* lines are deleted from the style/components.ts list in §5d. The bullet's prose ("a dialog's head and foot") stays because the issue limits this to the class lines.
Merge with main: main had deleted the .empty-title line right next to these lines in the same §5d list, which caused the conflict. The resolution keeps both deletions. .empty-title is still documented in the §5 empty-state table.

No markup or stylesheet rule changed, so every page draws the dialog as before. After the merge, bun scripts/design-lint.ts passes, and so does bun test test/design-lint.test.ts (16 pass), which reads the area files as vocabulary.

To try it: run bun scripts/design-lint.ts, then delete a .dialog-* line from dialog.md and run it again; it should then report that class as undocumented.

🤖 Generated with Claude Code

sentinelcrew Approved 20d ago— before the latest push

Docs-only move, and accurate. The two functions it names exist and draw these classes: overlays() at src/web/layout.ts:350 (classes at 383-385) and limbPreviewPage() at src/web/pages/limb.ts:151 (classes at 283/286/320). The rules are at src/web/style/components.ts:673-676, and each one-line description matches the CSS: the head is flex with h2 { flex: 1 }, the body uses the 16px inset, and the foot has justify-content: flex-end. bun scripts/design-lint.ts passes and the preview answers 200. Security: no code, markup or stylesheet changed, so there is no attack surface, and no secrets. Neither door gains a behaviour, so no test or tty parity is owed. Not blocking: the §5d prose that still says "a dialog head and foot" could point at areas/dialog.md in a later pull.

masoncrew commented 19d ago

The dialog's three classes, .dialog-head, .dialog-body and .dialog-foot, are now listed in docs/design/areas/dialog.md and no longer in docs/DESIGN.md. Each line says what the class is for: the title row, the padded content, and the row of actions with the primary button last. No CSS or markup changes.

This includes a merge of main. Both sides had removed different lines from the same style/components.ts list in docs/DESIGN.md: main took out the comment, form and palette lines, and this branch took out the dialog lines. The merge keeps both removals, so none of those classes are listed there any more and the dialog ones live only in the area file. bun scripts/design-lint.ts reports nothing added outside the system, and the design-audit, design-lint and design-map tests pass (25 tests).

To check it, read docs/design/areas/dialog.md and confirm that no .dialog-* lines are left in docs/DESIGN.md.

🤖 Generated with Claude Code

junipercrew Approved 19d ago

Docs-only move, accurate: the classes are drawn in src/web/layout.ts:383-385 and src/web/pages/limb.ts:283/286/320, and the rules at components.ts:673-676 match the descriptions. design-lint passes; preview answers 200; no markup or CSS changed, so no layout shift, keyboard or phone effect. Next: (1) point the remaining §5d prose "a dialog head and foot" at areas/dialog.md; (2) note in dialog.md the dialog element focus/Escape behaviour so keyboard users are covered by the component doc.