Knowledge · Guidelines · sveltekit

Admin Page Shell

Canonical composition for admin editor surfaces: ONE composable shell (TabbedPageShell, @sbx/core-ui) configured per root page — a config-driven heading + a route-driven tab bar whose tabs are the data view(s)/facets plus ONE canonical "Page" tab that edits the public page; page CTAs forwarded UP into the layout's persistent topbar (Save/Publish/Visit ↗); the inverse manager-only "Manage this Page ↗" CTA on the public page; and single-purpose admin pages staying bare. Listing, scaffold, and entity-detail are CONFIGURATIONS of the one shell, never separate components (Decision #0290). Keeps the two surfaces that describe one thing structurally mirrored and mutually navigable.

Metadata

sveltekit sveltekit required

Procedures

Showing 3 of 6

  1. 1 Classify the surface — listing/scaffold vs detail vs bare (APS-001 / APS-003 / APS-008 / APS-010)
    Entity facet sub-routes under one identity (Information ↔ Media)? → DETAIL:
set `surfaceRoot` + heading='sr-only' + cover/status. A public-page counterpart
with ≥2 views (a data listing + the public Page editor, or multiple facets)? →
LISTING/SCAFFOLD, mount the shell with tabs. One editor only, or no public twin?
→ BARE (no tab strip). A public twin with a single admin editor and no listing
is still BARE + Visit, not a one-tab shell.
  2. 2 Name the tabs (APS-002 / APS-004)
    List the real sub-routes as TabEntry[]. The public-page editor tab is labelled
exactly "Page". Each tab href must point at a route that RENDERS (add it to the
nav route-label map; no redirect stubs). The Page-tab route imports the shared
editor component — never a clone.
  3. 3 Configure TabbedPageShell at +layout.svelte (APS-001 / APS-005)
    Import from '@sbx/core-ui/components/layouts'. Pass { title, tabs } plus the
heading mode: 'visible' (+ titleScale) for listing/scaffold; 'none' when the
Page-tab editor renders its own header/toolbar; 'sr-only' for detail mode (with
surfaceRoot + cover + status). The shell renders the routed child via
{@render children()}.