stack-site-builder 1.13.0 → 1.15.0

package/src/components/CourseDetail.astro

@@ -0,0 +1,116 @@
+---
+import { render, getCollection } from 'astro:content';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { getCourses, courseSlugOf, type CourseEntry } from '../lib/courses';
+import { inlineMd } from '../lib/inline-md';
+import { Image } from 'astro:assets';
+import { useTranslations, type Lang } from '../i18n/ui';
+import { formatDate } from '../lib/dates';
+import { sectionEnabled } from '../lib/sections';
+import MermaidLoader from './MermaidLoader.astro';
+import TocRail from './TocRail.astro';
+import Breadcrumb from './Breadcrumb.astro';
+import DifficultyStars from './DifficultyStars.astro';
+import { courseTree, courseCatOf } from '@aas-data/course-categories';
+import RelatedCourses from './RelatedCourses.astro';
+
+interface Props {
+  entry: CourseEntry;
+  lang: Lang;
+}
+
+const { entry, lang } = Astro.props;
+const t = useTranslations(lang);
+const { Content, headings } = await render(entry);
+const data = entry.data;
+const tocItems = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
+const bodyHasMermaid = (entry.body ?? '').includes('```mermaid');
+
+// Sibling courses linked from frontmatter (mutual cross-links, like concepts).
+const courses = await getCourses(lang);
+const courseBySlug = new Map(courses.map((c) => [courseSlugOf(c), c]));
+const relatedCourses = data.related
+  .map((sl) => courseBySlug.get(sl))
+  .filter(Boolean) as CourseEntry[];
+
+// Decks in the `slides` collection that belong to this course. Only linked when
+// the slides section is enabled (otherwise its routes don't exist) and the deck
+// id actually resolves — a typo just drops the chip instead of a dead link.
+const slideDecks = sectionEnabled('slides') && data.slides.length > 0
+  ? (await getCollection('slides')).filter(
+      (d) => data.slides.includes(d.id) && !d.data.draft,
+    )
+  : [];
+
+// Breadcrumb: All courses › category › subcategory… (each segment linked).
+const crumbs = [
+  { label: t('course.backToCourses'), href: getRelativeLocaleUrl(lang, 'course/') },
+  ...courseTree.pathOf(courseCatOf(data.category)).map((c) => ({
+    label: c.label[lang],
+    href: getRelativeLocaleUrl(lang, `course/category/${c.id}/`),
+  })),
+];
+---
+
+<Breadcrumb segments={crumbs} />
+
+<header class="mt-4 pb-6">
+  <h1 class="text-3xl font-bold tracking-tight">{data.title}</h1>
+  <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--aas-muted)]">
+    {data.level && <DifficultyStars lang={lang} level={data.level} size={14} />}
+    {
+      data.hours && (
+        <span class="inline-flex items-center gap-1" title={t('course.hours')}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          {data.hours}
+        </span>
+      )
+    }
+    {data.version && <span>{t('meta.docVersion')} {data.version}</span>}
+    {
+      data.updated && (
+        <span>
+          {t('course.updated')} {formatDate(data.updated, lang)}
+        </span>
+      )
+    }
+  </p>
+  <p class="mt-2 aas-md text-lg whitespace-pre-line text-[var(--aas-muted)]" set:html={inlineMd(data.description)} />
+  {
+    slideDecks.length > 0 && (
+      <p class="mt-3 flex flex-wrap items-center gap-2">
+        <span class="text-xs font-semibold tracking-wide text-[var(--aas-muted)] uppercase">
+          {t('course.slides')}
+        </span>
+        {slideDecks.map((d) => (
+          <a
+            href={getRelativeLocaleUrl(lang, `slides/${d.id}/`)}
+            class="rounded-full border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3 py-1 text-sm text-[var(--aas-text)] no-underline hover:bg-[var(--aas-tint)]"
+          >
+            {d.data.title}
+          </a>
+        ))}
+      </p>
+    )
+  }
+  {
+    data.image && (
+      <Image
+        src={data.image}
+        alt={data.imageAlt ?? data.title}
+        class="mt-5 aspect-[2/1] w-full rounded-2xl border border-[var(--aas-border)] object-cover"
+      />
+    )
+  }
+</header>
+
+<RelatedCourses lang={lang} courses={relatedCourses} />
+
+<div class="mt-8 flex items-start gap-8">
+  <article class="prose max-w-none aas-reading min-w-0 flex-1">
+    <Content />
+  </article>
+  <TocRail lang={lang} items={tocItems} />
+</div>
+
+{bodyHasMermaid && <MermaidLoader />}

package/src/components/CourseIndex.astro

@@ -0,0 +1,145 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import CourseCard from './CourseCard.astro';
+import Breadcrumb from './Breadcrumb.astro';
+import ListControls from './ListControls.astro';
+import ArrowUpRight from './ArrowUpRight.astro';
+
+const PAGE = 12;
+import { courseTree, courseCatOf } from '@aas-data/course-categories';
+import { getCourses, courseSlugOf, type CourseEntry } from '../lib/courses';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+// Doubles as the course index (no `categoryId` → all courses, grouped by
+// category) and a category browse page (`categoryId` → that category, with a
+// breadcrumb, its direct courses, and a section per subcategory).
+interface Props {
+  lang: Lang;
+  categoryId?: string;
+}
+
+const { lang, categoryId } = Astro.props;
+const t = useTranslations(lang);
+// getCourses() order (manual `order` desc, then date) agrees with the client
+// "recent" comparator over CourseCard's data-date keys — no reflow on load.
+const all = await getCourses(lang);
+const catUrl = (cid: string) => getRelativeLocaleUrl(lang, `course/category/${cid}/`);
+
+const itemsIn = (cid: string): CourseEntry[] => {
+  const ids = new Set(courseTree.descendantIds(cid));
+  return all.filter((c) => ids.has(courseCatOf(c.data.category)));
+};
+
+const node = categoryId ? courseTree.map.get(categoryId) : undefined;
+const sections = node ? courseTree.childrenOf(node.id) : courseTree.roots;
+const direct = node ? all.filter((c) => courseCatOf(c.data.category) === node.id) : [];
+
+// A leaf category page shows one flat list — that grid gets ?page= pagination.
+// Index and parent-category pages stay grouped overviews: each section is
+// capped to PAGE cards with a "see all" link to the fuller list.
+const isLeaf = !!node && sections.length === 0;
+
+const path = node ? courseTree.pathOf(node.id) : [];
+const crumbs = node
+  ? [
+      { label: t('course.backToCourses'), href: getRelativeLocaleUrl(lang, 'course/') },
+      ...path.map((c, i) => ({
+        label: c.label[lang],
+        href: i === path.length - 1 ? undefined : catUrl(c.id),
+      })),
+    ]
+  : [];
+
+const card = (c: CourseEntry) => ({
+  lang,
+  slug: courseSlugOf(c),
+  title: c.data.title,
+  description: c.data.summary ?? c.data.description,
+  tags: c.data.tags,
+  image: c.data.image,
+  imageAlt: c.data.imageAlt,
+  level: c.data.level,
+  hours: c.data.hours,
+  version: c.data.version,
+  date: c.data.date,
+  updated: c.data.updated,
+  order: c.data.order,
+  isPrivate: c.data.private,
+  teaser: c.data.teaser,
+});
+---
+
+{
+  node ? (
+    <>
+      <Breadcrumb segments={crumbs} />
+      <header class="mt-4">
+        <h1 class="text-3xl font-bold tracking-tight">{node.label[lang]}</h1>
+        <p class="mt-2 max-w-2xl text-lg text-[var(--aas-muted)]">
+          {node.detail?.[lang] ?? node.description[lang]}
+        </p>
+      </header>
+    </>
+  ) : (
+    <section class="py-6">
+      <h1 class="text-4xl font-bold tracking-tight">{t('course.title')}</h1>
+      <p class="mt-3 max-w-2xl text-lg text-[var(--aas-muted)]">{t('course.tagline')}</p>
+    </section>
+  )
+}
+
+{all.length === 0 && <p class="mt-8 text-[var(--aas-muted)]">{t('course.empty')}</p>}
+
+{all.length > 0 && <div class="mt-6"><ListControls lang={lang} /></div>}
+
+{
+  direct.length > 0 && (
+    <div
+      class="mt-4 grid gap-5 sm:grid-cols-2 lg:grid-cols-3"
+      data-sortgrid
+      data-paginate={isLeaf ? true : undefined}
+      data-page-size={isLeaf ? PAGE : undefined}
+    >
+      {direct.map((c) => (
+        <CourseCard {...card(c)} />
+      ))}
+    </div>
+  )
+}
+
+{
+  sections.map((cat) => {
+    const items = itemsIn(cat.id);
+    return (
+      items.length > 0 && (
+        <section class="mt-8">
+          <h2 class="text-2xl font-semibold">
+            <a
+              href={catUrl(cat.id)}
+              class="text-[var(--aas-text)] no-underline hover:text-[var(--aas-accent)]"
+            >
+              {cat.label[lang]}
+              <ArrowUpRight size={20} class="ml-1 text-[var(--aas-muted)]" />
+            </a>
+          </h2>
+          <p class="mt-1 text-sm text-[var(--aas-muted)]">{cat.description[lang]}</p>
+          <div class="mt-4 grid gap-5 sm:grid-cols-2 lg:grid-cols-3" data-sortgrid>
+            {items.slice(0, PAGE).map((c) => (
+              <CourseCard {...card(c)} />
+            ))}
+          </div>
+          {items.length > PAGE && (
+            <a
+              href={catUrl(cat.id)}
+              class="mt-3 inline-block text-sm font-medium text-[var(--aas-accent)] no-underline"
+            >
+              {t('list.seeAll').replace('{n}', String(items.length))} &rarr;
+            </a>
+          )}
+        </section>
+      )
+    );
+  })
+}
+
+{isLeaf && <nav data-pager aria-label="Pagination" class="mt-8 flex flex-wrap items-center justify-center gap-1.5" />}

package/src/components/DeckView.astro

@@ -4,6 +4,7 @@ import '../styles/global.css';
 import { getRelativeLocaleUrl } from 'astro:i18n';
 import { render, type CollectionEntry } from 'astro:content';
 import MermaidLoader from './MermaidLoader.astro';
+import PrivateGate from './PrivateGate.astro';
 import { useTranslations, type Lang } from '../i18n/ui';
 
 // Renders a full-screen slide deck as a horizontal scroll-snap presentation.
@@ -21,6 +22,7 @@ const hasMermaid = (entry.body ?? '').includes('```mermaid');
 const base = import.meta.env.BASE_URL.replace(/\/$/, '');
 const backHref = getRelativeLocaleUrl(lang, 'slides/');
 const themeClass = `aas-theme-${entry.data.theme}`;
+const priv = entry.data.private;
 ---
 
 <!doctype html>
@@ -29,7 +31,8 @@ const themeClass = `aas-theme-${entry.data.theme}`;
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{entry.data.title} — {site.name}</title>
-    <meta name="description" content={entry.data.description} />
+    <meta name="description" content={(priv ? entry.data.teaser : entry.data.description) ?? ''} />
+    {priv && <meta name="robots" content="noindex" />}
     <link rel="icon" type="image/svg+xml" href={`${base}/favicon.svg`} />
     {/* Follow the site's light/dark preference before first paint (same logic as
         BaseLayout). The deck's visual theme is a separate CSS class, below. */}
@@ -46,6 +49,11 @@ const themeClass = `aas-theme-${entry.data.theme}`;
     </script>
   </head>
   <body class="aas-deck-body" data-aspect={entry.data.aspect}>
+    {/* Private decks: the whole deck DOM (slides + chrome) ships encrypted; the
+        engine script below no-ops until decryption re-runs it via initOnReady.
+        MermaidLoader stays OUTSIDE the gate so its loader script is always on
+        the page and can render diagrams after decryption. */}
+    <PrivateGate enabled={priv} lang={lang} title={entry.data.title} teaser={entry.data.teaser}>
     <div class="aas-deck-progress"><div class="aas-deck-progress-fill" data-progress></div></div>
 
     {/* The slides: <Content/> renders the deck MDX, whose <Slide> blocks become
@@ -137,12 +145,18 @@ const themeClass = `aas-theme-${entry.data.theme}`;
       </button>
       <div class="aas-zoom-stage" data-zoom-stage></div>
     </div>
+    </PrivateGate>
 
     {hasMermaid && <MermaidLoader />}
 
     <script>
+      import { initOnReady } from '../lib/reinit';
+      // Wrapped in initOnReady: on a private deck [data-deck] is inside the
+      // encrypted payload, so this no-ops at load and runs after decryption.
+      initOnReady(() => {
       const deck = document.querySelector<HTMLElement>('[data-deck]');
-      if (deck) {
+      if (deck && !deck.dataset.aasInit) {
+        deck.dataset.aasInit = '1';
         // Animate slide changes unless the deck opts out (data-transition="none")
         // or the viewer prefers reduced motion.
         const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -767,6 +781,7 @@ const themeClass = `aas-theme-${entry.data.theme}`;
         go(Number.isFinite(fromHash) && fromHash >= 1 ? fromHash - 1 : 0, false);
         paint();
       }
+      });
     </script>
   </body>
 </html>

package/src/components/DetailTabs.astro

@@ -131,7 +131,12 @@ const tabClass =
       if (tab !== id) ps.forEach((p) => url.searchParams.delete(p));
   }
 
+  import { initOnReady } from '../lib/reinit';
+  // Re-runs after private-content decryption; the dataset flag guards each root.
+  initOnReady(() =>
   document.querySelectorAll<HTMLElement>('[data-tabs]').forEach((root) => {
+    if (root.dataset.aasInit) return;
+    root.dataset.aasInit = '1';
     const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-tab]'));
     const panels = Array.from(root.querySelectorAll<HTMLElement>('[data-panel]'));
     const tabIds = tabs.map((t) => t.dataset.tab);
@@ -215,5 +220,5 @@ const tabClass =
         document.dispatchEvent(new CustomEvent('aas:select-sample', { detail: { index: Number(m[1]) } }));
       document.getElementById(raw)?.scrollIntoView();
     }
-  });
+  }));
 </script>

package/src/components/DifficultyStars.astro

@@ -0,0 +1,34 @@
+---
+import StarIcon from './StarIcon.astro';
+import { useTranslations, difficultyLabel, type Lang } from '../i18n/ui';
+
+// Course difficulty as a 5-star row (filled up to `level`). The visual is
+// decorative; the level + localized label live in the aria-label/tooltip.
+interface Props {
+  lang: Lang;
+  /** 1 (beginner) … 5 (expert). */
+  level: number;
+  size?: number;
+  class?: string;
+}
+
+const { lang, level, size = 12, class: className } = Astro.props;
+const t = useTranslations(lang);
+const label = `${t('course.level')}: ${difficultyLabel(lang, level)}`;
+---
+
+<span
+  class:list={['inline-flex items-center gap-0.5', className]}
+  role="img"
+  aria-label={label}
+  title={label}
+>
+  {
+    [1, 2, 3, 4, 5].map((i) => (
+      <StarIcon
+        size={size}
+        class={i <= level ? 'text-[var(--aas-accent)]' : 'text-[var(--aas-border)]'}
+      />
+    ))
+  }
+</span>

package/src/components/Embed.astro

@@ -0,0 +1,36 @@
+---
+// Responsive iframe wrapper for MDX bodies (a Hugo `iframe` shortcode
+// successor) — interactive demos, videos, and other embeds:
+//   <Embed src="/demos/foo/index.html" title="Foo demo" ratio="4:3" />
+interface Props {
+  src: string;
+  /** Accessible name for the iframe — required; it is the only label. */
+  title: string;
+  /** Aspect ratio ("16:9" default, "4:3", …), or "auto" paired with `height`. */
+  ratio?: string;
+  /** CSS height, used when `ratio` is "auto" (e.g. "32rem"). */
+  height?: string;
+  /** `sandbox` attribute passthrough (omit = unsandboxed, same-origin demos). */
+  sandbox?: string;
+  allowFullscreen?: boolean;
+}
+
+const { src, title, ratio = '16:9', height, sandbox, allowFullscreen = true } = Astro.props;
+const style =
+  ratio === 'auto'
+    ? height
+      ? `height: ${height};`
+      : undefined
+    : `aspect-ratio: ${ratio.replace(':', ' / ')};`;
+---
+
+<div class="not-prose my-4" style={style}>
+  <iframe
+    src={src}
+    title={title}
+    loading="lazy"
+    class="h-full w-full rounded-2xl border border-[var(--aas-border)] bg-[var(--aas-panel)]"
+    {...(sandbox !== undefined ? { sandbox } : {})}
+    {...(allowFullscreen ? { allowfullscreen: true } : {})}
+  ></iframe>
+</div>

package/src/components/Home.astro

@@ -80,6 +80,8 @@ const facets = deriveFacets(entries, lang);
                 repo={e.data.repo}
                 version={e.data.version}
                 deprecated={e.data.deprecated}
+                isPrivate={e.data.private}
+                teaser={e.data.teaser}
               />
             ))}
           </div>

package/src/components/Lead.astro

@@ -0,0 +1,8 @@
+---
+// Lead/intro paragraph for MDX bodies (a Hugo `lead` shortcode successor):
+//   <Lead>One-sentence framing of the page.</Lead>
+---
+
+<p class="not-prose my-5 text-xl leading-relaxed text-[var(--aas-muted)]">
+  <slot />
+</p>

package/src/components/MermaidLoader.astro

@@ -6,6 +6,7 @@
 
 <script>
   import mermaid from 'mermaid';
+  import { initOnReady } from '../lib/reinit';
 
   // Read the live site palette so Mermaid matches the current theme exactly.
   function palette() {
@@ -67,7 +68,8 @@
     }
   }
 
-  renderAll();
+  // Re-runs after private-content decryption too (diagrams arrive with it).
+  initOnReady(() => void renderAll());
 
   // Allow tab/version switches to re-render diagrams that were hidden (and thus
   // mis-sized) at first paint.

package/src/components/PricingSection.astro

@@ -84,8 +84,11 @@ const hasTable = tiers.length > 0;
 <script>
   // Flag prices that haven't been re-checked recently, relative to the viewer's
   // current date (so a stale static build still warns). Mirrors stalenessOf().
+  import { initOnReady } from '../lib/reinit';
   const SIX_MONTHS = 182 * 24 * 60 * 60 * 1000;
   const ONE_YEAR = 365 * 24 * 60 * 60 * 1000;
+  // Re-runs after private-content decryption (idempotent per element).
+  initOnReady(() =>
   document.querySelectorAll<HTMLElement>('[data-pricing-freshness]').forEach((el) => {
     const ts = Date.parse(el.dataset.checked || '');
     if (Number.isNaN(ts)) return;
@@ -96,5 +99,5 @@ const hasTable = tiers.length > 0;
     el.title = kind === 'stale' ? el.dataset.staleHint! : el.dataset.agingHint!;
     el.classList.add(kind === 'stale' ? 'aas-stale' : 'aas-aging');
     el.classList.remove('hidden');
-  });
+  }));
 </script>

package/src/components/PrivateGate.astro

@@ -0,0 +1,135 @@
+---
+// Login gate for private entries (docs/private-content-design.md). Wrap a
+// detail component in it; when `enabled` the slot's rendered HTML ships
+// encrypted with a login form in its place, and the client (private-client.ts)
+// decrypts after login — or instantly when this device already holds the key.
+// When `enabled` is false it renders the slot untouched, so callers can wrap
+// unconditionally. In dev the gate is skipped: authors see the content with a
+// "private" banner instead of logging in on localhost.
+import { useTranslations, type Lang } from '../i18n/ui';
+import { encryptHtml, privateClientData, registerPrivatePath } from '../lib/private';
+
+interface Props {
+  enabled: boolean;
+  lang: Lang;
+  /** Entry title, shown above the login form (titles are public by design). */
+  title?: string;
+  /** The entry's PUBLIC teaser, shown under the title on the gate. */
+  teaser?: string;
+}
+
+const { enabled, lang, title, teaser } = Astro.props;
+const t = useTranslations(lang);
+const dev = import.meta.env.DEV;
+
+let payload: string | null = null;
+if (enabled && !dev) {
+  const html = await Astro.slots.render('default');
+  registerPrivatePath(Astro.url.pathname);
+  payload = JSON.stringify({ ...encryptHtml(html), ...privateClientData() });
+}
+---
+
+{!enabled && <slot />}
+
+{
+  enabled && dev && (
+    <div>
+      <p class="aas-private-devbanner">
+        🔒 {t('private.badge')} — dev preview (built sites require login)
+      </p>
+      <slot />
+    </div>
+  )
+}
+
+{
+  enabled && !dev && (
+    <div class="aas-private-gate" data-private-gate data-logout-label={t('private.logout')}>
+      <script type="application/json" data-private-data set:html={payload} />
+      <div class="aas-private-card">
+        <p class="aas-private-badge" aria-hidden="true">🔒</p>
+        {title && <h1 class="text-2xl font-bold tracking-tight">{title}</h1>}
+        {teaser && <p class="mt-2 text-[var(--aas-muted)]">{teaser}</p>}
+        <p class="mt-2 text-sm text-[var(--aas-muted)]">{t('private.locked')}</p>
+        <div data-private-form hidden>
+          <form class="mt-5 flex flex-col gap-3">
+            <label class="flex flex-col gap-1 text-sm">
+              <span>{t('private.id')}</span>
+              <input
+                name="id"
+                type="text"
+                required
+                autocomplete="username"
+                class="rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3 py-2"
+              />
+            </label>
+            <label class="flex flex-col gap-1 text-sm">
+              <span>{t('private.password')}</span>
+              <input
+                name="password"
+                type="password"
+                required
+                autocomplete="current-password"
+                class="rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] px-3 py-2"
+              />
+            </label>
+            <p data-private-error hidden class="text-sm text-red-600 dark:text-red-400">
+              {t('private.error')}
+            </p>
+            <button
+              type="submit"
+              class="mt-1 cursor-pointer rounded-lg bg-[var(--aas-accent)] px-4 py-2 font-semibold text-white"
+            >
+              {t('private.submit')}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+<style>
+  .aas-private-card {
+    max-width: 26rem;
+    margin: 3rem auto;
+    padding: 2rem;
+    border: 1px solid var(--aas-border);
+    border-radius: 1rem;
+    background: var(--aas-panel);
+    text-align: center;
+  }
+  .aas-private-badge {
+    font-size: 2rem;
+  }
+  .aas-private-devbanner {
+    margin-bottom: 1rem;
+    padding: 0.5rem 1rem;
+    border: 1px dashed var(--aas-border);
+    border-radius: 0.75rem;
+    color: var(--aas-muted);
+    font-size: 0.875rem;
+  }
+  /* Injected by private-client.ts (global: it lives outside this component's scope). */
+  :global(.aas-private-bar) {
+    display: flex;
+    justify-content: flex-end;
+  }
+  :global(.aas-private-logout) {
+    cursor: pointer;
+    font-size: 0.8rem;
+    color: var(--aas-muted);
+    padding: 0.15rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  :global(.aas-private-logout:hover) {
+    color: var(--aas-text);
+    background: var(--aas-tint);
+  }
+</style>
+
+<script>
+  import { mountGate } from '../lib/private-client';
+  document.querySelectorAll<HTMLElement>('[data-private-gate]').forEach(mountGate);
+</script>

package/src/components/ProjectViewer.astro

@@ -290,7 +290,12 @@ function formatDate(iso: string): string {
   const PARAM_EX = 'ex'; // sample project folder, e.g. "langgraph_1"
   const PARAM_FILE = 'file'; // file path within the project, e.g. "app.py"
 
+  import { initOnReady } from '../lib/reinit';
+  // Re-runs after private-content decryption; the dataset flag guards each root.
+  initOnReady(() =>
   document.querySelectorAll<HTMLElement>('[data-projects]').forEach((root) => {
+    if (root.dataset.aasInit) return;
+    root.dataset.aasInit = '1';
     const projDD = root.querySelector<HTMLDetailsElement>('[data-project-dd]');
     const projCurrent = root.querySelector<HTMLElement>('[data-project-current]');
     const projOptions = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-project-option]'));
@@ -392,13 +397,14 @@ function formatDate(iso: string): string {
     document.addEventListener('aas:tabchange', (e) => {
       if ((e as CustomEvent<{ id: string }>).detail.id === 'impl') reflectSelection();
     });
-  });
+  }));
 </script>
 
 <script>
   // Collapsible README, remembered in localStorage (one preference for all
   // implementation samples). The inline pre-paint above applies it before paint;
   // this binds the toggle and keeps every README in sync.
+  import { initOnReady } from '../lib/reinit';
   const README_KEY = 'aas:readme-collapsed';
   const isReadmeCollapsed = () => {
     try {
@@ -416,16 +422,21 @@ function formatDate(iso: string): string {
       if (body) body.hidden = collapsed;
     });
   }
-  applyReadme(isReadmeCollapsed());
-  document.querySelectorAll<HTMLButtonElement>('[data-readme-toggle]').forEach((btn) =>
-    btn.addEventListener('click', () => {
-      const collapsed = !isReadmeCollapsed();
-      try {
-        localStorage.setItem(README_KEY, collapsed ? '1' : '0');
-      } catch {
-        /* private mode — best effort */
-      }
-      applyReadme(collapsed);
-    }),
-  );
+  // Re-runs after private-content decryption; the dataset flag guards each button.
+  initOnReady(() => {
+    applyReadme(isReadmeCollapsed());
+    document.querySelectorAll<HTMLButtonElement>('[data-readme-toggle]').forEach((btn) => {
+      if (btn.dataset.aasInit) return;
+      btn.dataset.aasInit = '1';
+      btn.addEventListener('click', () => {
+        const collapsed = !isReadmeCollapsed();
+        try {
+          localStorage.setItem(README_KEY, collapsed ? '1' : '0');
+        } catch {
+          /* private mode — best effort */
+        }
+        applyReadme(collapsed);
+      });
+    });
+  });
 </script>