Seeded claude design

2026-05-23 16:34:14 +02:00
commit 9419f166ce
32 changed files with 2553 additions and 0 deletions
--- a/examples/whynot-control/index.html
+++ b/examples/whynot-control/index.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<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: 240px 1fr; min-height: 100vh; }
+    .main { padding: 40px 48px 80px; max-width: 1180px; }
+    /* 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>