Tablet · Three Native Boards

Purpose#

Specimen page showing three tablet boards at their own native viewports (768 home, 1366 Veritas broadsheet, 1024 Nisaba reading desk). Demonstrates that tablet is composed for its canvas — not a media-query autofit of desktop.

Entry points#

• Design-system index: /system
• Mobile specimen sibling: /mobile
• Direct URL / bookmark — yes (auth required; verify gating)

Layout regions#

page.tsx is a server component composed entirely of Lilith primitives. Mounts an LWebShell with an LCustomerNav active="library" header strip and a single 1400px-max page column.

• LWebShell chrome: shell layout with the customer-nav strip, Library tab active (visual hint, not functional)
• Page column (padding: '32px 56px 80px', max-width: 1400):
  • LMasthead: kicker "The pages, between", title "The tablet" (italicised), left label "Specimen · Lilith tablet", right label "three viewports"
  • LCard "About these boards": cream-paper card with an LEyebrow and a short italic paragraph explaining the three native canvases
  • Three-board horizontal scroller (overflow-x: auto):
    • Board I: Tablet768Home — "I · 768 · home" caption "Cover home — masthead, drop-cap lede, four-up today, sky strip, Arete bar."
    • Board II: Tablet1366Veritas — "II · 1366 · Veritas" caption "True broadsheet — 4-col body with claims rail and source list."
    • Board III: Tablet1024Nisaba — "III · 1024 · Nisaba" caption "Reading desk — Greek term, etymology, marginalia, primary citations."
  • Each board renders inside its own <div> with a label row above (JetBrains-mono kicker in accent + italic serif caption)

States#

• Default — masthead + about card + three boards in a row
• Wide desktop — boards may sit visible side by side
• Narrow desktop / tablet — horizontal scroll engages on the board row
• Mobile — verify layout degrades to vertical stack; horizontal scroller dominates the viewport
• Reduced motion — no animations on this surface
• Standalone PWA — should render cleanly

Interactions#

Specimen surface — none of the boards are interactive.

• Board scroller — horizontal scroll on touch / wheel; verify overflow-x: auto enables this on touch devices
• Individual boards (Tablet768Home, Tablet1366Veritas, Tablet1024Nisaba) — read-only mockups
• LCustomerNav active="library" — the nav strip is rendered for shell context but its tabs are not the focus of this page; verify whether the nav items still navigate when clicked

Data & contracts#

• Reads: none — purely composed of Lilith primitives and static board components
• Writes: none
• Realtime: none
• Caching: SSR static; SW cache
• Auth/role check: not in PUBLIC_PREFIXES; signed-in only
• Metadata: title: 'Tablet · three boards', description: 'Three tablet boards at native viewport: 768 cover home, 1366 broadsheet Veritas, 1024 reading-desk Nisaba.', alternates.canonical: '/tablet'

Cross-references#

• Mobile specimen: mobile.md
• System specimen: ../13-system/system.md
• System verify (responsive viewport plates): ../13-system/system-verify.md
• Component sources:
  • apps/oshun/web/src/components/lilith/tablet.tsx (Tablet768Home, Tablet1366Veritas, Tablet1024Nisaba all exported from this single file)
  • apps/oshun/web/src/design-system/lilith (LWebShell, LCustomerNav, LMasthead, LCard, LEyebrow)

Open questions / known gaps#

• LCustomerNav active="library" is mounted but Library is not the tablet's subject — confirm whether nav clicks navigate or are neutered on this specimen
• Confirm middleware gating — public or signed-in?
• Boards may drift from production tablet renders; document the update cadence
• No reduced-motion or print stylesheet specific to this specimen; verify behaviour