@ossy/app 1.40.3 → 3.0.1

package/README.md

@@ -70,6 +70,12 @@ export default {
 }
 ```
 
+Optional flags:
+
+| Key | Default | Purpose |
+|-----|---------|---------|
+| `enablePushInvalidation` | `false` | App-wide SSE cache invalidation. Prefer `<PushInvalidationSubscriber />` on specific pages instead — see [@ossy/sdk-react README](../sdk-react/README.md#push-invalidation). |
+
 Config is loaded at build time and merged with request-time settings (e.g. user theme preference from cookies).
 
 ## API routes

package/cli/get-platform-files.task.js

@@ -40,7 +40,7 @@ export const TRANSLATIONS_FILE_PATTERN = /\.translations\.json$/
  * @property {PlatformEntry[]} forms         Discovered `*.form.{js,mjs,cjs}` entries.
  * @property {PlatformEntry[]} e2es          Discovered `*.e2e.{js,mjs,cjs}` entries (installed packages only).
  * @property {PlatformEntry[]} flows         Discovered `*.flow.{js,mjs,cjs}` entries (installed packages only).
- * @property {PlatformEntry[]} layouts       Discovered `*.layout.{jsx,tsx,...}` entries (app root `src/` only — never from installed packages).
+ * @property {PlatformEntry[]} layouts       Discovered `*.layout.{jsx,tsx,...}` entries (app and installed packages).
  */
 export function discoverFilesByPattern (srcDir, filePattern) {
   const dir = path.resolve(srcDir)
@@ -183,8 +183,7 @@ export function discoverInstalledPackageEntries (projectRoot) {
       ...discoverFilesByPattern(packageSrcDir, FORM_FILE_PATTERN),
       ...discoverFilesByPattern(packageSrcDir, E2E_FILE_PATTERN),
       ...discoverFilesByPattern(packageSrcDir, FLOW_FILE_PATTERN),
-      // Layouts are intentionally excluded: *.layout.jsx is an app-level
-      // primitive only. Feature packages must never define layouts.
+      ...discoverFilesByPattern(packageSrcDir, LAYOUT_FILE_PATTERN),
     ]
     for (const sourcePath of files) {
       const stat = fs.statSync(sourcePath)
@@ -237,9 +236,8 @@ export default async function getPlatformFiles (srcDir) {
   // from the local `src/` — to avoid pulling in per-project duplicates of the
   // same aggregate class or test suite that is canonically owned by the feature
   // package.
-  // Layouts are the opposite restriction: they are only discovered from the
-  // app's own `src/`, never from installed packages. Feature packages are pure
-  // content (pages, actions, tasks, etc.) and must never define layouts.
+  // Layouts are discovered from the app's `src/` and from installed packages
+  // (`@ossy/app` ships default layouts via `ossy.src`).
   const localFiles = [
     ...discoverFilesByPattern(srcDir, PAGE_FILE_PATTERN),
     ...discoverFilesByPattern(srcDir, API_FILE_PATTERN),

package/cli/manifest-plugin.js

@@ -14,6 +14,11 @@ import {
   CAPABILITY_SCHEMA_ID,
 } from '@ossy/schema'
 import { isCanonicalSchemaId } from '@ossy/schema'
+import {
+  resolvePageLayoutId,
+  resolvePageShellSlots,
+  isCanonicalLayoutId,
+} from '../src/manifest/resolve-page-layout.js'
 
 /**
  * @typedef {import('./get-platform-files.task.js').PlatformEntry} PlatformEntry
@@ -86,7 +91,7 @@ import { isCanonicalSchemaId } from '@ossy/schema'
  * @property {string} entry        URL the platform serves the form bundle from.
  *
  * @typedef {object} LayoutManifestEntry
- * @property {string} id      Unique layout id (e.g. `'app-shell'`).
+ * @property {string} id      Canonical layout id (e.g. `'@ossy/app/layout/default'`).
  * @property {string} entry   URL the platform serves the layout bundle from.
  * @property {Record<string, string>} [slots]
  *   App-controlled slot map (`slotName` → component `metadata.id`), from `export const slots` in `*.layout.jsx`.
@@ -164,6 +169,17 @@ function entryPackage (entryInfo, appPackageName) {
   return entryInfo.packageName || appPackageName
 }
 
+/** Repo-relative path for Storybook / dev tooling (Vite source imports). */
+function manifestSourcePath (entryInfo, projectRoot) {
+  if (!entryInfo?.sourcePath || !projectRoot) return undefined
+  return path.relative(projectRoot, entryInfo.sourcePath).split(path.sep).join('/')
+}
+
+function withSourcePath (obj, entryInfo, projectRoot) {
+  const sourcePath = manifestSourcePath(entryInfo, projectRoot)
+  return sourcePath ? { ...obj, sourcePath } : obj
+}
+
 export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configValue, appPackageName = '@ossy/app', manifestPath, projectRoot }) {
   return {
     name: 'ossy-manifest',
@@ -205,6 +221,8 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
       /** @type {LayoutManifestEntry[]} */
       const layouts = []
       const seenLayoutIds = new Set()
+      /** @type {Map<string, { rawMeta: object, packageName: string }>} */
+      const pageMetaById = new Map()
       /** @type {Array<{ mod: object, entryInfo: import('./get-platform-files.task.js').PlatformEntry, url: string, pkg: string }>} */
       const taskPending = []
       for (const fileName of Object.keys(bundle)) {
@@ -256,7 +274,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate integration id "${integrationId}"`)
           }
           seenIntegrationIds.add(integrationId)
-          integrations.push({ id: integrationId, entry: url, credentials, package: entryPackage(entryInfo, appPackageName) })
+          integrations.push(withSourcePath({ id: integrationId, entry: url, credentials, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
           continue
         }
 
@@ -279,7 +297,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate startup id "${startupId}"`)
           }
           seenStartupIds.add(startupId)
-          startups.push({ id: startupId, entry: url, package: entryPackage(entryInfo, appPackageName) })
+          startups.push(withSourcePath({ id: startupId, entry: url, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
           continue
         }
 
@@ -303,7 +321,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate email id "${emailId}"`)
           }
           seenEmailIds.add(emailId)
-          emails.push({ id: emailId, entry: url, package: entryPackage(entryInfo, appPackageName) })
+          emails.push(withSourcePath({ id: emailId, entry: url, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
           continue
         }
 
@@ -330,7 +348,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             entryInfo.sourcePath,
           )
           seenActionIds.add(actionId)
-          actions.push({ id: actionId, entry: url, access, package: entryPackage(entryInfo, appPackageName) })
+          actions.push(withSourcePath({ id: actionId, entry: url, access, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
           continue
         }
 
@@ -352,12 +370,12 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate form id "${formId}"`)
           }
           seenFormIds.add(formId)
-          forms.push({
+          forms.push(withSourcePath({
             id: formId,
             schemaId,
             entry: url,
             package: entryPackage(entryInfo, appPackageName),
-          })
+          }, entryInfo, projectRoot))
           continue
         }
 
@@ -381,7 +399,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate aggregate id "${aggregateId}"`)
           }
           seenAggregateIds.add(aggregateId)
-          aggregates.push({ id: aggregateId, entry: url, package: entryPackage(entryInfo, appPackageName) })
+          aggregates.push(withSourcePath({ id: aggregateId, entry: url, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
           continue
         }
 
@@ -409,13 +427,13 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate e2e id "${e2eId}"`)
           }
           seenE2eIds.add(e2eId)
-          e2es.push({
+          e2es.push(withSourcePath({
             id: e2eId,
             feature: typeof feature === 'string' ? feature : '',
             requires: Array.isArray(requires) ? requires : [],
             entry: url,
             package: entryPackage(entryInfo, appPackageName),
-          })
+          }, entryInfo, projectRoot))
           continue
         }
 
@@ -439,26 +457,36 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate flow id "${flowId}"`)
           }
           seenFlowIds.add(flowId)
-          flows.push({
+          flows.push(withSourcePath({
             id: flowId,
             feature: typeof feature === 'string' ? feature : '',
             requires: Array.isArray(requires) ? requires : [],
             entry: url,
             package: entryPackage(entryInfo, appPackageName),
-          })
+          }, entryInfo, projectRoot))
           continue
         }
 
-        // Layouts wrap every page render. The bundle exports `id` and a default
-        // export (the React component). Only one `*.layout.jsx` per app is
-        // supported. They don't produce routable entries; they accumulate into
-        // `manifest.layouts` so the server can inject them at render time.
+        // Layouts wrap page renders. The bundle exports metadata.id, optional slots,
+        // and a default export (the React component). They accumulate into
+        // `manifest.layouts` so the server can inject them at render time per page.
         if (entryInfo.kind === 'layout') {
-          const layoutId = mod && mod.id
+          const layoutMeta = mod?.metadata ?? {}
+          const layoutId =
+            typeof layoutMeta.id === 'string' && layoutMeta.id.trim()
+              ? layoutMeta.id.trim()
+              : typeof mod?.id === 'string'
+                ? mod.id.trim()
+                : ''
           const component = mod && mod.default
-          if (typeof layoutId !== 'string' || layoutId.trim() === '') {
+          if (!layoutId) {
+            this.error(
+              `[@ossy/app][build] layout entry ${entryInfo.sourcePath} must export metadata.id (canonical layout id)`,
+            )
+          }
+          if (!isCanonicalLayoutId(layoutId)) {
             this.error(
-              `[@ossy/app][build] layout entry ${entryInfo.sourcePath} must export a non-empty string "id"`,
+              `[@ossy/app][build] layout entry ${entryInfo.sourcePath} id must match @{provider}/{feature}/layout/{concept} — got "${layoutId}"`,
             )
           }
           if (typeof component !== 'function') {
@@ -496,12 +524,12 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
               layoutSlots[sk] = cid
             }
           }
-          layouts.push({
+          layouts.push(withSourcePath({
             id: layoutId,
             entry: url,
             package: entryPackage(entryInfo, appPackageName),
             ...(layoutSlots && Object.keys(layoutSlots).length > 0 ? { slots: layoutSlots } : {}),
-          })
+          }, entryInfo, projectRoot))
           continue
         }
 
@@ -526,7 +554,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate schema id "${schema.id}"`)
           }
           seenResourceIds.add(schema.id)
-          schemas.push({ ...schema, package: entryPackage(entryInfo, appPackageName) })
+          schemas.push(withSourcePath({ ...schema, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
           continue
         }
 
@@ -549,7 +577,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
           seenIds.task.add(taskId)
           const pkg = entryPackage(entryInfo, appPackageName)
           taskPending.push({ mod, entryInfo, url, pkg })
-          entries.push({ type: 'task', id: taskId, entry: url, package: pkg })
+          entries.push(withSourcePath({ type: 'task', id: taskId, entry: url, package: pkg }, entryInfo, projectRoot))
           continue
         }
 
@@ -570,7 +598,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
               'Assign components to app slots in `*.layout.jsx` via `export const slots`.',
             )
           }
-          components.push({ id, entry: url, package: entryPackage(entryInfo, appPackageName) })
+          components.push(withSourcePath({ id, entry: url, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
           continue
         }
 
@@ -589,13 +617,17 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             ),
             entryInfo.sourcePath,
           )
-          entries.push({
+          entries.push(withSourcePath({
             type: 'page',
             id,
             path: pagePath,
             title: rawMeta.title,
             entry: url,
             package: entryPackage(entryInfo, appPackageName),
+          }, entryInfo, projectRoot))
+          pageMetaById.set(id, {
+            rawMeta,
+            packageName: entryPackage(entryInfo, appPackageName),
           })
         } else if (entryInfo.kind === 'api') {
           // APIs have no sensible default route (unlike pages where we can
@@ -626,7 +658,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
               ...(Array.isArray(rawMeta.query) && rawMeta.query.length ? { query: rawMeta.query } : {}),
             }
           }
-          entries.push(apiEntry)
+          entries.push(withSourcePath(apiEntry, entryInfo, projectRoot))
         }
       }
 
@@ -677,18 +709,53 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
 
       const taskGraphEdges = buildTaskCatalogEdges(taskCatalog)
 
-      if (layouts.length > 1) {
-        this.error(
-          `[@ossy/app][build] Only one *.layout.jsx per app is allowed (found ${layouts.length}). ` +
-          'Use conditional rendering inside the app layout for route-specific chrome.',
-        )
-      }
-
       /** @type {Manifest} */
       const definitions = projectRoot
         ? await discoverPackageDefinitions(projectRoot)
         : {}
 
+      const layoutIdSet = new Set(layouts.map((layout) => layout.id))
+      const componentIdSet = new Set(components.map((component) => component.id))
+
+      for (const entry of entries) {
+        if (entry.type !== 'page') continue
+        const meta = pageMetaById.get(entry.id)
+        const layoutId = resolvePageLayoutId({
+          pageMetadata: meta?.rawMeta ?? {},
+          appConfig: configValue ?? {},
+        })
+        if (!layoutIdSet.has(layoutId)) {
+          this.error(
+            `[@ossy/app][build] page "${entry.id}" references layout "${layoutId}" which is not in manifest.layouts`,
+          )
+        }
+        if (!isCanonicalLayoutId(layoutId)) {
+          this.error(
+            `[@ossy/app][build] page "${entry.id}" layout must match @{provider}/{feature}/layout/{concept} — got "${layoutId}"`,
+          )
+        }
+        entry.layout = layoutId
+        const layoutDef = layouts.find((layout) => layout.id === layoutId)
+        const mergedSlots = resolvePageShellSlots({
+          layoutSlots: layoutDef?.slots,
+          appSlots: configValue?.slots,
+          pageSlots: meta?.rawMeta?.slots,
+        })
+        if (Object.keys(mergedSlots).length > 0) {
+          entry.slots = mergedSlots
+        }
+        for (const [slotKey, spec] of Object.entries(mergedSlots)) {
+          if (spec?.view === null) continue
+          const componentId = typeof spec?.view === 'string' ? spec.view.trim() : ''
+          if (!componentId) continue
+          if (!componentIdSet.has(componentId)) {
+            this.error(
+              `[@ossy/app][build] page "${entry.id}" slot "${slotKey}" references unknown component id "${componentId}"`,
+            )
+          }
+        }
+      }
+
       const manifest = {
         entries,
         components,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.40.3",
+  "version": "3.0.1",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -16,7 +16,12 @@
     "./manifest/build-actions-schema": "./src/manifest/build-actions-schema.js",
     "./manifest/build-capabilities": "./src/manifest/build-capabilities.js",
     "./manifest/discover-package-definitions": "./src/manifest/discover-package-definitions.js",
-    "./manifest/serialize-package-definition": "./src/manifest/serialize-package-definition.js"
+    "./manifest/serialize-package-definition": "./src/manifest/serialize-package-definition.js",
+    "./manifest/resolve-page-layout": "./src/manifest/resolve-page-layout.js",
+    "./runtime/merge-shell-slots": "./runtime/merge-shell-slots.js"
+  },
+  "ossy": {
+    "src": "./src/shell-registry"
   },
   "bin": {
     "app": "./cli/index.js"
@@ -44,17 +49,20 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/design-system": "^1.40.3",
-    "@ossy/locale": "^1.40.3",
-    "@ossy/pages": "^1.23.0",
-    "@ossy/platform": "^1.39.3",
-    "@ossy/router": "^1.40.3",
-    "@ossy/router-react": "^1.40.3",
-    "@ossy/schema": "^1.0.1",
-    "@ossy/sdk": "^1.40.3",
-    "@ossy/sdk-react": "^1.40.3",
-    "@ossy/themes": "^1.40.3",
-    "@ossy/workspaces": "^1.17.3",
+    "@ossy/authentication": "^3.0.1",
+    "@ossy/design-system": "^3.0.1",
+    "@ossy/locale": "^3.0.1",
+    "@ossy/package-catalog": "^3.0.1",
+    "@ossy/pages": "^3.0.1",
+    "@ossy/platform": "^3.0.1",
+    "@ossy/resources": "^3.0.1",
+    "@ossy/router": "^3.0.1",
+    "@ossy/router-react": "^3.0.1",
+    "@ossy/schema": "^3.0.1",
+    "@ossy/sdk": "^3.0.1",
+    "@ossy/sdk-react": "^3.0.1",
+    "@ossy/themes": "^3.0.1",
+    "@ossy/workspaces": "^3.0.1",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -88,5 +96,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "a0d89185a17f8de8ce328c3a648c108ff1d61d8f"
+  "gitHead": "4a70ec216448680d2fddc57b2a8a0077489720ae"
 }

package/runtime/merge-shell-slots.js

@@ -0,0 +1,148 @@
+import { CONTENT_SLOT_NAME, normalizeAppSlotName } from './resolve-app-slots.js'
+
+/**
+ * @typedef {{ view?: string | null, props: Record<string, unknown> }} ShellSlotSpec
+ */
+
+/**
+ * Coerce a manifest/runtime slot value to {@link ShellSlotSpec}.
+ *
+ * @param {string | null | ShellSlotSpec | undefined} value
+ * @returns {ShellSlotSpec | undefined}
+ */
+export function coerceShellSlotSpec (value) {
+  if (value === null) return { view: null, props: {} }
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    return trimmed ? { view: trimmed, props: {} } : undefined
+  }
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const { view, props: nestedProps, ...rest } = value
+    const propBag = {
+      ...(nestedProps && typeof nestedProps === 'object' && !Array.isArray(nestedProps) ? nestedProps : {}),
+      ...rest,
+    }
+    /** @type {ShellSlotSpec} */
+    const spec = { props: propBag }
+    if (view === null) spec.view = null
+    else if (typeof view === 'string') {
+      const trimmed = view.trim()
+      if (trimmed) spec.view = trimmed
+    }
+    return spec
+  }
+  return undefined
+}
+
+/**
+ * Apply one layer onto the accumulated slot spec (layout → app → page).
+ *
+ * - `null` / `{ view: null }` → unset
+ * - string → set view, keep inherited props
+ * - `{ …props }` → shallow-merge props, keep inherited view
+ * - `{ view, …props }` → set view + merge props
+ * - `{}` → no-op
+ *
+ * @param {ShellSlotSpec | undefined} current
+ * @param {string | null | Record<string, unknown> | undefined} value
+ * @returns {ShellSlotSpec | undefined}
+ */
+export function applyShellSlotLayer (current, value) {
+  if (value === null) {
+    return { view: null, props: {} }
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    if (!trimmed) return current
+    return {
+      view: trimmed,
+      props: current?.props ? { ...current.props } : {},
+    }
+  }
+
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    if (Object.keys(value).length === 0) {
+      return current
+    }
+
+    const { view, props: nestedProps, ...rest } = value
+    if (view === null) {
+      return { view: null, props: {} }
+    }
+
+    const restProps = {
+      ...(nestedProps && typeof nestedProps === 'object' && !Array.isArray(nestedProps) ? nestedProps : {}),
+      ...rest,
+    }
+    const nextProps = Object.keys(restProps).length > 0
+      ? { ...(current?.props ?? {}), ...restProps }
+      : { ...(current?.props ?? {}) }
+
+    /** @type {ShellSlotSpec} */
+    const next = { props: nextProps }
+    if (view !== undefined) {
+      if (typeof view === 'string') {
+        const trimmed = view.trim()
+        if (trimmed) next.view = trimmed
+      }
+    } else if (current?.view !== undefined) {
+      next.view = current.view
+    }
+
+    return next
+  }
+
+  return current
+}
+
+/**
+ * @param {ShellSlotSpec | string | null | undefined} spec
+ * @returns {boolean}
+ */
+export function shellSlotUnset (spec) {
+  const normalized = typeof spec === 'string' || spec === null ? coerceShellSlotSpec(spec) : spec
+  return normalized?.view === null
+}
+
+/**
+ * @param {ShellSlotSpec | string | null | undefined} spec
+ * @returns {string | undefined}
+ */
+export function shellSlotViewId (spec) {
+  const normalized = typeof spec === 'string' || spec === null ? coerceShellSlotSpec(spec) : spec
+  if (!normalized || normalized.view === null) return undefined
+  return typeof normalized.view === 'string' ? normalized.view : undefined
+}
+
+/**
+ * Merge shell slot maps per ADR 0012: layout defaults → app config → page metadata.
+ * Page layer wins for both view (when set) and props.
+ *
+ * @param {Record<string, string | null | Record<string, unknown>> | null | undefined} layoutSlots
+ * @param {Record<string, string | null | Record<string, unknown>> | null | undefined} appSlots
+ * @param {Record<string, string | null | Record<string, unknown>> | null | undefined} pageSlots
+ * @returns {Record<string, ShellSlotSpec>}
+ */
+export function mergeShellSlots (layoutSlots, appSlots, pageSlots) {
+  /** @type {Record<string, ShellSlotSpec>} */
+  const merged = {}
+
+  const apply = (map) => {
+    if (!map || typeof map !== 'object' || Array.isArray(map)) return
+    Object.entries(map).forEach(([rawKey, value]) => {
+      const key = normalizeAppSlotName(rawKey)
+      if (!key || key === CONTENT_SLOT_NAME) return
+      const next = applyShellSlotLayer(merged[key], value)
+      if (next !== undefined) {
+        merged[key] = next
+      }
+    })
+  }
+
+  apply(layoutSlots)
+  apply(appSlots)
+  apply(pageSlots)
+
+  return merged
+}

package/runtime/page-runtime.js

@@ -1,7 +1,8 @@
 import { createElement } from 'react'
 import { pageIdToDocumentTitleKey, resolveMessage } from '@ossy/locale'
+import { Slot } from '@ossy/design-system'
 import { App } from '../src/shell/App.jsx'
-import { resolvePageSlots } from './resolve-app-slots.js'
+import { resolvePageSlots, CONTENT_SLOT_NAME } from './resolve-app-slots.js'
 
 /**
  * Dynamically imports each component bundle listed in `entries` and returns a
@@ -11,14 +12,17 @@ import { resolvePageSlots } from './resolve-app-slots.js'
  * skipped so a broken component never prevents the page from rendering.
  *
  * @param {Array<{ id: string, entry: string }>} entries
+ * @param {(entry: string) => string} [resolveEntry] — map manifest `/static/…` paths to
+ *   absolute `file://` URLs on the server; omit in the browser (paths resolve via HTTP).
  * @returns {Promise<Record<string, import('react').ComponentType>>}
  */
-export async function loadComponents (entries = []) {
+export async function loadComponents (entries = [], resolveEntry) {
   const map = {}
+  const resolve = typeof resolveEntry === 'function' ? resolveEntry : (entry) => entry
   await Promise.all(
     entries.map(async ({ id, entry }) => {
       try {
-        const mod = await import(entry)
+        const mod = await import(resolve(entry))
         if (mod && mod.default) map[id] = mod.default
       } catch {
         // silently skip broken component bundles
@@ -29,10 +33,10 @@ export async function loadComponents (entries = []) {
 }
 
 /**
- * Dynamically imports the app's single layout bundle. Layout components cannot
+ * Dynamically imports the layout bundle for the current page. Layout components cannot
  * be serialized into the bootstrap JSON (functions are stripped), so the server
- * passes `layoutEntry` and the client loads the same module here. When present,
- * every page is wrapped — route-specific chrome is decided inside the layout.
+ * passes `layoutEntry` and the client loads the same module here. Each page may
+ * reference a different layout id (resolved at build time per ADR 0012).
  *
  * @param {string | null | undefined} layoutEntry
  * @returns {Promise<import('react').ComponentType | null>}
@@ -76,20 +80,22 @@ function resolveDocumentTitle (metadata, props) {
   return metadata.title || props.documentTitle || ''
 }
 
-function buildTree ({ Component, Layout, metadata, props }) {
+/** Page body is registered on `app:content`; layouts only gate shell chrome around it. */
+function buildTree ({ Layout, metadata, props }) {
   const lang = props.language || props.defaultLanguage || 'en'
-  const pageEl = createElement(Component, props)
-  const contentEl = Layout ? createElement(Layout, props, pageEl) : pageEl
+  const contentEl = Layout
+    ? createElement(Layout, { shellSlots: props.layoutSlots ?? {}, ...props })
+    : createElement(Slot, { view: CONTENT_SLOT_NAME })
   return createElement(
     'html',
-    { lang },
+    { lang, style: { height: '100%' } },
     createElement(
       'head',
       null,
       createElement('meta', { charSet: 'utf-8' }),
       createElement('title', null, resolveDocumentTitle(metadata, props)),
     ),
-    createElement('body', null, createElement(App, props, contentEl)),
+    createElement('body', { style: { height: '100%', margin: 0 } }, createElement(App, props, contentEl)),
   )
 }
 
@@ -127,20 +133,26 @@ export function createPageEntry (pageModule, options = {}) {
       import('node:stream'),
     ])
 
-    const { Layout = null, componentEntries = [], layoutSlots = {}, ...pageProps } = props
-    const componentsById = await loadComponents(componentEntries)
+    const {
+      Layout = null,
+      componentEntries = [],
+      layoutSlots = {},
+      resolveComponentEntry,
+      ...pageProps
+    } = props
+    const componentsById = await loadComponents(componentEntries, resolveComponentEntry)
     const PageContent = (slotProps = {}) => createElement(Component, { ...pageProps, ...slotProps })
     const components = resolvePageSlots({
       layoutSlots,
       componentsById,
       pageComponent: PageContent,
     })
-    const tree = buildTree({ Component, Layout, metadata, props: { ...pageProps, components } })
+    const tree = buildTree({ Layout, metadata, props: { ...pageProps, components, layoutSlots } })
     const bootstrapUrl = toBootstrapUrl(entryUrl)
     const bootstrapModules = bootstrapUrl ? [bootstrapUrl] : []
     // Layout is a React component — JSON.stringify drops functions, so hydration
     // would render without the shell unless we pass the serializable entry URL.
-    const { Layout: _layout, ...bootstrapProps } = props
+    const { Layout: _layout, resolveComponentEntry: _resolveComponentEntry, ...bootstrapProps } = props
     const bootstrapScriptContent =
       'window.__OSSY__=' + escapeBootstrapJson(JSON.stringify(bootstrapProps ?? {}))
 
@@ -182,7 +194,11 @@ export function createPageEntry (pageModule, options = {}) {
         componentsById,
         pageComponent: PageContent,
       })
-      hydrateRoot(document, buildTree({ Component, Layout, metadata, props: { ...pageProps, components } }))
+      hydrateRoot(document, buildTree({
+        Layout,
+        metadata,
+        props: { ...pageProps, components, layoutSlots },
+      }))
     }).catch((err) => {
       if (typeof console !== 'undefined' && typeof console.error === 'function') {
         console.error('[@ossy/app][page-runtime] Hydration failed:', err)