stack-site-builder 1.12.0 → 1.14.0

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>

package/src/components/SlidesIndex.astro

@@ -32,8 +32,14 @@ const decks = await getDecks(lang);
           <p class="text-xs font-medium tracking-wide text-[var(--aas-muted)] uppercase">
             {t('slides.deck')}
           </p>
-          <h2 class="mt-1 text-xl font-semibold text-[var(--aas-text)]">{deck.data.title}</h2>
-          <p class="mt-2 text-sm leading-relaxed text-[var(--aas-muted)]">{deck.data.description}</p>
+          <h2 class="mt-1 text-xl font-semibold text-[var(--aas-text)]">
+            {deck.data.private && (
+              <span aria-label={t('private.badge')} title={t('private.badge')}>🔒 </span>
+            )}{deck.data.title}
+          </h2>
+          <p class="mt-2 text-sm leading-relaxed text-[var(--aas-muted)]">
+            {deck.data.private ? (deck.data.teaser ?? '') : deck.data.description}
+          </p>
           <span class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-[var(--aas-text)]">
             {t('slides.open')}
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

package/src/components/StackCard.astro

@@ -26,9 +26,12 @@ interface Props {
   repo?: string;
   version?: string;
   deprecated?: boolean;
+  /** Private entry: show a lock and the (public) `teaser` instead of the description. */
+  isPrivate?: boolean;
+  teaser?: string;
 }
 
-const { slug, lang, name, formerNames = [], vendor, description, tags, pricing, license, language, category, logo, logoDark, repo, version, deprecated } =
+const { slug, lang, name, formerNames = [], vendor, description, tags, pricing, license, language, category, logo, logoDark, repo, version, deprecated, isPrivate = false, teaser } =
   Astro.props;
 const t = useTranslations(lang);
 const href = getRelativeLocaleUrl(lang, `stack/${slug}/`);
@@ -54,7 +57,11 @@ const langTokens = (language ?? '')
   .split('/')
   .map((s) => s.trim())
   .filter(Boolean);
-const searchText = `${name} ${description} ${tags.join(' ')}`.toLowerCase();
+// Private entries: the card carries only public copy — the title and the
+// authored `teaser` (description stays inside the encrypted detail page), and
+// the search index must not include the hidden description either.
+const shownDesc = isPrivate ? (teaser ?? '') : description;
+const searchText = `${name} ${shownDesc} ${tags.join(' ')}`.toLowerCase();
 ---
 
 {/* The card is a container, not a link: the name is the stretched primary link
@@ -85,6 +92,11 @@ const searchText = `${name} ${description} ${tags.join(' ')}`.toLowerCase();
       <div class="min-w-0">
         <h3 class="truncate text-base font-semibold text-[var(--aas-text)]">
           <a href={href} class="no-underline after:absolute after:inset-0 after:content-['']">
+            {isPrivate && (
+              <span aria-label={t('private.badge')} title={t('private.badge')}>
+                🔒{' '}
+              </span>
+            )}
             {name}
           </a>
         </h3>
@@ -100,7 +112,7 @@ const searchText = `${name} ${description} ${tags.join(' ')}`.toLowerCase();
     <p
       class="aas-md mt-2 text-sm leading-relaxed text-[var(--aas-muted)]"
       data-card-desc
-      set:html={inlineMd(description)}
+      set:html={inlineMd(shownDesc)}
     />
 
     {/* Secondary facts: version · release date · language · license.

package/src/components/StackDetail.astro

@@ -402,8 +402,16 @@ const relatedToolsByFolder = new Map(projectRail.map((p) => [p.folder, p.tools])
 
 <script>
   import { startScrollSpy, initBackToTop, initReveals } from '../lib/toc-rail-client';
+  import { initOnReady } from '../lib/reinit';
 
+  // Wrapped in initOnReady: on a private tool page all of this DOM sits inside
+  // the encrypted body, so the load-time run wires nothing (null rail, empty
+  // lists — its document listeners are inert) and the post-decryption run does
+  // the real wiring against the injected DOM.
+  initOnReady(() => {
   const rail = document.querySelector<HTMLElement>('[data-toc-rail]');
+  if (rail?.dataset.aasInit) return;
+  if (rail) rail.dataset.aasInit = '1';
   // Scroll-spy + back-to-top + prose-<details> persistence, shared with
   // TocRail.astro. The tab/version/example handlers below re-run the spy after
   // changing which headings are visible.
@@ -481,6 +489,7 @@ const relatedToolsByFolder = new Map(projectRail.map((p) => [p.folder, p.tools])
       });
     }),
   );
+  });
 </script>
 
 {

package/src/components/TagIndex.astro

@@ -45,6 +45,8 @@ const entries = (await getStacksByTag(lang, tag)).sort((a, b) =>
         repo={e.data.repo}
         version={e.data.version}
         deprecated={e.data.deprecated}
+        isPrivate={e.data.private}
+        teaser={e.data.teaser}
       />
     ))
   }

package/src/components/TocRail.astro

@@ -64,11 +64,17 @@ const hasContent = items.length > 0 || relatedTools.length > 0 || Boolean(projec
 
 <script>
   import { startScrollSpy, initBackToTop, initReveals } from '../lib/toc-rail-client';
+  import { initOnReady } from '../lib/reinit';
 
-  const rail = document.querySelector<HTMLElement>('[data-toc-rail]');
-  if (rail) {
-    startScrollSpy(rail);
-    initBackToTop(rail);
-    initReveals(rail);
-  }
+  // Re-runs after private-content decryption (the rail ships inside the
+  // encrypted body); the dataset flag keeps a live rail from double-wiring.
+  initOnReady(() => {
+    const rail = document.querySelector<HTMLElement>('[data-toc-rail]');
+    if (rail && !rail.dataset.aasInit) {
+      rail.dataset.aasInit = '1';
+      startScrollSpy(rail);
+      initBackToTop(rail);
+      initReveals(rail);
+    }
+  });
 </script>

package/src/components/VendorIndex.astro

@@ -45,6 +45,8 @@ const vendorName = entries[0]?.data.vendor ?? vendor;
         repo={e.data.repo}
         version={e.data.version}
         deprecated={e.data.deprecated}
+        isPrivate={e.data.private}
+        teaser={e.data.teaser}
       />
     ))
   }

package/src/content.ts

@@ -107,6 +107,11 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
         )
         .default([]),
       featured: z.boolean().default(false),
+      // Login-gated entry: the body ships encrypted and listings show only the
+      // title (+ `teaser`, an explicitly PUBLIC one-liner written for the gate).
+      // See docs/private-content-design.md. Requires the AAS_PRIVATE_* env vars.
+      private: z.boolean().default(false),
+      teaser: z.string().optional(),
     }),
   });
 
@@ -147,6 +152,10 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
           .optional(),
         tags: z.array(z.string()).default([]),
         draft: z.boolean().default(false),
+        // Login-gated entry (encrypted body; listings show title + optional
+        // PUBLIC `teaser`). See docs/private-content-design.md.
+        private: z.boolean().default(false),
+        teaser: z.string().optional(),
       }),
   });
 
@@ -181,6 +190,10 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
         tags: z.array(z.string()).default([]),
         order: z.number().optional(), // manual sort on the index (lower first)
         draft: z.boolean().default(false),
+        // Login-gated entry (encrypted body; listings show title + optional
+        // PUBLIC `teaser`). See docs/private-content-design.md.
+        private: z.boolean().default(false),
+        teaser: z.string().optional(),
       }),
   });
 
@@ -221,6 +234,10 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
       toc_level: z.number().int().min(2).max(4).default(2),
       toc_open: z.boolean().default(true),
       draft: z.boolean().default(false),
+      // Login-gated deck (encrypted body; the slides index shows title +
+      // optional PUBLIC `teaser`). See docs/private-content-design.md.
+      private: z.boolean().default(false),
+      teaser: z.string().optional(),
     }),
   });
 
@@ -249,6 +266,10 @@ export function defineAasCollections({ categoryMap }: { categoryMap: Map<string,
         navLabel: z.string().optional(),
         order: z.number().default(0),
         draft: z.boolean().default(false),
+        // Login-gated page (encrypted body; the nav/meta show title + optional
+        // PUBLIC `teaser`). See docs/private-content-design.md.
+        private: z.boolean().default(false),
+        teaser: z.string().optional(),
       }),
   });
 

package/src/i18n/ui.ts

@@ -67,6 +67,13 @@ export const ui = {
     'nav.menu': 'Menu',
     'code.copy': 'Copy code',
     'code.copied': 'Copied',
+    'private.badge': 'Private',
+    'private.locked': 'This content is private. Log in to view it.',
+    'private.id': 'ID',
+    'private.password': 'Password',
+    'private.submit': 'Unlock',
+    'private.error': 'Wrong ID or password.',
+    'private.logout': 'Log out',
     'slides.title': 'Slides',
     'slides.tagline': 'Concept decks — the same ideas as the concept pages, in slide form.',
     'slides.deck': 'Deck',
@@ -209,6 +216,13 @@ export const ui = {
     'nav.menu': '메뉴',
     'code.copy': '코드 복사',
     'code.copied': '복사됨',
+    'private.badge': '비공개',
+    'private.locked': '비공개 콘텐츠입니다. 로그인 후 볼 수 있습니다.',
+    'private.id': '아이디',
+    'private.password': '비밀번호',
+    'private.submit': '잠금 해제',
+    'private.error': '아이디 또는 비밀번호가 올바르지 않습니다.',
+    'private.logout': '로그아웃',
     'slides.title': '슬라이드',
     'slides.tagline': '개념 덱 — 개념 페이지와 같은 내용을 슬라이드로 옮겼습니다.',
     'slides.deck': '덱',

package/src/layouts/BaseLayout.astro

@@ -7,6 +7,7 @@ import LanguageSwitcher from '../components/LanguageSwitcher.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 import BackToTop from '../components/BackToTop.astro';
 import { getNavPages, pageSlugOf } from '../lib/pages';
+import { sectionEnabled, type SectionKey } from '../lib/sections';
 
 interface Props {
   title: string;
@@ -16,9 +17,11 @@ interface Props {
   path: string;
   /** Wider container — used by detail pages that have a right-rail TOC. */
   wide?: boolean;
+  /** Private entries: ask crawlers not to index the gate page. */
+  noindex?: boolean;
 }
 
-const { title, lang, path, wide = false } = Astro.props;
+const { title, lang, path, wide = false, noindex = false } = Astro.props;
 const t = useTranslations(lang);
 // Collapse any authored line breaks (used for on-page wrapping) to a single
 // space so the SEO meta description stays one clean line.
@@ -43,12 +46,13 @@ const navPages = await getNavPages(lang);
 // layouts never drift: an icon-only row (≥sm) and a labelled dropdown menu
 // (<sm, so a phone header stays to a few controls instead of a long icon run).
 // `svg` is the icon's inner markup (drawn into a shared <svg> shell below).
-const navItems: {
+const allNavItems: {
   href: string;
   label: string;
   svg: string;
   external?: boolean;
   keepFilters?: boolean;
+  section?: SectionKey;
 }[] = [
   {
     href: `${home}#categories`,
@@ -59,31 +63,37 @@ const navItems: {
   {
     href: getRelativeLocaleUrl(lang, 'concept/'),
     label: t('nav.concepts'),
+    section: 'concepts',
     svg: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
   },
   {
     href: getRelativeLocaleUrl(lang, 'article/'),
     label: t('nav.blog'),
+    section: 'articles',
     svg: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>',
   },
   {
     href: getRelativeLocaleUrl(lang, 'sample/'),
     label: t('nav.samples'),
+    section: 'samples',
     svg: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
   },
   {
     href: getRelativeLocaleUrl(lang, 'slides/'),
     label: t('nav.slides'),
+    section: 'slides',
     svg: '<path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/><path d="M12 12v9"/>',
   },
   {
     href: getRelativeLocaleUrl(lang, 'glossary/'),
     label: t('nav.glossary'),
+    section: 'glossary',
     svg: '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>',
   },
   ...navPages.map((p) => ({
     href: getRelativeLocaleUrl(lang, `${pageSlugOf(p)}/`),
     label: p.data.navLabel ?? p.data.title,
+    section: 'pages' as SectionKey,
     svg: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
   })),
   {
@@ -93,6 +103,8 @@ const navItems: {
     svg: '<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C4 2 3 2 3 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 2 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/>',
   },
 ];
+// Drop the nav links for sections the site turned off (their routes aren't built).
+const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(item.section));
 ---
 
 <!doctype html>
@@ -103,6 +115,7 @@ const navItems: {
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <meta name="description" content={description} />
+    {noindex && <meta name="robots" content="noindex" />}
     <link rel="icon" type="image/svg+xml" href={`${base.replace(/\/$/, '')}/favicon.svg`} />
     {/* On the root (default-locale) home, send first-time visitors to the
         locale matching their browser — unless they've already picked one (the
@@ -252,6 +265,8 @@ const navItems: {
     <BackToTop lang={lang} />
 
     <script>
+      import { initOnReady } from '../lib/reinit';
+
       // Clicking a heading's "#" anchor copies that section's URL to the
       // clipboard (and updates the address bar) instead of just navigating.
       document.addEventListener('click', (e) => {
@@ -269,8 +284,9 @@ const navItems: {
       // Mount a copy-to-clipboard button on every code block: README/overview
       // prose (.prose pre), the file viewer (.aas-projfile), and the Code tab
       // (.aas-code). The button is pinned to a non-scrolling host so it stays in
-      // place on long, horizontally-scrolling code.
-      (function mountCopyButtons() {
+      // place on long, horizontally-scrolling code. Re-runs after private-content
+      // decryption (mount() skips hosts that already have a button).
+      initOnReady(function mountCopyButtons() {
         const LABEL = document.documentElement.dataset.copyLabel || 'Copy code';
         const DONE = document.documentElement.dataset.copiedLabel || 'Copied';
         const COPY_ICON =
@@ -324,7 +340,7 @@ const navItems: {
           const fig = el.closest('figure');
           mount(el, (fig as HTMLElement) ?? wrap(el));
         });
-      })();
+      });
 
       // Close any open <details> dropdown when clicking outside it (or on Esc).
       // Only nav dropdowns — leave file-tree folders (.aas-tree-dir) and prose

package/src/lib/private-client.ts

@@ -0,0 +1,160 @@
+/**
+ * Browser half of private content: login (PBKDF2 → unwrap the site key),
+ * session caching in localStorage, AES-GCM decryption and DOM injection.
+ * Crypto parameters must match src/lib/private.ts. Loaded only by PrivateGate.
+ */
+import { PRIVATE_DECRYPTED_EVENT } from './reinit';
+
+const KDF_ITERATIONS = 600_000;
+const STORE = 'aas:pk';
+
+interface GateData {
+  iv: string;
+  ct: string;
+  users: { h: string; s: string; iv: string; w: string }[];
+  salt: string; // build salt for id hashing, base64
+  days: number; // session lifetime (0 = never expires)
+}
+
+const dec = (s: string) => Uint8Array.from(atob(s), (c) => c.charCodeAt(0));
+const enc = (b: ArrayBuffer | Uint8Array) => btoa(String.fromCharCode(...new Uint8Array(b)));
+
+async function sha256Hex(bytes: Uint8Array): Promise<string> {
+  const d = await crypto.subtle.digest('SHA-256', bytes as BufferSource);
+  return [...new Uint8Array(d)].map((b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+async function deriveKek(password: string, salt: Uint8Array): Promise<CryptoKey> {
+  const base = await crypto.subtle.importKey('raw', new TextEncoder().encode(password), 'PBKDF2', false, [
+    'deriveKey',
+  ]);
+  return crypto.subtle.deriveKey(
+    { name: 'PBKDF2', hash: 'SHA-256', salt: salt as BufferSource, iterations: KDF_ITERATIONS },
+    base,
+    { name: 'AES-GCM', length: 256 },
+    false,
+    ['decrypt'],
+  );
+}
+
+async function aesDecrypt(keyBytes: Uint8Array | CryptoKey, iv: Uint8Array, data: Uint8Array): Promise<ArrayBuffer> {
+  const key =
+    keyBytes instanceof CryptoKey
+      ? keyBytes
+      : await crypto.subtle.importKey('raw', keyBytes as BufferSource, 'AES-GCM', false, ['decrypt']);
+  return crypto.subtle.decrypt({ name: 'AES-GCM', iv: iv as BufferSource }, key, data as BufferSource);
+}
+
+function storedKey(days: number): Uint8Array | null {
+  try {
+    const raw = localStorage.getItem(STORE);
+    if (!raw) return null;
+    const { k, t } = JSON.parse(raw) as { k: string; t: number };
+    if (days > 0 && Date.now() - t > days * 86_400_000) {
+      localStorage.removeItem(STORE);
+      return null;
+    }
+    return dec(k);
+  } catch {
+    return null;
+  }
+}
+
+function clearSession(): void {
+  try {
+    localStorage.removeItem(STORE);
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Swap the gate for the decrypted HTML; re-run inline scripts; notify re-init hooks. */
+function inject(gate: HTMLElement, html: string, logoutLabel: string): void {
+  const host = document.createElement('div');
+  host.innerHTML = html;
+  // innerHTML-injected <script> tags don't execute — recreate each one so
+  // classic/inline scripts run (hoisted module scripts re-init via the event).
+  host.querySelectorAll('script').forEach((old) => {
+    const s = document.createElement('script');
+    for (const a of old.attributes) s.setAttribute(a.name, a.value);
+    s.textContent = old.textContent;
+    old.replaceWith(s);
+  });
+  // A discreet logout control above the content.
+  const bar = document.createElement('div');
+  bar.className = 'aas-private-bar';
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'aas-private-logout';
+  btn.textContent = `\u{1F513} ${logoutLabel}`;
+  btn.addEventListener('click', () => {
+    clearSession();
+    location.reload();
+  });
+  bar.appendChild(btn);
+  gate.replaceWith(bar, ...host.childNodes);
+  document.dispatchEvent(new CustomEvent(PRIVATE_DECRYPTED_EVENT));
+}
+
+async function tryDecrypt(gate: HTMLElement, data: GateData, keyBytes: Uint8Array, logoutLabel: string): Promise<boolean> {
+  try {
+    const html = new TextDecoder().decode(await aesDecrypt(keyBytes, dec(data.iv), dec(data.ct)));
+    inject(gate, html, logoutLabel);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Wire one gate element (PrivateGate renders exactly one per page). */
+export async function mountGate(gate: HTMLElement): Promise<void> {
+  const data = JSON.parse(gate.querySelector('[data-private-data]')!.textContent!) as GateData;
+  const logoutLabel = gate.dataset.logoutLabel ?? 'Log out';
+
+  // Already logged in on this device → decrypt with no form flash. A failure
+  // means the master secret rotated: drop the stale key and show the form.
+  const cachedK = storedKey(data.days);
+  if (cachedK && (await tryDecrypt(gate, data, cachedK, logoutLabel))) return;
+  if (cachedK) clearSession();
+  gate.querySelector<HTMLElement>('[data-private-form]')!.hidden = false;
+
+  const form = gate.querySelector('form')!;
+  const error = gate.querySelector<HTMLElement>('[data-private-error]')!;
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    error.hidden = true;
+    const idInput = form.querySelector<HTMLInputElement>('input[name="id"]')!;
+    const pwInput = form.querySelector<HTMLInputElement>('input[name="password"]')!;
+    const button = form.querySelector<HTMLButtonElement>('button[type="submit"]')!;
+    button.disabled = true;
+    try {
+      const id = idInput.value.trim().toLowerCase();
+      const salt = dec(data.salt);
+      const idBytes = new TextEncoder().encode(id);
+      const joined = new Uint8Array(salt.length + idBytes.length);
+      joined.set(salt);
+      joined.set(idBytes, salt.length);
+      const h = await sha256Hex(joined);
+      const user = data.users.find((u) => u.h === h);
+      if (user) {
+        const kek = await deriveKek(pwInput.value, dec(user.s));
+        try {
+          const k = new Uint8Array(await aesDecrypt(kek, dec(user.iv), dec(user.w)));
+          if (await tryDecrypt(gate, data, k, logoutLabel)) {
+            try {
+              localStorage.setItem(STORE, JSON.stringify({ k: enc(k), t: Date.now() }));
+            } catch {
+              /* private browsing — session just won't persist */
+            }
+            return;
+          }
+        } catch {
+          /* wrong password (unwrap failed) — fall through to the error */
+        }
+      }
+      error.hidden = false;
+    } finally {
+      button.disabled = false;
+    }
+  });
+}