@chrisdudek/yg 5.4.1 → 5.4.2

package/dist/templates/portal/shell.css

@@ -0,0 +1,257 @@
+/*
+ * The three-region shell layout — nav rail, top bar, center stage, node panel.
+ *
+ * The persistent chrome the portal lives in: a left navigation rail (brand, ⌘K trigger,
+ * grouped view links), a top bar (live status + Refresh/Approve cluster, breadcrumb, ⌘K
+ * search, theme toggle), the center stage the dispatcher renders into, and a right-hand
+ * node-panel slot that opens on selection. Border-first elevation; one accent voltage
+ * (the primary button + the active rail link). Tokens come from tokens.css.
+ */
+
+.app-grid {
+  display: grid;
+  grid-template-columns: 248px 1fr 0;
+  min-height: 100vh;
+}
+.app-grid:has(.app-panel.open) {
+  grid-template-columns: 248px 1fr 420px;
+}
+.app-rail {
+  border-right: 1px solid var(--border-subtle);
+  background: var(--surface-1);
+  min-width: 0;
+  /* Pinned: the rail stays visible on scroll with its own overflow, so the tabs never
+     scroll away. The shell grid has min-height:100vh and the page/body scrolls. */
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100vh;
+  overflow-y: auto;
+}
+.rail-brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.rail-logo {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  /* A deep chip so the gold brand mark reads on either theme; the SVG sits inside, contained.
+     A soft drop shadow + a hairline seat the chip on the near-white light rail (so it does not
+     read as a flat tile pasted onto the chrome) while staying unobtrusive in the dark theme. */
+  background: linear-gradient(160deg, #20242c, #15171b);
+  object-fit: contain;
+  padding: 4px;
+  flex: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.rail-brand b {
+  font-weight: 600;
+}
+.rail-brand-sub {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.rail-cmdk {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: calc(100% - 28px);
+  margin: 12px 14px;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.rail-cmdk kbd {
+  margin-left: auto;
+  font-size: 11px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 1px 6px;
+  color: var(--text-secondary);
+}
+.rail-h {
+  padding: 6px 16px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+}
+.rail-nav {
+  display: flex;
+  flex-direction: column;
+}
+.rail-link {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 16px;
+  border: 0;
+  border-left: 2px solid transparent;
+  background: none;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+.rail-link:hover {
+  background: var(--surface-2);
+}
+.rail-link.on {
+  color: var(--text-primary);
+  background: var(--surface-3);
+  border-left-color: var(--accent);
+}
+.rail-glyph {
+  width: 16px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.app-main {
+  min-width: 0;
+}
+.app-topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 22px;
+  border-bottom: 1px solid var(--border-subtle);
+  /* Pinned to the top of the scroll, above the stage, with a solid background so the
+     content scrolling beneath it never shows through. */
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--bg);
+}
+.topbar-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.topbar-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--verified);
+}
+.topbar-dot.muted {
+  background: var(--text-muted);
+}
+.topbar-crumb {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.topbar-spacer {
+  flex: 1;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  padding: 7px 12px;
+  font: inherit;
+  font-size: 13px;
+  background: var(--bg);
+  color: var(--text-primary);
+  cursor: pointer;
+}
+.btn:hover:not(:disabled) {
+  background: var(--surface-2);
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+.btn.primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.btn-free {
+  font-size: 10px;
+  color: var(--verified);
+}
+
+.app-stage {
+  /* The bottom padding clears the pinned honest-key bar (see .legend-bar) so the last
+     row of content is never hidden behind it. */
+  padding: 20px 22px 96px;
+  /* Use the available width: wide surfaces (matrix, tree, tables) get the room they need.
+     A generous cap keeps long prose readable; margin-inline:auto centers it so the stage is
+     never a left-clipped column. */
+  max-width: 1600px;
+  margin-inline: auto;
+  width: 100%;
+}
+.app-panel {
+  background: var(--surface-1);
+  padding: 0;
+  /* The panel is its own scroll column: pinned full-height with its own overflow so a long
+     refusal reason or folded-input drill-through scrolls inside the panel instead of being
+     clipped. Closed, it is a zero-width slot with NO border — a left border on a 0-width grid
+     column would otherwise push the page 1px wider than the viewport (a spurious h-scrollbar). */
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100vh;
+  overflow-y: auto;
+}
+.app-panel.open {
+  border-left: 1px solid var(--border-subtle);
+  padding: 18px 18px 28px;
+}
+
+/* ── Narrow / split-screen desktop (≤900px): keep the layout overflow- and collision-free ──
+   The node panel becomes a right overlay SHEET instead of a reserved grid column (so it never
+   steals layout width or collides with the top bar), and the top bar drops its verbose live
+   caption so the action buttons never wrap or clip. A phone-width layout is out of scope. */
+@media (max-width: 1000px) {
+  .app-grid:has(.app-panel.open) {
+    grid-template-columns: 248px 1fr 0;
+  }
+  .app-panel.open {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: min(420px, 92vw);
+    height: 100vh;
+    z-index: 40;
+    box-shadow: -6px 0 22px -6px rgba(0, 0, 0, 0.3);
+  }
+  .topbar-live span:not(.topbar-dot) {
+    display: none;
+  }
+  .topbar-crumb {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+}

package/dist/templates/portal/shell.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Yggdrasil Portal</title>
+    <!-- The brand mark, inlined as a data: URI by the serializer (offline, no network). -->
+    <link rel="icon" type="image/svg+xml" href="__PORTAL_FAVICON_HREF__" />
+    <style>
+      /* __PORTAL_CSS__ */
+    </style>
+  </head>
+  <body>
+    <main id="portal-root" role="main"></main>
+
+    <!--
+      The portal data contract, inlined as one JSON blob. The consumer parses this
+      element's text content; nothing on the page reaches the network. type="application/json"
+      keeps the browser from executing it as script.
+    -->
+    <script id="portal-data" type="application/json">
+      /* __PORTAL_DATA__ */
+    </script>
+
+    <!-- Vendored layout library (offline, no CDN). Exposes the global `d3`. -->
+    <script>
+      /* __PORTAL_VENDOR__ */
+    </script>
+
+    <!--
+      Portal frontend modules, inlined in dependency order. No module system on a single
+      offline file — each module attaches to the shared window.YgPortal global, so a plain
+      sequence of <script> blocks shares code without import/require. The bootstrap runs last.
+    -->
+    <script>
+      /* __PORTAL_MODULES__ */
+    </script>
+  </body>
+</html>

package/dist/templates/portal/tokens.css

@@ -0,0 +1,269 @@
+/*
+ * Design tokens + base + the honest status palette.
+ *
+ * The visual language's foundation: Radix Slate neutrals + Radix Blue accent as CSS custom
+ * properties (light is :root, dark is [data-theme="dark"], so theming "just works"), the
+ * base body/type/focus rules, and the HONEST STATUS PALETTE — every state rendered with
+ * color + glyph + border-style, never color alone (accessibility). The only saturated color
+ * on the page is a state. The shell/component layouts live in sibling files; this file is
+ * the source of truth a renderer's state classes resolve against.
+ */
+
+:root {
+  --bg: #fcfcfd;
+  --surface-1: #f9f9fb;
+  --surface-2: #f0f0f3;
+  --surface-3: #e8e8ec;
+  --surface-4: #e0e1e6;
+  --border-subtle: #d9d9e0;
+  --border: #cdced6;
+  --border-strong: #b9bbc6;
+  --text-muted: #676b73;
+  --text-secondary: #60646c;
+  --text-primary: #1c2024;
+  --accent: #0090ff;
+  --accent-hover: #0588f0;
+  --accent-text: #0d74ce;
+  --focus-ring: #5eb1ef;
+  --verified: #208368;
+  --verified-bg: #e6f7ed;
+  --refused: #ce2c31;
+  --refused-bg: #feebec;
+  --unverified: #9a6700;
+  --unverified-bg: #fff7c2;
+  --norule: #60646c;
+  --norule-bg: #f0f0f3;
+  --waived: #8e4ec6;
+  --waived-bg: #f7edfe;
+  --live: #0d74ce;
+}
+
+[data-theme='dark'] {
+  --bg: #111113;
+  --surface-1: #18191b;
+  --surface-2: #212225;
+  --surface-3: #272a2d;
+  --surface-4: #2e3135;
+  --border-subtle: #363a3f;
+  --border: #43484e;
+  --border-strong: #5a6168;
+  --text-muted: #8b8f96;
+  --text-secondary: #b0b4ba;
+  --text-primary: #edeef0;
+  --accent: #0090ff;
+  --accent-hover: #3b9eff;
+  --accent-text: #70b8ff;
+  --focus-ring: #2870bd;
+  --verified: #3dd9a4;
+  --verified-bg: #0f2e22;
+  --refused: #ff9592;
+  --refused-bg: #3b1219;
+  --unverified: #ffca16;
+  --unverified-bg: #302008;
+  --norule: #b0b4ba;
+  --norule-bg: #212225;
+  --waived: #bf7af0;
+  --waived-bg: #2b1c3b;
+  --live: #70b8ff;
+}
+
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+}
+body {
+  background: var(--bg);
+  color: var(--text-primary);
+  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+.mono,
+.chip-count,
+.tree-type {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-feature-settings: 'tnum', 'liga';
+}
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+  border-radius: 4px;
+}
+
+/* ── Honest status palette — color + glyph + border, never color alone ──── */
+.state-glyph {
+  display: inline-grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 700;
+  flex: none;
+}
+.state-verified {
+  color: var(--verified);
+}
+.state-glyph.state-verified {
+  background: var(--verified-bg);
+  border: 2px solid var(--verified);
+}
+.state-refused {
+  color: var(--refused);
+}
+.state-glyph.state-refused {
+  background: var(--refused-bg);
+  border: 2px solid var(--refused);
+}
+.state-unverified {
+  color: var(--unverified);
+}
+.state-glyph.state-unverified {
+  background: var(--unverified-bg);
+  border: 2px dashed var(--unverified);
+}
+.state-no-rule {
+  color: var(--norule);
+}
+.state-glyph.state-no-rule {
+  background: var(--norule-bg);
+  border: 2px dotted var(--norule);
+}
+.state-warning {
+  color: var(--unverified);
+}
+.state-glyph.state-warning {
+  background: var(--unverified-bg);
+  border: 2px dashed var(--unverified);
+}
+.state-not-applicable {
+  color: var(--text-muted);
+}
+.state-glyph.state-not-applicable {
+  background: var(--surface-2);
+  border: 1px solid var(--border-subtle);
+}
+.state-suppressed {
+  color: var(--waived);
+}
+.state-glyph.state-suppressed {
+  background: var(--waived-bg);
+  border: 2px dashed var(--waived);
+}
+.state-draft {
+  color: var(--text-muted);
+}
+.state-glyph.state-draft {
+  background: var(--surface-2);
+  border: 2px dotted var(--text-muted);
+}
+.state-boundary {
+  color: var(--refused);
+}
+.state-glyph.state-boundary {
+  background: var(--refused-bg);
+  border: 2px solid var(--refused);
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--refused-bg),
+    var(--refused-bg) 3px,
+    transparent 3px,
+    transparent 6px
+  );
+}
+
+/* ── Legend — the honest key, as ONE pinned collapsible bottom bar ───────── */
+.legend-h {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin: 0;
+}
+.legend-bar {
+  /* Pinned once to the bottom of the viewport, full width, above the stage content. The stage
+     reserves matching bottom padding so its last row never hides behind the collapsed bar. */
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 30;
+  background: var(--surface-1);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -2px 8px -4px rgba(0, 0, 0, 0.18);
+  padding: 8px 22px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.legend-bar-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.legend-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  flex: none;
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+  padding: 2px 0;
+  color: var(--text-secondary);
+}
+.legend-caret {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.legend-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  align-items: center;
+}
+.legend-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.legend-chip .state-glyph {
+  width: 18px;
+  height: 18px;
+  font-size: 11px;
+}
+.legend-chip-l {
+  white-space: nowrap;
+}
+/* The full descriptions are hidden until the bar is expanded. */
+.legend-grid {
+  display: none;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+.legend-bar.legend-open .legend-grid {
+  display: grid;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: var(--bg);
+}
+.legend-text b {
+  font-weight: 600;
+}
+.legend-text span {
+  display: block;
+  color: var(--text-muted);
+  font-size: 12px;
+  margin-top: 1px;
+}

package/dist/templates/portal/views-audit.css

@@ -0,0 +1,108 @@
+/*
+ * Phase-5 audit-depth styles — the portable-export bar, the file-aware freshness strip on the
+ * landing, and the node panel's provenance pins + freshness banner. Kept in its own focused
+ * file so the larger view stylesheets stay under the focused-file cap. Tokens come from
+ * tokens.css; the only saturated color is a state, resolved through the shared state classes —
+ * nothing here invents a green.
+ */
+
+/* ── Portable export bar (Coverage & Audit + Suppressions) ─────────────────── */
+.exp-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0 18px;
+}
+.exp-lbl {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-right: 4px;
+}
+.exp-btn {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface-1);
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.exp-btn:hover {
+  background: var(--surface-2);
+}
+.exp-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ── V1 file-aware freshness strip (the heartbeat) ─────────────────────────── */
+.ov-fresh {
+  border: 1px dashed var(--state-unverified-border, var(--border));
+  border-left-width: 4px;
+  border-radius: 12px;
+  background: var(--surface-1);
+  padding: 14px 16px;
+  margin-bottom: 16px;
+}
+.ov-fresh-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+}
+.ov-fresh-sub {
+  color: var(--text-secondary);
+  font-size: 12.5px;
+  line-height: 1.5;
+  margin: 6px 0 10px;
+}
+.ov-fresh-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ov-fresh-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-2);
+  color: var(--text-primary);
+  font-size: 11.5px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.ov-fresh-chip:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ── Node panel: provenance pins + freshness banner ────────────────────────── */
+.pan-prov {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0 4px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.pan-prov-k {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 2px 7px;
+  background: var(--surface-2);
+}
+.pan-fresh {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  border: 1px dashed var(--state-unverified-border, var(--border));
+  border-radius: 10px;
+  padding: 10px 12px;
+  margin: 8px 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}