@dsbasko/cookbook-engine 0.1.0

package/src/components/LessonLockedInterstitial/LessonLockedInterstitial.module.css

@@ -0,0 +1,367 @@
+/* Locked-lesson interstitial.
+   Built on the same editorial-technical chassis as ModulePage / HomePage hero:
+   asymmetric two-column hero, mono eyebrows, brutalist accent buttons, mono
+   numeric stats. The user lands here when navigating directly to a lesson
+   they haven't unlocked yet — by mirroring the rest of the course the page
+   feels like a continuation, not an error screen. */
+
+.page {
+  --li-space-7: 32px;
+  --li-space-8: 40px;
+  --li-space-9: 56px;
+  --li-space-10: 72px;
+  --li-space-11: 96px;
+
+  --li-fs-meta: 12px;
+  --li-fs-small: 13px;
+  --li-fs-body: 15px;
+  --li-fs-lead: 18px;
+  --li-fs-display: 64px;
+
+  --li-r-1: 2px;
+  --li-r-2: 4px;
+  --li-r-3: 8px;
+
+  padding: var(--li-space-9) var(--li-space-7) var(--li-space-11);
+  max-width: 1280px;
+  width: 100%;
+  margin: 0 auto;
+  font-size: var(--li-fs-body);
+  line-height: 1.55;
+}
+
+/* ---------- Hero ---------- */
+
+.hero {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: var(--li-space-9);
+  align-items: start;
+}
+
+.heroText {
+  min-width: 0;
+}
+
+.eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: var(--li-fs-meta);
+  color: var(--content-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: var(--space-5);
+  flex-wrap: wrap;
+}
+
+/* Locked-state chip — borrows the boxed-eyebrow look from ModulePage's
+   "01 / 09" badge but flips it to the notice palette so the gate is the
+   first thing the eye finds. */
+.eyebrowBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--accent-notice);
+  font-weight: 600;
+  padding: 3px 8px;
+  background: var(--accent-notice-soft);
+  border: 1px solid var(--accent-notice);
+  border-radius: var(--li-r-1);
+}
+
+.eyebrowDot {
+  color: var(--bg-stroke-strong);
+}
+
+.title {
+  font-size: var(--li-fs-display);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  font-weight: 700;
+  margin: 0 0 var(--space-5);
+  color: var(--content-primary);
+  text-wrap: balance;
+  max-width: 640px;
+}
+
+.desc {
+  font-size: var(--li-fs-lead);
+  line-height: 1.5;
+  color: var(--content-secondary);
+  margin: 0 0 var(--li-space-7);
+  max-width: 580px;
+  text-wrap: pretty;
+}
+
+/* "/ вы пытались открыть" — a thin editorial card pinned under the lead,
+   echoing the way ModulePage labels its lesson list. Helps the user
+   confirm they landed where they intended even though it's locked. */
+.targetCard {
+  margin: 0 0 var(--li-space-7);
+  padding: var(--space-4) var(--space-5);
+  background: var(--bg-subtle);
+  border: 1px solid var(--bg-stroke);
+  border-left: 2px solid var(--accent-notice);
+  border-radius: var(--li-r-2);
+  max-width: 580px;
+}
+
+.targetLabel {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--content-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0 0 var(--space-2);
+}
+
+.targetTitle {
+  margin: 0;
+  font-size: var(--li-fs-body);
+  color: var(--content-primary);
+}
+
+.targetModule {
+  color: var(--content-secondary);
+}
+
+.targetSep {
+  color: var(--content-tertiary);
+}
+
+.targetLesson {
+  color: var(--content-primary);
+  font-weight: 600;
+}
+
+.ctaRow {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+/* ---------- Buttons (mirror ModulePage/HomePage) ---------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 12px var(--space-5);
+  border-radius: var(--li-r-2);
+  font-size: var(--li-fs-body);
+  font-weight: 600;
+  border: 1px solid transparent;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+  white-space: nowrap;
+  text-decoration: none;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.btnPrimary {
+  background: var(--accent-main);
+  color: var(--content-inverse);
+  border-color: var(--accent-main);
+}
+
+/* Pin the foreground on hover — the missing color override was the bug:
+   --content-inverse (cream) was inheriting from the parent and falling onto
+   --accent-main-hover (deep moss), wiping out the label. */
+.btnPrimary:hover {
+  background: var(--accent-main-hover);
+  border-color: var(--accent-main-hover);
+  color: var(--content-inverse);
+}
+
+.btnGhost {
+  background: transparent;
+  color: var(--content-secondary);
+  padding: 12px var(--space-3);
+}
+
+.btnGhost:hover {
+  color: var(--content-primary);
+}
+
+.btnArrow {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-weight: 400;
+  transition: transform 150ms ease;
+}
+
+.btn:hover .btnArrow {
+  transform: translateX(3px);
+}
+
+/* ---------- Side card (sticky readout) ---------- */
+
+.sideCard {
+  background: var(--bg-surface);
+  border: 1px solid var(--bg-stroke);
+  border-radius: var(--li-r-3);
+  padding: var(--space-6);
+  position: sticky;
+  top: var(--li-space-7);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.sideRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.sideLabel {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: var(--li-fs-meta);
+  color: var(--content-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.sideVal {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: var(--li-fs-small);
+  color: var(--content-primary);
+  font-weight: 600;
+}
+
+.sideBar {
+  height: 6px;
+  background: var(--bg-subtle);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.sideFill {
+  display: block;
+  height: 100%;
+  background: var(--accent-main);
+  border-radius: 999px;
+  transition: width 400ms ease;
+}
+
+.sidePct {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 32px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin-top: var(--space-1);
+  color: var(--content-primary);
+  line-height: 1;
+}
+
+.sideDivider {
+  height: 1px;
+  background: var(--bg-stroke);
+  margin: var(--space-3) 0;
+}
+
+.sideBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.frontierLine {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: var(--li-fs-meta);
+  color: var(--content-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.frontierModule {
+  color: var(--content-secondary);
+}
+
+.frontierLesson {
+  font-size: var(--li-fs-body);
+  font-weight: 600;
+  color: var(--content-primary);
+  line-height: 1.35;
+}
+
+.stepsValue {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--content-primary);
+  letter-spacing: -0.01em;
+}
+
+.stepsUnit {
+  font-weight: 400;
+  color: var(--content-tertiary);
+  font-size: var(--li-fs-small);
+}
+
+/* Gate-paint flips data-hint-state on the frontier-hint sideBlock and
+   data-steps-state on the steps-until slot. Pre-hydration baseline =
+   hidden, so SSR markup stays stable for users with no progress (where
+   these blocks really shouldn't appear). */
+.sideBlock[data-hint-state='hidden'] {
+  display: none;
+}
+
+/* Hide the entire "До этого урока" block when steps == 0 — uses :has on the
+   slot's data-steps-state. */
+.sideBlock:has([data-steps-state='hidden']) {
+  display: none;
+}
+
+/* CTA variants. Gate-paint sets data-cta-state on the row, CSS picks the
+   variant. Same convention as HomePage / ModulePage. */
+.ctaRow [data-cta-variant] {
+  display: none;
+}
+.ctaRow[data-cta-state='not-started'] [data-cta-variant='not-started'],
+.ctaRow[data-cta-state='in-progress'] [data-cta-variant='in-progress'] {
+  display: inline-flex;
+}
+
+/* Success palette for the bar fill once the course is complete. */
+.sideCard[data-progress-state='complete'] .sideFill {
+  background: var(--accent-success);
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 1100px) {
+  .hero {
+    grid-template-columns: 1fr;
+    gap: var(--li-space-7);
+  }
+  .sideCard {
+    position: static;
+  }
+  .title {
+    font-size: 52px;
+  }
+}
+
+@media (max-width: 720px) {
+  .page {
+    padding: var(--space-6) var(--space-5) var(--li-space-9);
+  }
+  .title {
+    font-size: 36px;
+  }
+  .desc {
+    font-size: var(--li-fs-body);
+  }
+  .ctaRow {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .ctaRow .btn {
+    justify-content: space-between;
+    width: 100%;
+  }
+}

package/src/components/LessonLockedInterstitial/LessonLockedInterstitial.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useGate } from '@/components/GateProvider';
+import {
+  flattenLessons,
+  getLessonIndex,
+  getTotalLessons,
+} from '@/lib/course';
+import { navigateToFrontierHref } from '@/lib/frontier-link';
+import { openProgramDrawer } from '@/lib/program-drawer';
+import { useLang, useT } from '@/lib/use-i18n';
+import styles from './LessonLockedInterstitial.module.css';
+
+type LessonLockedInterstitialProps = {
+  attemptedModuleId?: string;
+  attemptedSlug?: string;
+};
+
+/**
+ * Locked-lesson interstitial. Pure pre-hydrated baseline — the dynamic bits
+ * (frontier title, current-step count, "steps until" counter, side card
+ * progress) are slots filled by the gate-paint inline script before first
+ * paint. No useGate-driven JSX, so SSR markup and post-hydration markup are
+ * identical and React's hydration phase never re-renders the panel.
+ */
+export function LessonLockedInterstitial({
+  attemptedModuleId,
+  attemptedSlug,
+}: LessonLockedInterstitialProps) {
+  // useGate access is kept only for the static course shape (modules + total
+  // lessons); none of these values change on hydration so they don't drive
+  // flash. Reading from gate avoids drilling course through props.
+  const gate = useGate();
+  const { course, basePath } = gate;
+  const router = useRouter();
+  const t = useT();
+  const lang = useLang();
+
+  const attemptedLesson =
+    attemptedModuleId && attemptedSlug
+      ? course.modules
+          .find((m) => m.id === attemptedModuleId)
+          ?.lessons.find((l) => l.slug === attemptedSlug)
+      : undefined;
+  const attemptedModule = attemptedModuleId
+    ? course.modules.find((m) => m.id === attemptedModuleId)
+    : undefined;
+  const attemptedModuleIndex = attemptedModuleId
+    ? course.modules.findIndex((m) => m.id === attemptedModuleId)
+    : -1;
+  const attemptedIndex =
+    attemptedModuleId && attemptedSlug
+      ? getLessonIndex(course, attemptedModuleId, attemptedSlug)
+      : -1;
+
+  const totalLessons = getTotalLessons(course);
+  const firstEntry = flattenLessons(course)[0] ?? null;
+  // Why: the inline gate-mark script (runs before hydration) writes the
+  // frontier module/lesson titles into the hint slots. SSR must match the
+  // no-progress default the script picks (frontier index = 0) so freshly
+  // arrived users — by far the common case — don't see an empty-vs-text
+  // hydration mismatch. Returning users with progress get a different
+  // title from the script and rely on `suppressHydrationWarning` below.
+  const firstEntryModule = firstEntry
+    ? course.modules.find((m) => m.id === firstEntry.moduleId)
+    : null;
+  // Bare path — Next `<Link>` prepends basePath; pre-baking it here would
+  // produce `/kafka-cookbook/kafka-cookbook/...` on client-side navigation.
+  const firstHref = firstEntry
+    ? `/${lang}/${firstEntry.moduleId}/${firstEntry.lesson.slug}`
+    : '#';
+
+  return (
+    <section className={styles.page} role="status" aria-live="polite">
+      <div className={styles.hero}>
+        <div className={styles.heroText}>
+          <div className={styles.eyebrow}>
+            <span className={styles.eyebrowBadge} aria-hidden="true">
+              <SmallLockIcon />
+              <span>{t.locked}</span>
+            </span>
+            {attemptedModuleIndex >= 0 && (
+              <>
+                <span className={styles.eyebrowDot}>·</span>
+                <span>
+                  {t.moduleNumberPrefix}{' '}
+                  {String(attemptedModuleIndex + 1).padStart(2, '0')}
+                </span>
+              </>
+            )}
+          </div>
+
+          <h1 className={styles.title}>{t.lockedTitle}</h1>
+          <p className={styles.desc}>{t.lockedDesc}</p>
+
+          {attemptedLesson && (
+            <dl className={styles.targetCard} aria-label={t.attemptedLessonLabel}>
+              <dt className={styles.targetLabel}>{t.attemptedYouTried}</dt>
+              <dd className={styles.targetTitle}>
+                {attemptedModule && (
+                  <>
+                    <span className={styles.targetModule}>
+                      {attemptedModule.title}
+                    </span>
+                    <span className={styles.targetSep}> / </span>
+                  </>
+                )}
+                <span className={styles.targetLesson}>{attemptedLesson.title}</span>
+              </dd>
+            </dl>
+          )}
+
+          <div
+            className={styles.ctaRow}
+            data-cta-frontier="global"
+            data-cta-state="not-started"
+            suppressHydrationWarning
+          >
+            {/* The "Open outline" button is always visible; the
+                "Continue" link is the gate-paint-driven variant. */}
+            <Link
+              href={firstHref}
+              className={`${styles.btn} ${styles.btnPrimary}`}
+              data-cta-variant="in-progress"
+              data-cta-frontier-link
+              suppressHydrationWarning
+              onClick={(e) => navigateToFrontierHref(e, router, basePath)}
+            >
+              {t.continueAction} ·{' '}
+              <span data-cta-frontier-title suppressHydrationWarning>
+                {firstEntry?.lesson.title ?? ''}
+              </span>
+              <span className={styles.btnArrow}>→</span>
+            </Link>
+            <Link
+              href={firstHref}
+              className={`${styles.btn} ${styles.btnPrimary}`}
+              data-cta-variant="not-started"
+            >
+              {t.startFromFirst}
+              <span className={styles.btnArrow}>→</span>
+            </Link>
+            <button
+              type="button"
+              onClick={openProgramDrawer}
+              className={`${styles.btn} ${styles.btnSecondary}`}
+            >
+              {t.openProgram}
+            </button>
+          </div>
+        </div>
+
+        <aside
+          className={styles.sideCard}
+          aria-label={t.courseProgress}
+          data-progress-scope="global"
+          data-progress-state="not-started"
+          suppressHydrationWarning
+        >
+          <div className={styles.sideRow}>
+            <span className={styles.sideLabel}>{t.progress}</span>
+            <span className={styles.sideVal}>
+              <span data-progress-count suppressHydrationWarning>
+                0
+              </span>{' '}
+              / {totalLessons}
+            </span>
+          </div>
+          <div className={styles.sideBar} aria-hidden="true">
+            <span
+              className={styles.sideFill}
+              data-progress-bar
+              style={{ width: '0%' }}
+              suppressHydrationWarning
+            />
+          </div>
+          <div className={styles.sidePct}>
+            <span data-progress-pct suppressHydrationWarning>
+              0
+            </span>
+            %
+          </div>
+
+          <div className={styles.sideDivider} />
+
+          <div
+            className={styles.sideBlock}
+            data-frontier-hint
+            data-hint-state="hidden"
+            suppressHydrationWarning
+          >
+            <span className={styles.sideLabel}>{t.nextStep}</span>
+            <div className={styles.frontierLine}>
+              <span
+                className={styles.frontierModule}
+                data-frontier-hint-module
+                suppressHydrationWarning
+              >
+                {firstEntryModule?.title ?? ''}
+              </span>
+            </div>
+            <div
+              className={styles.frontierLesson}
+              data-frontier-hint-lesson
+              suppressHydrationWarning
+            >
+              {firstEntry?.lesson.title ?? ''}
+            </div>
+          </div>
+
+          {attemptedIndex >= 0 && (
+            <>
+              <div className={styles.sideDivider} />
+              <div className={styles.sideBlock}>
+                <span className={styles.sideLabel}>{t.untilThisLesson}</span>
+                <div
+                  className={styles.stepsValue}
+                  data-steps-until
+                  data-steps-target-index={String(attemptedIndex)}
+                  data-steps-state="hidden"
+                  suppressHydrationWarning
+                >
+                  {/* SSR matches the gate-mark script's no-progress default
+                      (frontier index = 0), so diff = attemptedIndex. */}
+                  {String(Math.max(0, attemptedIndex))}
+                </div>
+              </div>
+            </>
+          )}
+        </aside>
+      </div>
+    </section>
+  );
+}
+
+function SmallLockIcon() {
+  return (
+    <svg
+      width="11"
+      height="11"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect x="4" y="11" width="16" height="10" rx="2" />
+      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
+    </svg>
+  );
+}

package/src/components/LessonLockedInterstitial/index.ts

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

package/src/components/LessonNav/LessonNav.module.css

@@ -0,0 +1,84 @@
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+}
+
+.card {
+  display: grid;
+  grid-template-rows: auto auto;
+  gap: 2px;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--bg-stroke);
+  border-radius: var(--radius-md);
+  background-color: var(--bg-surface);
+  text-decoration: none;
+  color: inherit;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.card:hover {
+  border-color: var(--accent-main);
+  background-color: var(--bg-subtle);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--accent-main);
+  outline-offset: 2px;
+}
+
+.next {
+  text-align: right;
+}
+
+.label {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--content-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.title {
+  font-size: 15px;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.01em;
+  color: var(--content-primary);
+}
+
+.placeholder {
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media (max-width: 720px) {
+  /* Single-column stack with the next-card promoted to the top so the
+     dominant flow ("finished reading → next lesson") lands as the primary
+     CTA. Prev becomes a secondary card below — same affordance, lower
+     emphasis. */
+  .row {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+  }
+
+  .next {
+    text-align: left;
+    order: 1;
+    padding: var(--space-5) var(--space-5);
+    border-color: var(--accent-main);
+    background-color: var(--accent-main-soft);
+  }
+
+  .next .label {
+    color: var(--accent-main);
+  }
+
+  .next .title {
+    font-size: 18px;
+  }
+
+  .prev {
+    order: 2;
+  }
+}