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#

• Default — all eight primitive families render with the exact labels and fixture copy listed above
• 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.

• 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
• LError action button (Retry now) — placeholder LBtn with the same disabled-placeholder semantics
• LOffline retry button — absent; the offline primitive renders only copy plus an offline sync dot
• PWA Reload affordance — styled <span>, not a button or anchor
• 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-emails.md
  • system-og.md
  • system-verify.md
• Live consumers of these primitives:
  • Home: ../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#

• 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.
• Resolved: gating is public — /system/edge-states is in src/proxy.ts PUBLIC_PATHS (~line 36)
• 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
• 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.