npm - @dsbasko/cookbook-engine - Versions diffs - 0.1.0 - Mend

@dsbasko/cookbook-engine 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of @dsbasko/cookbook-engine might be problematic. Click here for more details.

Files changed (137) hide show

package/LICENSE +21 -0
package/README.md +232 -0
package/assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2 +0 -0
package/assets/fonts/jetbrains-mono/JetBrainsMono-BoldItalic.woff2 +0 -0
package/assets/fonts/jetbrains-mono/JetBrainsMono-Italic.woff2 +0 -0
package/assets/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2 +0 -0
package/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2 +0 -0
package/assets/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2 +0 -0
package/package.json +92 -0
package/scripts/check-course-coverage.mts +32 -0
package/scripts/fix-static-image-extensions.mjs +78 -0
package/scripts/generate-readme-toc.mts +32 -0
package/scripts/resolve-course-paths.mjs +28 -0
package/scripts/sync-images.mjs +88 -0
package/src/components/AppShell/AppShell.module.css +40 -0
package/src/components/AppShell/AppShell.tsx +135 -0
package/src/components/AppShell/index.ts +1 -0
package/src/components/Callout/Callout.module.css +68 -0
package/src/components/Callout/Callout.tsx +83 -0
package/src/components/Callout/index.ts +1 -0
package/src/components/CodeBlock/CodeBlock.module.css +68 -0
package/src/components/CodeBlock/CodeBlock.tsx +65 -0
package/src/components/CodeBlock/index.ts +1 -0
package/src/components/GateProvider/GateProvider.tsx +207 -0
package/src/components/GateProvider/index.ts +1 -0
package/src/components/Header/Breadcrumbs.tsx +50 -0
package/src/components/Header/Header.module.css +131 -0
package/src/components/Header/Header.tsx +26 -0
package/src/components/Header/HeaderLessonNav.tsx +118 -0
package/src/components/Header/index.ts +1 -0
package/src/components/HomePage/HomePage.module.css +538 -0
package/src/components/HomePage/HomePage.tsx +295 -0
package/src/components/HomePage/index.ts +1 -0
package/src/components/LessonAwareLink/LessonAwareLink.module.css +12 -0
package/src/components/LessonAwareLink/LessonAwareLink.tsx +86 -0
package/src/components/LessonAwareLink/index.ts +1 -0
package/src/components/LessonLayout/LessonLayout.module.css +35 -0
package/src/components/LessonLayout/LessonLayout.tsx +18 -0
package/src/components/LessonLayout/index.ts +1 -0
package/src/components/LessonLockedInterstitial/LessonLockedInterstitial.module.css +367 -0
package/src/components/LessonLockedInterstitial/LessonLockedInterstitial.tsx +256 -0
package/src/components/LessonLockedInterstitial/index.ts +1 -0
package/src/components/LessonNav/LessonNav.module.css +84 -0
package/src/components/LessonNav/LessonNav.tsx +64 -0
package/src/components/LessonNav/index.ts +1 -0
package/src/components/LessonPageLayout/LessonPageLayout.module.css +118 -0
package/src/components/LessonPageLayout/LessonPageLayout.tsx +46 -0
package/src/components/LessonPageLayout/index.ts +1 -0
package/src/components/LessonSideMeta/LessonSideMeta.module.css +68 -0
package/src/components/LessonSideMeta/LessonSideMeta.tsx +87 -0
package/src/components/LessonSideMeta/index.ts +1 -0
package/src/components/ModulePage/ModulePage.module.css +693 -0
package/src/components/ModulePage/ModulePage.tsx +301 -0
package/src/components/ModulePage/index.ts +1 -0
package/src/components/ProgramDrawer/LockIcon.tsx +19 -0
package/src/components/ProgramDrawer/ProgramDrawer.module.css +563 -0
package/src/components/ProgramDrawer/ProgramDrawer.tsx +481 -0
package/src/components/ProgramDrawer/index.ts +1 -0
package/src/components/ProgressBar/ProgressBar.module.css +46 -0
package/src/components/ProgressBar/ProgressBar.tsx +45 -0
package/src/components/ProgressBar/index.ts +1 -0
package/src/components/ProgressModeProvider/ProgressModeProvider.tsx +87 -0
package/src/components/ProgressModeProvider/index.ts +1 -0
package/src/components/ReadingPrefsProvider/ReadingPrefsProvider.tsx +100 -0
package/src/components/ReadingPrefsProvider/index.ts +1 -0
package/src/components/ReadingProgress/ReadingProgress.module.css +19 -0
package/src/components/ReadingProgress/ReadingProgress.tsx +53 -0
package/src/components/ReadingProgress/index.ts +1 -0
package/src/components/SettingsToggle/SettingsToggle.module.css +888 -0
package/src/components/SettingsToggle/SettingsToggle.tsx +688 -0
package/src/components/SettingsToggle/index.ts +1 -0
package/src/components/Sidebar/Sidebar.module.css +157 -0
package/src/components/Sidebar/Sidebar.tsx +63 -0
package/src/components/Sidebar/icons/GitHubIcon.tsx +17 -0
package/src/components/Sidebar/icons/HomeIcon.tsx +22 -0
package/src/components/Sidebar/icons/LanguageIcon.tsx +24 -0
package/src/components/Sidebar/icons/ProgramIcon.tsx +23 -0
package/src/components/Sidebar/icons/SettingsIcon.tsx +26 -0
package/src/components/Sidebar/icons/ThemeIcon.tsx +22 -0
package/src/components/Sidebar/icons/index.ts +6 -0
package/src/components/Sidebar/index.ts +1 -0
package/src/components/ThemeProvider/ThemeProvider.tsx +68 -0
package/src/components/ThemeProvider/index.ts +1 -0
package/src/components/Toc/Toc.module.css +78 -0
package/src/components/Toc/Toc.tsx +92 -0
package/src/components/Toc/index.ts +1 -0
package/src/components/TranslationBanner/TranslationBanner.module.css +32 -0
package/src/components/TranslationBanner/TranslationBanner.tsx +40 -0
package/src/components/TranslationBanner/index.ts +1 -0
package/src/config.d.mts +12 -0
package/src/config.mjs +110 -0
package/src/index.ts +62 -0
package/src/layout/lang.tsx +44 -0
package/src/layout/root.tsx +223 -0
package/src/lib/course-loader.ts +33 -0
package/src/lib/course.ts +429 -0
package/src/lib/coverage.ts +141 -0
package/src/lib/description.ts +43 -0
package/src/lib/extract-toc.ts +59 -0
package/src/lib/format.ts +55 -0
package/src/lib/frontier-link.ts +37 -0
package/src/lib/gate-init-script.ts +40 -0
package/src/lib/gate-mark-script.ts +324 -0
package/src/lib/i18n.ts +474 -0
package/src/lib/lang.ts +90 -0
package/src/lib/lesson-gate.ts +79 -0
package/src/lib/lesson.ts +66 -0
package/src/lib/markdown-components.tsx +51 -0
package/src/lib/markdown.ts +180 -0
package/src/lib/mdx-plugins/rehype-callout.ts +80 -0
package/src/lib/mdx-plugins/remark-lesson-images.ts +109 -0
package/src/lib/mdx-plugins/remark-link-rewrite.ts +231 -0
package/src/lib/paths.ts +36 -0
package/src/lib/program-drawer.ts +8 -0
package/src/lib/progress-mode.ts +69 -0
package/src/lib/progress.ts +182 -0
package/src/lib/reading-prefs.ts +127 -0
package/src/lib/readme-toc.ts +69 -0
package/src/lib/site-url.ts +33 -0
package/src/lib/sitemap.ts +112 -0
package/src/lib/slug.ts +15 -0
package/src/lib/theme.ts +78 -0
package/src/lib/use-i18n.ts +25 -0
package/src/og/icon.tsx +40 -0
package/src/og/opengraph-image.tsx +126 -0
package/src/pages/home.tsx +66 -0
package/src/pages/lesson.tsx +260 -0
package/src/pages/module.tsx +80 -0
package/src/pages/not-found-lang.tsx +51 -0
package/src/pages/not-found-root.tsx +48 -0
package/src/pages/root.tsx +44 -0
package/src/seo/robots.ts +16 -0
package/src/seo/sitemap.ts +10 -0
package/src/styles/globals.css +139 -0
package/src/styles/markdown.css +265 -0
package/src/styles/reset.css +89 -0
package/src/styles/tokens.css +270 -0

package/src/lib/format.ts ADDED Viewed

@@ -0,0 +1,55 @@
+import type { Lang } from './lang';
+export type PluralForms = readonly [one: string, few: string, many: string];
+export function pluralize(n: number, forms: PluralForms): string {
+  const abs = Math.abs(n) % 100;
+  const lastDigit = abs % 10;
+  if (abs > 10 && abs < 20) return forms[2];
+  if (lastDigit > 1 && lastDigit < 5) return forms[1];
+  if (lastDigit === 1) return forms[0];
+  return forms[2];
+}
+const LESSON_FORMS_RU: PluralForms = ['урок', 'урока', 'уроков'];
+const MODULE_FORMS_RU: PluralForms = ['модуль', 'модуля', 'модулей'];
+export function formatLessonCount(n: number, lang: Lang): string {
+  if (lang === 'en') return `${n} ${n === 1 ? 'lesson' : 'lessons'}`;
+  return `${n} ${pluralize(n, LESSON_FORMS_RU)}`;
+}
+export function formatModuleCount(n: number, lang: Lang): string {
+  if (lang === 'en') return `${n} ${n === 1 ? 'module' : 'modules'}`;
+  return `${n} ${pluralize(n, MODULE_FORMS_RU)}`;
+}
+export function parseDurationMin(input: string): number {
+  let total = 0;
+  const h = input.match(/(\d+)\s*h/);
+  const m = input.match(/(\d+)\s*m/);
+  if (h) total += parseInt(h[1], 10) * 60;
+  if (m) total += parseInt(m[1], 10);
+  return total;
+}
+export function formatDurationHm(min: number, lang: Lang): string {
+  if (lang === 'en') {
+    if (min <= 0) return '0 min';
+    const h = Math.floor(min / 60);
+    const m = min % 60;
+    if (h === 0) return `${m} min`;
+    if (m === 0) return `${h} h`;
+    return `${h} h ${m} min`;
+  }
+  if (min <= 0) return '0 мин';
+  const h = Math.floor(min / 60);
+  const m = min % 60;
+  if (h === 0) return `${m} мин`;
+  if (m === 0) return `${h} ч`;
+  return `${h} ч ${m} мин`;
+}
+export function formatDurationShort(min: number, lang: Lang): string {
+  return lang === 'en' ? `${min}m` : `${min}м`;
+}

package/src/lib/frontier-link.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import type { MouseEvent } from 'react';
+type AppRouter = {
+  push: (href: string) => void;
+};
+/**
+ * Click handler for "Continue" CTAs that the gate-paint script rewrites in the
+ * DOM. The Next.js `<Link>` keeps its prop `href` (set to a static fallback) so
+ * SSR is stable, but at click time we must navigate to whatever the inline
+ * gate-paint script wrote into the anchor's `href` attribute — otherwise the
+ * label says "lesson N" while the prop-driven router.push lands on the
+ * fallback. Behaves like a normal anchor for modifier / non-primary clicks so
+ * cmd-click etc. still open the painted href in a new tab.
+ */
+export function navigateToFrontierHref(
+  event: MouseEvent<HTMLAnchorElement>,
+  router: AppRouter,
+  basePath: string,
+): void {
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return;
+  }
+  const href = event.currentTarget.getAttribute('href');
+  if (!href || href === '#') return;
+  event.preventDefault();
+  const stripped =
+    basePath && href.startsWith(`${basePath}/`) ? href.slice(basePath.length) : href;
+  router.push(stripped);
+}

package/src/lib/gate-init-script.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { flattenLessons, type Course } from './course';
+import { FURTHEST_STORAGE_KEY, PROGRESS_STORAGE_KEY, lessonKey } from './progress';
+export const GATE_LOCKED_ATTR = 'data-lesson-locked';
+/**
+ * Inline script that runs synchronously in <head>, before <body> is parsed,
+ * to decide whether the current URL points at a locked lesson. If so it
+ * stamps `data-lesson-locked="true"` on <html>; CSS then hides the lesson
+ * body and reveals the interstitial — no flash of content while React
+ * hydrates. After hydration GateProvider keeps the attribute in sync.
+ *
+ * The script is intentionally pre-compiled rather than emitted via JSX so
+ * the linear lesson order from course.yaml is baked into the bundle at
+ * build time (no runtime fetch of the same data we already know).
+ */
+export function buildGateInitScript(course: Course, basePath: string): string {
+  const linearKeys = flattenLessons(course).map((e) => lessonKey(e.moduleId, e.lesson.slug));
+  const data = JSON.stringify({
+    keys: linearKeys,
+    basePath: basePath ?? '',
+    progressKey: PROGRESS_STORAGE_KEY,
+    furthestKey: FURTHEST_STORAGE_KEY,
+    attr: GATE_LOCKED_ATTR,
+  }).replace(/</g, '\\u003c');
+  // Inline lang-strip mirrors `stripLangFromPath` from lib/lang.ts: removes a
+  // leading `/ru/` or `/en/` segment so the parser sees `[moduleId, slug]` as
+  // its first two segments regardless of the active language route. basePath
+  // strip is segment-aware (mirrors LessonAwareLink) so `/foo` does not match
+  // `/foobar/...`. The frontier index merges the stored `furthest` pointer
+  // and the highest completed entry in `progress` (mirrors `resolveFurthestIndex`
+  // in lesson-gate.ts); without merging both, a cross-tab race where progress
+  // overtakes the pointer would flash the locked interstitial before hydration.
+  // Free-reading mode short-circuit: progress-mode-init runs earlier in <head>
+  // and may have stamped data-progress-disabled on <html>. When it has, no
+  // lesson is ever locked, so skip the gate computation entirely (and never set
+  // data-lesson-locked) — keeps the interstitial from flashing for a lesson the
+  // user has chosen to read freely.
+  return `(function(){if(document.documentElement.getAttribute('data-progress-disabled')==='true')return;try{var D=${data};var p=window.location.pathname;var base=D.basePath;if(base&&(p===base||p.indexOf(base+'/')===0)){p=p.slice(base.length)||'/'}var lm=p.match(/^\\/(ru|en)(\\/.*)?$/);if(lm){p=lm[2]&&lm[2].length>0?lm[2]:'/'}var m=p.replace(/^\\/+|\\/+$/g,'').split('/');if(m.length<2)return;var key=m[0]+'/'+m[1];var idx=D.keys.indexOf(key);if(idx<0)return;var fkey=null;try{fkey=window.localStorage.getItem(D.furthestKey)}catch(e){}var fidx=fkey?D.keys.indexOf(fkey):-1;try{var raw=window.localStorage.getItem(D.progressKey);if(raw){var pr=JSON.parse(raw);for(var i=0;i<D.keys.length;i++){var v=pr[D.keys[i]];if(v&&v.completed===true&&i>fidx){fidx=i}}}}catch(e){}if(idx>fidx+1){document.documentElement.setAttribute(D.attr,'true')}}catch(e){}})();`;
+}

package/src/lib/gate-mark-script.ts ADDED Viewed

@@ -0,0 +1,324 @@
+import { flattenLessons, type Course } from './course';
+import { getDict } from './i18n';
+import { LANGS, type Lang } from './lang';
+import { FURTHEST_STORAGE_KEY, PROGRESS_STORAGE_KEY, lessonKey, type LessonKey } from './progress';
+export const GATE_ITEM_LOCKED_ATTR = 'data-locked';
+export const GATE_ITEM_KEY_ATTR = 'data-lesson-key';
+/**
+ * Single inline script that "paints" the SSR-rendered page against the user's
+ * actual progress *synchronously, before first paint*. JSX outputs a stable
+ * pre-hydrated baseline (everything 0%, nothing completed, default CTA copy);
+ * this script reads localStorage, computes furthest/completed/percent, and
+ * mutates the DOM directly — setting attributes on lesson rows and rewriting
+ * text/href in dedicated slots. Avoids the React-driven re-render flash that
+ * useEffect-based hydration causes.
+ *
+ * The same logic is mirrored in {@link applyGatePainting} for post-hydration
+ * updates (SPA route changes, cross-tab progress sync, drawer expand). React
+ * never sees these attributes in JSX, so reconciliation can't clobber them.
+ */
+export function buildGateMarkScript(
+  coursesByLang: Record<Lang, Course>,
+  basePath: string,
+  defaultLang: Lang,
+): string {
+  // Lesson order is the same across languages (slugs/ids don't change), so use
+  // any course as the structural reference. Titles vary per lang and are sent
+  // as parallel arrays indexed by lang.
+  const referenceCourse = coursesByLang[defaultLang];
+  const flat = flattenLessons(referenceCourse);
+  const titlesByLang: Partial<Record<Lang, string[]>> = {};
+  const moduleTitlesByLang: Partial<Record<Lang, string[]>> = {};
+  for (const lang of LANGS) {
+    const langFlat = flattenLessons(coursesByLang[lang]);
+    titlesByLang[lang] = langFlat.map((e) => e.lesson.title);
+    moduleTitlesByLang[lang] = langFlat.map((e) => {
+      const mod = coursesByLang[lang].modules.find((m) => m.id === e.moduleId);
+      return mod?.title ?? '';
+    });
+  }
+  const data = JSON.stringify({
+    keys: flat.map((e) => lessonKey(e.moduleId, e.lesson.slug)),
+    titlesByLang,
+    moduleTitlesByLang,
+    basePath: basePath ?? '',
+    progressKey: PROGRESS_STORAGE_KEY,
+    furthestKey: FURTHEST_STORAGE_KEY,
+    defaultLang,
+    // Per-lang connector word for aria-valuetext ("X из Y" / "X of Y").
+    // Lookup at runtime by the lang derived from URL prefix.
+    progressConnector: {
+      ru: getDict('ru').progressAriaConnector,
+      en: getDict('en').progressAriaConnector,
+    },
+    // Escape `<` so a maintainer-supplied title containing `</script>` cannot
+    // prematurely close the inline <script> tag during HTML parsing.
+  }).replace(/</g, '\\u003c');
+  // Body kept in one IIFE so it can ship as inline <script> verbatim.
+  // Free-reading mode short-circuit: progress-mode-init (in <head>) has already
+  // run by the time gate-mark executes at the end of <body>, so if it stamped
+  // data-progress-disabled on <html> we paint nothing — no data-locked, no
+  // percentages — leaving the SSR baseline untouched in free-reading mode.
+  return `(function(){if(document.documentElement.getAttribute('data-progress-disabled')==='true')return;try{var D=${data};${GATE_PAINT_BODY}}catch(e){}})();`;
+}
+// Plain JS body. Extracted as a constant so the imperative `applyGatePainting`
+// stays in lockstep with the inline script — same algorithm, same attribute
+// names, same edge cases.
+const GATE_PAINT_BODY = `
+// Derive active lang from URL so the inline CTA href stays in /<lang>/.../ —
+// the root layout (which renders this script) has no lang context, but the
+// browser does. Mirrors stripLangFromPath in lib/lang.ts.
+var __p=window.location.pathname;if(D.basePath&&(__p===D.basePath||__p.indexOf(D.basePath+'/')===0))__p=__p.slice(D.basePath.length)||'/';var __lm=__p.match(/^\\/(ru|en)(\\/.*)?$/);var lang=__lm?__lm[1]:D.defaultLang;var connector=(D.progressConnector&&D.progressConnector[lang])||'of';var titles=(D.titlesByLang&&D.titlesByLang[lang])||D.titlesByLang[D.defaultLang]||[];var moduleTitles=(D.moduleTitlesByLang&&D.moduleTitlesByLang[lang])||D.moduleTitlesByLang[D.defaultLang]||[];
+var fkey=null;try{fkey=window.localStorage.getItem(D.furthestKey)}catch(e){}
+var fidx=fkey?D.keys.indexOf(fkey):-1;
+var completed={};var completedCount=0;
+try{var raw=window.localStorage.getItem(D.progressKey);if(raw){var pr=JSON.parse(raw);for(var i=0;i<D.keys.length;i++){var k=D.keys[i];if(pr[k]&&pr[k].completed===true){completed[k]=true;completedCount++;if(i>fidx)fidx=i}}}}catch(e){}
+var hasProgress=completedCount>0||!!fkey;
+var frontierIdx=Math.max(0,Math.min(fidx+1,D.keys.length-1));
+// 1. Lesson rows: data-locked + data-completed.
+var rows=document.querySelectorAll('[data-lesson-key]');
+for(var j=0;j<rows.length;j++){var el=rows[j];var k2=el.getAttribute('data-lesson-key');var idx=D.keys.indexOf(k2);el.removeAttribute('data-locked');el.removeAttribute('data-completed');el.removeAttribute('data-next');el.removeAttribute('aria-disabled');if(idx>=0&&idx>fidx+1){el.setAttribute('data-locked','true');el.setAttribute('aria-disabled','true');el.setAttribute('tabindex','-1')}else{el.removeAttribute('tabindex')}if(completed[k2]){el.setAttribute('data-completed','true')}}
+// 2. "Next" marker within each group (first non-completed in DOM order).
+var groups=document.querySelectorAll('[data-lesson-group]');
+for(var g=0;g<groups.length;g++){var gr=groups[g].querySelectorAll('[data-lesson-key]');for(var x=0;x<gr.length;x++){gr[x].removeAttribute('data-next')}for(var x2=0;x2<gr.length;x2++){if(!gr[x2].hasAttribute('data-completed')){gr[x2].setAttribute('data-next','true');break}}}
+// 3. Progress slots: numbers, percent, bar fill. Scope = 'global' uses the
+//    whole course; scope = 'module' uses data-progress-keys (csv) for in-page
+//    per-module cards.
+var slots=document.querySelectorAll('[data-progress-scope]');
+for(var p=0;p<slots.length;p++){var s=slots[p];var scope=s.getAttribute('data-progress-scope');var sKeys;if(scope==='module'){var csv=s.getAttribute('data-progress-keys')||'';sKeys=csv?csv.split(','):[]}else{sKeys=D.keys}var sDone=0;for(var i2=0;i2<sKeys.length;i2++){if(completed[sKeys[i2]])sDone++}var sTotal=sKeys.length;var sPct=sTotal>0?Math.round((sDone/sTotal)*100):0;var qN=s.querySelectorAll('[data-progress-count]');for(var i3=0;i3<qN.length;i3++)qN[i3].textContent=sDone;var qP=s.querySelectorAll('[data-progress-pct]');for(var i4=0;i4<qP.length;i4++)qP[i4].textContent=sPct;var qB=s.querySelectorAll('[data-progress-bar]');for(var i5=0;i5<qB.length;i5++)qB[i5].style.width=sPct+'%';var state=sTotal===0?'empty':sDone===0?'not-started':sDone===sTotal?'complete':'in-progress';s.setAttribute('data-progress-state',state);if(s.getAttribute('role')==='progressbar'){s.setAttribute('aria-valuenow',String(sDone));s.setAttribute('aria-valuemax',String(sTotal));s.setAttribute('aria-valuetext',sDone+' '+connector+' '+sTotal+' ('+sPct+'%)')}}
+// 4. Module rows on HomePage: each row carries data-progress-keys + slot for
+//    its own count/pct/state. Re-uses the same logic above by being matched
+//    via data-progress-scope='module'.
+// 5. CTA frontier rows: scope = 'global' picks the global frontier; scope =
+//    'module' picks the first non-completed lesson in the module, falling
+//    back to the global frontier if that's locked. The row carries variants
+//    (not-started, in-progress, complete) and we set data-cta-state on it
+//    so CSS hides the unused variants.
+var ctas=document.querySelectorAll('[data-cta-frontier]');
+for(var c=0;c<ctas.length;c++){var row=ctas[c];var ctaScope=row.getAttribute('data-cta-frontier');var targetIdx=-1;var ctaState='not-started';if(ctaScope==='module'){var mcsv=row.getAttribute('data-progress-keys')||'';var mKeys=mcsv?mcsv.split(','):[];var mDone=0;var mNext=null;for(var i6=0;i6<mKeys.length;i6++){if(completed[mKeys[i6]]){mDone++}else if(mNext===null){mNext=mKeys[i6]}}var mTotal=mKeys.length;if(mTotal>0&&mDone===mTotal){ctaState='complete';targetIdx=D.keys.indexOf(mKeys[0])}else if(mNext!==null){var nextIdx=D.keys.indexOf(mNext);if(nextIdx>fidx+1){targetIdx=frontierIdx}else{targetIdx=nextIdx}ctaState=mDone>0?'in-progress':hasProgress?'in-progress':'not-started'}}else{targetIdx=frontierIdx;ctaState=hasProgress?'in-progress':'not-started'}if(targetIdx<0||targetIdx>=D.keys.length){row.setAttribute('data-cta-state',ctaState);continue}var tKey=D.keys[targetIdx];var tTitle=titles[targetIdx];var hrefVal=(D.basePath||'')+'/'+lang+'/'+tKey+'/';var links=row.querySelectorAll('[data-cta-frontier-link]');for(var i7=0;i7<links.length;i7++)links[i7].setAttribute('href',hrefVal);var tTitleEls=row.querySelectorAll('[data-cta-frontier-title]');for(var i8=0;i8<tTitleEls.length;i8++)tTitleEls[i8].textContent=tTitle;var tNumEls=row.querySelectorAll('[data-cta-frontier-num]');for(var i9=0;i9<tNumEls.length;i9++)tNumEls[i9].textContent=String(targetIdx+1);row.setAttribute('data-cta-state',ctaState)}
+// 6. Continue hints (HomePage frontier line under CTA, interstitial side card).
+var hints=document.querySelectorAll('[data-frontier-hint]');
+if(hints.length>0){var hKey=D.keys[frontierIdx];var hTitle=titles[frontierIdx];var hMod=moduleTitles[frontierIdx];for(var i10=0;i10<hints.length;i10++){var h=hints[i10];var hLes=h.querySelectorAll('[data-frontier-hint-lesson]');var hMo=h.querySelectorAll('[data-frontier-hint-module]');if(hKey){h.setAttribute('data-hint-state',hasProgress?'visible':'hidden')}else{h.setAttribute('data-hint-state','hidden')}for(var i11=0;i11<hLes.length;i11++)hLes[i11].textContent=hTitle;for(var i12=0;i12<hMo.length;i12++)hMo[i12].textContent=hMod}}
+// 7. Steps-until counters (interstitial "до этого урока N шагов"). The slot
+//    carries data-steps-target-index = linear index of the locked target;
+//    the slot text becomes max(0, target - frontier) and data-steps-state
+//    is flipped so CSS hides the row when there's effectively no gap.
+var steps=document.querySelectorAll('[data-steps-until]');
+for(var sx=0;sx<steps.length;sx++){var sel=steps[sx];var tgt=parseInt(sel.getAttribute('data-steps-target-index')||'-1',10);var diff=tgt>=0?Math.max(0,tgt-frontierIdx):0;sel.textContent=String(diff);sel.setAttribute('data-steps-state',diff>0?'visible':'hidden')}
+document.documentElement.setAttribute('data-has-progress',hasProgress?'true':'false');
+`;
+export function applyGatePainting(
+  course: Course,
+  furthestIndex: number,
+  basePath: string,
+  lang: Lang,
+): void {
+  if (typeof document === 'undefined') return;
+  const flat = flattenLessons(course);
+  const keys = flat.map((e) => lessonKey(e.moduleId, e.lesson.slug));
+  const titles = flat.map((e) => e.lesson.title);
+  // Pull live progress from localStorage so this mirrors what the inline
+  // script saw. Using the same source on both paths (initial paint and
+  // subsequent updates) keeps state consistent.
+  const moduleTitleByIndex: string[] = [];
+  for (const entry of flat) {
+    const mod = course.modules.find((m) => m.id === entry.moduleId);
+    moduleTitleByIndex.push(mod?.title ?? '');
+  }
+  const completed: Record<string, boolean> = {};
+  let completedCount = 0;
+  let fidx = furthestIndex;
+  try {
+    const raw = window.localStorage.getItem(PROGRESS_STORAGE_KEY);
+    if (raw) {
+      const pr = JSON.parse(raw) as Record<string, { completed?: boolean } | undefined>;
+      for (let i = 0; i < keys.length; i += 1) {
+        const k = keys[i];
+        if (pr[k]?.completed === true) {
+          completed[k] = true;
+          completedCount += 1;
+          if (i > fidx) fidx = i;
+        }
+      }
+    }
+  } catch {
+    /* ignore — leave completed empty */
+  }
+  let furthestKeyExists: string | null = null;
+  try {
+    furthestKeyExists = window.localStorage.getItem(FURTHEST_STORAGE_KEY);
+  } catch {
+    /* ignore */
+  }
+  const hasProgress = completedCount > 0 || !!furthestKeyExists;
+  const frontierIdx = Math.max(0, Math.min(fidx + 1, keys.length - 1));
+  // 1. Lesson rows.
+  document.querySelectorAll<HTMLElement>('[data-lesson-key]').forEach((el) => {
+    const k = (el.getAttribute('data-lesson-key') ?? '') as LessonKey;
+    const idx = keys.indexOf(k);
+    el.removeAttribute('data-locked');
+    el.removeAttribute('data-completed');
+    el.removeAttribute('data-next');
+    el.removeAttribute('aria-disabled');
+    if (idx >= 0 && idx > fidx + 1) {
+      el.setAttribute('data-locked', 'true');
+      el.setAttribute('aria-disabled', 'true');
+      el.setAttribute('tabindex', '-1');
+    } else {
+      el.removeAttribute('tabindex');
+    }
+    if (completed[k]) {
+      el.setAttribute('data-completed', 'true');
+    }
+  });
+  // 2. Next markers per group.
+  document.querySelectorAll<HTMLElement>('[data-lesson-group]').forEach((group) => {
+    const rows = group.querySelectorAll<HTMLElement>('[data-lesson-key]');
+    rows.forEach((r) => r.removeAttribute('data-next'));
+    for (let i = 0; i < rows.length; i += 1) {
+      if (!rows[i].hasAttribute('data-completed')) {
+        rows[i].setAttribute('data-next', 'true');
+        break;
+      }
+    }
+  });
+  // 3. Progress slots.
+  document.querySelectorAll<HTMLElement>('[data-progress-scope]').forEach((slot) => {
+    const scope = slot.getAttribute('data-progress-scope');
+    let slotKeys: string[];
+    if (scope === 'module') {
+      const csv = slot.getAttribute('data-progress-keys') ?? '';
+      slotKeys = csv ? csv.split(',') : [];
+    } else {
+      slotKeys = keys;
+    }
+    let slotDone = 0;
+    for (const k of slotKeys) if (completed[k]) slotDone += 1;
+    const slotTotal = slotKeys.length;
+    const slotPct = slotTotal > 0 ? Math.round((slotDone / slotTotal) * 100) : 0;
+    slot.querySelectorAll<HTMLElement>('[data-progress-count]').forEach((n) => {
+      n.textContent = String(slotDone);
+    });
+    slot.querySelectorAll<HTMLElement>('[data-progress-pct]').forEach((n) => {
+      n.textContent = String(slotPct);
+    });
+    slot.querySelectorAll<HTMLElement>('[data-progress-bar]').forEach((bar) => {
+      bar.style.width = `${slotPct}%`;
+    });
+    const state =
+      slotTotal === 0
+        ? 'empty'
+        : slotDone === 0
+          ? 'not-started'
+          : slotDone === slotTotal
+            ? 'complete'
+            : 'in-progress';
+    slot.setAttribute('data-progress-state', state);
+    // Mirror values onto ARIA attributes when this slot is also a
+    // progressbar (Header ProgressBar uses role=progressbar). Other slots
+    // (HomePage stats card, ModulePage side card) carry the same data but
+    // present it as plain text — no role, so we don't pollute them with
+    // misleading ARIA values.
+    if (slot.getAttribute('role') === 'progressbar') {
+      slot.setAttribute('aria-valuenow', String(slotDone));
+      slot.setAttribute('aria-valuemax', String(slotTotal));
+      slot.setAttribute(
+        'aria-valuetext',
+        `${slotDone} ${getDict(lang).progressAriaConnector} ${slotTotal} (${slotPct}%)`,
+      );
+    }
+  });
+  // 4. CTA frontier.
+  document.querySelectorAll<HTMLElement>('[data-cta-frontier]').forEach((row) => {
+    const ctaScope = row.getAttribute('data-cta-frontier');
+    let targetIdx = -1;
+    let ctaState = 'not-started';
+    if (ctaScope === 'module') {
+      const csv = row.getAttribute('data-progress-keys') ?? '';
+      const mKeys = csv ? csv.split(',') : [];
+      let mDone = 0;
+      let mNext: string | null = null;
+      for (const k of mKeys) {
+        if (completed[k]) {
+          mDone += 1;
+        } else if (mNext === null) {
+          mNext = k;
+        }
+      }
+      const mTotal = mKeys.length;
+      if (mTotal > 0 && mDone === mTotal) {
+        ctaState = 'complete';
+        targetIdx = keys.indexOf(mKeys[0] as LessonKey);
+      } else if (mNext !== null) {
+        const nextIdx = keys.indexOf(mNext as LessonKey);
+        targetIdx = nextIdx > fidx + 1 ? frontierIdx : nextIdx;
+        ctaState = mDone > 0 || hasProgress ? 'in-progress' : 'not-started';
+      }
+    } else {
+      targetIdx = frontierIdx;
+      ctaState = hasProgress ? 'in-progress' : 'not-started';
+    }
+    if (targetIdx >= 0 && targetIdx < keys.length) {
+      const tKey = keys[targetIdx];
+      const tTitle = titles[targetIdx];
+      const hrefVal = `${basePath || ''}/${lang}/${tKey}/`;
+      row.querySelectorAll<HTMLElement>('[data-cta-frontier-link]').forEach((link) => {
+        link.setAttribute('href', hrefVal);
+      });
+      row.querySelectorAll<HTMLElement>('[data-cta-frontier-title]').forEach((n) => {
+        n.textContent = tTitle;
+      });
+      row.querySelectorAll<HTMLElement>('[data-cta-frontier-num]').forEach((n) => {
+        n.textContent = String(targetIdx + 1);
+      });
+    }
+    row.setAttribute('data-cta-state', ctaState);
+  });
+  // 5. Frontier hint (HomePage line + interstitial side card).
+  document.querySelectorAll<HTMLElement>('[data-frontier-hint]').forEach((h) => {
+    const tTitle = titles[frontierIdx] ?? '';
+    const tModule = moduleTitleByIndex[frontierIdx] ?? '';
+    h.querySelectorAll<HTMLElement>('[data-frontier-hint-lesson]').forEach((n) => {
+      n.textContent = tTitle;
+    });
+    h.querySelectorAll<HTMLElement>('[data-frontier-hint-module]').forEach((n) => {
+      n.textContent = tModule;
+    });
+    h.setAttribute('data-hint-state', hasProgress ? 'visible' : 'hidden');
+  });
+  // 6. Steps-until counters.
+  document.querySelectorAll<HTMLElement>('[data-steps-until]').forEach((slot) => {
+    const tgt = Number.parseInt(
+      slot.getAttribute('data-steps-target-index') ?? '-1',
+      10,
+    );
+    const diff = tgt >= 0 ? Math.max(0, tgt - frontierIdx) : 0;
+    slot.textContent = String(diff);
+    slot.setAttribute('data-steps-state', diff > 0 ? 'visible' : 'hidden');
+  });
+  document.documentElement.setAttribute(
+    'data-has-progress',
+    hasProgress ? 'true' : 'false',
+  );
+}