TinkerPages — builder’s guide

Pass 0 — builder self-critique

Problems found in my own build and fixed before finishing:

1. Annotation overflow. The hand-written margin notes were absolutely positioned outside their cards (right: -178px). Against the page’s overflow-x fence they were clipped half-invisible at 1100–1300 px viewports. Fixed: annotations repositioned inside card bounds, and the worked-example note moved into normal document flow so it survives every width.
2. Clipped tape. The example-document card used overflow: hidden (a leftover from its zero-padding layout), which silently amputated its masking-tape strips — the site’s core texture. Fixed: overflow removed; the tapes render at every breakpoint.
3. Hover specificity bug. The card hover-straighten rule (.card:hover) lost the cascade to the entry-settle state (.settle.in), so most cards ignored their own hover behavior. Fixed with an explicit .card.settle.in:hover rule — hover states are now consistent across all cards.
4. Reduced-motion leak risk. The meter needle’s spring transition could have run for reduced-motion users. Fixed twice over: the transition is scoped to a class added only after a JS matchMedia check, and the reduced-motion media query force-disables it anyway.
5. Greedy keyboard shortcuts. The number-key toggles originally fired on any keypress. Fixed: modifier combinations (Ctrl/Alt/Meta) and editable targets are excluded, and keys 1–2 flash the locked rows with an explanation instead of doing nothing.

Complexity upgrade this pass: the locked-row flash — pressing 1 or 2 highlights TITLE and ONE-LINE WHAT with a brief red wash, teaching the “a page without them isn’t a page” rule through interaction rather than only through copy.

Pass 1 — hostile director critique

Problems found by a critic who did not build the page, and fixed:

1. Status-stamp contrast failure. The IN DESIGN cover stamp set 16px bold mono in marker red #D9402A on a white card — 4.45:1, under the 4.5:1 AA floor for text that size, on the page’s single most important honesty element. Recolored to the deep marker red #B93420 (5.9:1); the double-rule stamp look is unchanged.
2. Format-spec list collapsed wrong on small screens. Below 768 px each row’s three spans fell into a two-column auto 1fr grid, auto-placing the long “why” line into the number column and crushing the block name beside it. The why-line now spans the full row on small screens and returns to its own column at 768 px+.
3. Meter caption could contradict the meter. “Two blocks await the builder’s memory” was hard-coded, so toggling WHAT BROKE or NEXT TIME off made the sentence false against the live count beside it. The caption is now computed with the meter — including the zero case, which states that hidden gaps are hidden, not filled.
4. Block swap animation ran once, then died. The swap-in class was added but never removed, so each block’s reveal played only on its first toggle. The class is now reset (with a forced reflow) on every toggle; reduced-motion still disables it entirely.
5. Widowed words in display copy. Four card headings could strand their last word at narrow widths (“…carry the weight”, “…required blocks”, “…is not”, “…could grow”), as could this guide’s own title. Tied with non-breaking spaces.
6. Inaccurate keyboard hint. The panel said keys 3–7 work “when this page has focus”; they work anywhere outside editable fields. The hint now says what the code does.

Complexity upgrade this pass: a print stylesheet plus a “Print this TinkerPage” button (keyboard-reachable, null-guarded, hidden where window.print is unavailable). Printing strips the notebook costume — tape, tilt, grid, panel, manifesto — and emits only the worked example as one clean sheet, in whatever toggle state the reader left it, with the format line and the wave’s honesty footer printed on the page. “One project, one page” becomes literal paper: the format survives without the styling, which is the site’s whole argument.

Pass 2 — hostile director critique

Problems found by a second critic who did not build the page, and fixed:

1. The meter lied without JavaScript. The needle’s CSS default pointed at 0 (“DRAWER”) while the hard-coded readout beside it said “7 / 7 blocks present” — with scripting off, the page’s own instrument contradicted its own caption. Fixed: the static default now sits at 7/7 to match the static readout, and the script rewinds the needle to zero before its first update so the opening sweep still runs for motion-allowed visitors.
2. Dead controls with no confession. With JavaScript off, the spec panel still presented five switch buttons, keyboard instructions, and a tickless dial — all inert, none explaining themselves. Fixed: a <noscript> notice inside the panel states plainly that the panel is inert and that the example renders complete without script.
3. Two hand-accent sizes. The hand annotations ran at 1.125 rem in the margins but 1.0625 rem in the document footer and in this guide — two arbitrary sizes for one accent voice, neither on the declared scale. Normalized to a single 1.125 rem accent size on both pages.
4. Undersized tap targets. The 13 px mono navigation links (cover nav, both footers, this guide’s nav) had no padding — roughly 20 px-tall touch targets on the site’s only navigation. Fixed: the small mono links now carry an 8 px vertical hit-area pad with no visual change.

Complexity upgrade this pass: the red-marker correction layer from the brief’s upgrade menu. A “Run the marker pass” button (revealed only when JS is live, aria-pressed, keyboard-reachable) overlays an editor’s red pen on the worked example: hand-written margin remarks grading each block against the spec, and a marker circle around the two honestly-unfilled tags. Every remark repeats a fact the document already states — the pen checks, it never invents. Motion is one small scoped ease, disabled under reduced motion; the print stylesheet strips the whole layer so paper still gets the clean page. It deepens the argument: the format is something a page can be graded against, and this page grades itself in the open.

Pass 3 — director rendered inspection (browser)

Observed during a live browser-rendering inspection; no code defect identified and no changes made:

1. Transient renderer freeze on first load. One transient freeze occurred on this page’s first load during inspection — the screenshot pipeline timed out twice; the tab recovered on navigation.
2. Bisection exonerated every construct. Debug variants (script removed; background disabled; motion CSS force-enabled without script) were tested in isolation and reproduced nothing; the original page then rendered cleanly on all subsequent loads with zero console errors.
3. Render verified otherwise clean. Format spec, demonstrator controls, print and marker-pass buttons, and the honest unfilled-block labeling all verified correctly in render.

No code defect identified; no changes made this pass. The incident is disclosed in W1_VALIDATION_REPORT.md.

Complexity upgrade this pass: none — stability preserved after two verified upgrade passes.