tegwick
0d688ca94a
Author the design language once in the canonical React designbook and project it
one-way onto each stack: React -> designbook/ -> ir/ -> adapters/<stack>/.
Phase 0 — contracts & governance (T01-T03):
- ir/SCHEMA.md + ir/schema/{component,tokens}.schema.json — neutral IR contract
(W3C DTCG tokens; React prop -> HTML attribute mapping; non-portable props flagged).
- adapters/ADAPTER_CONTRACT.md — inputs, drift-report + parity-result shapes,
idempotency rules, CI exit codes (0 ok / 2 usage / 3 drift / 4 parity / 5 internal).
- .claude/rules/designbook-propagation.md + DesignSystemIntroduction.md §5.1 —
one-way directionality + drift-resolution workflow.
T04 — canonical React designbook + the missing pull tool:
- The bundled /design-sync skill only PUSHES repo->cloud; it cannot populate
designbook/. Added scripts/designbook_pull.py + `make designbook-pull`, which drives
the local claude binary headless (acceptEdits) so DesignSync fetch+write runs in a
subprocess (contents never hit the orchestrator's context). Pulled 44 files;
excludes the _whynot-design-seed/ self-copy. Corrected the docs that wrongly called
/design-sync the pull.
T05 — IR extractor (scripts/ir-extract.mjs + `make ir`):
- ir/tokens.json (80 tokens, DTCG, var() -> {ref} alias resolution); ir/components/*.json
(10 contracts parsed from .jsx signatures: enum/boolean/number inference, prop->attr
map, style/callback marked non-portable); ir/exemplars/*.
T06 — Lit token adapter (adapters/lit/ + `make adapt-lit`):
- Full-gen tokens into src/styles/colors_and_type.css :root (marker-bounded, idempotent
no-op on re-run; hand-authored type CSS preserved).
NOTE: token regen synced Lit to canonical React — fonts IBM Plex -> system stacks and 8
status tokens added. This is a VISUAL change: review and run `pnpm test:visual:update`
before merge. Remaining: T07 scaffold+drift, T08 parity, T09 runbook, T10 2nd-adapter.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
78 lines
3.3 KiB
HTML
78 lines
3.3 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Pages" name="Pages · User dashboard" subtitle="Authenticated app · inbox, prototypes, signals, betas, decisions, docs" viewport="1200x740" -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>whynot · control</title>
|
|
<link rel="icon" href="../../assets/whynot-logo.png">
|
|
<link rel="stylesheet" href="../../colors_and_type.css">
|
|
<style>
|
|
html, body { background: var(--paper); }
|
|
body { min-height: 100vh; }
|
|
.app { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
|
|
.main { padding: 56px 64px 96px; max-width: 880px; }
|
|
/* Lucide icons inherit currentColor */
|
|
[data-lucide] { stroke-width: 1.5; }
|
|
/* Cleanup: button reset */
|
|
button { font-family: inherit; }
|
|
button:active { transform: none; }
|
|
a { cursor: pointer; }
|
|
</style>
|
|
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" src="Atoms.jsx"></script>
|
|
<script type="text/babel" src="Chrome.jsx"></script>
|
|
<script type="text/babel" src="data.jsx"></script>
|
|
<script type="text/babel" src="Screens.jsx"></script>
|
|
<script type="text/babel" src="DocView.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
const { useState, useEffect } = React;
|
|
|
|
function App() {
|
|
const [route, setRoute] = useState('prototypes'); // inbox | prototypes | signals | betas | decisions | proto:<id> | doc:<key>
|
|
|
|
useEffect(() => {
|
|
// re-hydrate lucide icons whenever the route changes
|
|
if (window.lucide) window.lucide.createIcons();
|
|
}, [route]);
|
|
|
|
const onNav = (key) => setRoute(key);
|
|
const onOpen = (id) => setRoute('proto:' + id);
|
|
const onBack = () => setRoute('prototypes');
|
|
|
|
let screen;
|
|
if (route === 'inbox') screen = <Inbox onCapture={() => {}} />;
|
|
else if (route === 'prototypes') screen = <PrototypesIndex onOpen={onOpen} />;
|
|
else if (route.startsWith('proto:')) screen = <PrototypeDetail id={route.slice(6)} onBack={onBack} />;
|
|
else if (route === 'signals') screen = <SignalsIndex />;
|
|
else if (route === 'betas') screen = <BetasIndex />;
|
|
else if (route === 'decisions') screen = <DecisionsIndex />;
|
|
else if (route.startsWith('doc:')) screen = <DocView docKey={route.slice(4)} />;
|
|
else screen = <Inbox />;
|
|
|
|
const sidebarKey = route.startsWith('proto:') ? 'prototypes' : route;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<TopNav onNew={() => setRoute('inbox')} />
|
|
<div className="app">
|
|
<Sidebar current={sidebarKey} onNav={onNav} />
|
|
<main className="main">{screen}</main>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
|
</script>
|
|
</body>
|
|
</html>
|