@bongos/core 1.18.3 → 1.18.19

package/modules/hall-ui/public/roadmap.html

@@ -4,168 +4,13 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Roadmap — {{worldName}}</title>
-  <meta name="description" content="Every declared version and the goals building toward it — {{worldName}}.">
+  <meta name="description" content="How the whole build is doing — the program at a glance, then each version — {{worldName}}.">
   <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/builders/style.css?v=2026-07-03-roadmap1">
-  <style>
-    /* Page-local styles for the Roadmap — version progress bars + their nested
-       goals. Moved verbatim from the Work Board (task 1757) so the board stays
-       about claimable work and this page owns the bigger picture. Everything
-       derives from the shared design tokens so instance packs reskin this page
-       along with the rest of the hall. */
-
-    /* ---- version progress bars (mirrors the status dashboard's rows) ---- */
-    .vbars { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
-    .vbar__top {
-      display: flex; align-items: baseline; justify-content: space-between;
-      gap: 8px; flex-wrap: wrap;
-    }
-    .vbar__name { font-weight: 600; font-size: 14px; color: var(--ink); }
-    .vbar__count { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
-    .vbar__bar {
-      display: flex; height: 10px; margin-top: 6px; border-radius: 999px;
-      overflow: hidden; background: var(--surface-2); border: 1px solid var(--border);
-    }
-    .vbar__seg { height: 100%; }
-    .vbar__seg--shipped   { background: var(--ok); }
-    .vbar__seg--confirmed { background: var(--info); }
-    .vbar__seg--completed { background: var(--warn); opacity: 0.6; }
-    .vbar__pct { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }
-
-    .vbar__legend {
-      display: flex; gap: 16px; flex-wrap: wrap;
-      font-size: 12.5px; color: var(--ink-soft);
-      margin: 2px 0 10px;
-    }
-    .vbar__legend span { display: inline-flex; align-items: center; gap: 6px; }
-    .vbar__swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
-    .vbar__swatch--shipped   { background: var(--ok); }
-    .vbar__swatch--confirmed { background: var(--info); }
-    .vbar__swatch--completed { background: var(--warn); opacity: 0.6; }
-
-    /* Short description (versions.done_when) — the same blurb the public status
-       mirror shows. Inside the dropdown it shares a row with the goals. */
-    .vbar__desc {
-      font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0;
-      width: 100%;
-    }
-
-    /* Per-version goals dropdown. */
-    .vbar__criteria { margin: 8px 0 0; padding: 0; }
-    .vbar__criteria summary {
-      cursor: pointer; list-style: none;
-      font-size: 13px; color: var(--ink-soft);
-    }
-    .vbar__criteria summary::-webkit-details-marker { display: none; }
-    .vbar__criteria summary::before {
-      content: "▸"; color: var(--ink-faint);
-      display: inline-block; width: 1em; transition: transform 150ms;
-    }
-    .vbar__criteria[open] > summary::before { transform: rotate(90deg); }
-    /* Description + goals stacked full-width, each filling the pane below
-       the version's progress bar. */
-    .vbar__details-body {
-      display: flex; flex-direction: column; gap: 12px;
-      align-items: stretch; margin-top: 8px;
-    }
-    .vbar__crit-list { list-style: none; margin: 0; padding: 0;
-      display: flex; flex-direction: column; gap: 5px; width: 100%; }
-    .vbar__crit { display: flex; align-items: flex-start; gap: 9px;
-      font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
-    .vbar__crit-mark { flex: 0 0 1.1em; text-align: center; color: var(--ink-faint); }
-    .vbar__crit--done .vbar__crit-mark { color: var(--ok); }
-    .vbar__crit--done .vbar__crit-text { color: var(--ink); }
-    /* BV1.R79: per-criterion expand — short bold-headline label, full text on click.
-       Override the outer .vbar__criteria summary caret on the nested summary. */
-    .vbar__crit-d { flex: 1 1 auto; min-width: 0; }
-    .vbar__crit-d > summary {
-      text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
-    .vbar__crit-d > summary::before { content: none; }
-    .vbar__crit-d[open] > summary { text-decoration: none; font-weight: 500; }
-    .vbar__crit-full { margin: 5px 0 2px; color: var(--ink-soft);
-      font-size: 12.5px; line-height: 1.5; }
-    /* BV1.R80 — goals under the version: a custom disclosure (plain div head + a
-       toggle button) so the criteria-expand and join/leave are ordinary, reliable
-       click targets — not a <button> nested in a <summary>, where the native
-       details-toggle makes button clicks flaky. */
-    .vgoal-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
-    .vgoal { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
-    .vgoal--achieved { background: var(--ok-weak); }
-    /* task 1761: a goal blocked by an unachieved prerequisite is dimmed + dashed. */
-    .vgoal--blocked { opacity: 0.66; border-style: dashed; }
-    .vgoal__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
-    /* task 1760 — priority + Archon drag-to-reorder. Everyone sees the number;
-       only an Archon gets the handle + draggable row (server enforces the write). */
-    .vgoal__handle { flex: none; cursor: grab; color: var(--ink-faint); font-size: 14px; line-height: 1; touch-action: none; }
-    .vgoal__handle:active { cursor: grabbing; }
-    .vgoal__priority {
-      flex: none; min-width: 1.4em; text-align: center;
-      font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
-      font-variant-numeric: tabular-nums;
-    }
-    .vgoal--dragging { opacity: 0.45; }
-    .vgoal__toggle {
-      flex: none; display: flex; align-items: center;
-      background: none; border: none; padding: 0; cursor: pointer; text-align: left;
-      font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink);
-    }
-    .vgoal__caret { flex: none; color: var(--ink-faint); display: inline-block; transition: transform 150ms; }
-    .vgoal__caret--open { transform: rotate(90deg); }
-    .vgoal__title {
-      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-      font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
-      color: var(--ink); text-decoration: none;
-    }
-    .vgoal__title--link:hover { color: var(--accent); text-decoration: underline; }
-    .vgoal__prog { flex: none; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
-    .vgoal__body { padding: 2px 12px 10px 34px; }
-    .vgoal__body[hidden] { display: none; }
-    .vgoal__nocrit { color: var(--ink-faint); font-size: 12.5px; margin: 4px 0; }
-    .vgoal__err { display: block; color: var(--danger); font-size: 12.5px; margin: 4px 0; }
-    .vgoal-action {
-      flex: none; font-size: 12px; font-weight: 600;
-      padding: 3px 12px; border-radius: var(--radius-sm); cursor: pointer;
-    }
-    .vgoal-join { background: var(--accent); border: 1px solid var(--accent-deep); color: #fff; }
-    .vgoal-join:hover:not(:disabled) { background: var(--accent-deep); }
-    .vgoal-leave { background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-soft); }
-    .vgoal-leave:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
-    .vgoal-action:disabled { opacity: 0.4; cursor: not-allowed; }
-
-    /* ---- task 1228: shipped versions folded into a reveal ---- */
-    /* A version that has shipped is history. It only crowds the live work,
-       so it folds into one collapsed reveal below the in-flight bars. */
-    .vbar__done-fold {
-      margin-top: 18px; padding-top: 14px;
-      border-top: 1px dashed var(--border);
-    }
-    .vbar__done-fold > summary {
-      cursor: pointer; list-style: none;
-      font-size: 13.5px; line-height: 1.5;
-      color: var(--ink-soft);
-    }
-    .vbar__done-fold > summary::-webkit-details-marker { display: none; }
-    .vbar__done-fold > summary::before {
-      content: "▸"; color: var(--ink-faint);
-      display: inline-block; width: 1.1em; transition: transform 150ms;
-    }
-    .vbar__done-fold[open] > summary::before { transform: rotate(90deg); }
-    .vbar__done-cta { color: var(--accent-text); }
-    .vbar__done-body { margin-top: 16px; }
-    /* Finished bars read as past-tense — softened so the eye rests on live work;
-       a hover lifts the dimming. */
-    .vbar--done { opacity: 0.72; transition: opacity 150ms; }
-    .vbar__done-body .vbar--done:hover { opacity: 1; }
-    .vbar__done-badge {
-      display: inline-flex; align-items: center; vertical-align: middle;
-      height: 18px; padding: 0 8px; border-radius: 999px;
-      background: var(--ok-weak); color: var(--ok);
-      font-size: 11px; font-weight: 600; margin-left: 5px; white-space: nowrap;
-    }
-  </style>
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-24-deck1">
+  <link rel="stylesheet" href="/builders/roadmap.css">
 </head>
 <body data-page="roadmap" data-page-title="Roadmap">
 
@@ -180,19 +25,9 @@
       </div>
 
       <main>
-        <section class="scroll" id="roadmap-scroll" aria-labelledby="roadmap-h">
-          <h2 id="roadmap-h" class="scroll__h">Versions, by progress</h2>
-          <p class="scroll__lede">Every declared version — product and internal — with its goals nested underneath. The public status page mirrors only the live ones.</p>
-
-          <div class="vbar__legend" aria-hidden="true">
-            <span><i class="vbar__swatch vbar__swatch--shipped"></i> shipped (live)</span>
-            <span><i class="vbar__swatch vbar__swatch--confirmed"></i> confirmed (awaiting merge)</span>
-            <span><i class="vbar__swatch vbar__swatch--completed"></i> completed (awaiting verification)</span>
-          </div>
-          <div class="vbars" id="roadmap-versions">
-            <div class="profile__placeholder">…</div>
-          </div>
-        </section>
+        <div id="rm-root">
+          <div class="profile__placeholder">Loading the roadmap…</div>
+        </div>
       </main>
 
       <footer class="app-foot" id="app-foot"></footer>
@@ -203,7 +38,9 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell.js?v=2026-07-03-roadmap1"></script>
+<!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
+<script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
-<script src="/builders/roadmap.js?v=2026-07-03-roadmap1"></script>
+<script src="/builders/roadmap.js?v=2026-07-24-deck1"></script>
 </body>
 </html>