@uniweb/build 0.6.4 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -51,7 +51,7 @@
   },
   "optionalDependencies": {
     "@uniweb/schemas": "0.2.1",
-    "@uniweb/runtime": "0.5.13",
+    "@uniweb/runtime": "0.5.14",
     "@uniweb/content-reader": "1.1.2"
   },
   "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.2"
+    "@uniweb/core": "0.4.3"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/i18n/extract.js

@@ -41,7 +41,7 @@ export function extractTranslatableContent(siteContent) {
   for (const layoutKey of ['header', 'footer', 'left', 'right']) {
     const layoutPage = siteContent[layoutKey]
     if (layoutPage?.sections) {
-      const pageRoute = layoutPage.route || `/@${layoutKey}`
+      const pageRoute = layoutPage.route || `/layout/${layoutKey}`
       for (const section of layoutPage.sections) {
         extractFromSection(section, pageRoute, units)
       }

package/src/i18n/merge.js

@@ -80,7 +80,7 @@ function mergeTranslationsSync(siteContent, translations, fallbackToSource) {
   for (const layoutKey of ['header', 'footer', 'left', 'right']) {
     const layoutPage = translated[layoutKey]
     if (layoutPage?.sections) {
-      const pageRoute = layoutPage.route || `/@${layoutKey}`
+      const pageRoute = layoutPage.route || `/layout/${layoutKey}`
       for (const section of layoutPage.sections) {
         translateSectionSync(section, pageRoute, translations, fallbackToSource)
       }
@@ -132,8 +132,8 @@ async function mergeTranslationsAsync(siteContent, translations, options) {
   for (const layoutKey of ['header', 'footer', 'left', 'right']) {
     const layoutPage = translated[layoutKey]
     if (layoutPage?.sections) {
-      // Ensure route is set for context matching (extract uses /@header, etc.)
-      if (!layoutPage.route) layoutPage.route = `/@${layoutKey}`
+      // Ensure route is set for context matching
+      if (!layoutPage.route) layoutPage.route = `/layout/${layoutKey}`
       for (const section of layoutPage.sections) {
         await translateSectionAsync(section, layoutPage, translations, {
           fallbackToSource,

package/src/search/extract.js

@@ -41,11 +41,6 @@ export function extractSearchContent(siteContent, options = {}) {
       continue
     }
 
-    // Skip special pages (header, footer, etc.)
-    if (pageRoute.startsWith('/@')) {
-      continue
-    }
-
     // Skip pages marked as noindex
     if (page.seo?.noindex) {
       continue

package/src/site/collection-processor.js

@@ -26,7 +26,7 @@
  */
 
 import { readFile, readdir, stat, writeFile, mkdir, copyFile } from 'node:fs/promises'
-import { join, basename, extname, dirname, relative } from 'node:path'
+import { join, basename, extname, dirname, relative, resolve } from 'node:path'
 import { existsSync } from 'node:fs'
 import yaml from 'js-yaml'
 import { applyFilter, applySort } from './data-fetcher.js'
@@ -421,8 +421,9 @@ async function processContentItem(dir, filename, config, siteRoot) {
  * @param {Object} config - Parsed collection config
  * @returns {Promise<Array>} Array of processed items
  */
-async function collectItems(siteDir, config) {
-  const collectionDir = join(siteDir, config.path)
+async function collectItems(siteDir, config, collectionsBase) {
+  const base = collectionsBase || siteDir
+  const collectionDir = resolve(base, config.path)
 
   // Check if collection directory exists
   if (!existsSync(collectionDir)) {
@@ -496,7 +497,7 @@ async function collectItems(siteDir, config) {
  * })
  * // { articles: [...], products: [...] }
  */
-export async function processCollections(siteDir, collectionsConfig) {
+export async function processCollections(siteDir, collectionsConfig, collectionsBase) {
   if (!collectionsConfig || typeof collectionsConfig !== 'object') {
     return {}
   }
@@ -505,7 +506,7 @@ export async function processCollections(siteDir, collectionsConfig) {
 
   for (const [name, config] of Object.entries(collectionsConfig)) {
     const parsed = parseCollectionConfig(name, config)
-    const items = await collectItems(siteDir, parsed)
+    const items = await collectItems(siteDir, parsed, collectionsBase)
     results[name] = items
     console.log(`[collection-processor] Processed ${name}: ${items.length} items`)
   }

package/src/site/config.js

@@ -328,7 +328,21 @@ export async function defineSiteConfig(options = {}) {
     server: {
       fs: {
         // Allow parent directory for foundation sibling access
-        allow: ['..']
+        // Plus any external content paths from site.yml paths: group
+        allow: (() => {
+          const allowed = ['..']
+          const parentDir = resolve(siteRoot, '..')
+          const paths = siteConfig.paths || {}
+          for (const key of ['pages', 'layout', 'collections']) {
+            if (paths[key]) {
+              const resolved = resolve(siteRoot, paths[key])
+              if (!resolved.startsWith(parentDir)) {
+                allowed.push(resolved)
+              }
+            }
+          }
+          return allowed
+        })()
       },
       ...(siteConfig.build?.port && { port: siteConfig.build.port }),
       ...serverOverrides

package/src/site/content-collector.js

@@ -1,11 +1,12 @@
 /**
  * Content Collector
  *
- * Collects site content from a pages/ directory structure:
+ * Collects site content from a site directory structure:
  * - site.yml: Site configuration
  * - pages/: Directory of page folders
  *   - page.yml: Page metadata
  *   - *.md: Section content with YAML frontmatter
+ * - layout/: Layout panel folders (header, footer, left, right)
  *
  * Section frontmatter reserved properties:
  * - type: Component type (e.g., "Hero", "Features")
@@ -23,7 +24,7 @@
  */
 
 import { readFile, readdir, stat } from 'node:fs/promises'
-import { join, parse } from 'node:path'
+import { join, parse, resolve } from 'node:path'
 import { existsSync } from 'node:fs'
 import yaml from 'js-yaml'
 import { collectSectionAssets, mergeAssetCollections } from './assets.js'
@@ -502,10 +503,7 @@ async function processPage(pagePath, pageName, siteRoot, { isIndex = false, pare
 
   // First, calculate the folder-based route (what the route would be without index handling)
   let folderRoute
-  if (pageName.startsWith('@')) {
-    // Special pages (layout areas) keep their @ prefix
-    folderRoute = parentRoute === '/' ? `/@${pageName.slice(1)}` : `${parentRoute}/@${pageName.slice(1)}`
-  } else if (isDynamic) {
+  if (isDynamic) {
     // Dynamic routes: /blog/[slug] → /blog/:slug (for route matching)
     folderRoute = parentRoute === '/' ? `/:${paramName}` : `${parentRoute}/:${paramName}`
   } else {
@@ -648,10 +646,6 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     icons: new Set(),
     bySource: new Map()
   }
-  let header = null
-  let footer = null
-  let left = null
-  let right = null
   let notFound = null
   const versionedScopes = new Map() // scope route → versionMeta
 
@@ -737,8 +731,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
         for (const [scope, meta] of subResult.versionedScopes) {
           versionedScopes.set(scope, meta)
         }
-      } else if (!entry.startsWith('@')) {
-        // Non-version, non-special folders in a versioned section
+      } else {
+        // Non-version folders in a versioned section
         // These could be shared across versions - process normally
         const result = await processPage(entryPath, entry, siteRoot, {
           isIndex: false,
@@ -755,14 +749,14 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     }
 
     // Return early - we've handled all children
-    return { pages, assetCollection, iconCollection, header, footer, left, right, notFound, versionedScopes }
+    return { pages, assetCollection, iconCollection, notFound, versionedScopes }
   }
 
   // Determine which page is the index for this level
   // A directory with its own .md content is a real page, not a container —
   // never promote a child as index, even if explicit config says so
   // (that config is likely a leftover from before the directory had content)
-  const regularFolders = pageFolders.filter(f => !f.name.startsWith('@'))
+  const regularFolders = pageFolders
   const hasExplicitOrder = orderConfig?.index || (Array.isArray(orderConfig?.pages) && orderConfig.pages.length > 0)
   const hasMdContent = entries.some(e => isMarkdownFile(e))
   const indexPageName = hasMdContent ? null : determineIndexPage(orderConfig, regularFolders)
@@ -771,12 +765,11 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
   for (const folder of pageFolders) {
     const { name: entry, path: entryPath, childOrderConfig } = folder
     const isIndex = entry === indexPageName
-    const isSpecial = entry.startsWith('@')
 
     // Process this directory as a page
     // Pass parentFetch so dynamic routes can inherit parent's data schema
     const result = await processPage(entryPath, entry, siteRoot, {
-      isIndex: isIndex && !isSpecial,
+      isIndex,
       parentRoute,
       parentFetch,
       versionContext
@@ -787,27 +780,15 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
       assetCollection = mergeAssetCollections(assetCollection, pageAssets)
       iconCollection = mergeIconCollections(iconCollection, pageIcons)
 
-      // Handle special pages (layout areas and 404) - only at root level
-      if (parentRoute === '/') {
-        if (entry === '@header') {
-          header = page
-        } else if (entry === '@footer') {
-          footer = page
-        } else if (entry === '@left') {
-          left = page
-        } else if (entry === '@right') {
-          right = page
-        } else if (entry === '404') {
-          notFound = page
-        } else {
-          pages.push(page)
-        }
+      // Handle 404 page - only at root level
+      if (parentRoute === '/' && entry === '404') {
+        notFound = page
       } else {
         pages.push(page)
       }
 
-      // Recursively process subdirectories (but not special @ directories)
-      if (!isSpecial) {
+      // Recursively process subdirectories
+      {
         // The child route depends on whether this page is the index
         // For explicit index (from site.yml `index:` or `pages:`), children use parentRoute
         // since that's a true structural promotion. For auto-detected index, children use
@@ -830,7 +811,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     }
   }
 
-  return { pages, assetCollection, iconCollection, header, footer, left, right, notFound, versionedScopes }
+  return { pages, assetCollection, iconCollection, notFound, versionedScopes }
 }
 
 /**
@@ -863,6 +844,43 @@ async function loadFoundationVars(foundationPath) {
   }
 }
 
+/**
+ * Collect layout panels from the layout/ directory
+ *
+ * Layout panels (header, footer, left, right) are persistent regions
+ * that appear on every page. They live in layout/ parallel to pages/.
+ *
+ * @param {string} layoutDir - Path to layout directory
+ * @param {string} siteRoot - Path to site root
+ * @returns {Promise<Object>} { header, footer, left, right }
+ */
+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 entry of entries) {
+    if (!knownPanels.includes(entry)) continue
+    const entryPath = join(layoutDir, entry)
+    const stats = await stat(entryPath)
+    if (!stats.isDirectory()) continue
+
+    const pageResult = await processPage(entryPath, entry, siteRoot, {
+      isIndex: false,
+      parentRoute: '/layout'
+    })
+
+    if (pageResult) {
+      result[entry] = pageResult.page
+    }
+  }
+
+  return result
+}
+
 /**
  * Collect all site content
  *
@@ -873,10 +891,18 @@ async function loadFoundationVars(foundationPath) {
  */
 export async function collectSiteContent(sitePath, options = {}) {
   const { foundationPath } = options
-  const pagesPath = join(sitePath, 'pages')
 
   // Read site config and raw theme config
   const siteConfig = await readYamlFile(join(sitePath, 'site.yml'))
+
+  // Resolve content paths from site.yml paths: group, defaulting to standard locations
+  const pagesPath = siteConfig.paths?.pages
+    ? resolve(sitePath, siteConfig.paths.pages)
+    : join(sitePath, 'pages')
+
+  const layoutPath = siteConfig.paths?.layout
+    ? resolve(sitePath, siteConfig.paths.layout)
+    : join(sitePath, 'layout')
   const rawThemeConfig = await readYamlFile(join(sitePath, 'theme.yml'))
 
   // Load foundation vars and process theme
@@ -907,8 +933,11 @@ export async function collectSiteContent(sitePath, options = {}) {
     index: siteConfig.index
   }
 
+  // Collect layout panels from layout/ directory
+  const { header, footer, left, right } = await collectLayoutPanels(layoutPath, sitePath)
+
   // Recursively collect all pages
-  const { pages, assetCollection, iconCollection, header, footer, left, right, notFound, versionedScopes } =
+  const { pages, assetCollection, iconCollection, notFound, versionedScopes } =
     await collectPagesRecursive(pagesPath, '/', sitePath, siteOrderConfig)
 
   // Deduplicate: remove content-less container pages whose route duplicates

package/src/site/plugin.js

@@ -376,6 +376,9 @@ export function siteContentPlugin(options = {}) {
   let collectionTranslations = {} // Cache: { locale: collection translations }
   let localesDir = 'locales' // Default, updated from site config
   let collectionsConfig = null // Cached for watcher setup
+  let resolvedPagesPath = null // Resolved from site.yml pagesDir or default
+  let resolvedLayoutPath = null // Resolved from site.yml layoutDir or default
+  let resolvedCollectionsBase = null // Resolved from site.yml collectionsDir
 
   /**
    * Load translations for a specific locale
@@ -486,15 +489,43 @@ export function siteContentPlugin(options = {}) {
           const earlyContent = await collectSiteContent(resolvedSitePath, { foundationPath })
           collectionsConfig = earlyContent.config?.collections
 
+          // Resolve content directory paths from site.yml paths: group
+          const paths = earlyContent?.config?.paths || {}
+          resolvedPagesPath = paths.pages
+            ? resolve(resolvedSitePath, paths.pages)
+            : resolve(resolvedSitePath, pagesDir)
+          resolvedLayoutPath = paths.layout
+            ? resolve(resolvedSitePath, paths.layout)
+            : resolve(resolvedSitePath, 'layout')
+          resolvedCollectionsBase = paths.collections
+            ? resolve(resolvedSitePath, paths.collections)
+            : null
+
           if (collectionsConfig) {
             console.log('[site-content] Processing content collections...')
-            const collections = await processCollections(resolvedSitePath, collectionsConfig)
+            const collections = await processCollections(resolvedSitePath, collectionsConfig, resolvedCollectionsBase)
             await writeCollectionFiles(resolvedSitePath, collections)
           }
         } catch (err) {
           console.warn('[site-content] Early collection processing failed:', err.message)
         }
       }
+
+      // In production, resolve content paths from site.yml directly
+      if (isProduction || !resolvedPagesPath) {
+        const { readSiteConfig } = await import('./config.js')
+        const cfg = readSiteConfig(resolvedSitePath)
+        const paths = cfg.paths || {}
+        resolvedPagesPath = paths.pages
+          ? resolve(resolvedSitePath, paths.pages)
+          : resolve(resolvedSitePath, pagesDir)
+        resolvedLayoutPath = paths.layout
+          ? resolve(resolvedSitePath, paths.layout)
+          : resolve(resolvedSitePath, 'layout')
+        resolvedCollectionsBase = paths.collections
+          ? resolve(resolvedSitePath, paths.collections)
+          : null
+      }
     },
 
     async buildStart() {
@@ -508,7 +539,7 @@ export function siteContentPlugin(options = {}) {
         // In production, do it here
         if (isProduction && siteContent.config?.collections) {
           console.log('[site-content] Processing content collections...')
-          const collections = await processCollections(resolvedSitePath, siteContent.config.collections)
+          const collections = await processCollections(resolvedSitePath, siteContent.config.collections, resolvedCollectionsBase)
           await writeCollectionFiles(resolvedSitePath, collections)
         }
 
@@ -537,7 +568,6 @@ export function siteContentPlugin(options = {}) {
 
       // Watch for content changes in dev mode
       if (shouldWatch) {
-        const pagesPath = resolve(resolvedSitePath, pagesDir)
         const siteYmlPath = resolve(resolvedSitePath, 'site.yml')
         const themeYmlPath = resolve(resolvedSitePath, 'theme.yml')
 
@@ -571,7 +601,7 @@ export function siteContentPlugin(options = {}) {
               // Use collectionsConfig (cached from configResolved) or siteContent
               const collections = collectionsConfig || siteContent?.config?.collections
               if (collections) {
-                const processed = await processCollections(resolvedSitePath, collections)
+                const processed = await processCollections(resolvedSitePath, collections, resolvedCollectionsBase)
                 await writeCollectionFiles(resolvedSitePath, processed)
               }
               // Send full reload to client
@@ -585,12 +615,24 @@ export function siteContentPlugin(options = {}) {
         // Track all watchers for cleanup
         const watchers = []
 
-        // Watch pages directory
-        try {
-          watchers.push(watch(pagesPath, { recursive: true }, scheduleRebuild))
-          console.log(`[site-content] Watching ${pagesPath}`)
-        } catch (err) {
-          console.warn('[site-content] Could not watch pages directory:', err.message)
+        // Watch pages directory (resolved from site.yml pagesDir or default)
+        if (existsSync(resolvedPagesPath)) {
+          try {
+            watchers.push(watch(resolvedPagesPath, { recursive: true }, scheduleRebuild))
+            console.log(`[site-content] Watching ${resolvedPagesPath}`)
+          } catch (err) {
+            console.warn('[site-content] Could not watch pages directory:', err.message)
+          }
+        }
+
+        // Watch layout directory (resolved from site.yml layoutDir or default)
+        if (existsSync(resolvedLayoutPath)) {
+          try {
+            watchers.push(watch(resolvedLayoutPath, { recursive: true }, scheduleRebuild))
+            console.log(`[site-content] Watching ${resolvedLayoutPath}`)
+          } catch (err) {
+            console.warn('[site-content] Could not watch layout directory:', err.message)
+          }
         }
 
         // Watch site.yml
@@ -611,10 +653,11 @@ export function siteContentPlugin(options = {}) {
         // Use collectionsConfig cached from configResolved (siteContent may be null here)
         if (collectionsConfig) {
           const contentPaths = new Set()
+          const collectionBase = resolvedCollectionsBase || resolvedSitePath
           for (const config of Object.values(collectionsConfig)) {
             const collectionPath = typeof config === 'string' ? config : config.path
             if (collectionPath) {
-              contentPaths.add(resolve(resolvedSitePath, collectionPath))
+              contentPaths.add(resolve(collectionBase, collectionPath))
             }
           }