@ossy/app 1.39.6 → 1.39.7

package/cli/build.task.js

@@ -137,14 +137,8 @@ function generateResourceStub ({ stubAbs, sourceAbs }) {
 }
 
 // Components are re-exported as-is — the manifest plugin reads `metadata.id`
-// and the optional `slot` export from the bundled output. Components don't get
-// route stubs or hydration bootstrapping; they're loaded on-demand at runtime.
-// The `slot` export (when present) identifies the named shell slot this
-// component fills automatically — see PlatformShell for the slot registry.
-// We use `export *` for named exports rather than an explicit list because
-// `slot` is optional: some components don't export it, and a static named
-// re-export of a binding that doesn't exist causes a Rollup MISSING_EXPORT
-// error at build time.
+// from the bundled output. Shell placement is app-controlled via `export const slots`
+// in `*.layout.jsx`, not `export const slot` on components.
 function generateComponentStub ({ stubAbs, sourceAbs }) {
   const importPath = relImport(stubAbs, sourceAbs)
   return [
@@ -261,6 +255,15 @@ async function loadConfig (configPath) {
   return mod.default || {}
 }
 
+function readAppPackageName (cwd) {
+  try {
+    const pkgJson = JSON.parse(fs.readFileSync(path.join(cwd, 'package.json'), 'utf8'))
+    return typeof pkgJson.name === 'string' && pkgJson.name.trim() ? pkgJson.name : '@ossy/app'
+  } catch {
+    return '@ossy/app'
+  }
+}
+
 export async function build (cliArgs = []) {
   arg(
     {
@@ -317,6 +320,7 @@ export async function build (cliArgs = []) {
 
   const configPath = path.resolve(srcDir, 'config.js')
   const configValue = await loadConfig(configPath)
+  const appPackageName = readAppPackageName(cwd)
 
   const middlewareSrc = path.resolve(srcDir, 'middleware.js')
   if (fs.existsSync(middlewareSrc)) {
@@ -374,6 +378,7 @@ export async function build (cliArgs = []) {
         srcDir,
         staticOutDir,
         configValue,
+        appPackageName,
         manifestPath: path.join(buildPath, 'manifest.json'),
       }),
     ],

package/cli/manifest-plugin.js

@@ -24,6 +24,9 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  *   The serializable config object (typically `src/config.js`'s default
  *   export). Inlined under `manifest.config` so the platform server doesn't
  *   need a runtime `import('./config.js')`.
+ * @property {string} appPackageName
+ *   npm package name of the app being built (e.g. `@ossy/app-test`). Used as
+ *   the `package` field on manifest entries that live in the app `src/` tree.
  * @property {string} manifestPath
  *   Absolute path to write the manifest to (typically `build/manifest.json`).
  *
@@ -41,12 +44,6 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  * @typedef {object} ComponentManifestEntry
  * @property {string} id      Unique component id (from `metadata.id`).
  * @property {string} entry   URL the platform serves the component bundle from.
- * @property {string} [slot]  Named shell slot this component fills (from `export const slot`).
- *
- * @typedef {object} SlotManifestEntry
- * @property {string} slot     Named shell slot (e.g. `'header'`, `'sidebar'`, `'resource:booking/service/form'`).
- * @property {string} entry    URL the platform serves the component bundle from.
- * @property {string} [package] npm package name that contributed this slot (from installed packages).
  *
  * @typedef {object} AggregateManifestEntry
  * @property {string} id     AggregateType string (e.g. `'User'`).
@@ -73,6 +70,8 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  * @typedef {object} LayoutManifestEntry
  * @property {string} id      Unique layout id (e.g. `'app-shell'`).
  * @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`.
  *
  * @typedef {object} E2eManifestEntry
  * @property {string} id       Unique test id (e.g. `'authentication/sign-in'`).
@@ -83,7 +82,6 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  * @typedef {object} Manifest
  * @property {ManifestEntry[]} entries              Flat, ordered list of every routable thing.
  * @property {ComponentManifestEntry[]} components  Discovered `*.component.*` entries, keyed by id.
- * @property {SlotManifestEntry[]} slots            Components that declare `export const slot` — auto-injected into shell slots.
  * @property {object[]} resourceTemplates           Each `*.resource.js` file's default-exported template object.
  * @property {AggregateManifestEntry[]} aggregates  Discovered `*.aggregate.js` entries from installed packages.
  * @property {IntegrationManifestEntry[]} integrations  Discovered `*.integration.js` entries.
@@ -91,7 +89,7 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  * @property {EmailManifestEntry[]} emails          Discovered `*.email.{jsx,tsx}` entries.
  * @property {ActionManifestEntry[]} actions        Discovered `*.action.js` entries.
  * @property {E2eManifestEntry[]} e2es              Discovered `*.e2e.js` entries from installed packages.
- * @property {LayoutManifestEntry[]} layouts        Discovered `*.layout.{jsx,tsx}` entries.
+ * @property {LayoutManifestEntry[]} layouts        Discovered `*.layout.{jsx,tsx}` entries (includes app `slots` map).
  * @property {object} config                        Inlined `src/config.js` default export.
  */
 
@@ -129,7 +127,11 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  * @param {ManifestPluginOptions} options
  * @returns {import('rollup').Plugin}
  */
-export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configValue, manifestPath }) {
+function entryPackage (entryInfo, appPackageName) {
+  return entryInfo.packageName || appPackageName
+}
+
+export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configValue, appPackageName = '@ossy/app', manifestPath }) {
   return {
     name: 'ossy-manifest',
     async writeBundle (_, bundle) {
@@ -156,8 +158,6 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
       const seenStartupIds = new Set()
       const seenEmailIds = new Set()
       const seenActionIds = new Set()
-      /** @type {SlotManifestEntry[]} */
-      const slots = []
       /** @type {E2eManifestEntry[]} */
       const e2es = []
       const seenE2eIds = new Set()
@@ -213,7 +213,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 })
+          integrations.push({ id: integrationId, entry: url, credentials, package: entryPackage(entryInfo, appPackageName) })
           continue
         }
 
@@ -236,7 +236,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 })
+          startups.push({ id: startupId, entry: url, package: entryPackage(entryInfo, appPackageName) })
           continue
         }
 
@@ -260,7 +260,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 })
+          emails.push({ id: emailId, entry: url, package: entryPackage(entryInfo, appPackageName) })
           continue
         }
 
@@ -284,7 +284,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
           }
           const access = mod.access ?? 'authenticated'
           seenActionIds.add(actionId)
-          actions.push({ id: actionId, entry: url, access })
+          actions.push({ id: actionId, entry: url, access, package: entryPackage(entryInfo, appPackageName) })
           continue
         }
 
@@ -308,7 +308,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 })
+          aggregates.push({ id: aggregateId, entry: url, package: entryPackage(entryInfo, appPackageName) })
           continue
         }
 
@@ -341,6 +341,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             feature: typeof feature === 'string' ? feature : '',
             requires: Array.isArray(requires) ? requires : [],
             entry: url,
+            package: entryPackage(entryInfo, appPackageName),
           })
           continue
         }
@@ -366,7 +367,38 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate layout id "${layoutId}"`)
           }
           seenLayoutIds.add(layoutId)
-          layouts.push({ id: layoutId, entry: url })
+          /** @type {Record<string, string> | undefined} */
+          let layoutSlots
+          const rawSlots = mod.slots
+          if (rawSlots != null) {
+            if (typeof rawSlots !== 'object' || Array.isArray(rawSlots)) {
+              this.error(
+                `[@ossy/app][build] layout entry ${entryInfo.sourcePath} must export \`slots\` as a plain object (slot name → component id)`,
+              )
+            }
+            layoutSlots = {}
+            for (const [slotKey, componentId] of Object.entries(rawSlots)) {
+              if (typeof slotKey !== 'string' || typeof componentId !== 'string') {
+                this.error(
+                  `[@ossy/app][build] layout slots in ${entryInfo.sourcePath} must map string slot names to string component ids`,
+                )
+              }
+              const sk = slotKey.trim()
+              const cid = componentId.trim()
+              if (!sk || !cid) {
+                this.error(
+                  `[@ossy/app][build] layout slots in ${entryInfo.sourcePath} must use non-empty slot names and component ids`,
+                )
+              }
+              layoutSlots[sk] = cid
+            }
+          }
+          layouts.push({
+            id: layoutId,
+            entry: url,
+            package: entryPackage(entryInfo, appPackageName),
+            ...(layoutSlots && Object.keys(layoutSlots).length > 0 ? { slots: layoutSlots } : {}),
+          })
           continue
         }
 
@@ -390,7 +422,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate resource template id "${template.id}"`)
           }
           seenResourceIds.add(template.id)
-          resourceTemplates.push(template)
+          resourceTemplates.push({ ...template, package: entryPackage(entryInfo, appPackageName) })
           continue
         }
 
@@ -405,12 +437,13 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
         seenIds[entryInfo.kind].add(id)
 
         if (entryInfo.kind === 'component') {
-          const slotName = typeof mod.slot === 'string' && mod.slot.trim() ? mod.slot.trim() : undefined
-          components.push({ id, entry: url, ...(slotName ? { slot: slotName } : {}) })
-          if (slotName) {
-            const packageName = entryInfo.packageName
-            slots.push({ slot: slotName, entry: url, ...(packageName ? { package: packageName } : {}) })
+          if (mod.slot != null) {
+            this.error(
+              `[@ossy/app][build] component ${entryInfo.sourcePath} must not export \`slot\`. ` +
+              'Assign components to shell slots in `*.layout.jsx` via `export const slots`.',
+            )
           }
+          components.push({ id, entry: url, package: entryPackage(entryInfo, appPackageName) })
           continue
         }
 
@@ -422,6 +455,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             path: pagePath,
             title: rawMeta.title,
             entry: url,
+            package: entryPackage(entryInfo, appPackageName),
           })
         } else if (entryInfo.kind === 'api') {
           // APIs have no sensible default route (unlike pages where we can
@@ -435,9 +469,9 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
               `Add a \`path\` to the metadata or default-export object (e.g. \`path: '/api/${id}'\`).`,
             )
           }
-          entries.push({ type: 'api', id, path: rawMeta.path, entry: url })
+          entries.push({ type: 'api', id, path: rawMeta.path, entry: url, package: entryPackage(entryInfo, appPackageName) })
         } else {
-          entries.push({ type: 'task', id, entry: url })
+          entries.push({ type: 'task', id, entry: url, package: entryPackage(entryInfo, appPackageName) })
         }
       }
 
@@ -449,7 +483,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
       }
 
       /** @type {Manifest} */
-      const manifest = { entries, components, slots, resourceTemplates, aggregates, integrations, startups, emails, actions, e2es, layouts, config: configValue || {} }
+      const manifest = { entries, components, resourceTemplates, aggregates, integrations, startups, emails, actions, e2es, layouts, config: configValue || {} }
       fs.mkdirSync(path.dirname(manifestPath), { recursive: true })
       fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8')
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.39.6",
+  "version": "1.39.7",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -9,8 +9,10 @@
     ".": "./src/index.js",
     "./shell": "./src/shell/index.js",
     "./runtime/page-runtime": "./runtime/page-runtime.js",
+    "./runtime/resolve-shell-slots": "./runtime/resolve-shell-slots.js",
     "./runtime/api-runtime": "./runtime/api-runtime.js",
-    "./runtime/task-runtime": "./runtime/task-runtime.js"
+    "./runtime/task-runtime": "./runtime/task-runtime.js",
+    "./manifest/build-manifest-summary": "./src/manifest/build-manifest-summary.js"
   },
   "bin": {
     "app": "./cli/index.js"
@@ -38,14 +40,14 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/design-system": "^1.39.6",
+    "@ossy/design-system": "^1.39.7",
     "@ossy/pages": "^1.23.0",
-    "@ossy/platform": "^1.38.6",
-    "@ossy/router": "^1.39.6",
-    "@ossy/router-react": "^1.39.6",
-    "@ossy/sdk": "^1.39.6",
-    "@ossy/sdk-react": "^1.39.6",
-    "@ossy/themes": "^1.39.6",
+    "@ossy/platform": "^1.38.7",
+    "@ossy/router": "^1.39.7",
+    "@ossy/router-react": "^1.39.7",
+    "@ossy/sdk": "^1.39.7",
+    "@ossy/sdk-react": "^1.39.7",
+    "@ossy/themes": "^1.39.7",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -79,5 +81,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "72d150cf20ff7ba25b328bc5b429b065c2840b2b"
+  "gitHead": "f65df0cd6da864c314c4f424112e05e8e2dec0ff"
 }

package/runtime/page-runtime.js

@@ -1,5 +1,6 @@
 import { createElement } from 'react'
 import { App } from '../src/shell/App.jsx'
+import { resolvePageSlots } from './resolve-shell-slots.js'
 
 /**
  * Dynamically imports each component bundle listed in `entries` and returns a
@@ -47,8 +48,9 @@ export async function loadLayout (layoutEntry) {
 
 function buildTree ({ Component, Layout, metadata, props }) {
   const lang = props.htmlLang || props.defaultLanguage || 'en'
-  const pageEl = createElement(Component, props)
-  const contentEl = Layout ? createElement(Layout, props, pageEl) : pageEl
+  const contentEl = Layout
+    ? createElement(Layout, props)
+    : createElement(Component, props)
   return createElement(
     'html',
     { lang },
@@ -96,8 +98,13 @@ export function createPageEntry (pageModule, options = {}) {
       import('node:stream'),
     ])
 
-    const { Layout = null, componentEntries = [], ...pageProps } = props
-    const components = await loadComponents(componentEntries)
+    const { Layout = null, componentEntries = [], layoutSlots = {}, ...pageProps } = props
+    const componentsById = await loadComponents(componentEntries)
+    const components = resolvePageSlots({
+      layoutSlots,
+      componentsById,
+      pageComponent: Component,
+    })
     const tree = buildTree({ Component, Layout, metadata, props: { ...pageProps, components } })
     const bootstrapUrl = toBootstrapUrl(entryUrl)
     const bootstrapModules = bootstrapUrl ? [bootstrapUrl] : []
@@ -133,12 +140,17 @@ export function createPageEntry (pageModule, options = {}) {
     if (typeof document === 'undefined' || typeof window === 'undefined') return
     hydrated = true
     const props = window.__OSSY__ || {}
-    const { layoutEntry = null, componentEntries = [], ...pageProps } = props
+    const { layoutEntry = null, componentEntries = [], layoutSlots = {}, ...pageProps } = props
     Promise.all([
       import('react-dom/client'),
       loadComponents(componentEntries),
       loadLayout(layoutEntry),
-    ]).then(([{ hydrateRoot }, components, Layout]) => {
+    ]).then(([{ hydrateRoot }, componentsById, Layout]) => {
+      const components = resolvePageSlots({
+        layoutSlots,
+        componentsById,
+        pageComponent: Component,
+      })
       hydrateRoot(document, buildTree({ Component, Layout, metadata, props: { ...pageProps, components } }))
     })
   }

package/runtime/resolve-shell-slots.js

@@ -0,0 +1,112 @@
+/** Canonical shell slot names (namespaced). App layout maps chrome only — not content. */
+export const SHELL_SLOT_NAMES = [
+  'shell:header',
+  'shell:sidebar',
+  'shell:toolbar',
+  'shell:notifications',
+  'shell:system-messages',
+]
+
+/** Platform-owned slot filled with the current route page component. */
+export const CONTENT_SLOT_NAME = 'shell:content'
+
+/** Bare shell region → namespaced key (legacy fallback for app components only). */
+const BARE_SHELL_REGION = {
+  header: 'shell:header',
+  sidebar: 'shell:sidebar',
+  toolbar: 'shell:toolbar',
+  notifications: 'shell:notifications',
+  'system-messages': 'shell:system-messages',
+  content: CONTENT_SLOT_NAME,
+}
+
+/**
+ * Normalize a slot map key to the canonical namespaced form when it is a bare shell region.
+ *
+ * @param {string} slotName
+ * @returns {string}
+ */
+export function normalizeShellSlotName (slotName) {
+  const key = typeof slotName === 'string' ? slotName.trim() : ''
+  return BARE_SHELL_REGION[key] ?? key
+}
+
+/**
+ * Build `Record<slotName, Component>` from the app layout's static `slots` map
+ * (`slotName → componentId`) and components loaded by `metadata.id`.
+ *
+ * One component per slot. Optional fallback (app components only): if the layout
+ * map omits a slot, use a component whose id equals the slot name (e.g. `shell:header`)
+ * or the bare region name (e.g. `header`).
+ *
+ * Does not resolve `shell:content` — use {@link resolvePageSlots}.
+ *
+ * @param {Record<string, string> | null | undefined} layoutSlotsMap
+ * @param {Record<string, import('react').ComponentType>} componentsById
+ * @returns {Record<string, import('react').ComponentType>}
+ */
+export function resolveShellSlots (layoutSlotsMap, componentsById) {
+  /** @type {Record<string, import('react').ComponentType>} */
+  const resolved = {}
+
+  const map = layoutSlotsMap && typeof layoutSlotsMap === 'object' ? layoutSlotsMap : {}
+  for (const [rawSlot, componentId] of Object.entries(map)) {
+    const slotName = normalizeShellSlotName(rawSlot)
+    const id = typeof componentId === 'string' ? componentId.trim() : ''
+    if (!slotName || !id || slotName === CONTENT_SLOT_NAME) continue
+    const Component = componentsById[id]
+    if (Component) resolved[slotName] = Component
+  }
+
+  for (const slotName of SHELL_SLOT_NAMES) {
+    if (resolved[slotName]) continue
+    if (componentsById[slotName]) {
+      resolved[slotName] = componentsById[slotName]
+      continue
+    }
+    const bare = slotName.slice('shell:'.length)
+    if (componentsById[bare]) resolved[slotName] = componentsById[bare]
+  }
+
+  return resolved
+}
+
+const RESOURCE_SLOT_PREFIX = 'resource:'
+
+/**
+ * Map manifest components whose `metadata.id` is a `resource:{type}/{view}` key.
+ *
+ * @param {Record<string, import('react').ComponentType>} componentsById
+ * @returns {Record<string, import('react').ComponentType>}
+ */
+export function resolveResourceSlots (componentsById) {
+  /** @type {Record<string, import('react').ComponentType>} */
+  const resolved = {}
+  for (const [id, Component] of Object.entries(componentsById || {})) {
+    if (typeof id === 'string' && id.startsWith(RESOURCE_SLOT_PREFIX) && Component) {
+      resolved[id] = Component
+    }
+  }
+  return resolved
+}
+
+/**
+ * Full provider slot map for a page request: shell chrome, resource views, and page content.
+ *
+ * @param {{
+ *   layoutSlots?: Record<string, string> | null,
+ *   componentsById?: Record<string, import('react').ComponentType>,
+ *   pageComponent?: import('react').ComponentType | null,
+ * }} options
+ * @returns {Record<string, import('react').ComponentType>}
+ */
+export function resolvePageSlots ({ layoutSlots, componentsById = {}, pageComponent = null } = {}) {
+  const shellSlots = resolveShellSlots(layoutSlots, componentsById)
+  const resourceSlots = resolveResourceSlots(componentsById)
+  /** @type {Record<string, import('react').ComponentType>} */
+  const resolved = { ...componentsById, ...shellSlots, ...resourceSlots }
+  if (pageComponent) {
+    resolved[CONTENT_SLOT_NAME] = pageComponent
+  }
+  return resolved
+}

package/src/manifest/build-manifest-summary.js

@@ -0,0 +1,110 @@
+/**
+ * @param {string} packageName npm package name (e.g. `@ossy/booking`).
+ * @returns {string} URL slug (e.g. `booking`).
+ */
+export function packageNameToSlug (packageName) {
+  const slash = packageName.indexOf('/')
+  return slash === -1 ? packageName : packageName.slice(slash + 1)
+}
+
+/**
+ * @param {string} slug URL slug (e.g. `booking`).
+ * @returns {string} Scoped package name (e.g. `@ossy/booking`).
+ */
+export function slugToPackageName (slug) {
+  return `@ossy/${slug}`
+}
+
+/**
+ * @param {object} manifest Loaded manifest from `@ossy/platform` `loadManifest`.
+ * @returns {{ packages: Array<object> }} Grouped, JSON-serializable package summary.
+ */
+export function buildManifestSummary (manifest) {
+  /** @type {Map<string, object>} */
+  const groups = new Map()
+
+  const ensure = (pkg) => {
+    if (!groups.has(pkg)) {
+      groups.set(pkg, {
+        package: pkg,
+        slug: packageNameToSlug(pkg),
+        pages: [],
+        apis: [],
+        actions: [],
+        components: [],
+        resourceTemplates: [],
+        tasks: [],
+        integrations: [],
+        emails: [],
+        aggregates: [],
+      })
+    }
+    return groups.get(pkg)
+  }
+
+  const add = (pkg, key, item) => {
+    ensure(pkg || '@ossy/app')[key].push(item)
+  }
+
+  for (const page of manifest.pages || []) {
+    add(page.package, 'pages', {
+      id: page.id,
+      path: page.path,
+      ...(page.title ? { title: page.title } : {}),
+    })
+  }
+
+  for (const api of manifest.apis || []) {
+    add(api.package, 'apis', { id: api.id, path: api.path })
+  }
+
+  for (const action of manifest.actions || []) {
+    add(action.package, 'actions', {
+      id: action.id,
+      ...(action.access ? { access: action.access } : {}),
+    })
+  }
+
+  for (const component of manifest.components || []) {
+    add(component.package, 'components', { id: component.id })
+  }
+
+  for (const template of manifest.resourceTemplates || []) {
+    add(template.package, 'resourceTemplates', {
+      id: template.id,
+      ...(template.title ? { title: template.title } : {}),
+    })
+  }
+
+  for (const task of manifest.tasks || []) {
+    add(task.package, 'tasks', { id: task.id })
+  }
+
+  for (const integration of manifest.integrations || []) {
+    add(integration.package, 'integrations', {
+      id: integration.id,
+      ...(integration.credentials?.length ? { credentials: integration.credentials } : {}),
+    })
+  }
+
+  for (const email of manifest.emails || []) {
+    add(email.package, 'emails', { id: email.id })
+  }
+
+  for (const aggregate of manifest.aggregates || []) {
+    add(aggregate.package, 'aggregates', { id: aggregate.id })
+  }
+
+  const packages = Array.from(groups.values())
+    .sort((a, b) => a.package.localeCompare(b.package))
+
+  for (const pkg of packages) {
+    for (const key of Object.keys(pkg)) {
+      if (Array.isArray(pkg[key])) {
+        pkg[key].sort((a, b) => a.id.localeCompare(b.id))
+      }
+    }
+  }
+
+  return { packages }
+}

package/src/shell/App.jsx

@@ -26,8 +26,8 @@ export const App = ({ children, ..._appSettings }) => {
           <WorkspaceProvider sdk={sdk}>
             <Router {...appSettings} pages={appSettings.pages || []}>
               {children}
+              {appSettings.devMode && <ThemeEditor />}
             </Router>
-            {appSettings.devMode && <ThemeEditor />}
           </WorkspaceProvider>
         </Theme>
       </ComponentSlotsProvider>

package/src/shell/AppSettings.jsx

@@ -25,5 +25,7 @@ export function defaultAppSettings() {
       faviconHref: undefined,
       /** When true, main app sidebar is collapsed to icons (from server cookie / app-settings). */
       sidebarPrimaryCollapsed: false,
+      /** Grouped manifest entries by npm package — for dev tooling. */
+      manifestSummary: undefined,
     }
   }

package/src/shell/DevPagesPanel.jsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react'
+import { Button, Text, View } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { useApp } from './AppContext.js'
+import { formatPagePaths, groupPagesByFeature } from './devPagesUtils.js'
+import { packageNameToSlug } from '../manifest/build-manifest-summary.js'
+
+const monoStyle = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  fontSize: '0.8125rem',
+  lineHeight: 1.4,
+  wordBreak: 'break-all',
+}
+
+const currentPageStyles = {
+  padding: 'var(--space-s)',
+  borderRadius: 'var(--space-xs)',
+  background: 'var(--surface-secondary, hsla(0, 0%, 0%, 0.04))',
+}
+
+export const DevPagesPanel = () => {
+  const app = useApp()
+  const router = useRouter()
+  const pages = app?.pages || []
+
+  const groups = useMemo(() => groupPagesByFeature(pages), [pages])
+
+  const currentPage = useMemo(
+    () => pages.find((p) => p.id === app?.pageId),
+    [pages, app?.pageId],
+  )
+
+  const hasPackageViewer = useMemo(
+    () => pages.some((p) => p.id === 'packages/detail'),
+    [pages],
+  )
+
+  const packageDetailHref = useMemo(() => {
+    if (!hasPackageViewer) return null
+    const pkg = currentPage?.package
+    if (!pkg) return null
+    return router.getHref({
+      id: 'packages/detail',
+      params: { packageSlug: packageNameToSlug(pkg) },
+    })
+  }, [currentPage?.package, hasPackageViewer, router])
+
+  const currentPathLabel = useMemo(() => {
+    if (currentPage?.path) return formatPagePaths(currentPage.path)
+    const url = app?.url || router.href
+    if (!url) return '—'
+    const pathname = url.split('?')[0].split('#')[0]
+    return pathname || '—'
+  }, [currentPage, router.href, app?.url])
+
+  const currentUrl = app?.url || router.href || '—'
+
+  return (
+    <View gap="m">
+      <Text variant="title-tertiary">Dev</Text>
+
+      <View gap="xs" style={currentPageStyles}>
+        <Text variant="title-tertiary" style={{ marginBottom: 'var(--space-xs)' }}>
+          Current page
+        </Text>
+        <Text style={monoStyle}>
+          <strong>id:</strong> {app?.pageId || '—'}
+        </Text>
+        <Text style={monoStyle}>
+          <strong>path:</strong> {currentPathLabel}
+        </Text>
+        <Text style={monoStyle}>
+          <strong>url:</strong> {currentUrl}
+        </Text>
+        {packageDetailHref && currentPage?.package && (
+          <Button
+            variant="link"
+            href={packageDetailHref}
+            style={{ alignSelf: 'flex-start', padding: 0, height: 'auto' }}
+          >
+            View package ({currentPage.package})
+          </Button>
+        )}
+      </View>
+
+      <View gap="s">
+        <Text variant="title-tertiary">
+          Pages ({pages.length})
+        </Text>
+
+        {groups.map(({ key, label, pages: groupPages }) => (
+          <View key={key} gap="xs">
+            <Text style={{ fontWeight: 700, fontSize: '0.875rem' }}>{label}</Text>
+            <View gap="xs">
+              {groupPages.map((page) => {
+                const href = router.getHref(page.id)
+                const selected = page.id === app?.pageId
+                return (
+                  <Button
+                    key={page.id}
+                    href={href}
+                    variant={selected ? 'tag-active' : 'link'}
+                    aria-current={selected ? 'page' : undefined}
+                    style={{
+                      display: 'block',
+                      textAlign: 'left',
+                      width: '100%',
+                      padding: 'var(--space-xs) var(--space-s)',
+                      height: 'auto',
+                      whiteSpace: 'normal',
+                    }}
+                  >
+                    <View gap="2px" style={{ alignItems: 'flex-start' }}>
+                      <Text style={{ ...monoStyle, fontWeight: 600 }}>{page.id}</Text>
+                      <Text style={{ ...monoStyle, opacity: 0.85 }}>
+                        {formatPagePaths(page.path)}
+                      </Text>
+                    </View>
+                  </Button>
+                )
+              })}
+            </View>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/shell/ThemeEditor.jsx

@@ -1,47 +1,28 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react'
 import { useResource } from '@ossy/sdk-react'
 import { Overlay, Button, useTheme, View, Text } from '@ossy/design-system'
-import { useApp } from './AppContext.js'
+import { DevPagesPanel } from './DevPagesPanel.jsx'
 
-const overlayStyles = {
-  background: 'transparent',
-  display: 'content',
-  pointerEvents: 'none'
-}
-
-const blobStyles = {
+const fabStyles = {
   boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
   borderRadius: '999px',
-  position: 'absolute',
+  position: 'fixed',
   right: 'var(--space-m)',
   bottom: 'var(--space-m)',
   cursor: 'pointer',
   transition: 'transform .5s',
-  pointerEvents: 'auto',
-  padding: 'var(--space-m)'
-}
-
-const editorContainerStyles = {
-  position: 'absolute',
-  right: '0',
-  top: '0',
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'stretch',
-  padding: '8px 32px'
+  zIndex: 101,
+  padding: 'var(--space-m)',
 }
 
-const editorStyles = {
-  width: '100%',
-  maxWidth: '350px',
-  height: '100%',
-  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
-  padding: '16px 16px 76px 16px',
-  overflowX: 'none',
+const modalPanelStyles = {
+  width: 'min(720px, 80vw)',
+  minWidth: 'min(480px, 100%)',
+  maxHeight: '85vh',
   overflowY: 'auto',
-  pointerEvents: 'auto'
+  overflowX: 'hidden',
+  margin: '0 auto',
+  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
 }
 
 const ThemeSwitcher = () => {
@@ -59,7 +40,6 @@ const ThemeSwitcher = () => {
 }
 
 export const ThemeEditor = () => {
-  const app = useApp()
   const { updateResourceContent } = useResource('PCX53TaGviq4_8KvK-VOp')
   const [isEditorOpen, setIsEditorOpen] = useState(false)
   const [viewCount, setViewCount] = useState(0)
@@ -68,8 +48,8 @@ export const ThemeEditor = () => {
   const temporarilyUpdateTheme = () => {}
   
   const toggleStyles = useMemo(() => !isEditorOpen
-    ? blobStyles
-    : { ...blobStyles, transform: 'rotate(-45deg)' }, [isEditorOpen])
+    ? fabStyles
+    : { ...fabStyles, transform: 'rotate(-45deg)' }, [isEditorOpen])
 
   const onToggle = useCallback(() => {
     setIsEditorOpen(!isEditorOpen)
@@ -103,44 +83,35 @@ export const ThemeEditor = () => {
   }, [isEditorOpen])
 
   return (
-    <Overlay isVisible={true} style={overlayStyles}>
-
+    <>
       {
         isEditorOpen && (
-          <div style={editorContainerStyles}>
-            <View surface="primary" roundness="m" gap="m" style={editorStyles}>
-              <View as="form" gap="s" onSubmit={onSaveTheme} onChange={onThemeChange}>
-                {Object.entries(theme).map(([name, value]) => (
-                  <div style={{ marginBottom: '16px' }}>
-                    <label style={{ display: 'block', fontFamily: 'sans-serif', marginBottom: '4px', fontWeight: 'bold' }}>{name}</label>
-                    <input value={value} data-name={name} style={{ width: '100%', padding: '4px' }}/>
-                  </div>
-                ))}
-                <Button type="submit" variant="cta">
-                  Save
-                </Button>
+          <Overlay isVisible={true} onClose={onToggle}>
+            <View layout="off-center" style={{ height: '100%', width: '100%' }}>
+              <View slot="content" style={modalPanelStyles}>
+                <View surface="primary" roundness="m" gap="m" inset="l">
+                  <DevPagesPanel />
+                  <View as="form" gap="s" onSubmit={onSaveTheme} onChange={onThemeChange}>
+                    {Object.entries(theme).map(([name, value]) => (
+                      <div style={{ marginBottom: '16px' }}>
+                        <label style={{ display: 'block', fontFamily: 'sans-serif', marginBottom: '4px', fontWeight: 'bold' }}>{name}</label>
+                        <input value={value} data-name={name} style={{ width: '100%', padding: '4px' }}/>
+                      </div>
+                    ))}
+                    <Button type="submit" variant="cta">
+                      Save
+                    </Button>
+                  </View>
+                  <ThemeSwitcher/>
+                  <Text>Views: {viewCount}</Text>
+                </View>
               </View>
-              <ThemeSwitcher/>
-              <Text>Views: {viewCount}</Text>
             </View>
-            <View>
-
-              <View>
-                Pages: {app?.pages?.length || 0}
-              </View>
-
-              <View>
-                {(app?.pages || []).map(page => (
-                  <Button>{page.id}</Button>
-                ))}
-              </View>
-            </View>
-          </div>
+          </Overlay>
         )
       }
 
       <Button variant="cta" prefix="math-plus" style={toggleStyles} onClick={onToggle} />
-
-    </Overlay>
+    </>
   )
 }

package/src/shell/devPagesUtils.js

@@ -0,0 +1,53 @@
+/**
+ * @param {string} pageId
+ * @returns {string} Group key for sorting and labeling (e.g. `booking`, `app`).
+ */
+export function getPageGroupKey (pageId) {
+  const slash = pageId.indexOf('/')
+  if (slash === -1) return 'app'
+  return pageId.slice(0, slash)
+}
+
+/**
+ * @param {string} groupKey
+ * @returns {string} Display label (e.g. `@ossy/booking`, `@ossy/app`).
+ */
+export function getPageGroupLabel (groupKey) {
+  if (groupKey === 'app') return '@ossy/app'
+  return `@ossy/${groupKey}`
+}
+
+/**
+ * @param {string | Record<string, string> | undefined} path
+ * @returns {string}
+ */
+export function formatPagePaths (path) {
+  if (!path) return '—'
+  if (typeof path === 'string') return path
+  return Object.entries(path)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([lang, p]) => `${lang}: ${p}`)
+    .join(' · ')
+}
+
+/**
+ * @param {Array<{ id: string, path?: string | Record<string, string> }>} pages
+ * @returns {Array<{ key: string, label: string, pages: typeof pages }>}
+ */
+export function groupPagesByFeature (pages) {
+  const byKey = new Map()
+
+  for (const page of pages) {
+    const key = getPageGroupKey(page.id)
+    if (!byKey.has(key)) byKey.set(key, [])
+    byKey.get(key).push(page)
+  }
+
+  return Array.from(byKey.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([key, groupPages]) => ({
+      key,
+      label: getPageGroupLabel(key),
+      pages: [...groupPages].sort((a, b) => a.id.localeCompare(b.id)),
+    }))
+}