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 <em>Lilith</em> 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 · <title>, italic subtitle, and card count badge (" 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
• Section VIII (Atelier) maps to: ../11-atelier/atelier.md and siblings
• Section III (Six rooms) maps to: ../03-tara/tara.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)