Files

tegwick 0f96736bb7 fix(visual): deterministic baselines + vendored lit (WHYNOT-WP-0002 T11)

Regenerate the four whynot-control visual baselines against the T06 token
regen, and make the harness render deterministically:

- serve.json (cleanUrls:false): serve was 301-redirecting /…/index.html and
  stripping the trailing slash, shifting the document base so every relative
  asset 404'd (also broke `pnpm showcase` in a browser).
- examples/whynot-control/index.html: token stylesheet pointed at a
  non-existent root path; repoint to ../../src/styles/colors_and_type.css so
  the page actually loads the T06 tokens.
- examples/vendor/lit.js: vendor a self-contained esbuild lit bundle and point
  the showcase importmap at it, removing the multi-hop live esm.sh dependency.
- tests/visual/ui-kit.spec.mjs: abort the unused Google-Fonts CDN (fonts are
  system-ui post-IBM-Plex); a hung font request blocked module execution.

The showcase "every component" test is marked test.fixme: that page wedges the
renderer main thread (a demo composition loops) and has never produced a
baseline. Tracked as WHYNOT-WP-0002-T11. Components + vendored lit render fine
in isolation; the four control baselines pass deterministically.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-26 21:08:06 +02:00

Atoms.jsx

Seeded claude design

2026-05-23 16:34:14 +02:00

Chrome.jsx

Seeded claude design

2026-05-23 16:34:14 +02:00

data.jsx

Seeded claude design

2026-05-23 16:34:14 +02:00

DocView.jsx

Seeded claude design

2026-05-23 16:34:14 +02:00

index.html

fix(visual): deterministic baselines + vendored lit (WHYNOT-WP-0002 T11)

2026-06-26 21:08:06 +02:00

README.md

Seeded claude design

2026-05-23 16:34:14 +02:00

Screens.jsx

Seeded claude design

2026-05-23 16:34:14 +02:00

README.md

whynot-control UI kit

A click-through high-fidelity recreation of the whynot-control repository — rendered not as a folder of Markdown files, but as the lightweight web application it implies.

This kit demonstrates the WhyNot Design System applied to its primary use case: a prototype-and-signal control surface. Everything here is cosmetic — there's no backend, no persistence, no real router. Each screen is a working visual artefact you can drop into a design review.

Screens

Screen	Source doc(s)	Component
Inbox	`inbox/`	`Inbox.jsx`
Prototypes (index)	`prototypes/` + `PROTOTYPE_PIPELINE.md`	`PrototypesIndex.jsx`
Prototype (detail)	`templates/prototype-card.md` + `example-prototype-card.md`	`PrototypeDetail.jsx`
Signals	`signals/` + `MARKET_SIGNAL.md`	`SignalsIndex.jsx`
Document viewer	`INTENT.md`, `OPERATING_MODEL.md`	`DocView.jsx`

Components

TopNav.jsx — sticky 56px hairline top bar (search + new-idea action).
Sidebar.jsx — left rail with org slug, repo nav, activation indicator.
PrototypeCard.jsx — the card from preview/comp-prototype-card.html, factored.
PipelineStrip.jsx — the 5-stage progress strip from preview/comp-pipeline.html.
SignalRow.jsx — one row in the signals table.
Tag.jsx, Eyebrow.jsx, Button.jsx, StageDot.jsx, Stamp.jsx — atoms used everywhere.

Conventions

All components are flat function components, no hooks beyond useState for screen routing.
Components export themselves onto window so each <script type="text/babel"> file can find them.
Style objects are inline or scoped (e.g. cardStyles, navStyles) to avoid name collisions.
Icons are Lucide via CDN, rendered as <i data-lucide="…"> and hydrated by lucide.createIcons().