@uniweb/build 0.1.31 → 0.1.33

package/README.md

@@ -333,6 +333,34 @@ dist/
             └── default.webp
 ```
 
+### Schema.json Structure
+
+The generated `schema.json` contains:
+
+```json
+{
+  "_self": {
+    "name": "foundation",
+    "version": "0.1.0",
+    "description": "My foundation description",
+    "vars": { ... }
+  },
+  "Hero": { ... },
+  "Features": { ... }
+}
+```
+
+The `_self` object contains foundation-level metadata:
+
+| Field | Source | Description |
+|-------|--------|-------------|
+| `name` | `package.json` | Foundation package name |
+| `version` | `package.json` | Foundation version |
+| `description` | `package.json` | Foundation description |
+| `vars` | `foundation.js` | CSS custom properties sites can override |
+
+Identity fields (`name`, `version`, `description`) come from the foundation's `package.json`. Configuration fields (`vars`, etc.) come from `src/foundation.js`.
+
 ## API Reference
 
 ### Schema Functions
@@ -341,7 +369,8 @@ dist/
 |----------|-------------|
 | `discoverComponents(srcDir)` | Discover all exposed components |
 | `loadComponentMeta(componentDir)` | Load meta file for a component |
-| `loadFoundationMeta(srcDir)` | Load foundation-level meta |
+| `loadPackageJson(srcDir)` | Load identity from package.json |
+| `loadFoundationConfig(srcDir)` | Load foundation.js configuration |
 | `buildSchema(srcDir)` | Build complete schema object |
 
 ### Entry Generation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -51,7 +51,7 @@
   },
   "optionalDependencies": {
     "@uniweb/content-reader": "1.0.4",
-    "@uniweb/runtime": "0.2.17"
+    "@uniweb/runtime": "0.2.19"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
@@ -60,7 +60,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.0.0 || ^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
-    "@uniweb/core": "0.1.14"
+    "@uniweb/core": "0.1.16"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/generate-entry.js

@@ -26,20 +26,41 @@ import { discoverComponents } from './schema.js'
 import { extractAllRuntimeSchemas } from './runtime-schema.js'
 
 /**
- * Detect foundation exports file (for custom Layout, props, etc.)
- * Looks for: src/exports.js, src/exports.jsx, src/exports/index.js, src/exports/index.jsx
+ * Detect foundation config/exports file (for custom Layout, 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)
  */
 function detectFoundationExports(srcDir) {
-  const candidates = [
+  // Prefer foundation.js (new consolidated format)
+  const foundationCandidates = [
+    { path: 'foundation.js', ext: 'js' },
+    { path: 'foundation.jsx', ext: 'jsx' },
+  ]
+
+  for (const { path, ext } of foundationCandidates) {
+    if (existsSync(join(srcDir, path))) {
+      return { path: `./${path}`, ext, isFoundationJs: true }
+    }
+  }
+
+  // Fall back to exports.js (legacy format)
+  const legacyCandidates = [
     { path: 'exports.js', ext: 'js' },
     { path: 'exports.jsx', ext: 'jsx' },
     { path: 'exports/index.js', ext: 'js' },
     { path: 'exports/index.jsx', ext: 'jsx' },
   ]
 
-  for (const { path, ext } of candidates) {
+  for (const { path, ext } of legacyCandidates) {
     if (existsSync(join(srcDir, path))) {
-      return { path: `./${path.replace(/\/index\.(js|jsx)$/, '')}`, ext }
+      return { path: `./${path.replace(/\/index\.(js|jsx)$/, '')}`, ext, isFoundationJs: false }
     }
   }
   return null

package/src/index.js

@@ -7,7 +7,8 @@
 // Schema discovery and loading
 export {
   loadComponentMeta,
-  loadFoundationMeta,
+  loadFoundationConfig,
+  loadFoundationMeta, // @deprecated - use loadFoundationConfig
   discoverComponents,
   buildSchema,
   getExposedComponents,

package/src/prerender.js

@@ -516,6 +516,14 @@ export async function prerenderSite(siteDir, options = {}) {
 function injectContent(shell, renderedContent, page, siteContent) {
   let html = shell
 
+  // Inject theme CSS if not already present
+  if (siteContent?.theme?.css && !html.includes('id="uniweb-theme"')) {
+    html = html.replace(
+      '</head>',
+      `  <style id="uniweb-theme">\n${siteContent.theme.css}\n    </style>\n  </head>`
+    )
+  }
+
   // Replace the empty root div with pre-rendered content
   html = html.replace(
     /<div id="root">[\s\S]*?<\/div>/,
@@ -548,7 +556,13 @@ function injectContent(shell, renderedContent, page, siteContent) {
 
   // Inject site content as JSON for hydration
   // Replace existing content if present, otherwise add it
-  const contentScript = `<script id="__SITE_CONTENT__" type="application/json">${JSON.stringify(siteContent)}</script>`
+  // Strip CSS from theme (it's already in a <style> tag)
+  const contentForJson = { ...siteContent }
+  if (contentForJson.theme?.css) {
+    contentForJson.theme = { ...contentForJson.theme }
+    delete contentForJson.theme.css
+  }
+  const contentScript = `<script id="__SITE_CONTENT__" type="application/json">${JSON.stringify(contentForJson)}</script>`
   if (html.includes('__SITE_CONTENT__')) {
     // Replace existing site content with updated version (includes expanded dynamic routes)
     // Match script tag with attributes in any order

package/src/schema.js

@@ -5,14 +5,17 @@
  * Schema data is for editor-time only, not runtime.
  */
 
-import { readdir } from 'node:fs/promises'
+import { readdir, readFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
-import { join, basename } from 'node:path'
+import { join, dirname } from 'node:path'
 import { pathToFileURL } from 'node:url'
 
-// Meta file name (standardized to meta.js)
+// Component meta file name
 const META_FILE_NAME = 'meta.js'
 
+// Foundation config file name
+const FOUNDATION_FILE_NAME = 'foundation.js'
+
 // Default component paths (relative to srcDir)
 const DEFAULT_COMPONENT_PATHS = ['components']
 
@@ -44,21 +47,71 @@ export async function loadComponentMeta(componentDir) {
 }
 
 /**
- * Load foundation-level meta file
+ * Load package.json from foundation root
+ * Extracts identity fields: name, version, description
+ *
+ * @param {string} srcDir - Source directory (e.g., 'src')
+ * @returns {Object} Identity fields from package.json
  */
-export async function loadFoundationMeta(srcDir) {
-  const filePath = join(srcDir, META_FILE_NAME)
+export async function loadPackageJson(srcDir) {
+  // package.json is in the foundation root (parent of srcDir)
+  const foundationRoot = dirname(srcDir)
+  const packagePath = join(foundationRoot, 'package.json')
+
+  if (!existsSync(packagePath)) {
+    return {}
+  }
+
+  try {
+    const content = await readFile(packagePath, 'utf-8')
+    const pkg = JSON.parse(content)
+
+    // Extract only identity fields for schema
+    return {
+      name: pkg.name,
+      version: pkg.version,
+      description: pkg.description,
+    }
+  } catch (error) {
+    console.warn(`Warning: Failed to load package.json:`, error.message)
+    return {}
+  }
+}
+
+/**
+ * Load foundation-level config file (foundation.js)
+ *
+ * Contains foundation-wide configuration:
+ * - vars: CSS custom properties sites can override
+ * - Layout: Custom layout component
+ * - Future: providers, middleware, etc.
+ */
+export async function loadFoundationConfig(srcDir) {
+  const filePath = join(srcDir, FOUNDATION_FILE_NAME)
   if (!existsSync(filePath)) {
     return {}
   }
   try {
-    return await loadMetaFile(filePath)
+    const module = await import(pathToFileURL(filePath).href)
+    // Support both default export and named exports
+    return {
+      ...module.default,
+      vars: module.vars || module.default?.vars,
+      Layout: module.Layout || module.default?.Layout,
+    }
   } catch (error) {
-    console.warn(`Warning: Failed to load foundation meta ${filePath}:`, error.message)
+    console.warn(`Warning: Failed to load foundation config ${filePath}:`, error.message)
     return {}
   }
 }
 
+/**
+ * @deprecated Use loadFoundationConfig instead
+ */
+export async function loadFoundationMeta(srcDir) {
+  return loadFoundationConfig(srcDir)
+}
+
 /**
  * Discover components in a single path
  * @param {string} srcDir - Source directory (e.g., 'src')
@@ -127,17 +180,31 @@ export async function discoverComponents(srcDir, componentPaths = DEFAULT_COMPON
 
 /**
  * Build complete schema for a foundation
- * Returns { _self: foundationMeta, ComponentName: componentMeta, ... }
+ * Returns { _self: { identity + config }, ComponentName: componentMeta, ... }
+ *
+ * The _self object contains:
+ * - Identity from package.json (name, version, description)
+ * - Configuration from foundation.js (vars, Layout, etc.)
  *
  * @param {string} srcDir - Source directory
  * @param {string[]} [componentPaths] - Paths to search for components
  */
 export async function buildSchema(srcDir, componentPaths) {
-  const foundationMeta = await loadFoundationMeta(srcDir)
+  // Load identity from package.json
+  const identity = await loadPackageJson(srcDir)
+
+  // Load configuration from foundation.js
+  const foundationConfig = await loadFoundationConfig(srcDir)
+
+  // Discover components
   const components = await discoverComponents(srcDir, componentPaths)
 
   return {
-    _self: foundationMeta,
+    // Merge identity and config - identity fields take precedence
+    _self: {
+      ...foundationConfig,
+      ...identity,
+    },
     ...components,
   }
 }

package/src/site/collection-processor.js

@@ -63,6 +63,7 @@ try {
  * // Extended form
  * parseCollectionConfig('articles', {
  *   path: 'library/articles',
+ *   route: '/blog',
  *   sort: 'date desc',
  *   filter: 'published != false',
  *   limit: 100
@@ -73,6 +74,7 @@ function parseCollectionConfig(name, config) {
     return {
       name,
       path: config,
+      route: null,
       sort: null,
       filter: null,
       limit: 0,
@@ -83,6 +85,7 @@ function parseCollectionConfig(name, config) {
   return {
     name,
     path: config.path,
+    route: config.route || null,
     sort: config.sort || null,
     filter: config.filter || null,
     limit: config.limit || 0,
@@ -274,6 +277,15 @@ async function collectItems(siteDir, config) {
   // Filter out nulls (unpublished items)
   items = items.filter(Boolean)
 
+  // Add routes to items if collection has a route configured
+  if (config.route) {
+    const baseRoute = config.route.replace(/\/$/, '') // Remove trailing slash
+    items = items.map(item => ({
+      ...item,
+      route: `${baseRoute}/${item.slug}`
+    }))
+  }
+
   // Apply custom filter
   if (config.filter) {
     items = applyFilter(items, config.filter)

package/src/site/config.js

@@ -235,7 +235,8 @@ export async function defineSiteConfig(options = {}) {
       inject: true,
       seo,
       assets,
-      search
+      search,
+      foundationPath: foundationInfo.path // For loading foundation theme vars
     }),
 
     // Foundation dev server (only in runtime mode with local foundation)

package/src/site/content-collector.js

@@ -28,6 +28,7 @@ import { existsSync } from 'node:fs'
 import yaml from 'js-yaml'
 import { collectSectionAssets, mergeAssetCollections } from './assets.js'
 import { parseFetchConfig, singularize } from './data-fetcher.js'
+import { buildTheme, extractFoundationVars } from '../theme/index.js'
 
 // Try to import content-reader, fall back to simplified parser
 let markdownToProseMirror
@@ -161,11 +162,20 @@ async function processMarkdownFile(filePath, id, siteRoot) {
     }
   }
 
-  const { type, component, preset, input, props, fetch, ...params } = frontMatter
+  const { type, component, preset, input, props, fetch, data, ...params } = frontMatter
 
   // Convert markdown to ProseMirror
   const proseMirrorContent = markdownToProseMirror(markdown)
 
+  // Support 'data:' shorthand for collection fetch
+  // data: team → fetch: { collection: team }
+  // data: [team, articles] → fetch: { collection: team } (first item, others via inheritData)
+  let resolvedFetch = fetch
+  if (!fetch && data) {
+    const collectionName = Array.isArray(data) ? data[0] : data
+    resolvedFetch = { collection: collectionName }
+  }
+
   const section = {
     id,
     component: type || component || 'Section',
@@ -173,7 +183,7 @@ async function processMarkdownFile(filePath, id, siteRoot) {
     input,
     params: { ...params, ...props },
     content: proseMirrorContent,
-    fetch: parseFetchConfig(fetch),
+    fetch: parseFetchConfig(resolvedFetch),
     subsections: []
   }
 
@@ -438,7 +448,13 @@ async function processPage(pagePath, pageName, siteRoot, { isIndex = false, pare
       },
 
       // Data fetching
-      fetch: parseFetchConfig(pageConfig.fetch),
+      // Support 'data:' shorthand at page level
+      // data: team → fetch: { collection: team }
+      fetch: parseFetchConfig(
+        pageConfig.fetch || (pageConfig.data
+          ? { collection: Array.isArray(pageConfig.data) ? pageConfig.data[0] : pageConfig.data }
+          : undefined)
+      ),
 
       sections: hierarchicalSections
     },
@@ -488,7 +504,7 @@ function determineIndexPage(orderConfig, availableFolders) {
  * @param {string} siteRoot - Site root directory for asset resolution
  * @param {Object} orderConfig - { pages: [...], index: 'name' } from parent's config
  * @param {Object} parentFetch - Parent page's fetch config (for dynamic child routes)
- * @returns {Promise<Object>} { pages, assetCollection, header, footer, left, right }
+ * @returns {Promise<Object>} { pages, assetCollection, header, footer, left, right, notFound }
  */
 async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig = {}, parentFetch = null) {
   const entries = await readdir(dirPath)
@@ -502,6 +518,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
   let footer = null
   let left = null
   let right = null
+  let notFound = null
 
   // First pass: discover all page folders and read their order values
   const pageFolders = []
@@ -545,7 +562,7 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
       const { page, assetCollection: pageAssets } = result
       assetCollection = mergeAssetCollections(assetCollection, pageAssets)
 
-      // Handle special pages (layout areas) - only at root level
+      // Handle special pages (layout areas and 404) - only at root level
       if (parentRoute === '/') {
         if (entry === '@header') {
           header = page
@@ -555,6 +572,8 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
           left = page
         } else if (entry === '@right') {
           right = page
+        } else if (entry === '404') {
+          notFound = page
         } else {
           pages.push(page)
         }
@@ -575,27 +594,72 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
     }
   }
 
-  return { pages, assetCollection, header, footer, left, right }
+  return { pages, assetCollection, header, footer, left, right, notFound }
+}
+
+/**
+ * Load foundation variables from schema.json
+ *
+ * @param {string} foundationPath - Path to foundation directory
+ * @returns {Promise<Object>} Foundation variables or empty object
+ */
+async function loadFoundationVars(foundationPath) {
+  if (!foundationPath) return {}
+
+  // Try dist/schema.json first (built foundation), then src/schema.json
+  const distSchemaPath = join(foundationPath, 'dist', 'schema.json')
+  const srcSchemaPath = join(foundationPath, 'schema.json')
+
+  const schemaPath = existsSync(distSchemaPath) ? distSchemaPath : srcSchemaPath
+
+  if (!existsSync(schemaPath)) {
+    return {}
+  }
+
+  try {
+    const schemaContent = await readFile(schemaPath, 'utf8')
+    const schema = JSON.parse(schemaContent)
+    // Foundation config is in _self, support both 'vars' (new) and 'themeVars' (legacy)
+    return schema._self?.vars || schema._self?.themeVars || schema.themeVars || {}
+  } catch (err) {
+    console.warn('[content-collector] Failed to load foundation schema:', err.message)
+    return {}
+  }
 }
 
 /**
  * Collect all site content
  *
  * @param {string} sitePath - Path to site directory
+ * @param {Object} options - Collection options
+ * @param {string} options.foundationPath - Path to foundation directory (for theme vars)
  * @returns {Promise<Object>} Site content object with assets manifest
  */
-export async function collectSiteContent(sitePath) {
+export async function collectSiteContent(sitePath, options = {}) {
+  const { foundationPath } = options
   const pagesPath = join(sitePath, 'pages')
 
-  // Read site config
+  // Read site config and raw theme config
   const siteConfig = await readYamlFile(join(sitePath, 'site.yml'))
-  const themeConfig = await readYamlFile(join(sitePath, 'theme.yml'))
+  const rawThemeConfig = await readYamlFile(join(sitePath, 'theme.yml'))
+
+  // Load foundation vars and process theme
+  const foundationVars = await loadFoundationVars(foundationPath)
+  const { config: processedTheme, css: themeCSS, warnings } = buildTheme(rawThemeConfig, { foundationVars })
+
+  // Log theme warnings
+  if (warnings?.length > 0) {
+    warnings.forEach(w => console.warn(`[theme] ${w}`))
+  }
 
   // Check if pages directory exists
   if (!existsSync(pagesPath)) {
     return {
       config: siteConfig,
-      theme: themeConfig,
+      theme: {
+        ...processedTheme,
+        css: themeCSS
+      },
       pages: [],
       assets: {}
     }
@@ -608,7 +672,7 @@ export async function collectSiteContent(sitePath) {
   }
 
   // Recursively collect all pages
-  const { pages, assetCollection, header, footer, left, right } =
+  const { pages, assetCollection, header, footer, left, right, notFound } =
     await collectPagesRecursive(pagesPath, '/', sitePath, siteOrderConfig)
 
   // Sort pages by order
@@ -626,12 +690,16 @@ export async function collectSiteContent(sitePath) {
       ...siteConfig,
       fetch: parseFetchConfig(siteConfig.fetch),
     },
-    theme: themeConfig,
+    theme: {
+      ...processedTheme,
+      css: themeCSS
+    },
     pages,
     header,
     footer,
     left,
     right,
+    notFound,
     assets: assetCollection.assets,
     hasExplicitPoster: assetCollection.hasExplicitPoster,
     hasExplicitPreview: assetCollection.hasExplicitPreview

package/src/site/plugin.js

@@ -305,6 +305,7 @@ function escapeHtml(str) {
  * @param {Object} [options.search] - Search index configuration
  * @param {boolean} [options.search.enabled=true] - Generate search index (uses site.yml config by default)
  * @param {string} [options.search.filename='search-index.json'] - Search index filename
+ * @param {string} [options.foundationPath] - Path to foundation directory (for loading theme vars)
  */
 export function siteContentPlugin(options = {}) {
   const {
@@ -316,7 +317,8 @@ export function siteContentPlugin(options = {}) {
     watch: shouldWatch = true,
     seo = {},
     assets: assetsConfig = {},
-    search: searchPluginConfig = {}
+    search: searchPluginConfig = {},
+    foundationPath
   } = options
 
   // Extract asset processing options
@@ -416,7 +418,7 @@ export function siteContentPlugin(options = {}) {
       if (!isProduction) {
         try {
           // Do an early content collection to get the collections config
-          const earlyContent = await collectSiteContent(resolvedSitePath)
+          const earlyContent = await collectSiteContent(resolvedSitePath, { foundationPath })
           collectionsConfig = earlyContent.config?.collections
 
           if (collectionsConfig) {
@@ -433,7 +435,7 @@ export function siteContentPlugin(options = {}) {
     async buildStart() {
       // Collect content at build start
       try {
-        siteContent = await collectSiteContent(resolvedSitePath)
+        siteContent = await collectSiteContent(resolvedSitePath, { foundationPath })
         console.log(`[site-content] Collected ${siteContent.pages?.length || 0} pages`)
 
         // Process content collections if defined in site.yml
@@ -480,7 +482,7 @@ export function siteContentPlugin(options = {}) {
           rebuildTimeout = setTimeout(async () => {
             console.log('[site-content] Content changed, rebuilding...')
             try {
-              siteContent = await collectSiteContent(resolvedSitePath)
+              siteContent = await collectSiteContent(resolvedSitePath, { foundationPath })
               // Execute fetches for the updated content
               await executeDevFetches(siteContent, resolvedSitePath)
               console.log(`[site-content] Rebuilt ${siteContent.pages?.length || 0} pages`)
@@ -685,6 +687,11 @@ export function siteContentPlugin(options = {}) {
 
       let headInjection = ''
 
+      // Inject theme CSS
+      if (contentToInject.theme?.css) {
+        headInjection += `    <style id="uniweb-theme">\n${contentToInject.theme.css}\n    </style>\n`
+      }
+
       // Inject SEO meta tags
       if (seoEnabled) {
         const metaTags = generateMetaTags(contentToInject, seoOptions)
@@ -791,6 +798,9 @@ export function siteContentPlugin(options = {}) {
       delete finalContent.hasExplicitPoster
       delete finalContent.hasExplicitPreview
 
+      // Note: theme.css is kept here so prerender can inject it into HTML
+      // Prerender will strip it from the JSON it injects into each page
+
       // Emit content as JSON file in production build
       this.emitFile({
         type: 'asset',