@graphlearning/shell 0.2.0 → 0.4.0

package/dist/index.js

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