@cs4alhaider/screenbook 0.1.0

package/examples/qahwa/features/roastery/screens/shared.css

@@ -0,0 +1,115 @@
+/* Roastery desk — shared web chrome. Tokens only. */
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-ink);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+.desk { min-height: 100vh; display: flex; flex-direction: column; }
+
+.desk-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 26px;
+  background: var(--color-card);
+  border-bottom: 1px solid var(--color-line);
+}
+.desk-top .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; }
+.desk-top .brand .mark {
+  width: 30px; height: 30px; display: grid; place-items: center;
+  background: var(--color-accent); color: var(--color-accent-ink, #fff);
+  border-radius: 9px; font-size: 15px;
+}
+.desk-top nav { display: flex; gap: 4px; }
+.desk-top nav button {
+  border: 0; background: none;
+  padding: 8px 14px; border-radius: 9px;
+  font: inherit; font-size: 13px; font-weight: 650;
+  color: var(--color-ink-2); cursor: pointer;
+}
+.desk-top nav button.on { background: var(--color-bg); color: var(--color-ink); }
+.desk-top .meta { font-size: 12.5px; color: var(--color-ink-2); }
+
+.desk-body { flex: 1; padding: 24px 26px; max-width: 1180px; width: 100%; margin: 0 auto; }
+
+.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
+.kpi {
+  background: var(--color-card);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-card);
+  padding: 14px 16px;
+}
+.kpi .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
+.kpi .l { font-size: 12px; color: var(--color-ink-2); margin-top: 2px; }
+
+.panel {
+  background: var(--color-card);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+}
+.panel .panel-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--color-line);
+  font-weight: 800; font-size: 14px;
+}
+
+table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+th {
+  text-align: start; padding: 10px 18px;
+  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
+  color: var(--color-ink-2);
+  border-bottom: 1px solid var(--color-line);
+}
+td { padding: 12px 18px; border-bottom: 1px solid var(--color-line); }
+tr:last-child td { border-bottom: 0; }
+td.num { font-variant-numeric: tabular-nums; font-weight: 650; }
+
+.st {
+  display: inline-flex; padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .4px;
+}
+.st.queued { background: color-mix(in srgb, var(--color-ink-2) 14%, transparent); color: var(--color-ink-2); }
+.st.brewing { background: color-mix(in srgb, var(--color-warn) 16%, transparent); color: var(--color-warn); }
+.st.ready { background: color-mix(in srgb, var(--color-good) 15%, transparent); color: var(--color-good); }
+.st.done { background: color-mix(in srgb, var(--color-ink-2) 8%, transparent); color: var(--color-ink-2); }
+
+.btn-sm {
+  border: 1px solid var(--color-line);
+  background: var(--color-card);
+  color: var(--color-ink);
+  border-radius: 9px;
+  padding: 7px 12px;
+  font: inherit; font-size: 12.5px; font-weight: 650;
+  cursor: pointer;
+}
+.btn-sm.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink, #fff); }
+
+.switch { position: relative; width: 40px; height: 24px; cursor: pointer; }
+.switch input { display: none; }
+.switch i {
+  position: absolute; inset: 0;
+  background: var(--color-line);
+  border-radius: 999px;
+  transition: background .15s ease;
+}
+.switch i::after {
+  content: ''; position: absolute;
+  top: 3px; inset-inline-start: 3px;
+  width: 18px; height: 18px;
+  border-radius: 50%; background: #fff;
+  box-shadow: 0 1px 4px rgba(0,0,0,.25);
+  transition: transform .15s ease;
+}
+.switch input:checked + i { background: var(--color-good); }
+.switch input:checked + i::after { transform: translateX(16px); }
+[dir="rtl"] .switch input:checked + i::after { transform: translateX(-16px); }

package/examples/qahwa/review/comments.json

@@ -0,0 +1,3 @@
+{
+  "comments": []
+}

package/examples/qahwa/themes/qahwa.json

@@ -0,0 +1,43 @@
+{
+  "id": "qahwa",
+  "title": "Qahwa Roast",
+  "modes": {
+    "light": {
+      "color": {
+        "accent": "#A96A3C",
+        "accent-ink": "#FFFFFF",
+        "bg": "#F6F1EA",
+        "card": "#FFFFFF",
+        "ink": "#2A2119",
+        "ink-2": "#7A6C5D",
+        "line": "#EADFD0",
+        "good": "#3E7C4F",
+        "warn": "#B07A1E"
+      },
+      "font": {
+        "sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+        "serif": "ui-serif, 'New York', Georgia, serif"
+      },
+      "radius": {
+        "card": "18px",
+        "chip": "999px"
+      },
+      "space": {
+        "page": "16px"
+      }
+    },
+    "dark": {
+      "color": {
+        "accent": "#C98A52",
+        "accent-ink": "#1C130B",
+        "bg": "#14100C",
+        "card": "#201914",
+        "ink": "#F3EAE0",
+        "ink-2": "#B5A695",
+        "line": "#33291F",
+        "good": "#6CB07E",
+        "warn": "#D8A24A"
+      }
+    }
+  }
+}

package/examples/spa-demo/app/index.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Notes</title>
+  <style>
+    :root {
+      --accent: #5B5BD6; --bg: #F4F3F0; --card: #FFFFFF;
+      --ink: #211E1A; --ink-2: #6F6A61; --line: #E3DFD7;
+    }
+    body.dark {
+      --accent: #8484F0; --bg: #161519; --card: #211F26;
+      --ink: #EDEBF3; --ink-2: #A7A3B0; --line: #2E2D34;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; min-height: 100vh;
+      background: var(--bg); color: var(--ink);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      padding: 70px 16px 50px;
+      transition: background .2s ease;
+    }
+    .view { display: none; }
+    .view.on { display: block; }
+    h1 { font-size: 26px; margin: 0 0 14px; letter-spacing: -0.3px; }
+    .card {
+      background: var(--card); border: 1px solid var(--line);
+      border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
+    }
+    .card b { display: block; font-size: 15px; }
+    .card span { font-size: 12.5px; color: var(--ink-2); }
+    .btn {
+      display: inline-block; border: 0; padding: 12px 18px;
+      border-radius: 999px; background: var(--accent); color: #fff;
+      font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
+    }
+    .muted { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
+  </style>
+</head>
+<body>
+  <div class="view" data-view="inbox">
+    <h1>Notes</h1>
+    <div class="card" onclick="go('note')"><b>Ship ScreenBook app mode</b><span>postMessage adapter · today</span></div>
+    <div class="card" onclick="go('note')"><b>Qahwa tasting order</b><span>V60 before the flat white · yesterday</span></div>
+    <div class="card" onclick="go('note')"><b>Trip packing list</b><span>Passport, chargers, dates · last week</span></div>
+  </div>
+
+  <div class="view" data-view="note">
+    <h1>Ship ScreenBook app mode</h1>
+    <p class="muted">This whole app is ONE page with its own tiny router — yet the ScreenBook
+      sidebar lists its views as screens, deep links work, and dark mode follows the shell
+      toggle. It registered itself with <b>AppBridge.register()</b> — no driver needed.</p>
+    <button class="btn" onclick="go('inbox')">← Back to notes</button>
+  </div>
+
+  <div class="view" data-view="about">
+    <h1>About</h1>
+    <p class="muted">A cooperative single-page app: it includes
+      <b>engine/app-bridge.js</b> and describes itself. Sealed apps use an injected
+      driver instead — same protocol, zero edits to the app.</p>
+  </div>
+
+  <!-- the ONE line that makes this a cooperative ScreenBook app -->
+  <script src="../engine/app-bridge.js"></script>
+  <script>
+    var VIEWS = [
+      { id: 'inbox', title: 'Inbox', description: 'The notes list — tap one to open it.' },
+      { id: 'note', title: 'Note detail', description: 'A single note, opened from the inbox.' },
+      { id: 'about', title: 'About', description: 'What a cooperative SPA is.' }
+    ];
+    var current = 'inbox';
+
+    function go(id) {
+      if (!document.querySelector('.view[data-view="' + id + '"]')) return;
+      current = id;
+      document.querySelectorAll('.view').forEach(function (v) {
+        v.classList.toggle('on', v.dataset.view === id);
+      });
+      AppBridge.navigated(id);
+    }
+
+    AppBridge.register({
+      title: 'Notes',
+      screens: function () { return VIEWS; },
+      go: go,
+      current: function () { return current; },
+      set: function (env) {
+        if (env.mode) document.body.classList.toggle('dark', env.mode === 'dark');
+        if (env.dir) document.documentElement.setAttribute('dir', env.dir);
+        /* cooperative apps may adopt the shell theme's tokens if they want: */
+        if (env.vars && env.vars['--color-accent']) {
+          document.documentElement.style.setProperty('--accent', env.vars['--color-accent']);
+        }
+      }
+    });
+    go('inbox');
+  </script>
+</body>
+</html>

package/examples/spa-demo/app.config.json

@@ -0,0 +1,9 @@
+{
+  "name": "SPA Demo",
+  "defaultFeature": "notes-app",
+  "features": ["notes-app"],
+  "devices": ["ios"],
+  "themes": ["default"],
+  "languages": ["en"],
+  "defaultLanguage": "en"
+}

package/examples/spa-demo/features/notes-app/feature.json

@@ -0,0 +1,11 @@
+{
+  "id": "notes-app",
+  "title": "Notes (cooperative SPA)",
+  "icon": "🗒",
+  "description": "A one-page app that includes engine/app-bridge.js itself and registers its own screens — no driver needed.",
+  "order": 1,
+  "type": "app",
+  "src": "app/index.html",
+  "device": "ios",
+  "chrome": "engine"
+}

package/examples/spa-demo/review/comments.json

@@ -0,0 +1,3 @@
+{
+  "comments": []
+}

package/examples/spa-demo/themes/default.json

@@ -0,0 +1,15 @@
+{
+  "id": "default",
+  "title": "Demo",
+  "modes": {
+    "light": {
+      "color": { "accent": "#5B5BD6", "bg": "#F4F3F0", "card": "#FFFFFF", "ink": "#211E1A", "ink-2": "#6F6A61", "line": "#E3DFD7" },
+      "font": { "sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" },
+      "radius": { "card": "16px", "chip": "999px" },
+      "space": { "page": "16px" }
+    },
+    "dark": {
+      "color": { "accent": "#8484F0", "bg": "#161519", "card": "#211F26", "ink": "#EDEBF3", "ink-2": "#A7A3B0", "line": "#2E2D34" }
+    }
+  }
+}

package/examples/tokens-lab/app.config.json

@@ -0,0 +1,9 @@
+{
+  "name": "Tokens Lab",
+  "defaultFeature": "lab",
+  "features": ["lab"],
+  "devices": ["none", "web"],
+  "themes": ["paper", "noir"],
+  "languages": ["en"],
+  "defaultLanguage": "en"
+}

package/examples/tokens-lab/features/lab/data/scenarios.json

@@ -0,0 +1,5 @@
+{
+  "list": [
+    { "id": "default", "icon": "🧪", "title": "Default", "description": "Tokens don't need data — this project is about the theme axis." }
+  ]
+}

package/examples/tokens-lab/features/lab/data/seed.json

@@ -0,0 +1,3 @@
+{
+  "product": { "name": "Tokens Lab" }
+}

package/examples/tokens-lab/features/lab/feature.json

@@ -0,0 +1,7 @@
+{
+  "id": "lab",
+  "title": "Token lab",
+  "icon": "🎨",
+  "description": "Every token, live — switch Theme ▾ and dark/light and watch both screens re-skin with zero CSS edits.",
+  "order": 1
+}

package/examples/tokens-lab/features/lab/flows.json

@@ -0,0 +1,14 @@
+{
+  "list": [
+    {
+      "id": "theme-tour",
+      "title": "Theme tour",
+      "icon": "🎨",
+      "description": "Swatches → typography; flip Theme ▾ and dark/light at each step.",
+      "steps": [
+        { "screen": "010-swatches", "note": "Every CSS var the active theme defines, read live from :root. Switch themes — no reload, no CSS edits." },
+        { "screen": "020-typography", "note": "The same tokens driving real components — type scale, buttons, cards, chips." }
+      ]
+    }
+  ]
+}

package/examples/tokens-lab/features/lab/manifest.json

@@ -0,0 +1,33 @@
+{
+  "feature": "lab",
+  "generated": "2026-07-18",
+  "screens": [
+    {
+      "id": "010-swatches",
+      "file": "screens/010-swatches.html",
+      "title": "Swatches",
+      "description": "Every color/radius/space/font token of the active theme, read live from :root.",
+      "order": 10,
+      "device": "none",
+      "status": "ready",
+      "tags": [
+        "tokens"
+      ],
+      "updated": "2026-07-18"
+    },
+    {
+      "id": "020-typography",
+      "file": "screens/020-typography.html",
+      "title": "Type & components",
+      "description": "The same tokens driving real UI — type scale, buttons, cards, chips, inputs.",
+      "order": 20,
+      "device": "web",
+      "status": "ready",
+      "tags": [
+        "tokens",
+        "gallery"
+      ],
+      "updated": "2026-07-18"
+    }
+  ]
+}

package/examples/tokens-lab/features/lab/screens/010-swatches.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Token swatches</title>
+  <script type="application/json" id="screen-meta">
+  {
+    "title": "Swatches",
+    "description": "Every color/radius/space/font token of the active theme, read live from :root.",
+    "order": 10,
+    "device": "none",
+    "status": "ready",
+    "tags": ["tokens"],
+    "updated": "2026-07-18"
+  }
+  </script>
+  <script src="../../../engine/bridge.js"></script>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; min-height: 100vh;
+      background: var(--color-bg); color: var(--color-ink);
+      font-family: var(--font-sans);
+      padding: var(--space-page, 20px);
+      -webkit-font-smoothing: antialiased;
+    }
+    h1 { font-family: var(--font-serif); font-size: 26px; margin: 4px 0 2px; }
+    .sub { color: var(--color-ink-2); font-size: 13px; margin-bottom: 18px; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+    .swatch {
+      background: var(--color-card);
+      border: 1px solid var(--color-line);
+      border-radius: var(--radius-card);
+      overflow: hidden;
+    }
+    .swatch .chipbox { height: 64px; border-bottom: 1px solid var(--color-line); }
+    .swatch .label { padding: 9px 11px; }
+    .swatch .name { font-size: 12px; font-weight: 700; font-family: ui-monospace, monospace; }
+    .swatch .value { font-size: 11px; color: var(--color-ink-2); font-family: ui-monospace, monospace; margin-top: 2px; word-break: break-all; }
+    .section { margin: 20px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--color-ink-2); }
+    .meta-line { font-size: 12px; color: var(--color-ink-2); font-family: ui-monospace, monospace; }
+  </style>
+</head>
+<body>
+  <h1>Token swatches</h1>
+  <div class="sub">Read live from <span class="meta-line">:root</span> — flip Theme ▾, dark/light or RTL above and watch this screen repaint. <span class="meta-line" id="env"></span></div>
+  <div id="content"></div>
+
+  <script>
+    var COLOR_VARS = ['--color-accent', '--color-bg', '--color-card', '--color-ink', '--color-ink-2', '--color-line'];
+    var OTHER_VARS = ['--radius-card', '--radius-chip', '--space-page', '--font-sans', '--font-serif'];
+
+    function readVar(name) {
+      return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    }
+
+    function render() {
+      var box = document.getElementById('content');
+      box.innerHTML = '';
+
+      var sec1 = document.createElement('div');
+      sec1.className = 'section';
+      sec1.textContent = 'Color';
+      box.appendChild(sec1);
+      var grid = document.createElement('div');
+      grid.className = 'grid';
+      COLOR_VARS.forEach(function (name) {
+        var v = readVar(name);
+        var el = document.createElement('div');
+        el.className = 'swatch';
+        el.innerHTML = '<div class="chipbox" style="background:' + v + '"></div>' +
+          '<div class="label"><div class="name">' + name + '</div><div class="value">' + (v || '—') + '</div></div>';
+        grid.appendChild(el);
+      });
+      box.appendChild(grid);
+
+      var sec2 = document.createElement('div');
+      sec2.className = 'section';
+      sec2.textContent = 'Radius · Space · Type';
+      box.appendChild(sec2);
+      var grid2 = document.createElement('div');
+      grid2.className = 'grid';
+      OTHER_VARS.forEach(function (name) {
+        var v = readVar(name);
+        var preview = name.indexOf('--radius') === 0
+          ? '<div style="height:100%;display:grid;place-items:center"><div style="width:70%;height:38px;background:var(--color-accent);border-radius:' + v + '"></div></div>'
+          : name.indexOf('--space') === 0
+            ? '<div style="height:100%;display:grid;place-items:center"><div style="width:' + v + ';height:38px;background:var(--color-accent);opacity:.8"></div></div>'
+            : '<div style="height:100%;display:grid;place-items:center;font-family:' + v + ';font-size:22px">Aa</div>';
+        var el = document.createElement('div');
+        el.className = 'swatch';
+        el.innerHTML = '<div class="chipbox">' + preview + '</div>' +
+          '<div class="label"><div class="name">' + name + '</div><div class="value">' + (v || '—') + '</div></div>';
+        grid2.appendChild(el);
+      });
+      box.appendChild(grid2);
+
+      document.getElementById('env').textContent =
+        '· theme=' + Engine.env.theme + ' · mode=' + document.documentElement.getAttribute('data-mode');
+    }
+
+    Engine.ready(function () {
+      render();
+      /* live theme/mode switches change :root attributes — re-read the values */
+      new MutationObserver(render).observe(document.documentElement, {
+        attributes: true, attributeFilter: ['data-mode', 'style', 'dir']
+      });
+    });
+  </script>
+</body>
+</html>

package/examples/tokens-lab/features/lab/screens/020-typography.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Type & components</title>
+  <script type="application/json" id="screen-meta">
+  {
+    "title": "Type & components",
+    "description": "The same tokens driving real UI — type scale, buttons, cards, chips, inputs.",
+    "order": 20,
+    "device": "web",
+    "status": "ready",
+    "tags": ["tokens", "gallery"],
+    "updated": "2026-07-18"
+  }
+  </script>
+  <script src="../../../engine/bridge.js"></script>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; min-height: 100vh;
+      background: var(--color-bg); color: var(--color-ink);
+      font-family: var(--font-sans);
+      padding: calc(var(--space-page, 20px) * 2);
+      -webkit-font-smoothing: antialiased;
+    }
+    .cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; max-width: 1080px; margin: 0 auto; }
+    .display { font-family: var(--font-serif); font-size: 44px; line-height: 1.1; letter-spacing: -0.6px; margin: 0; }
+    .lede { font-size: 16px; line-height: 1.6; color: var(--color-ink-2); margin: 14px 0 0; }
+    .scale { margin-top: 26px; border-top: 1px solid var(--color-line); padding-top: 18px; }
+    .scale div { margin-bottom: 10px; }
+    .card {
+      background: var(--color-card);
+      border: 1px solid var(--color-line);
+      border-radius: var(--radius-card);
+      padding: 20px;
+      margin-bottom: 16px;
+    }
+    .btn {
+      border: 0; padding: 12px 20px;
+      border-radius: var(--radius-chip);
+      background: var(--color-accent); color: #fff;
+      font: inherit; font-size: 14px; font-weight: 700;
+      cursor: pointer;
+    }
+    .btn.ghost {
+      background: transparent;
+      color: var(--color-ink);
+      border: 1px solid var(--color-line);
+    }
+    .chip {
+      display: inline-flex; padding: 6px 12px;
+      border-radius: var(--radius-chip);
+      background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+      color: var(--color-accent);
+      font-size: 12px; font-weight: 700;
+      margin-inline-end: 6px;
+    }
+    input[type="text"] {
+      width: 100%; padding: 11px 12px;
+      border: 1px solid var(--color-line);
+      border-radius: calc(var(--radius-card) / 1.6);
+      background: var(--color-bg); color: var(--color-ink);
+      font: inherit; font-size: 14px;
+      outline: none;
+    }
+    input[type="text"]:focus { border-color: var(--color-accent); }
+    .label { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--color-ink-2); margin-bottom: 10px; }
+  </style>
+</head>
+<body>
+  <div class="cols">
+    <div>
+      <h1 class="display">Design decides once,<br>tokens repeat it everywhere.</h1>
+      <p class="lede">This page has zero hard-coded colors. Switch the theme or mode in the shell — serif voice, palette, radii and spacing all come from the active <b>themes/*.json</b>.</p>
+      <div class="scale">
+        <div class="label">Type scale</div>
+        <div style="font-family:var(--font-serif);font-size:32px">Serif display 32</div>
+        <div style="font-size:22px;font-weight:700">Sans headline 22</div>
+        <div style="font-size:16px">Body 16 — the quick brown qahwa jumps over the lazy latte.</div>
+        <div style="font-size:13px;color:var(--color-ink-2)">Secondary 13 — muted ink-2 for metadata.</div>
+      </div>
+    </div>
+    <div>
+      <div class="card">
+        <div class="label">Buttons & chips</div>
+        <button class="btn" id="cta">Primary action</button>
+        <button class="btn ghost" style="margin-inline-start:8px">Secondary</button>
+        <div style="margin-top:14px">
+          <span class="chip">accent chip</span><span class="chip">radius-chip</span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="label">Form</div>
+        <input type="text" placeholder="Focus me — the ring is --color-accent">
+      </div>
+      <div class="card">
+        <div class="label">Nested card</div>
+        <div class="card" style="margin:0">
+          <b>--radius-card</b> at every level,<br>
+          <span style="color:var(--color-ink-2)">--color-line for every border.</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    Engine.ready(function () {
+      document.getElementById('cta').addEventListener('click', function () {
+        Engine.toast('Styled by ' + Engine.env.theme + ' · ' + document.documentElement.getAttribute('data-mode'));
+      });
+    });
+  </script>
+</body>
+</html>

package/examples/tokens-lab/review/comments.json

@@ -0,0 +1,3 @@
+{
+  "comments": []
+}

package/examples/tokens-lab/themes/noir.json

@@ -0,0 +1,32 @@
+{
+  "id": "noir",
+  "title": "Noir",
+  "modes": {
+    "light": {
+      "color": {
+        "accent": "#C33149",
+        "bg": "#EFEBE4",
+        "card": "#FBF9F5",
+        "ink": "#211D1D",
+        "ink-2": "#7C7370",
+        "line": "#DDD5CA"
+      },
+      "font": {
+        "sans": "Avenir Next, -apple-system, 'Segoe UI', sans-serif",
+        "serif": "'Iowan Old Style', ui-serif, Georgia, serif"
+      },
+      "radius": { "card": "4px", "chip": "6px" },
+      "space": { "page": "24px" }
+    },
+    "dark": {
+      "color": {
+        "accent": "#E4556D",
+        "bg": "#0F0D0E",
+        "card": "#191617",
+        "ink": "#F2EDEA",
+        "ink-2": "#9E9491",
+        "line": "#2B2627"
+      }
+    }
+  }
+}