v1.3.1 — reachability gate for presets and question types

Added

tools/reach-test.mjs — a reachability gate.

render-test.mjs, the golden exports, and axe-audit.mjs all verify rendering; none verify reachability. Twice a feature shipped complete in CSS, schema, docs, and goldens while remaining unreachable in the UI, passing every gate: kraft/studio were missing from THEME_PRESETS in v1.2.0, and narrative-card/embedded-media were filtered out of the sidebar TOC.

This script asserts on the controls themselves, in a real browser:

Assertion	Catches
Every theme.schema.json preset enum value has a [data-theme] block in ifbase.css	A documented preset that silently renders as default
Every preset enum value appears in the runtime theme menu	The v1.2.0 kraft/studio bug
The theme menu offers no preset the schema disallows	A picker entry a spec cannot legally request
Every question — display-only types included — has a TOC entry	The narrative-card/embedded-media bug
No TOC entry falls back to a raw question id	A developer identifier leaking into the nav
Display-only types excluded from each section's answered/total count	Progress counts inflated by unanswerable steps
Global actions inside .topbar and on-screen at 1440 px and 375 px	A regression back to the sidebar footer that hid below 1100 px

Verified by mutation. Each of the six defect shapes above was reintroduced and confirmed to fail the gate, then reverted. ifbase.js/ifbase.css are unchanged by this release, confirming every mutant was fully reverted.

Visibility means within the viewport and topmost at its own centre, not merely a non-zero box — a control above the fold or behind an overlay counts as unreachable. An early draft used a width > 0 check and happily passed a control sitting at top = -2px.

Usage

node tools/reach-test.mjs [<spec.json>] [--verbose]   # or: npm run reach

Defaults to examples/question-type-catalog.json, which exercises every question type. Run it alongside axe-audit.mjs after adding a theme preset or question type: the axe audit checks contrast, the reachability gate checks the thing can actually be chosen.

Documentation

• references/theming.md — a new preset needs all three of theme.schema.json, ifbase.css, and THEME_PRESETS.
• SKILL.md tools table and README tooling paragraph updated.

🤖 Generated with Claude Code

v1.3.0 — sticky topbar with promoted actions, reachable display types

Navigation and chrome release. The global actions move out of the sidebar into a sticky topbar, and the two display-only question types become reachable.

Changed

• ⚑ Wrong questions? and Review & export moved to the topbar. Both sat in a sidebar footer below the full question tree — so on a long form they scrolled out of view, and below 1100 px they vanished entirely with the sidebar. They are global actions rather than navigation, so they now live in the topbar, which has the room and is present at every width. At ≤720 px the form title hides and both buttons reduce to their glyphs, keeping an aria-label.
• The topbar is sticky. The layout toggle, both promoted actions, and the theme switcher stay reachable while scrolling — most noticeable in the long "All sections" view. Stacking order is now explicit: topbar 90 < theme dropdown 100 < critique modal 200. The critique overlay was previously also z-index: 90, tying with the topbar and resolving only by DOM order.
• Side gutters come from the wizard track, not the card. .card had width: 100% plus margin: 0 16px, which overflowed its track and clamped back to full width — so the card rendered edge-to-edge on phones instead of inset. Measured card inset is now 16 px at 375/480/640 px, previously 0 px.

Fixed

• narrative-card and embedded-media are now reachable. refreshTOC skipped both display-only types, so the only way to see them was to click Next past every question and notice them in passing — in the published catalog they were effectively invisible. Both now get an italic TOC entry, excluded from the section's answered/total count (still 0/0) because neither is answerable. The label falls back tocLabel → label → title → caption → alt → placeholder, so a raw question id never surfaces in the nav.
• The catalog's embedded-media example no longer needs network access. It pointed at a remote Wikimedia URL, which renders as an empty box offline, behind a firewall, or when the host blocks hotlinking — and defeats the purpose of an --assets inline build. It is now an inline SVG data URI. Note for spec authors: percent-encode # in an inline SVG, since a literal # starts a URI fragment and silently truncates the image.

Removed

• The mobile critique FAB, which existed only because the sidebar hid below 1100 px. The topbar is present at every width, so the workaround and its duplicate entry point are gone.

Verification

• 13/13 specs render with 0 console errors; 12/12 golden exports unchanged.
• 5/5 presets pass axe with 0 violations on both layouts.
• Embedded image renders with 0 network requests.
• Sticky topbar holds top=0 at scrollY=2500 in grouped view; critique overlay paints above it.
• No horizontal overflow at 1440/1200/1100/900/768/720/640/480/375 px.

Try it live: https://www.bobspunt.com/intake-form/docs/demo.html

🤖 Generated with Claude Code

v1.2.1 — stable card width, all five theme presets reachable

Runtime fixes for two defects visible in the published demo.

Fixed

• Card width no longer jumps between questions. .if-main used flex: 0 1 auto, which sized the wizard column to its content, so .card's max-width: 640px acted as a ceiling rather than a fixed width. Measured across the ten visible questions of examples/question-type-catalog.json, the card rendered at ten different widths spanning 355–616 px (a 261 px spread), producing a visible jolt on every step change. .if-main is now a fixed 640 px track, so the card holds 640 px on every question and in every preset while still shrinking below 640 px viewports.
• kraft and studio are now reachable from the theme switcher. v1.2.0 shipped both presets in ifbase.css, the schema, and the docs, but THEME_PRESETS in ifbase.js still listed only three — so the two new presets could not be selected in a rendered form. They were documented but invisible.

Documentation

• Documented the runtime theme switcher in references/theming.md — previously an undocumented user-facing feature, which is why the missing presets went unnoticed. Adds the rule that a new preset must be added to both ifbase.css and THEME_PRESETS.

Verification

• Card width spread 0 px across all 10 questions and all 5 presets.
• No horizontal overflow; header, progress bar, and card aligned at 1440/1200/1100/900/768/480/375 px.
• 13/13 specs render with 0 console errors; 12/12 golden exports unchanged.
• 5/5 presets pass axe with 0 violations on both layouts.

Try it live: https://www.bobspunt.com/intake-form/docs/demo.html

🤖 Generated with Claude Code

v1.2.0 — Agent ergonomics + kraft/studio themes

Authoring-path release. The runtime (ifbase.js) is unchanged; ifbase.css gains two theme presets.

Added

• tools/build.mjs — authoring CLI. node tools/build.mjs spec.json --out path/to/form.html builds a form to any path, with --assets inline|absolute|relative, --theme, --hue. Replaces the per-agent hand-substitution of the spec into template.html.
• Self-contained forms by default. --assets inline embeds ifbase.css/ifbase.js — one portable file that opens anywhere and survives emailing.
• validateSpec(). loadSpec now rejects malformed specs (unknown type, duplicate id incl. branch ids, branch on non-radio, nested branches, segmented 2–5, priority-rank ≥2, empty sections) with a clear message instead of a silent broken form.
• kraft and studio theme presets shipped. Both were reserved enum values with no CSS; now implemented and passing the accessibility audit (zero axe violations on both layouts).
• tools/ documented in SKILL.md as the preferred authoring path, plus a defaults-by-type table.

Verified

13/13 specs render with zero console errors; all five theme presets pass axe with zero violations.