mudra-skills 1.0.0

package/skills/mudra-preview/SKILL.md

@@ -0,0 +1,151 @@
+---
+name: mudra-preview
+version: 2.2.0
+description: Generate a working Mudra Band interactive app preview as a single-file HTML. Use when the user describes a Mudra-controlled experience (gesture, pressure, navigation, IMU, SNC), wants to prototype a Mudra Companion app, or asks to build/preview a Mudra app.
+---
+
+# Mudra Preview
+
+Generate a complete, working single-file HTML app controlled by Mudra Band signals.
+
+**Mandatory feature (v1.1.0, updated v1.4.0):** Every generated app MUST
+include a Manual/Mudra **Mode toggle** as defined in `references/promt.md`
+§ "Mode Toggle (Manual / Mudra) — Required". Manual is the default; Mudra
+opens a single WebSocket lazily and disables the simulator panel so signals
+come only from the band.
+
+**Removed in v1.4.0:** Do **not** render a "Band disconnected" overlay,
+toast, or any other separate disconnect alert. Connection state is
+communicated **only** through the existing connection-status pill (which
+shows "Connecting…" / "Connected" / "Disconnected"). No extra notice,
+no banner, no modal.
+
+**Branding (v1.4.0):** The footer/badge text MUST be exactly
+**"Created by Mudra"** — never "Created with Mudra Studio" or any
+other variant.
+
+**Mandatory feature (v1.2.0):** Connection state MUST reflect the **band**, not
+the WebSocket. The Companion service accepts socket connections even when no
+band is paired, so flipping to "Connected" on `ws.onopen` is a lie. Every
+generated app MUST send `{command:"get_status"}` on open and poll it every
+2 s while in Mudra mode, and only show "Connected" when the response has
+`data.device.state === "connected"`. See `references/promt.md` §
+"Disconnect detection — band state via `get_status` polling (mandatory)".
+
+The canonical protocol is in `references/agent_protocol.json` (v2.0).
+
+## Steps
+
+1. **Read the full instructions** from `references/promt.md` inside the skill base directory. That file contains the complete protocol contract, signal compatibility rules, the Mode Toggle architecture (mandatory), build defaults, and sample catalog — follow all of it.
+
+2. **Infer intent** from the user's description (or the args passed to this skill). Fill gaps with smart defaults. Ask only if there is genuine ambiguity (e.g., `gesture` vs `pressure`, `navigation` vs `nav_direction`, or directional motion vs IMU+Biometric bundle).
+
+3. **Select the best-matching template** from `assets/` inside the skill base directory. Use the selection rule from `references/promt.md` (motion mode → interaction pattern → signal overlap).
+
+4. **Generate the app** as a single self-contained HTML file:
+   - Follow every rule in `references/promt.md` (protocol contract, signal compatibility, mock WebSocket, theme, fallbacks)
+   - Choose a color palette that matches the concept — never default to dark unless the concept calls for it
+   - Include the Mudra badge, connection indicator, telemetry HUD, simulator panel (see below), and keyboard fallbacks
+
+### Simulator Panel (Required)
+
+Every generated app MUST include a **compact, always-visible simulator panel** with one button set per subscribed signal. The user must be able to trigger every signal with a click — so they can test without the band, or alongside it.
+
+**Layout rules**
+- One thin horizontal strip (usually in or just below the header, or pinned to the bottom edge).
+- **Always visible** — do NOT hide when the band is connected.
+- Group by signal. Use short labels so it stays compact (e.g., `Tap`, `2Tap`, `Twist`, `↑`, `↓`, `Roll L`).
+- Reuse the existing `.btn` style from the chosen template.
+- No drawers, no collapse, no accordion — one click to fire.
+
+**Buttons per signal** (only render the groups for signals the app actually subscribes to)
+
+| Signal | Buttons |
+|---|---|
+| `gesture` | `Tap`, `2Tap`, `Twist`, `2Twist` |
+| `nav_direction` | `↑`, `↓`, `←`, `→`, `Roll L`, `Roll R` |
+| `navigation` | `↑`, `↓`, `←`, `→` (each click emits one delta event of ±8) |
+| `pressure` | Slider `0–100%` (or `−` / `+` buttons if horizontal space is tight) |
+| `button` | `Press`, `Release` |
+| `imu_acc` | `Tilt X`, `Tilt Y`, `Tilt Z` (each fires a 5-frame burst at ±2 m/s²) |
+| `imu_gyro` | `Rot X`, `Rot Y`, `Rot Z` (each fires a 5-frame burst at ±10 deg/s) |
+| `snc` | `Spike` (injects a burst of elevated samples on all 3 channels) |
+
+**How each button must fire**
+- `gesture` buttons → `ws.send(JSON.stringify({ command: 'trigger_gesture', data: { type: '<name>' } }))`. This works both when connected to the real band (round-trips through the service) and when the mock is active (mock echoes it back).
+- **All other signals** → emit locally by calling the same handler `ws.onmessage` would dispatch. Example:
+  ```js
+  function simDir(direction) {
+    // same path the real signal would take
+    handleNavDirection({ direction, timestamp: Date.now() });
+    hudDir.textContent = direction;
+  }
+  ```
+  Always update the telemetry HUD from the sim button, same as the real signal would.
+
+5. **Save the output** to `preview/<concept-name>.html` in the project root (create the `preview/` directory if it doesn't exist). Use a short kebab-case name derived from the concept (e.g., `preview/drum-machine.html`).
+
+6. **Report the file path** so the user can open it in a browser immediately.
+
+## Default Signal Set (v1.3.0 — Required)
+
+Unless the user explicitly asks for a different signal, every generated
+app MUST restrict itself to **at most these signals** (subject to the
+exclusivity rules below):
+
+1. **One** of `pressure` **or** `gesture` — never both. `gesture` and
+   `pressure` are mutually exclusive.
+   - **Tap exclusivity rule** (within `gesture`): use `tap` OR `double_tap`
+     — **never both together** unless the user explicitly names both (e.g.,
+     "use single tap for X and double tap for Y").
+     - `tap` → frequent/lightweight: counter increment, navigation step,
+       toggle, next/back, select, trigger. **Default choice.**
+     - `double_tap` → only when the user explicitly requests it by name.
+       Never pair it with `tap` as a default two-action scheme.
+     - Generic synonyms ("tap", "click", "press") → `tap`.
+     - When an app needs **two distinct gesture actions** (e.g., forward +
+       backward), pair `tap` with `twist` — not with `double_tap`.
+       `double_tap` is reserved for explicit user requests only.
+2. **One** directional signal — either `nav_direction` **or**
+   `navigation`, never both.
+
+Rules:
+
+- Drop any of the above if the concept does not need it (e.g., a pure
+  tap-counter subscribes to `gesture` only and skips the directional
+  signal).
+- **`gesture` and `pressure` are mutually exclusive** — pick one
+  interaction model per app. Tap/twist concepts → `gesture`. Analog
+  concepts (volume, brush, throttle) → `pressure`.
+- `nav_direction` and `navigation` are **mutually exclusive per app** —
+  pick the one that fits the interaction (discrete swipes →
+  `nav_direction`; continuous cursor/scroll → `navigation`). Never wire
+  both into the same app.
+- **IMU+Biometric bundle (`imu_acc` + `imu_gyro` + `snc`) is
+  inseparable.** If the concept needs any one of them, subscribe to all
+  three. The bundle is **mutually exclusive** with `navigation` and
+  `nav_direction` — pick directional motion OR the IMU+Biometric bundle,
+  never both.
+- Other gesture subtypes (`twist`, `double_twist`, etc.) and other
+  signals (`button`, `imu_acc`, `imu_gyro`, `snc`, `battery`) are
+  **off by default**. Only include them when the user's prompt names
+  them, names a synonym from the Signal Inference table in
+  `references/promt.md` § "Signal Inference Reference", or describes
+  an interaction that genuinely cannot be expressed with the defaults
+  (e.g., "tilt to steer" → IMU+Biometric bundle; "hold to charge" →
+  `button`).
+- The simulator panel must mirror whichever subset the app actually
+  subscribes to — do not render buttons for signals that are not wired.
+
+## Quick Reference
+
+- WebSocket endpoint: `ws://127.0.0.1:8766` (bare URL — NOT `/events`)
+- Mode toggle (Manual / Mudra) is **mandatory** in every generated app — see `references/promt.md` § "Mode Toggle (Manual / Mudra) — Required"
+- Lazy WS lifecycle: open on Manual→Mudra, close on Mudra→Manual. Manual mode opens NO WebSocket.
+- Subscribe one signal per command: `{ "command": "subscribe", "signal": "<name>" }` — singular `signal`, never `signals`, never an array
+- Motion modes are mutually exclusive: Pointer (`navigation`+`button`) / Direction (`nav_direction`) / IMU+Biometric (`imu_acc`+`imu_gyro`+`snc`, always all three together)
+- IMU+Biometric bundle: `imu_acc`, `imu_gyro`, `snc` always subscribed together — never partially. The bundle is mutually exclusive with `navigation` and `nav_direction`.
+- `gesture` and `pressure` are mutually exclusive — never combine them
+- `button` and `battery` combine freely (subject to the Pointer XOR — `button` belongs to Pointer mode and never combines with `nav_direction`)
+- **Navigation sensitivity is gentle by default**: keyboard `step = 3`, sim button `±3`, cursor multiplier `0.002`. Raise only when the prompt explicitly asks for fast/snappy movement. See `references/promt.md` § "Navigation sensitivity defaults".
+- Canonical protocol JSON: `references/agent_protocol.json` (v2.0)

package/skills/mudra-preview/assets/ar-menu.html

@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>AR Menu Navigator — Mudra Studio</title>
+<style>
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+  }
+
+  :root {
+    --bg: #ffffff; --card: #f1f5f9; --primary: #0d9488; --accent: #14b8a6;
+    --text: #0f172a; --text-secondary: #475569; --success: #16a34a;
+    --warning: #ca8a04; --error: #dc2626;
+    --border: rgba(15,23,42,0.12); --surface: rgba(0,0,0,0.04);
+    --glass: rgba(241,245,249,0.75); --glass-border: rgba(13,148,136,0.2);
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: var(--bg); color: var(--text); font-family: 'Poppins', system-ui, sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
+
+  .header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--border); z-index: 200; flex-shrink: 0; gap: 8px; flex-wrap: wrap; }
+  .header-left, .header-right { display: flex; align-items: center; gap: 10px; }
+  .brand { font-weight: 700; font-size: 14px; } .brand span { color: var(--primary); }
+  .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px rgba(234,179,8,0.15); transition: all 150ms; }
+  .dot.live { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
+  .conn-label { font-size: 12px; color: var(--text-secondary); }
+
+  .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 5px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; font-family: inherit; transition: border-color 150ms, color 150ms; white-space: nowrap; }
+  .btn:hover { border-color: var(--primary); color: var(--primary); }
+
+  .ar-viewport { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg);
+    background-image:
+      linear-gradient(rgba(119,234,233,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(119,234,233,0.03) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+
+  .breadcrumb { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); z-index: 10; }
+  .bc-item { cursor: pointer; } .bc-item:hover { color: var(--primary); }
+  .bc-sep { opacity: 0.4; }
+  .bc-current { color: var(--primary); font-weight: 600; }
+
+  .pressure-meter { position: absolute; top: 16px; right: 16px; z-index: 10; display: flex; align-items: center; gap: 8px; }
+  .pm-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .pm-bar { width: 70px; height: 5px; background: var(--surface); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
+  .pm-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 999px; transition: width 80ms; width: 0%; }
+  .pm-val { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
+
+  .menu-container { transition: transform 300ms cubic-bezier(0.25,0.46,0.45,0.94); }
+  .menu-panel { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
+  .menu-item { padding: 14px 18px; border-radius: 12px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); font-size: 14px; font-weight: 500; color: var(--text); cursor: default; transition: all 200ms; display: flex; align-items: center; gap: 10px; }
+  .mi-emoji { font-size: 18px; }
+  .mi-label { flex: 1; }
+  .mi-arrow { font-size: 12px; color: var(--text-secondary); opacity: 0.5; }
+  .menu-item.highlighted { border-color: var(--primary); background: rgba(119,234,233,0.08); box-shadow: 0 0 20px rgba(119,234,233,0.1); }
+  .menu-item.highlighted .mi-label { color: var(--primary); }
+
+  .toolbar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 16px; background: var(--card); border-top: 1px solid var(--border); z-index: 200; flex-shrink: 0; flex-wrap: wrap; }
+  .hint { font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
+
+  .mudra-badge { position: fixed; bottom: 12px; right: 12px; font-size: 11px; color: var(--text-secondary); opacity: 0.7; letter-spacing: 0.02em; pointer-events: none; z-index: 300; }
+
+  @media (max-width: 640px) {
+    .header { padding: 8px 10px; } .toolbar { gap: 8px; padding: 8px 10px; }
+    .menu-panel { min-width: 170px; }
+    .menu-item { padding: 10px 14px; font-size: 13px; }
+    .hint { display: none; }
+    .pressure-meter { display: none; }
+  }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="header-left">
+    <div class="brand"><span>Mudra</span> AR Menu Navigator</div>
+    <span class="dot" id="dot"></span>
+    <span class="conn-label" id="connLabel">Connecting&hellip;</span>
+  </div>
+  <div class="header-right">
+    <a href="/gallery" class="btn" style="text-decoration:none;">&#8592; Gallery</a>
+    <button class="btn" id="simTap">Simulate Tap</button>
+    <button class="btn" id="simTwist">Simulate Twist</button>
+  </div>
+</div>
+
+<div class="ar-viewport" id="viewport">
+  <div class="breadcrumb" id="breadcrumb"></div>
+  <div class="pressure-meter">
+    <span class="pm-label">Scale</span>
+    <div class="pm-bar"><div class="pm-fill" id="pressFill"></div></div>
+    <span class="pm-val" id="pressVal">0%</span>
+  </div>
+  <div class="menu-container" id="menuContainer"></div>
+</div>
+
+<div class="toolbar">
+  <button class="btn" id="selectBtn">Select</button>
+  <button class="btn" id="backBtn">Back</button>
+  <button class="btn" id="homeBtn">Home</button>
+  <span class="hint">Arrows navigate &middot; Space select &middot; Backspace back &middot; [ ] pressure</span>
+</div>
+
+<div class="mudra-badge">Created by Mudra</div>
+
+<script>
+/* ── Mudra Protocol Connection (v2) ────────────────────────── */
+const WS_URL = 'ws://127.0.0.1:8766';
+const SIGNALS = ['navigation', 'gesture', 'pressure'];
+
+let ws, reconnectTimer, simTimer;
+let wsOpen = false, deviceReady = false, simulating = true;
+const bus = {};
+
+function on(ev, fn) { (bus[ev] ??= []).push(fn); }
+function emit(ev, d) { (bus[ev] || []).forEach(fn => fn(d)); }
+function send(p) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(p)); }
+
+function connect() {
+  try {
+    ws = new WebSocket(WS_URL);
+    ws.onopen = () => {
+      wsOpen = true; stopSim(); updateStatus();
+      SIGNALS.forEach(s => send({ command: 'subscribe', signal: s }));
+    };
+    ws.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'connection_status') {
+          deviceReady = msg.data?.status === 'connected';
+          updateStatus(); return;
+        }
+        emit(msg.type, msg.data);
+      } catch {}
+    };
+    ws.onclose = () => {
+      wsOpen = false; deviceReady = false; updateStatus();
+      startSim();
+      clearTimeout(reconnectTimer);
+      reconnectTimer = setTimeout(connect, 1500);
+    };
+    ws.onerror = () => ws?.close();
+  } catch {
+    wsOpen = false; startSim();
+    clearTimeout(reconnectTimer);
+    reconnectTimer = setTimeout(connect, 1500);
+  }
+}
+
+function triggerGesture(type) {
+  if (wsOpen) send({ command: 'trigger_gesture', data: { type } });
+  else emit('gesture', { type, confidence: 0.95, timestamp: Date.now() });
+}
+
+/* ── Simulation (when Companion not reachable) ─────────────── */
+function startSim() {
+  if (simTimer) return;
+  simulating = true;
+  let t = 0, navAcc = 0;
+  simTimer = setInterval(() => {
+    t += 0.05;
+    navAcc += 0.02;
+    if (navAcc > 1) {
+      navAcc = 0;
+      emit('navigation', { delta_x: 0, delta_y: 6, timestamp: Date.now() });
+    }
+    const n = 0.3 + 0.25 * Math.sin(t * 0.4) + (Math.random() - 0.5) * 0.05;
+    emit('pressure', { value: Math.round(n * 100), normalized: Math.max(0, Math.min(1, n)), timestamp: Date.now() });
+    if (Math.random() < 0.004) {
+      const g = ['tap', 'double_tap', 'twist', 'double_twist'];
+      emit('gesture', { type: g[Math.floor(Math.random() * g.length)], confidence: 0.7 + Math.random() * 0.3, timestamp: Date.now() });
+    }
+  }, 60);
+}
+
+function stopSim() { clearInterval(simTimer); simTimer = null; simulating = false; }
+
+/* ── Status UI ─────────────────────────────────────────────── */
+const dotEl = document.getElementById('dot');
+const connEl = document.getElementById('connLabel');
+
+function updateStatus() {
+  if (wsOpen && deviceReady) { dotEl.className = 'dot live'; connEl.textContent = 'Connected'; }
+  else if (wsOpen) { dotEl.className = 'dot'; connEl.textContent = 'Waiting for Mudra Band\u2026'; }
+  else { dotEl.className = 'dot'; connEl.textContent = simulating ? 'Simulated' : 'Disconnected'; }
+}
+
+/* ── Menu Data ─────────────────────────────────────────────── */
+const menuTree = {
+  label: 'Home',
+  items: [
+    { label: 'Maps', emoji: '\u{1F5FA}\uFE0F', children: [
+      { label: 'Navigate' }, { label: 'Search Places' }, { label: 'Saved Locations' }, { label: 'Traffic' }
+    ]},
+    { label: 'Music', emoji: '\u{1F3B5}', children: [
+      { label: 'Now Playing' }, { label: 'Playlists' }, { label: 'Search' }
+    ]},
+    { label: 'Messages', emoji: '\u{1F4AC}', children: [
+      { label: 'Inbox' }, { label: 'Compose' }, { label: 'Starred' }, { label: 'Archive' }
+    ]},
+    { label: 'Camera', emoji: '\u{1F4F7}', children: [
+      { label: 'Photo' }, { label: 'Video' }, { label: 'Gallery' }
+    ]},
+    { label: 'Settings', emoji: '\u2699\uFE0F', children: [
+      { label: 'Display' }, { label: 'Gestures' }, { label: 'Connectivity' }, { label: 'About' }
+    ]},
+  ]
+};
+
+/* ── Menu State ────────────────────────────────────────────── */
+let menuPath = [];
+let currentItems = menuTree.items;
+let highlightIdx = 0;
+let pressure = 0.3;
+let navAccY = 0;
+
+const containerEl = document.getElementById('menuContainer');
+const breadcrumbEl = document.getElementById('breadcrumb');
+const pressFillEl = document.getElementById('pressFill');
+const pressValEl = document.getElementById('pressVal');
+
+function renderMenu() {
+  /* Clear old panel */
+  while (containerEl.firstChild) containerEl.removeChild(containerEl.firstChild);
+
+  const panel = document.createElement('div');
+  panel.className = 'menu-panel';
+
+  currentItems.forEach((item, i) => {
+    const el = document.createElement('div');
+    el.className = 'menu-item' + (i === highlightIdx ? ' highlighted' : '');
+
+    const emo = document.createElement('span');
+    emo.className = 'mi-emoji';
+    emo.textContent = item.emoji || '\u2022';
+
+    const lab = document.createElement('span');
+    lab.className = 'mi-label';
+    lab.textContent = item.label;
+
+    el.appendChild(emo);
+    el.appendChild(lab);
+
+    if (item.children) {
+      const arr = document.createElement('span');
+      arr.className = 'mi-arrow';
+      arr.textContent = '\u25B6';
+      el.appendChild(arr);
+    }
+
+    el.addEventListener('click', () => { highlightIdx = i; selectItem(); });
+    panel.appendChild(el);
+  });
+
+  containerEl.appendChild(panel);
+  applyScale();
+  renderBreadcrumb();
+}
+
+function renderBreadcrumb() {
+  while (breadcrumbEl.firstChild) breadcrumbEl.removeChild(breadcrumbEl.firstChild);
+
+  const home = document.createElement('span');
+  home.className = 'bc-item';
+  home.textContent = 'Home';
+  home.addEventListener('click', goHome);
+  breadcrumbEl.appendChild(home);
+
+  menuPath.forEach((entry, i) => {
+    const sep = document.createElement('span');
+    sep.className = 'bc-sep';
+    sep.textContent = ' \u203A ';
+    breadcrumbEl.appendChild(sep);
+
+    const crumb = document.createElement('span');
+    crumb.textContent = entry.node.label;
+    if (i === menuPath.length - 1) {
+      crumb.className = 'bc-current';
+    } else {
+      crumb.className = 'bc-item';
+      crumb.addEventListener('click', () => {
+        menuPath = menuPath.slice(0, i + 1);
+        currentItems = menuPath[menuPath.length - 1].node.children;
+        highlightIdx = 0;
+        renderMenu();
+      });
+    }
+    breadcrumbEl.appendChild(crumb);
+  });
+}
+
+function applyScale() {
+  const scale = 0.75 + pressure * 0.5;
+  containerEl.style.transform = 'scale(' + scale + ')';
+}
+
+function moveHighlight(dir) {
+  highlightIdx = (highlightIdx + dir + currentItems.length) % currentItems.length;
+  const items = containerEl.querySelectorAll('.menu-item');
+  items.forEach((el, i) => el.classList.toggle('highlighted', i === highlightIdx));
+}
+
+function selectItem() {
+  const item = currentItems[highlightIdx];
+  if (item && item.children) {
+    menuPath.push({ node: item, selectedIdx: highlightIdx });
+    currentItems = item.children;
+    highlightIdx = 0;
+    renderMenu();
+  }
+}
+
+function goBack() {
+  if (menuPath.length === 0) return;
+  const prev = menuPath.pop();
+  currentItems = menuPath.length === 0 ? menuTree.items : menuPath[menuPath.length - 1].node.children;
+  highlightIdx = prev.selectedIdx;
+  renderMenu();
+}
+
+function goHome() {
+  menuPath = [];
+  currentItems = menuTree.items;
+  highlightIdx = 0;
+  renderMenu();
+}
+
+/* ── Signal Handlers ───────────────────────────────────────── */
+on('navigation', (d) => {
+  navAccY += (d.delta_y || 0);
+  if (Math.abs(navAccY) > 12) {
+    moveHighlight(navAccY > 0 ? 1 : -1);
+    navAccY = 0;
+  }
+});
+
+on('gesture', (d) => {
+  const t = d.type || '';
+  if (t === 'tap') selectItem();
+  if (t === 'twist') goBack();
+  if (t === 'double_tap') goHome();
+});
+
+on('pressure', (d) => {
+  pressure = Math.max(0, Math.min(1, d.normalized ?? d.value / 100));
+  pressFillEl.style.width = Math.round(pressure * 100) + '%';
+  pressValEl.textContent = Math.round(pressure * 100) + '%';
+  applyScale();
+});
+
+/* ── Keyboard Fallback ─────────────────────────────────────── */
+let kbPressure = 0.3;
+document.addEventListener('keydown', (e) => {
+  if (e.code === 'ArrowDown') moveHighlight(1);
+  if (e.code === 'ArrowUp') moveHighlight(-1);
+  if (e.code === 'ArrowRight' || e.code === 'Space') { e.preventDefault(); selectItem(); }
+  if (e.code === 'ArrowLeft' || e.code === 'Backspace') { e.preventDefault(); goBack(); }
+  if (e.key === ']') {
+    kbPressure = Math.min(1, kbPressure + 0.08);
+    emit('pressure', { value: Math.round(kbPressure * 100), normalized: kbPressure, timestamp: Date.now() });
+  }
+  if (e.key === '[') {
+    kbPressure = Math.max(0, kbPressure - 0.08);
+    emit('pressure', { value: Math.round(kbPressure * 100), normalized: kbPressure, timestamp: Date.now() });
+  }
+});
+
+/* ── Buttons ───────────────────────────────────────────────── */
+document.getElementById('simTap').addEventListener('click', () => triggerGesture('tap'));
+document.getElementById('simTwist').addEventListener('click', () => triggerGesture('twist'));
+document.getElementById('selectBtn').addEventListener('click', selectItem);
+document.getElementById('backBtn').addEventListener('click', goBack);
+document.getElementById('homeBtn').addEventListener('click', goHome);
+
+/* ── Init ──────────────────────────────────────────────────── */
+renderMenu();
+connect();
+</script>
+</body>
+</html>