@chrisdudek/yg 5.4.0 → 5.4.2

package/dist/templates/portal/app.css

@@ -0,0 +1,278 @@
+/*
+ * Component styles — the count header, the tree, the node panel, the glossary tooltip,
+ * and the command-palette overlay.
+ *
+ * The reusable surface pieces the views compose. Tokens come from tokens.css; the shell
+ * frame from shell.css. Calm, dense, document-like; the only saturated color is a state
+ * (resolved through the state classes in tokens.css). This file stays focused on the
+ * in-stage components and the ⌘K overlay.
+ */
+
+/* ── Count header + chips ───────────────────────────────────────────────── */
+.stage-header {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 16px;
+  margin-bottom: 18px;
+}
+.stage-title {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  letter-spacing: -0.01em;
+}
+.stage-sub {
+  color: var(--text-secondary);
+  font-size: 12.5px;
+  margin: 0 0 16px;
+}
+.count-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.count-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 7px;
+  border: 1px solid var(--border-subtle);
+  background: var(--surface-1);
+  font-size: 13px;
+}
+.chip-count {
+  font-weight: 600;
+}
+.chip-label {
+  color: var(--text-secondary);
+}
+
+.stage-intro {
+  margin-bottom: 14px;
+}
+.stage-notfound {
+  margin: 10px 0 0;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--unverified);
+  border-radius: 8px;
+  background: var(--surface-1);
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+.stage-vtitle {
+  font-size: 16px;
+  margin: 0 0 2px;
+}
+.stage-vblurb {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+.stage-note {
+  color: var(--text-muted);
+  font-size: 12.5px;
+  border: 1px dashed var(--border);
+  border-radius: 9px;
+  padding: 10px 12px;
+  margin: 4px 0 18px;
+}
+
+/* ── Tree (virtualized) ─────────────────────────────────────────────────── */
+.tree-filter {
+  margin: 4px 0 8px;
+}
+.tree-filter-input {
+  width: 100%;
+  padding: 7px 11px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 13px;
+}
+/* "You are here" marker for a row revealed by a palette pick / deep-link. */
+.tree-row-revealed {
+  background: var(--surface-3);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+.tree-mount {
+  margin: 4px 0 18px;
+}
+.tree-scroller {
+  position: relative;
+  height: 60vh;
+  min-height: 280px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-1);
+}
+.tree-spacer {
+  position: relative;
+  width: 100%;
+}
+.tree-window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  will-change: transform;
+}
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 28px;
+  padding-right: 12px;
+  border-bottom: 1px solid var(--surface-2);
+  font-size: 13px;
+  cursor: pointer;
+}
+.tree-row:hover {
+  background: var(--surface-3);
+}
+.tree-name {
+  font-weight: 500;
+}
+.tree-type {
+  margin-left: auto;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* ── Node panel ─────────────────────────────────────────────────────────── */
+.panel-title {
+  font-size: 13px;
+  margin: 0 0 10px;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  word-break: break-all;
+}
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+.panel-sub {
+  color: var(--text-secondary);
+  font-size: 12.5px;
+  margin: 0;
+}
+
+/* ── Glossary term tooltip ──────────────────────────────────────────────── */
+.term {
+  border-bottom: 1px dotted var(--border-strong);
+  cursor: help;
+}
+
+/* ── Command palette overlay ────────────────────────────────────────────── */
+.palette-backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 60px;
+  background: rgba(0, 0, 0, 0.32);
+  z-index: 50;
+}
+.palette-box {
+  width: 640px;
+  max-width: 92vw;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 16px 40px -10px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+}
+.palette-input {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 13px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.palette-search-ic {
+  color: var(--text-muted);
+}
+.palette-field {
+  flex: 1;
+  border: 0;
+  background: none;
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 16px;
+}
+.palette-field:focus {
+  outline: none;
+}
+.palette-results {
+  max-height: 380px;
+  overflow: auto;
+  padding: 6px;
+}
+.palette-empty {
+  padding: 16px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+.palette-row {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13.5px;
+  cursor: pointer;
+}
+.palette-row.on {
+  background: var(--surface-3);
+}
+.palette-ic {
+  width: 18px;
+  text-align: center;
+  color: var(--text-muted);
+}
+.palette-nm {
+  font-weight: 500;
+}
+.palette-sub {
+  color: var(--text-muted);
+  font-size: 11.5px;
+}
+.palette-kind {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text-muted);
+  border: 1px solid var(--border-subtle);
+  border-radius: 5px;
+  padding: 0 6px;
+}
+.palette-foot {
+  display: flex;
+  gap: 16px;
+  padding: 9px 14px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.portal-error {
+  color: var(--refused);
+  padding: 24px;
+  font-size: 14px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+}

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>