@zerwiz/ymir 0.1.10 → 0.1.12

package/midgard/design-system/ember.js

@@ -0,0 +1,183 @@
+/**
+ * ember.js — the hearth, in one place.
+ *
+ * The fire that warms Sessrúmnir's chat came from the landing page's hero
+ * (Ginnungagap): embers rising slowly with a gentle sway, over a few drifting
+ * haze pools. Sessrúmnir carries a React port; this is the framework-neutral
+ * original, so every surface can share one fire instead of four copies.
+ *
+ *   import { startEmbers } from '.../midgard/design-system/ember.js'
+ *   const stop = startEmbers(document.querySelector('[data-ember]'))
+ *
+ * Or simply mark an element and let it find its own:
+ *
+ *   <canvas data-ember></canvas>
+ *   <script type="module" src="/ember.js"></script>
+ *
+ * It is decorative: the canvas is given `pointer-events: none` and
+ * `aria-hidden`, and a reader who has asked their machine for less motion gets a
+ * still, single-frame hearth instead of an animation.
+ */
+
+const EMBERS = 30;
+const HAZE = 6;
+const EMBER_RGB = '236,166,84';
+const HAZE_RGB = '214,138,64';
+
+/** Draw one still frame — also the whole effect under reduced motion. */
+function paint(ctx, W, H, embers, haze) {
+  ctx.clearRect(0, 0, W, H);
+  for (const ha of haze) {
+    const g = ctx.createRadialGradient(ha.x, ha.y, 0, ha.x, ha.y, ha.r);
+    g.addColorStop(0, `rgba(${HAZE_RGB},0.030)`);
+    g.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = g;
+    ctx.beginPath();
+    ctx.arc(ha.x, ha.y, ha.r, 0, 6.283);
+    ctx.fill();
+  }
+  for (const e of embers) {
+    ctx.fillStyle = `rgba(${EMBER_RGB},${e.a.toFixed(3)})`;
+    ctx.beginPath();
+    ctx.arc(e.x, e.y, e.r, 0, 6.283);
+    ctx.fill();
+  }
+}
+
+function seed(W, H) {
+  const embers = [];
+  for (let i = 0; i < EMBERS; i++) {
+    embers.push({
+      x: Math.random() * W,
+      y: H + Math.random() * H * 0.3 - 6,
+      r: 1.0 + Math.random() * 1.6,
+      v: 0.14 + Math.random() * 0.34,
+      ph: Math.random() * 6.28,
+      sp: 0.6 + Math.random() * 1.4,
+      a: 0.26,
+    });
+  }
+  const haze = [];
+  for (let i = 0; i < HAZE; i++) {
+    haze.push({ x: Math.random() * W, y: H * 0.3 + Math.random() * H * 0.7, r: 130 + Math.random() * 170, v: (Math.random() - 0.5) * 0.15 });
+  }
+  return { embers, haze };
+}
+
+/**
+ * Start the hearth on <host>. Returns a stop function. Safe to call on a host
+ * that has no box yet (it simply draws nothing until it has one).
+ */
+export function startEmbers(host) {
+  if (!host) return () => {};
+  const canvas = host.tagName === 'CANVAS' ? host : document.createElement('canvas');
+  if (canvas !== host) {
+    canvas.style.position = 'absolute';
+    canvas.style.inset = '0';
+    host.appendChild(canvas);
+  }
+  canvas.setAttribute('aria-hidden', 'true');
+  canvas.style.pointerEvents = 'none';
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return () => {};
+
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  let W = 0;
+  let H = 0;
+  let t = 0;
+  let raf = 0;
+  let { embers, haze } = seed(1, 1);
+
+  const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+
+  function size() {
+    const rect = canvas.getBoundingClientRect();
+    W = rect.width || canvas.clientWidth || 0;
+    H = rect.height || canvas.clientHeight || 0;
+    canvas.width = Math.max(1, W * dpr);
+    canvas.height = Math.max(1, H * dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+
+  function reseed() {
+    ({ embers, haze } = seed(W, H));
+    if (reduced) {
+      for (const e of embers) e.a = 0.3 + 0.4 * Math.random();
+      paint(ctx, W, H, embers, haze);
+    }
+  }
+
+  function frame() {
+    t += 0.016;
+    for (const ha of haze) {
+      ha.x += ha.v;
+      if (ha.x < -ha.r) ha.x = W + ha.r;
+      if (ha.x > W + ha.r) ha.x = -ha.r;
+    }
+    for (const e of embers) {
+      e.y -= e.v;
+      e.x += Math.sin(t * e.sp + e.ph) * 0.18;
+      if (e.y < -6) {
+        e.y = H + 6;
+        e.x = Math.random() * W;
+      }
+      e.a = 0.26 + 0.4 * (0.5 + 0.5 * Math.sin(t * e.sp * 2 + e.ph));
+    }
+    paint(ctx, W, H, embers, haze);
+  }
+
+  function loop() {
+    frame();
+    raf = requestAnimationFrame(loop);
+  }
+
+  size();
+  reseed();
+  if (!reduced) raf = requestAnimationFrame(loop);
+
+  const onResize = () => {
+    size();
+    reseed();
+  };
+  window.addEventListener('resize', onResize);
+
+  // The hearth warms a *container*, and containers change without a window
+  // resize (a split pane, a toggled sidebar). Watch the host: re-size and
+  // re-seed only when its dimensions actually changed, never per-frame.
+  let ro = null;
+  if (typeof ResizeObserver !== 'undefined' && canvas.parentElement) {
+    const host = canvas.parentElement;
+    let lastW = 0;
+    let lastH = 0;
+    ro = new ResizeObserver((entries) => {
+      const e = entries[0];
+      if (!e) return;
+      const w = e.contentRect?.width ?? e.contentBoxSize?.[0]?.inlineSize ?? 0;
+      const h = e.contentRect?.height ?? e.contentBoxSize?.[0]?.blockSize ?? 0;
+      if (Math.abs(w - lastW) > 0.5 || Math.abs(h - lastH) > 0.5) {
+        lastW = w;
+        lastH = h;
+        onResize();
+      }
+    });
+    ro.observe(host);
+  }
+
+  return () => {
+    if (raf) cancelAnimationFrame(raf);
+    window.removeEventListener('resize', onResize);
+    if (ro) ro.disconnect();
+  };
+}
+
+/** Every element marked `data-ember` lights its own hearth. */
+export function startAllEmbers(root = document) {
+  return Array.from(root.querySelectorAll('[data-ember]')).map(startEmbers);
+}
+
+if (typeof document !== 'undefined') {
+  const boot = () => startAllEmbers();
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot, { once: true });
+  else boot();
+}

package/midgard/design-system/icons/algiz.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Algiz — Reviews / protection">
+  <title>Algiz — Reviews / protection</title>
+  <path d="M12 20V10 M12 10L5 3 M12 10L19 3" />
+</svg>

package/midgard/design-system/icons/ansuz.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Ansuz — Forge">
+  <title>Ansuz — Forge</title>
+  <path d="M12 4V20 M12 9L7 4 M12 9L17 4" />
+</svg>

package/midgard/design-system/icons/berkana.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Berkanan — Profile">
+  <title>Berkanan — Profile</title>
+  <path d="M9 4V20 M9 4L17 8V14L9 18" />
+</svg>

package/midgard/design-system/icons/dagaz.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Dagaz — Processes">
+  <title>Dagaz — Processes</title>
+  <path d="M5 5L19 19 M19 5L5 19 M5 5V19 M19 5V19" />
+</svg>

package/midgard/design-system/icons/ehwaz.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Ehwaz — Runtime">
+  <title>Ehwaz — Runtime</title>
+  <path d="M4 20V8L12 14L20 8V20" />
+</svg>

package/midgard/design-system/icons/fehu.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Fehu — Fleet">
+  <title>Fehu — Fleet</title>
+  <path d="M12 20V4 M12 8L6 4 M12 8L18 4" />
+</svg>

package/midgard/design-system/icons/gjallarhorn.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Gjallarhorn — tunnel">
+  <title>Gjallarhorn — tunnel</title>
+  <path d="M6 5L18 19 M18 5L6 19" />
+</svg>

package/midgard/design-system/icons/gungnir.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Gungnir — skills">
+  <title>Gungnir — skills</title>
+  <path d="M7 20V4 M7 6L17 12L7 18" />
+</svg>

package/midgard/design-system/icons/heimdall.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Heimdall — auth">
+  <title>Heimdall — auth</title>
+  <path d="M7 4V20 M17 4V20 M7 12H17" />
+</svg>

package/midgard/design-system/icons/ingwaz.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Ingwaz — Well">
+  <title>Ingwaz — Well</title>
+  <path d="M12 4L20 12L12 20L4 12Z" />
+</svg>

package/midgard/design-system/icons/jera.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Jera — Cron">
+  <title>Jera — Cron</title>
+  <path d="M6 20L12 12L6 4 M18 4L12 12L18 20" />
+</svg>

package/midgard/design-system/icons/kaunan.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Kaunan — OmniChat">
+  <title>Kaunan — OmniChat</title>
+  <path d="M18 4L6 12L18 20" />
+</svg>

package/midgard/design-system/icons/midgard.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Midgard — shared">
+  <title>Midgard — shared</title>
+  <path d="M4 12H20 M12 4V20 M6 6L18 18 M18 6L6 18" />
+</svg>

package/midgard/design-system/icons/mimirsbrunn.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Mimirsbrunn — memory">
+  <title>Mimirsbrunn — memory</title>
+  <path d="M12 4L20 12L12 20L4 12Z" />
+</svg>

package/midgard/design-system/icons/othala.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Othala — inheritance, the hall">
+  <title>Othala — inheritance, the hall</title>
+  <path d="M12 4L19 9L12 14L5 9Z M9 12L7 20 M15 12L17 20" />
+</svg>

package/midgard/design-system/icons/raidho.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Raidho — Runes">
+  <title>Raidho — Runes</title>
+  <path d="M8 20V4H14L18 8L14 12H8 M14 12L18 20" />
+</svg>

package/midgard/design-system/icons/ratatoskr.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Ratatoskr — A2A bus">
+  <title>Ratatoskr — A2A bus</title>
+  <path d="M9 4V20 M9 4L17 8V14L9 18" />
+</svg>

package/midgard/design-system/icons/sowilo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Sowilo — the sun">
+  <title>Sowilo — the sun</title>
+  <path d="M16 4L8 4L16 20L8 20" />
+</svg>

package/midgard/design-system/icons/tiwaz.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Tiwaz — Tasks">
+  <title>Tiwaz — Tasks</title>
+  <path d="M12 20V4 M12 4L6 11 M12 4L18 11" />
+</svg>

package/midgard/design-system/icons/utgard.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Utgard — sandbox">
+  <title>Utgard — sandbox</title>
+  <path d="M8 20V8C8 5 16 5 16 8V20" />
+</svg>

package/midgard/design-system/icons/valhalla.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Valhalla — processes">
+  <title>Valhalla — processes</title>
+  <path d="M7 20V4 M7 4L17 8L7 12" />
+</svg>

package/midgard/design-system/icons/yggdrasil.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter" role="img" aria-label="Yggdrasil — worktrees">
+  <title>Yggdrasil — worktrees</title>
+  <path d="M6 20L12 12L6 4 M18 4L12 12L18 20" />
+</svg>

package/midgard/design-system/icons.md

@@ -0,0 +1,59 @@
+# Rune-Glyph Icon Map
+
+**Runecoded, not emoji.** Every icon in Ymir is an Elder Futhark rune drawn as a
+24px stroke glyph, colored by `currentColor`. Emoji are never used as icons.
+
+## Set
+
+The glyphs live in `midgard/design-system/icons/*.svg` (24×24 viewBox; render at
+16px or 24px). Stroke uses `currentColor`, square caps, miter joins — the chisel
+bevel. The primary seat may add a 1px inner bevel via the `--ymir-bevel` token.
+
+```
+icons[21]{glyph,name,unicode,figure,used_for}:
+  "fehu","Fehu","ᚠ","Ymir (cattle/wealth)","Fleet — the herd of agents"
+  "tiwaz","Tiwaz","ᛏ","Týr (justice)","Tasks — the A2A lifecycle board"
+  "ingwaz","Ingwaz","ᛜ","Ing (the well)","Well — Mimirsbrunn recall"
+  "raidho","Raidho","ᚱ","ride/journey","Runes — the ledger (a road carved)"
+  "othala","Othala","ᛟ","inheritance, the hall","Sessrúmnir — the seat that holds the cloth"
+  "algiz","Algiz","ᛉ","protection","Reviews / Glitnir — the protective gate; the Ymir emblem"
+  "dagaz","Dagaz","ᛞ","day/dawn","Processes — Valhalla supervision"
+  "sowilo","Sowilo","ᛊ","sun","Files — Skrymir (light on the tree)"
+  "kaunan","Kaunan","ᚴ","torch","OmniChat — Kaia's flame"
+  "ansuz","Ansuz","ᚨ","Odin's breath","Óðrerir — the mead of poetry, the Live Hall"
+  "ehwaz","Ehwaz","ᛖ","horse/journey","Runtime — the seat and its transit"
+  "jera","Jera","ᛃ","year/harvest","Cron — the Nornir's seasons"
+  "berkana","Berkanan","ᛒ","birch","Profile — the self"
+  "midgard","Midgard","—","the shared world","shared workspace / cross-tenant assets"
+  "utgard","Utgard","ᚢ","the outer realm","Utgard — the sandbox barrier"
+  "yggdrasil","Yggdrasil","ᛃ","the world-tree","Yggdrasil — worktrees"
+  "ratatoskr","Ratatoskr","ᛒ","the squirrel","Ratatoskr — the A2A bus"
+  "mimirsbrunn","Mimirsbrunn","ᛜ","the well of wisdom","Mimirsbrunn — memory"
+  "valhalla","Wunjo","ᚹ","joy","Valhalla — process health (the glyph ᚹ is drawn here)"
+  "gungnir","Gungnir","ᚦ","Odin's spear","Gungnir — skill synthesis"
+  "heimdall","Heimdall","ᚺ","the watchman","Heimdall — auth / the gate"
+  "gjallarhorn","Gjallarhorn","ᚷ","the horn","Gjallarhorn — the tunnel and its call"
+```
+
+## Usage
+
+- Reference a glyph as an inline `<svg>` (copy the path) or `<img src>`; stroke
+  with `currentColor`, never a raw hex.
+- Render at **24px** in panels, **16px** inline in tables and chips.
+- A status glyph is always paired with **glyph + colour + text** — never
+  colour-only state.
+- The active realm/accent may tint glyphs via `--realm-tint`.
+
+## Verification
+
+```bash
+ls midgard/design-system/icons/*.svg | wc -l      # 21
+# no emoji used as icons in the UI:
+rg -n "[\x{1F300}-\x{1FAFF}\x{2600}-\x{27BF}]" apps/hlidskjalf/src || echo "no emoji icons"
+```
+
+## Maintaining this
+
+- **Owner:** Brokk. **Tokens:** `midgard/design-system/tokens.css`.
+- Add a rune here and its glyph in `icons/` in the same pass; keep the count in the
+  `icons[N]` block true (Galdr TOON check: `.agents/skills/galdr-ymirsystem/scripts/toon-check.py`).

package/midgard/design-system/runes.md

@@ -0,0 +1,78 @@
+# The Rune Library
+
+**Runecoded, not emoji.** Every icon in Ymir is an Elder Futhark rune drawn as a
+24×24 stroke glyph, coloured by `currentColor` (or the app's house tint). This is
+the library: the full futhark, what each rune means, and where Ymir uses it.
+
+- **Glyphs:** `midgard/design-system/icons/*.svg` (24×24 viewBox, stroke 1.8,
+  square caps, miter joins — the chisel bevel).
+- **Names in code:** the file name is the rune's name, lower-case (`ehwaz.svg`).
+- **Usage rules:** inline `<svg>` or `<img src>`; stroke with `currentColor`,
+  never a raw hex; 24px in panels, 16px inline; a status glyph is always paired
+  with **glyph + colour + text**, never colour alone.
+- **The app runes:** five UI surfaces, five different glyphs — see the foot.
+
+## The futhark
+
+```
+runes[24]{glyph,name,sound,meaning,ymir_use,file}:
+  "ᚠ","Fehu","f","cattle, wealth","Fleet — the herd of agents","fehu"
+  "ᚢ","Uruz","u","aurochs, strength","Utgard — the sandbox barrier","utgard"
+  "ᚦ","Thurisaz","th","thorn, giant","Gungnir — skill synthesis","gungnir"
+  "ᚨ","Ansuz","a","Odin's breath","Óðrerir — the mead of poetry, the Live Hall","ansuz"
+  "ᚱ","Raido","r","ride, journey","Runes — the ledger (a road carved)","raidho"
+  "ᚲ","Kaunan","k","torch, ulcer","Smíðja's eye — the trace of the forge, OmniChat's flame","kaunan"
+  "ᚷ","Gebo","g","gift","Gjallarhorn — the tunnel and its call","gjallarhorn"
+  "ᚹ","Wunjo","w","joy","Valhalla — the hall of the supervisor","valhalla"
+  "ᚺ","Hagall","h","hail","Heimdall — auth, the gate","heimdall"
+  "ᚾ","Naudiz","n","need, constraint","(no glyph yet)","—"
+  "ᛁ","Isaz","i","ice","(no glyph yet)","—"
+  "ᛃ","Jera","j","year, harvest","Nornir — the seasons; Yggdrasil — the world-tree's cycle","jera"
+  "ᛇ","Eihwaz","ï","yew","(no glyph yet)","—"
+  "ᛈ","Perthro","p","lot, fate","(no glyph yet)","—"
+  "ᛉ","Algiz","z","protection","Glitnir's reviews — the protective gate; **the Ymir emblem**","algiz"
+  "ᛊ","Sowilo","s","sun","Skrymir — files (light on the tree)","sowilo"
+  "ᛏ","Tiwaz","t","Týr, justice","Tasks — the A2A lifecycle board","tiwaz"
+  "ᛒ","Berkanan","b","birch","Profile — the self; Ratatoskr — the messenger","berkana"
+  "ᛖ","Ehwaz","e","horse","Runtime — the seat and its transit; Hlidskjalf","ehwaz"
+  "ᛗ","Mannaz","m","man, self","(no glyph yet)","—"
+  "ᛚ","Laguz","l","water, flow","(no glyph yet)","—"
+  "ᛜ","Ingwaz","ng","Ing, the seed","Mimirsbrunn — the well of wisdom","ingwaz"
+  "ᛞ","Dagaz","d","day, dawn","Valhalla — process health","dagaz"
+  "ᛟ","Othala","o","inheritance, estate","(no glyph yet)","—"
+```
+
+**Twenty-one of the twenty-four are drawn; three are not yet:** Naudiz, Isaz,
+Eihwaz, Perthro, Mannaz, Laguz and Othala have no file — add the glyph and its
+row in `icons.md` in the same pass.
+
+**Every file is a rune.** It was not always so: eight files used to be *drawings*
+of the thing they were named after (a hall, a horn, a shield, a spear, a well, a
+squirrel, a gate, a world-tree) while `icons.md` claimed a rune for each. Corrected
+2026-09-16 — Gungnir took Thurisaz, since Gebo was already Gjallarhorn's.
+
+## The app runes
+
+Five UI surfaces, five different glyphs — no app borrows another's rune:
+
+```
+app_runes[5]{app,glyph,rune,house_tint}:
+  "Hlidskjalf","ᛖ","ehwaz — the seat","#c9973f bronze (ymirlabs)"
+  "Hlidskjalf Mobile","ᚱ","raidho — the road, the seat carried","#c9973f bronze"
+  "Óðrerir","ᚨ","ansuz — Odin's breath, the mead of poetry","#c9973f bronze (ymirlabs)"
+  "Sessrúmnir","ᛟ","othala — inheritance, the hall that holds what is kept","#c9973f bronze (ymirlabs)"
+  "Smíðja (visualizer)","ᚲ","kaunan — the torch, the forge's eye","#f59e0b amber (brokkforge)"
+```
+
+Minted and installed by `bin/design-icon.sh` (`list` · `mint --all` · `install`):
+the icon into the user's icon theme, the `.desktop` entry into their applications
+dir, so every app is dockable and carries the house mark.
+
+## Adding a rune
+
+1. Draw it in `icons/<name>.svg` — 24×24, stroke 1.8, square caps, miter joins,
+   `stroke="currentColor"`, a `<title>` naming the rune and its use.
+2. Add its row to `icons.md` **and** to the futhark table above, in the same
+   change. Keep both counts true (the TOON check counts rows).
+3. If an app should wear it, add the app to `bin/design-icon.sh`'s table and run
+   `mint --all && install`.

package/midgard/design-system/tokens.css

@@ -0,0 +1,109 @@
+/* ============================================================
+   YMIR — Design Tokens · Canonical (the carved cloth of the halls)
+   Source of truth: docs/design.md §4.
+   The cloth is cut from the landing page (CodeP/ymir-homepage/src/lore.html
+   :root): stone and bone, bronze and blood, and the three faces Cormorant /
+   Newsreader / IBM Plex Mono. The landing is the reference — a token change
+   here re-themes every hall (Hlidskjalf, Smíðja, and the seat).
+   House accents are heraldry, not chrome: they stay, exactly as the landing
+   keeps its house seals.
+   Consume via CSS variables — never hardcode hex in components.
+   ============================================================ */
+
+:root {
+  /* --- Canvas: the stone ------------------------------- */
+  --ymir-bg-0: #0e0c09; /* stone — the ground */
+  --ymir-bg-1: #151209; /* panel */
+  --ymir-bg-2: #1a1610; /* panel2 — elevated surface, cards */
+  --ymir-bg-3: #221d14; /* line-soft — hover, wells */
+
+  /* --- Accents: the bronze light of the forge ---------- */
+  --ymir-cyan-1: #c9973f; /* bronze — primary accent, active states, focus, links */
+  --ymir-cyan-2: #7d5f2a; /* bronze-deep — hover/darker accent */
+  --ymir-violet-1: #96a0a8; /* steel — realm identity, secondary accent */
+  --ymir-violet-2: #5f686e; /* steel-dim */
+
+  /* --- Structure: bone and brass ----------------------- */
+  --ymir-steel-1: #2b241a; /* line — borders, bevel exteriors */
+  --ymir-steel-2: #7d5f2a; /* bronze-deep — stronger rules, dividers */
+  --ymir-steel-3: #9a8f75; /* bone-dim — secondary text, muted glyphs */
+  --ymir-chisel: #c9973f; /* bronze — the lit chisel edge (emblem, focus) */
+
+  /* --- Semantics: state of the forge ------------------- */
+  --ymir-ok: #96a0a8; /* steel — the metal proved true */
+  --ymir-warn: #c9973f; /* bronze — hot, heed it */
+  --ymir-danger: #c2584a; /* blood-lit — the wound */
+  --ymir-info: #9a8f75; /* bone-dim — the note */
+  --ymir-ok-dim: rgba(150, 160, 168, 0.15);
+  --ymir-warn-dim: rgba(201, 151, 79, 0.15);
+  --ymir-danger-dim: rgba(194, 88, 74, 0.15);
+  --ymir-info-dim: rgba(154, 143, 117, 0.15);
+
+  /* --- Text on stone ----------------------------------- */
+  --ymir-text-0: #cfc3a9; /* bone — primary text */
+  --ymir-text-1: rgba(207, 195, 169, 0.82); /* bone, blunted — secondary text */
+  --ymir-text-2: #9a8f75; /* bone-dim — tertiary, disabled */
+  --ymir-text-3: #6b6250; /* bone-faint — placeholder */
+
+  /* --- House accents (structural only, never chrome) ---------- */
+  --ymir-house-ymirlabs: #c9973f; /* bronze — the platform's own house wears the forge accent (was blue) */
+  --ymir-house-brokkforge: #f59e0b;
+  --ymir-house-runestone: #f43f5e;
+  --ymir-house-muninn: #8b5cf6;
+  --ymir-house-dvalin: #94a3b8;
+  --ymir-house-utgard: #d946ef;
+  --ymir-house-askr: #34d399;
+  --ymir-house-mannheim: #64748b;
+
+  /* --- Type: the cloth's three faces --------------------------- */
+  /* Runic glyphs fall through to Noto Sans Runic inside every stack, so a rune
+     renders in the rune family wherever it is written. */
+  --ymir-font-head: 'Cormorant', 'Noto Sans Runic', Georgia, serif;
+  --ymir-font-mono: 'IBM Plex Mono', 'Noto Sans Runic', ui-monospace, 'Cascadia Mono', monospace;
+  --ymir-font-body: 'Newsreader', Georgia, 'Noto Sans Runic', serif;
+
+  --ymir-s-mono-s: 12px / 16px;
+  --ymir-s-mono-m: 14px / 20px;
+  --ymir-s-mono-l: 18px / 24px;
+  --ymir-s-display: clamp(28px, 4vw, 44px) / 1.1;
+  --ymir-s-body: 15px / 22px;
+  --ymir-s-caption: 13px / 18px;
+
+  /* --- Space & structure ----------------------------------------- */
+  --ymir-space-1: 4px;
+  --ymir-space-2: 8px;
+  --ymir-space-3: 12px;
+  --ymir-space-4: 16px;
+  --ymir-space-5: 24px;
+  --ymir-space-6: 32px;
+  --ymir-space-7: 48px;
+
+  --ymir-radius: 8px;
+  --ymir-radius-panel: 12px;
+  --ymir-border: 1px solid var(--ymir-steel-1);
+
+  /* Bevel: sell the carved edge — a brass hairline inside the stone */
+  --ymir-bevel: inset 0 0 0 1px rgba(201, 151, 79, 0.12);
+  --ymir-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --ymir-shadow-raise: 0 8px 24px rgba(0, 0, 0, 0.55);
+
+  /* --- Motion ------------------------------------------------------- */
+  --ymir-dur-fast: 120ms;
+  --ymir-dur-task: 180ms;
+  --ymir-dur-hop: 220ms;
+  --ymir-dur-roll: 240ms;
+  --ymir-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Numeric safety for all telemetry */
+.tabular { font-variant-numeric: tabular-nums; font-family: var(--ymir-font-mono); }
+
+/* Status chips: color + rune + label — never color alone */
+.status-ok    { color: var(--ymir-ok);    background: var(--ymir-ok-dim); }
+.status-warn  { color: var(--ymir-warn);  background: var(--ymir-warn-dim); }
+.status-danger{ color: var(--ymir-danger); background: var(--ymir-danger-dim); }
+.status-info  { color: var(--ymir-info);  background: var(--ymir-info-dim); }
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition-duration: 120ms !important; animation-duration: 120ms !important; }
+}

package/midgard/design-system/ymir-mark.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <!-- Background Dark Steel Gradient -->
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0f172a" />
+      <stop offset="100%" stop-color="#020617" />
+    </linearGradient>
+
+    <!-- Base Metal Color for the Rune -->
+    <linearGradient id="metal-base" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8" />
+      <stop offset="50%" stop-color="#475569" />
+      <stop offset="100%" stop-color="#1e293b" />
+    </linearGradient>
+
+    <!-- Advanced 3D Forge Filter -->
+    <filter id="heavy-metal-3d" x="-20%" y="-20%" width="140%" height="140%">
+      <!-- 1. Generate Hammered Iron Texture -->
+      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" result="noise" />
+      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.15 0" in="noise" result="coloredNoise" />
+
+      <!-- 2. Blend Texture with Base Color -->
+      <feComposite operator="in" in="coloredNoise" in2="SourceGraphic" result="textured" />
+      <feBlend mode="multiply" in="textured" in2="SourceGraphic" result="baseTex" />
+
+      <!-- 3. Create 3D Bevel / Depth Map -->
+      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
+
+      <!-- 4. Apply 3D Lighting (Cyan/Blue Specular Highlight) -->
+      <feSpecularLighting in="blur" surfaceScale="6" specularConstant="1.2" specularExponent="25" lighting-color="#bae6fd" result="specOut">
+        <!-- Light Source Positioned Top-Left -->
+        <fePointLight x="-100" y="-100" z="300" />
+      </feSpecularLighting>
+
+      <!-- 5. Mask Lighting to the Shape -->
+      <feComposite operator="in" in="specOut" in2="SourceAlpha" result="specularMasked" />
+
+      <!-- 6. Combine Lighting and Textured Base -->
+      <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="specularMasked" in2="baseTex" result="litModel" />
+
+      <!-- 7. Heavy Drop Shadow for Canvas Depth -->
+      <feDropShadow in="litModel" dx="0" dy="16" stdDeviation="12" flood-opacity="0.85" flood-color="#000000" result="finalShadow" />
+    </filter>
+  </defs>
+
+  <!-- Canvas -->
+  <rect width="512" height="512" rx="40" fill="url(#bg-grad)" stroke="#1e293b" stroke-width="4"/>
+
+  <!-- Master Group with 3D Rendering Filter Applied -->
+  <g filter="url(#heavy-metal-3d)" fill="url(#metal-base)">
+
+    <!-- Algiz Y-Stem (Solid Geometric Polygon) -->
+    <polygon points="120,100 168,100 256,188 344,100 392,100 276,216 276,340 236,340 236,216" />
+
+    <!-- Top Anvil Bar -->
+    <polygon points="100,340 412,340 400,388 112,388" />
+
+    <!-- Bottom Anvil Bar (Slightly narrower base) -->
+    <polygon points="132,408 380,408 368,440 144,440" />
+
+  </g>
+</svg>