@intentius/behold 0.2.3 → 0.4.0

package/web/index.html

@@ -13,16 +13,15 @@
       * { box-sizing: border-box; }
       html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
         font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; }
-      #app { display: grid; grid-template-columns: 1fr var(--inspect-w, 320px); grid-template-rows: auto auto auto 1fr auto;
+      /* #186: no header row at all — the graph runs full-bleed; every piece
+         of state the header used to carry (meta line, statusbar) lives in the
+         floating panel's footer instead. */
+      #app { display: grid; grid-template-columns: 1fr var(--inspect-w, 320px); grid-template-rows: 1fr auto;
         height: 100%; }
       #app.inspect-collapsed { grid-template-columns: 1fr 0; }
       #app.inspect-collapsed #inspect { display: none; }
-      header { grid-column: 1 / 3; grid-row: 1; padding: 10px 16px; border-bottom: 1px solid var(--line);
-        display: flex; align-items: baseline; gap: 12px; }
-      header h1 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .3px; }
-      header .meta { color: var(--muted); font-size: 12px; }
-      #graph { grid-row: 4; grid-column: 1; overflow: auto; position: relative; }
-      #inspect { grid-row: 4; grid-column: 2; border-left: 1px solid var(--line); background: var(--panel);
+      #graph { grid-row: 1; grid-column: 1; overflow: auto; position: relative; }
+      #inspect { grid-row: 1; grid-column: 2; border-left: 1px solid var(--line); background: var(--panel);
         padding: 14px; overflow: auto; position: relative; }
       #inspect h2 { font-size: 13px; margin: 0 0 8px; color: var(--muted); font-weight: 600;
         text-transform: uppercase; letter-spacing: .5px; }
@@ -101,48 +100,112 @@
       #actions button:hover, #inspect button:hover { border-color: var(--pending); }
       #actions button.approve { border-color: var(--managed); color: var(--managed); }
       #inspect button { border-color: var(--foreign); color: var(--foreign); }
-      #pickers select, #zoom-slot select { background: var(--panel); color: var(--fg); border: 1px solid var(--line);
+
+      /* ---- Floating control panel ------------------------------------------
+         An Adobe-style palette holding the controls that used to line the
+         header and its strips: zoom, scope lenses, substrate pills, the model
+         legends, deploy buttons and the dial. panel.js owns the chrome — drag
+         by the tab strip, magnetic snap to viewport edges/corners, collapse to
+         the strip (chevron or double-click), tabs, persisted position — and
+         app.js renders the tab contents (renderPanel*, renderSubstrates,
+         renderDial, initActions: their host elements simply live inside the
+         tabs now). Every control here stays reachable in ⌘K too — the panel
+         is the discoverable surface, the palette the fast one. Sits above the
+         graph's own floating buttons (z 2) and below toasts (60) / the load
+         scrim (100) / ⌘K (110). */
+      #panel { position: fixed; width: 272px; z-index: 40; background: var(--panel);
+        border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column;
+        box-shadow: 0 10px 34px rgba(0,0,0,.45); user-select: none; }
+      #panel.dragging { opacity: .95; }
+      /* #184: tabs-only — the strip doubles as the drag handle and carries the
+         ⌘K pill + collapse chevron. Collapsing hides only the body, so the
+         panel collapses TO the strip. */
+      #panel-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line);
+        cursor: grab; padding-right: 4px; }
+      #panel.dragging #panel-tabs { cursor: grabbing; }
+      #panel.collapsed #panel-tabs { border-bottom: none; }
+      #panel.collapsed #panel-body { display: none; }
+      #panel-tabs button[data-tab] { flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
+        color: var(--muted); font-size: 10.5px; padding: 7px 0; cursor: pointer; }
+      #panel-tabs button[data-tab]:hover { color: var(--fg); }
+      #panel-tabs button[data-tab].active { color: var(--fg); border-bottom-color: var(--pending); }
+      #panel-tabs #hintk { flex: none; align-self: center; font-size: 10px; padding: 1px 6px; margin-left: 2px; }
+      #panel-collapse { flex: none; align-self: center; background: none; border: none; color: var(--muted);
+        font-size: 12px; cursor: pointer; line-height: 1; padding: 2px 4px; }
+      #panel-collapse:hover { color: var(--fg); }
+      #panel-body { overflow-y: auto; max-height: min(62vh, 540px); padding: 10px 12px;
+        font-size: 12px; user-select: text; }
+      #panel-body section { display: none; }
+      #panel-body section.active { display: block; }
+      #panel h3 { margin: 14px 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
+        color: var(--muted); font-weight: 600; }
+      #panel h3:first-child { margin-top: 0; }
+      #panel .panel-muted { color: var(--muted); font-size: 11px; margin: 4px 0; }
+      #panel .prow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0; }
+      /* A radio-like option row: the current value carries the accent border. */
+      #panel .opt { display: block; width: 100%; text-align: left; background: none;
+        border: 1px solid transparent; border-radius: 6px; color: var(--fg); font-size: 12px;
+        padding: 4px 8px; cursor: pointer; }
+      #panel .opt:hover { border-color: var(--line); }
+      #panel .opt.active { border-color: var(--pending); color: var(--pending); }
+      #panel select { width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--line);
         border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
-      #pickers select:hover, #zoom-slot select:hover { border-color: var(--pending); }
+      #panel select:hover { border-color: var(--pending); }
+      #panel button.act { background: var(--bg); color: var(--fg); border: 1px solid var(--line);
+        border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
+      #panel button.act:hover { border-color: var(--pending); }
+      #panel input.panel-input { flex: 1; min-width: 0; background: var(--bg); color: var(--fg);
+        border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 11px; }
+      #panel input.panel-input:focus { border-color: var(--pending); outline: none; }
+      /* Model tab rows: legend counts (static) and clickable node rows. */
+      #panel .count-row, #panel .node-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
+      #panel .node-row { cursor: pointer; border-radius: 6px; padding: 3px 6px; }
+      #panel .node-row:hover { background: var(--bg); }
+      #panel .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
+      #panel .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      #panel .tag { color: var(--muted); font-size: 11px; white-space: nowrap; }
+
+      /* Substrate readiness (M5, #54) — one row per substrate on the panel's
+         Substrates tab: status dot + name + state, with its actions (bring up /
+         reset / run pipeline) visible inline again. #73 moved those into ⌘K;
+         they remain there too — same actions, two surfaces. */
+      #substrates { display: flex; flex-direction: column; gap: 2px; }
+      .sub { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
+      .sub .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+      .sub.up .dot { background: var(--managed); }
+      .sub.down .dot { background: var(--degraded); }
+      .sub.on-demand .dot { background: var(--pending); }
+      .sub.unknown .dot { background: var(--muted); }
+      .sub.blocked { opacity: .6; }
+      .sub.blocked .dot { background: var(--muted); }
+
       /* The observe → reconcile → apply dial (M2, #54): where the selected
-         target sits on the lifecycle progression. Its own row below the
-         header — a target-level control, not a per-node inspect detail. */
-      #dial { grid-column: 1 / 3; grid-row: 3; display: none; align-items: center; gap: 10px;
-        padding: 6px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
-      .dial-track { display: flex; align-items: center; gap: 8px; }
+         target sits on the lifecycle progression. Lives on the panel's Deploy
+         tab now, stacked vertically under the deploy actions. */
+      #actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+      #dial { display: none; flex-direction: column; align-items: stretch; gap: 8px;
+        font-size: 12px; margin-top: 10px; }
+      .dial-track { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
       .dial-arrow { color: var(--muted); }
       .dial-step { background: var(--panel); color: var(--fg); border: 1px solid var(--line);
         border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; }
       .dial-step:hover:not(:disabled) { border-color: var(--pending); }
       .dial-step.active { border-color: var(--pending); color: var(--pending); }
       .dial-step:disabled { opacity: .5; cursor: not-allowed; }
-      .dial-detail { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
-      /* Substrate readiness strip (M5, #54): is each substrate the project needs
-         actually up (Floci, k3d, GitLab CI, Forgejo)? A slim row of status pills
-         under the header — pure state (#73: the pills' own "Bring up"/"Reset"
-         buttons moved into the ⌘K palette, see paletteCommands() in app.js). */
-      #substrates { grid-column: 1 / 3; grid-row: 2; display: none; align-items: center; gap: 8px;
-        padding: 5px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
-      #substrates .label { color: var(--muted); margin-right: 2px; }
-      .sub { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
-        border-radius: 999px; padding: 2px 10px; }
-      .sub .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-      .sub.up .dot { background: var(--managed); }
-      .sub.down .dot { background: var(--degraded); }
-      .sub.on-demand .dot { background: var(--pending); }
-      .sub.unknown .dot { background: var(--muted); }
-      .sub.blocked { opacity: .6; }
-      .sub.blocked .dot { background: var(--muted); }
-      #nowline { grid-column: 1 / 3; grid-row: 5; margin: 0; max-height: 160px; overflow: auto; display: none;
+      .dial-detail { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
+
+      #nowline { grid-column: 1 / 3; grid-row: 2; margin: 0; max-height: 160px; overflow: auto; display: none;
         background: #010409; border-top: 1px solid var(--line); padding: 8px 12px; font: 11px/1.5 ui-monospace, monospace;
         color: var(--fg); white-space: pre-wrap; }
-      /* Persistent state strip (#73 "hide controls, never state"): current zoom
-         + env + stack (#76) + tier stay visible in the header even though the
-         pickers that used to sit here moved into the ⌘K palette — see
-         renderStatusbar() in app.js. #hintk is the palette's always-visible
-         entry point. */
-      #statusbar { color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
-        padding: 2px 10px; font-size: 11px; white-space: nowrap; }
+      /* #186: the panel's footer — the state the removed header carried. The
+         statusbar (#73 "hide controls, never state": current zoom + env +
+         stack + tier, see renderStatusbar() in app.js) and the meta line.
+         Hidden when the panel collapses, like the body. */
+      #panel-foot { border-top: 1px solid var(--line); padding: 6px 12px;
+        display: flex; flex-direction: column; gap: 2px; }
+      #panel.collapsed #panel-foot { display: none; }
+      #panel-foot .meta { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
+      #statusbar { color: var(--muted); font-size: 10.5px; cursor: pointer; }
       /* #131: why the current zoom rendered what it did. Same muted strip,
          italic so it reads as a caption on the state rather than more state. */
       .statusbar-note { font-style: italic; opacity: 0.85; }
@@ -178,58 +241,6 @@
       <span id="loading-msg">loading…</span>
     </div>
     <div id="app">
-      <header>
-        <h1>behold</h1>
-        <!-- Zoom sits here, first after the brand, rather than in #pickers on
-             the far right with the theme select. It is the control you reach
-             for constantly — the one thing worth the chrome #73 otherwise
-             thinned — and in the right-hand cluster it read as chrome and got
-             missed. The ⌘K palette keeps its entry; this is the same action,
-             discoverable without knowing the shortcut exists. -->
-        <span id="zoom-slot" style="display:flex;align-self:center"></span>
-        <span class="meta" id="meta">loading…</span>
-        <span id="legend" style="display:none;gap:12px;font-size:11px;align-self:center">
-          <span style="color:var(--managed)">● managed</span>
-          <span style="color:var(--foreign)">● foreign</span>
-          <span style="color:var(--pending)">● pending</span>
-          <!-- chant#1168 (#1089): a declared node chant couldn't read live
-               state for — its own state, not folded into managed/foreign/
-               pending. Reuses --muted, same convention as the component
-               legend's "not deployed" chip below. -->
-          <span style="color:var(--muted)">● unobserved</span>
-          <!-- chant#1180 (#1077, #86): a live, undeclared node whose owner
-               chain reaches a declared entity — expected runtime (a Pod its
-               Deployment created), never foreign and never drift. Its own
-               colour (--runtime) so it's never mistaken for foreign/pending. -->
-          <span style="color:var(--runtime)">● runtime</span>
-        </span>
-        <!-- M1.1 (#57), palette hardened M2 (#54): the component DAG's live
-             per-component AWS status — a different join than the entity
-             overlay above (component name -> CFN stack, not chant's
-             cross-substrate --live --overlay), so it's a separate legend
-             rather than reusing #legend's vocabulary. 4 states now (chant
-             0.18.29's machine-readable live/stack): pinhole has no literal
-             amber token, so "in progress" reuses its blue accent paint —
-             see src/component-status.ts's doc comment for the mapping. -->
-        <span id="component-legend" style="display:none;gap:12px;font-size:11px;align-self:center">
-          <span style="color:var(--managed)">● healthy</span>
-          <span style="color:var(--pending)">● in progress</span>
-          <span style="color:var(--degraded)">● rollback / failed</span>
-          <span style="color:var(--muted)">● not deployed</span>
-        </span>
-        <!-- #73 "hide controls, never state": zoom/env/stack/tier stay visible
-             here even though the pickers that used to render into this slot
-             moved into the ⌘K palette below — see renderStatusbar() in app.js.
-             stack (#76) only ever appears for a project that declares
-             chant.config.ts's stacks[]. -->
-        <span id="statusbar" style="margin-left:auto;align-self:center" title="current zoom · env · stack · tier — press ⌘K to change"></span>
-        <span id="pickers" style="display:flex;gap:8px;align-self:center"></span>
-        <span id="actions" style="display:flex;gap:8px;align-self:center"></span>
-        <a href="/lanes" style="color:var(--pending);text-decoration:none;font-size:12px;align-self:center">lanes →</a>
-        <span id="hintk" title="Command palette — deploy, apply, reset, bring up, lens/zoom, env/stack/tier, export… (⌘K / Ctrl+K)">⌘K</span>
-      </header>
-      <div id="substrates"></div>
-      <div id="dial"></div>
       <div id="graph"></div>
       <aside id="inspect">
         <div id="inspect-resize" title="Drag to resize"></div>
@@ -239,6 +250,47 @@
       <button id="inspect-reopen" title="Show inspect panel">inspect ‹</button>
       <pre id="nowline"></pre>
     </div>
+    <!-- The floating control panel (see the #panel CSS comment above). The
+         View tab keeps stable slots (#panel-zoom / #panel-viewtools /
+         #panel-theme) so the theme picker mounts once and survives re-renders;
+         Substrates and Deploy host the long-standing #substrates/#dial/#actions
+         elements, whose render functions in app.js are unchanged in spirit. -->
+    <div id="panel">
+      <!-- #184: tabs-only, no title bar — the tab strip IS the drag surface
+           (drag anywhere on it, a still click switches tabs), and it hosts
+           the ⌘K pill + collapse chevron. Collapse hides only the body: the
+           panel collapses TO the strip. -->
+      <div id="panel-tabs" title="Drag to move — snaps to edges and corners. Double-click to collapse.">
+        <button data-tab="view" class="active">View</button>
+        <button data-tab="scope">Scope</button>
+        <button data-tab="substrates">Substrates</button>
+        <button data-tab="model">Model</button>
+        <button data-tab="deploy">Deploy</button>
+        <span id="hintk" title="Command palette — deploy, apply, reset, bring up, lens/zoom, env/stack/tier, export… (⌘K / Ctrl+K)">⌘K</span>
+        <button id="panel-collapse" title="Collapse">▾</button>
+      </div>
+      <div id="panel-body">
+        <section data-tab="view" class="active">
+          <div id="panel-zoom"></div>
+          <div id="panel-viewtools"></div>
+          <h3>theme</h3>
+          <div id="panel-theme"></div>
+        </section>
+        <section data-tab="scope" id="tab-scope"></section>
+        <section data-tab="substrates"><div id="substrates"></div></section>
+        <section data-tab="model" id="tab-model"></section>
+        <section data-tab="deploy">
+          <div id="actions"></div>
+          <div id="dial"></div>
+        </section>
+      </div>
+      <!-- #186: the state the removed app header carried — the zoom/env strip
+           and the meta line. Clicking the strip opens ⌘K (renderStatusbar). -->
+      <div id="panel-foot">
+        <span id="statusbar" title="current zoom · env · stack · tier — change on the tabs above, or ⌘K"></span>
+        <span class="meta" id="meta">loading…</span>
+      </div>
+    </div>
     <!-- Command palette (⌘K / Ctrl+K, #73) — the spicypath FG-036 shape
          (../spicypath/src/index.html): input + filtered list, driven entirely
          by app.js's paletteCommands()/palRender()/openPalette()/closePalette(). -->

package/web/panel.js

@@ -0,0 +1,163 @@
+// Floating control panel chrome — the Adobe-style palette that replaced the
+// header strips. This module owns ONLY the chrome: drag by the tab strip,
+// magnetic snap to viewport edges and corners, collapse to the bar (button or
+// double-click), tab switching, and persistence. app.js renders what's inside
+// the tabs (renderPanel* plus the #substrates/#dial/#actions hosts). Plain
+// browser JS, no build step, themed entirely by the shared CSS vars — same
+// rules as app.js.
+
+const STORE_KEY = "behold.panel";
+const MARGIN = 12; // gap kept between a snapped panel and the viewport edge
+const SNAP = 32; // released within this many px of an edge → dock to it
+
+let panel = null;
+// snapX/snapY anchor an edge — a docked edge stays flush through window
+// resizes and content-height changes; null means a free x/y position, clamped
+// so the title bar can never leave the viewport.
+let state = { x: 12, y: 110, snapX: "left", snapY: "top", collapsed: false, tab: "view" };
+
+function loadState() {
+  try {
+    return { ...state, ...JSON.parse(localStorage.getItem(STORE_KEY) || "{}") };
+  } catch {
+    return { ...state };
+  }
+}
+function saveState() {
+  try {
+    localStorage.setItem(STORE_KEY, JSON.stringify(state));
+  } catch {
+    /* private mode */
+  }
+}
+
+// #186: no fixed chrome above the graph any more — top snap is the plain margin.
+function topEdge() {
+  return MARGIN;
+}
+
+function applyPosition() {
+  if (!panel) return;
+  const w = panel.offsetWidth;
+  const h = panel.offsetHeight;
+  let x = state.snapX === "left" ? MARGIN : state.snapX === "right" ? window.innerWidth - w - MARGIN : state.x;
+  let y = state.snapY === "top" ? topEdge() : state.snapY === "bottom" ? window.innerHeight - h - MARGIN : state.y;
+  x = Math.max(60 - w, Math.min(x, window.innerWidth - 60));
+  y = Math.max(0, Math.min(y, window.innerHeight - 34));
+  panel.style.left = x + "px";
+  panel.style.top = y + "px";
+}
+
+// On release: an edge within SNAP px of a viewport edge docks to it — both at
+// once is a corner. Anywhere else keeps the free position.
+function settle() {
+  const r = panel.getBoundingClientRect();
+  state.snapX = r.left <= MARGIN + SNAP ? "left" : window.innerWidth - r.right <= MARGIN + SNAP ? "right" : null;
+  state.snapY = r.top <= topEdge() + SNAP ? "top" : window.innerHeight - r.bottom <= MARGIN + SNAP ? "bottom" : null;
+  state.x = r.left;
+  state.y = r.top;
+  saveState();
+  applyPosition();
+}
+
+// #184: the tab strip is the drag surface — a drag may START on a tab button
+// (there is no other chrome to grab), so drag vs click is discriminated by
+// movement: past 4px it's a drag, and the click that fires on release is
+// swallowed in the capture phase so the tab doesn't also switch. The collapse
+// chevron and the ⌘K pill opt out of dragging entirely — they're pure acts.
+function initDrag(bar) {
+  let suppressClick = false;
+  bar.addEventListener(
+    "click",
+    (e) => {
+      if (!suppressClick) return;
+      suppressClick = false;
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    true,
+  );
+  bar.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0 || e.target.closest("#panel-collapse, #hintk")) return;
+    e.preventDefault();
+    const r = panel.getBoundingClientRect();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let moved = false;
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      if (!moved && Math.abs(dx) + Math.abs(dy) > 4) {
+        moved = true;
+        panel.classList.add("dragging");
+      }
+      if (!moved) return;
+      panel.style.left = r.left + dx + "px";
+      panel.style.top = r.top + dy + "px";
+    };
+    const onUp = () => {
+      panel.classList.remove("dragging");
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      if (moved) {
+        suppressClick = true; // the release's click must not switch tabs
+        settle();
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  });
+}
+
+export function setPanelTab(tab, { expand = true } = {}) {
+  if (!panel) return;
+  state.tab = tab;
+  for (const b of panel.querySelectorAll("#panel-tabs button[data-tab]")) b.classList.toggle("active", b.dataset.tab === tab);
+  for (const s of panel.querySelectorAll("#panel-body section")) s.classList.toggle("active", s.dataset.tab === tab);
+  if (expand && state.collapsed) {
+    setCollapsed(false); // saves state (incl. the new tab) + reapplies position
+  } else {
+    saveState();
+    applyPosition(); // tab heights differ — keep a bottom-snapped panel flush
+  }
+}
+
+function setCollapsed(on) {
+  state.collapsed = !!on;
+  panel.classList.toggle("collapsed", state.collapsed);
+  const btn = document.getElementById("panel-collapse");
+  if (btn) {
+    btn.textContent = state.collapsed ? "▸" : "▾";
+    btn.title = state.collapsed ? "Expand" : "Collapse";
+  }
+  saveState();
+  applyPosition();
+}
+export function togglePanelCollapsed() {
+  setCollapsed(!state.collapsed);
+}
+export function isPanelCollapsed() {
+  return !!state.collapsed;
+}
+
+export function initPanel() {
+  panel = document.getElementById("panel");
+  if (!panel) return;
+  state = loadState();
+  const bar = document.getElementById("panel-tabs");
+  initDrag(bar);
+  bar.addEventListener("dblclick", (e) => {
+    if (!e.target.closest("#panel-collapse, #hintk")) togglePanelCollapsed();
+  });
+  document.getElementById("panel-collapse").addEventListener("click", () => togglePanelCollapsed());
+  // Clicking a tab while collapsed expands (setPanelTab's default).
+  for (const b of panel.querySelectorAll("#panel-tabs button[data-tab]")) b.addEventListener("click", () => setPanelTab(b.dataset.tab));
+  const known = [...panel.querySelectorAll("#panel-tabs button[data-tab]")].map((b) => b.dataset.tab);
+  setCollapsed(state.collapsed);
+  setPanelTab(known.includes(state.tab) ? state.tab : known[0], { expand: false });
+  window.addEventListener("resize", applyPosition);
+  // Tab-content re-renders change the panel's height — a bottom-snapped panel
+  // must stay flush through them.
+  if (typeof ResizeObserver !== "undefined") new ResizeObserver(() => applyPosition()).observe(panel);
+  applyPosition();
+}