@uniweb/build 0.6.20 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.6.20",
+  "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.7"
+    "@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,9 +112,10 @@ function generateEntrySource(components, options = {}) {
     lines.push(`import '${cssPath}'`)
   }
 
-  // Foundation capabilities import (for custom Layout, props, etc.)
+  // 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 capabilities from '${foundationExports.path}'`)
+    lines.push(`import * as _foundationModule from '${foundationExports.path}'`)
   }
 
   // Component imports
@@ -118,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
@@ -129,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')
@@ -147,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')
@@ -201,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) {
@@ -212,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
@@ -235,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}`)
   }
@@ -242,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()
+  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,10 +110,11 @@ 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,
+      defaultLayout: module.default?.defaultLayout,
     }
   } catch (error) {
     console.warn(`Warning: Failed to load foundation config ${filePath}:`, error.message)
@@ -252,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
  *
@@ -376,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,12 +312,13 @@ export function rewriteSiteContentPaths(siteContent, pathMapping) {
     result.pages.forEach(processPage)
   }
 
-  // Process header and footer
-  if (result.header) {
-    processPage(result.header)
-  }
-  if (result.footer) {
-    processPage(result.footer)
+  // Process layout area sets
+  if (result.layouts) {
+    for (const [name, areas] of Object.entries(result.layouts)) {
+      for (const areaPage of Object.values(areas)) {
+        if (areaPage) processPage(areaPage)
+      }
+    }
   }
 
   // Remove the assets manifest from output (no longer needed at runtime)

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,
@@ -765,7 +760,7 @@ async function processExplicitSections(sectionsConfig, pagePath, siteRoot, paren
  * @param {Object} options.versionContext - Version context from parent { version, versionMeta, scope }
  * @returns {Object} Page data with assets manifest
  */
-async function processPage(pagePath, pageName, siteRoot, { isIndex = false, parentRoute = '/', parentFetch = null, versionContext = null } = {}) {
+async function processPage(pagePath, pageName, siteRoot, { isIndex = false, parentRoute = '/', parentFetch = null, versionContext = null, layoutName = null } = {}) {
   const pageConfig = await readYamlFile(join(pagePath, 'page.yml'))
 
   // Note: We no longer skip hidden pages here - they still exist as valid pages,
@@ -925,7 +920,15 @@ async function processPage(pagePath, pageName, siteRoot, { isIndex = false, pare
   const sourcePath = isIndex ? folderRoute : null
 
   // Extract configuration
-  const { seo = {}, layout = {}, ...restConfig } = pageConfig
+  const { seo = {}, layout: layoutConfig, ...restConfig } = pageConfig
+
+  // Resolve layout name: page.yml layout (string or object.name) > inherited from parent > null
+  const pageLayoutName = typeof layoutConfig === 'string' ? layoutConfig
+    : layoutConfig?.name || null
+  const resolvedLayoutName = pageLayoutName || layoutName || null
+
+  // Layout panel visibility (from object form of layout config)
+  const layoutObj = typeof layoutConfig === 'object' && layoutConfig !== null ? layoutConfig : {}
 
   // For dynamic routes, determine the parent's data schema
   // This tells prerender which data array to iterate over
@@ -960,12 +963,11 @@ async function processPage(pagePath, pageName, siteRoot, { isIndex = false, pare
       hideInHeader: pageConfig.hideInHeader || false, // Hide from header nav
       hideInFooter: pageConfig.hideInFooter || false, // Hide from footer nav
 
-      // Layout options (per-page overrides)
+      // Layout options (named layout + per-page overrides)
       layout: {
-        header: layout.header !== false, // Show header (default true)
-        footer: layout.footer !== false, // Show footer (default true)
-        leftPanel: layout.leftPanel !== false, // Show left panel (default true)
-        rightPanel: layout.rightPanel !== false // Show right panel (default true)
+        ...(resolvedLayoutName ? { name: resolvedLayoutName } : {}),
+        ...(layoutObj.hide ? { hide: layoutObj.hide } : {}),
+        ...(layoutObj.params ? { params: layoutObj.params } : {}),
       },
 
       seo: {
@@ -1045,7 +1047,7 @@ function determineIndexPage(orderConfig, availableFolders) {
  * @param {string} contentMode - 'sections' (default) or 'pages' (md files are child pages)
  * @returns {Promise<Object>} { pages, assetCollection, iconCollection, notFound, versionedScopes }
  */
-async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig = {}, parentFetch = null, versionContext = null, contentMode = 'sections', mounts = null) {
+async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig = {}, parentFetch = null, versionContext = null, contentMode = 'sections', mounts = null, parentLayoutName = null) {
   const entries = await readdir(dirPath)
   const pages = []
   let assetCollection = {
@@ -1072,6 +1074,10 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     const { config: dirConfig, mode: dirMode } = await readFolderConfig(entryPath, contentMode)
     const numericOrder = typeof dirConfig.order === 'number' ? dirConfig.order : undefined
 
+    // Extract layout name from folder config (folder.yml layout: or page.yml layout:)
+    const folderLayout = typeof dirConfig.layout === 'string' ? dirConfig.layout
+      : dirConfig.layout?.name || null
+
     pageFolders.push({
       name: entry,
       path: entryPath,
@@ -1081,7 +1087,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
       childOrderConfig: {
         pages: dirConfig.pages,
         index: dirConfig.index
-      }
+      },
+      childLayoutName: folderLayout
     })
   }
 
@@ -1090,6 +1097,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     for (const [routeSegment, mountPath] of mounts) {
       if (!pageFolders.some(f => f.name === routeSegment)) {
         const { config: mountConfig } = await readFolderConfig(mountPath, 'pages')
+        const mountLayout = typeof mountConfig.layout === 'string' ? mountConfig.layout
+          : mountConfig.layout?.name || null
         pageFolders.push({
           name: routeSegment,
           path: mountPath,
@@ -1099,7 +1108,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
           childOrderConfig: {
             pages: mountConfig.pages,
             index: mountConfig.index
-          }
+          },
+          childLayoutName: mountLayout
         })
       }
     }
@@ -1140,7 +1150,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     versionedScopes.set(parentRoute, versionMeta)
 
     for (const folder of orderedFolders) {
-      const { name: entry, path: entryPath, childOrderConfig } = folder
+      const { name: entry, path: entryPath, childOrderConfig, childLayoutName } = folder
 
       if (isVersionFolder(entry)) {
         const versionInfo = versionMeta.versions.find(v => v.id === entry)
@@ -1153,7 +1163,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
 
         const subResult = await collectPagesRecursive(
           entryPath, versionRoute, siteRoot, childOrderConfig, parentFetch,
-          { version: versionInfo, versionMeta, scope: parentRoute }
+          { version: versionInfo, versionMeta, scope: parentRoute },
+          'sections', null, childLayoutName || parentLayoutName
         )
 
         pages.push(...subResult.pages)
@@ -1164,7 +1175,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
         }
       } else {
         const result = await processPage(entryPath, entry, siteRoot, {
-          isIndex: false, parentRoute, parentFetch
+          isIndex: false, parentRoute, parentFetch,
+          layoutName: childLayoutName || parentLayoutName
         })
         if (result) {
           pages.push(result.page)
@@ -1228,18 +1240,25 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
         page.route = parentRoute
       }
 
+      // Inherit layout name from parent (folder.yml or site.yml cascade)
+      if (parentLayoutName && !page.layout.name) {
+        page.layout.name = parentLayoutName
+      }
+
       pages.push(page)
     }
 
     // Process subdirectories
     for (const folder of orderedFolders) {
-      const { name: entry, path: entryPath, dirConfig, dirMode, childOrderConfig } = folder
+      const { name: entry, path: entryPath, dirConfig, dirMode, childOrderConfig, childLayoutName } = folder
       const isIndex = entry === indexName
+      const effectiveLayout = childLayoutName || parentLayoutName
 
       if (dirMode === 'sections') {
         // Subdirectory overrides to page mode — process normally
         const result = await processPage(entryPath, entry, siteRoot, {
-          isIndex, parentRoute, parentFetch, versionContext
+          isIndex, parentRoute, parentFetch, versionContext,
+          layoutName: effectiveLayout
         })
 
         if (result) {
@@ -1252,7 +1271,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
           const childDirPath = mounts?.get(entry) || entryPath
           const childParentRoute = isIndex ? parentRoute : page.route
           const childFetch = page.fetch || parentFetch
-          const subResult = await collectPagesRecursive(childDirPath, childParentRoute, siteRoot, childOrderConfig, childFetch, versionContext, 'sections', null)
+          const subResult = await collectPagesRecursive(childDirPath, childParentRoute, siteRoot, childOrderConfig, childFetch, versionContext, 'sections', null, effectiveLayout)
           pages.push(...subResult.pages)
           assetCollection = mergeAssetCollections(assetCollection, subResult.assetCollection)
           iconCollection = mergeIconCollections(iconCollection, subResult.iconCollection)
@@ -1266,6 +1285,9 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
           ? parentRoute
           : parentRoute === '/' ? `/${entry}` : `${parentRoute}/${entry}`
 
+        // Resolve layout for container page
+        const containerLayoutObj = typeof dirConfig.layout === 'object' && dirConfig.layout !== null ? dirConfig.layout : {}
+
         const containerPage = {
           route: containerRoute,
           sourcePath: isIndex ? (parentRoute === '/' ? `/${entry}` : `${parentRoute}/${entry}`) : null,
@@ -1285,10 +1307,9 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
           hideInHeader: dirConfig.hideInHeader || false,
           hideInFooter: dirConfig.hideInFooter || false,
           layout: {
-            header: dirConfig.layout?.header !== false,
-            footer: dirConfig.layout?.footer !== false,
-            leftPanel: dirConfig.layout?.leftPanel !== false,
-            rightPanel: dirConfig.layout?.rightPanel !== false
+            ...(effectiveLayout ? { name: effectiveLayout } : {}),
+            ...(containerLayoutObj.hide ? { hide: containerLayoutObj.hide } : {}),
+            ...(containerLayoutObj.params ? { params: containerLayoutObj.params } : {}),
           },
           seo: {
             noindex: dirConfig.seo?.noindex || false,
@@ -1305,7 +1326,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
 
         // Recurse in folder mode
         const childDirPath = mounts?.get(entry) || entryPath
-        const subResult = await collectPagesRecursive(childDirPath, containerRoute, siteRoot, childOrderConfig, parentFetch, versionContext, 'pages', null)
+        const subResult = await collectPagesRecursive(childDirPath, containerRoute, siteRoot, childOrderConfig, parentFetch, versionContext, 'pages', null, effectiveLayout)
         pages.push(...subResult.pages)
         assetCollection = mergeAssetCollections(assetCollection, subResult.assetCollection)
         iconCollection = mergeIconCollections(iconCollection, subResult.iconCollection)
@@ -1340,8 +1361,9 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
 
   // Second pass: process each page folder
   for (const folder of orderedFolders) {
-    const { name: entry, path: entryPath, dirConfig, dirMode, childOrderConfig } = folder
+    const { name: entry, path: entryPath, dirConfig, dirMode, childOrderConfig, childLayoutName } = folder
     const isIndex = entry === indexPageName
+    const effectiveLayout = childLayoutName || parentLayoutName
 
     if (dirMode === 'pages') {
       // Child directory switches to folder mode (has folder.yml) —
@@ -1350,6 +1372,9 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
         ? parentRoute
         : parentRoute === '/' ? `/${entry}` : `${parentRoute}/${entry}`
 
+      // Resolve layout for container page
+      const containerLayoutObj = typeof dirConfig.layout === 'object' && dirConfig.layout !== null ? dirConfig.layout : {}
+
       const containerPage = {
         route: containerRoute,
         sourcePath: isIndex ? (parentRoute === '/' ? `/${entry}` : `${parentRoute}/${entry}`) : null,
@@ -1369,10 +1394,9 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
         hideInHeader: dirConfig.hideInHeader || false,
         hideInFooter: dirConfig.hideInFooter || false,
         layout: {
-          header: dirConfig.layout?.header !== false,
-          footer: dirConfig.layout?.footer !== false,
-          leftPanel: dirConfig.layout?.leftPanel !== false,
-          rightPanel: dirConfig.layout?.rightPanel !== false
+          ...(effectiveLayout ? { name: effectiveLayout } : {}),
+          ...(containerLayoutObj.hide ? { hide: containerLayoutObj.hide } : {}),
+          ...(containerLayoutObj.params ? { params: containerLayoutObj.params } : {}),
         },
         seo: {
           noindex: dirConfig.seo?.noindex || false,
@@ -1392,7 +1416,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
       }
 
       const childDirPath = mounts?.get(entry) || entryPath
-      const subResult = await collectPagesRecursive(childDirPath, containerRoute, siteRoot, childOrderConfig, parentFetch, versionContext, 'pages', null)
+      const subResult = await collectPagesRecursive(childDirPath, containerRoute, siteRoot, childOrderConfig, parentFetch, versionContext, 'pages', null, effectiveLayout)
       pages.push(...subResult.pages)
       assetCollection = mergeAssetCollections(assetCollection, subResult.assetCollection)
       iconCollection = mergeIconCollections(iconCollection, subResult.iconCollection)
@@ -1402,7 +1426,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     } else {
       // Sections mode — process directory as a page (existing behavior)
       const result = await processPage(entryPath, entry, siteRoot, {
-        isIndex, parentRoute, parentFetch, versionContext
+        isIndex, parentRoute, parentFetch, versionContext,
+        layoutName: effectiveLayout
       })
 
       if (result) {
@@ -1424,7 +1449,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
             ? (hasExplicitOrder ? parentRoute : (page.sourcePath || page.route))
             : page.route
           const childFetch = page.fetch || parentFetch
-          const subResult = await collectPagesRecursive(childDirPath, childParentRoute, siteRoot, childOrderConfig, childFetch, versionContext, dirMode, null)
+          const subResult = await collectPagesRecursive(childDirPath, childParentRoute, siteRoot, childOrderConfig, childFetch, versionContext, dirMode, null, effectiveLayout)
           pages.push(...subResult.pages)
           assetCollection = mergeAssetCollections(assetCollection, subResult.assetCollection)
           iconCollection = mergeIconCollections(iconCollection, subResult.iconCollection)
@@ -1481,63 +1506,159 @@ async function loadFoundationVars(foundationPath) {
 }
 
 /**
- * Collect layout panels from the layout/ directory
+ * Collect areas from a single directory (general named areas, not hardcoded).
  *
- * Layout panels (header, footer, left, right) are persistent regions
- * that appear on every page. They live in layout/ parallel to pages/.
- *
- * Supports two forms:
- *   - Folder: layout/header/ (directory with .md files, like a page)
- *   - File shorthand: layout/header.md (single markdown file)
+ * 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} layoutDir - Path to layout directory
+ * @param {string} dir - Directory to scan for area files
  * @param {string} siteRoot - Path to site root
- * @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 collectLayoutPanels(layoutDir, siteRoot) {
-  const result = { header: null, footer: null, left: null, right: null }
-
-  if (!existsSync(layoutDir)) return result
-
-  const knownPanels = ['header', 'footer', 'left', 'right']
-  const entries = await readdir(layoutDir)
-
-  for (const panel of knownPanels) {
-    // Folder form (higher priority)
-    if (entries.includes(panel)) {
-      const entryPath = join(layoutDir, panel)
-      const stats = await stat(entryPath)
-      if (stats.isDirectory()) {
-        const pageResult = await processPage(entryPath, panel, siteRoot, {
-          isIndex: false,
-          parentRoute: '/layout'
-        })
-        if (pageResult) {
-          result[panel] = pageResult.page
-        }
-        continue
-      }
+async function collectAreasFromDir(dir, siteRoot, routePrefix = '/layout') {
+  const result = {}
+
+  if (!existsSync(dir)) return result
+
+  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: layout/header.md
-    const mdFile = `${panel}.md`
-    if (entries.includes(mdFile)) {
-      const filePath = join(layoutDir, mdFile)
-      const { section } = await processMarkdownFile(filePath, '1', siteRoot, panel)
-      result[panel] = {
-        route: `/layout/${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]
     }
   }
 
   return result
 }
 
+/**
+ * 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 .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 }
+ */
+async function collectLayouts(layoutDir, siteRoot) {
+  if (!existsSync(layoutDir)) {
+    return { layouts: null }
+  }
+
+  const entries = await readdir(layoutDir, { withFileTypes: true })
+
+  // 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.name.startsWith('_') || entry.name.startsWith('.')) continue
+
+    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 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 }
+  }
+
+  // Always use the layouts object format (general areas)
+  const layouts = {}
+  if (hasDefaultAreas) {
+    layouts.default = defaultAreas
+  }
+  Object.assign(layouts, namedLayouts)
+
+  return { layouts }
+}
+
 /**
  * Collect all site content
  *
@@ -1595,12 +1716,16 @@ 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
-  const { header, footer, left, right } = await collectLayoutPanels(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
+    : siteConfig.layout?.name || null
 
   // Recursively collect all pages
   const { pages, assetCollection, iconCollection, notFound, versionedScopes } =
-    await collectPagesRecursive(pagesPath, '/', sitePath, siteOrderConfig, null, null, rootContentMode, mounts)
+    await collectPagesRecursive(pagesPath, '/', sitePath, siteOrderConfig, null, null, rootContentMode, mounts, siteLayoutName)
 
   // Deduplicate: remove content-less container pages whose route duplicates
   // a content-bearing page (e.g., a promoted index page)
@@ -1679,10 +1804,8 @@ export async function collectSiteContent(sitePath, options = {}) {
       css: themeCSS
     },
     pages,
-    header,
-    footer,
-    left,
-    right,
+    // Layout area sets: { default: { header: page, footer: page, ... }, marketing: { ... } }
+    layouts,
     notFound,
     // Versioned scopes: route → { versions, latestId }
     versionedScopes: versionedScopesObj,