@graphlearning/shell 0.3.0 → 0.5.0

package/README.md

@@ -50,9 +50,10 @@ 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 bar exists **three times** by necessity — `ui-graphl` (buildless vanilla), this package, and
+`python-lab` (which hand-ports it rather than take this package as a dependency; see the invariant
+in CLAUDE.md). One design, three implementations — **when you change one, change all three**, or
+they drift and the seam shows on every crossing.
 
 ## The three contracts
 
@@ -118,6 +119,23 @@ They are `bin` entries, wired through each repo's `npm run`:
 | `npm run gen:desc` | video descriptions + chapters |
 | `npm run gen:audio` | the narration manifest |
 
+**Capture is not realtime.** `record` and `record:reels` screencast one short window per section and
+loop it over the narration (`-stream_loop`), because the only moving thing in a frame is the engine's
+edge pulse and that pulse has a 2.4s period — and a pulse crosses its whole edge in exactly one
+period, so one period is the whole picture. A 90-second section is captured in ~3.4s; the output's
+timing is unchanged.
+
+| env | default | what it does |
+|---|---|---|
+| `LOOP_CYCLES` | `1` | window length, in pulse periods → 2.4s |
+| `LOOP_MS` | — | window length in ms, snapped to a whole period |
+| `PULSE_S` | `2.4` | the engine's `animateMotion dur` — must match `ui-flow`'s `FlowEdge` |
+| `LOOP_LEAD_S` | `0.5` | discarded screencast ramp-up before the window |
+| `NO_LOOP` | — | set to hold for the whole wav, as before |
+
+The window **must** be a whole multiple of `PULSE_S` or the loop join shows a jump — which is why
+`LOOP_MS` is snapped rather than taken literally.
+
 **Where things live.** Scripts resolve two roots explicitly (`scripts/_paths.mjs`), because from
 `node_modules` they can no longer use their own directory:
 

package/dist/ConceptApp.d.ts

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

package/dist/CourseIndex.d.ts

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

package/dist/SectionView.d.ts

@@ -1,5 +1,6 @@
+import { type ThemeKey } from '@graphlearning/flow';
 import type { Section, SceneLookup } from './types';
-export declare function SectionView({ section, getScene, capture, eyebrow, index, total, onHome, onPrev, onNext, narrating, onToggleNarration, }: {
+export declare function SectionView({ section, getScene, capture, eyebrow, index, total, onHome, onPrev, onNext, narrating, onToggleNarration, theme, onToggleTheme, }: {
     section: Section;
     getScene: SceneLookup;
     capture?: boolean;
@@ -11,4 +12,6 @@ export declare function SectionView({ section, getScene, capture, eyebrow, index
     onNext?: () => void;
     narrating?: boolean;
     onToggleNarration?: () => void;
+    theme?: ThemeKey;
+    onToggleTheme?: () => void;
 }): import("react").JSX.Element;

package/dist/ThemeToggle.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeKey } from '@graphlearning/flow';
+export declare function ThemeToggle({ theme, onToggle }: {
+    theme: ThemeKey;
+    onToggle: () => void;
+}): import("react").JSX.Element;