npm - @cs4alhaider/screenbook - Versions diffs - 0.1.0 - Mend

@cs4alhaider/screenbook 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/CLAUDE.md +185 -0
package/LICENSE +21 -0
package/README.md +208 -0
package/TESTING.md +54 -0
package/app-bridge.js +131 -0
package/bridge.js +598 -0
package/cli/screenbook.js +290 -0
package/cli/templates.js +139 -0
package/core/browser.js +108 -0
package/core/fsx.js +71 -0
package/core/meta.js +94 -0
package/core/project.js +482 -0
package/core/serve.js +224 -0
package/docs/README.md +21 -0
package/docs/app-mode-guide.md +79 -0
package/docs/authoring-guide.md +129 -0
package/docs/cli.md +78 -0
package/docs/getting-started.md +88 -0
package/docs/mcp-agents.md +60 -0
package/docs/shots/android-dark.png +0 -0
package/docs/shots/app-mode.png +0 -0
package/docs/shots/hero-studio.png +0 -0
package/docs/shots/rtl-arabic.png +0 -0
package/docs/shots/theme-lab.png +0 -0
package/docs/shots/theming-noir.png +0 -0
package/docs/shots/web-dashboard.png +0 -0
package/docs/studio-guide.md +64 -0
package/docs/troubleshooting.md +55 -0
package/examples/qahwa/app.config.json +9 -0
package/examples/qahwa/features/order/data/scenarios.json +25 -0
package/examples/qahwa/features/order/data/seed.json +21 -0
package/examples/qahwa/features/order/feature.json +7 -0
package/examples/qahwa/features/order/flows.json +16 -0
package/examples/qahwa/features/order/manifest.json +78 -0
package/examples/qahwa/features/order/screens/010-menu.html +121 -0
package/examples/qahwa/features/order/screens/020-drink.html +120 -0
package/examples/qahwa/features/order/screens/030-cart.html +99 -0
package/examples/qahwa/features/order/screens/040-status.html +125 -0
package/examples/qahwa/features/order/screens/050-status-android.html +95 -0
package/examples/qahwa/features/order/screens/shared.css +146 -0
package/examples/qahwa/features/roastery/data/scenarios.json +35 -0
package/examples/qahwa/features/roastery/data/seed.json +17 -0
package/examples/qahwa/features/roastery/feature.json +7 -0
package/examples/qahwa/features/roastery/flows.json +14 -0
package/examples/qahwa/features/roastery/manifest.json +32 -0
package/examples/qahwa/features/roastery/screens/010-orders.html +103 -0
package/examples/qahwa/features/roastery/screens/020-menu-editor.html +88 -0
package/examples/qahwa/features/roastery/screens/shared.css +115 -0
package/examples/qahwa/review/comments.json +3 -0
package/examples/qahwa/themes/qahwa.json +43 -0
package/examples/spa-demo/app/index.html +100 -0
package/examples/spa-demo/app.config.json +9 -0
package/examples/spa-demo/features/notes-app/feature.json +11 -0
package/examples/spa-demo/review/comments.json +3 -0
package/examples/spa-demo/themes/default.json +15 -0
package/examples/tokens-lab/app.config.json +9 -0
package/examples/tokens-lab/features/lab/data/scenarios.json +5 -0
package/examples/tokens-lab/features/lab/data/seed.json +3 -0
package/examples/tokens-lab/features/lab/feature.json +7 -0
package/examples/tokens-lab/features/lab/flows.json +14 -0
package/examples/tokens-lab/features/lab/manifest.json +33 -0
package/examples/tokens-lab/features/lab/screens/010-swatches.html +112 -0
package/examples/tokens-lab/features/lab/screens/020-typography.html +115 -0
package/examples/tokens-lab/review/comments.json +3 -0
package/examples/tokens-lab/themes/noir.json +32 -0
package/examples/tokens-lab/themes/paper.json +32 -0
package/index.html +50 -0
package/mcp/server.js +366 -0
package/package.json +57 -0
package/shell/flowplayer.js +85 -0
package/shell/frames.js +108 -0
package/shell/main.js +397 -0
package/shell/net.js +126 -0
package/shell/review.js +213 -0
package/shell/screenhost.js +380 -0
package/shell/selftest.js +275 -0
package/shell/shell.css +952 -0
package/shell/sidebar.js +112 -0
package/shell/store.js +119 -0
package/shell/themelab.js +186 -0
package/shell/toast.js +15 -0
package/shell/toolbar.js +128 -0
package/skill/SKILL.md +52 -0
package/skill/references/app-mode.md +77 -0
package/skill/references/bridge-api.md +55 -0
package/skill/references/cli-mcp.md +53 -0
package/skill/references/flows.md +44 -0
package/skill/references/i18n.md +52 -0
package/skill/references/scenarios.md +45 -0
package/skill/references/screen-contract.md +83 -0
package/skill/references/tokens.md +56 -0

package/examples/qahwa/features/order/screens/040-status.html ADDED Viewed

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Qahwa — Order status</title>
+  <script type="application/json" id="screen-meta">
+  {
+    "title": "Order status",
+    "description": "Live pickup timeline — flips with the ✅ order-ready scenario. Renders on iPhone AND Android (device variants).",
+    "order": 40,
+    "device": "ios",
+    "devices": ["ios", "android"],
+    "status": "ready",
+    "tags": ["live"],
+    "updated": "2026-07-18"
+  }
+  </script>
+  <script src="../../../engine/bridge.js"></script>
+  <link rel="stylesheet" href="shared.css">
+  <style>
+    .stepper { position: relative; padding-inline-start: 26px; }
+    .stepper::before {
+      content: ''; position: absolute;
+      inset-block: 10px; inset-inline-start: 8px;
+      width: 2px; background: var(--color-line);
+    }
+    .step { position: relative; padding: 12px 0; }
+    .step::before {
+      content: ''; position: absolute;
+      inset-inline-start: -24px; top: 16px;
+      width: 12px; height: 12px; border-radius: 50%;
+      background: var(--color-line);
+      outline: 3px solid var(--color-bg);
+    }
+    .step.done::before { background: var(--color-good); }
+    .step.now::before { background: var(--color-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 22%, transparent); }
+    .step .t { font-weight: 700; font-size: 14.5px; }
+    .step .s { font-size: 12.5px; color: var(--color-ink-2); margin-top: 2px; }
+    .step.todo { opacity: .5; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <div class="appbar">
+      <button class="back" data-go="010-menu">←</button>
+      <h1 style="font-size:19px">Order status</h1>
+      <div class="spacer"></div>
+    </div>
+    <div id="none" hidden style="text-align:center;padding:60px 10px">
+      <div style="font-size:44px">🌙</div>
+      <div style="font-weight:700;margin-top:10px">No active order</div>
+      <div class="small muted" style="margin-top:4px">Your next cup is one tap away.</div>
+      <button class="btn" data-go="010-menu" style="margin-top:18px">Order something</button>
+    </div>
+    <div id="active" hidden>
+      <div class="card" style="text-align:center;padding:22px">
+        <div class="small muted">Order</div>
+        <div style="font-family:var(--font-serif);font-size:30px;font-weight:700" id="o-id"></div>
+        <span class="badge warn" id="o-badge" style="margin-top:8px"></span>
+        <div class="small muted" style="margin-top:10px" id="o-eta"></div>
+      </div>
+      <div class="card" style="margin-top:12px">
+        <div class="stepper" id="steps"></div>
+      </div>
+      <div class="card" style="margin-top:12px;padding:6px 14px">
+        <div id="o-items"></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    var PHASES = [
+      { id: 'received', t: 'Received', s: 'The barista has your ticket' },
+      { id: 'brewing', t: 'Brewing', s: 'Dialing in, pulling shots' },
+      { id: 'ready', t: 'Ready', s: 'Pick it up at the counter' },
+      { id: 'picked-up', t: 'Picked up', s: 'Enjoy ☕' }
+    ];
+    Engine.ready(function (d) {
+      if (!d.order) {
+        document.getElementById('none').hidden = false;
+        return;
+      }
+      document.getElementById('active').hidden = false;
+      var phase = d.order.phase || 'received';
+      var phaseIx = PHASES.findIndex(function (p) { return p.id === phase; });
+      if (phaseIx < 0) phaseIx = 0;
+      document.getElementById('o-id').textContent = d.order.id;
+      var badge = document.getElementById('o-badge');
+      badge.textContent = PHASES[phaseIx].t.toUpperCase();
+      badge.className = 'badge ' + (phase === 'ready' ? 'good' : 'warn');
+      document.getElementById('o-eta').textContent =
+        phase === 'ready' ? 'Waiting for you — placed ' + d.order.placedAt
+                          : 'Ready by ' + d.order.readyBy + ' · placed ' + d.order.placedAt;
+      var steps = document.getElementById('steps');
+      PHASES.forEach(function (p, i) {
+        var el = document.createElement('div');
+        el.className = 'step ' + (i < phaseIx ? 'done' : i === phaseIx ? 'now' : 'todo');
+        el.innerHTML = '<div class="t">' + p.t + '</div><div class="s">' + p.s + '</div>';
+        steps.appendChild(el);
+      });
+      var itemsBox = document.getElementById('o-items');
+      (d.order.items || []).forEach(function (line) {
+        var m = (d.menu || []).find(function (x) { return x.id === line.menuId; });
+        if (!m) return;
+        var row = document.createElement('div');
+        row.className = 'row';
+        row.style.cursor = 'default';
+        row.innerHTML =
+          '<span class="emoji">' + m.emoji + '</span>' +
+          '<div class="grow"><div class="name">' + m.name + ' ×' + line.qty + '</div></div>' +
+          '<div class="price">' + m.price * line.qty + ' SAR</div>';
+        itemsBox.appendChild(row);
+      });
+    });
+  </script>
+</body>
+</html>

package/examples/qahwa/features/order/screens/050-status-android.html ADDED Viewed

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Qahwa — Order status (Android)</title>
+  <script type="application/json" id="screen-meta">
+  {
+    "title": "Status — Android",
+    "description": "The same pickup moment in the Android frame (Material-ish idioms).",
+    "order": 50,
+    "device": "android",
+    "status": "draft",
+    "tags": ["android", "live"],
+    "group": "Other devices",
+    "updated": "2026-07-18"
+  }
+  </script>
+  <script src="../../../engine/bridge.js"></script>
+  <link rel="stylesheet" href="shared.css">
+  <style>
+    /* Material-ish accents for the Android take */
+    .m-card { border-radius: 24px; }
+    .m-fab {
+      position: fixed;
+      inset-inline-end: 18px;
+      bottom: calc(var(--safe-bottom) + 18px);
+      width: 56px; height: 56px;
+      border-radius: 18px;
+      border: 0;
+      background: var(--color-accent);
+      color: var(--color-accent-ink, #fff);
+      font-size: 22px;
+      cursor: pointer;
+      box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 45%, transparent);
+    }
+    .m-progress {
+      height: 6px; border-radius: 3px;
+      background: var(--color-line);
+      overflow: hidden;
+    }
+    .m-progress i { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <div class="appbar" style="padding-top:14px">
+      <h1 style="font-size:22px;font-family:var(--font-sans);font-weight:800">Your order</h1>
+      <span class="chip-points">☕ Qahwa</span>
+    </div>
+    <div class="card m-card" id="card" hidden>
+      <div style="display:flex;align-items:center;justify-content:space-between">
+        <div>
+          <div class="small muted">Order</div>
+          <div style="font-size:26px;font-weight:800" id="o-id"></div>
+        </div>
+        <span class="badge warn" id="o-badge"></span>
+      </div>
+      <div style="margin-top:16px" class="m-progress"><i id="o-bar" style="width:40%"></i></div>
+      <div class="small muted" style="margin-top:8px" id="o-eta"></div>
+    </div>
+    <div id="none" hidden class="card m-card" style="text-align:center;padding:34px">
+      <div style="font-size:40px">🌙</div>
+      <div style="font-weight:800;margin-top:8px">No active order</div>
+    </div>
+  </div>
+  <button class="m-fab" id="fab" title="New order">+</button>
+  <script>
+    Engine.ready(function (d) {
+      var pct = { received: 15, brewing: 55, ready: 100, 'picked-up': 100 };
+      if (!d.order) {
+        document.getElementById('none').hidden = false;
+      } else {
+        var card = document.getElementById('card');
+        card.hidden = false;
+        var ready = d.order.phase === 'ready';
+        document.getElementById('o-id').textContent = d.order.id;
+        var badge = document.getElementById('o-badge');
+        badge.textContent = (d.order.phase || 'received').toUpperCase();
+        badge.className = 'badge ' + (ready ? 'good' : 'warn');
+        document.getElementById('o-bar').style.width = (pct[d.order.phase] || 15) + '%';
+        document.getElementById('o-eta').textContent =
+          ready ? 'Waiting at the counter' : 'Ready by ' + d.order.readyBy;
+      }
+      document.getElementById('fab').addEventListener('click', function () {
+        Engine.toast('Ordering lives on the iOS screens in this demo');
+      });
+    });
+  </script>
+</body>
+</html>

package/examples/qahwa/features/order/screens/shared.css ADDED Viewed

@@ -0,0 +1,146 @@
+/* Qahwa ordering — shared app chrome (EN-23 opt-in per screen). 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;
+}
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--safe-top) + 8px) var(--space-page) calc(var(--safe-bottom) + 16px);
+}
+.appbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 2px 14px;
+}
+.appbar .back {
+  border: 0; background: var(--color-card);
+  width: 34px; height: 34px; border-radius: 50%;
+  font-size: 15px; color: var(--color-ink);
+  cursor: pointer; border: 1px solid var(--color-line);
+}
+.appbar h1 {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: 24px;
+  letter-spacing: -0.3px;
+}
+.appbar .spacer { width: 34px; }
+.chip-points {
+  display: inline-flex; align-items: center; gap: 5px;
+  background: var(--color-card);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-chip);
+  padding: 6px 11px;
+  font-size: 12px; font-weight: 700;
+}
+.card {
+  background: var(--color-card);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-card);
+  padding: 16px;
+}
+.row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 4px;
+  border-bottom: 1px solid var(--color-line);
+  cursor: pointer;
+}
+.row:last-child { border-bottom: 0; }
+.row .emoji {
+  width: 44px; height: 44px;
+  display: grid; place-items: center;
+  background: var(--color-bg);
+  border: 1px solid var(--color-line);
+  border-radius: 14px;
+  font-size: 22px;
+  flex: 0 0 auto;
+}
+.row .grow { flex: 1; min-width: 0; }
+.row .name { font-weight: 700; font-size: 15px; }
+.row .desc { font-size: 12.5px; color: var(--color-ink-2); margin-top: 2px; line-height: 1.4; }
+.row .price { font-weight: 700; font-size: 14px; white-space: nowrap; }
+.row.is-off { opacity: .45; cursor: default; }
+.btn {
+  display: block; width: 100%;
+  border: 0; padding: 15px;
+  border-radius: 16px;
+  background: var(--color-accent);
+  color: var(--color-accent-ink, #fff);
+  font-family: inherit; font-size: 16px; font-weight: 700;
+  cursor: pointer;
+}
+.btn:active { transform: scale(.985); }
+.btn.ghost {
+  background: var(--color-card);
+  color: var(--color-ink);
+  border: 1px solid var(--color-line);
+}
+.muted { color: var(--color-ink-2); }
+.small { font-size: 12.5px; }
+.badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  border-radius: var(--radius-chip);
+  padding: 5px 10px;
+  font-size: 11.5px; font-weight: 700;
+}
+.badge.good { background: color-mix(in srgb, var(--color-good) 14%, transparent); color: var(--color-good); }
+.badge.warn { background: color-mix(in srgb, var(--color-warn) 16%, transparent); color: var(--color-warn); }
+/* bottom sheet (lives inside its screen, EN-24) */
+.sheet-veil {
+  position: fixed; inset: 0;
+  background: rgba(20, 12, 5, 0.45);
+  opacity: 0; pointer-events: none;
+  transition: opacity .2s ease;
+  z-index: 40;
+}
+.sheet {
+  position: fixed; left: 0; right: 0; bottom: 0;
+  background: var(--color-card);
+  border-radius: 22px 22px 0 0;
+  padding: 14px var(--space-page) calc(var(--safe-bottom) + 16px);
+  transform: translateY(105%);
+  transition: transform .24s ease;
+  z-index: 41;
+}
+.sheet .grab {
+  width: 40px; height: 4px; border-radius: 2px;
+  background: var(--color-line);
+  margin: 0 auto 12px;
+}
+body.sheet-open .sheet-veil { opacity: 1; pointer-events: auto; }
+body.sheet-open .sheet { transform: translateY(0); }
+.seg { display: flex; gap: 8px; }
+.seg button {
+  flex: 1; padding: 11px 6px;
+  border: 1px solid var(--color-line);
+  border-radius: 12px;
+  background: var(--color-bg);
+  color: var(--color-ink);
+  font-family: inherit; font-size: 13px; font-weight: 650;
+  cursor: pointer;
+}
+.seg button.on {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-accent-ink, #fff);
+}

package/examples/qahwa/features/roastery/data/scenarios.json ADDED Viewed

@@ -0,0 +1,35 @@
+{
+  "list": [
+    {
+      "id": "default",
+      "icon": "🧪",
+      "title": "Steady morning",
+      "description": "A calm queue — two ready, one brewing."
+    },
+    {
+      "id": "rush",
+      "icon": "🔥",
+      "title": "Friday rush",
+      "description": "The queue when the mosque lets out.",
+      "patch": {
+        "queue": [
+          { "id": "Q-2493", "customer": "Walk-in", "items": "Espresso ×4", "total": 48, "placed": "12:44", "status": "queued" },
+          { "id": "Q-2492", "customer": "Aisha", "items": "Saffron Latte ×2", "total": 48, "placed": "12:43", "status": "queued" },
+          { "id": "Q-2491", "customer": "Careem rider", "items": "Cold Brew ×3 · Flat White ×2", "total": 86, "placed": "12:41", "status": "brewing" },
+          { "id": "Q-2490", "customer": "Omar", "items": "V60 ×1", "total": 22, "placed": "12:40", "status": "brewing" },
+          { "id": "Q-2489", "customer": "Huda", "items": "Flat White ×1", "total": 16, "placed": "12:38", "status": "ready" },
+          { "id": "Q-2488", "customer": "Yousef", "items": "Espresso ×2", "total": 24, "placed": "12:35", "status": "ready" },
+          { "id": "Q-2487", "customer": "Reem", "items": "Cold Brew ×1", "total": 18, "placed": "12:31", "status": "done" }
+        ]
+      }
+    },
+    {
+      "id": "closed",
+      "icon": "🌙",
+      "title": "After close",
+      "description": "Empty queue — the end-of-day state.",
+      "remove": ["queue"],
+      "patch": { "queue": [] }
+    }
+  ]
+}

package/examples/qahwa/features/roastery/data/seed.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "shop": { "name": "Qahwa Roastery", "branch": "As-Sahafa · Riyadh", "day": "{{today}}" },
+  "queue": [
+    { "id": "Q-2481", "customer": "Lina", "items": "Flat White ×1 · V60 ×1", "total": 38, "placed": "08:31", "status": "brewing" },
+    { "id": "Q-2480", "customer": "Mohannad", "items": "Cold Brew ×2", "total": 36, "placed": "08:28", "status": "ready" },
+    { "id": "Q-2479", "customer": "Sara", "items": "Espresso ×1", "total": 12, "placed": "08:26", "status": "ready" },
+    { "id": "Q-2478", "customer": "Faisal", "items": "V60 ×1 · Espresso ×2", "total": 46, "placed": "08:19", "status": "done" },
+    { "id": "Q-2477", "customer": "Noura", "items": "Flat White ×2", "total": 32, "placed": "08:12", "status": "done" }
+  ],
+  "menu": [
+    { "id": "flat-white", "name": "Flat White", "price": 16, "emoji": "☕", "available": true, "sold": 41 },
+    { "id": "v60", "name": "V60 Pour-over", "price": 22, "emoji": "🫖", "available": true, "sold": 18 },
+    { "id": "espresso", "name": "Espresso", "price": 12, "emoji": "🥃", "available": true, "sold": 33 },
+    { "id": "cold-brew", "name": "Cold Brew", "price": 18, "emoji": "🧊", "available": true, "sold": 24 },
+    { "id": "saffron-latte", "name": "Saffron Latte", "price": 24, "emoji": "🌼", "available": false, "sold": 0 }
+  ]
+}

package/examples/qahwa/features/roastery/feature.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "id": "roastery",
+  "title": "Roastery desk",
+  "icon": "🖥",
+  "description": "The staff side on the web — live order queue and the menu editor.",
+  "order": 2
+}

package/examples/qahwa/features/roastery/flows.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "list": [
+    {
+      "id": "friday-rush",
+      "title": "Surviving the rush",
+      "icon": "🔥",
+      "description": "The desk during peak — queue triage, then menu tweaks.",
+      "steps": [
+        { "screen": "010-orders", "scenario": "rush", "note": "Friday 12:44 — seven tickets. Queued/brewing/ready rows sort themselves." },
+        { "screen": "020-menu-editor", "note": "Saffron Latte is 86'd; flipping availability here hides it in the customer app." }
+      ]
+    }
+  ]
+}

package/examples/qahwa/features/roastery/manifest.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "feature": "roastery",
+  "generated": "2026-07-18",
+  "screens": [
+    {
+      "id": "010-orders",
+      "file": "screens/010-orders.html",
+      "title": "Live orders",
+      "description": "The queue board — KPIs on top, tickets sorted by state. Try the 🔥 rush scenario.",
+      "order": 10,
+      "device": "web",
+      "status": "ready",
+      "tags": [
+        "dashboard"
+      ],
+      "updated": "2026-07-18"
+    },
+    {
+      "id": "020-menu-editor",
+      "file": "screens/020-menu-editor.html",
+      "title": "Menu editor",
+      "description": "Prices + availability switches; unsaved-changes bar demonstrates in-screen state.",
+      "order": 20,
+      "device": "web",
+      "status": "ready",
+      "tags": [
+        "admin"
+      ],
+      "updated": "2026-07-18"
+    }
+  ]
+}

package/examples/qahwa/features/roastery/screens/010-orders.html ADDED Viewed

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Roastery — Live orders</title>
+  <script type="application/json" id="screen-meta">
+  {
+    "title": "Live orders",
+    "description": "The queue board — KPIs on top, tickets sorted by state. Try the 🔥 rush scenario.",
+    "order": 10,
+    "device": "web",
+    "status": "ready",
+    "tags": ["dashboard"],
+    "updated": "2026-07-18"
+  }
+  </script>
+  <script src="../../../engine/bridge.js"></script>
+  <link rel="stylesheet" href="shared.css">
+</head>
+<body>
+  <div class="desk">
+    <header class="desk-top">
+      <div class="brand"><span class="mark">☕</span> <span id="shop">Qahwa Roastery</span></div>
+      <nav>
+        <button class="on">Orders</button>
+        <button data-go="020-menu-editor">Menu</button>
+      </nav>
+      <div class="meta" id="daymeta"></div>
+    </header>
+    <main class="desk-body">
+      <div class="kpis">
+        <div class="kpi"><div class="v" id="k-open">0</div><div class="l">Open tickets</div></div>
+        <div class="kpi"><div class="v" id="k-ready">0</div><div class="l">Waiting at counter</div></div>
+        <div class="kpi"><div class="v" id="k-done">0</div><div class="l">Served today</div></div>
+        <div class="kpi"><div class="v" id="k-rev">0</div><div class="l">Revenue (SAR)</div></div>
+      </div>
+      <div class="panel">
+        <div class="panel-head">
+          <span>Queue</span>
+          <button class="btn-sm" id="mark-all">Mark all ready → done</button>
+        </div>
+        <table>
+          <thead>
+            <tr><th>Ticket</th><th>Customer</th><th>Items</th><th>Placed</th><th style="text-align:end">Total</th><th>Status</th></tr>
+          </thead>
+          <tbody id="rows"></tbody>
+        </table>
+        <div id="empty" hidden style="padding:44px;text-align:center;color:var(--color-ink-2)">
+          <div style="font-size:38px">🌙</div>
+          <div style="font-weight:700;margin-top:8px;color:var(--color-ink)">Queue's clear</div>
+          <div style="font-size:12.5px;margin-top:3px">Every ticket served. Time to cup tomorrow's roast.</div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <script>
+    var RANK = { queued: 0, brewing: 1, ready: 2, done: 3 };
+    Engine.ready(function (d) {
+      var queue = (d.queue || []).slice().sort(function (a, b) {
+        return (RANK[a.status] ?? 9) - (RANK[b.status] ?? 9) || (b.placed > a.placed ? 1 : -1);
+      });
+      document.getElementById('shop').textContent = (d.shop && d.shop.name) || 'Roastery';
+      document.getElementById('daymeta').textContent =
+        (d.shop ? d.shop.branch + ' · ' : '') + (d.shop ? d.shop.day : '');
+      document.getElementById('k-open').textContent =
+        queue.filter(function (o) { return o.status === 'queued' || o.status === 'brewing'; }).length;
+      document.getElementById('k-ready').textContent =
+        queue.filter(function (o) { return o.status === 'ready'; }).length;
+      document.getElementById('k-done').textContent =
+        queue.filter(function (o) { return o.status === 'done'; }).length;
+      document.getElementById('k-rev').textContent =
+        queue.reduce(function (s, o) { return s + (o.total || 0); }, 0);
+      var tbody = document.getElementById('rows');
+      if (!queue.length) {
+        document.getElementById('empty').hidden = false;
+        document.querySelector('table').style.display = 'none';
+      }
+      queue.forEach(function (o) {
+        var tr = document.createElement('tr');
+        tr.innerHTML =
+          '<td class="num">' + o.id + '</td>' +
+          '<td>' + o.customer + '</td>' +
+          '<td class="muted">' + o.items + '</td>' +
+          '<td class="num">' + o.placed + '</td>' +
+          '<td class="num" style="text-align:end">' + o.total + '</td>' +
+          '<td><span class="st ' + o.status + '">' + o.status + '</span></td>';
+        tbody.appendChild(tr);
+      });
+      document.getElementById('mark-all').addEventListener('click', function () {
+        var n = queue.filter(function (o) { return o.status === 'ready'; }).length;
+        Engine.toast(n ? n + ' ticket' + (n > 1 ? 's' : '') + ' handed over ✓' : 'Nothing waiting');
+      });
+    });
+  </script>
+</body>
+</html>

package/examples/qahwa/features/roastery/screens/020-menu-editor.html ADDED Viewed

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Roastery — Menu editor</title>
+  <script type="application/json" id="screen-meta">
+  {
+    "title": "Menu editor",
+    "description": "Prices + availability switches; unsaved-changes bar demonstrates in-screen state.",
+    "order": 20,
+    "device": "web",
+    "status": "ready",
+    "tags": ["admin"],
+    "updated": "2026-07-18"
+  }
+  </script>
+  <script src="../../../engine/bridge.js"></script>
+  <link rel="stylesheet" href="shared.css">
+</head>
+<body>
+  <div class="desk">
+    <header class="desk-top">
+      <div class="brand"><span class="mark">☕</span> <span id="shop">Qahwa Roastery</span></div>
+      <nav>
+        <button data-go="010-orders">Orders</button>
+        <button class="on">Menu</button>
+      </nav>
+      <div class="meta" id="daymeta"></div>
+    </header>
+    <main class="desk-body">
+      <div class="panel">
+        <div class="panel-head">
+          <span>Menu · <span id="count" class="muted"></span></span>
+          <span style="display:flex;gap:8px;align-items:center">
+            <span id="dirty" hidden class="st brewing">unsaved changes</span>
+            <button class="btn-sm primary" id="save">Save menu</button>
+          </span>
+        </div>
+        <table>
+          <thead>
+            <tr><th></th><th>Drink</th><th>Sold today</th><th>Price (SAR)</th><th>Available</th></tr>
+          </thead>
+          <tbody id="rows"></tbody>
+        </table>
+      </div>
+      <p class="meta" style="margin-top:12px;color:var(--color-ink-2);font-size:12.5px">
+        Flipping availability here is what hides a drink in the customer app — same seed, two surfaces.
+      </p>
+    </main>
+  </div>
+  <script>
+    Engine.ready(function (d) {
+      var menu = (d.menu || []).map(function (m) { return Object.assign({}, m); });
+      document.getElementById('shop').textContent = (d.shop && d.shop.name) || 'Roastery';
+      document.getElementById('daymeta').textContent = d.shop ? d.shop.branch + ' · ' + d.shop.day : '';
+      document.getElementById('count').textContent = menu.length + ' drinks';
+      var dirtyBadge = document.getElementById('dirty');
+      function markDirty() { dirtyBadge.hidden = false; }
+      var tbody = document.getElementById('rows');
+      menu.forEach(function (m) {
+        var tr = document.createElement('tr');
+        var priceId = 'p-' + m.id;
+        tr.innerHTML =
+          '<td style="font-size:20px">' + m.emoji + '</td>' +
+          '<td style="font-weight:650">' + m.name + '</td>' +
+          '<td class="num">' + (m.sold || 0) + '</td>' +
+          '<td class="num"><input id="' + priceId + '" value="' + m.price + '" inputmode="numeric" ' +
+            'style="width:64px;padding:6px 8px;border:1px solid var(--color-line);border-radius:8px;' +
+            'background:var(--color-bg);color:var(--color-ink);font:inherit"></td>' +
+          '<td><label class="switch"><input type="checkbox" ' + (m.available ? 'checked' : '') + '><i></i></label></td>';
+        tr.querySelector('input[inputmode]').addEventListener('input', markDirty);
+        tr.querySelector('input[type=checkbox]').addEventListener('change', markDirty);
+        tbody.appendChild(tr);
+      });
+      document.getElementById('save').addEventListener('click', function () {
+        dirtyBadge.hidden = true;
+        Engine.toast('Menu saved — the customer app sees it instantly ✓');
+      });
+    });
+  </script>
+</body>
+</html>