---
path: /tablet
surface: customer
domain: discovery
auth: signed-in
source: apps/oshun/web/src/app/tablet/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'
---

# 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`](./mobile.md)
- System specimen: [`../13-system/system.md`](../13-system/system.md)
- System verify (responsive viewport plates):
  [`../13-system/system-verify.md`](../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