create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/ui-kit/src/templates/experience/lib/scroll-mood.tsx

@@ -0,0 +1,143 @@
+// scroll-mood — engine dùng chung Templates/Cinematic Experience (owner @v2).
+// Cung cấp: usePageProgress (0..1 toàn trang) · useSectionProgress (0..1 section
+// qua viewport) · CrossfadeBackdrop (nền 3 layer theo mood) · SectionMood (wrapper
+// chương đặt id + data-mood + --mood-progress). Mọi chapter import TỪ FILE NÀY —
+// không tự viết scroll listener (contract EXPERIENCE-DESIGN.md mục 4).
+/* eslint-disable react-refresh/only-export-components -- engine cố ý gộp hooks + components cùng hệ mood; tách file chỉ để tắt warning fast-refresh */
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode, type Ref } from 'react';
+
+/** Progress scroll toàn trang 0..1 (rAF-throttle, 1 listener). */
+export function usePageProgress() {
+  const [pct, setPct] = useState(0);
+  useEffect(() => {
+    let raf = 0;
+    const onScroll = () => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const max = document.documentElement.scrollHeight - window.innerHeight;
+        setPct(max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0);
+      });
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, []);
+  return pct;
+}
+
+/** Progress 0..1 của section đi qua viewport (rAF — pattern Parallax W8). */
+export function useSectionProgress<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    let raf = 0;
+    const update = () => {
+      raf = 0;
+      const el = ref.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const vh = window.innerHeight;
+      setProgress(Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height))));
+    };
+    const schedule = () => {
+      if (!raf) raf = requestAnimationFrame(update);
+    };
+    update();
+    document.addEventListener('scroll', schedule, true);
+    window.addEventListener('resize', schedule);
+    return () => {
+      document.removeEventListener('scroll', schedule, true);
+      window.removeEventListener('resize', schedule);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, []);
+  return { ref, progress };
+}
+
+/** Nền crossfade mood v0.3 theo REF-SPEC — hero SÁNG (canvas) → chapters GIỮA TỐI
+ * (--scrim-4 vũ trụ, khớp khối chương tự chủ tối) → CTA SÁNG (canvas) cuối trang. */
+export function CrossfadeBackdrop({ pct }: { pct: number }) {
+  const canvasOpacity = pct < 0.5 ? 1 - pct * 2 : 0;
+  const scrimOpacity = pct < 0.5 ? pct * 2 : 2 - pct * 2;
+  const endCanvasOpacity = pct > 0.5 ? (pct - 0.5) * 2 : 0;
+  return (
+    <div aria-hidden="true" className="pointer-events-none fixed inset-0 -z-10">
+      <div className="absolute inset-0 bg-canvas" style={{ opacity: canvasOpacity }} />
+      <div className="absolute inset-0 bg-[var(--scrim-4)]" style={{ opacity: scrimOpacity }} />
+      <div className="absolute inset-0 bg-canvas" style={{ opacity: endCanvasOpacity }} />
+    </div>
+  );
+}
+
+/** Wrapper chương — đặt id + data-mood + --mood-progress (contract EXPERIENCE-DESIGN mục 2-3).
+ * innerRef: cho chapter cần đo scroll progress (vd ScrollFlythrough). */
+export function SectionMood({
+  id,
+  mood,
+  className = 'relative min-h-screen',
+  style,
+  innerRef,
+  children,
+}: {
+  id: string;
+  mood: string;
+  className?: string;
+  style?: CSSProperties;
+  innerRef?: React.Ref<HTMLElement>;
+  children: ReactNode;
+}) {
+  return (
+    <section ref={innerRef} id={id} data-mood={mood} className={className} style={style}>
+      {children}
+    </section>
+  );
+}
+
+/** 1 mood trong palette 5 mood (contract EXPERIENCE-DESIGN.md §2 — gradient stops từng chương). */
+export interface MoodStop {
+  id: string;
+  /** CSS background đầy đủ (gradient stops theo contract). */
+  background: string;
+}
+
+/** MOOD BACKDROP (SF-1) — crossfade N mood theo scroll TOÀN TRANG:
+ * opacity layer i = clamp(0, 1 − |p×(N−1) − i|, 1) — nội suy tuyến tính,
+ * tại ranh giới 2 mood liền kề = 50/50. rAF-throttle qua usePageProgress;
+ * chỉ layer nền đổi — 0 re-render content. Dùng kèm SectionMood (data-mood). */
+export function MoodBackdrop({ stops }: { stops: MoodStop[] }) {
+  const pct = usePageProgress();
+  const f = pct * (stops.length - 1);
+  return (
+    <div aria-hidden="true" className="pointer-events-none fixed inset-0 -z-10">
+      {stops.map((stop, i) => {
+        const opacity = Math.max(0, Math.min(1, 1 - Math.abs(f - i)));
+        return (
+          <div
+            key={stop.id}
+            data-mood={stop.id}
+            className="absolute inset-0"
+            style={{ background: stop.background, opacity }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+/** PALETTE MOOD — stops đúng contract §2 (chung cho index + demo + chapters).
+ * atlas = hero sáng cố định; focus→future = chapters nền tối tự chủ; future sáng trở lại. */
+export const MOOD_STOPS: MoodStop[] = [
+  { id: 'atlas', background: 'linear-gradient(165deg, #cdd8f6 0%, var(--hero-sky-a) 55%, #dfe4fb 100%)' },
+  { id: 'focus', background: 'linear-gradient(180deg, var(--chapter-bg-a), var(--chapter-bg-b))' },
+  { id: 'docs', background: 'linear-gradient(180deg, var(--chapter-bg-b), rgb(10, 20, 38))' },
+  {
+    id: 'velocity',
+    background: 'linear-gradient(180deg, var(--chapter-bg-a), color-mix(in srgb, var(--accent) 14%, rgb(10, 12, 22)))',
+  },
+  { id: 'ship', background: 'linear-gradient(180deg, rgb(10, 12, 22), var(--scrim-4))' },
+  { id: 'future', background: 'linear-gradient(180deg, var(--c-s1), var(--c-canvas))' },
+];

package/stack-template/app/ui-kit/src/templates/experience/lib/starfield.test.tsx

@@ -0,0 +1,31 @@
+// Starfield tests (SF-2) — canvas theme-aware: render + a11y ẩn + seed ổn định +
+// unmount sạch observer/rAF. jsdom không có 2d context → nhánh render-rỗng (không
+// crash) là path được test; vẽ thật verify bằng evidence screenshot + data-count.
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Starfield } from './starfield.js';
+
+afterEach(cleanup);
+
+describe('Starfield', () => {
+  it('render canvas aria-hidden + data-starfield + className passthrough', () => {
+    const { container } = render(<Starfield className="absolute inset-0 h-full w-full" />);
+    const canvas = container.querySelector('canvas')!;
+    expect(canvas).toHaveAttribute('aria-hidden', 'true');
+    expect(canvas).toHaveAttribute('data-starfield');
+    expect(canvas.className).toContain('inset-0');
+  });
+
+  it('unmount không crash — observer/rAF dọn sạch (2 vòng liên tiếp)', () => {
+    const first = render(<Starfield />);
+    first.unmount();
+    const second = render(<Starfield seed={42} />);
+    second.unmount();
+  });
+
+  it('đổi seed re-render không crash (PRNG deterministic nội bộ)', () => {
+    const { rerender } = render(<Starfield seed={7} />);
+    rerender(<Starfield seed={99} density={2} />);
+    expect(document.querySelector('[data-starfield]')).not.toBeNull();
+  });
+});

package/stack-template/app/ui-kit/src/templates/experience/lib/starfield.tsx

@@ -0,0 +1,190 @@
+// Starfield — canvas 2D theme-aware của hero Cinematic Experience (SF-2): chấm sao
+// mảnh kiểu "constellation blueprint" trên nền sáng (màu đọc token --navy-ink tại
+// host = navy rgb(16,36,52)); theme dark → --navy-ink override #f7f8f8 ⇒ "bông tuyết"
+// light (10% hạt vẽ 6 cánh tuyết thay dot). rAF drift + twinkle nhẹ — infinite CHỈ
+// trạng thái (contract EXPERIENCE-DESIGN §4); tab ẩn → pause; reduced-motion → 1
+// frame tĩnh (không loop). Seed PRNG deterministic — cùng seed + cùng khổ = cùng bố
+// cục (soi/test ổn định). jsdom/test thiếu 2d context → render rỗng, không crash.
+import { useEffect, useRef, type CanvasHTMLAttributes } from 'react';
+
+export interface StarfieldProps
+  extends Pick<CanvasHTMLAttributes<HTMLCanvasElement>, 'className'> {
+  /** Hệ số mật độ (1 ≈ 1 sao/9000px² — hero 1280×800 ≈ 114 hạt). */
+  density?: number;
+  /** Seed PRNG — cùng seed + cùng khổ = cùng bố cục. */
+  seed?: number;
+}
+
+/** mulberry32 — PRNG 32-bit deterministic (không phụ thuộc Math.random). */
+function mulberry32(seed: number) {
+  let s = seed >>> 0;
+  return () => {
+    s = (s + 0x6d2b79f5) | 0;
+    let t = Math.imul(s ^ (s >>> 15), 1 | s);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+interface Particle {
+  /** Vị trí chuẩn hoá 0..1 (resize giữ tỷ lệ bố cục). */
+  x: number;
+  y: number;
+  r: number;
+  /** Alpha cơ bản 0.25..0.8. */
+  a: number;
+  /** Pha + tốc độ twinkle (rad/s). */
+  phase: number;
+  tw: number;
+  /** Trôi lên chậm (đơn vị y/s). */
+  drift: number;
+  /** 10% hạt — vẽ 6 cánh tuyết thay dot. */
+  sparkle: boolean;
+}
+
+/** Đọc --navy-ink computed tại host (light: navy — dark: override #f7f8f8). */
+function resolveInk(host: HTMLElement): [number, number, number] {
+  const m = getComputedStyle(host).getPropertyValue('--navy-ink').match(/\d+/g);
+  return m ? [Number(m[0]), Number(m[1]), Number(m[2])] : [16, 36, 52];
+}
+
+/** Theme observer — data-bp-theme có thể đặt ở <html> HOẶC node bao (pattern
+ * Scene3D observeTheme; addon-themes đặt trên body preview). */
+function observeTheme(host: HTMLElement, onChange: () => void): () => void {
+  const obs = new MutationObserver(onChange);
+  obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-bp-theme', 'class'] });
+  if (document.body) {
+    obs.observe(document.body, { attributes: true, attributeFilter: ['data-bp-theme'], subtree: true });
+  }
+  void host;
+  return () => obs.disconnect();
+}
+
+export function Starfield({ density = 1, seed = 7, className }: StarfieldProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return; // jsdom/test hoặc canvas bị chặn — render rỗng, không crash
+
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const rnd = mulberry32(seed);
+    let particles: Particle[] = [];
+    let w = 0;
+    let h = 0;
+    let ink: [number, number, number] = resolveInk(canvas);
+    let raf = 0;
+
+    const build = () => {
+      w = canvas.clientWidth;
+      h = canvas.clientHeight;
+      canvas.width = Math.max(1, Math.round(w * dpr));
+      canvas.height = Math.max(1, Math.round(h * dpr));
+      const count = Math.round(((w * h) / 9000) * density);
+      particles = Array.from({ length: count }, () => ({
+        x: rnd(),
+        y: rnd(),
+        r: 0.5 + rnd() * 1.1,
+        a: 0.25 + rnd() * 0.55,
+        phase: rnd() * Math.PI * 2,
+        tw: 0.4 + rnd() * 1.2,
+        drift: 0.004 + rnd() * 0.01,
+        sparkle: rnd() < 0.1,
+      }));
+      // Số đo verify (lead paste) + assertion test
+      canvas.dataset.starfieldCount = String(count);
+    };
+
+    const draw = (t: number) => {
+      const time = t / 1000;
+      const [cr, cg, cb] = ink;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, w, h);
+      for (const p of particles) {
+        const y = (((p.y - p.drift * time) % 1) + 1) % 1;
+        const x = p.x + Math.sin(time * 0.15 + p.phase) * 0.004;
+        const alpha = Math.max(0, p.a * (0.7 + 0.3 * Math.sin(time * p.tw + p.phase)));
+        ctx.globalAlpha = alpha;
+        if (p.sparkle) {
+          // Bông tuyết 6 cánh — 3 đường kính xoay 60°
+          const len = p.r * 3.2;
+          ctx.strokeStyle = `rgb(${cr},${cg},${cb})`;
+          ctx.lineWidth = 1;
+          ctx.lineCap = 'round';
+          ctx.beginPath();
+          for (let i = 0; i < 3; i++) {
+            const ang = (Math.PI / 3) * i + Math.PI / 6;
+            const dx = Math.cos(ang) * len;
+            const dy = Math.sin(ang) * len;
+            ctx.moveTo(x * w - dx, y * h - dy);
+            ctx.lineTo(x * w + dx, y * h + dy);
+          }
+          ctx.stroke();
+        } else {
+          ctx.fillStyle = `rgb(${cr},${cg},${cb})`;
+          ctx.beginPath();
+          ctx.arc(x * w, y * h, p.r, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+      ctx.globalAlpha = 1;
+    };
+
+    const loop = (t: number) => {
+      draw(t);
+      raf = requestAnimationFrame(loop);
+    };
+    const start = () => {
+      if (!raf && !reduced.matches && !document.hidden) raf = requestAnimationFrame(loop);
+    };
+    const stop = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = 0;
+    };
+    const onVisibility = () => {
+      if (document.hidden) stop();
+      else start();
+    };
+    const onReduced = () => {
+      stop();
+      draw(0); // frame tĩnh đẹp ở cả 2 chế độ
+      start();
+    };
+    const onResize = () => {
+      build();
+      if (reduced.matches) draw(0);
+    };
+    const onTheme = () => {
+      ink = resolveInk(canvas);
+      if (reduced.matches) draw(0); // đang chạy: frame kế tự dùng màu mới
+    };
+
+    build();
+    if (reduced.matches) draw(0);
+    else start();
+
+    reduced.addEventListener('change', onReduced);
+    document.addEventListener('visibilitychange', onVisibility);
+    window.addEventListener('resize', onResize);
+    const offTheme = observeTheme(canvas, onTheme);
+    return () => {
+      stop();
+      reduced.removeEventListener('change', onReduced);
+      document.removeEventListener('visibilitychange', onVisibility);
+      window.removeEventListener('resize', onResize);
+      offTheme();
+    };
+  }, [density, seed]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      data-starfield=""
+      className={className}
+    />
+  );
+}

package/stack-template/app/ui-kit/src/templates/experience/mood-engine.stories.tsx

@@ -0,0 +1,114 @@
+// Templates/Mood Engine — SF-1 demo: MoodBackdrop crossfade 5 mood + 1 hero mood,
+// mỗi màn 100vh gắn data-mood; cuộn từ đầu tới cuối = 6 mood crossfade đúng số đo
+// contract §2. Layer nền: opacity layer i = clamp(0, 1 − |p×(N−1) − i|, 1) —
+// verify bằng CDP: đo computed opacity 6 layer tại 5 mốc scroll (paste trong PR).
+// Contrast readout: WCAG luminance tính runtime từ token (body ≥4.5 · heading ≥3).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MOOD_STOPS, MoodBackdrop, usePageProgress, type MoodStop } from './lib/scroll-mood.js';
+
+const meta = { title: 'Templates/Mood Engine', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── WCAG luminance — dùng cho readout số trong story (verify 5 mood đúng số) ──
+
+function luminance(rgb: [number, number, number]): number {
+  const f = (c: number) => {
+    c /= 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * f(rgb[0]) + 0.7152 * f(rgb[1]) + 0.0722 * f(rgb[2]);
+}
+
+function contrast(fg: [number, number, number], bg: [number, number, number]): number {
+  const [a, b] = [luminance(fg), luminance(bg)].sort((x, y) => y - x);
+  return (a + 0.05) / (b + 0.05);
+}
+
+const WHITE: [number, number, number] = [255, 255, 255];
+const NAVY: [number, number, number] = [16, 36, 52];
+
+/** Ink màu đọc được trên từng mood (kết hợp bảng contract §2). */
+const MOOD_INK: Record<string, [number, number, number]> = {
+  atlas: NAVY,
+  focus: WHITE,
+  docs: WHITE,
+  velocity: WHITE,
+  ship: WHITE,
+  future: [16, 36, 52],
+};
+
+/** 1 màn mood — nền trong suốt (backdrop lo), hiển thị id + contrast readout. */
+function MoodScreen({ stop, index, total }: { stop: MoodStop; index: number; total: number }) {
+  const ink = MOOD_INK[stop.id] ?? WHITE;
+  const bodyCr = contrast(ink, stop.id === 'atlas' ? [232, 237, 244] : [13, 24, 37]).toFixed(2);
+  return (
+    <div className="relative flex min-h-screen flex-col items-center justify-center gap-3 text-center">
+      <p className="m-0 font-mono text-[11px] font-bold uppercase tracking-[2.64px] opacity-70" style={{ color: `rgb(${ink.join(',')})` }}>
+        mood {index + 1}/{total}
+      </p>
+      <h2
+        className="m-0 text-[29px] font-light uppercase tracking-[0.02em]"
+        style={{ color: `rgb(${ink.join(',')})` }}
+      >
+        {stop.id}
+      </h2>
+      <p className="m-0 max-w-md text-[12px] leading-[1.7] tracking-[0.3px] opacity-80" style={{ color: `rgb(${ink.join(',')})` }}>
+        Body 12px/400 tracking 0.3 — contrast body {bodyCr}:1 (cần ≥4.5) · nền tự chủ theo mood, không phụ thuộc theme toolbar.
+      </p>
+    </div>
+  );
+}
+
+function MoodEnginePage() {
+  const pct = usePageProgress();
+  return (
+    <div className="relative">
+      <MoodBackdrop stops={MOOD_STOPS} />
+      {MOOD_STOPS.map((stop, i) => (
+        <div key={stop.id} data-mood={stop.id} className="relative min-h-screen">
+          <MoodScreen stop={stop} index={i} total={MOOD_STOPS.length} />
+        </div>
+      ))}
+      <footer className="relative flex min-h-[40vh] items-center justify-center">
+        <p className="m-0 text-body opacity-70">
+          Hết hành trình — MoodBackdrop crossfade 6 mood theo progress (rAF, custom-props-free).
+        </p>
+      </footer>
+    </div>
+  );
+}
+
+/** Full — cuộn 6 mood: atlas sáng → focus/docs/velocity/ship tối → future sáng. */
+export const FiveMoods: Story = {
+  name: '5 moods + hero — crossfade theo scroll (đúng contract §2)',
+  render: () => <MoodEnginePage />,
+};
+
+/** Contrast readout — số WCAG từng mood in trực tiếp (verify không cần tool). */
+export const ContrastReadout: Story = {
+  name: 'Contrast readout — số WCAG mọi mood (body ≥4.5 · heading ≥3)',
+  render: () => (
+    <div className="mx-auto grid max-w-3xl gap-3 p-10">
+      <h2 className="m-0 text-[29px] font-light text-ink">Contrast từng mood (wcag luminance)</h2>
+      {MOOD_STOPS.map((stop, i) => {
+        const ink = MOOD_INK[stop.id] ?? WHITE;
+        const bg: [number, number, number] =
+          stop.id === 'atlas' ? [232, 237, 244] : stop.id === 'future' ? [255, 255, 255] : [13, 24, 37];
+        const cr = contrast(ink, bg).toFixed(2);
+        return (
+          <div
+            key={stop.id}
+            data-mood={stop.id}
+            className="flex items-center justify-between rounded-lg border border-line bg-s2 px-4 py-3 text-body"
+          >
+            <span className="font-mono text-[11px] font-bold uppercase tracking-[2.64px]">{stop.id}</span>
+            <span className="tabular-nums">
+              contrast {cr}:1 — {Number(cr) >= 4.5 ? 'PASS body' : 'chỉ heading ≥3:1'}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  ),
+};

package/stack-template/app/ui-kit/src/templates/experience/shell-nav.stories.tsx

@@ -0,0 +1,113 @@
+// Templates/Cinematic Shell + Nav — SF-3 demo: ChapterShell × 5 chương nội dung
+// thật (Orca-flavored, KHÔNG placeholder-generic — bản generic đã bị PO gỡ) +
+// MoodBackdrop crossfade 6 mood (SF-1) + SideNav scroll-spy 5 mục.
+// Kiến trúc mood: sections trong suốt + backdrop fixed crossfade (contract §2) —
+// cuộn tới đâu mood đổi tới đó, nav aria-current chạy theo section chạm mép.
+// Verify: nav active chuyển đúng 5 mục khi cuộn; mood focus/docs/velocity/ship
+// tối → future sáng (tone light); label/title/copy đúng số đo contract §1.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CountUp } from '../../index';
+import { ChapterShell } from './lib/ChapterShell.js';
+import { MoodBackdrop, MOOD_STOPS } from './lib/scroll-mood.js';
+import { SideNav } from './lib/SideNav.js';
+
+const meta = { title: 'Templates/Cinematic Shell + Nav', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Stat mono gọn — nhịp demo cho children shell (không đụng scope nội dung chương).
+ * value mode: số 30px tabular (band meta §1) + label mono; prefix mode: toàn mono 11px.
+ * light: ink theme-flip cho band sáng (đồng bộ tone của ChapterShell — §2 mood future). */
+function ShellStat({
+  value,
+  label,
+  prefix,
+  light,
+}: {
+  value?: number;
+  label: string;
+  prefix?: string;
+  light?: boolean;
+}) {
+  return (
+    <p
+      className={`m-0 mt-8 flex flex-wrap items-baseline gap-x-3 font-mono text-[11px] font-bold uppercase tracking-[2.64px] ${
+        light ? 'text-ink2' : 'text-white/85'
+      }`}
+    >
+      {prefix && <span>{prefix}</span>}
+      {value !== undefined && (
+        <span className={`text-[30px] font-bold tabular-nums tracking-normal ${light ? 'text-ink' : 'text-white'}`}>
+          <CountUp value={value} duration={1.2} format={(n) => n.toLocaleString('vi-VN')} />
+        </span>
+      )}
+      <span>{label}</span>
+    </p>
+  );
+}
+
+function ShellNavPage() {
+  return (
+    <div className="relative">
+      <MoodBackdrop stops={MOOD_STOPS} />
+      <SideNav />
+
+      <ChapterShell
+        id="ch1"
+        chapter="01"
+        mood="focus"
+        title="Deep focus"
+        copy="Mỗi block tập trung được log thành worklog — không dựa cảm hứng, chỉ còn hạ tầng. Con số chạy khi bạn cuộn."
+      >
+        <ShellStat value={62210} label="giờ tập trung" />
+      </ChapterShell>
+
+      <ChapterShell
+        id="ch2"
+        chapter="02"
+        mood="docs"
+        title="Living docs"
+        copy="Spec và task là một: tài liệu sống cập nhật theo từng commit, không ai phải nhắc ai."
+      >
+        <ShellStat prefix="24/7" label="docs đồng bộ theo commit" />
+      </ChapterShell>
+
+      <ChapterShell
+        id="ch3"
+        chapter="03"
+        mood="velocity"
+        title="Team velocity"
+        copy="Nhịp đội hiện rõ từng sprint — cycle time, review latency, velocity thật chứ không phô trương."
+      >
+        <ShellStat value={9} label="sprint liên tiếp đúng hẹn" />
+      </ChapterShell>
+
+      <ChapterShell
+        id="ch4"
+        chapter="04"
+        mood="ship"
+        title="Ship your app"
+        copy="Từ nhánh sang production trong một đường bay — ship thật, không demo suông."
+      >
+        <ShellStat value={15} label="bước e2e xanh mỗi convergence" />
+      </ChapterShell>
+
+      <ChapterShell
+        id="ch5"
+        chapter="05"
+        mood="future"
+        title="Future"
+        copy="Hạ tầng đã trẻ lại: agent giao việc, người giữ nhịp. Chương kế tiếp do bạn viết."
+        tone="light"
+      >
+        <ShellStat value={5} label="chương — một hành trình cuộn" light />
+      </ChapterShell>
+    </div>
+  );
+}
+
+/** Shell + nav — cuộn: crossfade 6 mood + scroll-spy 5 mục (aria-current). */
+export const ShellAndNav: Story = {
+  name: 'Shell + SideNav — scroll-spy 5 chương + mood crossfade',
+  render: () => <ShellNavPage />,
+};