--- path: /lilith surface: customer domain: lilith auth: anon source: apps/oshun/web/src/app/lilith/page.tsx status: walked last_walked: '2026-05-29 automated runtime walk (Playwright headless) — render, /v1 data (2xx), console/page-errors, expected content, screenshot verified; live screen-reader, touch, offline, and telemetry-delivery checks pending a manual AT pass. Evidence: WALKTHROUGH/results/runtime-sweep-2026-05-29.md; content re-verified 2026-06-03 against current source' --- # Lilith · the index ## Purpose Public design-system showcase — "every page, in one place." A broadsheet card grid that catalogs every shipped Lilith surface (Vol. I · No. 1) across ten sections: public/marketing, customer/today, six rooms, Veritas depth, Nisaba depth, Arete depth, Metis depth, atelier, operator, and mobile/tablet/system pages. Each card links to a real route. `/lilith` is included in `src/proxy.ts` PUBLIC_PATHS (~line 34) so the route is reachable without auth. ## Entry points - **Direct URL / bookmark** — yes (public; no auth required) - **Lilith design-system review** — used by editorial / design reviewers as the cream-paper newspaper-grade specimen catalog - **Footer / system links** from other Lilith surfaces — verify exact references ## Layout regions `LilithIndexPage` (`apps/oshun/web/src/app/lilith/page.tsx`) renders inside `LWebShell` with `LCustomerNav active="library"`. - **Masthead** (`LMasthead`): - left: "Vol. I · No. 1" - right: " surfaces" - kicker: "Every page, in one place" - title: `The Lilith index.` - **Lede**: centred italic copy describing the catalog (ten sections, every card is a real route; `/system` for live specimen sheet, `/system/edge-states` for calm-under-stress gallery) - **`LDoubleRule`** - **Ten section panels** (one per Roman numeral I–X), each with: - section header with eyebrow `I · `, italic subtitle, and card count badge ("<N> cards") - card grid (2–4 columns) of route cards rendered by the local `CardRow` component - **Footer line** — `<totalCards> routes · cream paper · single terracotta accent / Source · apps/oshun/web/src/components/lilith/ / End of index ◊` ### Sections (counts derived from `SECTIONS` in the page file) - **I · Public · marketing** — 4 cards: `01 /landing`, `02 /legal/lilith`, `03 /legal/lilith/privacy`, `04 /status` - **II · Customer · today** — 2 cards: `05 /`, `06 /system` - **III · The six rooms** — 6 cards: `07 /tara`, `08 /arete`, `09 /veritas`, `10 /nyx`, `11 /nisaba`, `12 /metis` - **IV · Veritas · depth** — 8 cards: `/veritas/claim`, `/veritas/source`, `/veritas/story`, `/veritas/counterclaims`, `/veritas/topic`, `/veritas/provenance`, `/veritas/retraction`, `/veritas/mobile` - **V · Nisaba · depth** — 8 cards - **VI · Arete · depth** — 8 cards - **VII · Metis · depth** — 4 cards - **VIII · The atelier** — 6 cards: `41 /atelier`, `42 /atelier/image`, `43 /atelier/audio`, `44 /atelier/video`, `45 /atelier/forms`, `46 /atelier/motion` - **IX · Operator** — 5 cards: `47 /operator`, `48 /operator/studio`, `49 /operator/tenant`, `50 /operator/admin`, `51 /operator/metis` - **X · Mobile · tablet · system** — 6 cards: `52 /mobile`, `53 /tablet`, `54 /system/edge-states`, `55 /system/emails`, `56 /system/og`, `57 /switcher` ## States - [ ] **Loading** — pure server component; no async data; verify whether a `loading.tsx` exists adjacent to `page.tsx` - [ ] **Populated** — all 57 cards render with `href`, `num`, `title`, `caption`, `meta`, optional domain glyph - [ ] **Anonymous user** — route is in PUBLIC_PATHS; visible without sign-in - [ ] **Signed-in user** — same rendering; verify customer nav reflects auth - [ ] **Error** — N/A; static - [ ] **Offline** — static markup; renders offline once cached - [ ] **Standalone PWA** — safe-area at top - [ ] **Reduced motion** — only a `transition: 'background 0.15s'` per card; verify whether `prefers-reduced-motion` should disable this - [ ] **Narrow viewport** — section grids are 2–4 columns; verify mobile collapse (no explicit media queries; `cols = min(4, max(2, count ≥ 4 ? 4 : count))`) ## Interactions ### Masthead - [ ] **Right counter** — auto-computed `totalCards`; read-only ### Each card row (`CardRow`, anchor element) - [ ] **Card link** (anchor `<Link href={card.href}>`) - Function: navigates to the target route - Keyboard: Tab focuses; Enter activates - Screen reader: announces the title, caption, meta, href - Touch target: ≥ 168 px min-height per card (well above 44 px) - Hover: background transition 0.15s - [ ] **Domain glyph** (`LDomainMark`, when `card.domain` present) — verify that domain-tagged cards (rooms section: tara, arete, veritas, nyx, nisaba, metis) display the correct glyph - [ ] **Card number** (`LCode`, accent) — read-only badge ### Section header - [ ] **Section eyebrow** (`LEyebrow`) — Roman numeral + title (e.g., "I · Public · marketing") - [ ] **Section subtitle** — italic SERIF - [ ] **Card count badge** — read-only ## Data & contracts - **Reads**: in-file constants `SECTIONS` — no external data - **Writes**: none - **Realtime**: none - **Caching**: fully static; server-rendered at request time but deterministic - **Auth/role check**: `src/proxy.ts` `PUBLIC_PATHS` includes `/lilith` — signed-in not required ## Cross-references - Sibling Lilith Studio surface (different shell): [`lilith-studio.md`](./lilith-studio.md) - Section VIII (Atelier) maps to: [`../11-atelier/atelier.md`](../11-atelier/atelier.md) and siblings - Section III (Six rooms) maps to: [`../03-tara/tara.md`](../03-tara/tara.md), [`../06-nyx/nyx.md`](../06-nyx/nyx.md), etc. - Public-path gating: `apps/oshun/web/src/proxy.ts` (PUBLIC_PATHS; `/lilith` ~line 34 — there is no `middleware.ts`) - Component source: `apps/oshun/web/src/app/lilith/page.tsx` (`LilithIndexPage` + `CardRow`) ## Open questions / known gaps - [ ] Confirm whether `/lilith` is meant to be link-discoverable from any surface or strictly a developer / editorial bookmark - [ ] Verify all 57 routes still resolve — section IX (Operator) is owned by another folder; section IV–VII depth surfaces should exist as siblings - [ ] Document mobile collapse behaviour (the layout is hard-coded `repeat (<cols>, 1fr)` without media queries)