From 2332779ad63a49fb003baf26d9c2df678e90e878 Mon Sep 17 00:00:00 2001
From: araharah-executor <executor@araharah.local>
Date: Thu, 22 Oct 2026 08:10:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(01-design-tokens-rams-foundation-03):=20br?=
 =?UTF-8?q?owser=20proof=20page=20=E2=80=94=20Rams=20basemap=20+=20signal-?=
 =?UTF-8?q?orange=20route=20placeholder=20at=20KL=20metro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.html: MapLibre GL v4 viewer loading ./liberty-rams.json at the KLCC anchor (101.6958, 3.1513, zoom 13); page chrome token-only (var(--color-*) via ../dist/rams.css, self-hosted Geist/Space Grotesk per D-10/D-16)
- placeholder route vector: 6px signal-orange polyline + 1px matte-black dashed centerline (mockup route ribbon), color read from the token package at runtime (var(--color-signal-orange)); route layers added LAST (accent lives above grayscale, never inside it); README comment marks the vector as consumed by Phase 5
- basemap:preview script: python3 -m http.server 8123 (cwd=theme serves /basemap/ + /dist/rams.css + /fonts within one docroot — plan's cd-variant was doubly broken; open http://localhost:8123/basemap/)
- real-browser render proof (scratch, plan 04 owns committed capture tooling): 8/8 checks pass — maplibre style validation clean, zero failed requests/non-200s, 296 sampled orange route pixels, 0 saturated non-red-hue pixels (grayscale grounding proven pixel-level), 100% warm-gray map area, header chrome rgb(26,26,26)
---
 theme/basemap/index.html | 176 +++++++++++++++++++++++++++++++++++++++
 theme/package.json       |   3 +-
 2 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 theme/basemap/index.html

diff --git a/theme/basemap/index.html b/theme/basemap/index.html
new file mode 100644
index 0000000..663bbe3
--- /dev/null
+++ b/theme/basemap/index.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<!--
+  araharah — Rams basemap browser proof (success criterion 3)
+  ------------------------------------------------------------------
+  Renders theme/basemap/liberty-rams.json (the token-derived Rams
+  cartography fork of OpenFreeMap liberty) in MapLibre GL at the KL
+  metro / KLCC anchor, with a PLACEHOLDER route vector in
+  signal-orange.
+
+  ROUTE ACCENT — PHASE 5 CONSUMES THIS VECTOR:
+  The orange polyline below is a placeholder preview of the navigation
+  vector. Per D-08, signal-orange appears in this view ONLY on the
+  route line (raw tolerance) — never in the basemap cartography. The
+  real route layer (Valhalla geometry, guidance state) replaces this
+  placeholder in Phase 5; its color is read from the token package at
+  runtime (var(--color-signal-orange)), not hand-tuned here (D-09).
+
+  OPEN (serve theme/ as docroot so ../dist/rams.css + fonts resolve):
+    npm run basemap:preview --workspace theme
+    → http://localhost:8123/basemap/
+-->
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ARAHARAH // RAMS BASEMAP PROOF</title>
+
+  <!-- token package: Rams tokens + self-hosted Geist / Space Grotesk (D-10/D-16) -->
+  <link rel="stylesheet" href="../dist/rams.css">
+
+  <!-- MapLibre GL v4 (CDN per plan; product build wires its own copy in Phase 3) -->
+  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@^4/dist/maplibre-gl.css">
+  <script src="https://unpkg.com/maplibre-gl@^4/dist/maplibre-gl.js"></script>
+
+  <style>
+    /* page chrome — every value a token reference */
+    :root { color-scheme: light; }
+    * { box-sizing: border-box; }
+    html, body { height: 100%; margin: 0; }
+    body {
+      display: flex;
+      flex-direction: column;
+      background: var(--color-surface);
+      color: var(--color-on-surface);
+      font: var(--type-label-md);
+      letter-spacing: var(--type-label-md-tracking);
+    }
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-space-md);
+      padding: var(--spacing-space-sm) var(--spacing-margin);
+      background: var(--color-matte-black);
+      color: var(--color-inverse-on-surface);
+      border-bottom: 2px solid var(--color-matte-black);
+    }
+    header .brand {
+      font: var(--type-label-lg);
+      letter-spacing: var(--type-label-lg-tracking);
+      text-transform: uppercase;
+    }
+    header .ref { font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase; opacity: 0.7; }
+    main { position: relative; flex: 1; min-height: 0; }
+    #map { position: absolute; inset: 0; }
+    footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--spacing-space-xs) var(--spacing-margin);
+      background: var(--color-soft-beige);
+      color: var(--color-on-surface);
+      border-top: 1px solid var(--color-matte-black);
+      font: var(--type-label-sm);
+      letter-spacing: var(--type-label-sm-tracking);
+      text-transform: uppercase;
+    }
+    .swatch {
+      display: inline-block;
+      width: var(--spacing-space-md);
+      height: var(--spacing-space-sm);
+      margin-right: var(--spacing-space-xs);
+      background: var(--color-signal-orange);
+      border: 1px solid var(--color-matte-black);
+      vertical-align: middle;
+    }
+    .maplibregl-ctrl-group { border-radius: 0; } /* zero roundedness, per Rams */
+  </style>
+</head>
+<body>
+  <header>
+    <span class="brand">ARAHARAH // RAMS CARTOGRAPHY PROOF</span>
+    <span class="ref">BASEMAP: LIBERTY → RAMS · KL METRO</span>
+  </header>
+  <main>
+    <div id="map"></div>
+  </main>
+  <footer>
+    <span><span class="swatch"></span>ROUTE VECTOR — SIGNAL-ORANGE · RESERVED (PHASE 5)</span>
+    <span>GROUND / WATER / ROADS — DERIVED FROM TOKEN PACKAGE</span>
+  </footer>
+
+  <script>
+    /* route accent read from the token package at runtime (D-09);
+       literal fallback only if the token sheet failed to load */
+    const routeColor =
+      getComputedStyle(document.documentElement).getPropertyValue('--color-signal-orange').trim() || '#EB8008';
+    const routeInk =
+      getComputedStyle(document.documentElement).getPropertyValue('--color-matte-black').trim() || '#1A1A1A';
+
+    const KLCC = [101.6958, 3.1513]; // KL metro anchor — product region
+
+    const map = new maplibregl.Map({
+      container: 'map',
+      style: './liberty-rams.json', // the token-derived Rams basemap
+      center: KLCC,
+      zoom: 13,
+    });
+    map.addControl(new maplibregl.NavigationControl({ showCompass: false }));
+
+    /* style-validation + resource errors surface in the console —
+       the render proof listens for these */
+    map.on('error', (e) => {
+      console.error('RAMS-BASEMAP-ERROR', e && e.error && (e.error.message || e.error));
+    });
+
+    /* PLACEHOLDER ROUTE VECTOR (consumed by Phase 5):
+       a Jalan Ampang → KLCC preview polyline; square caps + the 1px
+       matte-black dashed centerline mirror the mockup route ribbon */
+    const routePlaceholder = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [101.6793, 3.1594], [101.6842, 3.1566], [101.6879, 3.1549],
+            [101.6903, 3.1536], [101.6928, 3.1525], [101.6945, 3.1518],
+            [101.6958, 3.1513],
+          ],
+        },
+      }],
+    };
+
+    map.on('load', () => {
+      map.addSource('rams-route-placeholder', { type: 'geojson', data: routePlaceholder });
+
+      /* route layers added LAST — above all basemap layers (D-08:
+         the accent lives on top of the grayscale, never inside it) */
+      map.addLayer({
+        id: 'rams-route-line',
+        type: 'line',
+        source: 'rams-route-placeholder',
+        layout: { 'line-cap': 'square', 'line-join': 'miter' },
+        paint: { 'line-color': routeColor, 'line-width': 6 },
+      });
+      map.addLayer({
+        id: 'rams-route-centerline',
+        type: 'line',
+        source: 'rams-route-placeholder',
+        layout: { 'line-cap': 'square', 'line-join': 'miter' },
+        paint: { 'line-color': routeInk, 'line-width': 1, 'line-dasharray': [3, 3] },
+      });
+
+      /* frame the proof on the route corridor */
+      map.fitBounds(
+        [[101.6793, 3.1513], [101.6958, 3.1594]],
+        { padding: 64, maxZoom: 13 }
+      );
+      console.log('RAMS-BASEMAP-READY route=' + routeColor + ' layers=' +
+        map.getStyle().layers.map((l) => l.id).length);
+    });
+  </script>
+</body>
+</html>
diff --git a/theme/package.json b/theme/package.json
index bdadd5a..ce63df3 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -12,6 +12,7 @@
     "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/",
     "sheet": "npm run build && echo 'open theme/src/sheet.html in browser ( Consumes theme/dist/rams.css )'",
-    "basemap": "node basemap/build.mjs"
+    "basemap": "node basemap/build.mjs",
+    "basemap:preview": "python3 -m http.server 8123"
   }
 }