@graphlearning/shell 0.2.0 → 0.4.0

package/README.md

@@ -29,6 +29,32 @@ 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 />} />
+```
+
+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
 
 **1. Import order.** The three stylesheets cascade: engine, shell, theme. The theme must come last

package/dist/ConceptApp.d.ts

@@ -1,8 +1,11 @@
+import { type ThemeKey } from '@graphlearning/flow';
 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, 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,5 +1,8 @@
 import type { Course } from './types';
-export declare function CourseIndex({ courses, subject }: {
+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/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/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;

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';