@dsbasko/cookbook-engine 0.1.0

package/src/components/Header/Header.module.css

@@ -0,0 +1,131 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-header);
+  background-color: color-mix(in srgb, var(--bg-default) 90%, transparent);
+  backdrop-filter: saturate(180%) blur(10px);
+  border-bottom: 1px solid var(--bg-stroke);
+  min-height: 56px;
+}
+
+/* Constrain header content to the same max-width as LessonPageLayout so the
+   breadcrumbs and lesson nav sit directly above the article column rather
+   than stretching across the full viewport. */
+.inner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-8);
+  max-width: 1280px;
+  width: 100%;
+  margin: 0 auto;
+  min-height: 56px;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--font-size-sm);
+  color: var(--content-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.breadcrumbRoot {
+  color: var(--content-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.breadcrumbLink {
+  color: var(--content-secondary);
+  text-decoration: none;
+  transition: color 120ms ease;
+  border-radius: var(--radius-sm);
+}
+
+.breadcrumbLink:hover {
+  color: var(--content-link-hover);
+}
+
+.breadcrumbLink:focus-visible {
+  outline: 2px solid var(--accent-main);
+  outline-offset: 2px;
+}
+
+.breadcrumbCurrent {
+  color: var(--content-primary);
+  font-weight: var(--font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.breadcrumbSeparator {
+  color: var(--content-tertiary);
+  flex: 0 0 auto;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: 0 0 auto;
+}
+
+.actions > :first-child:not(.navButton):not(.navButtonDisabled) {
+  margin-right: var(--space-3);
+}
+
+.navButton,
+.navButtonDisabled {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--radius-md);
+  border: none;
+  background: transparent;
+  color: var(--content-secondary);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+
+.navButton:hover {
+  background-color: var(--bg-subtle);
+  color: var(--content-primary);
+}
+
+.navButton:focus-visible {
+  outline: 2px solid var(--accent-main);
+  outline-offset: 2px;
+}
+
+.navButtonDisabled {
+  color: var(--content-tertiary);
+  cursor: default;
+  opacity: 0.4;
+}
+
+@media (max-width: 720px) {
+  .inner {
+    padding: var(--space-3) var(--space-5);
+  }
+}
+
+/* Mobile reader mode: the sticky header is replaced by two FABs on the
+   sidebar layer (settings + program), so the breadcrumb/progress/lesson-nav
+   chrome is hidden entirely. Everything it carried — breadcrumbs context,
+   progress percent, prev/next — lives inside the program overlay and
+   inside LessonNav at the article footer. */
+@media (max-width: 1023px) {
+  .header {
+    display: none;
+  }
+}

package/src/components/Header/Header.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { DEFAULT_BRAND_NAME } from '@/lib/course';
+import { getDict } from '@/lib/i18n';
+import { type Lang } from '@/lib/lang';
+import styles from './Header.module.css';
+
+type HeaderProps = {
+  lang: Lang;
+  breadcrumbs?: ReactNode;
+  actions?: ReactNode;
+  brandRoot?: string;
+};
+
+export function Header({ lang, breadcrumbs, actions, brandRoot = DEFAULT_BRAND_NAME }: HeaderProps) {
+  const t = getDict(lang);
+  return (
+    <header className={styles.header}>
+      <div className={styles.inner}>
+        <div className={styles.breadcrumbs} aria-label={t.breadcrumbsLabel}>
+          {breadcrumbs ?? <span className={styles.breadcrumbRoot}>{brandRoot}</span>}
+        </div>
+        <div className={styles.actions}>{actions}</div>
+      </div>
+    </header>
+  );
+}

package/src/components/Header/HeaderLessonNav.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import Link from 'next/link';
+import { useGate } from '@/components/GateProvider';
+import { useProgressMode } from '@/components/ProgressModeProvider';
+import type { FlatLessonEntry } from '@/lib/course';
+import { lessonKey, markCompletedAndAdvance } from '@/lib/progress';
+import { useLang, useT } from '@/lib/use-i18n';
+import styles from './Header.module.css';
+
+type HeaderLessonNavProps = {
+  prev: FlatLessonEntry | null;
+  next: FlatLessonEntry | null;
+  currentModuleId: string;
+  currentSlug: string;
+};
+
+export function HeaderLessonNav({
+  prev,
+  next,
+  currentModuleId,
+  currentSlug,
+}: HeaderLessonNavProps) {
+  const gate = useGate();
+  const { disabled } = useProgressMode();
+  const t = useT();
+  const lang = useLang();
+  const handleNextClick = () => {
+    // Free-reading mode: the chevron is visible and clickable (CSS hides only
+    // the progress widgets, not this nav), so guard the write explicitly — in
+    // free-reading mode it only navigates and never records progress.
+    if (disabled) return;
+    // Mirror LessonNav: advance the sticky pointer before navigating so the
+    // gate considers the next lesson reachable. Without this, clicking the
+    // header chevron from a fresh-state lesson lands on the locked interstitial.
+    markCompletedAndAdvance(gate.course, lessonKey(currentModuleId, currentSlug));
+  };
+
+  return (
+    <>
+      {prev ? (
+        <Link
+          href={`/${lang}/${prev.moduleId}/${prev.lesson.slug}`}
+          className={styles.navButton}
+          title={`← ${prev.lesson.title}`}
+          aria-label={`${t.prevLessonAria}: ${prev.lesson.title}`}
+        >
+          <ChevronLeft />
+        </Link>
+      ) : (
+        <span
+          className={styles.navButtonDisabled}
+          aria-hidden="true"
+          title={t.firstLessonTitle}
+        >
+          <ChevronLeft />
+        </span>
+      )}
+      {next ? (
+        <Link
+          href={`/${lang}/${next.moduleId}/${next.lesson.slug}`}
+          className={styles.navButton}
+          title={`${next.lesson.title} →`}
+          aria-label={`${t.nextLessonAria}: ${next.lesson.title}`}
+          onClick={handleNextClick}
+        >
+          <ChevronRight />
+        </Link>
+      ) : (
+        <span
+          className={styles.navButtonDisabled}
+          aria-hidden="true"
+          title={t.lastLessonTitle}
+        >
+          <ChevronRight />
+        </span>
+      )}
+    </>
+  );
+}
+
+function ChevronLeft() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M15 6 9 12l6 6" />
+    </svg>
+  );
+}
+
+function ChevronRight() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="m9 6 6 6-6 6" />
+    </svg>
+  );
+}

package/src/components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';