@nanobpm/urban 0.26.0 → 0.27.0

package/dist/runtime/core/modules/pages.js

@@ -323,46 +323,82 @@ function rendererShell(homePage) {
 </body>
 </html>`;
 }
+// The app's stylesheet resolves every colour through the Nano console's
+// semantic `--nano-*` token contract (see the Magikcraft/nano-bpm repo's
+// `console/src/theme/tokens.css` — MIRROR: keep the palettes below in sync). When the app is embedded in the
+// console it inherits nothing across the iframe boundary, so the console
+// postMessages its resolved tokens + appearance and the runtime lays them onto
+// this document's :root (see RENDERER_JS). Standalone (CLI on :3000) there is no
+// console, so the defaults below stand on their own: dark by default, light when
+// the OS asks for it and nothing has themed us. `--pc-*` are kept as thin
+// aliases so existing class rules re-resolve through the shared tokens.
 const RENDERER_CSS = `
-:root { color-scheme: light dark; --pc-edge:#d0d0d8; --pc-accent:#3b5bdb; }
+:root {
+  color-scheme: dark;
+  --nano-app:#0b0b10; --nano-panel:#10101a; --nano-raised:#16161f; --nano-inset:#08080c; --nano-hover:#1e1e2a;
+  --nano-edge:#24242f; --nano-edge-strong:#383848;
+  --nano-text:#f2f2f7; --nano-text-muted:#a3a3b2; --nano-text-faint:#6e6e80;
+  --nano-accent:#8b5cf6; --nano-accent-strong:#a78bfa; --nano-accent-2:#22d3ee; --nano-on-accent:#ffffff;
+  --nano-ok:#34d399; --nano-warn:#fbbf24; --nano-danger:#fb7185; --nano-info:#38bdf8;
+}
+:root[data-appearance="light"] {
+  color-scheme: light;
+  --nano-app:#f5f5f9; --nano-panel:#fdfdfe; --nano-raised:#ffffff; --nano-inset:#ededf3; --nano-hover:#e8e8f0;
+  --nano-edge:#e2e2ea; --nano-edge-strong:#c5c5d4;
+  --nano-text:#1a1a22; --nano-text-muted:#565664; --nano-text-faint:#8c8c9c;
+  --nano-accent:#7c3aed; --nano-accent-strong:#6d28d9; --nano-accent-2:#0891b2; --nano-on-accent:#ffffff;
+  --nano-ok:#059669; --nano-warn:#b45309; --nano-danger:#e11d48; --nano-info:#0369a1;
+}
+@media (prefers-color-scheme: light) {
+  /* Standalone only: follow the OS until the console (which sets data-appearance) themes us. */
+  :root:not([data-appearance]) {
+    color-scheme: light;
+    --nano-app:#f5f5f9; --nano-panel:#fdfdfe; --nano-raised:#ffffff; --nano-inset:#ededf3; --nano-hover:#e8e8f0;
+    --nano-edge:#e2e2ea; --nano-edge-strong:#c5c5d4;
+    --nano-text:#1a1a22; --nano-text-muted:#565664; --nano-text-faint:#8c8c9c;
+    --nano-accent:#7c3aed; --nano-accent-strong:#6d28d9; --nano-accent-2:#0891b2; --nano-on-accent:#ffffff;
+    --nano-ok:#059669; --nano-warn:#b45309; --nano-danger:#e11d48; --nano-info:#0369a1;
+  }
+}
+:root { --pc-edge:var(--nano-edge); --pc-accent:var(--nano-accent); }
 * { box-sizing: border-box; }
-body { margin:0; font:15px/1.5 system-ui,sans-serif; padding:2rem; max-width:64rem; margin-inline:auto; }
-.pc-empty { opacity:.6; }
+body { margin:0; font:15px/1.5 system-ui,sans-serif; padding:2rem; max-width:64rem; margin-inline:auto; background:var(--nano-app); color:var(--nano-text); }
+.pc-empty { color:var(--nano-text-faint); }
 .pc-heading { font-size:1.6rem; font-weight:650; margin:0 0 .25rem; }
-.pc-sub { opacity:.7; margin:.25rem 0 1rem; }
+.pc-sub { color:var(--nano-text-muted); margin:.25rem 0 1rem; }
 .pc-body { margin:.5rem 0; }
-.pc-card { border:1px solid var(--pc-edge); border-radius:.6rem; padding:1rem 1.15rem; margin:1rem 0; }
+.pc-card { border:1px solid var(--nano-edge); border-radius:.6rem; padding:1rem 1.15rem; margin:1rem 0; background:var(--nano-panel); }
 .pc-card h2 { font-size:1rem; margin:0 0 .75rem; }
 .pc-field { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.6rem; }
-.pc-field label { font-size:.8rem; opacity:.75; }
-.pc-field input { padding:.5rem .6rem; border:1px solid var(--pc-edge); border-radius:.4rem; font:inherit; }
-.pc-btn { padding:.5rem .9rem; border:0; border-radius:.4rem; background:var(--pc-accent); color:#fff; font:inherit; cursor:pointer; }
+.pc-field label { font-size:.8rem; color:var(--nano-text-muted); }
+.pc-field input { padding:.5rem .6rem; border:1px solid var(--nano-edge); border-radius:.4rem; font:inherit; background:var(--nano-inset); color:var(--nano-text); }
+.pc-btn { padding:.5rem .9rem; border:0; border-radius:.4rem; background:var(--nano-accent); color:var(--nano-on-accent); font:inherit; cursor:pointer; }
 .pc-btn:disabled { opacity:.5; cursor:default; }
 .pc-msg { font-size:.85rem; margin-top:.5rem; min-height:1.2em; }
-.pc-msg.err { color:#c0392b; }
-.pc-msg.ok { color:#2b8a3e; }
+.pc-msg.err { color:var(--nano-danger); }
+.pc-msg.ok { color:var(--nano-ok); }
 table.pc-grid { width:100%; border-collapse:collapse; font-size:.9rem; }
-table.pc-grid th, table.pc-grid td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--pc-edge); }
-table.pc-grid th { font-weight:600; opacity:.75; }
+table.pc-grid th, table.pc-grid td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--nano-edge); }
+table.pc-grid th { font-weight:600; color:var(--nano-text-muted); }
 .pc-tabs { display:flex; gap:.5rem; margin-bottom:.75rem; }
-.pc-tab { padding:.35rem .8rem; border:1px solid var(--pc-edge); border-radius:.4rem; background:transparent; color:inherit; font:inherit; cursor:pointer; }
-.pc-tab.active { background:var(--pc-accent); color:#fff; border-color:var(--pc-accent); }
+.pc-tab { padding:.35rem .8rem; border:1px solid var(--nano-edge); border-radius:.4rem; background:transparent; color:inherit; font:inherit; cursor:pointer; }
+.pc-tab.active { background:var(--nano-accent); color:var(--nano-on-accent); border-color:var(--nano-accent); }
 .pc-btn-sm { padding:.25rem .55rem; font-size:.8rem; margin-right:.3rem; }
-.pc-chevron { background:transparent; color:inherit; border:1px solid var(--pc-edge); }
+.pc-chevron { background:transparent; color:inherit; border:1px solid var(--nano-edge); }
 .pc-row-actions { white-space:nowrap; text-align:right; }
 .pc-detail { padding:.75rem .25rem; }
 .pc-detail-field { display:flex; gap:.5rem; font-size:.85rem; margin:.15rem 0; }
-.pc-detail-label { opacity:.7; min-width:8rem; }
-.pc-link { color:var(--pc-accent); }
+.pc-detail-label { color:var(--nano-text-muted); min-width:8rem; }
+.pc-link { color:var(--nano-accent); }
 .pc-child { margin:.6rem 0; }
-.pc-child-title { font-size:.8rem; font-weight:600; opacity:.7; margin-bottom:.25rem; }
-.pc-transcript { white-space:pre-wrap; max-height:22rem; overflow:auto; background:rgba(120,120,160,.08); padding:.5rem; border-radius:.4rem; font-size:.8rem; margin-top:.4rem; }
-.pc-subform { margin-top:.75rem; padding:.6rem; border:1px dashed var(--pc-edge); border-radius:.5rem; }
+.pc-child-title { font-size:.8rem; font-weight:600; color:var(--nano-text-muted); margin-bottom:.25rem; }
+.pc-transcript { white-space:pre-wrap; max-height:22rem; overflow:auto; background:var(--nano-inset); padding:.5rem; border-radius:.4rem; font-size:.8rem; margin-top:.4rem; }
+.pc-subform { margin-top:.75rem; padding:.6rem; border:1px dashed var(--nano-edge); border-radius:.5rem; }
 .pc-subform-title { font-weight:600; font-size:.85rem; margin-bottom:.4rem; }
-.pc-prompt { font-size:.85rem; opacity:.8; margin-bottom:.4rem; white-space:pre-wrap; }
-.pc-textarea { width:100%; min-height:4rem; padding:.5rem; border:1px solid var(--pc-edge); border-radius:.4rem; font:inherit; }
+.pc-prompt { font-size:.85rem; color:var(--nano-text-muted); margin-bottom:.4rem; white-space:pre-wrap; }
+.pc-textarea { width:100%; min-height:4rem; padding:.5rem; border:1px solid var(--nano-edge); border-radius:.4rem; font:inherit; background:var(--nano-inset); color:var(--nano-text); }
 .pc-collapse-header { display:flex; align-items:center; gap:.5rem; width:100%; margin:0 0 .75rem; padding:0; background:transparent; border:0; color:inherit; font:inherit; font-size:1rem; font-weight:600; cursor:pointer; text-align:left; }
-.pc-chevron-inline { opacity:.6; font-size:.75rem; width:1em; }
+.pc-chevron-inline { color:var(--nano-text-faint); font-size:.75rem; width:1em; }
 .pc-card-body[hidden] { display:none; }
 `;
 // The schema-driven browser renderer (ADR 0042 §3). Plain ES module string served at
@@ -373,6 +409,38 @@ const RENDERER_JS = String.raw `
 const root = document.getElementById("page");
 const HOME = root.dataset.home || "home";
 
+// Theme bridge for the Nano console embed. The app runs in a sandboxed,
+// same-origin iframe, so the console's --nano-* custom properties and its
+// data-appearance never cascade in. Instead the console postMessages its
+// resolved tokens; we lay them onto this document's :root and mirror the
+// appearance. Standalone (no console parent) nothing is posted, so the CSS
+// defaults stand. We announce readiness so the console can push the theme even
+// if its first message raced our listener install.
+function applyTheme(msg) {
+  if (!msg || msg.type !== "nano-theme") return;
+  const el = document.documentElement;
+  if (msg.appearance === "light" || msg.appearance === "dark") el.dataset.appearance = msg.appearance;
+  const vars = msg.vars;
+  if (vars && typeof vars === "object") {
+    for (const [k, v] of Object.entries(vars)) {
+      // Only accept the shared token namespace; ignore anything else.
+      if (typeof k === "string" && k.startsWith("--nano-") && typeof v === "string") {
+        el.style.setProperty(k, v);
+      }
+    }
+  }
+}
+if (window.parent && window.parent !== window) {
+  window.addEventListener("message", (ev) => {
+    // Same-origin proxy (posture A): only trust a message from the framing
+    // parent AND from our own origin. ev.source alone is insufficient — a
+    // cross-origin page that frames a standalone run becomes window.parent, so
+    // an origin check is what actually pins the trust boundary.
+    if (ev.origin === window.location.origin && ev.source === window.parent) applyTheme(ev.data);
+  });
+  window.parent.postMessage({ type: "nano-app-ready" }, window.location.origin);
+}
+
 // Resolve every app endpoint against where THIS module was actually served from,
 // so absolute-looking "/app/…" paths work both at the origin root (direct run,
 // e.g. the CLI on :3000) and under a path-prefixed reverse proxy (the Nano

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/urban",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Urban: build and run code-first apps on Nano — runtime, derivation toolkit, and CLI in one. Author durable processes with @nanobpm/workflow (defineFlow), a typed datasource, forms, triggers and surfaces from a nano.app.json manifest, on Node or Deno.",
   "license": "Apache-2.0",
   "type": "module",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jwulf/nano-ide.git",
+    "url": "git+https://github.com/nanobpm/nano-ide.git",
     "directory": "packages/urban"
   },
   "engines": {

package/src/runtime/core/modules/pages.test.ts

@@ -94,6 +94,20 @@ test("GET / serves the renderer shell with the home marker", async () => {
   assert.doesNotMatch(res.body ?? "", /src="\/app\/runtime\.js"/);
 });
 
+test("the shell styles the app through the shared --nano-* token contract", async () => {
+  const res = await dispatch("GET", "/");
+  const html = res.body ?? "";
+  // Body colours resolve through the console's token vocabulary, not hardcoded hex.
+  assert.match(html, /background:var\(--nano-app\)/);
+  assert.match(html, /color:var\(--nano-text\)/);
+  assert.match(html, /--pc-accent:var\(--nano-accent\)/);
+  // Self-contained defaults for standalone (CLI) runs: dark base + a light
+  // palette gated on data-appearance, and prefers-color-scheme only until themed.
+  assert.match(html, /--nano-accent:#8b5cf6/);
+  assert.match(html, /\[data-appearance="light"\]/);
+  assert.match(html, /:root:not\(\[data-appearance\]\)/);
+});
+
 test("GET /app/runtime.js serves the renderer module", async () => {
   const res = await dispatch("GET", "/app/runtime.js");
   assert.match(res.headers?.["content-type"] ?? "", /javascript/);
@@ -104,6 +118,24 @@ test("GET /app/runtime.js serves the renderer module", async () => {
   assert.match(res.body ?? "", /function apiUrl\(u\)/);
 });
 
+test("the renderer bridges the console theme over postMessage", async () => {
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  // Announces readiness to the framing console (same-origin, posture A).
+  assert.match(js, /postMessage\(\{ type: "nano-app-ready" \}, window\.location\.origin\)/);
+  // Only trusts the framing parent, and only accepts nano-theme messages.
+  assert.match(js, /ev\.source === window\.parent/);
+  // Same-origin posture A: a cross-origin framer is rejected before applyTheme.
+  assert.match(js, /ev\.origin === window\.location\.origin/);
+  assert.match(js, /msg\.type !== "nano-theme"/);
+  // Mirrors the console appearance + lays --nano-* tokens onto :root; ignores
+  // any property outside the shared token namespace.
+  assert.match(js, /el\.dataset\.appearance = msg\.appearance/);
+  assert.match(js, /k\.startsWith\("--nano-"\)/);
+  assert.match(js, /el\.style\.setProperty\(k, v\)/);
+});
+
+
 test("renderer preserves grid row-detail expansion across refreshes", async () => {
   // Regression: the 5s poll rebuilds the whole tbody, which used to collapse an open
   // detail row (e.g. the escalation-answer form). The client now tracks open rowKeys

package/src/runtime/core/modules/pages.ts

@@ -353,46 +353,82 @@ function rendererShell(homePage: string): string {
 </html>`;
 }
 
+// The app's stylesheet resolves every colour through the Nano console's
+// semantic `--nano-*` token contract (see the Magikcraft/nano-bpm repo's
+// `console/src/theme/tokens.css` — MIRROR: keep the palettes below in sync). When the app is embedded in the
+// console it inherits nothing across the iframe boundary, so the console
+// postMessages its resolved tokens + appearance and the runtime lays them onto
+// this document's :root (see RENDERER_JS). Standalone (CLI on :3000) there is no
+// console, so the defaults below stand on their own: dark by default, light when
+// the OS asks for it and nothing has themed us. `--pc-*` are kept as thin
+// aliases so existing class rules re-resolve through the shared tokens.
 const RENDERER_CSS = `
-:root { color-scheme: light dark; --pc-edge:#d0d0d8; --pc-accent:#3b5bdb; }
+:root {
+  color-scheme: dark;
+  --nano-app:#0b0b10; --nano-panel:#10101a; --nano-raised:#16161f; --nano-inset:#08080c; --nano-hover:#1e1e2a;
+  --nano-edge:#24242f; --nano-edge-strong:#383848;
+  --nano-text:#f2f2f7; --nano-text-muted:#a3a3b2; --nano-text-faint:#6e6e80;
+  --nano-accent:#8b5cf6; --nano-accent-strong:#a78bfa; --nano-accent-2:#22d3ee; --nano-on-accent:#ffffff;
+  --nano-ok:#34d399; --nano-warn:#fbbf24; --nano-danger:#fb7185; --nano-info:#38bdf8;
+}
+:root[data-appearance="light"] {
+  color-scheme: light;
+  --nano-app:#f5f5f9; --nano-panel:#fdfdfe; --nano-raised:#ffffff; --nano-inset:#ededf3; --nano-hover:#e8e8f0;
+  --nano-edge:#e2e2ea; --nano-edge-strong:#c5c5d4;
+  --nano-text:#1a1a22; --nano-text-muted:#565664; --nano-text-faint:#8c8c9c;
+  --nano-accent:#7c3aed; --nano-accent-strong:#6d28d9; --nano-accent-2:#0891b2; --nano-on-accent:#ffffff;
+  --nano-ok:#059669; --nano-warn:#b45309; --nano-danger:#e11d48; --nano-info:#0369a1;
+}
+@media (prefers-color-scheme: light) {
+  /* Standalone only: follow the OS until the console (which sets data-appearance) themes us. */
+  :root:not([data-appearance]) {
+    color-scheme: light;
+    --nano-app:#f5f5f9; --nano-panel:#fdfdfe; --nano-raised:#ffffff; --nano-inset:#ededf3; --nano-hover:#e8e8f0;
+    --nano-edge:#e2e2ea; --nano-edge-strong:#c5c5d4;
+    --nano-text:#1a1a22; --nano-text-muted:#565664; --nano-text-faint:#8c8c9c;
+    --nano-accent:#7c3aed; --nano-accent-strong:#6d28d9; --nano-accent-2:#0891b2; --nano-on-accent:#ffffff;
+    --nano-ok:#059669; --nano-warn:#b45309; --nano-danger:#e11d48; --nano-info:#0369a1;
+  }
+}
+:root { --pc-edge:var(--nano-edge); --pc-accent:var(--nano-accent); }
 * { box-sizing: border-box; }
-body { margin:0; font:15px/1.5 system-ui,sans-serif; padding:2rem; max-width:64rem; margin-inline:auto; }
-.pc-empty { opacity:.6; }
+body { margin:0; font:15px/1.5 system-ui,sans-serif; padding:2rem; max-width:64rem; margin-inline:auto; background:var(--nano-app); color:var(--nano-text); }
+.pc-empty { color:var(--nano-text-faint); }
 .pc-heading { font-size:1.6rem; font-weight:650; margin:0 0 .25rem; }
-.pc-sub { opacity:.7; margin:.25rem 0 1rem; }
+.pc-sub { color:var(--nano-text-muted); margin:.25rem 0 1rem; }
 .pc-body { margin:.5rem 0; }
-.pc-card { border:1px solid var(--pc-edge); border-radius:.6rem; padding:1rem 1.15rem; margin:1rem 0; }
+.pc-card { border:1px solid var(--nano-edge); border-radius:.6rem; padding:1rem 1.15rem; margin:1rem 0; background:var(--nano-panel); }
 .pc-card h2 { font-size:1rem; margin:0 0 .75rem; }
 .pc-field { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.6rem; }
-.pc-field label { font-size:.8rem; opacity:.75; }
-.pc-field input { padding:.5rem .6rem; border:1px solid var(--pc-edge); border-radius:.4rem; font:inherit; }
-.pc-btn { padding:.5rem .9rem; border:0; border-radius:.4rem; background:var(--pc-accent); color:#fff; font:inherit; cursor:pointer; }
+.pc-field label { font-size:.8rem; color:var(--nano-text-muted); }
+.pc-field input { padding:.5rem .6rem; border:1px solid var(--nano-edge); border-radius:.4rem; font:inherit; background:var(--nano-inset); color:var(--nano-text); }
+.pc-btn { padding:.5rem .9rem; border:0; border-radius:.4rem; background:var(--nano-accent); color:var(--nano-on-accent); font:inherit; cursor:pointer; }
 .pc-btn:disabled { opacity:.5; cursor:default; }
 .pc-msg { font-size:.85rem; margin-top:.5rem; min-height:1.2em; }
-.pc-msg.err { color:#c0392b; }
-.pc-msg.ok { color:#2b8a3e; }
+.pc-msg.err { color:var(--nano-danger); }
+.pc-msg.ok { color:var(--nano-ok); }
 table.pc-grid { width:100%; border-collapse:collapse; font-size:.9rem; }
-table.pc-grid th, table.pc-grid td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--pc-edge); }
-table.pc-grid th { font-weight:600; opacity:.75; }
+table.pc-grid th, table.pc-grid td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--nano-edge); }
+table.pc-grid th { font-weight:600; color:var(--nano-text-muted); }
 .pc-tabs { display:flex; gap:.5rem; margin-bottom:.75rem; }
-.pc-tab { padding:.35rem .8rem; border:1px solid var(--pc-edge); border-radius:.4rem; background:transparent; color:inherit; font:inherit; cursor:pointer; }
-.pc-tab.active { background:var(--pc-accent); color:#fff; border-color:var(--pc-accent); }
+.pc-tab { padding:.35rem .8rem; border:1px solid var(--nano-edge); border-radius:.4rem; background:transparent; color:inherit; font:inherit; cursor:pointer; }
+.pc-tab.active { background:var(--nano-accent); color:var(--nano-on-accent); border-color:var(--nano-accent); }
 .pc-btn-sm { padding:.25rem .55rem; font-size:.8rem; margin-right:.3rem; }
-.pc-chevron { background:transparent; color:inherit; border:1px solid var(--pc-edge); }
+.pc-chevron { background:transparent; color:inherit; border:1px solid var(--nano-edge); }
 .pc-row-actions { white-space:nowrap; text-align:right; }
 .pc-detail { padding:.75rem .25rem; }
 .pc-detail-field { display:flex; gap:.5rem; font-size:.85rem; margin:.15rem 0; }
-.pc-detail-label { opacity:.7; min-width:8rem; }
-.pc-link { color:var(--pc-accent); }
+.pc-detail-label { color:var(--nano-text-muted); min-width:8rem; }
+.pc-link { color:var(--nano-accent); }
 .pc-child { margin:.6rem 0; }
-.pc-child-title { font-size:.8rem; font-weight:600; opacity:.7; margin-bottom:.25rem; }
-.pc-transcript { white-space:pre-wrap; max-height:22rem; overflow:auto; background:rgba(120,120,160,.08); padding:.5rem; border-radius:.4rem; font-size:.8rem; margin-top:.4rem; }
-.pc-subform { margin-top:.75rem; padding:.6rem; border:1px dashed var(--pc-edge); border-radius:.5rem; }
+.pc-child-title { font-size:.8rem; font-weight:600; color:var(--nano-text-muted); margin-bottom:.25rem; }
+.pc-transcript { white-space:pre-wrap; max-height:22rem; overflow:auto; background:var(--nano-inset); padding:.5rem; border-radius:.4rem; font-size:.8rem; margin-top:.4rem; }
+.pc-subform { margin-top:.75rem; padding:.6rem; border:1px dashed var(--nano-edge); border-radius:.5rem; }
 .pc-subform-title { font-weight:600; font-size:.85rem; margin-bottom:.4rem; }
-.pc-prompt { font-size:.85rem; opacity:.8; margin-bottom:.4rem; white-space:pre-wrap; }
-.pc-textarea { width:100%; min-height:4rem; padding:.5rem; border:1px solid var(--pc-edge); border-radius:.4rem; font:inherit; }
+.pc-prompt { font-size:.85rem; color:var(--nano-text-muted); margin-bottom:.4rem; white-space:pre-wrap; }
+.pc-textarea { width:100%; min-height:4rem; padding:.5rem; border:1px solid var(--nano-edge); border-radius:.4rem; font:inherit; background:var(--nano-inset); color:var(--nano-text); }
 .pc-collapse-header { display:flex; align-items:center; gap:.5rem; width:100%; margin:0 0 .75rem; padding:0; background:transparent; border:0; color:inherit; font:inherit; font-size:1rem; font-weight:600; cursor:pointer; text-align:left; }
-.pc-chevron-inline { opacity:.6; font-size:.75rem; width:1em; }
+.pc-chevron-inline { color:var(--nano-text-faint); font-size:.75rem; width:1em; }
 .pc-card-body[hidden] { display:none; }
 `;
 
@@ -404,6 +440,38 @@ const RENDERER_JS = String.raw`
 const root = document.getElementById("page");
 const HOME = root.dataset.home || "home";
 
+// Theme bridge for the Nano console embed. The app runs in a sandboxed,
+// same-origin iframe, so the console's --nano-* custom properties and its
+// data-appearance never cascade in. Instead the console postMessages its
+// resolved tokens; we lay them onto this document's :root and mirror the
+// appearance. Standalone (no console parent) nothing is posted, so the CSS
+// defaults stand. We announce readiness so the console can push the theme even
+// if its first message raced our listener install.
+function applyTheme(msg) {
+  if (!msg || msg.type !== "nano-theme") return;
+  const el = document.documentElement;
+  if (msg.appearance === "light" || msg.appearance === "dark") el.dataset.appearance = msg.appearance;
+  const vars = msg.vars;
+  if (vars && typeof vars === "object") {
+    for (const [k, v] of Object.entries(vars)) {
+      // Only accept the shared token namespace; ignore anything else.
+      if (typeof k === "string" && k.startsWith("--nano-") && typeof v === "string") {
+        el.style.setProperty(k, v);
+      }
+    }
+  }
+}
+if (window.parent && window.parent !== window) {
+  window.addEventListener("message", (ev) => {
+    // Same-origin proxy (posture A): only trust a message from the framing
+    // parent AND from our own origin. ev.source alone is insufficient — a
+    // cross-origin page that frames a standalone run becomes window.parent, so
+    // an origin check is what actually pins the trust boundary.
+    if (ev.origin === window.location.origin && ev.source === window.parent) applyTheme(ev.data);
+  });
+  window.parent.postMessage({ type: "nano-app-ready" }, window.location.origin);
+}
+
 // Resolve every app endpoint against where THIS module was actually served from,
 // so absolute-looking "/app/…" paths work both at the origin root (direct run,
 // e.g. the CLI on :3000) and under a path-prefixed reverse proxy (the Nano