@dsbasko/cookbook-engine 0.1.0

package/src/components/ReadingPrefsProvider/ReadingPrefsProvider.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  applyPrefs,
+  DEFAULT_PREFS,
+  isCodeFont,
+  isProseFont,
+  isSizeStep,
+  readStoredPrefs,
+  READING_PREFS_STORAGE_KEY,
+  writeStoredPrefs,
+  type CodeFont,
+  type ProseFont,
+  type ReadingPrefs,
+  type SizeStep,
+} from '@/lib/reading-prefs';
+
+type ReadingPrefsContextValue = {
+  prefs: ReadingPrefs;
+  setProseSize: (next: SizeStep) => void;
+  setCodeSize: (next: SizeStep) => void;
+  setProseFont: (next: ProseFont) => void;
+  setCodeFont: (next: CodeFont) => void;
+};
+
+const ReadingPrefsContext = createContext<ReadingPrefsContextValue | null>(null);
+
+function readFromHtml(): ReadingPrefs {
+  if (typeof document === 'undefined') return { ...DEFAULT_PREFS };
+  const ds = document.documentElement.dataset;
+  const proseSizeRaw = ds.proseSize != null ? Number(ds.proseSize) : null;
+  const codeSizeRaw = ds.codeSize != null ? Number(ds.codeSize) : null;
+  return {
+    proseSize: isSizeStep(proseSizeRaw) ? proseSizeRaw : DEFAULT_PREFS.proseSize,
+    codeSize: isSizeStep(codeSizeRaw) ? codeSizeRaw : DEFAULT_PREFS.codeSize,
+    proseFont: isProseFont(ds.proseFont) ? ds.proseFont : DEFAULT_PREFS.proseFont,
+    codeFont: isCodeFont(ds.codeFont) ? ds.codeFont : DEFAULT_PREFS.codeFont,
+  };
+}
+
+export function ReadingPrefsProvider({ children }: { children: ReactNode }) {
+  const [prefs, setPrefs] = useState<ReadingPrefs>(DEFAULT_PREFS);
+  const prefsRef = useRef<ReadingPrefs>(DEFAULT_PREFS);
+
+  useEffect(() => {
+    const next = readFromHtml();
+    prefsRef.current = next;
+    setPrefs(next);
+  }, []);
+
+  useEffect(() => {
+    function handleStorage(event: StorageEvent) {
+      if (event.key !== READING_PREFS_STORAGE_KEY) return;
+      const next = readStoredPrefs();
+      prefsRef.current = next;
+      applyPrefs(next);
+      setPrefs(next);
+    }
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  const updateField = useCallback(<K extends keyof ReadingPrefs>(key: K, value: ReadingPrefs[K]) => {
+    const next: ReadingPrefs = { ...prefsRef.current, [key]: value };
+    prefsRef.current = next;
+    applyPrefs(next);
+    writeStoredPrefs(next);
+    setPrefs(next);
+  }, []);
+
+  const setProseSize = useCallback((next: SizeStep) => updateField('proseSize', next), [updateField]);
+  const setCodeSize = useCallback((next: SizeStep) => updateField('codeSize', next), [updateField]);
+  const setProseFont = useCallback((next: ProseFont) => updateField('proseFont', next), [updateField]);
+  const setCodeFont = useCallback((next: CodeFont) => updateField('codeFont', next), [updateField]);
+
+  return (
+    <ReadingPrefsContext.Provider
+      value={{ prefs, setProseSize, setCodeSize, setProseFont, setCodeFont }}
+    >
+      {children}
+    </ReadingPrefsContext.Provider>
+  );
+}
+
+export function useReadingPrefs(): ReadingPrefsContextValue {
+  const ctx = useContext(ReadingPrefsContext);
+  if (!ctx) {
+    throw new Error('useReadingPrefs must be used inside <ReadingPrefsProvider>');
+  }
+  return ctx;
+}

package/src/components/ReadingPrefsProvider/index.ts

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

package/src/components/ReadingProgress/ReadingProgress.module.css

@@ -0,0 +1,19 @@
+.bar {
+  position: fixed;
+  top: 69px;
+  left: 63px;
+  height: 4px;
+  background: var(--accent-main);
+  z-index: calc(var(--z-header) + 1);
+  transition: width 80ms linear;
+  pointer-events: none;
+}
+
+/* Mobile hides the bar entirely — the desktop header it anchors to is also
+   hidden on this breakpoint, and the design's mobile lesson screen leaves the
+   reading-progress affordance off the page. */
+@media (max-width: 1023px) {
+  .bar {
+    display: none;
+  }
+}

package/src/components/ReadingProgress/ReadingProgress.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useT } from '@/lib/use-i18n';
+import styles from './ReadingProgress.module.css';
+
+type ReadingProgressProps = {
+  targetSelector?: string;
+};
+
+export function ReadingProgress({
+  targetSelector = '[data-reading-target]',
+}: ReadingProgressProps) {
+  const t = useT();
+  const [pct, setPct] = useState(0);
+
+  useEffect(() => {
+    const compute = () => {
+      const target = document.querySelector(targetSelector) as HTMLElement | null;
+      if (!target) {
+        setPct(0);
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      const height = target.scrollHeight;
+      const viewport = window.innerHeight;
+      const scrolled = -rect.top;
+      const maxScroll = Math.max(1, height - viewport);
+      const ratio = Math.max(0, Math.min(1, scrolled / maxScroll));
+      setPct(ratio * 100);
+    };
+
+    compute();
+    window.addEventListener('scroll', compute, { passive: true });
+    window.addEventListener('resize', compute);
+    return () => {
+      window.removeEventListener('scroll', compute);
+      window.removeEventListener('resize', compute);
+    };
+  }, [targetSelector]);
+
+  return (
+    <div
+      className={styles.bar}
+      style={{ width: `${pct}%` }}
+      role="progressbar"
+      aria-label={t.readingProgressLabel}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(pct)}
+    />
+  );
+}

package/src/components/ReadingProgress/index.ts

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