@uniweb/build 0.6.21 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.6.21",
+  "version": "0.7.0",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -51,7 +51,7 @@
   },
   "optionalDependencies": {
     "@uniweb/content-reader": "1.1.2",
-    "@uniweb/runtime": "0.5.22",
+    "@uniweb/runtime": "0.5.23",
     "@uniweb/schemas": "0.2.1"
   },
   "peerDependencies": {
@@ -61,7 +61,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.0.0 || ^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
-    "@uniweb/core": "0.4.8"
+    "@uniweb/core": "0.5.0"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/generate-entry.js

@@ -22,20 +22,22 @@
 import { writeFile, mkdir } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import { join, dirname } from 'node:path'
-import { discoverComponents } from './schema.js'
-import { extractAllRuntimeSchemas } from './runtime-schema.js'
+import { discoverComponents, discoverLayoutsInPath } from './schema.js'
+import { extractAllRuntimeSchemas, extractAllLayoutRuntimeSchemas } from './runtime-schema.js'
 
 /**
- * Detect foundation config/exports file (for custom Layout, props, vars, etc.)
+ * Detect foundation config/exports file (for props, vars, etc.)
  *
  * Looks for (in order of preference):
  * 1. foundation.js - New consolidated format
  * 2. exports.js - Legacy format (for backward compatibility)
  *
  * The file should export:
- * - Layout (optional) - Custom page layout component
  * - props (optional) - Foundation-wide props
  * - vars (optional) - CSS custom properties (also read by schema builder)
+ * - defaultLayout (optional) - Default layout name
+ *
+ * Note: Layout components are now discovered from src/layouts/
  */
 function detectFoundationExports(srcDir) {
   // Prefer foundation.js (new consolidated format)
@@ -92,9 +94,12 @@ function generateEntrySource(components, options = {}) {
     cssPath = null,
     foundationExports = null,
     meta = {},
+    layouts = {},
+    layoutMeta = {},
   } = options
 
   const componentNames = Object.keys(components).sort()
+  const layoutNames = Object.keys(layouts).sort()
 
   const lines = [
     '// Auto-generated foundation entry point',
@@ -107,13 +112,10 @@ function generateEntrySource(components, options = {}) {
     lines.push(`import '${cssPath}'`)
   }
 
-  // Foundation capabilities import (for custom Layout, props, etc.)
-  // Use namespace import to merge named exports (Layout, layouts) into capabilities.
-  // This ensures both `export const layouts = {...}` (named) and
-  // `export default { layouts: {...} }` (default) work correctly.
+  // Foundation capabilities import (for props, vars, etc.)
+  // Note: Layout/layouts no longer merged from foundation.js — layouts come from src/layouts/ discovery
   if (foundationExports) {
     lines.push(`import * as _foundationModule from '${foundationExports.path}'`)
-    lines.push(`const capabilities = { ..._foundationModule.default, ...(_foundationModule.Layout && { Layout: _foundationModule.Layout }), ...(_foundationModule.layouts && { layouts: _foundationModule.layouts }) }`)
   }
 
   // Component imports
@@ -122,6 +124,12 @@ function generateEntrySource(components, options = {}) {
     lines.push(`import ${name} from './${path}/${entryFile}'`)
   }
 
+  // Layout imports
+  for (const name of layoutNames) {
+    const { path, entryFile = `index.js` } = layouts[name]
+    lines.push(`import ${name} from './${path}/${entryFile}'`)
+  }
+
   lines.push('')
 
   // Export components object
@@ -133,9 +141,17 @@ function generateEntrySource(components, options = {}) {
     lines.push('export const components = {}')
   }
 
-  // Foundation capabilities (Layout, props, etc.)
+  // Foundation capabilities (props, vars, etc. + discovered layouts)
   lines.push('')
-  if (foundationExports) {
+  if (foundationExports || layoutNames.length > 0) {
+    const capParts = []
+    if (foundationExports) {
+      capParts.push('..._foundationModule.default')
+    }
+    if (layoutNames.length > 0) {
+      capParts.push(`layouts: { ${layoutNames.join(', ')} }`)
+    }
+    lines.push(`const capabilities = { ${capParts.join(', ')} }`)
     lines.push('export { capabilities }')
   } else {
     lines.push('export const capabilities = null')
@@ -151,6 +167,16 @@ function generateEntrySource(components, options = {}) {
     lines.push('export const meta = {}')
   }
 
+  // Per-layout runtime metadata (areas, transitions, defaults)
+  lines.push('')
+  if (Object.keys(layoutMeta).length > 0) {
+    const layoutMetaJson = JSON.stringify(layoutMeta, null, 2)
+    lines.push(`// Per-layout runtime metadata (from meta.js)`)
+    lines.push(`export const layoutMeta = ${layoutMetaJson}`)
+  } else {
+    lines.push('export const layoutMeta = {}')
+  }
+
   lines.push('')
 
   return lines.join('\n')
@@ -205,6 +231,10 @@ export async function generateEntryPoint(srcDir, outputPath = null, options = {}
     console.warn('Warning: No section types found')
   }
 
+  // Discover layouts from src/layouts/
+  const layouts = await discoverLayoutsInPath(srcDir)
+  const layoutNames = Object.keys(layouts).sort()
+
   // Detect entry files for each component
   // Bare files discovered in sections/ already have entryFile set — skip detection for those
   for (const name of componentNames) {
@@ -216,20 +246,35 @@ export async function generateEntryPoint(srcDir, outputPath = null, options = {}
     }
   }
 
+  // Detect entry files for each layout (same logic as components)
+  for (const name of layoutNames) {
+    const layout = layouts[name]
+    if (!layout.entryFile) {
+      const entry = detectComponentEntry(srcDir, layout.path, layout.name)
+      layout.ext = entry.ext
+      layout.entryFile = entry.file
+    }
+  }
+
   // Check for CSS file
   const cssPath = detectCssFile(srcDir)
 
-  // Check for foundation exports (custom Layout, props, etc.)
+  // Check for foundation exports (props, vars, etc.)
   const foundationExports = detectFoundationExports(srcDir)
 
   // Extract per-component runtime metadata from meta.js files
   const meta = extractAllRuntimeSchemas(components)
 
+  // Extract per-layout runtime metadata from meta.js files
+  const layoutMeta = extractAllLayoutRuntimeSchemas(layouts)
+
   // Generate source
   const source = generateEntrySource(components, {
     cssPath,
     foundationExports,
     meta,
+    layouts,
+    layoutMeta,
   })
 
   // Write to file
@@ -239,6 +284,9 @@ export async function generateEntryPoint(srcDir, outputPath = null, options = {}
 
   console.log(`Generated entry point: ${output}`)
   console.log(`  - ${componentNames.length} components: ${componentNames.join(', ')}`)
+  if (layoutNames.length > 0) {
+    console.log(`  - ${layoutNames.length} layouts: ${layoutNames.join(', ')}`)
+  }
   if (foundationExports) {
     console.log(`  - Foundation exports found: ${foundationExports.path}`)
   }
@@ -246,8 +294,10 @@ export async function generateEntryPoint(srcDir, outputPath = null, options = {}
   return {
     outputPath: output,
     componentNames,
+    layoutNames,
     foundationExports,
     meta,
+    layoutMeta,
   }
 }
 

package/src/prerender.js

@@ -569,33 +569,33 @@ function renderBlocks(blocks) {
  * Render page layout for SSR
  */
 function renderLayout(page, website) {
-  const RemoteLayout = website.getRemoteLayout(page.getLayoutName())
+  const layoutName = page.getLayoutName()
+  const RemoteLayout = website.getRemoteLayout(layoutName)
+  const layoutMeta = website.getLayoutMeta(layoutName)
 
-  const headerBlocks = page.getHeaderBlocks()
   const bodyBlocks = page.getBodyBlocks()
-  const footerBlocks = page.getFooterBlocks()
-  const leftBlocks = page.getLeftBlocks()
-  const rightBlocks = page.getRightBlocks()
+  const areas = page.getLayoutAreas()
 
-  const headerElement = headerBlocks ? renderBlocks(headerBlocks) : null
   const bodyElement = bodyBlocks ? renderBlocks(bodyBlocks) : null
-  const footerElement = footerBlocks ? renderBlocks(footerBlocks) : null
-  const leftElement = leftBlocks ? renderBlocks(leftBlocks) : null
-  const rightElement = rightBlocks ? renderBlocks(rightBlocks) : null
+  const areaElements = {}
+  for (const [name, blocks] of Object.entries(areas)) {
+    areaElements[name] = renderBlocks(blocks)
+  }
 
   if (RemoteLayout) {
+    const params = { ...(layoutMeta?.defaults || {}), ...(page.getLayoutParams() || {}) }
+
     return React.createElement(RemoteLayout, {
-      page, website,
-      header: headerElement, body: bodyElement, footer: footerElement,
-      left: leftElement, right: rightElement,
-      leftPanel: leftElement, rightPanel: rightElement
+      page, website, params,
+      body: bodyElement,
+      ...areaElements,
     })
   }
 
   return React.createElement(React.Fragment, null,
-    headerElement && React.createElement('header', null, headerElement),
+    areaElements.header && React.createElement('header', null, areaElements.header),
     bodyElement && React.createElement('main', null, bodyElement),
-    footerElement && React.createElement('footer', null, footerElement)
+    areaElements.footer && React.createElement('footer', null, areaElements.footer)
   )
 }
 

package/src/runtime-schema.js

@@ -288,3 +288,56 @@ export function extractAllRuntimeSchemas(componentsMeta) {
 
   return schemas
 }
+
+/**
+ * Extract lean runtime schema for a layout from its full meta.js
+ *
+ * Layout runtime metadata:
+ * - areas: Array of area names this layout supports
+ * - transitions: View transition name mapping (stored but not acted on yet)
+ * - defaults: Param default values
+ *
+ * @param {Object} fullMeta - The full meta.js default export for a layout
+ * @returns {Object|null} - Lean layout runtime schema or null if empty
+ */
+export function extractLayoutRuntimeSchema(fullMeta) {
+  if (!fullMeta || typeof fullMeta !== 'object') {
+    return null
+  }
+
+  const runtime = {}
+
+  if (fullMeta.areas && Array.isArray(fullMeta.areas)) {
+    runtime.areas = fullMeta.areas
+  }
+
+  if (fullMeta.transitions && typeof fullMeta.transitions === 'object') {
+    runtime.transitions = fullMeta.transitions
+  }
+
+  const defaults = extractParamDefaults(fullMeta.params)
+  if (defaults) {
+    runtime.defaults = defaults
+  }
+
+  return Object.keys(runtime).length > 0 ? runtime : null
+}
+
+/**
+ * Extract runtime schemas for all layouts
+ *
+ * @param {Object} layoutsMeta - Map of layoutName -> meta.js content
+ * @returns {Object} - Map of layoutName -> layout runtime schema (excludes null entries)
+ */
+export function extractAllLayoutRuntimeSchemas(layoutsMeta) {
+  const schemas = {}
+
+  for (const [name, meta] of Object.entries(layoutsMeta)) {
+    const schema = extractLayoutRuntimeSchema(meta)
+    if (schema) {
+      schemas[name] = schema
+    }
+  }
+
+  return schemas
+}

package/src/schema.js

@@ -32,6 +32,9 @@ const COMPONENT_EXTENSIONS = new Set(['.jsx', '.tsx', '.js', '.ts'])
 // The primary sections path where relaxed discovery applies
 const SECTIONS_PATH = 'sections'
 
+// The layouts path where layout components are discovered
+const LAYOUTS_PATH = 'layouts'
+
 /**
  * Load a meta.js file via dynamic import
  */
@@ -107,11 +110,10 @@ export async function loadFoundationConfig(srcDir) {
   try {
     const module = await import(pathToFileURL(filePath).href)
     // Support both default export and named exports
+    // Note: Layout/layouts no longer read from foundation.js — layouts come from src/layouts/ discovery
     return {
       ...module.default,
       vars: module.vars || module.default?.vars,
-      Layout: module.Layout || module.default?.Layout,
-      layouts: module.layouts || module.default?.layouts,
       defaultLayout: module.default?.defaultLayout,
     }
   } catch (error) {
@@ -254,6 +256,87 @@ async function discoverSectionsInPath(srcDir, sectionsRelPath) {
   return components
 }
 
+/**
+ * Discover layout components in src/layouts/ with relaxed rules
+ *
+ * Same discovery pattern as sections: root-level files and directories
+ * are addressable by default. No recursion — layouts are flat.
+ *
+ * @param {string} srcDir - Source directory (e.g., 'src')
+ * @param {string} layoutsRelPath - Relative path to layouts dir (e.g., 'layouts')
+ * @returns {Object} Map of layoutName -> { name, path, ...meta }
+ */
+export async function discoverLayoutsInPath(srcDir, layoutsRelPath = LAYOUTS_PATH) {
+  const fullPath = join(srcDir, layoutsRelPath)
+
+  if (!existsSync(fullPath)) {
+    return {}
+  }
+
+  const entries = await readdir(fullPath, { withFileTypes: true })
+  const layouts = {}
+
+  // Collect names from both files and directories to detect collisions
+  const fileNames = new Set()
+  const dirNames = new Set()
+
+  for (const entry of entries) {
+    const ext = extname(entry.name)
+    if (entry.isFile() && COMPONENT_EXTENSIONS.has(ext)) {
+      const name = basename(entry.name, ext)
+      if (isComponentFileName(name)) {
+        fileNames.add(name)
+      }
+    } else if (entry.isDirectory()) {
+      dirNames.add(entry.name)
+    }
+  }
+
+  // Check for name collisions (e.g., DocsLayout.jsx AND DocsLayout/)
+  for (const name of fileNames) {
+    if (dirNames.has(name)) {
+      throw new Error(
+        `Name collision in ${layoutsRelPath}/: both "${name}.jsx" (or similar) and "${name}/" exist. ` +
+        `Use one or the other, not both.`
+      )
+    }
+  }
+
+  // Discover bare files at root
+  for (const entry of entries) {
+    if (!entry.isFile()) continue
+    const ext = extname(entry.name)
+    if (!COMPONENT_EXTENSIONS.has(ext)) continue
+    const name = basename(entry.name, ext)
+    if (!isComponentFileName(name)) continue
+
+    const meta = createImplicitMeta(name)
+    layouts[name] = {
+      ...buildComponentEntry(name, layoutsRelPath, meta),
+      entryFile: entry.name,
+    }
+  }
+
+  // Discover directories at root (no recursion for layouts)
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue
+    if (!isComponentFileName(entry.name)) continue
+
+    const dirPath = join(fullPath, entry.name)
+    const relativePath = join(layoutsRelPath, entry.name)
+    const result = await loadComponentMeta(dirPath)
+
+    if (result && result.meta) {
+      if (result.meta.exposed === false) continue
+      layouts[entry.name] = buildComponentEntry(entry.name, relativePath, result.meta)
+    } else if (hasEntryFile(dirPath, entry.name)) {
+      layouts[entry.name] = buildComponentEntry(entry.name, relativePath, createImplicitMeta(entry.name))
+    }
+  }
+
+  return layouts
+}
+
 /**
  * Recursively discover nested section types that have meta.js
  *
@@ -378,12 +461,20 @@ export async function buildSchema(srcDir, componentPaths) {
   // Discover components
   const components = await discoverComponents(srcDir, componentPaths)
 
+  // Discover layouts from src/layouts/
+  const layouts = await discoverLayoutsInPath(srcDir)
+
   return {
-    // Merge identity and config - identity fields take precedence
     _self: {
       ...foundationConfig,
       ...identity,
+      // foundation.js overrides package.json for editor-facing identity
+      ...(foundationConfig.name && { name: foundationConfig.name }),
+      ...(foundationConfig.description && { description: foundationConfig.description }),
+      ...(foundationConfig.defaultLayout && { defaultLayout: foundationConfig.defaultLayout }),
     },
+    // Layout metadata (full, for editor)
+    ...(Object.keys(layouts).length > 0 && { _layouts: layouts }),
     ...components,
   }
 }

package/src/site/asset-processor.js

@@ -312,29 +312,15 @@ export function rewriteSiteContentPaths(siteContent, pathMapping) {
     result.pages.forEach(processPage)
   }
 
-  // Process named layout section sets
+  // Process layout area sets
   if (result.layouts) {
-    for (const [name, panels] of Object.entries(result.layouts)) {
-      for (const panel of ['header', 'footer', 'left', 'right']) {
-        if (panels[panel]) processPage(panels[panel])
+    for (const [name, areas] of Object.entries(result.layouts)) {
+      for (const areaPage of Object.values(areas)) {
+        if (areaPage) processPage(areaPage)
       }
     }
   }
 
-  // Process flat header/footer/left/right (backward compat)
-  if (result.header) {
-    processPage(result.header)
-  }
-  if (result.footer) {
-    processPage(result.footer)
-  }
-  if (result.left) {
-    processPage(result.left)
-  }
-  if (result.right) {
-    processPage(result.right)
-  }
-
   // Remove the assets manifest from output (no longer needed at runtime)
   delete result.assets
 

package/src/site/content-collector.js

@@ -535,12 +535,7 @@ async function processFileAsPage(filePath, fileName, siteRoot, parentRoute) {
       hidden: false,
       hideInHeader: false,
       hideInFooter: false,
-      layout: {
-        header: true,
-        footer: true,
-        leftPanel: true,
-        rightPanel: true
-      },
+      layout: {},
       seo: {
         noindex: false,
         image: null,
@@ -971,10 +966,8 @@ async function processPage(pagePath, pageName, siteRoot, { isIndex = false, pare
       // Layout options (named layout + per-page overrides)
       layout: {
         ...(resolvedLayoutName ? { name: resolvedLayoutName } : {}),
-        header: layoutObj.header !== false, // Show header (default true)
-        footer: layoutObj.footer !== false, // Show footer (default true)
-        leftPanel: layoutObj.leftPanel !== false, // Show left panel (default true)
-        rightPanel: layoutObj.rightPanel !== false // Show right panel (default true)
+        ...(layoutObj.hide ? { hide: layoutObj.hide } : {}),
+        ...(layoutObj.params ? { params: layoutObj.params } : {}),
       },
 
       seo: {
@@ -1315,10 +1308,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
           hideInFooter: dirConfig.hideInFooter || false,
           layout: {
             ...(effectiveLayout ? { name: effectiveLayout } : {}),
-            header: containerLayoutObj.header !== false,
-            footer: containerLayoutObj.footer !== false,
-            leftPanel: containerLayoutObj.leftPanel !== false,
-            rightPanel: containerLayoutObj.rightPanel !== false
+            ...(containerLayoutObj.hide ? { hide: containerLayoutObj.hide } : {}),
+            ...(containerLayoutObj.params ? { params: containerLayoutObj.params } : {}),
           },
           seo: {
             noindex: dirConfig.seo?.noindex || false,
@@ -1404,10 +1395,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
         hideInFooter: dirConfig.hideInFooter || false,
         layout: {
           ...(effectiveLayout ? { name: effectiveLayout } : {}),
-          header: containerLayoutObj.header !== false,
-          footer: containerLayoutObj.footer !== false,
-          leftPanel: containerLayoutObj.leftPanel !== false,
-          rightPanel: containerLayoutObj.rightPanel !== false
+          ...(containerLayoutObj.hide ? { hide: containerLayoutObj.hide } : {}),
+          ...(containerLayoutObj.params ? { params: containerLayoutObj.params } : {}),
         },
         seo: {
           noindex: dirConfig.seo?.noindex || false,
@@ -1517,55 +1506,62 @@ async function loadFoundationVars(foundationPath) {
 }
 
 /**
- * Collect panel data (header, footer, left, right) from a single directory.
+ * Collect areas from a single directory (general named areas, not hardcoded).
  *
- * Supports two forms per panel:
+ * Supports two forms per area:
  *   - Folder: dir/header/ (directory with .md files, like a page)
  *   - File shorthand: dir/header.md (single markdown file)
  * Folder takes priority when both exist.
  *
- * @param {string} dir - Directory to scan for panel files
+ * @param {string} dir - Directory to scan for area files
  * @param {string} siteRoot - Path to site root
- * @param {string} routePrefix - Route prefix for panel pages (e.g., '/layout' or '/layout/marketing')
- * @returns {Promise<Object>} { header, footer, left, right }
+ * @param {string} routePrefix - Route prefix for area pages (e.g., '/layout' or '/layout/marketing')
+ * @returns {Promise<Object>} Map of areaName -> page data
  */
-async function collectPanelsFromDir(dir, siteRoot, routePrefix = '/layout') {
-  const result = { header: null, footer: null, left: null, right: null }
+async function collectAreasFromDir(dir, siteRoot, routePrefix = '/layout') {
+  const result = {}
 
   if (!existsSync(dir)) return result
 
-  const knownPanels = ['header', 'footer', 'left', 'right']
-  const entries = await readdir(dir)
-
-  for (const panel of knownPanels) {
-    // Folder form (higher priority)
-    if (entries.includes(panel)) {
-      const entryPath = join(dir, panel)
-      const stats = await stat(entryPath)
-      if (stats.isDirectory()) {
-        const pageResult = await processPage(entryPath, panel, siteRoot, {
-          isIndex: false,
-          parentRoute: routePrefix
-        })
-        if (pageResult) {
-          result[panel] = pageResult.page
-        }
-        continue
-      }
+  const entries = await readdir(dir, { withFileTypes: true })
+
+  // Track which area names we've already processed (folder form takes priority)
+  const processed = new Set()
+
+  // First pass: directories (folder form, higher priority)
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue
+    if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue
+
+    const areaName = entry.name
+    const entryPath = join(dir, areaName)
+    const pageResult = await processPage(entryPath, areaName, siteRoot, {
+      isIndex: false,
+      parentRoute: routePrefix
+    })
+    if (pageResult) {
+      result[areaName] = pageResult.page
+      processed.add(areaName)
     }
+  }
 
-    // File shorthand: header.md
-    const mdFile = `${panel}.md`
-    if (entries.includes(mdFile)) {
-      const filePath = join(dir, mdFile)
-      const { section } = await processMarkdownFile(filePath, '1', siteRoot, panel)
-      result[panel] = {
-        route: `${routePrefix}/${panel}`,
-        title: panel.charAt(0).toUpperCase() + panel.slice(1),
-        description: '',
-        layout: { header: true, footer: true, leftPanel: true, rightPanel: true },
-        sections: [section]
-      }
+  // Second pass: markdown file shorthand (only if not already processed as folder)
+  for (const entry of entries) {
+    if (!entry.isFile()) continue
+    if (!entry.name.endsWith('.md')) continue
+    if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue
+
+    const areaName = entry.name.replace('.md', '')
+    if (processed.has(areaName)) continue
+
+    const filePath = join(dir, entry.name)
+    const { section } = await processMarkdownFile(filePath, '1', siteRoot, areaName)
+    result[areaName] = {
+      route: `${routePrefix}/${areaName}`,
+      title: areaName.charAt(0).toUpperCase() + areaName.slice(1),
+      description: '',
+      layout: {},
+      sections: [section]
     }
   }
 
@@ -1573,47 +1569,94 @@ async function collectPanelsFromDir(dir, siteRoot, routePrefix = '/layout') {
 }
 
 /**
- * Collect layout panels from the layout/ directory, including named layout subdirectories.
+ * Check if a directory looks like a named layout (contains area-like .md files or area subdirs)
+ * vs an area in folder form (contains section content processed by processPage).
+ *
+ * Heuristic: if a directory contains .md files at the top level AND no page.yml,
+ * it's a named layout (those .md files are its area definitions).
+ * If it has page.yml or looks like a page directory, it's an area folder.
+ *
+ * @param {string} dirPath - Path to the directory
+ * @returns {Promise<boolean>} True if this looks like a named layout directory
+ */
+async function isNamedLayoutDir(dirPath) {
+  // If it has page.yml, it's an area folder (processPage will handle it)
+  if (existsSync(join(dirPath, 'page.yml'))) return false
+
+  const entries = await readdir(dirPath)
+  // If directory contains .md files but no page.yml, it's a named layout
+  return entries.some(e => e.endsWith('.md') && !e.startsWith('_') && !e.startsWith('.'))
+}
+
+/**
+ * Collect layout areas from the layout/ directory, including named layout subdirectories.
  *
- * Root-level files/folders are the "default" layout's panels.
- * Subdirectories (other than the four known panel names) are named layouts,
- * each self-contained with its own panel set.
+ * Root-level .md files and area directories form the "default" layout's areas.
+ * Subdirectories that themselves contain .md files (without page.yml) are named layouts,
+ * each with its own set of areas.
  *
  * @param {string} layoutDir - Path to layout directory
  * @param {string} siteRoot - Path to site root
- * @returns {Promise<Object>} { layouts, header, footer, left, right }
+ * @returns {Promise<Object>} { layouts }
  */
 async function collectLayouts(layoutDir, siteRoot) {
   if (!existsSync(layoutDir)) {
-    return { layouts: null, header: null, footer: null, left: null, right: null }
+    return { layouts: null }
   }
 
-  // Collect root-level panels (= "default" layout, backward compat)
-  const defaultPanels = await collectPanelsFromDir(layoutDir, siteRoot, '/layout')
-
-  // Scan for named layout subdirectories
   const entries = await readdir(layoutDir, { withFileTypes: true })
-  const knownPanels = new Set(['header', 'footer', 'left', 'right'])
-  const namedLayouts = {}
+
+  // Separate root-level entries into:
+  // 1. Area .md files (for default layout)
+  // 2. Area directories (for default layout) vs named layout directories
+  const defaultAreaFiles = []
+  const defaultAreaDirs = []
+  const namedLayoutDirs = []
 
   for (const entry of entries) {
-    if (!entry.isDirectory()) continue
-    if (knownPanels.has(entry.name)) continue  // Skip panel folders (belong to default)
     if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue
 
-    // This is a named layout subdirectory
+    if (entry.isFile() && entry.name.endsWith('.md')) {
+      defaultAreaFiles.push(entry)
+    } else if (entry.isDirectory()) {
+      const dirPath = join(layoutDir, entry.name)
+      if (await isNamedLayoutDir(dirPath)) {
+        namedLayoutDirs.push(entry)
+      } else {
+        defaultAreaDirs.push(entry)
+      }
+    }
+  }
+
+  // Collect default layout areas
+  const defaultAreas = await collectAreasFromDir(layoutDir, siteRoot, '/layout')
+  // Remove any named layout directories that got collected as areas
+  for (const dir of namedLayoutDirs) {
+    delete defaultAreas[dir.name]
+  }
+
+  // Collect named layout areas
+  const namedLayouts = {}
+  for (const entry of namedLayoutDirs) {
     const subdir = join(layoutDir, entry.name)
-    namedLayouts[entry.name] = await collectPanelsFromDir(subdir, siteRoot, `/layout/${entry.name}`)
+    namedLayouts[entry.name] = await collectAreasFromDir(subdir, siteRoot, `/layout/${entry.name}`)
+  }
+
+  const hasDefaultAreas = Object.keys(defaultAreas).length > 0
+  const hasNamedLayouts = Object.keys(namedLayouts).length > 0
+
+  if (!hasDefaultAreas && !hasNamedLayouts) {
+    return { layouts: null }
   }
 
-  if (Object.keys(namedLayouts).length === 0) {
-    // No named layouts — backward compatible mode
-    return { layouts: null, ...defaultPanels }
+  // Always use the layouts object format (general areas)
+  const layouts = {}
+  if (hasDefaultAreas) {
+    layouts.default = defaultAreas
   }
+  Object.assign(layouts, namedLayouts)
 
-  // Named layouts mode: root panels become "default", subdirs are named
-  const layouts = { default: defaultPanels, ...namedLayouts }
-  return { layouts, ...defaultPanels }
+  return { layouts }
 }
 
 /**
@@ -1673,8 +1716,8 @@ export async function collectSiteContent(sitePath, options = {}) {
   // Determine root content mode from folder.yml/page.yml presence in pages directory
   const { mode: rootContentMode } = await readFolderConfig(pagesPath, 'sections')
 
-  // Collect layout panels from layout/ directory (including named layout subdirectories)
-  const { layouts, header, footer, left, right } = await collectLayouts(layoutPath, sitePath)
+  // Collect layout areas from layout/ directory (including named layout subdirectories)
+  const { layouts } = await collectLayouts(layoutPath, sitePath)
 
   // Site-level layout name (from site.yml layout: field)
   const siteLayoutName = typeof siteConfig.layout === 'string' ? siteConfig.layout
@@ -1761,13 +1804,8 @@ export async function collectSiteContent(sitePath, options = {}) {
       css: themeCSS
     },
     pages,
-    // Named layout section sets (null if no named layouts — backward compat)
+    // Layout area sets: { default: { header: page, footer: page, ... }, marketing: { ... } }
     layouts,
-    // Flat panel fields (always present for backward compat)
-    header,
-    footer,
-    left,
-    right,
     notFound,
     // Versioned scopes: route → { versions, latestId }
     versionedScopes: versionedScopesObj,