---
path: /system/edge-states
surface: customer
domain: system
auth: anon
source: apps/oshun/web/src/app/system/edge-states/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; primitive labels/content,
  placeholder button semantics, public access, reduced-motion static state, and
  telemetry absence refreshed 2026-06-27 in
  apps/oshun/web/e2e/system-edge-states-gallery.spec.ts'
---

# System · Edge States

## Purpose

Showcase of the Lilith edge-state primitives — what each room shows "when the
page is not what you expected." Renders the `EdgeStateGallery` composition
exported from `apps/oshun/web/src/components/lilith/system-pages.tsx`.

## Entry points

- Engineering / design bookmarks
- Sibling: `/system`, `/system/emails`, `/system/og`, `/system/verify`
- Direct URL / bookmark — yes (anonymous; `/system/edge-states` is public)

## Layout regions

`page.tsx` is `<EdgeStateGallery />`. From the gallery composition in
`system-pages.tsx`, the layout is a single `LWebShell` with an
`LCustomerNav active="today"` header and a 2-column gallery grid under
`LSectionHead`:

- **Header (shell)**: `LWebShell` with `LCustomerNav active="today"`
- **Section head**: kicker "System · XI · edge states", title "When the page is
  not what you expected."
- **2-column grid** of static edge-state showcases. Each cell pairs an
  `LEyebrow` label with a paper card or primitive:
  - **Skeleton · dotted rule** — `<LSkeleton lines={4} />`; four dotted rule
    lines, no shimmer
  - **Empty · editorial** — `Library · empty`, `No marks yet.`, body
    `Read a story, mark a passage. Your marginalia will live here.`, and a
    placeholder `LBtn` label `Open today’s edition`
  - **Error · stamped notice** — `Notice · E.04`, `logged · 14:22`,
    `We couldn't reach the archive.`, locally saved/sync body copy, and a
    placeholder `LBtn` label `Retry now`
  - **Offline · banner** — `Offline`, body
    `Reading what you already have. Saved since 14:08.`, and an offline
    `LSyncDot`
  - **PWA update · ribbon** — `A new edition.`, version `v2.4.1`, and a styled
    `Reload` span
  - **Partial failure** — `Partial · 3 of 4 loaded`, body
    `Showing what loaded. Missing: Veritas · today's claim.`, and a styled
    `Retry` span
  - **Sync dots** — `live`, `queued · 3`, and `offline`
  - **Validation pills** — `Saved · 14:22`, `Needs a source`,
    `Citation does not resolve`, and `Auto-saved as you type`

## States

- [x] **Default** — all eight primitive families render with the exact labels
      and fixture copy listed above
- [x] **Reduced motion** — no CSS keyframe animation is present inside the
      edge-state gallery under `prefers-reduced-motion: reduce`
- [ ] **Standalone PWA** — should render cleanly

## Interactions

Showcase surface. The page renders action-looking controls for visual review,
but no gallery action is wired to navigation, retry, reload, persistence, or a
network call.

- [x] **`LEmpty` action button** (`Open today’s edition`) — placeholder `LBtn`;
      rendered as a `<button>` with `aria-disabled="true"`,
      `data-placeholder="true"`, and tooltip `No handler wired — placeholder`
- [x] **`LError` action button** (`Retry now`) — placeholder `LBtn` with the
      same disabled-placeholder semantics
- [x] **`LOffline` retry button** — absent; the offline primitive renders only
      copy plus an `offline` sync dot
- [x] **PWA `Reload` affordance** — styled `<span>`, not a button or anchor
- [x] **Partial-failure `Retry` affordance** — styled `<span>`, not a button or
      anchor

## Data & contracts

- **Reads**: none from services; composed from hardcoded fixture props inside
  `EdgeStateGallery` plus Lilith edge-state primitives
- **Writes**: none
- **Realtime**: none
- **Caching**: SSR static; SW cache
- **Auth/role check**: anon — `/system/edge-states` is in
  `apps/oshun/web/src/proxy.ts` `PUBLIC_PATHS` (~line 36), so it is reachable
  without signing in
- **Metadata**: `title: 'System · edge states'`,
  `description: 'When the page is not what you expected — skeleton, empty, error, offline, partial.'`,
  `alternates.canonical: '/system/edge-states'`

## Cross-references

- Sibling specimens:
  - [`system.md`](./system.md)
  - [`system-emails.md`](./system-emails.md)
  - [`system-og.md`](./system-og.md)
  - [`system-verify.md`](./system-verify.md)
- Live consumers of these primitives:
  - Home: [`../02-home-discovery/home.md`](../02-home-discovery/home.md)
- Component sources:
  - `apps/oshun/web/src/components/lilith/system-pages.tsx` (`EdgeStateGallery`)
  - Primitives: `LSkeleton`, `LEmpty`, `LError`, `LOffline`, `LPwaUpdate`,
    `LPartialFailure`, `LSyncDot`, `LValidationPill`

## Automated coverage

- `apps/oshun/web/e2e/lilith-public-routes.spec.ts`
  - Public `/system/edge-states` render smoke with no auth redirect
- `apps/oshun/web/e2e/system-edge-states-gallery.spec.ts`
  - Anonymous direct render of `/system/edge-states`
  - Header, two-column grid, all eight primitive labels, and expected fixture
    copy
  - Four skeleton dotted-rule lines
  - Placeholder semantics for the two rendered `LBtn` controls
  - Absence of real links and non-placeholder buttons inside the gallery
  - `Reload` and partial `Retry` rendered as spans, not controls
  - Sync dot labels and validation pill labels
  - No telemetry attributes in the gallery content
  - Reduced-motion static state: no keyframe animation inside the gallery

## Open questions / known gaps

- [x] Read full `EdgeStateGallery` body in `system-pages.tsx`; the current
      variants are skeleton, empty, error, offline, PWA update, partial failure,
      sync dots, and validation pills.
- [x] Resolved: gating is public — `/system/edge-states` is in `src/proxy.ts`
      `PUBLIC_PATHS` (~line 36)
- [x] Document the complete primitive list and per-domain accent usage: this
      gallery uses Lilith's default system palette only, with no per-domain
      accent variants.
- [ ] Drift risk: when shipping pages change their edge-state usage, this
      gallery must be regenerated
- [x] Confirm action buttons inside primitives are no-op vs functional: both
      `LBtn` instances are placeholder buttons with no `href`/handler; `Reload`
      and partial `Retry` are spans.