wallet frame kappa-objects: theme/mobile css + teleport/theme js (fix half-shipped kappa-links)

Browse files

Files changed (4) hide show

sha256/31365b0b2f83cc3ae69f1ab91477a7cbed4fd2ab00366a84d5aea9212db0d4dc +886 -0
sha256/a0ebbc696bda5154727b76b42c11921231cbc652de3e705dd6b632456e6f34aa +143 -0
sha256/b2bfa104b9ee8e3bb631dcd0ec0e6f7017b8898c4304666f5b3dfeeebc926eb9 +127 -0
sha256/c4414e9c61a6ae6b8c19145dddbbe24c68bea83784666434a94cf033b06cc483 +384 -0

sha256/31365b0b2f83cc3ae69f1ab91477a7cbed4fd2ab00366a84d5aea9212db0d4dc ADDED Viewed

	@@ -0,0 +1,886 @@

+// Holo Theme (holo-theme.js) — the Hologram OS theme runtime. Zero dependencies,
+// content-addressable. A self-contained module: call it once and it brings its own
+// stylesheet — <script src="…/holo-theme.js"></script> is the whole adoption.
+// The lean OS service the brief calls a "unified runtime theme engine": it resolves the
+// initial theme, applies it, persists the user's choice, and propagates live changes
+// across the whole nested-holospace tree — instantly, no rebuild, no restart.
+//
+// W3C-native end to end: state is expressed only as CSS custom properties + the
+// color-scheme/light-dark() palette attribute (holo-theme.css); transport is the HTML
+// Standard's postMessage; the theme's identity is a κ artifact (ADR-022).
+//
+// Precedence model (see THEMING-W3C-ADR.md):
+//   • USER accessibility (font scale, density, motion) — always wins. Applied here as
+//     INLINE custom properties on :root, so it beats app stylesheets. enforce-os adds
+//     !important so it beats app !important too.
+//   • App vs OS aesthetics — negotiated. An app declares <meta name="holo-theme-policy"
+//     content="own"> to keep its colors; default "adopt" lets it follow the OS palette
+//     (apps that use the --holo-* tokens follow automatically; apps with private vars
+//     resist until migrated — an honest limit, like canvas/VM surfaces).
+//
+// API (window.HoloTheme):
+//   .get()                         → current state
+//   .setPalette("auto"|"light"|"dark")
+//   .setPresentation("standard"|"immersive")
+//   .setFontScale(n)               → 0.85 … 1.4   (Settings › Display › Text size)
+//   .setFontFamily(css-font-list)  → UI typeface  (Settings › Display › Typeface)
+//   .setDensity(n) / .setAccent(c) / .reset()
+//   .openSettings()                → the built-in Display settings panel (any surface)
+(function () {
+  "use strict";
+  if (window.HoloTheme) return;
+  // Bundled: bring our own stylesheet so adopting Holo Theme is a single <script> call.
+  // A page may still pre-link holo-theme.css in <head> to avoid any flash — we skip
+  // injection if it is already present.
+  (function injectCss() {
+    try {
+      if (document.querySelector('link[href*="holo-theme.css"]')) return;
+      var src = (document.currentScript && document.currentScript.src) || "";
+      var href = /\/\.holo\/sha256\//.test(src) ? "/_shared/holo-theme.css" : src ? src.replace(/holo-theme\.js(\?.*)?$/, "holo-theme.css") : "_shared/holo-theme.css";
+      var l = document.createElement("link"); l.rel = "stylesheet"; l.href = href;
+      (document.head || document.documentElement).appendChild(l);
+    } catch (e) {}
+  })();
+  // Resolve sibling shared files (to lazy-load the DTCG format module on demand).
+  var SELF = (document.currentScript && document.currentScript.src) || "";
+  // κ-routed (src is /.holo/sha256/<hex>.js): siblings can't be path-resolved → use the canonical _shared mount.
+  var SHARED = /\/\.holo\/sha256\//.test(SELF) ? "/_shared/" : SELF ? SELF.replace(/holo-theme\.js(\?.*)?$/, "") : "_shared/";
+  // Bootstrap the Holo UX experience layer (ADR-028): device-tier resolution, golden-ratio
+  // proportion (holo-ux.js self-injects holo-phi.css), and propagation down the holospace tree.
+  // Loading it from the theme runtime — which every Holo Theme / Holo UI citizen already loads
+  // (the kernel injects it too) — makes every citizen a Holo UX citizen with NO per-app script
+  // tag: one canonical wire (Law L2). Idempotent + additive (holo-ux.js guards its own effects).
+  (function bootHoloUx() {
+    try {
+      if (window.HoloUX || document.querySelector('script[src*="holo-ux.js"]')) return;
+      var s = document.createElement("script"); s.type = "module"; s.src = SHARED + "holo-ux.js";
+      (document.head || document.documentElement).appendChild(s);
+    } catch (e) {}
+  })();
+  // Bootstrap the Holo FX motion engine (the OS's faithful adoption of unicode-animations):
+  // window.HoloFX — one sharp, content-addressed loading vocabulary (braille · scan · dna ·
+  // cascade) for every surface. Same canonical wire as Holo UX (Law L2): every Holo Theme
+  // citizen gets it with NO per-app script tag. Classic script (sets window.HoloFX), idempotent.
+  (function bootHoloFx() {
+    try {
+      if (window.HoloFX || document.querySelector('script[src*="holo-fx.js"]')) return;
+      var s = document.createElement("script"); s.src = SHARED + "holo-fx.js";
+      (document.head || document.documentElement).appendChild(s);
+    } catch (e) {}
+  })();
+  // Bootstrap the canonical κ→render path (window.HoloRender): the ONE lean, low-latency way every app
+  // displays a content-addressed UOR object — resolve by κ (arena-cached), verify by re-derivation, mount
+  // its ORIGINAL bytes (no compiler on the hot path). Same canonical wire as Holo UX / FX / Telemetry (Law
+  // L2): every Holo Theme citizen gets it with NO per-app script tag. The renderer rides the substrate's
+  // SINGLE resolver (resolveByKappa) + κ-route when present, else its own re-derive fallback (same L5 law).
+  (function bootHoloRender() {
+    try {
+      if (window.HoloRender || window.__holoRenderBoot) return;
+      window.__holoRenderBoot = 1;
+      var code =
+        'import HoloRender from "' + SHARED + 'holo-render.js";\n' +
+        'const route = (h) => "/.holo/sha256/" + h;\n' +
+        'let resolver;\n' +
+        'try { const m = await import("/holo-resolver.mjs"); const store = new Map();\n' +
+        '  const src = async (k) => { try { const r = await fetch(route(String(k).split(":").pop())); return r.ok ? new Uint8Array(await r.arrayBuffer()) : null; } catch (e) { return null; } };\n' +
+        '  resolver = (k) => m.resolveByKappa(k, [src], store); } catch (e) {}\n' +
+        'try { await HoloRender.configure({ base: "/", route, resolver }); window.HoloRender = HoloRender;\n' +
+        '  (document.documentElement || document).dispatchEvent(new Event("holo-render-ready")); } catch (e) { console.warn("holo-render boot:", e); }\n';
+      var s = document.createElement("script"); s.type = "module"; s.textContent = code;
+      (document.head || document.documentElement).appendChild(s);
+    } catch (e) {}
+  })();
+  // Clean chrome (Law L2, one universal wire): the OS injects a row of per-app floating "chrome" tiles
+  // (Open Holo UI · capture-a-thought · go-live · capture-screen · manage). They clutter every app's
+  // surface; remove them OS-wide for the cleanest UX. One CSS rule applies in every app that loads the
+  // engine — no per-app edit. These actions remain reachable from the shell/dock, not over each app.
+  (function bootCleanChrome() {
+    try {
+      if (document.getElementById("holo-clean-chrome")) return;
+      var s = document.createElement("style"); s.id = "holo-clean-chrome";
+      s.textContent = "#holo-themedash-btn,#holo-notepad-btn,#holo-stream-btn,#holo-capture-btn,#holo-manage-btn{display:none!important}";
+      (document.head || document.documentElement).appendChild(s);
+    } catch (e) {}
+  })();
+  // Bootstrap the Remix layer (window.HoloEdit): right-click any κ-object → Inspect · Edit · Share · Move ·
+  // Hide · Delete; an edit forks a NEW κ (auto-persisted, re-derivable, shareable). Same canonical wire as
+  // UX / FX / Render (Law L2): the shell — the container for every app — and every app inherit it with NO
+  // per-app tag, and agents get the identical powers via window.HoloEdit.api. Idempotent (it self-guards).
+  (function bootHoloEdit() {
+    try {
+      if (window.HoloEdit || document.querySelector('script[src*="holo-edit.js"]')) return;
+      var s = document.createElement("script"); s.defer = true; s.src = SHARED + "holo-edit.js";
+      (document.head || document.documentElement).appendChild(s);
+    } catch (e) {}
+  })();
+  // Bootstrap Holo Telemetry (ADR-0073): system-wide observability native to the substrate — the
+  // OpenTelemetry data model + W3C Trace Context as content-addressed UOR objects (window.HoloTelemetry).
+  // Same canonical wire as Holo UX / FX (Law L2): every Holo Theme citizen gets it with NO per-app script
+  // tag. The module self-registers on holo-app-ready; once ready, a tiny PerformanceObserver BRIDGE turns
+  // the existing perf marks/measures every app already emits into local spans — instrumentation with no
+  // per-app code. Telemetry stays LOCAL by default (Law L1); nothing is exported without an explicit,
+  // conscience-gated consent. Idempotent + additive (the module guards its own effects).
+  (function bootHoloTelemetry() {
+    try {
+      if (window.HoloTelemetry || document.querySelector('script[src*="holo-telemetry.mjs"]')) return;
+      var s = document.createElement("script"); s.type = "module"; s.src = SHARED + "holo-telemetry.mjs";
+      (document.head || document.documentElement).appendChild(s);
+      // the one canonical bridge: existing PerformanceObserver "measure" entries → local spans. Best-effort,
+      // gated by reduced-data-cost intent and never exporting — pure local self-observation.
+      var bridge = function () {
+        try {
+          if (!window.HoloTelemetry || window.__holoTelemetryBridge) return;
+          window.__holoTelemetryBridge = true;
+          if (typeof PerformanceObserver === "undefined") return;
+          var tr = window.HoloTelemetry.tracer("perf", "1.0");
+          var po = new PerformanceObserver(function (list) {
+            for (var i = 0; i < list.getEntries().length; i++) {
+              var e = list.getEntries()[i];
+              try { tr.startSpan(e.name, { kind: "internal", attributes: { entryType: e.entryType }, start: e.startTime })
+                .end({ end: e.startTime + (e.duration || 0) }); } catch (x) {}
+            }
+          });
+          po.observe({ entryTypes: ["measure"] });
+        } catch (x) {}
+      };
+      if (window.HoloTelemetry) bridge();
+      else if (document.documentElement) document.documentElement.addEventListener("holo-telemetry-ready", bridge, { once: true });
+    } catch (e) {}
+  })();
+  // Bootstrap the AUTONOMY SPINE (S0–S4): the OS observes itself (tap), reflects (coherence), proposes
+  // (observer), speaks under discipline (courier), and may act bounded (trust). Same canonical wire as
+  // Telemetry (Law L2) — no per-app script tag. Each module guards its own effects (binds its window.Holo*
+  // only when its deps exist, chained by holo-*-ready events); loading them is idempotent + additive. The
+  // live cadence is driven by the heal-boot idle loop calling window.HoloSpine.runOnce(tick) — proposals
+  // only; acting stays behind HoloTrust. Local-first throughout (Law L1).
+  (function bootHoloSpine() {
+    try {
+      if (window.__holoSpineBoot) return; window.__holoSpineBoot = true;
+      var mods = ["holo-control-dsp.js", "holo-telemetry-tap.mjs", "holo-coherence.mjs",
+                  "holo-observer.mjs", "holo-courier.mjs", "holo-trust.mjs", "holo-spine.mjs"];
+      mods.forEach(function (m) {
+        if (document.querySelector('script[src*="' + m + '"]')) return;
+        var s = document.createElement("script");
+        s.type = "module";   // every entry in this spine-boot list is an ES module. holo-control-dsp.js is .js-named but `export`s — loading it as a classic script threw "Unexpected token 'export'" and silently dropped the DSP core. Module scripts defer by default.
+        s.src = SHARED + m;
+        (document.head || document.documentElement).appendChild(s);
+      });
+    } catch (e) {}
+  })();
+  var KEY = "holo.theme.v1";            // one OS-wide choice, shared same-origin
+  var TKEY = "holo.theme.tokens.v1";    // imported DTCG theme (JSON)
+  var CKEY = "holo.theme.tokens.css.v1";// its compiled CSS (fast init, no format module)
+  var FKEY = "holo.theme.fonts.v1";     // the live font registry (catalog + imported), JSON
+  var FCKEY = "holo.theme.fonts.css.v1";// its compiled @font-face CSS (fast init)
+  var LKEY = "holo.theme.lookandfeel.v1";// the active Global Theme's look-and-feel block (JSON)
+  var themeJson = null;                 // the active custom theme (DTCG), if any
+  var lookAndFeel = null;               // the active Global Theme's look-and-feel (icons/decoration/layout…)
+  var userFonts = [];                   // registered fonts: [{family, category, stack, faces, origin}]
+  var _catalog = null;                  // the κ-pinned font library (fonts/index.json), lazy
+  // ── Portable themes (DTCG ⇄ CSS via holo-theme-format.js) ────────────────────────
+  // A theme is injected as a <style id="holo-theme-tokens"> block (unlayered → it beats
+  // holo-theme.css's layered defaults; the engine's inline user overrides still win).
+  function injectTokens(cssText) {
+    var s = document.getElementById("holo-theme-tokens");
+    if (cssText == null || cssText === "") { if (s) s.remove(); return; }
+    if (!s) { s = document.createElement("style"); s.id = "holo-theme-tokens"; (document.head || document.documentElement).appendChild(s); }
+    s.textContent = cssText;
+  }
+  function loadFormat() {
+    return new Promise(function (res, rej) {
+      if (globalThis.HoloThemeFormat) return res(globalThis.HoloThemeFormat);
+      var s = document.createElement("script");
+      s.src = SHARED + "holo-theme-format.js";
+      s.onload = function () { res(globalThis.HoloThemeFormat); };
+      s.onerror = function () { rej(new Error("could not load holo-theme-format.js")); };
+      (document.head || document.documentElement).appendChild(s);
+    });
+  }
+  function broadcastTokens(css, json) {
+    var msg = { type: "holo-theme-tokens", css: css, json: json };
+    childFrames().forEach(function (w) { try { w.postMessage(msg, "*"); } catch (e) {} });
+  }
+  // Import a DTCG theme (object or JSON string): validate → compile → apply → persist → broadcast.
+  function importTheme(json, opts) {
+    opts = opts || {};
+    return loadFormat().then(function (F) {
+      if (!F) return { ok: false, errors: ["format module unavailable"] };
+      if (typeof json === "string") { try { json = JSON.parse(json); } catch (e) { return { ok: false, errors: ["invalid JSON: " + e.message] }; } }
+      var v = F.validate(json); if (!v.ok) return v;
+      var css; try { css = F.toCss(json); } catch (e) { return { ok: false, errors: [String(e.message || e)] }; }
+      themeJson = json; injectTokens(css);
+      if (opts.persist !== false) { try { localStorage.setItem(TKEY, JSON.stringify(json)); localStorage.setItem(CKEY, css); } catch (e) {} }
+      apply();
+      if (opts.broadcast !== false) broadcastTokens(css, json);
+      root.dispatchEvent(new CustomEvent("holo-theme-change", { detail: state, bubbles: false }));
+      return { ok: true };
+    });
+  }
+  // Apply a Holo GLOBAL THEME (a KDE Look-and-Feel package adopted as one κ-object): it IS a
+  // DTCG theme (color + font + radius), so its visual layer flows through importTheme unchanged —
+  // Holo Theme stays the single source of truth (ADR-023). The package's $extensions
+  // "org.hologram.lookandfeel" block (icons · window decoration · layout · splash · cursor) is
+  // surfaced for the shell as data-attributes + a holo-lookandfeel-change event, and persisted.
+  function applyGlobalTheme(gt, opts) {
+    opts = opts || {};
+    if (typeof gt === "string") { try { gt = JSON.parse(gt); } catch (e) { return Promise.resolve({ ok: false, errors: ["invalid JSON: " + e.message] }); } }
+    var laf = (gt && gt.$extensions && gt.$extensions["org.hologram.lookandfeel"]) || null;
+    return importTheme(gt, opts).then(function (res) {
+      if (!res.ok) return res;
+      applyLookAndFeel(laf, opts);
+      return { ok: true, lookAndFeel: laf };
+    });
+  }
+  function applyLookAndFeel(laf, opts) {
+    opts = opts || {};
+    lookAndFeel = laf;
+    if (laf && laf.icons) root.setAttribute("data-holo-icons", laf.icons); else root.removeAttribute("data-holo-icons");
+    var deco = laf && laf.decoration && (laf.decoration.theme || laf.decoration);
+    if (deco) root.setAttribute("data-holo-decoration", deco); else root.removeAttribute("data-holo-decoration");
+    if (laf && laf.layout) root.setAttribute("data-holo-layout", laf.layout); else root.removeAttribute("data-holo-layout");
+    if (opts.persist !== false) { try { if (laf) localStorage.setItem(LKEY, JSON.stringify(laf)); else localStorage.removeItem(LKEY); } catch (e) {} }
+    root.dispatchEvent(new CustomEvent("holo-lookandfeel-change", { detail: laf, bubbles: false }));
+  }
+  function readVars() {
+    var cs = getComputedStyle(root), out = {};
+    ["--holo-bg", "--holo-surface", "--holo-surface-2", "--holo-border", "--holo-ink", "--holo-ink-dim",
+     "--holo-accent", "--holo-accent-ink", "--holo-ok", "--holo-warn", "--holo-danger",
+     "--holo-font-sans", "--holo-font-serif", "--holo-font-mono", "--holo-font-scale",
+     "--holo-radius-sm", "--holo-radius", "--holo-radius-lg", "--holo-density"
+    ].forEach(function (n) { out[n] = cs.getPropertyValue(n).trim(); });
+    return out;
+  }
+  // Export the current theme as a DTCG token object (the shareable artifact). WYSIWYG:
+  // reads the LIVE custom properties (base theme + any user tweaks), and carries over the
+  // imported theme's metadata + web fonts so nothing is lost.
+  function exportTheme(meta) {
+    return loadFormat().then(function (F) {
+      if (!F) return null;
+      var ext = themeJson && themeJson.$extensions && themeJson.$extensions["org.hologram.theme"];
+      var t = F.fromVars(readVars(), meta || (ext ? { name: ext.name, author: ext.author } : { name: "My Hologram theme" }));
+      if (themeJson) {
+        if (themeJson.$description) t.$description = themeJson.$description;
+        if (themeJson.font && themeJson.font.face) t.font.face = themeJson.font.face;
+        if (themeJson.font && themeJson.font.variation) t.font.variation = themeJson.font.variation;
+      }
+      return t;
+    });
+  }
+  function clearTheme() { themeJson = null; injectTokens(""); try { localStorage.removeItem(TKEY); localStorage.removeItem(CKEY); localStorage.removeItem(KKEY); } catch (e) {} applyLookAndFeel(null, {}); broadcastTokens("", null); apply(); }
+  // ── κ-addressed theme catalog — themes as content-addressed, self-verifying UOR objects ─────────
+  // A theme is a DTCG object served at /_shared/themes/<file>; its identity is κ = sha256 of its bytes.
+  // setThemeByKappa fetches it, RE-DERIVES sha256, refuses on mismatch (Law L5), then applies it live.
+  var _themes = null;             // cached themes/index.json entries
+  var KKEY = "holo.theme.kappa.v1";  // the active κ-theme (so the studio can highlight it)
+  function listThemes() {
+    if (_themes) return Promise.resolve(_themes);
+    return fetch(SHARED + "themes/index.json").then(function (r) { return r.ok ? r.json() : { themes: [] }; })
+      .then(function (j) { _themes = (j && j.themes) || []; return _themes; })
+      .catch(function () { _themes = []; return _themes; });
+  }
+  function sha256Hex(buf) {
+    if (!(globalThis.crypto && crypto.subtle)) return Promise.resolve(null);
+    return crypto.subtle.digest("SHA-256", buf).then(function (d) {
+      var b = new Uint8Array(d), s = ""; for (var i = 0; i < b.length; i++) s += b[i].toString(16).padStart(2, "0"); return s;
+    });
+  }
+  function setThemeByKappa(kappa) {
+    var want = String(kappa).replace(/^sha256:/, "");
+    return listThemes().then(function (themes) {
+      var t = themes.filter(function (x) { return x.kappa === "sha256:" + want || x.kappa === kappa || x.name === kappa; })[0];
+      if (!t) return { ok: false, errors: ["unknown theme " + kappa] };
+      return fetch(SHARED + "themes/" + t.file).then(function (r) { return r.ok ? r.arrayBuffer() : Promise.reject(new Error("theme fetch failed")); })
+        .then(function (buf) {
+          return sha256Hex(buf).then(function (hex) {
+            // self-verify: the bytes must re-derive the claimed κ (Law L5). null = no SubtleCrypto (file://) → skip.
+            var hexWant = t.kappa.replace(/^sha256:/, "");
+            if (hex && hex !== hexWant) return { ok: false, errors: ["κ mismatch — theme bytes do not re-derive (Law L5)"] };
+            var json; try { json = JSON.parse(new TextDecoder().decode(buf)); } catch (e) { return { ok: false, errors: ["invalid theme JSON"] }; }
+            // Applying a theme hands AESTHETIC governance to it: clear any ad-hoc accent/typeface
+            // override so the theme's own tokens win (accessibility — font scale/min/density — is kept).
+            if (state.accent || state.fontFamily) set({ accent: "", fontFamily: "" });
+            return importTheme(json).then(function (res) { if (res.ok) { try { localStorage.setItem(KKEY, t.kappa); } catch (e) {} } return res; });
+          });
+        });
+    }).catch(function (e) { return { ok: false, errors: [String(e.message || e)] }; });
+  }
+  function setTheme(nameOrKappa) {
+    return listThemes().then(function (themes) {
+      var t = themes.filter(function (x) { return x.kappa === nameOrKappa || x.name === nameOrKappa || x.file === nameOrKappa; })[0];
+      return t ? setThemeByKappa(t.kappa) : { ok: false, errors: ["unknown theme " + nameOrKappa] };
+    });
+  }
+  function activeThemeKappa() { try { return localStorage.getItem(KKEY) || null; } catch (e) { return null; } }
+  var root = document.documentElement;
+  var isTop = (window.parent === window);
+  var policy = (document.querySelector('meta[name="holo-theme-policy"]') || {}).content || "adopt";
+  // Built-in typeface presets the Settings panel offers (all standards-only font lists).
+  var FONTS = {
+    "Helvetica Neue": '"Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif',
+    System: 'system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif',
+    Humanist: 'Inter, "Segoe UI", Roboto, system-ui, sans-serif',
+    Serif: 'ui-serif, Georgia, "Times New Roman", serif',
+    Mono: 'ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace',
+    Readable: 'Atkinson Hyperlegible, "Comic Neue", Verdana, system-ui, sans-serif' // dyslexia-friendly fallbacks
+  };
+  var DEFAULTS = {
+    palette: "auto",            // auto = follow prefers-color-scheme (Media Queries L5)
+    presentation: "standard",
+    immersive: false,           // Immersive backdrop ON — a κ-sealed wallpaper behind translucent surfaces
+    wallpaper: "",              // the immersive backdrop: a κ (sha256:/blake3:) or a URL; "" = none
+    fontScale: 1,
+    fontMin: 16,                // readability FLOOR in px (0 = off). The whole rem ramp clamps up to it.
+    fontFamily: "",             // "" = OS default (--holo-font-sans from holo-theme.css)
+    density: 1,
+    accent: "",                 // "" = OS default
+    enforce: false              // user "enforce OS theme on every app" switch
+  };
+  function read() {
+    try { return Object.assign({}, DEFAULTS, JSON.parse(localStorage.getItem(KEY) || "{}")); }
+    catch (e) { return Object.assign({}, DEFAULTS); }
+  }
+  function write(s) { try { localStorage.setItem(KEY, JSON.stringify(s)); } catch (e) {} }
+  var state = read();
+  function clamp(n, lo, hi) { n = parseFloat(n); return isNaN(n) ? lo : Math.min(hi, Math.max(lo, n)); }
+  // Apply the current state to THIS document using only W3C primitives.
+  function apply() {
+    var prio = state.enforce ? "important" : "";       // enforce-os = user beats app !important
+    var pushAesthetic = (policy !== "own") || state.enforce;
+    var pinned = state.palette && state.palette !== "auto";
+    // Palette: data attribute (for CSS hooks / app reaction) + INLINE color-scheme.
+    // Inline is required — a layered @layer rule would lose to an app's UNLAYERED
+    // `color-scheme` (e.g. the shell's `:root{color-scheme:dark}`). For "own" apps we
+    // leave their own scheme untouched (unless the user chose enforce-os).
+    if (pinned) root.setAttribute("data-holo-palette", state.palette);
+    else root.removeAttribute("data-holo-palette");
+    root.setAttribute("data-holo-presentation", state.presentation || "standard");
+    if (pushAesthetic) root.style.setProperty("color-scheme", pinned ? state.palette : "light dark", prio);
+    else root.style.removeProperty("color-scheme");
+    // Immersive backdrop — an orthogonal axis to the light/dark palette: a κ-sealed wallpaper
+    // published behind translucent surfaces (data-holo-immersive="on" + --holo-wallpaper). The
+    // pre-paint bootstrap (holo-appearance-boot.js) sets the SAME attribute/var from the SAME
+    // state, so the async engine and the first frame never disagree.
+    root.setAttribute("data-holo-immersive", state.immersive ? "on" : "off");
+    if (state.wallpaper) setVar("--holo-wallpaper", 'url("' + wallUrl(state.wallpaper) + '")', prio);
+    else root.style.removeProperty("--holo-wallpaper");
+    // Shoelace (Web Awesome) activates dark tokens via a class — follow the resolved palette.
+    if (pushAesthetic) {
+      var dark = pinned ? (state.palette === "dark")
+        : !!(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+      root.classList.toggle("sl-theme-dark", dark);
+    }
+    // Accessibility (always applied, even to "own" apps) — inline custom props win.
+    setVar("--holo-font-scale", clamp(state.fontScale, 0.7, 2), prio);
+    setVar("--holo-density", clamp(state.density, 0.7, 1.4), prio);
+    // Readability floor: the type ramp + root font-size clamp UP to this (holo-theme.css /
+    // holo-mobile.css use max(--holo-font-min, …)). 0 = off → no floor. px units required.
+    setVar("--holo-font-min", clamp(state.fontMin, 0, 28) + "px", prio);
+    // Aesthetics — applied unless this surface owns its theme (then only enforce-os pushes).
+    if (pushAesthetic && state.fontFamily) setVar("--holo-font-sans", state.fontFamily, prio);
+    else if (!state.fontFamily) root.style.removeProperty("--holo-font-sans");
+    if (pushAesthetic && state.accent) setVar("--holo-accent", state.accent, prio);
+    else if (!state.accent) root.style.removeProperty("--holo-accent");
+  }
+  function setVar(name, val, prio) { root.style.setProperty(name, val, prio || ""); }
+  // ── Propagation across the nested-holospace tree (postMessage) ───────────────────
+  function childFrames() {
+    var out = [];
+    var ifr = document.getElementsByTagName("iframe");
+    for (var i = 0; i < ifr.length; i++) if (ifr[i].contentWindow) out.push(ifr[i].contentWindow);
+    return out;
+  }
+  function broadcastDown() {
+    var msg = { type: "holo-theme", state: state };
+    childFrames().forEach(function (w) { try { w.postMessage(msg, "*"); } catch (e) {} });
+  }
+  // ── Font registry — fonts as first-class, content-addressed citizens ─────────────
+  // Imported and catalog fonts are injected as a <style id="holo-user-fonts"> block of
+  // @font-face rules (separate from a DTCG theme, so fonts and palettes are independent).
+  // An IMPORTED font's bytes ride inline as a data: URL, so the SAME CSS string propagates
+  // to every isolated holospace and each document loads it locally — no server route, no
+  // cross-origin fetch. A CATALOG font uses its κ path URL (smaller). Identical transport
+  // to themes: postMessage down the nested tree (HTML Standard).
+  function injectFonts(cssText) {
+    var s = document.getElementById("holo-user-fonts");
+    if (cssText == null || cssText === "") { if (s) s.remove(); return; }
+    if (!s) { s = document.createElement("style"); s.id = "holo-user-fonts"; (document.head || document.documentElement).appendChild(s); }
+    s.textContent = cssText;
+  }
+  function buildFontsCss(list) {
+    var F = globalThis.HoloThemeFormat; if (!F) return "";
+    return (list || []).map(function (d) { return F.faceCss(d.faces); }).filter(Boolean).join("\n");
+  }
+  function broadcastFonts(css, list) {
+    var msg = { type: "holo-fonts", css: css, list: list };
+    childFrames().forEach(function (w) { try { w.postMessage(msg, "*"); } catch (e) {} });
+  }
+  function quoteFamily(f) { return (/\s/.test(f) && !/^["']/.test(f)) ? '"' + f + '"' : f; }
+  function fontStack(desc) {
+    if (desc.stack && desc.stack.length) return desc.stack.map(quoteFamily).join(", ");
+    var fb = desc.category === "mono" ? 'ui-monospace, "Cascadia Code", Menlo, monospace'
+      : desc.category === "serif" ? 'ui-serif, Georgia, "Times New Roman", serif'
+      : 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+    return quoteFamily(desc.family) + ", " + fb;
+  }
+  // Preload the ACTIVE registered font's primary path src (a data: URL is already inline,
+  // so it needs none). For local κ fonts this removes the font-display:swap flash — the
+  // "magical, instant" feel comes from preload, not swap.
+  function preloadActive() {
+    try {
+      var ex = document.getElementById("holo-font-preload"); if (ex) ex.remove();
+      var fam = (state.fontFamily || "").split(",")[0].replace(/^\s*["']?|["']?\s*$/g, "");
+      if (!fam) return;
+      var d = userFonts.filter(function (x) { return x.family === fam; })[0]; if (!d) return;
+      var face = (d.faces || [])[0]; if (!face || !face.src) return;
+      var m = /url\(\s*["']?([^"')]+)["']?\s*\)/.exec(face.src); var url = m && m[1];
+      if (!url || /^data:/.test(url)) return;
+      var l = document.createElement("link");
+      l.id = "holo-font-preload"; l.rel = "preload"; l.as = "font"; l.type = "font/woff2";
+      l.crossOrigin = "anonymous"; l.href = url;
+      (document.head || document.documentElement).appendChild(l);
+    } catch (e) {}
+  }
+  // Register a font {family, faces:[…], category?, stack?, origin?}. Dedupes by family.
+  function addFont(desc, opts) {
+    opts = opts || {};
+    return loadFormat().then(function (F) {
+      if (!F) return { ok: false, errors: ["format module unavailable"] };
+      if (!desc || !desc.family || !Array.isArray(desc.faces) || !desc.faces.length) return { ok: false, errors: ["a font needs a family and at least one face"] };
+      userFonts = userFonts.filter(function (x) { return x.family !== desc.family; }).concat([desc]);
+      var css = buildFontsCss(userFonts); injectFonts(css);
+      if (opts.persist !== false) { try { localStorage.setItem(FKEY, JSON.stringify(userFonts)); localStorage.setItem(FCKEY, css); } catch (e) {} }
+      if (opts.broadcast !== false) broadcastFonts(css, userFonts);
+      if (opts.activate !== false) setFontFamily(fontStack(desc));   // setFontFamily also broadcasts state
+      preloadActive();
+      root.dispatchEvent(new CustomEvent("holo-theme-change", { detail: state, bubbles: false }));
+      return { ok: true, family: desc.family };
+    });
+  }
+  function removeFont(family) {
+    userFonts = userFonts.filter(function (x) { return x.family !== family; });
+    var css = buildFontsCss(userFonts); injectFonts(css);
+    try { localStorage.setItem(FKEY, JSON.stringify(userFonts)); localStorage.setItem(FCKEY, css); } catch (e) {}
+    broadcastFonts(css, userFonts);
+    preloadActive();
+  }
+  // Import a raw font File → registry descriptor (bytes inline as data: URL) → register + activate.
+  function importFontFile(file) {
+    return new Promise(function (resolve) {
+      if (!file) return resolve({ ok: false, errors: ["no file"] });
+      file.arrayBuffer().then(function (buf) {
+        var bytes = new Uint8Array(buf), bin = "", CH = 0x8000;
+        for (var i = 0; i < bytes.length; i += CH) bin += String.fromCharCode.apply(null, bytes.subarray(i, i + CH));
+        var base64 = btoa(bin);
+        loadFormat().then(function (F) {
+          if (!F) return resolve({ ok: false, errors: ["format module unavailable"] });
+          var desc; try { desc = F.importDescriptor({ filename: file.name, base64: base64, mime: file.type }); }
+          catch (e) { return resolve({ ok: false, errors: [String(e.message || e)] }); }
+          addFont(desc, { activate: true }).then(resolve);
+        });
+      }, function (e) { resolve({ ok: false, errors: [String(e)] }); });
+    });
+  }
+  // The κ-pinned font library (fonts/index.json) — one-click add. Lazy + cached.
+  function loadCatalog() {
+    if (_catalog) return Promise.resolve(_catalog);
+    return fetch(SHARED + "fonts/index.json").then(function (r) { return r.ok ? r.json() : { fonts: [] }; })
+      .then(function (j) { _catalog = j || { fonts: [] }; return _catalog; })
+      .catch(function () { _catalog = { fonts: [] }; return _catalog; });
+  }
+  function catalogToDesc(e) {
+    return {
+      family: e.family, category: e.category || "sans", stack: e.stack, origin: "catalog",
+      faces: (e.faces || []).map(function (f) {
+        return { family: e.family, src: f.src, weight: f.weight || "100 900", style: f.style || "normal", display: f.display || "swap", unicodeRange: f.unicodeRange };
+      })
+    };
+  }
+  function set(patch, opts) {
+    opts = opts || {};
+    Object.assign(state, patch);
+    apply();
+    if (opts.persist !== false) write(state);
+    if (opts.broadcast !== false) broadcastDown();
+    root.dispatchEvent(new CustomEvent("holo-theme-change", { detail: state, bubbles: false }));
+  }
+  // Receive from parent; re-broadcast to our own children (transitive nesting).
+  window.addEventListener("message", function (e) {
+    var d = e.data;
+    if (!d || typeof d !== "object") return;
+    if (d.type === "holo-theme" && d.state) {
+      state = Object.assign({}, DEFAULTS, d.state);
+      apply(); write(state); broadcastDown();
+    } else if (d.type === "holo-theme-tokens") {
+      // A custom DTCG theme arrived from the parent — inject + persist + propagate down.
+      themeJson = d.json || null; injectTokens(d.css);
+      try { if (d.json) { localStorage.setItem(TKEY, JSON.stringify(d.json)); localStorage.setItem(CKEY, d.css || ""); } else { localStorage.removeItem(TKEY); localStorage.removeItem(CKEY); } } catch (err) {}
+      apply(); broadcastTokens(d.css, d.json);
+    } else if (d.type === "holo-fonts") {
+      // Registered fonts arrived from the parent — inject the @font-face block (bytes ride
+      // inline for imports) + persist + propagate down. No format module needed: css is compiled.
+      userFonts = Array.isArray(d.list) ? d.list : [];
+      injectFonts(d.css || "");
+      try { if (userFonts.length) { localStorage.setItem(FKEY, JSON.stringify(userFonts)); localStorage.setItem(FCKEY, d.css || ""); } else { localStorage.removeItem(FKEY); localStorage.removeItem(FCKEY); } } catch (err) {}
+      preloadActive(); broadcastFonts(d.css, userFonts);
+    } else if (d.type === "holo-theme-hello" && e.source) {
+      // A freshly-mounted child asks for the current theme; answer state + custom tokens + fonts.
+      try { e.source.postMessage({ type: "holo-theme", state: state }, "*"); } catch (err) {}
+      var sEl = document.getElementById("holo-theme-tokens");
+      if (sEl && themeJson) { try { e.source.postMessage({ type: "holo-theme-tokens", css: sEl.textContent, json: themeJson }, "*"); } catch (err) {} }
+      var fEl = document.getElementById("holo-user-fonts");
+      if (fEl && userFonts.length) { try { e.source.postMessage({ type: "holo-fonts", css: fEl.textContent, list: userFonts }, "*"); } catch (err) {} }
+    }
+  });
+  // ── Initial theme: saved choice → (else) system preference → (else) OS default ───
+  // Restore a previously imported custom theme first (fast path: compiled CSS, no format module).
+  try {
+    var savedCss = localStorage.getItem(CKEY);
+    if (savedCss) { injectTokens(savedCss); themeJson = JSON.parse(localStorage.getItem(TKEY) || "null"); }
+    var savedLaf = localStorage.getItem(LKEY);
+    if (savedLaf) applyLookAndFeel(JSON.parse(savedLaf), { persist: false });
+  } catch (e) {}
+  // Restore registered fonts (fast path: compiled @font-face CSS, no format module).
+  try {
+    var savedFonts = localStorage.getItem(FCKEY);
+    if (savedFonts) { injectFonts(savedFonts); userFonts = JSON.parse(localStorage.getItem(FKEY) || "[]"); }
+  } catch (e) {}
+  apply();
+  preloadActive();
+  // Re-resolve when the system appearance changes while we're in "auto".
+  if (window.matchMedia) {
+    try {
+      var mq = window.matchMedia("(prefers-color-scheme: dark)");
+      var onSys = function () { if (state.palette === "auto") apply(); };
+      if (mq.addEventListener) mq.addEventListener("change", onSys);
+      else if (mq.addListener) mq.addListener(onSys);
+    } catch (e) {}
+  }
+  // Ask the parent holospace for the OS-wide theme (covers mount-timing for nested apps).
+  if (!isTop) { try { window.parent.postMessage({ type: "holo-theme-hello" }, "*"); } catch (e) {} }
+  // When new child frames load, push the current theme + custom tokens + fonts to them.
+  document.addEventListener("load", function (e) {
+    if (e.target && e.target.tagName === "IFRAME" && e.target.contentWindow) {
+      var w = e.target.contentWindow;
+      try { w.postMessage({ type: "holo-theme", state: state }, "*"); } catch (err) {}
+      var sEl = document.getElementById("holo-theme-tokens");
+      if (sEl && themeJson) { try { w.postMessage({ type: "holo-theme-tokens", css: sEl.textContent, json: themeJson }, "*"); } catch (err) {} }
+      var fEl = document.getElementById("holo-user-fonts");
+      if (fEl && userFonts.length) { try { w.postMessage({ type: "holo-fonts", css: fEl.textContent, list: userFonts }, "*"); } catch (err) {} }
+    }
+  }, true);
+  // ── Built-in Display settings panel — usable from any surface (the OS shell wires a
+  //    button to it). Pure DOM, themed by the very tokens it edits. ────────────────
+  function openSettings() {
+    if (document.getElementById("holo-theme-panel")) { closeSettings(); return; }
+    var css = document.createElement("style");
+    css.id = "holo-theme-panel-css";
+    css.textContent =
+      '#holo-theme-scrim{position:fixed;inset:0;z-index:2147482500;background:#0008;backdrop-filter:blur(2px)}' +
+      '#holo-theme-panel{position:fixed;z-index:2147482600;top:0;right:0;height:100%;width:min(360px,92vw);' +
+      'background:var(--holo-surface,#14161b);color:var(--holo-ink,#e6edf3);border-left:1px solid var(--holo-border,#23272f);' +
+      'box-shadow:-12px 0 40px #0006;display:flex;flex-direction:column;font-family:var(--holo-font-sans);overflow:auto;container-type:inline-size;container-name:holopanel}' +
+      '@container holopanel (max-width:300px){#holo-theme-panel .seg button{flex:1 1 100%}}' +
+      '#holo-theme-panel h2{font-size:var(--holo-text-lg,1.15rem);margin:0;padding:18px 20px;border-bottom:1px solid var(--holo-border,#23272f);display:flex;justify-content:space-between;align-items:center}' +
+      '#holo-theme-panel .grp{padding:16px 20px;border-bottom:1px solid var(--holo-border,#23272f);display:flex;flex-direction:column;gap:10px}' +
+      '#holo-theme-panel label{font-size:var(--holo-text-sm,.85rem);color:var(--holo-ink-dim,#8b949e)}' +
+      '#holo-theme-panel .seg{display:flex;gap:6px;flex-wrap:wrap}' +
+      '#holo-theme-panel .seg button{flex:1 1 auto;min-height:40px;border:1px solid var(--holo-border,#23272f);background:transparent;color:inherit;border-radius:10px;cursor:pointer;font:inherit;font-size:var(--holo-text-sm,.85rem)}' +
+      '#holo-theme-panel .seg button[aria-pressed="true"]{background:var(--holo-accent,#5b8cff);color:var(--holo-accent-ink,#fff);border-color:transparent}' +
+      '#holo-theme-panel input[type=range]{width:100%}' +
+      '#holo-theme-panel select,#holo-theme-panel input[type=color]{width:100%;min-height:40px;background:var(--holo-surface-2,#181b21);color:inherit;border:1px solid var(--holo-border,#23272f);border-radius:10px;padding:0 10px;font:inherit}' +
+      '#holo-theme-panel .x{min-width:40px;min-height:40px;border:0;background:transparent;color:inherit;font-size:1.3rem;cursor:pointer}' +
+      '#holo-theme-panel .sample{font-size:var(--holo-text,1rem);line-height:1.5}' +
+      '#holo-theme-panel .reset{margin:16px 20px;min-height:44px;border:1px solid var(--holo-border,#23272f);background:transparent;color:inherit;border-radius:10px;cursor:pointer;font:inherit}';
+    document.head.appendChild(css);
+    var scrim = el("div", { id: "holo-theme-scrim" });
+    scrim.onclick = closeSettings;
+    var lastFocus = document.activeElement;   // restored on close (WCAG 2.4.3)
+    var p = el("aside", { id: "holo-theme-panel", role: "dialog", "aria-modal": "true", "aria-labelledby": "holo-theme-title", tabindex: "-1" });
+    var seg = function (label, opts, cur, on) {
+      var g = el("div", { class: "grp" }); g.appendChild(el("label", {}, label));
+      var s = el("div", { class: "seg" });
+      opts.forEach(function (o) {
+        var b = el("button", { "aria-pressed": String(o[1] === cur) }, o[0]);
+        b.onclick = function () { on(o[1]); refresh(); };
+        s.appendChild(b);
+      });
+      g.appendChild(s); return g;
+    };
+    function refresh() {
+      // re-render by closing + reopening keeps it tiny; state already applied live.
+      var sc = p.scrollTop; p.innerHTML = ""; build(); p.scrollTop = sc; p.focus();
+    }
+    function build() {
+      var head = el("h2", { id: "holo-theme-title" }, "Holo UI");
+      var x = el("button", { class: "x", "aria-label": "Close" }, "×"); x.onclick = closeSettings;
+      head.appendChild(x); p.appendChild(head);
+      p.appendChild(seg("Appearance", [["Auto", "auto"], ["Light", "light"], ["Dark", "dark"]], state.palette, function (v) { setPalette(v); }));
+      p.appendChild(seg("Mode", [["Standard", "standard"], ["Immersive", "immersive"]], state.presentation, function (v) { setPresentation(v); }));
+      // Immersive backdrop — the κ-sealed wallpaper layer (the curated picker lands in the shell
+      // Settings · Appearance section; this is the engine-level on/off the boot bootstrap reads).
+      p.appendChild(seg("Immersive backdrop", [["Off", "off"], ["On", "on"]], state.immersive ? "on" : "off", function (v) { setImmersive(v === "on"); }));
+      // Text size
+      var gT = el("div", { class: "grp" });
+      gT.appendChild(el("label", {}, "Text size — " + Math.round(state.fontScale * 100) + "%"));
+      var rng = el("input", { type: "range", min: "0.85", max: "1.4", step: "0.05", value: String(state.fontScale) });
+      rng.oninput = function () { setFontScale(this.value); gT.firstChild.textContent = "Text size — " + Math.round(state.fontScale * 100) + "%"; };
+      gT.appendChild(rng);
+      gT.appendChild(el("div", { class: "sample" }, "The quick brown fox jumps over the lazy dog."));
+      p.appendChild(gT);
+      // Minimum text size — the readability FLOOR. No text rendered through the OS tokens
+      // (the type ramp, form controls, base text) can fall below this. "Off" restores the raw ramp.
+      p.appendChild(seg("Minimum text size", [["Off", 0], ["14", 14], ["16", 16], ["18", 18], ["20", 20]],
+        state.fontMin, function (v) { setFontMin(v); }));
+      // Typeface — built-in presets + every registered (imported / library) font.
+      var gF = el("div", { class: "grp" });
+      gF.appendChild(el("label", {}, "Typeface"));
+      var sel = el("select", {});
+      sel.appendChild(el("option", { value: "" }, "OS default"));
+      Object.keys(FONTS).forEach(function (name) {
+        var o = el("option", { value: FONTS[name] }, name);
+        if (FONTS[name] === state.fontFamily) o.selected = true;
+        sel.appendChild(o);
+      });
+      userFonts.forEach(function (d) {
+        var val = fontStack(d);
+        var o = el("option", { value: val }, d.family + (d.origin === "import" ? " · imported" : ""));
+        if (val === state.fontFamily) o.selected = true;
+        sel.appendChild(o);
+      });
+      sel.onchange = function () { setFontFamily(this.value); };
+      gF.appendChild(sel);
+      gF.appendChild(el("div", { class: "sample" }, "The quick brown fox jumps over the lazy dog. 0123456789"));
+      // Add a font — import ANY WOFF2/WOFF/TTF/OTF; it’s content-addressed and applied
+      // across every holospace instantly (bytes ride inline, so isolation is no barrier).
+      var addRow = el("div", { class: "seg" });
+      var addBtn = el("button", {}, "＋ Add font…");
+      var ffile = el("input", { type: "file", accept: ".woff2,.woff,.ttf,.otf,font/woff2,font/woff,font/ttf,font/otf" }); ffile.style.display = "none";
+      ffile.onchange = function () {
+        var f = ffile.files && ffile.files[0]; if (!f) { return; }
+        addBtn.disabled = true; addBtn.textContent = "Adding…";
+        importFontFile(f).then(function (r) {
+          if (!r.ok) { var b = el("div", {}, "Font import failed: " + ((r.errors || []).join("; ") || "invalid")); b.style.cssText = "color:var(--holo-danger);font-size:var(--holo-text-sm);margin-top:6px"; gF.appendChild(b); addBtn.disabled = false; addBtn.textContent = "＋ Add font…"; }
+          else refresh();
+        });
+        ffile.value = "";
+      };
+      addBtn.onclick = function () { ffile.click(); };
+      addRow.appendChild(addBtn); gF.appendChild(addRow); gF.appendChild(ffile);
+      // Remove imported fonts (catalog fonts are κ-pinned; leave them).
+      var imported = userFonts.filter(function (d) { return d.origin === "import"; });
+      if (imported.length) {
+        var rm = el("div", { class: "seg" });
+        imported.forEach(function (d) {
+          var b = el("button", { title: "Remove " + d.family }, "✕ " + d.family);
+          b.onclick = function () { removeFont(d.family); if (state.fontFamily === fontStack(d)) setFontFamily(""); refresh(); };
+          rm.appendChild(b);
+        });
+        gF.appendChild(rm);
+      }
+      var fhint = el("div", {}, "Drop in any WOFF2/TTF — it’s applied uniformly across the whole OS, instantly.");
+      fhint.style.cssText = "font-size:var(--holo-text-sm,.8rem);color:var(--holo-ink-dim);margin-top:2px"; gF.appendChild(fhint);
+      p.appendChild(gF);
+      // Font library — the κ-pinned catalog (fonts/index.json). One click = add + activate.
+      var gL = el("div", { class: "grp" });
+      gL.appendChild(el("label", {}, "Font library · κ-pinned"));
+      var lib = el("div", { class: "seg" }); gL.appendChild(lib); p.appendChild(gL);
+      lib.appendChild(el("div", {}, "Loading…"));
+      loadCatalog().then(function (cat) {
+        lib.innerHTML = "";
+        var fonts = (cat && cat.fonts) || [];
+        if (!fonts.length) { lib.appendChild(el("div", {}, "—")); return; }
+        fonts.forEach(function (entry) {
+          var have = userFonts.some(function (x) { return x.family === entry.family; });
+          var b = el("button", { "aria-pressed": String(have) }, (have ? "✓ " : "＋ ") + entry.family);
+          b.onclick = function () { addFont(catalogToDesc(entry), { activate: true }).then(function () { refresh(); }); };
+          lib.appendChild(b);
+        });
+      });
+      // Accent
+      var gA = el("div", { class: "grp" });
+      gA.appendChild(el("label", {}, "Accent colour"));
+      var col = el("input", { type: "color", value: toHex(state.accent) || "#5b8cff" });
+      col.oninput = function () { setAccent(this.value); };
+      gA.appendChild(col);
+      p.appendChild(gA);
+      // Enforce on apps
+      p.appendChild(seg("Apply to apps", [["Respect apps", "respect"], ["Enforce OS theme", "enforce"]],
+        state.enforce ? "enforce" : "respect", function (v) { set({ enforce: v === "enforce" }); }));
+      // Theme — create / save / load as a W3C Design Tokens (DTCG) file (shareable).
+      var gM = el("div", { class: "grp" });
+      gM.appendChild(el("label", {}, "Theme · W3C Design Tokens (.json)"));
+      var row = el("div", { class: "seg" });
+      var expBtn = el("button", {}, "⤓ Export");
+      expBtn.onclick = function () {
+        exportTheme().then(function (t) {
+          if (!t) return;
+          var ext = t.$extensions && t.$extensions["org.hologram.theme"];
+          var name = (ext && ext.name) || "hologram";
+          var a = el("a", {});
+          a.href = URL.createObjectURL(new Blob([JSON.stringify(t, null, 2)], { type: "application/json" }));
+          a.download = String(name).toLowerCase().replace(/\s+/g, "-") + ".tokens.json";
+          document.body.appendChild(a); a.click(); a.remove();
+          setTimeout(function () { URL.revokeObjectURL(a.href); }, 2000);
+        });
+      };
+      var impBtn = el("button", {}, "⤒ Import");
+      var file = el("input", { type: "file", accept: ".json,application/json" }); file.style.display = "none";
+      file.onchange = function () {
+        var f = file.files && file.files[0]; if (!f) return;
+        f.text().then(function (txt) {
+          importTheme(txt).then(function (r) {
+            if (!r.ok) { var b = el("div", { class: "themeerr" }, "Import failed: " + ((r.errors || []).join("; ") || "invalid")); b.style.cssText = "color:var(--holo-danger);font-size:var(--holo-text-sm);margin-top:6px"; gM.appendChild(b); }
+            else refresh();
+          });
+        });
+        file.value = "";
+      };
+      impBtn.onclick = function () { file.click(); };
+      var defBtn = el("button", {}, "OS default");
+      defBtn.onclick = function () { clearTheme(); refresh(); };
+      row.appendChild(expBtn); row.appendChild(impBtn); row.appendChild(defBtn);
+      gM.appendChild(row); gM.appendChild(file);
+      var hint = el("div", {}, "Adjust the controls above, then Export to save & share your theme — or Import one.");
+      hint.style.cssText = "font-size:var(--holo-text-sm,.8rem);color:var(--holo-ink-dim);margin-top:2px"; gM.appendChild(hint);
+      // The canonical, full appearance surface is Holo Control (the Holo UI app's Appearance panel):
+      // themes + accent + typography + accessibility + import/fork, all live. This quick panel stays for
+      // fast in-place tweaks; the button below opens the complete control panel (ADR-0079).
+      var browse = el("button", {}, "🎚 Open Holo Control — full appearance settings");
+      browse.style.cssText = "margin-top:8px;min-height:40px;border:1px solid var(--holo-border);background:transparent;color:inherit;border-radius:10px;cursor:pointer;font:inherit;font-size:var(--holo-text-sm)";
+      browse.onclick = function () { try { window.open(SHARED + "../apps/ui/index.html#appearance", "_blank"); } catch (e) {} };
+      gM.appendChild(browse);
+      p.appendChild(gM);
+      var reset = el("button", { class: "reset" }, "Reset to defaults"); reset.onclick = function () { resetAll(); clearTheme(); refresh(); };
+      p.appendChild(reset);
+    }
+    build();
+    document.body.appendChild(scrim);
+    document.body.appendChild(p);
+    // ARIA modal behaviour (WCAG 2.1.2 / 2.4.3 / 4.1.2): focus in, trap Tab, Escape closes.
+    var focusables = function () { return p.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); };
+    (focusables()[0] || p).focus();
+    p.__lastFocus = lastFocus;
+    p.__onkey = function (e) {
+      if (e.key === "Escape") { e.preventDefault(); closeSettings(); return; }
+      if (e.key !== "Tab") return;
+      var f = focusables(); if (!f.length) return;
+      var first = f[0], last = f[f.length - 1];
+      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+    };
+    document.addEventListener("keydown", p.__onkey, true);
+  }
+  function closeSettings() {
+    var p = document.getElementById("holo-theme-panel");
+    if (p && p.__onkey) document.removeEventListener("keydown", p.__onkey, true);
+    ["holo-theme-panel", "holo-theme-scrim", "holo-theme-panel-css"].forEach(function (id) {
+      var n = document.getElementById(id); if (n) n.remove();
+    });
+    if (p && p.__lastFocus && p.__lastFocus.focus) { try { p.__lastFocus.focus(); } catch (e) {} }
+  }
+  function el(tag, attrs, text) {
+    var n = document.createElement(tag);
+    if (attrs) for (var k in attrs) n.setAttribute(k, attrs[k]);
+    if (text != null) n.textContent = text;
+    return n;
+  }
+  function toHex(c) { return /^#[0-9a-f]{6}$/i.test(c || "") ? c : ""; }
+  // Resolve an immersive wallpaper reference to a URL: a κ (sha256:/blake3:/sha512:<hex>)
+  // becomes the serverless κ-store path /.holo/<algo>/<hex> (re-derived on fetch, Law L5);
+  // anything else (a path, data: URL) is used verbatim.
+  function wallUrl(w) {
+    if (!w) return "";
+    var m = String(w).match(/^(sha256|blake3|sha512):([0-9a-f]+)$/i);
+    return m ? "/.holo/" + m[1].toLowerCase() + "/" + m[2] : String(w);
+  }
+  // ── Public API ───────────────────────────────────────────────────────────────
+  function setPalette(v) { set({ palette: v }); }
+  function setPresentation(v) { set({ presentation: v }); }
+  function setImmersive(on) { set({ immersive: !!on }); }
+  function setWallpaper(k) { set({ wallpaper: k || "" }); }
+  // The one user-facing appearance choice (Settings · login picker): Dark · Light · Immersive.
+  // Dark/Light pin the palette and drop the backdrop; Immersive turns the backdrop on and keeps
+  // the current palette (a light OR dark immersive backdrop both read well behind the scrim).
+  function setMode(m) {
+    if (m === "light") set({ palette: "light", immersive: false });
+    else if (m === "dark") set({ palette: "dark", immersive: false });
+    else if (m === "immersive") set({ immersive: true });
+  }
+  function setFontScale(n) { set({ fontScale: clamp(n, 0.7, 2) }); }
+  function setFontMin(n) { set({ fontMin: clamp(n, 0, 28) }); }     // readability floor in px (0 = off)
+  function setFontFamily(f) { set({ fontFamily: f || "" }); }
+  function setDensity(n) { set({ density: clamp(n, 0.7, 1.4) }); }
+  function setAccent(c) { set({ accent: c || "" }); }
+  function resetAll() { state = Object.assign({}, DEFAULTS); apply(); write(state); broadcastDown(); }
+  window.HoloTheme = {
+    get: function () { return Object.assign({}, state); },
+    set: set, setPalette: setPalette, setPresentation: setPresentation,
+    setImmersive: setImmersive, setWallpaper: setWallpaper, setMode: setMode,
+    setFontScale: setFontScale, setFontMin: setFontMin, setFontFamily: setFontFamily, setDensity: setDensity,
+    setAccent: setAccent, reset: resetAll, openSettings: openSettings, closeSettings: closeSettings,
+    // Portable themes (DTCG): import a token file/object, export the current theme, clear back to OS default.
+    importTheme: importTheme, exportTheme: exportTheme, clearTheme: clearTheme,
+    getThemeJson: function () { return themeJson ? JSON.parse(JSON.stringify(themeJson)) : null; },
+    // κ-addressed theme catalog: list the content-addressed DTCG themes, and swap to one by κ (or name).
+    // setThemeByKappa re-derives sha256 and refuses on mismatch (Law L5) before applying — live, OS-wide.
+    listThemes: listThemes, setTheme: setTheme, setThemeByKappa: setThemeByKappa, activeThemeKappa: activeThemeKappa,
+    setVar: function (name, val) { setVar(name, val); root.dispatchEvent(new CustomEvent("holo-theme-change", { detail: state, bubbles: false })); },
+    // Global Theme (KDE Look-and-Feel package adopted as one κ-object): import flows through
+    // importTheme, then surfaces the look-and-feel block (icons/decoration/layout/splash) to the shell.
+    applyGlobalTheme: applyGlobalTheme,
+    getLookAndFeel: function () { return lookAndFeel ? JSON.parse(JSON.stringify(lookAndFeel)) : null; },
+    // Fonts as first-class citizens: import a file (data: URL), add a descriptor, or pull from
+    // the κ-pinned library — each propagates @font-face across every isolated holospace.
+    importFontFile: importFontFile, addFont: addFont, removeFont: removeFont,
+    loadFontCatalog: loadCatalog, getFonts: function () { return JSON.parse(JSON.stringify(userFonts)); },
+    FONTS: FONTS, policy: policy
+  };
+})();

sha256/a0ebbc696bda5154727b76b42c11921231cbc652de3e705dd6b632456e6f34aa ADDED Viewed

	@@ -0,0 +1,143 @@

+// teleport.js — ONE reusable Share affordance for every hologram page.
+//
+// Drop-in, zero config:   <script src="teleport.js" defer></script>
+//
+// It gives the page a floating "Share" button that builds a TELEPORT LINK — a
+// single URL that, opened on ANY device, boots the hologram environment (the
+// browser everyone already has) and lands on this exact content. No install, no
+// server. The link is handed to the OS share sheet via the W3C Web Share API
+// (navigator.share), with a clipboard fallback on desktop browsers that lack it.
+//
+// Content-addressed (#k=):  if the page knows its κ — via
+//     <meta name="holo-kappa" content="blake3:…">  or  HoloTeleport.stamp("blake3:…")
+// — the link carries  #k=<κ>  so the content is identified by its hash, not just
+// its location. Opening such a link shows a provenance chip; a page that can hand
+// us the exact bytes (HoloTeleport.verifyAgainst) gets a TRUE re-derivation check
+// (Law L5): a ✓ only when the re-derived κ equals the pinned one — never faked.
+//
+// κ is computed by the app's own wasm (blake3, identical to the native κ-store)
+// when present, else SHA-256 via Web Crypto — the prefix (blake3:/sha256:) always
+// names the algorithm, so nothing is ever mislabelled.
+(function () {
+  "use strict";
+  const W = window;
+  if (W.HoloTeleport) return;
+  const metaOf = (n) => {
+    const e = document.querySelector(`meta[name="${n}"]`) || document.querySelector(`meta[property="${n}"]`);
+    return e ? (e.getAttribute("content") || "") : "";
+  };
+  let pageKappa = metaOf("holo-kappa") || "";   // optional content hash for this page
+  // ── teleport-link builder ────────────────────────────────────────────────
+  // Host-agnostic: uses location.origin, so it works on localhost today and on a
+  // real host (e.g. GitHub Pages) the moment you publish — same code.
+  function link(opts) {
+    opts = opts || {};
+    const base = location.origin + location.pathname + (opts.search != null ? opts.search : location.search);
+    const k = opts.kappa || pageKappa;
+    return base + (k ? "#k=" + encodeURIComponent(k) : (opts.keepHash === false ? "" : location.hash || ""));
+  }
+  const titleOf = () => (document.title || "hologram").replace(/\s+—\s+holospaces$/i, "") + " · on hologram";
+  const textOf = () =>
+    metaOf("description") || metaOf("og:description") ||
+    "Opens on any device — boots hologram and this content, verified by its content hash. No install.";
+  // ── share: OS sheet via Web Share, clipboard fallback ────────────────────
+  async function share(opts) {
+    const url = link(opts);
+    const data = { title: (opts && opts.title) || titleOf(), text: (opts && opts.text) || textOf(), url };
+    try {
+      if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
+        await navigator.share(data); toast("Shared."); return url;
+      }
+    } catch (e) { if (e && e.name === "AbortError") return url; }
+    try { await navigator.clipboard.writeText(url); toast("Teleport link copied — paste it anywhere."); }
+    catch { W.prompt && W.prompt("Teleport link:", url); }
+    return url;
+  }
+  // ── κ helpers — blake3 via the app wasm, else SHA-256 ────────────────────
+  let _wasm; // memoised import
+  async function kappaOf(bytes) {
+    const u8 = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
+    try {
+      if (_wasm === undefined) { _wasm = null; const m = await import("./pkg/holospaces_web.js").catch(() => null); if (m) { if (m.default) await m.default(); _wasm = m; } }
+      if (_wasm && _wasm.kappa) { const k = _wasm.kappa(u8); return k.includes(":") ? k : "blake3:" + k; }
+    } catch {}
+    try {
+      const d = await crypto.subtle.digest("SHA-256", u8);
+      return "sha256:" + Array.from(new Uint8Array(d), (b) => b.toString(16).padStart(2, "0")).join("");
+    } catch { return ""; }
+  }
+  // TRUE verification: re-derive the κ of the given bytes and compare to want.
+  async function verifyAgainst(want, bytes) {
+    if (!want) return false;
+    const got = await kappaOf(bytes);
+    const ok = !!got && got === want;
+    chip(ok ? "✓ verified genuine · " + shortK(want) : "κ mismatch — refused (content ≠ shared hash)", ok ? "ok" : "bad");
+    return ok;
+  }
+  const shortK = (k) => { const [a, h] = String(k).split(":"); return h ? a + ":" + h.slice(0, 12) + "…" : String(k).slice(0, 16) + "…"; };
+  // ── on open: surface #k= provenance, then TRY a real re-derivation check ──
+  // Convention: on teleport.js pages, #k= is THIS page's content κ. So we can
+  // refetch the page bytes and re-derive — a ✓ only on a true match (Law L5),
+  // a refusal banner on mismatch. If the bytes aren't fetchable we leave the
+  // neutral provenance chip rather than claim anything.
+  async function onOpen() {
+    const h = new URLSearchParams((location.hash || "").replace(/^#/, ""));
+    const k = h.get("k");
+    if (!k) return;
+    const want = decodeURIComponent(k);
+    chip("content-addressed · κ " + shortK(want), "info");
+    try {
+      const buf = await (await fetch(location.pathname, { cache: "no-store" })).arrayBuffer();
+      const got = await kappaOf(new Uint8Array(buf));
+      if (got && got === want) chip("✓ verified genuine · κ " + shortK(want), "ok");
+      else if (got && want.split(":")[0] === got.split(":")[0]) chip("κ mismatch — content differs from the shared hash", "bad");
+    } catch { /* opaque/cross-origin — keep the neutral provenance chip */ }
+  }
+  // ── UI: floating Share button + toast + provenance chip (self-contained) ──
+  function injectStyle() {
+    if (document.getElementById("holo-teleport-css")) return;
+    const s = document.createElement("style"); s.id = "holo-teleport-css";
+    s.textContent = `
+      #holo-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:2147483001;max-width:88vw;
+        background:#11181c;color:#e6edf3;border:1px solid #243038;border-radius:10px;padding:10px 14px;font:var(--holo-text-sm, 1rem) system-ui;
+        box-shadow:0 12px 36px rgba(0,0,0,.5);opacity:0;transition:opacity .18s;pointer-events:none}
+      #holo-toast.in{opacity:1}
+      #holo-chip{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:2147483001;
+        background:#0d1117ee;border:1px solid #243038;border-radius:999px;padding:6px 13px;font:var(--holo-text-sm, 1rem)/1.2 ui-monospace,monospace;
+        color:#9fb0bd;backdrop-filter:blur(6px)}
+      #holo-chip.ok{border-color:#2dd4bf;color:#7defc9} #holo-chip.bad{border-color:#f87171;color:#fca5a5}`;
+    document.head.appendChild(s);
+  }
+  // (No auto-injected floating "Share" button — removed by request. Sharing remains
+  // available programmatically via HoloTeleport.share(); the #k= provenance chip and
+  // Law-L5 re-derivation are unaffected.)
+  let toastT;
+  function toast(m) {
+    injectStyle(); let t = document.getElementById("holo-toast");
+    if (!t) { t = document.createElement("div"); t.id = "holo-toast"; document.body.appendChild(t); }
+    t.textContent = m; requestAnimationFrame(() => t.classList.add("in"));
+    clearTimeout(toastT); toastT = setTimeout(() => t.classList.remove("in"), 3600);
+  }
+  function chip(m, kind) {
+    injectStyle(); let c = document.getElementById("holo-chip");
+    if (!c) { c = document.createElement("div"); c.id = "holo-chip"; document.body.appendChild(c); }
+    c.className = kind || "info"; c.textContent = m;
+  }
+  function boot() { injectStyle(); onOpen(); }
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
+  else boot();
+  W.HoloTeleport = {
+    link, share, kappaOf, verifyAgainst,
+    stamp: (k) => { pageKappa = k || ""; },     // page declares its content hash
+    toast, chip,
+  };
+})();

sha256/b2bfa104b9ee8e3bb631dcd0ec0e6f7017b8898c4304666f5b3dfeeebc926eb9 ADDED Viewed

	@@ -0,0 +1,127 @@

+/* holo-mobile.css — the Hologram mobile conformance layer.
+ *
+ * One stylesheet every holospace links. It does NOT theme apps — they keep their
+ * own colors and feel. It enforces the mobile *mechanics* that must be standard on
+ * every screen: no horizontal overflow, safe-area insets, ≥48px tap targets, and
+ * 16px form controls (no iOS auto-zoom). The spec is WCAG 2.2 (§1.4.10 Reflow,
+ * §2.5.8 Target Size) + Material Design 3 (48dp). Conformance is enforced by
+ * mobile-conformance-witness.mjs (the gate), not by this file alone.
+ *
+ * Specificity discipline: structural defaults use :where() (specificity 0) so any
+ * app rule overrides them freely. This layer is loaded AFTER each page's own styles.
+ * Deliberately NO `overflow-x:clip` backstop — clipping would hide overflow from the
+ * witness and let real violations pass. Overflow is fixed at the cause, not masked.
+ */
+:root {
+  /* Safe-area insets (notch / home indicator). 0 on devices without them. */
+  --safe-t: env(safe-area-inset-top, 0px);
+  --safe-r: env(safe-area-inset-right, 0px);
+  --safe-b: env(safe-area-inset-bottom, 0px);
+  --safe-l: env(safe-area-inset-left, 0px);
+  /* Shared tokens — consistency without dictating color. Apps map these to brand. */
+  --holo-tap: 48px;                 /* Material Design 3 minimum touch target */
+  --holo-space-1: 4px;  --holo-space-2: 8px;  --holo-space-3: 12px;
+  --holo-space-4: 16px; --holo-space-5: 24px; --holo-space-6: 32px;   /* 8px grid */
+  --holo-radius-sm: 8px; --holo-radius: 12px; --holo-radius-lg: 16px;
+  /* Fluid type scale (clamps to the viewport; readable floor, sane ceiling). Authored
+   * in rem — NOT px — so the whole ramp scales from the OS text-size lever
+   * (--holo-font-scale → root font-size; see holo-theme.css). 1rem = 16px at base.
+   * The sub-1rem steps clamp UP to the readability floor (--holo-font-min, default 16px,
+   * set by the engine) with max(), so caption/label text can never render too small to read;
+   * -lg/-xl already exceed the floor so the hierarchy above it is preserved. */
+  --holo-text-sm: max(var(--holo-font-min, 16px), clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem));
+  --holo-text: max(var(--holo-font-min, 16px), clamp(0.9375rem, 0.9rem + 0.3vw, 1rem));
+  --holo-text-lg: clamp(1.125rem, 1.0rem + 0.6vw, 1.3125rem);
+  --holo-text-xl: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem);
+}
+/* ── Global guards (safe on every page) ─────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+/* Replaced/wide elements must never force the page wider than the viewport. */
+:where(img, svg, video, canvas, iframe, table) { max-width: 100%; }
+:where(pre, code) { overflow-wrap: anywhere; }
+/* ── Tap targets — WCAG 2.5.8 + MD3 48px floor (low specificity = app-overridable). */
+:where(button, [role="button"], a.btn, .btn, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, summary) {
+  min-height: var(--holo-tap);
+}
+/* Buttons (incl. icon-only) also meet the 48px width floor by default. */
+:where(button, [role="button"], a.btn, .btn, summary) { min-width: var(--holo-tap); }
+/* Escape hatch for genuinely-dense, essential chrome where 48px is impractical
+ * (status bars, emulator window controls) — WCAG 2.5.8 allows such exceptions.
+ * The conformance witness skips tap-size checks inside `.holo-dense`. Use sparingly. */
+:where(.holo-dense) :where(button, [role="button"], a.btn) { min-width: 0; min-height: 0; }
+/* ── Form controls — readability floor (≥16px) also stops iOS auto-zoom on focus. ── */
+:where(input, select, textarea) { font-size: max(var(--holo-font-min, 16px), 1rem); }
+/* ── Safe-area variables exposed for adoption. Applied generically to the body so
+ *    content clears the notch/home-indicator; bespoke fixed bars opt in via the
+ *    utility classes below (env() on a bar's own padding is overridden by the app's
+ *    padding rule, so we keep this best-effort + opt-in rather than fighting apps). */
+:where(body) { padding-left: var(--safe-l); padding-right: var(--safe-r); }
+.holo-safe-top { padding-top: max(var(--holo-space-2), var(--safe-t)); }
+.holo-safe-bottom { padding-bottom: max(var(--holo-space-2), var(--safe-b)); }
+/* ── Adopt-in primitives — the standard way to present these elements ───────── */
+/* A top app bar that never overflows: brand stays put, the rest can shrink/scroll. */
+.holo-appbar {
+  display: flex; align-items: center; gap: var(--holo-space-3);
+  padding: max(var(--holo-space-2), var(--safe-t)) var(--holo-space-4) var(--holo-space-2);
+  min-height: var(--holo-tap);
+}
+.holo-appbar > .brand, .holo-appbar > :first-child { flex: 0 0 auto; min-width: 0; }
+.holo-appbar > .grow { flex: 1 1 auto; min-width: 0; }
+/* A horizontally scrollable chip/meta row — scrolls instead of clipping (the fix
+ * for the Linux/QVAC header chips). Momentum scroll, no visible scrollbar. */
+.holo-scroll-x {
+  display: flex; flex-wrap: nowrap; gap: var(--holo-space-2);
+  overflow-x: auto; -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; min-width: 0; max-width: 100%;
+}
+.holo-scroll-x::-webkit-scrollbar { display: none; }
+.holo-scroll-x > * { flex: 0 0 auto; }
+/* Long unbroken strings (hashes, κ ids, URLs) wrap instead of widening the page. */
+.holo-break { overflow-wrap: anywhere; word-break: break-word; }
+/* ════════════════════════════════════════════════════════════════════════════════
+ * CONTAINER-QUERY WINDOW-SIZE CLASSES — Material Design 3 adaptive layout.
+ *
+ * A Holo app renders INSIDE a window/iframe, not at the device viewport — so its
+ * responsiveness must key on the app's OWN width, not the screen. We establish the app
+ * surface as a named container (`holoapp`) and expose MD3 window-size classes
+ * (Compact <600 · Medium 600–839 · Expanded ≥840) as @container queries + a --holo-size
+ * token. The SAME app is therefore Compact whether maximized on a phone OR floated in a
+ * small desktop window — one rule, every context, no per-app viewport breakpoints. The
+ * host marks the surface with [data-holo-surface] (the shell run-injection · the scaffold
+ * template · holo-embed · the Service Worker for standalone-served apps); OS chrome never
+ * sets it, so this whole block is inert there.
+ *
+ * PWA: combined with viewport-fit=cover + the env() safe-areas above, this is exactly
+ * what an installed display:standalone PWA needs — the layer makes an app correct in a
+ * browser tab AND installed to the home screen, with no app-specific work.
+ * ──────────────────────────────────────────────────────────────────────────────── */
+:where(html[data-holo-surface]) { container: holoapp / inline-size; --holo-size: expanded; }
+/* body INHERITS the default expanded; the @container rules set --holo-size DIRECTLY on body — a declared
+ * value beats an inherited one even at :where() specificity 0, so the narrower class wins when the
+ * container matches, without out-specifying the app. Read the class as var(--holo-size). */
+@container holoapp (max-width: 839.98px) { :where(body) { --holo-size: medium; } }
+@container holoapp (max-width: 599.98px) { :where(body) { --holo-size: compact; } }
+/* Opt-in adaptive utilities — declarative Compact behavior keyed to the CONTAINER, so an
+ * app reflows correctly in a small window or on a phone without authoring breakpoints. */
+.holo-cq-cols { display: grid; gap: var(--holo-space-3);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }   /* multi-col → single col when narrow */
+@container holoapp (max-width: 599.98px) {
+  .holo-cq-row { flex-direction: column; align-items: stretch; }   /* a horizontal row stacks when Compact */
+  .holo-hide-compact { display: none !important; }                 /* drop secondary chrome on a phone-class surface */
+}
+@container holoapp (min-width: 600px) {
+  .holo-show-compact { display: none !important; }                 /* Compact-only affordances hide when roomy */
+}

sha256/c4414e9c61a6ae6b8c19145dddbbe24c68bea83784666434a94cf033b06cc483 ADDED Viewed

	@@ -0,0 +1,384 @@

+/* Holo Theme (holo-theme.css) — the Hologram OS theming kernel. Companion to holo-mobile.css:
+ * that file enforces mobile *mechanics*; this one defines the *visual language*
+ * (palette, typography, density) as a runtime contract every holospace can adopt.
+ *
+ * 100% W3C standards-track — NO framework, NO build tool is the source of truth:
+ *   • CSS Custom Properties for Cascading Variables L1   — the tokens
+ *   • CSS Properties and Values API (@property)          — the typed token schema
+ *   • CSS Cascading & Inheritance L5 (@layer)            — OS / app / user precedence
+ *   • CSS Color 4 + Color Adjustment L1 (light-dark())   — light & dark in one value
+ *   • Media Queries L5 (prefers-*)                        — honor system + a11y defaults
+ *
+ * The theme PAYLOAD is this file; the theme IDENTITY is its κ (sha256 + JSON-LD + SRI
+ * + did:holo:, emitted by build-holo-site.mjs per ADR-022). Switched live by
+ * holo-theme.js over the postMessage iframe tree. Gated by theme-conformance-witness.mjs.
+ *
+ * Precedence (last @layer wins): an app's UNLAYERED rules beat any layer here, so an
+ * app keeps its own look by simply declaring its own values ("own"). An app that does
+ * NOT declare a token falls through to the OS value ("adopt"). The user always wins for
+ * accessibility because holo-theme.js applies font-scale/density as INLINE custom
+ * properties on :root (author inline beats stylesheet rules; enforce-os adds !important).
+ */
+@layer hos-base, hos-os, app, hos-user;
+/* ── Typed token schema (W3C @property) — gives tokens a type, an initial value, and
+ *    inheritance without any JSON format or compiler. Invalid values are ignored. ─── */
+@property --holo-font-scale { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --holo-density    { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --holo-accent     { syntax: "<color>";  inherits: true; initial-value: #5b8cff; }
+/* Minimum text size — the readability FLOOR (default 16px). Set live by the engine on :root;
+ * the type ramp (holo-mobile.css) and the root font-size below clamp UP to it with max(), so no
+ * OS/app text rendered through the tokens can fall below it. 0 = off (restore the raw ramp). */
+@property --holo-font-min   { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@layer hos-os {
+  :root {
+    /* Enable light-dark(); palette attribute (set by the engine) pins one mode. */
+    color-scheme: light dark;
+    /* ── Typography — the OS-settable type system (Hologram OS › Settings › Display).
+     *    --holo-font-scale drives the ROOT font-size, so every rem-based size and the
+     *    --holo-text* ramp (holo-mobile.css, authored in rem) scale from ONE lever. */
+    --holo-font-scale: 1;                         /* 0.85 … 1.4, set live by the engine */
+    /* Default OS typeface: Helvetica Neue (the iPhone's face) — a system font on Apple
+     * devices; falls back to Helvetica/Arial elsewhere. (Not vendored; it's proprietary.) */
+    --holo-font-sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
+    --holo-font-serif: ui-serif, Georgia, "Times New Roman", serif;
+    --holo-font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
+    /* ── Density — multiplies UI spacing; immersive mode tightens it. */
+    --holo-density: 1;
+    /* Focus ring width (WCAG 2.4.7/2.4.13); bumped under prefers-contrast. */
+    --holo-focus-width: 3px;
+        /* ── Palette (Chakra-derived, ADR) — core neutrals rebased onto Chakra's zinc ramp so every
+     *    vendored shadcn/Magic UI component renders on the palette it was designed for, while the
+     *    Holo brand accent is preserved. light & dark in one value (CSS Color Adjustment L1). */
+    --holo-bg:         light-dark(#fafafa, #09090B);
+    --holo-surface:    light-dark(#FFFFFF, #111111);
+    --holo-surface-2:  light-dark(#f4f4f5, #18181b);
+    --holo-surface-emphasized: light-dark(#e4e4e7, #27272a);
+    --holo-border:     light-dark(#e4e4e7, #27272a);
+    --holo-border-subtle:     light-dark(#f4f4f5, #18181b);
+    --holo-border-emphasized: light-dark(#d4d4d8, #3f3f46);
+    --holo-ink:        light-dark(#18181b, #fafafa);
+    --holo-ink-dim:    light-dark(#71717a, #a1a1aa);
+    --holo-ink-subtle: light-dark(#a1a1aa, #71717a);
+    --holo-accent:     light-dark(#3b5bdb, #5b8cff);   /* Holo brand — preserved */
+    --holo-accent-ink: #ffffff;
+    --holo-ok:         light-dark(#16a34a, #22c55e);
+    --holo-warn:       light-dark(#ea580c, #f97316);
+    --holo-danger:     light-dark(#dc2626, #ef4444);
+    /* Derived surface tints — Color 4 color-mix(), no extra tokens to maintain. */
+    --holo-accent-soft: color-mix(in srgb, var(--holo-accent) 16%, transparent);
+    --holo-hover:       color-mix(in srgb, var(--holo-ink) 8%, transparent);
+    /* ── Chakra-derived foundation (ramps + scales) — additive, content-addressed theme system. */
+    /* color ramps — Chakra's tuned hues, available to every app (charts, status, colorPalette). */
+    --holo-white: #FFFFFF;  --holo-black: #09090B;
+    /* gray */
+    --holo-gray-50: #fafafa;
+    --holo-gray-100: #f4f4f5;
+    --holo-gray-200: #e4e4e7;
+    --holo-gray-300: #d4d4d8;
+    --holo-gray-400: #a1a1aa;
+    --holo-gray-500: #71717a;
+    --holo-gray-600: #52525b;
+    --holo-gray-700: #3f3f46;
+    --holo-gray-800: #27272a;
+    --holo-gray-900: #18181b;
+    --holo-gray-950: #111111;
+    /* red */
+    --holo-red-50: #fef2f2;
+    --holo-red-100: #fee2e2;
+    --holo-red-200: #fecaca;
+    --holo-red-300: #fca5a5;
+    --holo-red-400: #f87171;
+    --holo-red-500: #ef4444;
+    --holo-red-600: #dc2626;
+    --holo-red-700: #991919;
+    --holo-red-800: #511111;
+    --holo-red-900: #300c0c;
+    --holo-red-950: #1f0808;
+    /* orange */
+    --holo-orange-50: #fff7ed;
+    --holo-orange-100: #ffedd5;
+    --holo-orange-200: #fed7aa;
+    --holo-orange-300: #fdba74;
+    --holo-orange-400: #fb923c;
+    --holo-orange-500: #f97316;
+    --holo-orange-600: #ea580c;
+    --holo-orange-700: #92310a;
+    --holo-orange-800: #6c2710;
+    --holo-orange-900: #3b1106;
+    --holo-orange-950: #220a04;
+    /* yellow */
+    --holo-yellow-50: #fefce8;
+    --holo-yellow-100: #fef9c3;
+    --holo-yellow-200: #fef08a;
+    --holo-yellow-300: #fde047;
+    --holo-yellow-400: #facc15;
+    --holo-yellow-500: #eab308;
+    --holo-yellow-600: #ca8a04;
+    --holo-yellow-700: #845209;
+    --holo-yellow-800: #713f12;
+    --holo-yellow-900: #422006;
+    --holo-yellow-950: #281304;
+    /* green */
+    --holo-green-50: #f0fdf4;
+    --holo-green-100: #dcfce7;
+    --holo-green-200: #bbf7d0;
+    --holo-green-300: #86efac;
+    --holo-green-400: #4ade80;
+    --holo-green-500: #22c55e;
+    --holo-green-600: #16a34a;
+    --holo-green-700: #116932;
+    --holo-green-800: #124a28;
+    --holo-green-900: #042713;
+    --holo-green-950: #03190c;
+    /* teal */
+    --holo-teal-50: #f0fdfa;
+    --holo-teal-100: #ccfbf1;
+    --holo-teal-200: #99f6e4;
+    --holo-teal-300: #5eead4;
+    --holo-teal-400: #2dd4bf;
+    --holo-teal-500: #14b8a6;
+    --holo-teal-600: #0d9488;
+    --holo-teal-700: #0c5d56;
+    --holo-teal-800: #114240;
+    --holo-teal-900: #032726;
+    --holo-teal-950: #021716;
+    /* blue */
+    --holo-blue-50: #eff6ff;
+    --holo-blue-100: #dbeafe;
+    --holo-blue-200: #bfdbfe;
+    --holo-blue-300: #a3cfff;
+    --holo-blue-400: #60a5fa;
+    --holo-blue-500: #3b82f6;
+    --holo-blue-600: #2563eb;
+    --holo-blue-700: #173da6;
+    --holo-blue-800: #1a3478;
+    --holo-blue-900: #14204a;
+    --holo-blue-950: #0c142e;
+    /* cyan */
+    --holo-cyan-50: #ecfeff;
+    --holo-cyan-100: #cffafe;
+    --holo-cyan-200: #a5f3fc;
+    --holo-cyan-300: #67e8f9;
+    --holo-cyan-400: #22d3ee;
+    --holo-cyan-500: #06b6d4;
+    --holo-cyan-600: #0891b2;
+    --holo-cyan-700: #0c5c72;
+    --holo-cyan-800: #134152;
+    --holo-cyan-900: #072a38;
+    --holo-cyan-950: #051b24;
+    /* purple */
+    --holo-purple-50: #faf5ff;
+    --holo-purple-100: #f3e8ff;
+    --holo-purple-200: #e9d5ff;
+    --holo-purple-300: #d8b4fe;
+    --holo-purple-400: #c084fc;
+    --holo-purple-500: #a855f7;
+    --holo-purple-600: #9333ea;
+    --holo-purple-700: #641ba3;
+    --holo-purple-800: #4a1772;
+    --holo-purple-900: #2f0553;
+    --holo-purple-950: #1a032e;
+    /* pink */
+    --holo-pink-50: #fdf2f8;
+    --holo-pink-100: #fce7f3;
+    --holo-pink-200: #fbcfe8;
+    --holo-pink-300: #f9a8d4;
+    --holo-pink-400: #f472b6;
+    --holo-pink-500: #ec4899;
+    --holo-pink-600: #db2777;
+    --holo-pink-700: #a41752;
+    --holo-pink-800: #6d0e34;
+    --holo-pink-900: #45061f;
+    --holo-pink-950: #2c0514;
+    /* alpha ramps */
+    --holo-whiteAlpha-50: rgba(255, 255, 255, 0.04);
+    --holo-whiteAlpha-100: rgba(255, 255, 255, 0.06);
+    --holo-whiteAlpha-200: rgba(255, 255, 255, 0.08);
+    --holo-whiteAlpha-300: rgba(255, 255, 255, 0.16);
+    --holo-whiteAlpha-400: rgba(255, 255, 255, 0.24);
+    --holo-whiteAlpha-500: rgba(255, 255, 255, 0.36);
+    --holo-whiteAlpha-600: rgba(255, 255, 255, 0.48);
+    --holo-whiteAlpha-700: rgba(255, 255, 255, 0.64);
+    --holo-whiteAlpha-800: rgba(255, 255, 255, 0.80);
+    --holo-whiteAlpha-900: rgba(255, 255, 255, 0.92);
+    --holo-blackAlpha-50: rgba(0, 0, 0, 0.04);
+    --holo-blackAlpha-100: rgba(0, 0, 0, 0.06);
+    --holo-blackAlpha-200: rgba(0, 0, 0, 0.08);
+    --holo-blackAlpha-300: rgba(0, 0, 0, 0.16);
+    --holo-blackAlpha-400: rgba(0, 0, 0, 0.24);
+    --holo-blackAlpha-500: rgba(0, 0, 0, 0.36);
+    --holo-blackAlpha-600: rgba(0, 0, 0, 0.48);
+    --holo-blackAlpha-700: rgba(0, 0, 0, 0.64);
+    --holo-blackAlpha-800: rgba(0, 0, 0, 0.80);
+    --holo-blackAlpha-900: rgba(0, 0, 0, 0.92);
+    /* spacing scale (rem) — fills --holo-space-3/4 used by holo-theme.css and drives the primitives. */
+    --holo-space-1: 0.25rem;
+    --holo-space-2: 0.5rem;
+    --holo-space-3: 0.75rem;
+    --holo-space-4: 1rem;
+    --holo-space-5: 1.25rem;
+    --holo-space-6: 1.5rem;
+    --holo-space-7: 1.75rem;
+    --holo-space-8: 2rem;
+    --holo-space-9: 2.25rem;
+    --holo-space-10: 2.5rem;
+    --holo-space-11: 2.75rem;
+    --holo-space-12: 3rem;
+    --holo-space-14: 3.5rem;
+    --holo-space-16: 4rem;
+    --holo-space-20: 5rem;
+    --holo-space-24: 6rem;
+    --holo-space-28: 7rem;
+    --holo-space-32: 8rem;
+    --holo-space-36: 9rem;
+    --holo-space-40: 10rem;
+    --holo-space-44: 11rem;
+    --holo-space-48: 12rem;
+    --holo-space-52: 13rem;
+    --holo-space-56: 14rem;
+    --holo-space-60: 15rem;
+    --holo-space-64: 16rem;
+    --holo-space-72: 18rem;
+    --holo-space-80: 20rem;
+    --holo-space-96: 24rem;
+    --holo-space-0p5: 0.125rem;
+    --holo-space-1p5: 0.375rem;
+    --holo-space-2p5: 0.625rem;
+    --holo-space-3p5: 0.875rem;
+    --holo-space-4p5: 1.125rem;
+    /* radius scale — --holo-radius keeps the OS default (0.75rem = the 12px components assumed). */
+    --holo-radius-none: 0;
+    --holo-radius-2xs: 0.0625rem;
+    --holo-radius-xs: 0.125rem;
+    --holo-radius-sm: 0.25rem;
+    --holo-radius-md: 0.375rem;
+    --holo-radius-lg: 0.5rem;
+    --holo-radius-xl: 0.75rem;
+    --holo-radius-2xl: 1rem;
+    --holo-radius-3xl: 1.5rem;
+    --holo-radius-4xl: 2rem;
+    --holo-radius-full: 9999px;
+    --holo-radius: var(--holo-radius-xl);
+    /* weight · line-height · tracking · elevation scales */
+    --holo-weight-thin: 100;
+    --holo-weight-extralight: 200;
+    --holo-weight-light: 300;
+    --holo-weight-normal: 400;
+    --holo-weight-medium: 500;
+    --holo-weight-semibold: 600;
+    --holo-weight-bold: 700;
+    --holo-weight-extrabold: 800;
+    --holo-weight-black: 900;
+    --holo-leading-shorter: 1.25;
+    --holo-leading-short: 1.375;
+    --holo-leading-moderate: 1.5;
+    --holo-leading-tall: 1.625;
+    --holo-leading-taller: 2;
+    --holo-tracking-tighter: -0.05em;
+    --holo-tracking-tight: -0.025em;
+    --holo-tracking-wide: 0.025em;
+    --holo-tracking-wider: 0.05em;
+    --holo-tracking-widest: 0.1em;
+    --holo-shadow-xs: 0 1px 2px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.40));
+    --holo-shadow-sm: 0 1px 3px light-dark(rgba(0,0,0,0.08), rgba(0,0,0,0.46)), 0 1px 2px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.40));
+    --holo-shadow-md: 0 4px 12px -2px light-dark(rgba(0,0,0,0.10), rgba(0,0,0,0.52));
+    --holo-shadow-lg: 0 12px 28px -8px light-dark(rgba(0,0,0,0.14), rgba(0,0,0,0.60));
+    --holo-shadow-xl: 0 24px 56px -16px light-dark(rgba(0,0,0,0.18), rgba(0,0,0,0.66));
+    /* ── Glass / translucency (ADR-0059) — TranslucentTB's accent-state model
+     *    (holo-translucenttb-accents.json) expressed as CSS. A surface picks ONE state
+     *    via its own [data-glass] attribute; CSS blur px = TranslucentTB blur_radius/3.
+     *    Acrylic = blur + saturate + a faint accent tint (Fluent material). Used by the
+     *    dock (#holo-dock) and adoptable by any chrome that wants the same glass. */
+    --holo-glass-tint:    light-dark(rgba(246,248,252,0.72), rgba(22,26,34,0.70));
+    --holo-glass-blur:    22px;                 /* ≈ TranslucentTB blur_radius 66 / 3 — crisp Fluent frost */
+    --holo-glass-sat:     1.8;
+    --holo-glass-border:  light-dark(rgba(255,255,255,0.90), rgba(255,255,255,0.22));
+    --holo-glass-edge:    light-dark(rgba(255,255,255,0.85), rgba(255,255,255,0.28));   /* inset top bevel — reads on any bg */
+    --holo-glass-shadow:  0 0.5rem 2.5rem light-dark(rgba(20,30,50,0.28), rgba(0,0,0,0.60));
+    --holo-glass-opaque-bg:  light-dark(#ffffff, #14161b);  --holo-glass-opaque-fx:  none;
+    --holo-glass-clear-bg:   transparent;                   --holo-glass-clear-fx:   none;
+    --holo-glass-blur-bg:    var(--holo-glass-tint);        --holo-glass-blur-fx:    blur(var(--holo-glass-blur)) saturate(1.4) brightness(1.04);
+    --holo-glass-acrylic-bg: color-mix(in srgb, var(--holo-glass-tint) 86%, var(--holo-accent) 14%);
+    --holo-glass-acrylic-fx: blur(var(--holo-glass-blur)) saturate(var(--holo-glass-sat)) brightness(1.08);
+  }
+  /* Explicit palette beats the system default (Media Queries L5 still applies on auto). */
+  :root[data-holo-palette="light"] { color-scheme: light; }
+  :root[data-holo-palette="dark"]  { color-scheme: dark; }
+  /* Presentation axis — orthogonal to palette. Immersive = denser chrome, calm surfaces. */
+  :root[data-holo-presentation="immersive"] { --holo-density: 0.82; }
+  /* ── Global application at specificity 0 (:where) so ANY app rule overrides freely.
+   *    This is the only place the OS reaches every surface by default; it intentionally
+   *    sets typography (the user's readability) but NOT colors (apps keep their identity
+   *    unless they adopt the tokens), matching holo-mobile.css's restraint. */
+  :where(html) { font-size: max(var(--holo-font-min, 16px), calc(100% * var(--holo-font-scale, 1))); }
+  /* font-optical-sizing + synthesis are CSS Fonts Module controls (real type quality). */
+  :where(body) { font-family: var(--holo-font-sans); font-optical-sizing: auto; font-variation-settings: var(--holo-font-variation, normal); }
+  :where(code, pre, kbd, samp, .holo-mono) { font-family: var(--holo-font-mono); }
+  /* Visible keyboard focus (WCAG 2.4.7 Focus Visible / 2.4.13 Focus Appearance). Mouse
+   * focus stays quiet via :focus-visible; specificity 0 so apps can restyle, not remove. */
+  :where(:focus-visible) { outline: var(--holo-focus-width, 3px) solid var(--holo-accent); outline-offset: 2px; }
+  /* Honor the user's motion preference OS-wide (WCAG 2.3.3 / Media Queries L5). */
+  @media (prefers-reduced-motion: reduce) {
+    :where(*, *::before, *::after) {
+      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
+      transition-duration: 0.001ms !important; scroll-behavior: auto !important;
+    }
+  }
+  /* Honor the user's contrast preference (Media Queries L5 / WCAG 1.4.6 + 1.4.11):
+   * push borders/ink to the extremes and widen the focus ring. */
+  @media (prefers-contrast: more) {
+    :root {
+      --holo-border:  light-dark(#000000, #ffffff);
+      --holo-ink:     light-dark(#000000, #ffffff);
+      --holo-ink-dim: light-dark(#26303a, #d7dee6);
+      --holo-focus-width: 4px;
+    }
+  }
+}
+/* ── Adopt-in primitives — the standard way to render OS-themed surface chrome. Apps
+ *    opt in by using these tokens/classes; they then follow palette + font changes. */
+.holo-surface { background: var(--holo-surface); color: var(--holo-ink); border: 1px solid var(--holo-border); border-radius: var(--holo-radius, 12px); }
+.holo-accent  { background: var(--holo-accent); color: var(--holo-accent-ink); }
+.holo-ink-dim { color: var(--holo-ink-dim); }
+/* ── Container-query responsiveness (W3C CSS Containment / Container Queries) ────────
+ *    A holospace nested in a small iframe must lay out by its OWN width, not the device
+ *    viewport — that's exactly what container queries give us (media queries can't see
+ *    the iframe's box). A region opts in with .holo-cq, and its children adapt to the
+ *    CONTAINER size. This is the standards-correct answer for an OS of nested frames. */
+.holo-cq { container-type: inline-size; container-name: holo; }
+.holo-cq-grid { display: grid; gap: var(--holo-space-4, 16px); grid-template-columns: 1fr; }
+@container holo (min-width: 30rem) { .holo-cq-grid { grid-template-columns: repeat(2, 1fr); } }
+@container holo (min-width: 52rem) { .holo-cq-grid { grid-template-columns: repeat(3, 1fr); } }
+.holo-cq-row { display: flex; flex-direction: column; gap: var(--holo-space-3, 12px); }
+@container holo (min-width: 34rem) { .holo-cq-row { flex-direction: row; align-items: center; } }