@graphlearning/shell 0.1.0 → 0.3.0

package/README.md

@@ -29,6 +29,31 @@ import { getScene } from './scenes'
 That is the whole integration. A content repo's `src/` is then `content/`, `scenes/`, `main.tsx`
 and `theme.css`.
 
+## The site bar
+
+`ConceptApp` renders the platform's header — brand, section nav, an empty actions slot — above its
+catalog page, and nowhere else. It is a port of the bar at graphl.in, class for class, so a reader
+crossing from the catalog into a concept app never leaves "the site". Nothing to pass: a content
+repo is a course, which is the default.
+
+It is deliberately platform-coloured, not `--brand`: looking identical on all eight sites is the
+whole reason it exists. It renders on the catalog page ONLY — never on a section, which is a video
+frame — so the recorder cannot see it.
+
+An app that is not a course (`python-lab` is a lab) says so, and one that is not a `ConceptApp` at
+all imports the bar directly — the one part of this package that is exported on its own:
+
+```tsx
+<ConceptApp … kind="labs" />          // marks Labs as the current nav item
+
+import { SiteHeader } from '@graphlearning/shell'
+<SiteHeader kind="labs" actions={<ThemeToggle />} />
+```
+
+`ui-graphl` is buildless vanilla and this is a React package, so the bar exists twice by necessity.
+One design, two implementations — **when you change one, change the other**, or they drift and the
+seam shows on every crossing.
+
 ## The three contracts
 
 **1. Import order.** The three stylesheets cascade: engine, shell, theme. The theme must come last
@@ -77,3 +102,43 @@ regression is visible here before it reaches any content repo.
 second react-flow store) inside this package. The content repo pins the engine itself and must get
 exactly one copy — and a wide peer range (`>=0.5.0 <1.0.0`) means an engine minor does not force a
 republish of this package.
+
+## The toolchain
+
+The capture / record / publish scripts ship with this package too — they were byte-identical in all
+seven repos and they drive the route contract above, so they version with the shell that defines it.
+They are `bin` entries, wired through each repo's `npm run`:
+
+| command | what it does |
+|---|---|
+| `npm run record` | one course → a 3840×2160 MP4 |
+| `npm run record:reels` | one course → portrait reels |
+| `npm run shots:4k` | one PNG per section, no ffmpeg |
+| `npm run thumb` | a branded YouTube thumbnail |
+| `npm run gen:desc` | video descriptions + chapters |
+| `npm run gen:audio` | the narration manifest |
+
+**Where things live.** Scripts resolve two roots explicitly (`scripts/_paths.mjs`), because from
+`node_modules` they can no longer use their own directory:
+
+- `repoDir` = `process.cwd()` — the content repo. `npm run` sets cwd to the package root.
+- `dataDir` = `repoDir/scripts` — the repo's script data (`concept.json`, `titles.json`,
+  `audio-manifest.json`) **and every output** (`out/`, `segments/`, `.tmp/`), at exactly the paths
+  they used before the extraction, so existing `.gitignore` entries still hold.
+- `pkgDir` — machinery that ships here (`thumb-template.html`).
+
+**Peer resolution.** `puppeteer` and `esbuild` are optional peers, loaded via `loadPeer()` which
+resolves them **from the repo**, not from this package. A bare `import('puppeteer')` resolves by
+walking up from the importing file, which under a local `file:` install lands in `ui-shell/` and
+never reaches the repo's `node_modules`.
+
+**`scripts/concept.json`** is the per-repo publishing identity — the values that used to be
+hardcoded defaults in each repo's copy, which is precisely why they drifted:
+
+```json
+{ "concept": "Apache Spark", "kicker": "SPARK", "site": "https://graphl.in",
+  "appPath": "/apache-spark", "hashtags": "#ApacheSpark …", "panelBg": "radial-gradient(…)" }
+```
+
+`concept` is the name used in descriptions; `kicker` is the thumbnail panel's label and defaults to
+`concept` — they differ only where a long name will not fit the panel (apache-spark).

package/dist/ConceptApp.d.ts

@@ -1,8 +1,9 @@
 import type { Course, SceneLookup } from './types';
-export declare function ConceptApp({ subject, eyebrow, courses: COURSES, getScene, audioBase, }: {
+export declare function ConceptApp({ subject, eyebrow, courses: COURSES, getScene, audioBase, kind, }: {
     subject: string;
     courses: Record<string, Course>;
     eyebrow?: string;
     getScene: SceneLookup;
     audioBase?: string;
+    kind?: string;
 }): import("react").JSX.Element;

package/dist/CourseIndex.d.ts

@@ -1,5 +1,6 @@
 import type { Course } from './types';
-export declare function CourseIndex({ courses, subject }: {
+export declare function CourseIndex({ courses, subject, kind, }: {
     courses: Course[];
     subject: string;
+    kind?: string;
 }): import("react").JSX.Element;

package/dist/SiteHeader.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export declare function SiteHeader({ kind, nav, home, actions, }: {
+    kind?: string;
+    nav?: {
+        id: string;
+        label: string;
+    }[];
+    home?: string;
+    actions?: ReactNode;
+}): import("react").JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export type { Section, Course, SceneLookup } from './types';
 export { slugOf, allSections } from './types';
 export { ConceptApp } from './ConceptApp';
+export { SiteHeader } from './SiteHeader';

package/dist/index.js

@@ -1,269 +1,318 @@
-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 { 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 I(a, i) {
-  return `${a.id}-${i.id}`;
+function j(a, c) {
+  return `${a.id}-${c.id}`;
 }
-function E(a) {
-  return a.sections.map((i) => ({ section: i, slug: I(a, i) }));
+function P(a) {
+  return a.sections.map((c) => ({ section: c, slug: j(a, c) }));
 }
-const j = 806;
+const B = 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 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 };
 }
-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 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 Z({
+function q({
   section: a,
-  getScene: i,
-  capture: r = !1,
-  eyebrow: d,
-  index: p = 0,
-  total: c = 0,
-  onHome: f,
-  onPrev: l,
-  onNext: o,
-  narrating: t = !1,
-  onToggleNarration: u
+  getScene: c,
+  capture: s = !1,
+  eyebrow: l,
+  index: h = 0,
+  total: f = 0,
+  onHome: o,
+  onPrev: _,
+  onNext: u,
+  narrating: n = !1,
+  onToggleNarration: p
 }) {
-  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 }),
+  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 })
     ] }),
-    !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__ */ 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 }) }),
         /* @__PURE__ */ e(
           "button",
           {
             className: "reel-foot__ctrl",
-            onClick: u,
-            "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 })
+            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 })
           }
         )
       ] }),
-      /* @__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__ */ 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,
           " / ",
-          c
+          f
         ] }),
-        /* @__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: u, "aria-label": "Next section (→)", title: "Next section (→)", children: /* @__PURE__ */ e(W, { 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(S, { scene: v, focusId: a.focus }) }),
+    !s && /* @__PURE__ */ e(
       "button",
       {
         className: "slide-toggle",
-        onClick: () => v((w) => !w),
-        "aria-label": m ? "Hide slide" : "Show slide",
-        children: m ? "›" : "‹"
+        onClick: () => m((w) => !w),
+        "aria-label": d ? "Hide slide" : "Show slide",
+        children: d ? "›" : "‹"
       }
     ),
-    /* @__PURE__ */ e(W, { slide: a.slide, open: m })
-  ] }) : /* @__PURE__ */ h("div", { className: "stage stage--missing", children: [
+    /* @__PURE__ */ e(Z, { slide: a.slide, open: d })
+  ] }) : /* @__PURE__ */ i("div", { className: "stage stage--missing", children: [
     "no scene: ",
     a.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 J = [
+  { 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: [
+    /* @__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__ */ 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, _(() => {
-    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)));
+function Y({
+  kind: a = "courses",
+  nav: c = J,
+  home: s = "/",
+  actions: l
+}) {
+  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, {}),
+      /* @__PURE__ */ e("span", { className: "site__name", children: "GraphL" })
+    ] }),
+    /* @__PURE__ */ e("nav", { className: "site__nav", "aria-label": "Sections", children: c.map((h) => /* @__PURE__ */ e(
+      "a",
+      {
+        className: "site__link",
+        href: `${s}#${h.id}`,
+        ...h.id === a ? { "aria-current": "page" } : {},
+        children: h.label
+      },
+      h.id
+    )) }),
+    /* @__PURE__ */ e("div", { className: "site__actions", children: l })
+  ] }) });
+}
+function U({
+  courses: a,
+  subject: c,
+  kind: s
+}) {
+  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;
+  });
+  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(
+              "button",
+              {
+                className: "idx-card__head",
+                onClick: () => f(o.id),
+                "aria-expanded": n,
+                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,
+                    " 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 }),
+              /* @__PURE__ */ e("span", { className: "idx-sec__chev", "aria-hidden": "true", children: "›" })
+            ] }) }, d)) })
+          ] }, o.id);
+        }) }),
+        /* @__PURE__ */ e("footer", { className: "idx__foot", children: /* @__PURE__ */ i("span", { className: "idx__hint", children: [
+          /* @__PURE__ */ e("kbd", { children: "→" }),
+          " next · ",
+          /* @__PURE__ */ e("kbd", { children: "←" }),
+          " prev · ",
+          /* @__PURE__ */ e("kbd", { children: "Space" }),
+          " narration"
+        ] }) })
+      ] })
+    ] })
+  );
+}
+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();
+  }, []), 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)));
   }, stop: () => {
-    var t;
-    (t = r.current) == null || t.pause(), c(!1);
+    var n;
+    (n = s.current) == null || n.pause(), f(!1);
   } };
 }
-function ae({
+function ce({
   subject: a,
-  eyebrow: i,
-  courses: r,
-  getScene: d,
-  audioBase: p = "/"
+  eyebrow: c,
+  courses: s,
+  getScene: l,
+  audioBase: h = "/",
+  kind: f = "courses"
 }) {
-  const [c, f] = x(() => location.hash);
-  _(() => {
-    const n = () => f(location.hash);
-    return window.addEventListener("hashchange", n), () => window.removeEventListener("hashchange", n);
+  const [o, _] = b(() => location.hash);
+  N(() => {
+    const t = () => _(location.hash);
+    return window.addEventListener("hashchange", t), () => window.removeEventListener("hashchange", t);
   }, []);
-  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 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;
+    return Object.values(s)[0];
+  }, [n, s]), d = E(() => P(p), [p]), m = E(() => Object.values(s).flatMap(P), [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,
         // audio lives at audio/<course>/<id>.wav
-        id: s.id,
-        scene: s.scene,
-        focus: s.focus ?? null
+        id: r.id,
+        scene: r.scene,
+        focus: r.focus ?? null
       }))
     });
-  }, [l, u, t]);
-  const v = C(
-    (n) => {
-      const s = location.hash.replace(/^#\/?/, ""), g = m.findIndex(({ slug: k }) => k === s);
+  }, [u, d, p]);
+  const v = z(
+    (t) => {
+      const r = location.hash.replace(/^#\/?/, ""), g = m.findIndex(({ slug: y }) => y === r);
       if (g !== -1) {
-        const k = m[g + n];
-        location.hash = k ? `#/${k.slug}` : "";
+        const y = m[g + t];
+        location.hash = y ? `#/${y.slug}` : "";
         return;
       }
-      if (s === "") {
-        n === 1 && m[0] && (location.hash = `#/${m[0].slug}`);
+      if (r === "") {
+        t === 1 && m[0] && (location.hash = `#/${m[0].slug}`);
         return;
       }
-      const b = n === 1 ? u[0] : u[u.length - 1];
-      b && (location.hash = `#/${b.slug}`);
+      const k = t === 1 ? d[0] : d[d.length - 1];
+      k && (location.hash = `#/${k.slug}`);
     },
-    [u, m]
+    [d, m]
   );
-  _(() => {
-    const n = (s) => {
-      s.key !== "ArrowRight" && s.key !== "ArrowLeft" || (s.preventDefault(), v(s.key === "ArrowRight" ? 1 : -1));
+  N(() => {
+    const t = (r) => {
+      r.key !== "ArrowRight" && r.key !== "ArrowLeft" || (r.preventDefault(), v(r.key === "ArrowRight" ? 1 : -1));
     };
-    return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
   }, [v]);
-  const N = C(() => {
+  const w = z(() => {
     location.hash ? location.hash = "" : location.pathname !== "/" && (location.href = "/");
   }, []);
-  _(() => {
-    const n = (s) => {
-      s.key === "Escape" && N();
+  N(() => {
+    const t = (r) => {
+      r.key === "Escape" && w();
     };
-    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", 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();
   });
-  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 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());
     };
-    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);
+    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(
-      Z,
+      q,
       {
-        section: w.section,
-        getScene: d,
-        capture: l,
-        eyebrow: `${i ?? a.toUpperCase()} · ${t.id.toUpperCase()}`,
-        index: n,
-        total: u.length,
-        onHome: N,
+        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: H,
-        onToggleNarration: P
+        narrating: M,
+        onToggleNarration: A
       }
     );
   } 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 t = l(n);
+    $ = t ? /* @__PURE__ */ e("div", { className: "stage", children: /* @__PURE__ */ e(S, { scene: t }) }) : /* @__PURE__ */ i("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" });
+      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" });
   }
-  return /* @__PURE__ */ h(T, { children: [
-    A,
+  return /* @__PURE__ */ i(I, { children: [
+    C,
     $
   ] });
 }
 export {
-  ae as ConceptApp,
-  E as allSections,
-  I as slugOf
+  ce as ConceptApp,
+  Y as SiteHeader,
+  P as allSections,
+  j as slugOf
 };
 //# sourceMappingURL=index.js.map