Web Page Composition

Showing 3 of 7

1. 1 Entry point → Page mapping

   Every user story maps to at least one page entry point (route).
   The entry point defines: route pattern, page name, metadata template.
   Check application.yml router for existing routes before creating new ones.
   Decision #0047: Page & Endpoint are APPLICATION-level with required metadata.

   entry_points:
     - route: "/composer"
       page_name: composer
       stories: [US-001, US-002]

2. 2 Page → Template (reuse-first, package-owned)

   Templates define the page-level layout structure. They belong to PACKAGES,
   not applications (Decision #0041). Before creating a new template:
   1. Run: sbx packages list --platform sveltekit --with-usage
      → Shows all packages, their exports, and REAL import/usage snippets from live pages
      → Copy the import pattern directly — don't guess or reinvent
   2. Search @sbx/core-ui sections for existing templates
   3. Search project-level packages (e.g. land-canvas-kit for LandCanvas)
   4. Check if an existing template can be composed (nested composition allowed)
   5. Only create new if no match — define at package level
   
   Max template nesting depth: 3 levels. Beyond that → split into pages.

   # Run discovery first:
   sbx packages list --platform sveltekit --with-usage
   # → shows land-canvas-kit with Canvas, LayerPanel, PropertyInspector exports
   # → shows import snippets from existing pages you can copy directly
   
   # Then reference:
   template: ComposerTemplate (from land-canvas-kit)
   
   # Or compose from @sbx/core-ui:
   template: DashboardTemplate
     composes: [HeaderTemplate, SidebarTemplate]

3. 3 Template → Layout (spatial composition)

   Layouts define spatial regions within a template. They handle responsive
   breakpoints (mobile/tablet/desktop) and landmark roles.
   Search existing layouts before creating new ones — see sbx packages list output from step 2.
   @sbx/core-ui sections include: Sidebar, NavBar, CollapsibleSidebar, EntityDetailTemplate, Canvas, ...
   Map each layout region to the PD layer entity structure.

   layout: SidebarLayout
     regions:
       sidebar: { width: 280px, collapsible: true }
       main: { flex: 1 }
       toolbar: { position: top, height: 48px }