From e95f4043b9ef7c69c797a49fa6d1b9bbc9b5efba Mon Sep 17 00:00:00 2001
From: araharah-executor <executor@araharah.local>
Date: Thu, 22 Oct 2026 07:52:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(01-design-tokens-rams-foundation-02):=20re?=
 =?UTF-8?q?ndered=20component=20sheet=20=E2=80=94=20all=20mockup-derived?=
 =?UTF-8?q?=20families=20via=20token=20package?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sheet.html: typography specimen (all 13 scale entries), buttons, inputs, chips (CONGESTION / CRASH / BLOCK / POLICE RADAR), telemetry card (SEC-04 // SPEED), maneuver banner, checkbox + two-way toggle
- consumes built dist/rams.css only; markup uses component classes, no utility soup; inline SVG icons (no icon-font CDN, D-16); shell consumes --shell-bg/--shell-on-surface slots (D-04)
- package.json: sheet script (build + open hint)
- real-browser computed-style audit: 41/41 checks render from tokens; woff2 fonts verified loaded
---
 theme/package.json   |   3 +-
 theme/src/sheet.html | 244 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 246 insertions(+), 1 deletion(-)
 create mode 100644 theme/src/sheet.html

diff --git a/theme/package.json b/theme/package.json
index 794193c..807fbc7 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -10,6 +10,7 @@
   },
   "scripts": {
     "build": "tailwindcss -i ./src/theme.css -o ./dist/rams.css --minify",
-    "send": "mkdir -p dist/fonts && cp -r fonts/geist fonts/space-grotesk dist/fonts/"
+    "send": "mkdir -p dist/fonts && cp -r fonts/geist fonts/space-grotesk dist/fonts/",
+    "sheet": "npm run build && echo 'open theme/src/sheet.html in browser ( Consumes theme/dist/rams.css )'"
   }
 }
diff --git a/theme/src/sheet.html b/theme/src/sheet.html
new file mode 100644
index 0000000..13f122f
--- /dev/null
+++ b/theme/src/sheet.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ARAHARAH — Telemetry Rams Component Sheet</title>
+  <!--
+    Component sheet (D-03): the rendered proof that every Rams
+    component derives from the token package. Consumes the built
+    stylesheet only — utilities are never used in this markup;
+    the component classes are the API. Self-hosted typefaces,
+    no CDN fonts (D-16); icons are inline SVG, not icon fonts.
+  -->
+  <link rel="stylesheet" href="../dist/rams.css">
+  <style>
+    /*
+     * Page shell — sheet layout only, not component API.
+     * Every value is a token reference. The shell consumes the
+     * Telegram light/dark slots (D-04): components stay
+     * Rams-constant; only this page's background and base ink
+     * re-theme with the OS scheme.
+     */
+    body {
+      background: var(--shell-bg);
+      color: var(--shell-on-surface);
+      font: var(--type-body-md);
+      letter-spacing: var(--type-body-md-tracking);
+      padding: var(--spacing-margin);
+    }
+    main {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-space-lg);
+    }
+    main > section {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-space-sm);
+    }
+    /* Sheet furniture reuses the card-header plate pattern; its
+     * ink rides the shell slots so the register stays legible
+     * under both Telegram schemes. The .card demo below keeps
+     * the pure component styling. */
+    main > section > h2.card-header {
+      color: var(--shell-on-surface);
+      border-bottom-color: var(--shell-on-surface);
+    }
+    .masthead {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-space-xs);
+    }
+    .specimen-row {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-space-xs);
+    }
+    .component-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--spacing-space-sm);
+    }
+    .input-stack {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-space-sm);
+    }
+    .checkbox-row {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-space-sm);
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <!-- Masthead -->
+    <header class="masthead">
+      <p class="text-label-sm">ARAHARAH // TELEMETRY RAMS</p>
+      <h1 class="text-display-lg">COMPONENT SHEET</h1>
+      <p class="text-body-md">Every component below is styled exclusively by the token package — colors, spacing, and typography all resolve from theme tokens. No hard-coded values, no CDN fonts, zero rounded corners.</p>
+    </header>
+
+    <!-- 1 — Typography specimen -->
+    <section>
+      <h2 class="card-header">
+        <span class="text-label-sm">TYPOGRAPHY SPECIMEN</span>
+        <span class="card-ref">SEC-00 // LEGIBILITY</span>
+      </h2>
+      <div class="specimen-row">
+        <span class="text-label-sm">DISPLAY-LG</span>
+        <p class="text-display-lg">TELEMETRY RAMS</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">DISPLAY-LG-MOBILE</span>
+        <p class="text-display-lg-mobile">TELEMETRY RAMS</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">HEADLINE-LG</span>
+        <p class="text-headline-lg">ACTIVE ROUTE GUIDANCE</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">HEADLINE-LG-MOBILE</span>
+        <p class="text-headline-lg-mobile">250 M</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">HEADLINE-MD</span>
+        <p class="text-headline-md">TURN RIGHT ONTO BISMARCKSTRASSE</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">HEADLINE-SM</span>
+        <p class="text-headline-sm">[ACCIDENT] A100 SOUTHBOUND KM 14.2</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">BODY-LG</span>
+        <p class="text-body-lg">Reported via /accident by @klaus_b. Two vehicles involved, middle lane blocked.</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">BODY-MD</span>
+        <p class="text-body-md">Unexpected road closure between Unter den Linden and Leipziger Str. Alternate via Wilhelmstrasse.</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">BODY-SM</span>
+        <p class="text-body-sm">Points credited automatically when peer nodes or OSM validation confirms road status.</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">LABEL-LG</span>
+        <p class="text-label-lg">REROUTE VIA TELEGRAM BOT</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">LABEL-MD</span>
+        <p class="text-label-md">CONGESTION IN 1.4 KM — SLOWDOWN (+3 MIN)</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">LABEL-SM</span>
+        <p class="text-label-sm">SEC-STACK // EXEC</p>
+      </div>
+      <div class="specimen-row">
+        <span class="text-label-sm">TELEMETRY-NUM</span>
+        <p class="text-telemetry-num">18:42</p>
+      </div>
+    </section>
+
+    <!-- 2 — Buttons -->
+    <section>
+      <h2 class="card-header">
+        <span class="text-label-sm">BUTTONS</span>
+        <span class="card-ref">SEC-01 // TRIGGER</span>
+      </h2>
+      <div class="component-row">
+        <button type="button" class="btn-primary">COMMENCE ROUTE</button>
+        <button type="button" class="btn-primary">CONFIRM HAZARD</button>
+        <button type="button" class="btn-secondary">ALTERNATIVES</button>
+        <button type="button" class="btn-secondary">CALIBRATE</button>
+      </div>
+    </section>
+
+    <!-- 3 — Inputs -->
+    <section>
+      <h2 class="card-header">
+        <span class="text-label-sm">INPUTS</span>
+        <span class="card-ref">SEC-02 // FRAME</span>
+      </h2>
+      <div class="input-stack">
+        <input type="text" class="input-field" placeholder="Enter street, postal code, or /osm tag...">
+        <input type="text" class="input-field" placeholder="Type /traffic, /hazard, or inline query...">
+      </div>
+    </section>
+
+    <!-- 4 — Chips / badges -->
+    <section>
+      <h2 class="card-header">
+        <span class="text-label-sm">CHIPS / BADGES</span>
+        <span class="card-ref">SEC-03 // EVENT</span>
+      </h2>
+      <div class="component-row">
+        <span class="chip-traffic">CONGESTION</span>
+        <span class="chip-hazard">CRASH / BLOCK</span>
+        <span class="chip-safe">POLICE RADAR</span>
+      </div>
+    </section>
+
+    <!-- 5 — Telemetry card -->
+    <section>
+      <h2 class="card-header">
+        <span class="text-label-sm">TELEMETRY CARD</span>
+        <span class="card-ref">SEC-04 // MODULE</span>
+      </h2>
+      <article class="card">
+        <header class="card-header">
+          <span class="text-label-sm">VELOCITY</span>
+          <span class="card-ref">SEC-04 // SPEED</span>
+        </header>
+        <div class="card-content">
+          <span class="text-telemetry-num">54</span>
+          <span class="text-label-md">KM/H</span>
+        </div>
+      </article>
+    </section>
+
+    <!-- 6 — Maneuver banner -->
+    <section>
+      <h2 class="card-header">
+        <span class="text-label-sm">MANEUVER BANNER</span>
+        <span class="card-ref">SEC-05 // HUD</span>
+      </h2>
+      <div class="maneuver-banner">
+        <svg class="maneuver-arrow" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">
+          <path d="M8 28V16H22"></path>
+          <path d="M14 8L22 16L14 24"></path>
+        </svg>
+        <div>
+          <p class="text-label-sm">NEXT MANEUVER // T-01</p>
+          <p class="text-headline-md">TURN RIGHT ONTO BISMARCKSTRASSE</p>
+        </div>
+        <p class="text-telemetry-num">250 M</p>
+      </div>
+    </section>
+
+    <!-- 7 — Checkboxes & toggle -->
+    <section>
+      <h2 class="card-header">
+        <span class="text-label-sm">CHECKBOXES / TOGGLE</span>
+        <span class="card-ref">SEC-06 // SWITCH</span>
+      </h2>
+      <div class="component-row">
+        <label class="checkbox-row">
+          <input type="checkbox" class="checkbox" checked>
+          <span class="text-label-md">AVOID TOLLS</span>
+        </label>
+        <label class="checkbox-row">
+          <input type="checkbox" class="checkbox">
+          <span class="text-label-md">OPT-IN TELEMETRY</span>
+        </label>
+      </div>
+      <div class="toggle" role="group" aria-label="Dispatch mode">
+        <button type="button" class="toggle-option" aria-pressed="false">OFF</button>
+        <button type="button" class="toggle-option" aria-pressed="true">ON</button>
+      </div>
+    </section>
+  </main>
+</body>
+</html>