@graphlearning/shell 0.7.0 → 0.10.0

package/dist/index.js

@@ -1,67 +1,68 @@
 import { jsx as t, jsxs as h, Fragment as H } from "react/jsx-runtime";
-import { useRef as L, useState as b, useLayoutEffect as W, useEffect as v, useCallback as M, useMemo as C } from "react";
-import { SceneView as F } from "@graphlearning/flow";
-import { Home as O, Volume2 as Y, VolumeX as Z, Moon as J, Sun as Q, ChevronLeft as U, ChevronRight as ee } from "lucide-react";
-import te from "react-markdown";
-import ne from "remark-gfm";
-function K(e, a) {
+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 I(e) {
-  return e.sections.map((a) => ({ section: a, slug: K(e, a) }));
+function D(e) {
+  return e.sections.map((a) => ({ section: a, slug: X(e, a) }));
 }
-const R = 806;
-function ae() {
-  const e = L(null), [a, s] = b(1);
-  return W(() => {
-    const i = e.current;
-    if (!i) return;
-    const d = () => s(i.clientWidth / R);
+const G = 806;
+function re() {
+  const e = $(null), [a, r] = b(1);
+  return O(() => {
+    const o = e.current;
+    if (!o) return;
+    const d = () => r(o.clientWidth / G);
     d();
-    const p = new ResizeObserver(d);
-    return p.observe(i), () => p.disconnect();
+    const g = new ResizeObserver(d);
+    return g.observe(o), () => g.disconnect();
   }, []), { ref: e, zoom: a };
 }
-function re({ slide: e, open: a }) {
-  const { ref: s, zoom: i } = ae();
-  return /* @__PURE__ */ t("aside", { ref: s, className: `slide-panel${a ? " slide-panel--open" : ""}`, children: /* @__PURE__ */ t("div", { className: "slide-panel__scaler", style: { width: R, zoom: i }, children: /* @__PURE__ */ t(te, { remarkPlugins: [ne], children: e }) }) });
+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 se({ audio: e }) {
-  const [a, s] = b(0), [i, d] = b(0), p = L(null);
-  if (v(() => {
+const z = 10;
+function ie({ audio: e }) {
+  const [a, r] = b(0), [o, d] = b(0), g = $(null);
+  if (k(() => {
     if (!e) return;
     const n = () => {
-      s(e.currentTime), d(Number.isFinite(e.duration) ? e.duration : 0);
+      r(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 || !i) return null;
+    return u.forEach((s) => e.addEventListener(s, n)), () => u.forEach((s) => e.removeEventListener(s, n));
+  }, [e]), !e || !o) return null;
   const f = (n) => {
-    const u = p.current;
+    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 * i, s(e.currentTime);
+    const s = u.getBoundingClientRect(), m = Math.min(1, Math.max(0, (n - s.left) / s.width));
+    e.currentTime = m * o, r(e.currentTime);
   }, l = (n) => {
-    const u = (r) => {
-      n.preventDefault(), n.stopPropagation(), e.currentTime = Math.min(i, Math.max(0, e.currentTime + r)), s(e.currentTime);
+    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(-5) : n.key === "ArrowRight" ? u(5) : n.key === "Home" ? u(-i) : n.key === "End" && u(i);
-  }, g = `${Math.min(100, a / i * 100)}%`;
+    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: T(a) }),
+    /* @__PURE__ */ t("span", { className: "reel-foot__count reel-foot__time", children: A(a) }),
     /* @__PURE__ */ h(
       "div",
       {
-        ref: p,
+        ref: g,
         className: "reel-foot__track",
         role: "slider",
         tabIndex: 0,
         "aria-label": "Narration position",
         "aria-valuemin": 0,
-        "aria-valuemax": Math.round(i),
+        "aria-valuemax": Math.round(o),
         "aria-valuenow": Math.round(a),
-        "aria-valuetext": `${T(a)} of ${T(i)}`,
+        "aria-valuetext": `${A(a)} of ${A(o)}`,
         onKeyDown: l,
         onPointerDown: (n) => {
           n.currentTarget.setPointerCapture(n.pointerId), f(n.clientX);
@@ -70,43 +71,43 @@ function se({ audio: e }) {
           n.currentTarget.hasPointerCapture(n.pointerId) && f(n.clientX);
         },
         children: [
-          /* @__PURE__ */ t("span", { className: "reel-foot__fill", style: { width: g } }),
-          /* @__PURE__ */ t("span", { className: "reel-foot__thumb", style: { left: g } })
+          /* @__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: T(i) })
+    /* @__PURE__ */ t("span", { className: "reel-foot__count reel-foot__time", children: A(o) })
   ] });
 }
-function T(e) {
+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 oe({
   section: e,
   getScene: a,
-  capture: s = !1,
-  eyebrow: i,
+  capture: r = !1,
+  eyebrow: o,
   index: d = 0,
-  total: p = 0,
+  total: g = 0,
   onHome: f,
   onPrev: l,
-  onNext: g,
+  onNext: p,
   narrating: n = !1,
   onToggleNarration: u,
-  narrationAudio: r = null,
+  narrationAudio: s = null,
   theme: m = "dark",
-  onToggleTheme: N
+  onToggleTheme: v
 }) {
-  const [_, w] = b(!1), y = a(e.scene);
-  return y ? /* @__PURE__ */ h("div", { className: "stage stage--section", children: [
+  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: [
-      i && /* @__PURE__ */ t("button", { className: "reel-head__eyebrow", onClick: f, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: i }),
+      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__ */ h("footer", { className: "reel-foot reel-foot--controls", children: [
+    !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(O, { size: 17 }) }),
+        /* @__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",
           {
@@ -114,53 +115,53 @@ function oe({
             onClick: u,
             "aria-label": n ? "Pause narration (Space)" : "Play narration (Space)",
             title: n ? "Pause narration (Space)" : "Play narration (Space)",
-            children: n ? /* @__PURE__ */ t(Y, { size: 18 }) : /* @__PURE__ */ t(Z, { size: 18 })
+            children: n ? /* @__PURE__ */ t(Z, { size: 18 }) : /* @__PURE__ */ t(J, { size: 18 })
           }
         ),
-        N && /* @__PURE__ */ t(
+        v && /* @__PURE__ */ t(
           "button",
           {
             className: "reel-foot__ctrl",
-            onClick: N,
+            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(J, { size: 17 }) : /* @__PURE__ */ t(Q, { size: 17 })
+            children: m === "dark" ? /* @__PURE__ */ t(Q, { size: 17 }) : /* @__PURE__ */ t(U, { size: 17 })
           }
         )
       ] }),
-      /* @__PURE__ */ t(se, { audio: r }),
+      /* @__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 (←)", title: "Previous section (←)", children: /* @__PURE__ */ t(U, { size: 19 }) }),
+        /* @__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,
           " / ",
-          p
+          g
         ] }),
-        /* @__PURE__ */ t("button", { className: "reel-foot__ctrl", onClick: g, "aria-label": "Next section (→)", title: "Next section (→)", children: /* @__PURE__ */ t(ee, { 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__ */ t("div", { className: "scene-area", children: /* @__PURE__ */ t(F, { scene: y, focusId: e.focus, theme: m }) }),
-    !s && /* @__PURE__ */ t(
+    /* @__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((x) => !x),
+        onClick: () => w((S) => !S),
         "aria-label": _ ? "Hide slide" : "Show slide",
         children: _ ? "›" : "‹"
       }
     ),
-    /* @__PURE__ */ t(re, { slide: e.slide, open: _ })
+    /* @__PURE__ */ t(se, { slide: e.slide, open: _ })
   ] }) : /* @__PURE__ */ h("div", { className: "stage stage--missing", children: [
     "no scene: ",
     e.scene
   ] });
 }
-const ie = [
+const le = [
   { id: "courses", label: "Courses" },
   { id: "labs", label: "Labs" },
   { id: "coach", label: "Coach" }
 ];
-function le() {
+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: [
@@ -169,38 +170,38 @@ function le() {
     ] })
   ] });
 }
-function ce({
+function de({
   kind: e = "courses",
-  nav: a = ie,
-  home: s = "/",
-  actions: i
+  nav: a = le,
+  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: s, children: [
-      /* @__PURE__ */ t(le, {}),
+    /* @__PURE__ */ h("a", { className: "site__brand", href: r, children: [
+      /* @__PURE__ */ t(ce, {}),
       /* @__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: `${s}#${d.id}`,
+        href: `${r}#${d.id}`,
         ...d.id === e ? { "aria-current": "page" } : {},
         children: d.label
       },
       d.id
     )) }),
-    /* @__PURE__ */ t("div", { className: "site__actions", children: i })
+    /* @__PURE__ */ t("div", { className: "site__actions", children: o })
   ] }) });
 }
-function de({
+function he({
   courses: e,
   subject: a,
-  kind: s,
-  actions: i
+  kind: r,
+  actions: o
 }) {
-  const [d, p] = b(() => /* @__PURE__ */ new Set()), f = (l) => p((g) => {
-    const n = new Set(g);
+  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 (
@@ -208,11 +209,11 @@ function de({
     // 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(ce, { kind: s, actions: i }),
+      /* @__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, g) => {
-          const n = I(l), u = d.has(l.id);
+        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",
@@ -221,7 +222,7 @@ function de({
                 onClick: () => f(l.id),
                 "aria-expanded": u,
                 children: [
-                  /* @__PURE__ */ t("span", { className: "idx-card__num", children: String(g + 1).padStart(2, "0") }),
+                  /* @__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,
@@ -231,9 +232,9 @@ function de({
                 ]
               }
             ),
-            u && /* @__PURE__ */ t("ol", { className: "idx-sec", children: n.map(({ section: r, slug: m }, N) => /* @__PURE__ */ t("li", { className: "idx-sec__row", children: /* @__PURE__ */ h("a", { href: `#/${m}`, children: [
-              /* @__PURE__ */ t("span", { className: "idx-sec__num", children: N + 1 }),
-              /* @__PURE__ */ t("span", { className: "idx-sec__title", children: r.title }),
+            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);
@@ -250,194 +251,202 @@ function de({
     ] })
   );
 }
-function he(e, a) {
-  const s = L(null), [i, d] = b(null), p = L(a);
-  p.current = a;
-  const [f, l] = b(!1), g = L(f);
-  return g.current = f, v(() => {
-    const r = new Audio();
-    return r.addEventListener("ended", () => p.current()), r.addEventListener("error", () => l(!1)), s.current = r, d(r), () => r.pause();
-  }, []), v(() => {
-    const r = s.current;
-    r && (r.pause(), e ? (r.src = e, r.currentTime = 0, g.current && r.play().catch(() => {
-    })) : (r.removeAttribute("src"), r.load(), l(!1)));
+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(() => {
+    const s = new Audio();
+    return s.addEventListener("ended", () => g.current()), s.addEventListener("error", () => l(!1)), r.current = s, d(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: () => {
-    const r = s.current;
-    !r || !r.getAttribute("src") || (g.current ? (r.pause(), l(!1)) : (r.play().catch(() => {
+    const s = r.current;
+    !s || !s.getAttribute("src") || (p.current ? (s.pause(), l(!1)) : (s.play().catch(() => {
     }), l(!0)));
   }, stop: () => {
-    var r;
-    (r = s.current) == null || r.pause(), l(!1);
-  }, audio: i };
+    var s;
+    (s = r.current) == null || s.pause(), l(!1);
+  }, audio: o };
 }
-const D = "graphl:theme";
-function j() {
+const B = "graphl:theme";
+function F() {
   try {
-    const e = localStorage.getItem(D);
+    const e = localStorage.getItem(B);
     return e === "light" || e === "dark" ? e : null;
   } catch {
     return null;
   }
 }
-function ue(e) {
+function me(e) {
   try {
-    localStorage.setItem(D, e);
+    localStorage.setItem(B, e);
   } catch {
   }
 }
-const me = (e, a, s) => s || !a ? e : a;
-function fe(e, a) {
-  const [s, i] = b(() => a ? null : j()), d = me(e, s, a);
-  v(() => (document.documentElement.setAttribute("data-theme", d), () => document.documentElement.removeAttribute("data-theme")), [d]), v(() => {
+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(() => {
     if (a) return;
     const f = (l) => {
-      (l.key === D || l.key === null) && i(j());
+      (l.key === B || l.key === null) && o(F());
     };
     return window.addEventListener("storage", f), () => window.removeEventListener("storage", f);
   }, [a]);
-  const p = M(() => {
+  const g = I(() => {
     const f = d === "dark" ? "light" : "dark";
-    ue(f);
+    me(f);
     const l = document.documentElement;
-    l.classList.add("theme-swap"), i(f), requestAnimationFrame(() => requestAnimationFrame(() => l.classList.remove("theme-swap")));
+    l.classList.add("theme-swap"), o(f), requestAnimationFrame(() => requestAnimationFrame(() => l.classList.remove("theme-swap")));
   }, [d]);
-  return { theme: d, toggle: p };
+  return { theme: d, toggle: g };
 }
 const P = {
   dark: { glyph: "☾", label: "Dark theme" },
   light: { glyph: "☀", label: "Light theme" }
 };
 function pe({ theme: e, onToggle: a }) {
-  const s = e === "dark" ? "light" : "dark", i = `${P[e].label}. Switch to ${P[s].label.toLowerCase()}.`;
-  return /* @__PURE__ */ t("button", { className: "site__icon", type: "button", onClick: a, "aria-label": i, title: i, children: P[e].glyph });
+  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 });
 }
-function be({
+function ye({
   subject: e,
   eyebrow: a,
-  courses: s,
-  getScene: i,
+  courses: r,
+  getScene: o,
   audioBase: d = "/",
-  kind: p = "courses",
+  kind: g = "courses",
   theme: f = "dark"
 }) {
-  const [l, g] = b(() => location.hash);
-  v(() => {
-    const o = () => g(location.hash);
-    return window.addEventListener("hashchange", o), () => window.removeEventListener("hashchange", o);
+  const [l, p] = b(() => location.hash);
+  k(() => {
+    const i = () => p(location.hash);
+    return window.addEventListener("hashchange", i), () => window.removeEventListener("hashchange", i);
   }, []);
-  const n = new URLSearchParams(location.search).get("capture") === "1", { theme: u, toggle: r } = fe(f, n), m = l.replace(/^#\/?/, ""), N = C(() => {
-    if (s[m]) return s[m];
-    for (const o of Object.values(s))
-      if (o.sections.some((c) => K(o, c) === m)) return o;
-    return Object.values(s)[0];
-  }, [m, s]), _ = C(() => I(N), [N]), w = C(() => Object.values(s).flatMap(I), [s]);
-  v(() => {
-    if (n || !s[m]) return;
-    const o = _[0];
-    o && (history.replaceState(null, "", `${location.pathname}${location.search}#/${o.slug}`), g(`#/${o.slug}`));
-  }, [n, m, _]), v(() => {
+  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]);
+  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 && (window.__scene = {
-      plan: () => _.map(({ slug: o, section: c }) => ({
-        slug: o,
-        course: N.id,
+      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
       }))
     });
-  }, [n, _, N]);
-  const y = M(
-    (o) => {
-      const c = location.hash.replace(/^#\/?/, ""), k = w.findIndex(({ slug: S }) => S === c);
-      if (k !== -1) {
-        const S = w[k + o];
-        location.hash = S ? `#/${S.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 (c === "") {
-        o === 1 && w[0] && (location.hash = `#/${w[0].slug}`);
+        i === 1 && w[0] && (location.hash = `#/${w[0].slug}`);
         return;
       }
-      const $ = o === 1 ? _[0] : _[_.length - 1];
-      $ && (location.hash = `#/${$.slug}`);
+      const L = i === 1 ? _[0] : _[_.length - 1];
+      L && (location.hash = `#/${L.slug}`);
     },
     [_, w]
-  );
-  v(() => {
-    const o = (c) => {
-      c.key !== "ArrowRight" && c.key !== "ArrowLeft" || (c.preventDefault(), y(c.key === "ArrowRight" ? 1 : -1));
-    };
-    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
-  }, [y]);
-  const x = M(() => {
+  ), S = I(() => {
     location.hash ? location.hash = "" : location.pathname !== "/" && (location.href = "/");
   }, []);
-  v(() => {
-    const o = (c) => {
-      c.key === "Escape" && x();
+  k(() => {
+    const i = (c) => {
+      c.key === "Escape" && S();
     };
-    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
-  }, [x]);
-  const E = _.find(({ slug: o }) => o === m), X = E ? `${d}audio/${N.id}/${E.section.id}.wav` : void 0, { playing: G, toggle: z, stop: V, audio: q } = he(X, () => {
-    const o = location.hash.replace(/^#\/?/, ""), c = w.findIndex(({ slug: $ }) => $ === o), k = w[c + 1];
-    k ? location.hash = `#/${k.slug}` : V();
+    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();
   });
-  if (v(() => {
-    const o = (c) => {
+  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 k = c.target;
-      k && (k.tagName === "INPUT" || k.tagName === "TEXTAREA" || k.isContentEditable) || (c.preventDefault(), z());
+      const N = c.target;
+      N && (N.tagName === "INPUT" || N.tagName === "TEXTAREA" || N.isContentEditable) || (c.preventDefault(), K());
     };
-    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
   }), !m)
     return /* @__PURE__ */ t(
-      de,
+      he,
       {
-        courses: Object.values(s),
+        courses: Object.values(r),
         subject: e,
-        kind: p,
-        actions: n ? null : /* @__PURE__ */ t(pe, { theme: u, onToggle: r })
+        kind: g,
+        actions: n ? null : /* @__PURE__ */ t(pe, { theme: u, onToggle: s })
       }
     );
-  let A, B = null;
-  if (E) {
-    const o = _.findIndex(({ slug: c }) => c === m);
-    A = /* @__PURE__ */ t(
+  let C, j = null;
+  if (T) {
+    const i = _.findIndex(({ slug: c }) => c === m);
+    C = /* @__PURE__ */ t(
       oe,
       {
-        section: E.section,
-        getScene: i,
+        section: T.section,
+        getScene: o,
         capture: n,
-        eyebrow: `${a ?? e.toUpperCase()} · ${N.id.toUpperCase()}`,
-        index: o,
+        eyebrow: `${a ?? e.toUpperCase()} · ${v.id.toUpperCase()}`,
+        index: i,
         total: _.length,
-        onHome: x,
-        onPrev: () => y(-1),
-        onNext: () => y(1),
-        narrating: G,
-        onToggleNarration: z,
-        narrationAudio: q,
+        onHome: S,
+        onPrev: () => E(-1),
+        onNext: () => E(1),
+        narrating: q,
+        onToggleNarration: K,
+        narrationAudio: y,
         theme: u,
-        onToggleTheme: n ? void 0 : r
+        onToggleTheme: n ? void 0 : s
       }
     );
   } else {
-    const o = i(m);
-    A = o ? /* @__PURE__ */ t("div", { className: "stage", children: /* @__PURE__ */ t(F, { scene: o, theme: u }) }) : /* @__PURE__ */ h("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: ",
       m
-    ] }), B = n ? null : /* @__PURE__ */ t("button", { className: "brand-home", onClick: x, "aria-label": "Back to catalog (Esc)", title: "Back to catalog (Esc)", children: "GraphL" });
+    ] }), 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: [
-    B,
-    A
+    j,
+    C
   ] });
 }
 export {
-  be as ConceptApp,
-  ce as SiteHeader,
-  I as allSections,
-  K as slugOf
+  ye as ConceptApp,
+  de as SiteHeader,
+  D as allSections,
+  X as slugOf
 };
 //# sourceMappingURL=index.js.map