@graphlearning/shell 0.10.0 → 0.10.2

package/dist/index.js

@@ -1,60 +1,52 @@
-import { jsx as t, jsxs as h, Fragment as H } from "react/jsx-runtime";
-import { useRef as $, useState as b, useLayoutEffect as O, useEffect as k, useCallback as I, useMemo as M } from "react";
-import { SceneView as R } from "@graphlearning/flow";
-import { Home as Y, Volume2 as Z, VolumeX as J, Moon as Q, Sun as U, ChevronLeft as ee, ChevronRight as te } from "lucide-react";
-import ne from "react-markdown";
-import ae from "remark-gfm";
-function X(e, a) {
-  return `${e.id}-${a.id}`;
-}
-function D(e) {
-  return e.sections.map((a) => ({ section: a, slug: X(e, a) }));
-}
-const G = 806;
-function re() {
-  const e = $(null), [a, r] = b(1);
-  return O(() => {
+import { jsx as t, jsxs as d, Fragment as R } from "react/jsx-runtime";
+import { useRef as S, useState as x, useLayoutEffect as J, useEffect as k, useCallback as I, useMemo as C } from "react";
+import { SceneView as V } from "@graphlearning/flow";
+import { Home as Q, Volume2 as U, VolumeX as ee, Moon as te, Sun as ne, ChevronLeft as ae, ChevronRight as re } from "lucide-react";
+import se from "react-markdown";
+import oe from "remark-gfm";
+const X = (e, a) => `${e.id}-${a.id}`, z = (e) => e.sections.map((a) => ({ section: a, slug: X(e, a) })), G = 806;
+function ie() {
+  const e = S(null), [a, r] = x(1);
+  return J(() => {
     const o = e.current;
     if (!o) return;
-    const d = () => r(o.clientWidth / G);
-    d();
-    const g = new ResizeObserver(d);
+    const c = () => r(o.clientWidth / G);
+    c();
+    const g = new ResizeObserver(c);
     return g.observe(o), () => g.disconnect();
   }, []), { ref: e, zoom: a };
 }
-function se({ slide: e, open: a }) {
-  const { ref: r, zoom: o } = re();
-  return /* @__PURE__ */ t("aside", { ref: r, className: `slide-panel${a ? " slide-panel--open" : ""}`, children: /* @__PURE__ */ t("div", { className: "slide-panel__scaler", style: { width: G, zoom: o }, children: /* @__PURE__ */ t(ne, { remarkPlugins: [ae], children: e }) }) });
+function ce({ slide: e, open: a }) {
+  const { ref: r, zoom: o } = ie();
+  return /* @__PURE__ */ t("aside", { ref: r, className: `slide-panel${a ? " slide-panel--open" : ""}`, children: /* @__PURE__ */ t("div", { className: "slide-panel__scaler", style: { width: G, zoom: o }, children: /* @__PURE__ */ t(se, { remarkPlugins: [oe], children: e }) }) });
 }
-const z = 10;
-function ie({ audio: e }) {
-  const [a, r] = b(0), [o, d] = b(0), g = $(null);
+const j = 10, H = ["loadedmetadata", "durationchange", "timeupdate", "seeked", "ended", "emptied", "error"], A = (e) => {
+  const a = Number.isFinite(e) && e > 0 ? e : 0;
+  return `${Math.floor(a / 60)}:${String(Math.floor(a % 60)).padStart(2, "0")}`;
+};
+function le({ audio: e }) {
+  const [a, r] = x(0), [o, c] = x(0);
   if (k(() => {
     if (!e) return;
     const n = () => {
-      r(e.currentTime), d(Number.isFinite(e.duration) ? e.duration : 0);
+      r(e.currentTime), c(Number.isFinite(e.duration) ? e.duration : 0);
     };
-    n();
-    const u = ["loadedmetadata", "durationchange", "timeupdate", "seeked", "ended", "emptied", "error"];
-    return u.forEach((s) => e.addEventListener(s, n)), () => u.forEach((s) => e.removeEventListener(s, n));
+    return n(), H.forEach((u) => e.addEventListener(u, n)), () => H.forEach((u) => e.removeEventListener(u, n));
   }, [e]), !e || !o) return null;
-  const f = (n) => {
-    const u = g.current;
-    if (!u) return;
-    const s = u.getBoundingClientRect(), m = Math.min(1, Math.max(0, (n - s.left) / s.width));
-    e.currentTime = m * o, r(e.currentTime);
+  const g = (n) => {
+    e.currentTime = Math.min(o, Math.max(0, n)), r(e.currentTime);
+  }, h = (n, u) => {
+    const { left: s, width: m } = n.getBoundingClientRect();
+    g((u - s) / m * o);
   }, l = (n) => {
-    const u = (s) => {
-      n.preventDefault(), n.stopPropagation(), e.currentTime = Math.min(o, Math.max(0, e.currentTime + s)), r(e.currentTime);
-    };
-    n.key === "ArrowLeft" ? u(-z) : n.key === "ArrowRight" ? u(z) : n.key === "Home" ? u(-o) : n.key === "End" && u(o);
-  }, p = `${Math.min(100, a / o * 100)}%`;
-  return /* @__PURE__ */ h("span", { className: "reel-foot__audio", children: [
+    const u = { ArrowLeft: -j, ArrowRight: j, Home: -o, End: o }[n.key];
+    u !== void 0 && (n.preventDefault(), n.stopPropagation(), g(e.currentTime + u));
+  }, _ = `${Math.min(100, a / o * 100)}%`;
+  return /* @__PURE__ */ d("span", { className: "reel-foot__audio", children: [
     /* @__PURE__ */ t("span", { className: "reel-foot__count reel-foot__time", children: A(a) }),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ d(
       "div",
       {
-        ref: g,
         className: "reel-foot__track",
         role: "slider",
         tabIndex: 0,
@@ -65,388 +57,316 @@ function ie({ audio: e }) {
         "aria-valuetext": `${A(a)} of ${A(o)}`,
         onKeyDown: l,
         onPointerDown: (n) => {
-          n.currentTarget.setPointerCapture(n.pointerId), f(n.clientX);
+          n.currentTarget.setPointerCapture(n.pointerId), h(n.currentTarget, n.clientX);
         },
         onPointerMove: (n) => {
-          n.currentTarget.hasPointerCapture(n.pointerId) && f(n.clientX);
+          n.currentTarget.hasPointerCapture(n.pointerId) && h(n.currentTarget, n.clientX);
         },
         children: [
-          /* @__PURE__ */ t("span", { className: "reel-foot__fill", style: { width: p } }),
-          /* @__PURE__ */ t("span", { className: "reel-foot__thumb", style: { left: p } })
+          /* @__PURE__ */ t("span", { className: "reel-foot__fill", style: { width: _ } }),
+          /* @__PURE__ */ t("span", { className: "reel-foot__thumb", style: { left: _ } })
         ]
       }
     ),
     /* @__PURE__ */ t("span", { className: "reel-foot__count reel-foot__time", children: A(o) })
   ] });
 }
-function A(e) {
-  const a = Number.isFinite(e) && e > 0 ? e : 0;
-  return `${Math.floor(a / 60)}:${String(Math.floor(a % 60)).padStart(2, "0")}`;
+const D = {
+  dark: { glyph: "☾", label: "Dark theme" },
+  light: { glyph: "☀", label: "Light theme" }
+}, q = (e) => {
+  const a = e === "dark" ? "light" : "dark";
+  return `${D[e].label}. Switch to ${D[a].label.toLowerCase()}.`;
+};
+function de({ theme: e, onToggle: a }) {
+  const r = q(e);
+  return /* @__PURE__ */ t("button", { className: "site__icon", type: "button", onClick: a, "aria-label": r, title: r, children: D[e].glyph });
 }
-function oe({
+const E = (e) => ({ "aria-label": e, title: e });
+function he({
   section: e,
   getScene: a,
-  capture: r = !1,
+  capture: r,
   eyebrow: o,
-  index: d = 0,
-  total: g = 0,
-  onHome: f,
+  index: c,
+  total: g,
+  onHome: h,
   onPrev: l,
-  onNext: p,
-  narrating: n = !1,
+  onNext: _,
+  narrating: n,
   onToggleNarration: u,
-  narrationAudio: s = null,
-  theme: m = "dark",
-  onToggleTheme: v
+  narrationAudio: s,
+  theme: m,
+  onToggleTheme: N
 }) {
-  const [_, w] = b(!1), E = a(e.scene);
-  return E ? /* @__PURE__ */ h("div", { className: `stage stage--section${r ? " stage--capture" : ""}`, children: [
-    /* @__PURE__ */ h("header", { className: "reel-head", children: [
-      o && /* @__PURE__ */ t("button", { className: "reel-head__eyebrow", onClick: f, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: o }),
+  const [p, w] = x(!1), $ = a(e.scene);
+  if (!$) return /* @__PURE__ */ d("div", { className: "stage stage--missing", children: [
+    "no scene: ",
+    e.scene
+  ] });
+  const T = m === "dark";
+  return /* @__PURE__ */ d("div", { className: "stage stage--section", children: [
+    /* @__PURE__ */ d("header", { className: "reel-head", children: [
+      /* @__PURE__ */ t("button", { className: "reel-head__eyebrow", onClick: h, ...E("Back to catalog (Esc)"), children: o }),
       /* @__PURE__ */ t("h1", { className: "reel-head__title", children: e.title })
     ] }),
-    !r && /* @__PURE__ */ h("footer", { className: "reel-foot reel-foot--controls", children: [
-      /* @__PURE__ */ h("span", { className: "reel-foot__grp", children: [
-        /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: f, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: /* @__PURE__ */ t(Y, { size: 17 }) }),
+    !r && /* @__PURE__ */ d("footer", { className: "reel-foot reel-foot--controls", children: [
+      /* @__PURE__ */ d("span", { className: "reel-foot__grp", children: [
+        /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: h, ...E("Back to catalog (Esc)"), children: /* @__PURE__ */ t(Q, { size: 17 }) }),
         /* @__PURE__ */ t(
           "button",
           {
             className: "reel-foot__ctrl",
             onClick: u,
-            "aria-label": n ? "Pause narration (Space)" : "Play narration (Space)",
-            title: n ? "Pause narration (Space)" : "Play narration (Space)",
-            children: n ? /* @__PURE__ */ t(Z, { size: 18 }) : /* @__PURE__ */ t(J, { size: 18 })
+            ...E(n ? "Pause narration (Space)" : "Play narration (Space)"),
+            children: n ? /* @__PURE__ */ t(U, { size: 18 }) : /* @__PURE__ */ t(ee, { size: 18 })
           }
         ),
-        v && /* @__PURE__ */ t(
-          "button",
-          {
-            className: "reel-foot__ctrl",
-            onClick: v,
-            "aria-label": m === "dark" ? "Dark theme. Switch to light theme." : "Light theme. Switch to dark theme.",
-            title: m === "dark" ? "Dark theme. Switch to light theme." : "Light theme. Switch to dark theme.",
-            children: m === "dark" ? /* @__PURE__ */ t(Q, { size: 17 }) : /* @__PURE__ */ t(U, { size: 17 })
-          }
-        )
+        N && /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: N, ...E(q(m)), children: T ? /* @__PURE__ */ t(te, { size: 17 }) : /* @__PURE__ */ t(ne, { size: 17 }) })
       ] }),
-      /* @__PURE__ */ t(ie, { audio: s }),
-      /* @__PURE__ */ h("span", { className: "reel-foot__nav", children: [
-        /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: l, "aria-label": "Previous section (Shift+←)", title: "Previous section (Shift+←)", children: /* @__PURE__ */ t(ee, { size: 19 }) }),
-        /* @__PURE__ */ h("span", { className: "reel-foot__count reel-foot__count--live", children: [
-          d + 1,
+      /* @__PURE__ */ t(le, { audio: s }),
+      /* @__PURE__ */ d("span", { className: "reel-foot__nav", children: [
+        /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: l, ...E("Previous section (Shift+←)"), children: /* @__PURE__ */ t(ae, { size: 19 }) }),
+        /* @__PURE__ */ d("span", { className: "reel-foot__count reel-foot__count--live", children: [
+          c + 1,
           " / ",
           g
         ] }),
-        /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: p, "aria-label": "Next section (Shift+→)", title: "Next section (Shift+→)", children: /* @__PURE__ */ t(te, { size: 19 }) })
+        /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: _, ...E("Next section (Shift+→)"), children: /* @__PURE__ */ t(re, { size: 19 }) })
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: "scene-area", children: /* @__PURE__ */ t(R, { scene: E, focusId: e.focus, theme: m }) }),
-    !r && /* @__PURE__ */ t(
-      "button",
-      {
-        className: "slide-toggle",
-        onClick: () => w((S) => !S),
-        "aria-label": _ ? "Hide slide" : "Show slide",
-        children: _ ? "›" : "‹"
-      }
-    ),
-    /* @__PURE__ */ t(se, { slide: e.slide, open: _ })
-  ] }) : /* @__PURE__ */ h("div", { className: "stage stage--missing", children: [
-    "no scene: ",
-    e.scene
+    /* @__PURE__ */ t("div", { className: "scene-area", children: /* @__PURE__ */ t(V, { scene: $, focusId: e.focus, theme: m }) }),
+    !r && /* @__PURE__ */ t("button", { className: "slide-toggle", onClick: () => w((y) => !y), "aria-label": p ? "Hide slide" : "Show slide", children: p ? "›" : "‹" }),
+    /* @__PURE__ */ t(ce, { slide: e.slide, open: p })
   ] });
 }
-const le = [
+const ue = [
   { id: "courses", label: "Courses" },
   { id: "labs", label: "Labs" },
   { id: "coach", label: "Coach" }
 ];
-function ce() {
-  return /* @__PURE__ */ h("svg", { className: "site__logo", width: "28", height: "28", viewBox: "0 0 512 512", "aria-hidden": "true", children: [
+function me() {
+  return /* @__PURE__ */ d("svg", { className: "site__logo", width: "28", height: "28", viewBox: "0 0 512 512", "aria-hidden": "true", children: [
     /* @__PURE__ */ t("rect", { width: "512", height: "512", rx: "80", fill: "#e8804f" }),
-    /* @__PURE__ */ h("g", { fill: "none", stroke: "#ffffff", strokeWidth: "58", strokeLinecap: "butt", strokeLinejoin: "miter", children: [
+    /* @__PURE__ */ d("g", { fill: "none", stroke: "#ffffff", strokeWidth: "58", strokeLinecap: "butt", strokeLinejoin: "miter", children: [
       /* @__PURE__ */ t("path", { d: "M 373 200 A 130 130 0 1 0 373 312" }),
       /* @__PURE__ */ t("path", { d: "M 283 312 L 373 312 L 373 410" })
     ] })
   ] });
 }
-function de({
+function fe({
   kind: e = "courses",
-  nav: a = le,
+  nav: a = ue,
   home: r = "/",
   actions: o
 }) {
-  return /* @__PURE__ */ t("header", { className: "site", children: /* @__PURE__ */ h("div", { className: "site__inner", children: [
-    /* @__PURE__ */ h("a", { className: "site__brand", href: r, children: [
-      /* @__PURE__ */ t(ce, {}),
+  return /* @__PURE__ */ t("header", { className: "site", children: /* @__PURE__ */ d("div", { className: "site__inner", children: [
+    /* @__PURE__ */ d("a", { className: "site__brand", href: r, children: [
+      /* @__PURE__ */ t(me, {}),
       /* @__PURE__ */ t("span", { className: "site__name", children: "GraphL" })
     ] }),
-    /* @__PURE__ */ t("nav", { className: "site__nav", "aria-label": "Sections", children: a.map((d) => /* @__PURE__ */ t(
-      "a",
-      {
-        className: "site__link",
-        href: `${r}#${d.id}`,
-        ...d.id === e ? { "aria-current": "page" } : {},
-        children: d.label
-      },
-      d.id
-    )) }),
+    /* @__PURE__ */ t("nav", { className: "site__nav", "aria-label": "Sections", children: a.map((c) => /* @__PURE__ */ t("a", { className: "site__link", href: `${r}#${c.id}`, "aria-current": c.id === e ? "page" : void 0, children: c.label }, c.id)) }),
     /* @__PURE__ */ t("div", { className: "site__actions", children: o })
   ] }) });
 }
-function he({
+function ge({
   courses: e,
   subject: a,
   kind: r,
   actions: o
 }) {
-  const [d, g] = b(() => /* @__PURE__ */ new Set()), f = (l) => g((p) => {
-    const n = new Set(p);
-    return n.has(l) ? n.delete(l) : n.add(l), n;
+  const [c, g] = x(/* @__PURE__ */ new Set()), h = (l) => g((_) => {
+    const n = new Set(_);
+    return n.delete(l) || n.add(l), n;
   });
-  return (
-    // The site bar is a SIBLING of .idx, not a child: it is full-bleed (its rule spans the
-    // viewport) while .idx is a 940px centred column. Both use the same width and gutters, so the
-    // brand lines up with the card edge below it.
-    /* @__PURE__ */ h(H, { children: [
-      /* @__PURE__ */ t(de, { kind: r, actions: o }),
-      /* @__PURE__ */ h("div", { className: "idx", children: [
-        /* @__PURE__ */ t("header", { className: "idx__head", children: /* @__PURE__ */ t("h1", { className: "idx__subject", children: a }) }),
-        e.length === 0 ? /* @__PURE__ */ t("p", { className: "idx__empty", children: "No courses authored yet — the app shell is ready." }) : /* @__PURE__ */ t("ol", { className: "idx__grid", children: e.map((l, p) => {
-          const n = D(l), u = d.has(l.id);
-          return /* @__PURE__ */ h("li", { className: `idx-card${u ? " idx-card--open" : ""}`, children: [
-            /* @__PURE__ */ h(
-              "button",
-              {
-                className: "idx-card__head",
-                onClick: () => f(l.id),
-                "aria-expanded": u,
-                children: [
-                  /* @__PURE__ */ t("span", { className: "idx-card__num", children: String(p + 1).padStart(2, "0") }),
-                  /* @__PURE__ */ t("span", { className: "idx-card__title", children: l.title }),
-                  /* @__PURE__ */ h("span", { className: "idx-card__count", children: [
-                    n.length,
-                    " sections"
-                  ] }),
-                  /* @__PURE__ */ t("span", { className: "idx-card__toggle", "aria-hidden": "true", children: "⌄" })
-                ]
-              }
-            ),
-            u && /* @__PURE__ */ t("ol", { className: "idx-sec", children: n.map(({ section: s, slug: m }, v) => /* @__PURE__ */ t("li", { className: "idx-sec__row", children: /* @__PURE__ */ h("a", { href: `#/${m}`, children: [
-              /* @__PURE__ */ t("span", { className: "idx-sec__num", children: v + 1 }),
-              /* @__PURE__ */ t("span", { className: "idx-sec__title", children: s.title }),
-              /* @__PURE__ */ t("span", { className: "idx-sec__chev", "aria-hidden": "true", children: "›" })
-            ] }) }, m)) })
-          ] }, l.id);
-        }) }),
-        /* @__PURE__ */ t("footer", { className: "idx__foot", children: /* @__PURE__ */ h("span", { className: "idx__hint", children: [
-          /* @__PURE__ */ t("kbd", { children: "→" }),
-          " next · ",
-          /* @__PURE__ */ t("kbd", { children: "←" }),
-          " prev · ",
-          /* @__PURE__ */ t("kbd", { children: "Space" }),
-          " narration"
-        ] }) })
-      ] })
+  return /* @__PURE__ */ d(R, { children: [
+    /* @__PURE__ */ t(fe, { kind: r, actions: o }),
+    /* @__PURE__ */ d("div", { className: "idx", children: [
+      /* @__PURE__ */ t("header", { className: "idx__head", children: /* @__PURE__ */ t("h1", { className: "idx__subject", children: a }) }),
+      e.length === 0 ? /* @__PURE__ */ t("p", { className: "idx__empty", children: "No courses authored yet — the app shell is ready." }) : /* @__PURE__ */ t("ol", { className: "idx__grid", children: e.map((l, _) => {
+        const n = z(l), u = c.has(l.id);
+        return /* @__PURE__ */ d("li", { className: `idx-card${u ? " idx-card--open" : ""}`, children: [
+          /* @__PURE__ */ d("button", { className: "idx-card__head", onClick: () => h(l.id), "aria-expanded": u, children: [
+            /* @__PURE__ */ t("span", { className: "idx-card__num", children: String(_ + 1).padStart(2, "0") }),
+            /* @__PURE__ */ t("span", { className: "idx-card__title", children: l.title }),
+            /* @__PURE__ */ d("span", { className: "idx-card__count", children: [
+              n.length,
+              " ",
+              n.length === 1 ? "section" : "sections"
+            ] }),
+            /* @__PURE__ */ t("span", { className: "idx-card__toggle", "aria-hidden": "true", children: "⌄" })
+          ] }),
+          u && /* @__PURE__ */ t("ol", { className: "idx-sec", children: n.map(({ section: s, slug: m }, N) => /* @__PURE__ */ t("li", { className: "idx-sec__row", children: /* @__PURE__ */ d("a", { href: `#/${m}`, children: [
+            /* @__PURE__ */ t("span", { className: "idx-sec__num", children: N + 1 }),
+            /* @__PURE__ */ t("span", { className: "idx-sec__title", children: s.title }),
+            /* @__PURE__ */ t("span", { className: "idx-sec__chev", "aria-hidden": "true", children: "›" })
+          ] }) }, m)) })
+        ] }, l.id);
+      }) }),
+      /* @__PURE__ */ t("footer", { className: "idx__foot", children: /* @__PURE__ */ d("span", { className: "idx__hint", children: [
+        /* @__PURE__ */ t("kbd", { children: "→" }),
+        " next · ",
+        /* @__PURE__ */ t("kbd", { children: "←" }),
+        " prev · ",
+        /* @__PURE__ */ t("kbd", { children: "Space" }),
+        " narration"
+      ] }) })
     ] })
-  );
+  ] });
 }
-function ue(e, a) {
-  const r = $(null), [o, d] = b(null), g = $(a);
-  g.current = a;
-  const [f, l] = b(!1), p = $(f);
-  return p.current = f, k(() => {
+function pe(e, a) {
+  const r = S(null), [o, c] = x(null), [g, h] = x(!1), l = S(a), _ = S(g);
+  return l.current = a, _.current = g, k(() => {
     const s = new Audio();
-    return s.addEventListener("ended", () => g.current()), s.addEventListener("error", () => l(!1)), r.current = s, d(s), () => s.pause();
+    return s.addEventListener("ended", () => l.current()), s.addEventListener("error", () => h(!1)), r.current = s, c(s), () => s.pause();
   }, []), k(() => {
     const s = r.current;
-    s && (s.pause(), e ? (s.src = e, s.currentTime = 0, p.current && s.play().catch(() => {
-    })) : (s.removeAttribute("src"), s.load(), l(!1)));
-  }, [e]), { playing: f, toggle: () => {
+    s && (s.pause(), e ? (s.src = e, s.currentTime = 0, _.current && s.play().catch(() => {
+    })) : (s.removeAttribute("src"), s.load(), h(!1)));
+  }, [e]), { playing: g, toggle: () => {
     const s = r.current;
-    !s || !s.getAttribute("src") || (p.current ? (s.pause(), l(!1)) : (s.play().catch(() => {
-    }), l(!0)));
+    s != null && s.getAttribute("src") && (_.current ? s.pause() : s.play().catch(() => {
+    }), h(!_.current));
   }, stop: () => {
     var s;
-    (s = r.current) == null || s.pause(), l(!1);
+    (s = r.current) == null || s.pause(), h(!1);
   }, audio: o };
 }
-const B = "graphl:theme";
-function F() {
+const K = "graphl:theme", O = () => {
   try {
-    const e = localStorage.getItem(B);
+    const e = localStorage.getItem(K);
     return e === "light" || e === "dark" ? e : null;
   } catch {
     return null;
   }
-}
-function me(e) {
-  try {
-    localStorage.setItem(B, e);
-  } catch {
-  }
-}
-const fe = (e, a, r) => r || !a ? e : a;
-function ge(e, a) {
-  const [r, o] = b(() => a ? null : F()), d = fe(e, r, a);
-  k(() => (document.documentElement.setAttribute("data-theme", d), () => document.documentElement.removeAttribute("data-theme")), [d]), k(() => {
+};
+function _e(e, a) {
+  const [r, o] = x(O), c = !a && r || e;
+  k(() => (document.documentElement.setAttribute("data-theme", c), () => document.documentElement.removeAttribute("data-theme")), [c]), k(() => {
     if (a) return;
-    const f = (l) => {
-      (l.key === B || l.key === null) && o(F());
+    const h = (l) => {
+      (l.key === K || l.key === null) && o(O());
     };
-    return window.addEventListener("storage", f), () => window.removeEventListener("storage", f);
+    return window.addEventListener("storage", h), () => window.removeEventListener("storage", h);
   }, [a]);
   const g = I(() => {
-    const f = d === "dark" ? "light" : "dark";
-    me(f);
+    const h = c === "dark" ? "light" : "dark";
+    try {
+      localStorage.setItem(K, h);
+    } catch {
+    }
     const l = document.documentElement;
-    l.classList.add("theme-swap"), o(f), requestAnimationFrame(() => requestAnimationFrame(() => l.classList.remove("theme-swap")));
-  }, [d]);
-  return { theme: d, toggle: g };
-}
-const P = {
-  dark: { glyph: "☾", label: "Dark theme" },
-  light: { glyph: "☀", label: "Light theme" }
-};
-function pe({ theme: e, onToggle: a }) {
-  const r = e === "dark" ? "light" : "dark", o = `${P[e].label}. Switch to ${P[r].label.toLowerCase()}.`;
-  return /* @__PURE__ */ t("button", { className: "site__icon", type: "button", onClick: a, "aria-label": o, title: o, children: P[e].glyph });
+    l.classList.add("theme-swap"), o(h), requestAnimationFrame(() => requestAnimationFrame(() => l.classList.remove("theme-swap")));
+  }, [c]);
+  return { theme: c, toggle: g };
 }
+const P = (e) => e.replace(/^#\/?/, "");
 function ye({
   subject: e,
   eyebrow: a,
   courses: r,
   getScene: o,
-  audioBase: d = "/",
+  audioBase: c = "/",
   kind: g = "courses",
-  theme: f = "dark"
+  theme: h = "dark"
 }) {
-  const [l, p] = b(() => location.hash);
+  const [l, _] = x(() => location.hash);
   k(() => {
-    const i = () => p(location.hash);
-    return window.addEventListener("hashchange", i), () => window.removeEventListener("hashchange", i);
+    const f = () => _(location.hash);
+    return window.addEventListener("hashchange", f), () => window.removeEventListener("hashchange", f);
   }, []);
-  const n = new URLSearchParams(location.search).get("capture") === "1", { theme: u, toggle: s } = ge(f, n), m = l.replace(/^#\/?/, ""), v = M(() => {
-    if (r[m]) return r[m];
-    for (const i of Object.values(r))
-      if (i.sections.some((c) => X(i, c) === m)) return i;
-    return Object.values(r)[0];
-  }, [m, r]), _ = M(() => D(v), [v]), w = M(() => Object.values(r).flatMap(D), [r]);
+  const n = new URLSearchParams(location.search).get("capture") === "1", { theme: u, toggle: s } = _e(h, n), m = P(l), N = C(
+    () => Object.hasOwn(r, m) && r[m] || Object.values(r).find((f) => f.sections.some((i) => X(f, i) === m)) || Object.values(r)[0],
+    [m, r]
+  ), p = C(() => N ? z(N) : [], [N]), w = C(() => Object.values(r).flatMap(z), [r]);
   k(() => {
-    if (n || !r[m]) return;
-    const i = _[0];
-    i && (history.replaceState(null, "", `${location.pathname}${location.search}#/${i.slug}`), p(`#/${i.slug}`));
-  }, [n, m, _]), k(() => {
+    n || !Object.hasOwn(r, m) || !p[0] || (history.replaceState(null, "", `${location.pathname}${location.search}#/${p[0].slug}`), _(`#/${p[0].slug}`));
+  }, [n, m, p]), k(() => {
     n && (window.__scene = {
-      plan: () => _.map(({ slug: i, section: c }) => ({
-        slug: i,
-        course: v.id,
-        // audio lives at audio/<course>/<id>.wav
-        id: c.id,
-        scene: c.scene,
-        focus: c.focus ?? null
+      plan: () => p.map(({ slug: f, section: i }) => ({
+        slug: f,
+        course: N == null ? void 0 : N.id,
+        id: i.id,
+        scene: i.scene,
+        focus: i.focus ?? null
       }))
     });
-  }, [n, _, v]);
-  const E = I(
-    (i) => {
-      const c = location.hash.replace(/^#\/?/, ""), N = w.findIndex(({ slug: x }) => x === c);
-      if (N !== -1) {
-        const x = w[N + i];
-        location.hash = x ? `#/${x.slug}` : "";
-        return;
-      }
-      if (c === "") {
-        i === 1 && w[0] && (location.hash = `#/${w[0].slug}`);
-        return;
+  }, [n, p, N]);
+  const $ = I(
+    (f) => {
+      const i = P(location.hash), v = w.findIndex(({ slug: b }) => b === i);
+      if (v !== -1) {
+        const b = w[v + f];
+        location.hash = b ? `#/${b.slug}` : "";
+      } else if (i === "")
+        f === 1 && w[0] && (location.hash = `#/${w[0].slug}`);
+      else {
+        const b = f === 1 ? p[0] : p[p.length - 1];
+        b && (location.hash = `#/${b.slug}`);
       }
-      const L = i === 1 ? _[0] : _[_.length - 1];
-      L && (location.hash = `#/${L.slug}`);
     },
-    [_, w]
-  ), S = I(() => {
+    [p, w]
+  ), T = I(() => {
     location.hash ? location.hash = "" : location.pathname !== "/" && (location.href = "/");
-  }, []);
-  k(() => {
-    const i = (c) => {
-      c.key === "Escape" && S();
-    };
-    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
-  }, [S]);
-  const T = _.find(({ slug: i }) => i === m), V = T ? `${d}audio/${v.id}/${T.section.id}.wav` : void 0, { playing: q, toggle: K, stop: W, audio: y } = ue(V, () => {
-    const i = location.hash.replace(/^#\/?/, ""), c = w.findIndex(({ slug: L }) => L === i), N = w[c + 1];
-    N ? location.hash = `#/${N.slug}` : W();
+  }, []), y = p.find(({ slug: f }) => f === m), W = y && `${c}audio/${N.id}/${y.section.id}.wav`, { playing: Y, toggle: B, stop: Z, audio: L } = pe(W, () => {
+    const f = P(location.hash), i = w[w.findIndex(({ slug: v }) => v === f) + 1];
+    i ? location.hash = `#/${i.slug}` : Z();
   });
   if (k(() => {
-    const i = (c) => {
-      if (c.key !== "ArrowRight" && c.key !== "ArrowLeft") return;
-      const N = c.target;
-      if (N && (N.tagName === "INPUT" || N.tagName === "TEXTAREA" || N.isContentEditable)) return;
-      const L = c.key === "ArrowRight" ? 1 : -1;
-      c.preventDefault();
-      const x = (y == null ? void 0 : y.duration) ?? 0;
-      if (y && !c.shiftKey && Number.isFinite(x) && x > 0) {
-        y.currentTime = Math.min(x, Math.max(0, y.currentTime + L * z));
-        return;
-      }
-      E(L);
+    const f = (i) => {
+      if (i.key === "Escape") return T();
+      const v = i.target;
+      if (!(i.ctrlKey || i.metaKey || i.altKey || (v == null ? void 0 : v.tagName) === "INPUT" || (v == null ? void 0 : v.tagName) === "TEXTAREA" || v != null && v.isContentEditable))
+        if (i.key === "ArrowRight" || i.key === "ArrowLeft") {
+          i.preventDefault();
+          const b = i.key === "ArrowRight" ? 1 : -1, M = (L == null ? void 0 : L.duration) ?? 0;
+          L && !i.shiftKey && Number.isFinite(M) && M > 0 ? L.currentTime = Math.min(M, Math.max(0, L.currentTime + b * j)) : $(b);
+        } else (i.key === " " || i.code === "Space") && (i.preventDefault(), B());
     };
-    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
-  }, [E, y]), k(() => {
-    const i = (c) => {
-      if (c.key !== " " && c.code !== "Space") return;
-      const N = c.target;
-      N && (N.tagName === "INPUT" || N.tagName === "TEXTAREA" || N.isContentEditable) || (c.preventDefault(), K());
-    };
-    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
+    return window.addEventListener("keydown", f), () => window.removeEventListener("keydown", f);
   }), !m)
     return /* @__PURE__ */ t(
-      he,
+      ge,
       {
         courses: Object.values(r),
         subject: e,
         kind: g,
-        actions: n ? null : /* @__PURE__ */ t(pe, { theme: u, onToggle: s })
+        actions: n ? null : /* @__PURE__ */ t(de, { theme: u, onToggle: s })
       }
     );
-  let C, j = null;
-  if (T) {
-    const i = _.findIndex(({ slug: c }) => c === m);
-    C = /* @__PURE__ */ t(
-      oe,
+  if (y)
+    return /* @__PURE__ */ t(
+      he,
       {
-        section: T.section,
+        section: y.section,
         getScene: o,
         capture: n,
-        eyebrow: `${a ?? e.toUpperCase()} · ${v.id.toUpperCase()}`,
-        index: i,
-        total: _.length,
-        onHome: S,
-        onPrev: () => E(-1),
-        onNext: () => E(1),
-        narrating: q,
-        onToggleNarration: K,
-        narrationAudio: y,
+        eyebrow: `${a ?? e.toUpperCase()} · ${N.id.toUpperCase()}`,
+        index: p.indexOf(y),
+        total: p.length,
+        onHome: T,
+        onPrev: () => $(-1),
+        onNext: () => $(1),
+        narrating: Y,
+        onToggleNarration: B,
+        narrationAudio: L,
         theme: u,
         onToggleTheme: n ? void 0 : s
       }
     );
-  } else {
-    const i = o(m);
-    C = i ? /* @__PURE__ */ t("div", { className: "stage", children: /* @__PURE__ */ t(R, { scene: i, theme: u }) }) : /* @__PURE__ */ h("div", { className: "stage stage--missing", children: [
+  const F = o(m);
+  return /* @__PURE__ */ d(R, { children: [
+    !n && /* @__PURE__ */ t("button", { className: "brand-home", onClick: T, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: "GraphL" }),
+    F ? /* @__PURE__ */ t("div", { className: "stage", children: /* @__PURE__ */ t(V, { scene: F, theme: u }) }) : /* @__PURE__ */ d("div", { className: "stage stage--missing", children: [
       "no scene or slug: ",
       m
-    ] }), j = n ? null : /* @__PURE__ */ t("button", { className: "brand-home", onClick: S, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: "GraphL" });
-  }
-  return /* @__PURE__ */ h(H, { children: [
-    j,
-    C
+    ] })
   ] });
 }
 export {
   ye as ConceptApp,
-  de as SiteHeader,
-  D as allSections,
+  fe as SiteHeader,
+  z as allSections,
   X as slugOf
 };
 //# sourceMappingURL=index.js.map