/* ============================================================================ * SHARED·MODULEHEAD — the composed-surface header: title + door + standfirst. * (LEVELS-AND-MOLECULES.md PART 2, M7.) Consumes 1016 SHARED·SEEALLDOOR (M6). * ============================================================================ * THE HEAD THAT OWNS THE DOOR, BUILT ONCE. (D-579 is the reason this card exists.) * The dead-button defect could exist three times on one screen — "Explore" on 107, "See all" * on 106, "See all" under Your Stuff — because the head was not a component: every copy * re-decided whether the door exists, what it says, and whether anything listens to it. * Two of the three copies shipped dead for exactly that reason. The head is a component now, * and the door's wiring is decided HERE, once — never per copy again. * * THE KEPT SITES, verified against the code 2026-08-31 (the brief's three + two found): * home.js:206-275 moduleZone — 106/107: title + door + standfirst (both doors WIRED since * the D-579 fix: guard at :250 throws on a go-less action, :254-261 attaches * haptic + ROUTER.go); skeleton path :217-218: title + standfirst, no door. * home.js:953-955 renderTryZone — 104, the LIVE app head: title + standfirst, NO door * (the brief's list missed this one — it is the only 104 the app mounts). * home-shell.js:29 tryTogether fragment — MIGRATED onto this card, job 29 (2026-09-01). Its * door is GONE, not re-wired: it went nowhere before (no data-go, no * handler) and the LIVE 104 (renderTryZone) has never had a door at all — the * fragment exists to look like 104, so it should not show a control 104 * doesn't have. Still mounted by the workbench frame (9 real WB pages call * WBAppFrame.home() without their own tryTogether content, confirmed by grep) * — this was NOT a safe delete, unlike its neighbour below. * home-shell.js:30 yourCollections fragment — DELETED, job 29. Confirmed 100% dead first: * zero consumers anywhere (not the app, not the workbench frame — no * S.yourCollections reference exists in _appframe.js, unlike tryTogether's * real fallback above), three hand-typed fake collections routing to * /preview/collection. Per the brief: a dead fragment's migration is deleting * it. * workbench/_appframe.js:225 zoneFor · :327 tryTogether · :357 collections — the frame's own * hand-built copies; the DEAD doors D-579named live here (the file carries * exactly one addEventListener — its own DOMContentLoaded). * SAME SHELL ANATOMY, DIFFERENT JOB — reported, not adopted (a 17px span title, and a right * slot that carries a BADGE, not a door): phase/landing.render.js:160,182,263,272,286 · * collections/surface.render.js:112,133,156-160 · mine.render.js:64. Whether the 17px head is * this card at a size prop or a sibling of 1008 BOXHEAD is Andrew's call — not decided here. * * CONSUMES M6, DOES NOT RE-DRAW IT: the door is `renderSeeAllDoor`'s `.sd-door`, styled in * seealldoor.css — label + chevron, `--teal-700`, and a REFUSAL to render without `go` * (D-579: a control that renders and does nothing is worse than one that is absent). This file * styles the ROW and the STANDFIRST; the door's own press/focus states live in M6's file, * because that is where the door lives. One door, one owner. * * WHERE THE KEPT SITES DISAGREED, THE FORM WINS AND THE OUTLIER IS A PROP * (1013's doctrine — a disputed axis is named, never silently flattened): * align THE FORM says a row centres (9 of 10 signed components; the one exception is the * component Andrew corrected twice). The kept `.nh-mhead` is a BASELINE row * (home-shell.css:57, D-510) and so are all four kept head contexts. The molecule * centres by default; a site porting verbatim sets `--mh-align: baseline` and keeps * its kept row, and the delta is Andrew's one-word ruling — home-shell.css carries * the align-exception marker for the kept rows this card's mirror page renders. * standfirst 🔴 D-777 (2026-08-31): ONE role for the paragraph under a heading — * `--text-subtitle`, 18px. The standfirst ROLE TOKEN is retired (zero call sites). * The kept `.nh-mstand` ships a raw `--size-17` — that is the DEFECT, not the * baseline, and it is exactly the raw-number decision D-777 ends. Delta on adopt: * 17 → 18px, per the ruling, not a redesign. * gap THE FORM: 8px, 12 when an icon shares the row. The door carries a chevron, so * the row ships 12 (`--space-12`). * weight The title is `--font-display` at `--weight-display` — tokens.css: "headings ship * at 500". THE FORM's 600-for-names rule is the LABEL-font rule (chips, doors, * buttons — M6's own `.sd-door` is 600); a display-font heading is a different * animal with its own settled token. Nothing here invents a third weight. * title size `--size-20` + `/* token-exception * /` — there is NO `--text-*` role at 20px * (the ladder runs 22 → 18), and four kept heads share the raw step * (.nh-mhead h2 · .nh-shead h2 · .ys-head h2 · .ytools-head h2) * RAISED, NOT INVENTED: the role name is owed — one word from Andrew either way. * rhythm `--rhythm-inset/-head/-stand` — the shell's D-510 set (check 22: cards USE the * tokens, they do not restyle the module). The head keeps the kept geometry: * head → standfirst 4, standfirst → content 16. * * INERT AT RENDER, WIRED BY THE COMPONENT: like every renderer here, `renderModuleHead` * returns HTML and wires nothing — but the wiring is no longer the adopter's to re-decide, * which is the whole point. `wireModuleHead(scope)` is the ONE answer to "what does the door * do": haptic + ROUTER.go to the head's own `data-go`. A door cannot be rendered without a * destination (M6 throws), and the head cannot be wired differently per copy any more. * ============================================================================ */ .mh { /* the module head: one root, so everything it renders is styled under its own class * (the D-470 self-containment corollary — zero reliance on page or user-agent defaults) */ } .mh-head { display: flex; align-items: var(--mh-align, center); /* THE FORM. Kept: baseline (see header). */ justify-content: space-between; /* kept: the door pushes to the right edge */ gap: var(--space-12); /* an icon (the door's chevron) shares the row */ padding: 0 var(--rhythm-inset) var(--rhythm-head); } .mh-title { margin: 0; /* self-contained: no user-agent default */ font-family: var(--font-display); font-weight: var(--weight-display); /* 500 — "headings ship at 500" (tokens.css) */ font-size: var(--size-20); /* token-exception */ /* no --text-* role at 20 — role name owed, raised in the header */ letter-spacing: var(--tracking-neg-01); color: var(--text-primary); line-height: var(--leading-110); /* app.css:164's heading line-height, declared here — self-contained */ } .mh-stand { margin: 0; padding: 0 var(--rhythm-inset) var(--rhythm-stand); font-family: var(--font-body); font-weight: var(--weight-400); font-size: var(--text-subtitle); /* 🔴 D-777: the ONE paragraph-under-a-heading role, 18px */ line-height: var(--leading-155); /* D-777's own ruled value — was 150, the one axis this file missed */ color: var(--text-secondary); } /* Micro-states: the head is a container, not a control — its only interactive descendant is * M6's door, and the door's :active / :focus-visible live in seealldoor.css beside the door. * Nothing here is interactive, so nothing here declares a press state to invent. */