@graphlearning/shell 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,173 +1,186 @@
-import { jsx as e, jsxs as i, Fragment as I } from "react/jsx-runtime";
-import { useRef as L, useState as b, useLayoutEffect as D, useEffect as N, useMemo as E, useCallback as z } from "react";
-import { SceneView as S } from "@graphlearning/flow";
-import { Home as G, Volume2 as K, VolumeX as V, ChevronLeft as R, ChevronRight as W } from "lucide-react";
-import X from "react-markdown";
-import F from "remark-gfm";
-function j(a, c) {
-  return `${a.id}-${c.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 P(a) {
-  return a.sections.map((c) => ({ section: c, slug: j(a, c) }));
+function z(n) {
+  return n.sections.map((r) => ({ section: r, slug: K(n, r) }));
 }
-const B = 806;
-function O() {
-  const a = L(null), [c, s] = b(1);
-  return D(() => {
-    const l = a.current;
-    if (!l) return;
-    const h = () => s(l.clientWidth / B);
-    h();
-    const f = new ResizeObserver(h);
-    return f.observe(l), () => f.disconnect();
-  }, []), { ref: a, zoom: c };
+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 Z({ slide: a, open: c }) {
-  const { ref: s, zoom: l } = O();
-  return /* @__PURE__ */ e("aside", { ref: s, className: `slide-panel${c ? " slide-panel--open" : ""}`, children: /* @__PURE__ */ e("div", { className: "slide-panel__scaler", style: { width: B, zoom: l }, 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 q({
-  section: a,
-  getScene: c,
+function ae({
+  section: n,
+  getScene: r,
   capture: s = !1,
-  eyebrow: l,
-  index: h = 0,
-  total: f = 0,
-  onHome: o,
-  onPrev: _,
-  onNext: u,
-  narrating: n = !1,
-  onToggleNarration: p
+  eyebrow: o,
+  index: l = 0,
+  total: u = 0,
+  onHome: m,
+  onPrev: c,
+  onNext: v,
+  narrating: t = !1,
+  onToggleNarration: w,
+  theme: k = "dark",
+  onToggleTheme: h
 }) {
-  const [d, m] = b(!1), v = c(a.scene);
-  return v ? /* @__PURE__ */ i("div", { className: "stage stage--section", children: [
-    /* @__PURE__ */ i("header", { className: "reel-head", children: [
-      l && /* @__PURE__ */ e("button", { className: "reel-head__eyebrow", onClick: o, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: l }),
-      /* @__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 })
     ] }),
-    !s && /* @__PURE__ */ i("footer", { className: "reel-foot reel-foot--controls", children: [
-      /* @__PURE__ */ i("span", { className: "reel-foot__grp", children: [
-        /* @__PURE__ */ e("button", { className: "reel-foot__ctrl", onClick: o, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: /* @__PURE__ */ e(G, { 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: p,
-            "aria-label": n ? "Pause narration (Space)" : "Play narration (Space)",
-            title: n ? "Pause narration (Space)" : "Play narration (Space)",
-            children: n ? /* @__PURE__ */ e(K, { size: 18 }) : /* @__PURE__ */ e(V, { size: 18 })
+            onClick: w,
+            "aria-label": t ? "Pause narration (Space)" : "Play narration (Space)",
+            title: t ? "Pause narration (Space)" : "Play narration (Space)",
+            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__ */ i("span", { className: "reel-foot__nav", children: [
-        /* @__PURE__ */ e("button", { className: "reel-foot__ctrl", onClick: _, "aria-label": "Previous section (←)", title: "Previous section (←)", children: /* @__PURE__ */ e(R, { size: 19 }) }),
-        /* @__PURE__ */ i("span", { className: "reel-foot__count reel-foot__count--live", children: [
-          h + 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,
           " / ",
-          f
+          u
         ] }),
-        /* @__PURE__ */ e("button", { className: "reel-foot__ctrl", onClick: u, "aria-label": "Next section (→)", title: "Next section (→)", children: /* @__PURE__ */ e(W, { 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(S, { scene: v, focusId: a.focus }) }),
+    /* @__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: () => m((w) => !w),
-        "aria-label": d ? "Hide slide" : "Show slide",
-        children: d ? "›" : "‹"
+        onClick: () => f((b) => !b),
+        "aria-label": g ? "Hide slide" : "Show slide",
+        children: g ? "›" : "‹"
       }
     ),
-    /* @__PURE__ */ e(Z, { slide: a.slide, open: d })
-  ] }) : /* @__PURE__ */ i("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
   ] });
 }
-const J = [
+const se = [
   { id: "courses", label: "Courses" },
   { id: "labs", label: "Labs" },
   { id: "coach", label: "Coach" }
 ];
-function Q() {
-  return /* @__PURE__ */ i("svg", { className: "site__logo", width: "28", height: "28", viewBox: "0 0 512 512", "aria-hidden": "true", children: [
+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__ */ i("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__ */ 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 Y({
-  kind: a = "courses",
-  nav: c = J,
+function oe({
+  kind: n = "courses",
+  nav: r = se,
   home: s = "/",
-  actions: l
+  actions: o
 }) {
-  return /* @__PURE__ */ e("header", { className: "site", children: /* @__PURE__ */ i("div", { className: "site__inner", children: [
-    /* @__PURE__ */ i("a", { className: "site__brand", href: s, children: [
-      /* @__PURE__ */ e(Q, {}),
+  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: c.map((h) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("nav", { className: "site__nav", "aria-label": "Sections", children: r.map((l) => /* @__PURE__ */ e(
       "a",
       {
         className: "site__link",
-        href: `${s}#${h.id}`,
-        ...h.id === a ? { "aria-current": "page" } : {},
-        children: h.label
+        href: `${s}#${l.id}`,
+        ...l.id === n ? { "aria-current": "page" } : {},
+        children: l.label
       },
-      h.id
+      l.id
     )) }),
-    /* @__PURE__ */ e("div", { className: "site__actions", children: l })
+    /* @__PURE__ */ e("div", { className: "site__actions", children: o })
   ] }) });
 }
-function U({
-  courses: a,
-  subject: c,
-  kind: s
+function ie({
+  courses: n,
+  subject: r,
+  kind: s,
+  actions: o
 }) {
-  const [l, h] = b(() => /* @__PURE__ */ new Set()), f = (o) => h((_) => {
-    const u = new Set(_);
-    return u.has(o) ? u.delete(o) : u.add(o), u;
+  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__ */ i(I, { children: [
-      /* @__PURE__ */ e(Y, { kind: s }),
-      /* @__PURE__ */ i("div", { className: "idx", children: [
-        /* @__PURE__ */ e("header", { className: "idx__head", children: /* @__PURE__ */ e("h1", { className: "idx__subject", children: c }) }),
-        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((o, _) => {
-          const u = P(o), n = l.has(o.id);
-          return /* @__PURE__ */ i("li", { className: `idx-card${n ? " idx-card--open" : ""}`, children: [
-            /* @__PURE__ */ i(
+    /* @__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: () => f(o.id),
-                "aria-expanded": n,
+                onClick: () => m(c.id),
+                "aria-expanded": w,
                 children: [
-                  /* @__PURE__ */ e("span", { className: "idx-card__num", children: String(_ + 1).padStart(2, "0") }),
-                  /* @__PURE__ */ e("span", { className: "idx-card__title", children: o.title }),
-                  /* @__PURE__ */ i("span", { className: "idx-card__count", children: [
-                    u.length,
+                  /* @__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: "⌄" })
                 ]
               }
             ),
-            n && /* @__PURE__ */ e("ol", { className: "idx-sec", children: u.map(({ section: p, slug: d }, m) => /* @__PURE__ */ e("li", { className: "idx-sec__row", children: /* @__PURE__ */ i("a", { href: `#/${d}`, children: [
-              /* @__PURE__ */ e("span", { className: "idx-sec__num", children: m + 1 }),
-              /* @__PURE__ */ e("span", { className: "idx-sec__title", children: p.title }),
+            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: "›" })
-            ] }) }, d)) })
-          ] }, o.id);
+            ] }) }, h)) })
+          ] }, c.id);
         }) }),
-        /* @__PURE__ */ e("footer", { className: "idx__foot", children: /* @__PURE__ */ i("span", { className: "idx__hint", children: [
+        /* @__PURE__ */ e("footer", { className: "idx__foot", children: /* @__PURE__ */ d("span", { className: "idx__hint", children: [
           /* @__PURE__ */ e("kbd", { children: "→" }),
           " next · ",
           /* @__PURE__ */ e("kbd", { children: "←" }),
@@ -179,140 +192,193 @@ function U({
     ] })
   );
 }
-function ee(a, c) {
-  const s = L(null), l = L(c);
-  l.current = c;
-  const [h, f] = b(!1), o = L(h);
-  return o.current = h, N(() => {
-    const n = new Audio();
-    return n.addEventListener("ended", () => l.current()), n.addEventListener("error", () => f(!1)), s.current = n, () => n.pause();
+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", () => o.current()), t.addEventListener("error", () => u(!1)), s.current = t, () => t.pause();
   }, []), N(() => {
-    const n = s.current;
-    n && (n.pause(), a ? (n.src = a, n.currentTime = 0, o.current && n.play().catch(() => {
-    })) : (n.removeAttribute("src"), n.load(), f(!1)));
-  }, [a]), { playing: h, toggle: () => {
-    const n = s.current;
-    !n || !n.getAttribute("src") || (o.current ? (n.pause(), f(!1)) : (n.play().catch(() => {
-    }), f(!0)));
+    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 n;
-    (n = s.current) == null || n.pause(), f(!1);
+    var t;
+    (t = s.current) == null || t.pause(), u(!1);
   } };
 }
-function ce({
-  subject: a,
-  eyebrow: c,
+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: l,
-  audioBase: h = "/",
-  kind: f = "courses"
+  getScene: o,
+  audioBase: l = "/",
+  kind: u = "courses",
+  theme: m = "dark"
 }) {
-  const [o, _] = b(() => location.hash);
+  const [c, v] = x(() => location.hash);
   N(() => {
-    const t = () => _(location.hash);
-    return window.addEventListener("hashchange", t), () => window.removeEventListener("hashchange", t);
+    const a = () => v(location.hash);
+    return window.addEventListener("hashchange", a), () => window.removeEventListener("hashchange", a);
   }, []);
-  const u = new URLSearchParams(location.search).get("capture") === "1", n = o.replace(/^#\/?/, ""), p = E(() => {
-    if (s[n]) return s[n];
-    for (const t of Object.values(s))
-      if (t.sections.some((r) => j(t, r) === n)) return t;
+  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];
-  }, [n, s]), d = E(() => P(p), [p]), m = E(() => Object.values(s).flatMap(P), [s]);
+  }, [h, s]), f = C(() => z(g), [g]), p = C(() => Object.values(s).flatMap(z), [s]);
   N(() => {
-    if (u || !s[n]) return;
-    const t = d[0];
-    t && (history.replaceState(null, "", `${location.pathname}${location.search}#/${t.slug}`), _(`#/${t.slug}`));
-  }, [u, n, d]), N(() => {
-    u && (window.__scene = {
-      plan: () => d.map(({ slug: t, section: r }) => ({
-        slug: t,
-        course: p.id,
+    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: r.id,
-        scene: r.scene,
-        focus: r.focus ?? null
+        id: i.id,
+        scene: i.scene,
+        focus: i.focus ?? null
       }))
     });
-  }, [u, d, p]);
-  const v = z(
-    (t) => {
-      const r = location.hash.replace(/^#\/?/, ""), g = m.findIndex(({ slug: y }) => y === r);
-      if (g !== -1) {
-        const y = m[g + t];
-        location.hash = y ? `#/${y.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 (r === "") {
-        t === 1 && m[0] && (location.hash = `#/${m[0].slug}`);
+      if (i === "") {
+        a === 1 && p[0] && (location.hash = `#/${p[0].slug}`);
         return;
       }
-      const k = t === 1 ? d[0] : d[d.length - 1];
-      k && (location.hash = `#/${k.slug}`);
+      const E = a === 1 ? f[0] : f[f.length - 1];
+      E && (location.hash = `#/${E.slug}`);
     },
-    [d, m]
+    [f, p]
   );
   N(() => {
-    const t = (r) => {
-      r.key !== "ArrowRight" && r.key !== "ArrowLeft" || (r.preventDefault(), v(r.key === "ArrowRight" ? 1 : -1));
+    const a = (i) => {
+      i.key !== "ArrowRight" && i.key !== "ArrowLeft" || (i.preventDefault(), b(i.key === "ArrowRight" ? 1 : -1));
     };
-    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [v]);
-  const w = z(() => {
+    return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
+  }, [b]);
+  const y = T(() => {
     location.hash ? location.hash = "" : location.pathname !== "/" && (location.href = "/");
   }, []);
   N(() => {
-    const t = (r) => {
-      r.key === "Escape" && w();
+    const a = (i) => {
+      i.key === "Escape" && y();
     };
-    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [w]);
-  const x = d.find(({ slug: t }) => t === n), H = x ? `${h}audio/${p.id}/${x.section.id}.wav` : void 0, { playing: M, toggle: A, stop: T } = ee(H, () => {
-    const t = location.hash.replace(/^#\/?/, ""), r = m.findIndex(({ slug: k }) => k === t), g = m[r + 1];
-    g ? location.hash = `#/${g.slug}` : T();
+    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 (N(() => {
-    const t = (r) => {
-      if (r.key !== " " && r.code !== "Space") return;
-      const g = r.target;
-      g && (g.tagName === "INPUT" || g.tagName === "TEXTAREA" || g.isContentEditable) || (r.preventDefault(), A());
+    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", t), () => window.removeEventListener("keydown", t);
-  }), !n) return /* @__PURE__ */ e(U, { courses: Object.values(s), subject: a, kind: f });
-  let $, C = null;
-  if (x) {
-    const t = d.findIndex(({ slug: r }) => r === n);
-    $ = /* @__PURE__ */ e(
-      q,
+    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: x.section,
-        getScene: l,
-        capture: u,
-        eyebrow: `${c ?? a.toUpperCase()} · ${p.id.toUpperCase()}`,
-        index: t,
-        total: d.length,
-        onHome: w,
-        onPrev: () => v(-1),
-        onNext: () => v(1),
-        narrating: M,
-        onToggleNarration: A
+        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 t = l(n);
-    $ = t ? /* @__PURE__ */ e("div", { className: "stage", children: /* @__PURE__ */ e(S, { scene: t }) }) : /* @__PURE__ */ i("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: ",
-      n
-    ] }), C = u ? null : /* @__PURE__ */ e("button", { className: "brand-home", onClick: w, "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__ */ i(I, { children: [
-    C,
-    $
+  return /* @__PURE__ */ d(M, { children: [
+    B,
+    A
   ] });
 }
 export {
-  ce as ConceptApp,
-  Y as SiteHeader,
-  P as allSections,
-  j as slugOf
+  ve as ConceptApp,
+  oe as SiteHeader,
+  z as allSections,
+  K as slugOf
 };
 //# sourceMappingURL=index.js.map