@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/src/chrome/marks-client.ts

@@ -0,0 +1,102 @@
+// The status menu's marks — responsive (approved / done) and marked-for-deletion — on the dev
+// server's two mark APIs (../../index.mjs). Both are dev-only middleware: on a staging build the
+// probe fails, the boxes stay disabled and show the state the page was built with, and the menu
+// says why. The box always shows the server's answer, never the click's.
+//
+//   GET /__lab/responsive → { done, approved }   PUT { done, approved }
+//   GET /__lab/cull       → { marked }           PUT { marked }   (400 with offenders if refused)
+const boxes = [...document.querySelectorAll<HTMLInputElement>("input[data-lab-mark]")];
+const note = document.querySelector<HTMLElement>("[data-lab-marks-note]");
+const respPill = document.querySelector<HTMLElement>("[data-lab-resp-pill]");
+const cullPill = document.querySelector<HTMLElement>("[data-lab-cull-pill]");
+
+type Resp = { done: string[]; approved: string[] };
+let resp: Resp | null = null;
+let marked: string[] | null = null;
+
+const getJson = async (url: string) => {
+  const response = await fetch(url, { headers: { accept: "application/json" } });
+  if (!response.ok) throw new Error(String(response.status));
+  return response.json();
+};
+const putJson = async (url: string, body: unknown) => {
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: { "content-type": "application/json", accept: "application/json" },
+    body: JSON.stringify(body),
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    const names = Array.isArray(data.offenders) ? data.offenders.map((o: { reason?: string }) => o.reason).join("; ") : "";
+    throw new Error(`${data.error || `HTTP ${response.status}`}${names ? ` — ${names}` : ""}`);
+  }
+  return data;
+};
+
+const paint = () => {
+  for (const box of boxes) {
+    const file = box.dataset.file!;
+    const kind = box.dataset.labMark;
+    if (kind === "cull") {
+      if (marked) {
+        box.checked = marked.includes(file);
+        box.disabled = Boolean(box.dataset.blocked);
+      }
+    } else if (resp) {
+      box.checked = (kind === "done" ? resp.done : resp.approved).includes(file);
+      box.disabled = false;
+    }
+  }
+  const doneBox = boxes.find((b) => b.dataset.labMark === "done");
+  if (respPill && doneBox && resp) {
+    respPill.textContent = doneBox.checked ? "responsive" : "not responsive";
+    respPill.classList.toggle("lab-pill--responsive", doneBox.checked);
+    respPill.classList.toggle("lab-pill--unresponsive", !doneBox.checked);
+  }
+  const cullBox = boxes.find((b) => b.dataset.labMark === "cull");
+  if (cullPill) cullPill.hidden = !(cullBox && cullBox.checked);
+};
+
+const say = (text: string) => {
+  if (note) note.textContent = text;
+};
+
+if (boxes.length) {
+  const wantsResp = boxes.some((b) => b.dataset.labMark !== "cull");
+  const wantsCull = boxes.some((b) => b.dataset.labMark === "cull");
+  Promise.allSettled([
+    wantsResp ? getJson("/__lab/responsive").then((d: Resp) => (resp = { done: d.done ?? [], approved: d.approved ?? [] })) : null,
+    wantsCull ? getJson("/__lab/cull").then((d: { marked?: string[] }) => (marked = d.marked ?? [])) : null,
+  ]).then(() => {
+    if (resp || marked) say("Saved to your repo as you tick.");
+    paint();
+  });
+
+  for (const box of boxes) {
+    box.addEventListener("change", async () => {
+      const file = box.dataset.file!;
+      const kind = box.dataset.labMark;
+      const want = box.checked;
+      box.checked = !want; // the server's answer decides
+      try {
+        if (kind === "cull" && marked) {
+          const next = want ? [...new Set([...marked, file])] : marked.filter((f) => f !== file);
+          marked = (await putJson("/__lab/cull", { marked: next })).marked ?? next;
+        } else if (resp) {
+          const set = new Set(kind === "done" ? resp.done : resp.approved);
+          if (want) set.add(file);
+          else set.delete(file);
+          const body = kind === "done" ? { done: [...set], approved: resp.approved } : { done: resp.done, approved: [...set] };
+          const data = await putJson("/__lab/responsive", body);
+          resp = { done: data.done ?? body.done, approved: data.approved ?? body.approved };
+        }
+        say("Saved.");
+      } catch (error) {
+        say(`Not saved: ${(error as Error).message}`);
+      }
+      paint();
+    });
+  }
+}
+
+export {};

package/src/chrome/model.ts

@@ -0,0 +1,142 @@
+// The chrome's data shapes, and the one place that decides what level 1 lists.
+//
+// Server-side only: everything here runs in the .astro frontmatter of a chrome page (dev: per
+// request; staging: once, at build). Nothing is sent to the browser but the HTML it renders.
+/// <reference path="../../virtual.d.ts" />
+import labConfig from "virtual:orbytes-lab/config.mjs";
+import type { IconName } from "./icons";
+import { labBase } from "../shell/lab-index";
+import storyModules from "virtual:astrobook/story-modules.mjs";
+
+/** Tiers that hold at least one stories file — an empty tier is not worth a row in level 1. */
+const tiersInUse = new Set(storyModules.map((mod) => mod.directory.split("/")[0] ?? ""));
+
+/** One row of a level 2 tree. A node with `children` is a group; one with only `href` is a leaf. */
+export interface TreeNode {
+  /** Stable across requests — the key its open/closed state is remembered under. */
+  id: string;
+  label: string;
+  href?: string;
+  icon?: IconName;
+  children?: TreeNode[];
+  /** This row is the page being shown. Its ancestors are forced open. */
+  current?: boolean;
+  /** The one-glyph status: live on the site, used by something live, an open task, or muted. */
+  dot?: "live" | "used" | "open" | "muted";
+  dotTitle?: string;
+  count?: number | string;
+  /** Extra words the panel search matches, beyond the label. */
+  search?: string;
+  /** Values the panel filter menu matches against, space-separated (e.g. "live section"). */
+  facets?: string;
+  disabled?: boolean;
+  title?: string;
+}
+
+export interface Crumb {
+  label: string;
+  href?: string;
+}
+
+/** One choice in the level 2 filter menu. `value` is matched against a node's `facets`. */
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * Which level 1 item a page belongs to. Tiers are the consumer's (`tiers` option), so they are
+ * keyed by id rather than listed here.
+ */
+export type NavKey =
+  | "home"
+  | "pages"
+  | `tier:${string}`
+  | "assets"
+  | "tasks-board"
+  | "tasks-all"
+  | "support"
+  | "settings";
+
+export interface NavItem {
+  key: NavKey;
+  label: string;
+  href: string;
+  icon: IconName;
+}
+
+export interface NavGroup {
+  id: string;
+  label: string;
+  icon: IconName;
+  items: NavItem[];
+}
+
+/** The tier's icon: the two conventional tiers get the design's own; anything else a component. */
+const tierIcon = (id: string): IconName =>
+  id === labConfig.sectionsTier || id === "sections" ? "sections" : id === "components" ? "components" : "component";
+
+/** Where the task views live, or null when the pin board is not running (a build, or `pin: false`). */
+export const tasksBase: string | null = labConfig.tasks ? labConfig.tasks.base : null;
+
+export const hrefs = {
+  home: labBase || "/",
+  pages: `${labBase}/pages`,
+  page: (route: string) => `${labBase}/pages/${route === "/" ? "index" : route.replace(/^\/+/, "")}`,
+  tier: (id: string) => `${labBase}/browse/${id}`,
+  folder: (path: string) => `${labBase}/browse/${path}`,
+  assets: `${labBase}/assets`,
+  support: `${labBase}/support`,
+  settings: `${labBase}/settings`,
+};
+
+export const navModel = (): { home: NavItem; groups: NavGroup[]; footer: NavItem[] } => {
+  const site: NavGroup = {
+    id: "site",
+    label: "Site",
+    icon: "site",
+    items: [
+      { key: "pages", label: "Pages", href: hrefs.pages, icon: "pages" },
+      ...labConfig.tiers.filter((tier) => tiersInUse.has(tier.id)).map((tier) => ({
+        key: `tier:${tier.id}` as NavKey,
+        label: tier.label,
+        href: hrefs.tier(tier.id),
+        icon: tierIcon(tier.id),
+      })),
+      { key: "assets", label: "Assets", href: hrefs.assets, icon: "assets" },
+    ],
+  };
+  const groups = [site];
+  // Tasks are the pin board, which is dev only — so the group exists only where the board does.
+  if (tasksBase) {
+    groups.push({
+      id: "tasks",
+      label: "Tasks",
+      icon: "tasks",
+      items: [
+        { key: "tasks-board", label: "Kanban Board", href: tasksBase, icon: "board" },
+        { key: "tasks-all", label: "All Tasks", href: `${tasksBase}/all`, icon: "all-tasks" },
+      ],
+    });
+  }
+  return {
+    home: { key: "home", label: "Home", href: hrefs.home, icon: "home" },
+    groups,
+    footer: [
+      { key: "support", label: "Support", href: hrefs.support, icon: "support" },
+      { key: "settings", label: "Settings", href: hrefs.settings, icon: "settings" },
+    ],
+  };
+};
+
+/** The group a nav key sits in, for the breadcrumb ("Site › Pages"). */
+export const crumbsFor = (key: NavKey, extra: Crumb[] = []): Crumb[] => {
+  const model = navModel();
+  for (const group of model.groups) {
+    const item = group.items.find((i) => i.key === key);
+    if (item) return [{ label: group.label }, { label: item.label, href: item.href }, ...extra];
+  }
+  return extra;
+};
+
+export { labBase, labConfig };

package/src/chrome/pins-data.ts

@@ -0,0 +1,30 @@
+// Open pin-board tickets per source file, for the "N open pins" pill. Dev only: `labConfig.tasks`
+// is null in every build, and then this returns an empty map without touching the disk.
+import { labConfig } from "./model";
+
+export interface PinCounts {
+  /** open tickets whose source file ends with the given site-relative path */
+  openFor: (file: string | null | undefined) => number;
+  total: number;
+  review: number;
+}
+
+const none: PinCounts = { openFor: () => 0, total: 0, review: 0 };
+
+export const pinCounts = async (): Promise<PinCounts> => {
+  if (!labConfig.tasks) return none;
+  try {
+    const { collectTickets, OPEN_STATUSES, READY_FOR_REVIEW } = await import("../pin/board.mjs");
+    const { tickets } = collectTickets(labConfig.tasks.repoRoot, { backlogDir: labConfig.tasks.backlogDir });
+    const open = (tickets as { status: string; source?: string }[]).filter((t) => OPEN_STATUSES.includes(t.status));
+    return {
+      // A ticket's source is repo-relative and a lab path is site-relative; in a monorepo the site
+      // sits below the repo root, so the comparison is on the tail.
+      openFor: (file) => (file ? open.filter((t) => t.source === file || t.source?.endsWith(`/${file}`)).length : 0),
+      total: open.length,
+      review: open.filter((t) => t.status === READY_FOR_REVIEW).length,
+    };
+  } catch {
+    return none;
+  }
+};

package/src/chrome/shell-client.ts

@@ -0,0 +1,372 @@
+// The chrome's behaviour — one module, run once per page (./Shell.astro has no client router, so
+// there is no swapped document to re-initialise and no guard against running twice).
+//
+//   · the two collapses: level 1 ⇄ icon rail (⌘⇧B), level 2 open ⇄ closed (⌘B), both (⌘.), each
+//     remembered in localStorage and applied before paint by the inline script in Shell.astro
+//   · the peek: level 2 closed, pointer at the stage's left edge → the panel slides out OVER the
+//     stage for as long as the pointer stays on it. Over, not beside: pushing the stage would
+//     resize the preview frame and trip its breakpoints
+//   · level 1 groups (Site, Tasks) folding, remembered
+//   · the tree: closed groups remembered, scroll restored, the current row kept in view
+//   · search (⌘K) and the filter menu, applied to the tree AND to any cards in the content that
+//     carry the same data-lab-search / data-lab-facets attributes
+//   · j / k: the navbar's own previous/next links when the page has them, the tree's rows when not
+//   · popover menus placed under the button that opened them
+//
+// Every shortcut asks window.__labIgnoreKey first (../LabHead.astro › THE KEYBOARD GUARD).
+
+declare global {
+  interface Window {
+    __labIgnoreKey?: (event: KeyboardEvent) => boolean;
+    labTheme?: { setTheme: (theme: "light" | "dark") => void; getTheme: () => "light" | "dark" };
+  }
+}
+
+const root = document.documentElement;
+const panel = document.getElementById("lab-l2");
+const page = root.dataset.labPage || "lab";
+
+const read = (key: string, store: Storage = localStorage): string | null => {
+  try {
+    return store.getItem(key);
+  } catch {
+    return null;
+  }
+};
+const write = (key: string, value: string | null, store: Storage = localStorage) => {
+  try {
+    if (value === null) store.removeItem(key);
+    else store.setItem(key, value);
+  } catch {
+    /* private mode — the state holds for this page and is forgotten after */
+  }
+};
+const ignoreKey = (event: KeyboardEvent) => window.__labIgnoreKey?.(event) ?? false;
+
+// ---- the two collapses ---------------------------------------------------------------------------
+const setL1 = (rail: boolean) => {
+  if (rail) root.dataset.labL1 = "rail";
+  else delete root.dataset.labL1;
+  write("lab-l1", rail ? "rail" : "open");
+};
+const setL2 = (closed: boolean) => {
+  if (!panel) return;
+  if (closed) root.dataset.labL2 = "closed";
+  else delete root.dataset.labL2;
+  delete root.dataset.labPeek;
+  write("lab-l2", closed ? "closed" : null);
+};
+const l1Rail = () => root.dataset.labL1 === "rail";
+const l2Closed = () => root.dataset.labL2 === "closed";
+const toggleL1 = () => setL1(!l1Rail());
+const toggleL2 = () => setL2(!l2Closed());
+// Focus mode: both away if either is showing, both back if both are away.
+const toggleFocus = () => {
+  const away = l1Rail() && (l2Closed() || !panel);
+  setL1(!away);
+  setL2(!away);
+};
+
+for (const button of document.querySelectorAll<HTMLElement>("[data-lab-toggle]")) {
+  button.addEventListener("click", () => (button.dataset.labToggle === "l1" ? toggleL1() : toggleL2()));
+}
+
+// Clicking the level 1 item you are already on toggles level 2, rather than reloading the page you
+// are looking at — the activity-bar behaviour.
+if (panel) {
+  for (const link of document.querySelectorAll<HTMLAnchorElement>('.lab-l1 a[aria-current="page"]')) {
+    link.addEventListener("click", (event) => {
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+      event.preventDefault();
+      toggleL2();
+    });
+  }
+}
+
+// ---- the peek -----------------------------------------------------------------------------------
+if (panel) {
+  const zone = document.querySelector<HTMLElement>("[data-lab-peek-zone]");
+  let openTimer = 0;
+  let closeTimer = 0;
+  const peek = (on: boolean) => {
+    if (on && l2Closed()) root.dataset.labPeek = "";
+    else delete root.dataset.labPeek;
+  };
+  zone?.addEventListener("mouseenter", () => {
+    clearTimeout(closeTimer);
+    openTimer = window.setTimeout(() => peek(true), 120);
+  });
+  zone?.addEventListener("mouseleave", () => clearTimeout(openTimer));
+  panel.addEventListener("mouseenter", () => clearTimeout(closeTimer));
+  panel.addEventListener("mouseleave", () => {
+    if (!("labPeek" in root.dataset)) return;
+    closeTimer = window.setTimeout(() => peek(false), 250);
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && "labPeek" in root.dataset) peek(false);
+  });
+}
+
+// ---- level 1 groups -----------------------------------------------------------------------------
+const GROUPS_KEY = "lab-nav-collapsed";
+const collapsedGroups = new Set<string>((read(GROUPS_KEY) || "").split(",").filter(Boolean));
+for (const group of document.querySelectorAll<HTMLElement>("[data-lab-group]")) {
+  const id = group.dataset.labGroup!;
+  const button = group.querySelector<HTMLButtonElement>("[data-lab-group-toggle]");
+  const apply = (collapsed: boolean) => {
+    group.toggleAttribute("data-collapsed", collapsed);
+    button?.setAttribute("aria-expanded", String(!collapsed));
+  };
+  // The group holding the current page is always open — you are in it.
+  apply(collapsedGroups.has(id) && !group.hasAttribute("data-lab-holds-current"));
+  button?.addEventListener("click", () => {
+    // In the rail the header is an icon whose items fly out on hover; a click goes to the first.
+    if (l1Rail()) {
+      const first = group.querySelector<HTMLAnchorElement>(".lab-nav-group__items a");
+      if (first) location.href = first.href;
+      return;
+    }
+    const collapsed = !group.hasAttribute("data-collapsed");
+    apply(collapsed);
+    if (collapsed) collapsedGroups.add(id);
+    else collapsedGroups.delete(id);
+    write(GROUPS_KEY, [...collapsedGroups].join(",") || null);
+  });
+}
+
+// ---- theme --------------------------------------------------------------------------------------
+for (const button of document.querySelectorAll<HTMLElement>("[data-lab-theme-toggle]")) {
+  button.addEventListener("click", () => {
+    const next = window.labTheme?.getTheme() === "dark" ? "light" : "dark";
+    window.labTheme?.setTheme(next);
+  });
+}
+
+// ---- the tree -----------------------------------------------------------------------------------
+const tree = document.querySelector<HTMLElement>("[data-lab-tree]");
+const body = document.querySelector<HTMLElement>("[data-lab-l2-body]");
+const CLOSED_KEY = "lab-tree-closed";
+const closedIds = new Set<string>((read(CLOSED_KEY) || "").split("\n").filter(Boolean));
+let searching = false;
+
+const applyStoredOpen = () => {
+  for (const details of tree?.querySelectorAll<HTMLDetailsElement>("details[data-lab-tree-id]") ?? []) {
+    const shut = closedIds.has(details.dataset.labTreeId!) && !details.hasAttribute("data-lab-holds-current");
+    details.open = !shut;
+  }
+};
+
+if (tree) {
+  applyStoredOpen();
+  tree.addEventListener(
+    "toggle",
+    (event) => {
+      const details = event.target as HTMLDetailsElement;
+      const id = details.dataset?.labTreeId;
+      if (!id || searching) return; // a search opens groups; that is not the reader's choice
+      if (details.open) closedIds.delete(id);
+      else closedIds.add(id);
+      write(CLOSED_KEY, [...closedIds].join("\n") || null);
+    },
+    true,
+  );
+}
+
+if (body) {
+  const SCROLL_KEY = `lab-l2-scroll:${page}`;
+  const saved = Number(read(SCROLL_KEY, sessionStorage));
+  if (saved) body.scrollTop = saved;
+  body.addEventListener("scrollend", () => write(SCROLL_KEY, String(body.scrollTop), sessionStorage));
+  const current = tree?.querySelector<HTMLElement>('[aria-current="page"]');
+  current?.scrollIntoView({ block: "nearest" });
+}
+
+// ---- search and filter --------------------------------------------------------------------------
+const search = document.querySelector<HTMLInputElement>("[data-lab-tree-search]");
+const filterButton = document.querySelector<HTMLElement>("[data-lab-filter-btn]");
+const FILTER_KEY = `lab-filter:${page}`;
+let facet = read(FILTER_KEY, sessionStorage) || "";
+
+const matches = (el: HTMLElement, terms: string[]) => {
+  const hay = el.dataset.labSearch || "";
+  if (!terms.every((term) => hay.includes(term))) return false;
+  if (!facet) return true;
+  return (el.dataset.labFacets || "").split(/\s+/).includes(facet);
+};
+
+/** Show a tree node when it, or anything beneath it, matches. Returns whether it is shown. */
+const filterNode = (li: HTMLElement, terms: string[]): boolean => {
+  const children = [...li.querySelectorAll<HTMLElement>(":scope > details > ul > .lab-tree__node")];
+  let shown: boolean;
+  if (children.length) {
+    const any = children.map((child) => filterNode(child, terms)).some(Boolean);
+    // A group whose own name matches shows everything under it (unless a facet is narrowing).
+    shown = any || (!facet && terms.length > 0 && matches(li, terms));
+    if (shown && !any) for (const child of children) showAll(child);
+    const details = li.querySelector<HTMLDetailsElement>(":scope > details");
+    if (details && (terms.length || facet) && any) details.open = true;
+  } else {
+    shown = matches(li, terms);
+  }
+  li.toggleAttribute("data-lab-hidden", !shown);
+  return shown;
+};
+const showAll = (li: HTMLElement) => {
+  li.removeAttribute("data-lab-hidden");
+  for (const child of li.querySelectorAll<HTMLElement>(".lab-tree__node")) child.removeAttribute("data-lab-hidden");
+};
+
+const applyFilter = () => {
+  const text = (search?.value || "").trim().toLowerCase();
+  const terms = text ? text.split(/\s+/) : [];
+  searching = terms.length > 0 || Boolean(facet);
+  if (tree) {
+    if (!searching) applyStoredOpen();
+    for (const li of tree.querySelectorAll<HTMLElement>(":scope > .lab-tree__node")) filterNode(li, terms);
+    let empty = tree.parentElement?.querySelector<HTMLElement>("[data-lab-tree-none]");
+    const anyShown = tree.querySelector(":scope > .lab-tree__node:not([data-lab-hidden])");
+    if (!anyShown && tree.children.length) {
+      if (!empty) {
+        empty = document.createElement("p");
+        empty.className = "lab-tree__empty";
+        empty.dataset.labTreeNone = "";
+        empty.textContent = "Nothing matches.";
+        tree.after(empty);
+      }
+    } else empty?.remove();
+  }
+  // The content's cards follow the same search and filter, so one box narrows both.
+  for (const card of document.querySelectorAll<HTMLElement>(".lab-content [data-lab-search]")) {
+    card.toggleAttribute("data-lab-hidden", !matches(card, terms));
+  }
+  for (const section of document.querySelectorAll<HTMLElement>(".lab-content [data-lab-filter-section]")) {
+    const any = section.querySelector("[data-lab-search]:not([data-lab-hidden])");
+    section.hidden = !any;
+  }
+  filterButton?.setAttribute("aria-pressed", String(Boolean(facet)));
+};
+
+search?.addEventListener("input", applyFilter);
+search?.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape") return;
+  if (search.value) {
+    search.value = "";
+    applyFilter();
+  } else search.blur();
+});
+
+const filterItems = [...document.querySelectorAll<HTMLElement>("[data-lab-filter]")];
+const markFilter = () => {
+  for (const item of filterItems) item.setAttribute("aria-checked", String(item.dataset.labFilter === facet));
+};
+if (filterItems.length && !filterItems.some((item) => item.dataset.labFilter === facet)) facet = "";
+for (const item of filterItems) {
+  item.addEventListener("click", () => {
+    facet = item.dataset.labFilter || "";
+    write(FILTER_KEY, facet || null, sessionStorage);
+    markFilter();
+    applyFilter();
+    item.closest<HTMLElement>("[popover]")?.hidePopover?.();
+  });
+}
+markFilter();
+if (facet) applyFilter();
+
+// ---- keys ---------------------------------------------------------------------------------------
+const stepLinks = () => {
+  // A page with its own previous/next (a story or a page view) steps through those.
+  const prev = document.querySelector<HTMLAnchorElement>('a[data-lab-step="prev"]');
+  const next = document.querySelector<HTMLAnchorElement>('a[data-lab-step="next"]');
+  if (prev || next || document.querySelector("[data-lab-step]")) return { prev, next };
+  // Otherwise the tree's visible leaves.
+  const leaves = [...(tree?.querySelectorAll<HTMLAnchorElement>("a[data-lab-leaf]") ?? [])].filter(
+    (a) => a.offsetParent !== null,
+  );
+  const at = leaves.findIndex((a) => a.getAttribute("aria-current") === "page");
+  return {
+    prev: at > 0 ? leaves[at - 1] : at === -1 ? leaves[leaves.length - 1] : null,
+    next: at === -1 ? leaves[0] : leaves[at + 1] ?? null,
+  };
+};
+
+document.addEventListener("keydown", (event) => {
+  const key = event.key.toLowerCase();
+  const mod = event.metaKey || event.ctrlKey;
+
+  // ⌘K stays live inside the lab's own search box, where it means "select what is there".
+  if (mod && key === "k") {
+    if (event.target !== search && ignoreKey(event)) return;
+    if (!search) return;
+    event.preventDefault();
+    if (l2Closed()) setL2(false);
+    search.focus();
+    search.select();
+    return;
+  }
+  if (ignoreKey(event)) return;
+  if (mod && key === "b") {
+    event.preventDefault();
+    if (event.shiftKey) toggleL1();
+    else toggleL2();
+    return;
+  }
+  if (mod && key === ".") {
+    event.preventDefault();
+    toggleFocus();
+    return;
+  }
+  if (mod || event.altKey || event.shiftKey || event.isComposing) return;
+  if (key !== "j" && key !== "k") return;
+  const { prev, next } = stepLinks();
+  const target = key === "j" ? next : prev;
+  if (!target) return;
+  event.preventDefault();
+  target.click();
+});
+
+// ---- popover menus ------------------------------------------------------------------------------
+// Placed under the button that opened them. CSS anchor positioning would do this with no script,
+// but it is not in every browser yet; this is twelve lines.
+for (const menu of document.querySelectorAll<HTMLElement>(".lab-menu[popover]")) {
+  menu.addEventListener("toggle", (event) => {
+    if ((event as ToggleEvent).newState !== "open") return;
+    const invoker = document.querySelector<HTMLElement>(`[popovertarget="${menu.id}"]`);
+    if (!invoker) return;
+    const box = invoker.getBoundingClientRect();
+    const width = menu.offsetWidth;
+    const alignEnd = menu.dataset.labAlign === "end";
+    let left = alignEnd ? box.right - width : box.left;
+    left = Math.max(8, Math.min(left, window.innerWidth - width - 8));
+    let top = box.bottom + 4;
+    if (top + menu.offsetHeight > window.innerHeight - 8) top = Math.max(8, box.top - menu.offsetHeight - 4);
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+  });
+}
+
+// ---- card thumbnails ----------------------------------------------------------------------------
+// Each thumbnail is the real bare render in an <iframe> sized to a virtual viewport
+// (data-frame-w × data-frame-h), scaled down to the card. One observer for all of them.
+const thumbs = document.querySelectorAll<HTMLElement>("[data-frame-w]");
+if (thumbs.length) {
+  const fit = (thumb: HTMLElement) => {
+    const frame = thumb.querySelector<HTMLElement>("iframe");
+    if (!frame) return;
+    const w = Number(thumb.dataset.frameW) || 1440;
+    const h = Number(thumb.dataset.frameH) || 900;
+    const scale = thumb.clientWidth / w;
+    frame.style.width = `${w}px`;
+    frame.style.height = `${h}px`;
+    frame.style.transform = `scale(${scale})`;
+    thumb.style.aspectRatio = `${w} / ${h}`;
+  };
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) fit(entry.target as HTMLElement);
+  });
+  for (const thumb of thumbs) {
+    fit(thumb);
+    observer.observe(thumb);
+  }
+}
+
+export {};