stack-site-builder 1.12.0 → 1.14.0

package/CHANGELOG.md

@@ -11,6 +11,37 @@ content schema, while a consuming site supplies only content, taxonomy data and
 config. Sites track the theme with `pnpm up stack-site-builder`, so each release
 here is a plain version bump they pull in.
 
+## [1.14.0] - 2026-07-21
+
+### Added
+
+- **Private (login-gated) content** — mark any entry in any collection
+  (stacks, concepts, articles, slides, pages) with `private: true`. The
+  rendered body ships AES-256-GCM-encrypted and is decrypted in the browser
+  after login, so it works on any static host with no server; the users
+  (`AAS_PRIVATE_USERS`, `id:password` pairs) and the master secret
+  (`AAS_PRIVATE_MASTER_SECRET` — rotate to force every device to log in again)
+  come from env vars, with sessions cached per device for
+  `AAS_PRIVATE_SESSION_DAYS` (default 30). Listings show only the title + 🔒
+  plus an optional public `teaser`; private pages are `noindex` and excluded
+  from the sitemap; the client re-initializes embedded behaviors (TOC,
+  mermaid, tabs, copy buttons, the slide deck engine) after decryption. The
+  source repo must be private — `.mdx` files stay plaintext; see
+  docs/private-content-design.md.
+
+## [1.13.0] - 2026-07-20
+
+### Added
+
+- **Optional sections** — a site can turn off any of the secondary sections
+  (concepts, articles, samples, slides, glossary, and the standalone `pages`
+  collection); the core catalog stays on. Disabling one removes both its routes
+  and its header-nav item. Declare `sections` in `src/data/site.ts` (hides the
+  nav item) and forward it to `aasTheme({ sections })` in astro.config (skips the
+  routes); the key type (`SectionKey`) is exported from the theme, so
+  `satisfies Partial<Record<SectionKey, boolean>>` gives autocomplete of the
+  valid keys. The playground drops `slides` to demonstrate.
+
 ## [1.12.0] - 2026-07-20
 
 Locales are now **site-configurable**. The theme was wired to exactly two
@@ -107,6 +138,8 @@ catalog sites from a thin content-only repository.
 - **Standalone development setup** — a devcontainer and a minimal `playground/`
   consuming site for developing and previewing the theme on its own.
 
+[1.14.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.13.0...v1.14.0
+[1.13.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.12.0...v1.13.0
 [1.12.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.11.0...v1.12.0
 [1.11.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.10.0...v1.11.0
 [1.10.0]: https://github.com/CodeCompose7/stack-site-builder/releases/tag/v1.10.0

package/README.md

@@ -1,5 +1,7 @@
 # stack-site-builder
 
+> 한국어: [docs/readme.ko.md](docs/readme.ko.md)
+
 An [Astro](https://astro.build) theme for curated "awesome stack" catalog
 sites — a tool catalog with per-entry detail pages, concepts, articles,
 presentation slides, runnable samples, a `[[wikilink]]` glossary, and full
@@ -34,7 +36,7 @@ export const collections = defineAasCollections({ categoryMap });
 
 | Where | What |
 | --- | --- |
-| `src/data/site.ts` | Site identity: name, repo URL, the `locales` it ships, per-locale UI string overrides |
+| `src/data/site.ts` | Site identity: name, repo URL, the `locales` it ships, optional `sections` toggles, per-locale UI string overrides |
 | `src/data/categories.ts` | The tool-catalog category tree (validated against content) |
 | `src/data/concept-categories.ts` · `article-categories.ts` | Taxonomies for concepts / articles |
 | `src/data/glossary.mjs` | `[[Term]]` wikilink targets |
@@ -62,3 +64,80 @@ locale from one source. To add a language (say Japanese):
    labels the same way you did for the built-in locales.
 
 No theme files change — adding a locale is entirely site config and content.
+
+## Sections
+
+The core catalog (home, tool detail, categories, tags, vendors) is always on.
+The rest are opt-out — **concepts, articles, samples, slides, glossary** and the
+standalone **pages** collection (About/소개, …) — so a site can ship only what it
+needs. Turning one off removes both its routes and its header-nav item. (`pages`
+also has finer control: each page's `nav` / `draft` frontmatter, or simply not
+authoring it.)
+
+Declare the toggles once in `src/data/site.ts` and forward them to the theme in
+astro.config (which needs them to skip route injection). Import `SectionKey` from
+the theme so `satisfies` lists the valid keys as you type:
+
+```ts
+// src/data/site.ts
+import type { SectionKey } from 'stack-site-builder';
+export const site = {
+  /* … */
+  sections: { slides: false } satisfies Partial<Record<SectionKey, boolean>>,
+};
+```
+
+```js
+// astro.config.mjs
+import { site } from './src/data/site';
+integrations: [aasTheme({ glossary, sections: site.sections })];
+```
+
+## Private content
+
+Any entry (tools, concepts, articles, slides, pages) can require login:
+
+```yaml
+private: true
+teaser: A public one-liner shown on cards and above the login form. # optional
+```
+
+The body ships **encrypted** (AES-256-GCM, key wrapped per user with PBKDF2) and
+is decrypted in the browser after login — no server needed, works on any static
+host. Listings show only the title + 🔒 (+ teaser); private URLs get `noindex`
+and stay out of the sitemap. Users and keys come from env vars (see
+`playground/.env.sample`): `AAS_PRIVATE_USERS` (`id:password,…`),
+`AAS_PRIVATE_MASTER_SECRET` (rotate it to log every device out) and
+`AAS_PRIVATE_SESSION_DAYS`. Set them in `.env` locally or as CI secrets.
+
+Two rules: the **source repo must be private** (the `.mdx` files are plaintext —
+only the built output is encrypted), and when you remove a user, also rotate the
+master secret. Full design: `docs/private-content-design.md`.
+
+## Deploying (and where the secrets live)
+
+Encryption happens wherever `astro build` runs, reading `process.env` — the
+values just come from a different place per environment:
+
+| Where you build | Where the `AAS_PRIVATE_*` values live |
+| --- | --- |
+| Your machine (`pnpm build`, `firebase deploy`) | `.env` file (gitignored — copy `.env.sample`) |
+| GitHub Actions (deploy on push) | **Repository secrets**: Settings → Secrets and variables → Actions |
+
+`.env` never reaches GitHub; in CI the workflow maps repository secrets to env
+vars on the build step:
+
+```yaml
+- name: Build
+  run: pnpm install && pnpm build # encryption happens here
+  env:
+    AAS_PRIVATE_USERS: ${{ secrets.AAS_PRIVATE_USERS }}
+    AAS_PRIVATE_MASTER_SECRET: ${{ secrets.AAS_PRIVATE_MASTER_SECRET }}
+    AAS_PRIVATE_SESSION_DAYS: '30'
+```
+
+A complete GitHub Pages workflow a site can copy is in
+[`playground/.github/workflows/deploy.yml`](playground/.github/workflows/deploy.yml)
+(inert inside the playground — workflows only run from a repo's root
+`.github/`). Managing users/keys then never touches git: edit the secrets and
+re-run the workflow. Sites without private content need none of this.

package/index.d.ts

@@ -1,8 +1,18 @@
 import type { AstroIntegration } from 'astro';
 
+/** Optional content sections that a site can turn off. `pages` is the
+ *  standalone-pages collection (About/소개, …). */
+export type SectionKey = 'concepts' | 'articles' | 'samples' | 'slides' | 'glossary' | 'pages';
+
 export interface AasThemeOptions {
   /** The site's glossary (`src/data/glossary.mjs`) — `[[wikilink]]` targets. */
   glossary: Record<string, unknown>;
+  /**
+   * Turn optional sections off (all on by default), e.g. `{ slides: false }`.
+   * A disabled section's routes aren't injected; pass the same object to
+   * `src/data/site.ts` `sections` so its header-nav item is hidden too.
+   */
+  sections?: Partial<Record<SectionKey, boolean>>;
 }
 
 /**

package/index.mjs

@@ -54,13 +54,29 @@ function patternOf(file) {
   return `/${p}`.replace(/\/$/, '') || '/';
 }
 
+// Which optional section each page belongs to (null = always-on core route).
+// Mirrors SectionKey in src/lib/sections.ts.
+/** @param {string} file @returns {string | null} */
+function sectionOf(file) {
+  if (file.startsWith('concept/')) return 'concepts';
+  if (file.startsWith('article/')) return 'articles';
+  if (file.startsWith('sample/')) return 'samples';
+  if (file.startsWith('slides/')) return 'slides';
+  if (file === 'glossary.astro') return 'glossary';
+  if (file === '[page].astro') return 'pages';
+  return null;
+}
+
 /**
  * @param {object} opts
  * @param {Record<string, any>} opts.glossary — the site's glossary
  *   (`src/data/glossary.mjs`), used by `[[wikilink]]` resolution.
+ * @param {Partial<Record<string, boolean>>} [opts.sections] — optional-section
+ *   toggles (`{ slides: false }`); a disabled section's routes are not injected.
+ *   Keep it in sync with `src/data/site.ts` `sections` (which hides the nav item).
  * @returns {import('astro').AstroIntegration[]}
  */
-export default function aasTheme({ glossary }) {
+export default function aasTheme({ glossary, sections = {} }) {
   /** @type {import('astro').AstroIntegration} */
   const core = {
     name: 'stack-site-builder',
@@ -77,7 +93,10 @@ export default function aasTheme({ glossary }) {
         // A single physical page tree under `[...lang]/` serves every locale: the
         // default at the root, each other under `/<code>/`. Each page's
         // getStaticPaths enumerates the locales, so adding one needs no new files.
+        // Skip a page whose optional section the site turned off (`{ slides: false }`).
         for (const file of PAGES) {
+          const section = sectionOf(file);
+          if (section && sections[section] === false) continue;
           injectRoute({
             pattern: patternOf(`[...lang]/${file}`),
             entrypoint: `stack-site-builder/pages/[...lang]/${file}`,
@@ -100,6 +119,15 @@ export default function aasTheme({ glossary }) {
                 defaultLocale,
                 locales: Object.fromEntries(locales.map((l) => [l, l])),
               },
+              // Private entries stay out of the sitemap. PrivateGate records each
+              // private pathname (via globalThis — it lives in a different module
+              // graph) while pages render; @astrojs/sitemap runs this after.
+              filter: (page) => {
+                const paths = globalThis.__aasPrivatePaths;
+                if (!paths) return true;
+                const p = new URL(page).pathname.replace(/\/?$/, '/');
+                return !paths.has(p);
+              },
             }),
           ],
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "license": "MIT",
   "description": "The engine behind the awesome-*-stack catalog sites: an Astro theme with the catalog/concepts/articles/slides/samples routes, components, styles and markdown pipeline. Sites provide content, taxonomy data and config.",
   "repository": {

package/src/components/ArticleCard.astro

@@ -16,10 +16,14 @@ interface Props {
   image?: ImageMetadata;
   imageAlt?: string;
   version?: string;
+  /** Private entry: show a lock and the (public) `teaser` instead of the description. */
+  isPrivate?: boolean;
+  teaser?: string;
 }
 
-const { slug, lang, title, description, date, tags, image, imageAlt, version } = Astro.props;
+const { slug, lang, title, description, date, tags, image, imageAlt, version, isPrivate = false, teaser } = Astro.props;
 const t = useTranslations(lang);
+const shownDesc = isPrivate ? (teaser ?? '') : description;
 const href = getRelativeLocaleUrl(lang, `article/${slug}/`);
 const dateStr = date.toISOString().slice(0, 10);
 ---
@@ -36,10 +40,12 @@ const dateStr = date.toISOString().slice(0, 10);
       <time datetime={dateStr}>{formatDate(date, lang)}</time>
       {version && <span> · {t('meta.docVersion')} {version}</span>}
     </p>
-    <h3 class="mt-1 line-clamp-2 text-base font-semibold text-[var(--aas-text)]">{title}</h3>
+    <h3 class="mt-1 line-clamp-2 text-base font-semibold text-[var(--aas-text)]">
+      {isPrivate && <span aria-label={t('private.badge')} title={t('private.badge')}>🔒 </span>}{title}
+    </h3>
     <p
       class="aas-md mt-1.5 line-clamp-2 text-sm leading-relaxed text-[var(--aas-muted)]"
-      set:html={inlineMd(description)}
+      set:html={inlineMd(shownDesc)}
     />
     {
       tags.length > 0 && (

package/src/components/ArticleLink.astro

@@ -33,8 +33,13 @@ const target = articles.find((a) => articleSlugOf(a) === slug) as ArticleEntry |
         <span class="block text-xs font-semibold tracking-wide text-[var(--aas-accent)] uppercase">
           {t('detail.relatedWriting')}
         </span>
-        <span class="mt-0.5 block font-semibold text-[var(--aas-text)]">{target.data.title}</span>
-        <span class="aas-md mt-1 block text-sm text-[var(--aas-muted)]" set:html={inlineMd(target.data.description)} />
+        <span class="mt-0.5 block font-semibold text-[var(--aas-text)]">
+          {target.data.private && <span aria-label={t('private.badge')} title={t('private.badge')}>🔒 </span>}{target.data.title}
+        </span>
+        <span
+          class="aas-md mt-1 block text-sm text-[var(--aas-muted)]"
+          set:html={inlineMd(target.data.private ? (target.data.teaser ?? '') : target.data.description)}
+        />
         <span class="mt-1.5 block text-xs text-[var(--aas-muted)]">
           {formatDate(target.data.date, lang)}
         </span>

package/src/components/BlogIndex.astro

@@ -58,6 +58,8 @@ const card = (a: ArticleEntry) => ({
   tags: a.data.tags,
   image: a.data.image,
   imageAlt: a.data.imageAlt,
+  isPrivate: a.data.private,
+  teaser: a.data.teaser,
 });
 ---
 

package/src/components/CategoryIndex.astro

@@ -59,6 +59,8 @@ const cardProps = (e: StackEntry) => ({
   repo: e.data.repo,
   version: e.data.version,
   deprecated: e.data.deprecated,
+  isPrivate: e.data.private,
+  teaser: e.data.teaser,
 });
 ---
 

package/src/components/CodeSamples.astro

@@ -90,7 +90,12 @@ const t = useTranslations(lang);
 </style>
 
 <script>
+  import { initOnReady } from '../lib/reinit';
+  // Re-runs after private-content decryption; the dataset flag guards each root.
+  initOnReady(() =>
   document.querySelectorAll<HTMLElement>('[data-samples]').forEach((root) => {
+    if (root.dataset.aasInit) return;
+    root.dataset.aasInit = '1';
     const dd = root.querySelector<HTMLDetailsElement>('[data-samples-dd]');
     const current = root.querySelector<HTMLElement>('[data-sample-current]');
     const options = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-sample-option]'));
@@ -137,5 +142,5 @@ const t = useTranslations(lang);
       const cur = options.find((o) => o.getAttribute('aria-current') === 'true');
       if (cur) writeV(cur.dataset.sampleOption!);
     });
-  });
+  }));
 </script>

package/src/components/ConceptCard.astro

@@ -16,10 +16,14 @@ interface Props {
   imageAlt?: string;
   version?: string;
   updated?: Date;
+  /** Private entry: show a lock and the (public) `teaser` instead of the description. */
+  isPrivate?: boolean;
+  teaser?: string;
 }
 
-const { lang, slug, title, description, tags, image, imageAlt, version, updated } = Astro.props;
+const { lang, slug, title, description, tags, image, imageAlt, version, updated, isPrivate = false, teaser } = Astro.props;
 const t = useTranslations(lang);
+const shownDesc = isPrivate ? (teaser ?? '') : description;
 ---
 
 <a
@@ -39,10 +43,12 @@ const t = useTranslations(lang);
         </p>
       )
     }
-    <h3 class="mt-1 text-lg font-semibold text-[var(--aas-text)]">{title}</h3>
+    <h3 class="mt-1 text-lg font-semibold text-[var(--aas-text)]">
+      {isPrivate && <span aria-label={t('private.badge')} title={t('private.badge')}>🔒 </span>}{title}
+    </h3>
     <p
       class="aas-md mt-2 text-sm leading-relaxed text-[var(--aas-muted)]"
-      set:html={inlineMd(description)}
+      set:html={inlineMd(shownDesc)}
     />
     {
       tags.length > 0 && (

package/src/components/ConceptIndex.astro

@@ -64,6 +64,8 @@ const card = (c: ConceptEntry) => ({
   imageAlt: c.data.imageAlt,
   version: c.data.version,
   updated: c.data.updated,
+  isPrivate: c.data.private,
+  teaser: c.data.teaser,
 });
 ---
 

package/src/components/ConceptLink.astro

@@ -32,8 +32,13 @@ const target = concepts.find((c) => conceptSlugOf(c) === slug) as ConceptEntry |
         <span class="block text-xs font-semibold tracking-wide text-[var(--aas-accent)] uppercase">
           {t('concept.learnMore')}
         </span>
-        <span class="mt-0.5 block font-semibold text-[var(--aas-text)]">{target.data.title}</span>
-        <span class="aas-md mt-1 block text-sm text-[var(--aas-muted)]" set:html={inlineMd(target.data.description)} />
+        <span class="mt-0.5 block font-semibold text-[var(--aas-text)]">
+          {target.data.private && <span aria-label={t('private.badge')} title={t('private.badge')}>🔒 </span>}{target.data.title}
+        </span>
+        <span
+          class="aas-md mt-1 block text-sm text-[var(--aas-muted)]"
+          set:html={inlineMd(target.data.private ? (target.data.teaser ?? '') : target.data.description)}
+        />
       </div>
       <span aria-hidden="true" class="shrink-0 text-xl text-[var(--aas-accent)]">
         &rarr;

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/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/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>