@graphlearning/shell 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,384 +1,452 @@
-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}`;
+import { jsx as t, jsxs as h, Fragment as H } from "react/jsx-runtime";
+import { useRef as T, 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 z(n) {
-  return n.sections.map((r) => ({ section: r, slug: K(n, r) }));
+function D(e) {
+  return e.sections.map((a) => ({ section: a, slug: X(e, a) }));
 }
-const F = 806;
-function te() {
-  const n = S(null), [r, s] = x(1);
-  return q(() => {
-    const o = n.current;
+const G = 806;
+function re() {
+  const e = T(null), [a, s] = b(1);
+  return O(() => {
+    const o = e.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 };
+    const d = () => s(o.clientWidth / G);
+    d();
+    const g = new ResizeObserver(d);
+    return g.observe(o), () => g.disconnect();
+  }, []), { ref: e, zoom: a };
+}
+function se({ slide: e, open: a }) {
+  const { ref: s, zoom: o } = re();
+  return /* @__PURE__ */ t("aside", { ref: s, 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 }) }) });
+}
+const z = 10;
+function ie({ audio: e }) {
+  const [a, s] = b(0), [o, d] = b(0), g = T(null);
+  if (k(() => {
+    if (!e) return;
+    const n = () => {
+      s(e.currentTime), d(Number.isFinite(e.duration) ? e.duration : 0);
+    };
+    n();
+    const u = ["loadedmetadata", "durationchange", "timeupdate", "seeked", "ended", "emptied", "error"];
+    return u.forEach((r) => e.addEventListener(r, n)), () => u.forEach((r) => e.removeEventListener(r, n));
+  }, [e]), !e || !o) return null;
+  const f = (n) => {
+    const u = g.current;
+    if (!u) return;
+    const r = u.getBoundingClientRect(), m = Math.min(1, Math.max(0, (n - r.left) / r.width));
+    e.currentTime = m * o, s(e.currentTime);
+  }, l = (n) => {
+    const u = (r) => {
+      n.preventDefault(), n.stopPropagation(), e.currentTime = Math.min(o, Math.max(0, e.currentTime + r)), s(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: [
+    /* @__PURE__ */ t("span", { className: "reel-foot__count reel-foot__time", children: A(a) }),
+    /* @__PURE__ */ h(
+      "div",
+      {
+        ref: g,
+        className: "reel-foot__track",
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": "Narration position",
+        "aria-valuemin": 0,
+        "aria-valuemax": Math.round(o),
+        "aria-valuenow": Math.round(a),
+        "aria-valuetext": `${A(a)} of ${A(o)}`,
+        onKeyDown: l,
+        onPointerDown: (n) => {
+          n.currentTarget.setPointerCapture(n.pointerId), f(n.clientX);
+        },
+        onPointerMove: (n) => {
+          n.currentTarget.hasPointerCapture(n.pointerId) && f(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__count reel-foot__time", children: A(o) })
+  ] });
 }
-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 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 ae({
-  section: n,
-  getScene: r,
+function oe({
+  section: e,
+  getScene: a,
   capture: s = !1,
   eyebrow: o,
-  index: l = 0,
-  total: u = 0,
-  onHome: m,
-  onPrev: c,
-  onNext: v,
-  narrating: t = !1,
-  onToggleNarration: w,
-  theme: k = "dark",
-  onToggleTheme: h
+  index: d = 0,
+  total: g = 0,
+  onHome: f,
+  onPrev: l,
+  onNext: p,
+  narrating: n = !1,
+  onToggleNarration: u,
+  narrationAudio: r = null,
+  theme: m = "dark",
+  onToggleTheme: v
 }) {
-  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 })
+  const [_, w] = b(!1), E = a(e.scene);
+  return E ? /* @__PURE__ */ h("div", { className: "stage stage--section", 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 }),
+      /* @__PURE__ */ t("h1", { className: "reel-head__title", children: e.title })
     ] }),
-    !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(
+    !s && /* @__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 }) }),
+        /* @__PURE__ */ t(
           "button",
           {
             className: "reel-foot__ctrl",
-            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 })
+            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 })
           }
         ),
-        h && /* @__PURE__ */ e(
+        v && /* @__PURE__ */ t(
           "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 })
+            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 })
           }
         )
       ] }),
-      /* @__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,
+      /* @__PURE__ */ t(ie, { audio: r }),
+      /* @__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,
           " / ",
-          u
+          g
         ] }),
-        /* @__PURE__ */ e("button", { className: "reel-foot__ctrl", onClick: v, "aria-label": "Next section (→)", title: "Next section (→)", children: /* @__PURE__ */ e(Q, { size: 19 }) })
+        /* @__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__ */ e("div", { className: "scene-area", children: /* @__PURE__ */ e(H, { scene: p, focusId: n.focus, theme: k }) }),
-    !s && /* @__PURE__ */ e(
+    /* @__PURE__ */ t("div", { className: "scene-area", children: /* @__PURE__ */ t(R, { scene: E, focusId: e.focus, theme: m }) }),
+    !s && /* @__PURE__ */ t(
       "button",
       {
         className: "slide-toggle",
-        onClick: () => f((b) => !b),
-        "aria-label": g ? "Hide slide" : "Show slide",
-        children: g ? "›" : "‹"
+        onClick: () => w((S) => !S),
+        "aria-label": _ ? "Hide slide" : "Show slide",
+        children: _ ? "›" : "‹"
       }
     ),
-    /* @__PURE__ */ e(ne, { slide: n.slide, open: g })
-  ] }) : /* @__PURE__ */ d("div", { className: "stage stage--missing", children: [
+    /* @__PURE__ */ t(se, { slide: e.slide, open: _ })
+  ] }) : /* @__PURE__ */ h("div", { className: "stage stage--missing", children: [
     "no scene: ",
-    n.scene
+    e.scene
   ] });
 }
-const se = [
+const le = [
   { 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 ce() {
+  return /* @__PURE__ */ h("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__ */ 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 oe({
-  kind: n = "courses",
-  nav: r = se,
+function de({
+  kind: e = "courses",
+  nav: a = le,
   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" })
+  return /* @__PURE__ */ t("header", { className: "site", children: /* @__PURE__ */ h("div", { className: "site__inner", children: [
+    /* @__PURE__ */ h("a", { className: "site__brand", href: s, children: [
+      /* @__PURE__ */ t(ce, {}),
+      /* @__PURE__ */ t("span", { className: "site__name", children: "GraphL" })
     ] }),
-    /* @__PURE__ */ e("nav", { className: "site__nav", "aria-label": "Sections", children: r.map((l) => /* @__PURE__ */ e(
+    /* @__PURE__ */ t("nav", { className: "site__nav", "aria-label": "Sections", children: a.map((d) => /* @__PURE__ */ t(
       "a",
       {
         className: "site__link",
-        href: `${s}#${l.id}`,
-        ...l.id === n ? { "aria-current": "page" } : {},
-        children: l.label
+        href: `${s}#${d.id}`,
+        ...d.id === e ? { "aria-current": "page" } : {},
+        children: d.label
       },
-      l.id
+      d.id
     )) }),
-    /* @__PURE__ */ e("div", { className: "site__actions", children: o })
+    /* @__PURE__ */ t("div", { className: "site__actions", children: o })
   ] }) });
 }
-function ie({
-  courses: n,
-  subject: r,
+function he({
+  courses: e,
+  subject: a,
   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;
+  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;
   });
   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(
+    /* @__PURE__ */ h(H, { children: [
+      /* @__PURE__ */ t(de, { kind: s, 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: () => m(c.id),
-                "aria-expanded": w,
+                onClick: () => f(l.id),
+                "aria-expanded": u,
                 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,
+                  /* @__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__ */ e("span", { className: "idx-card__toggle", "aria-hidden": "true", children: "⌄" })
+                  /* @__PURE__ */ t("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);
+            u && /* @__PURE__ */ t("ol", { className: "idx-sec", children: n.map(({ section: r, 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: r.title }),
+              /* @__PURE__ */ t("span", { className: "idx-sec__chev", "aria-hidden": "true", children: "›" })
+            ] }) }, m)) })
+          ] }, l.id);
         }) }),
-        /* @__PURE__ */ e("footer", { className: "idx__foot", children: /* @__PURE__ */ d("span", { className: "idx__hint", children: [
-          /* @__PURE__ */ e("kbd", { children: "→" }),
+        /* @__PURE__ */ t("footer", { className: "idx__foot", children: /* @__PURE__ */ h("span", { className: "idx__hint", children: [
+          /* @__PURE__ */ t("kbd", { children: "→" }),
           " next · ",
-          /* @__PURE__ */ e("kbd", { children: "←" }),
+          /* @__PURE__ */ t("kbd", { children: "←" }),
           " prev · ",
-          /* @__PURE__ */ e("kbd", { children: "Space" }),
+          /* @__PURE__ */ t("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", () => 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)));
+function ue(e, a) {
+  const s = T(null), [o, d] = b(null), g = T(a);
+  g.current = a;
+  const [f, l] = b(!1), p = T(f);
+  return p.current = f, k(() => {
+    const r = new Audio();
+    return r.addEventListener("ended", () => g.current()), r.addEventListener("error", () => l(!1)), s.current = r, d(r), () => r.pause();
+  }, []), k(() => {
+    const r = s.current;
+    r && (r.pause(), e ? (r.src = e, r.currentTime = 0, p.current && r.play().catch(() => {
+    })) : (r.removeAttribute("src"), r.load(), l(!1)));
+  }, [e]), { playing: f, toggle: () => {
+    const r = s.current;
+    !r || !r.getAttribute("src") || (p.current ? (r.pause(), l(!1)) : (r.play().catch(() => {
+    }), l(!0)));
   }, stop: () => {
-    var t;
-    (t = s.current) == null || t.pause(), u(!1);
-  } };
+    var r;
+    (r = s.current) == null || r.pause(), l(!1);
+  }, audio: o };
 }
-const I = "graphl:theme";
-function D() {
+const B = "graphl:theme";
+function F() {
   try {
-    const n = localStorage.getItem(I);
-    return n === "light" || n === "dark" ? n : null;
+    const e = localStorage.getItem(B);
+    return e === "light" || e === "dark" ? e : null;
   } catch {
     return null;
   }
 }
-function ce(n) {
+function me(e) {
   try {
-    localStorage.setItem(I, n);
+    localStorage.setItem(B, e);
   } 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());
+const fe = (e, a, s) => s || !a ? e : a;
+function ge(e, a) {
+  const [s, o] = b(() => a ? null : F()), d = fe(e, s, a);
+  k(() => (document.documentElement.setAttribute("data-theme", d), () => document.documentElement.removeAttribute("data-theme")), [d]), k(() => {
+    if (a) return;
+    const f = (l) => {
+      (l.key === B || l.key === null) && o(F());
     };
-    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 };
+    return window.addEventListener("storage", f), () => window.removeEventListener("storage", f);
+  }, [a]);
+  const g = I(() => {
+    const f = d === "dark" ? "light" : "dark";
+    me(f);
+    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 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 pe({ theme: e, onToggle: a }) {
+  const s = e === "dark" ? "light" : "dark", o = `${P[e].label}. Switch to ${P[s].label.toLowerCase()}.`;
+  return /* @__PURE__ */ t("button", { className: "site__icon", type: "button", onClick: a, "aria-label": o, title: o, children: P[e].glyph });
 }
-function ve({
-  subject: n,
-  eyebrow: r,
+function ye({
+  subject: e,
+  eyebrow: a,
   courses: s,
   getScene: o,
-  audioBase: l = "/",
-  kind: u = "courses",
-  theme: m = "dark"
+  audioBase: d = "/",
+  kind: g = "courses",
+  theme: f = "dark"
 }) {
-  const [c, v] = x(() => location.hash);
-  N(() => {
-    const a = () => v(location.hash);
-    return window.addEventListener("hashchange", a), () => window.removeEventListener("hashchange", a);
+  const [l, p] = b(() => location.hash);
+  k(() => {
+    const i = () => p(location.hash);
+    return window.addEventListener("hashchange", i), () => window.removeEventListener("hashchange", i);
   }, []);
-  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;
+  const n = new URLSearchParams(location.search).get("capture") === "1", { theme: u, toggle: r } = ge(f, n), m = l.replace(/^#\/?/, ""), v = M(() => {
+    if (s[m]) return s[m];
+    for (const i of Object.values(s))
+      if (i.sections.some((c) => X(i, c) === m)) return i;
     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,
+  }, [m, s]), _ = M(() => D(v), [v]), w = M(() => Object.values(s).flatMap(D), [s]);
+  k(() => {
+    if (n || !s[m]) return;
+    const i = _[0];
+    i && (history.replaceState(null, "", `${location.pathname}${location.search}#/${i.slug}`), p(`#/${i.slug}`));
+  }, [n, m, _]), k(() => {
+    n && (window.__scene = {
+      plan: () => _.map(({ slug: i, section: c }) => ({
+        slug: i,
+        course: v.id,
         // audio lives at audio/<course>/<id>.wav
-        id: i.id,
-        scene: i.scene,
-        focus: i.focus ?? null
+        id: c.id,
+        scene: c.scene,
+        focus: c.focus ?? null
       }))
     });
-  }, [t, f, g]);
-  const b = T(
-    (a) => {
-      const i = location.hash.replace(/^#\/?/, ""), _ = p.findIndex(({ slug: $ }) => $ === i);
-      if (_ !== -1) {
-        const $ = p[_ + a];
-        location.hash = $ ? `#/${$.slug}` : "";
+  }, [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 (i === "") {
-        a === 1 && p[0] && (location.hash = `#/${p[0].slug}`);
+      if (c === "") {
+        i === 1 && w[0] && (location.hash = `#/${w[0].slug}`);
         return;
       }
-      const E = a === 1 ? f[0] : f[f.length - 1];
-      E && (location.hash = `#/${E.slug}`);
+      const L = i === 1 ? _[0] : _[_.length - 1];
+      L && (location.hash = `#/${L.slug}`);
     },
-    [f, p]
-  );
-  N(() => {
-    const a = (i) => {
-      i.key !== "ArrowRight" && i.key !== "ArrowLeft" || (i.preventDefault(), b(i.key === "ArrowRight" ? 1 : -1));
-    };
-    return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
-  }, [b]);
-  const y = T(() => {
+    [_, w]
+  ), S = I(() => {
     location.hash ? location.hash = "" : location.pathname !== "/" && (location.href = "/");
   }, []);
-  N(() => {
-    const a = (i) => {
-      i.key === "Escape" && y();
+  k(() => {
+    const i = (c) => {
+      c.key === "Escape" && 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();
+    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
+  }, [S]);
+  const $ = _.find(({ slug: i }) => i === m), V = $ ? `${d}audio/${v.id}/${$.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();
   });
-  if (N(() => {
-    const a = (i) => {
-      if (i.key !== " " && i.code !== "Space") return;
-      const _ = i.target;
-      _ && (_.tagName === "INPUT" || _.tagName === "TEXTAREA" || _.isContentEditable) || (i.preventDefault(), j());
+  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);
+    };
+    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", a), () => window.removeEventListener("keydown", a);
-  }), !h)
-    return /* @__PURE__ */ e(
-      ie,
+    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
+  }), !m)
+    return /* @__PURE__ */ t(
+      he,
       {
         courses: Object.values(s),
-        subject: n,
-        kind: u,
-        actions: t ? null : /* @__PURE__ */ e(ue, { theme: w, onToggle: k })
+        subject: e,
+        kind: g,
+        actions: n ? null : /* @__PURE__ */ t(pe, { theme: u, onToggle: r })
       }
     );
-  let A, B = null;
-  if (L) {
-    const a = f.findIndex(({ slug: i }) => i === h);
-    A = /* @__PURE__ */ e(
-      ae,
+  let C, j = null;
+  if ($) {
+    const i = _.findIndex(({ slug: c }) => c === m);
+    C = /* @__PURE__ */ t(
+      oe,
       {
-        section: L.section,
+        section: $.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
+        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,
+        theme: u,
+        onToggleTheme: n ? void 0 : r
       }
     );
   } else {
-    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: [
+    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: [
       "no scene or slug: ",
-      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" });
+      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__ */ d(M, { children: [
-    B,
-    A
+  return /* @__PURE__ */ h(H, { children: [
+    j,
+    C
   ] });
 }
 export {
-  ve as ConceptApp,
-  oe as SiteHeader,
-  z as allSections,
-  K as slugOf
+  ye as ConceptApp,
+  de as SiteHeader,
+  D as allSections,
+  X as slugOf
 };
 //# sourceMappingURL=index.js.map