@uniweb/build 0.8.13 → 0.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -11,6 +11,7 @@
     "./vite-plugin": "./src/vite-foundation-plugin.js",
     "./foundation": "./src/foundation/index.js",
     "./foundation/config": "./src/foundation/config.js",
+    "./content": "./src/content/index.js",
     "./site": "./src/site/index.js",
     "./site/config": "./src/site/config.js",
     "./dev": "./src/dev/index.js",
@@ -47,12 +48,13 @@
   },
   "dependencies": {
     "js-yaml": "^4.1.0",
-    "sharp": "^0.33.2"
+    "sharp": "^0.33.2",
+    "@uniweb/theming": "0.1.1"
   },
   "optionalDependencies": {
-    "@uniweb/content-reader": "1.1.4",
-    "@uniweb/runtime": "0.6.9",
-    "@uniweb/schemas": "0.2.1"
+    "@uniweb/schemas": "0.2.1",
+    "@uniweb/runtime": "0.6.11",
+    "@uniweb/content-reader": "1.1.4"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",

package/src/content/index.js

@@ -0,0 +1,13 @@
+/**
+ * Clean Content Entry Point
+ *
+ * Exposes only collectSiteContent and its clean dependency chain
+ * (Node builtins, js-yaml, @uniweb/theming). No Vite, sharp, or React.
+ *
+ * Used by Studio's sidecar (Bun-compiled binary) where those heavy
+ * peer/native dependencies aren't available.
+ *
+ * @module @uniweb/build/content
+ */
+
+export { collectSiteContent } from '../site/content-collector.js'

package/src/i18n/extract.js

@@ -37,13 +37,18 @@ export function extractTranslatableContent(siteContent) {
     }
   }
 
-  // Extract from shared layout pages (header, footer, left, right panels)
-  for (const layoutKey of ['header', 'footer', 'left', 'right']) {
-    const layoutPage = siteContent[layoutKey]
-    if (layoutPage?.sections) {
-      const pageRoute = layoutPage.route || `/layout/${layoutKey}`
-      for (const section of layoutPage.sections) {
-        extractFromSection(section, pageRoute, units)
+  // Extract from layout areas (header, footer, left, right panels)
+  // Layouts are nested under siteContent.layouts: { default: { header, footer, ... }, marketing: { ... } }
+  if (siteContent.layouts) {
+    for (const [layoutName, areas] of Object.entries(siteContent.layouts)) {
+      if (!areas || typeof areas !== 'object') continue
+      for (const [areaKey, layoutPage] of Object.entries(areas)) {
+        if (layoutPage?.sections) {
+          const pageRoute = layoutPage.route || `/layout/${layoutName === 'default' ? '' : layoutName + '/'}${areaKey}`
+          for (const section of layoutPage.sections) {
+            extractFromSection(section, pageRoute, units)
+          }
+        }
       }
     }
   }

package/src/i18n/merge.js

@@ -76,13 +76,18 @@ function mergeTranslationsSync(siteContent, translations, fallbackToSource) {
     }
   }
 
-  // Translate shared layout sections (header, footer, sidebars)
-  for (const layoutKey of ['header', 'footer', 'left', 'right']) {
-    const layoutPage = translated[layoutKey]
-    if (layoutPage?.sections) {
-      const pageRoute = layoutPage.route || `/layout/${layoutKey}`
-      for (const section of layoutPage.sections) {
-        translateSectionSync(section, pageRoute, translations, fallbackToSource)
+  // Translate layout sections (header, footer, sidebars)
+  // Layouts are nested under translated.layouts: { default: { header, footer, ... }, marketing: { ... } }
+  if (translated.layouts) {
+    for (const [layoutName, areas] of Object.entries(translated.layouts)) {
+      if (!areas || typeof areas !== 'object') continue
+      for (const [areaKey, layoutPage] of Object.entries(areas)) {
+        if (layoutPage?.sections) {
+          const pageRoute = layoutPage.route || `/layout/${layoutName === 'default' ? '' : layoutName + '/'}${areaKey}`
+          for (const section of layoutPage.sections) {
+            translateSectionSync(section, pageRoute, translations, fallbackToSource)
+          }
+        }
       }
     }
   }
@@ -128,18 +133,22 @@ async function mergeTranslationsAsync(siteContent, translations, options) {
     }
   }
 
-  // Translate shared layout sections (header, footer, sidebars)
-  for (const layoutKey of ['header', 'footer', 'left', 'right']) {
-    const layoutPage = translated[layoutKey]
-    if (layoutPage?.sections) {
-      // 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,
-          locale,
-          localesDir
-        })
+  // Translate layout sections (header, footer, sidebars)
+  // Layouts are nested under translated.layouts: { default: { header, footer, ... }, marketing: { ... } }
+  if (translated.layouts) {
+    for (const [layoutName, areas] of Object.entries(translated.layouts)) {
+      if (!areas || typeof areas !== 'object') continue
+      for (const [areaKey, layoutPage] of Object.entries(areas)) {
+        if (layoutPage?.sections) {
+          if (!layoutPage.route) layoutPage.route = `/layout/${layoutName === 'default' ? '' : layoutName + '/'}${areaKey}`
+          for (const section of layoutPage.sections) {
+            await translateSectionAsync(section, layoutPage, translations, {
+              fallbackToSource,
+              locale,
+              localesDir
+            })
+          }
+        }
       }
     }
   }

package/src/theme/index.js

@@ -1,65 +1,10 @@
 /**
- * Theme Module
+ * Theme Module — re-export shim
  *
- * Exports all theme-related utilities for the build process.
+ * All theming logic has moved to @uniweb/theming.
+ * This shim preserves backward compatibility for internal imports.
  *
  * @module @uniweb/build/theme
  */
 
-// Shade generation
-export {
-  parseColor,
-  formatOklch,
-  formatHex,
-  generateShades,
-  generatePalettes,
-  isValidColor,
-  getShadeLevels,
-} from './shade-generator.js'
-
-// CSS generation
-export {
-  generateThemeCSS,
-  generateContextCSS,
-  generatePaletteVars,
-  getDefaultContextTokens,
-  getDefaultColors,
-} from './css-generator.js'
-
-// Theme processing
-export {
-  validateThemeConfig,
-  processTheme,
-  extractFoundationVars,
-  foundationHasVars,
-} from './processor.js'
-
-// Default export for convenience
-import { processTheme } from './processor.js'
-import { generateThemeCSS } from './css-generator.js'
-
-/**
- * Process theme configuration and generate CSS in one step
- *
- * @param {Object} themeYml - Raw theme.yml content
- * @param {Object} options - Processing options
- * @param {Object} options.foundationVars - Foundation variables
- * @returns {{ css: string, config: Object, errors: string[], warnings: string[] }}
- */
-export function buildTheme(themeYml = {}, options = {}) {
-  const { config, errors, warnings } = processTheme(themeYml, options)
-  const css = generateThemeCSS(config)
-
-  return {
-    css,
-    config,
-    errors,
-    warnings,
-  }
-}
-
-export default {
-  buildTheme,
-  processTheme,
-  generateThemeCSS,
-}
+export * from '@uniweb/theming'

package/src/theme/css-generator.js

@@ -1,400 +0,0 @@
-/**
- * Theme CSS Generator
- *
- * Generates complete CSS for site theming including:
- * - Color palettes as CSS custom properties
- * - Context classes (light/medium/dark) with semantic tokens
- * - Foundation-specific variables
- * - Optional dark scheme support
- *
- * @module @uniweb/build/theme/css-generator
- */
-
-import { generatePalettes, formatOklch } from './shade-generator.js'
-
-// Default semantic tokens for each context
-// These map abstract concepts to specific palette values
-const DEFAULT_CONTEXT_TOKENS = {
-  light: {
-    'section': 'var(--neutral-50)',
-    'card': 'var(--neutral-100)',
-    'muted': 'var(--neutral-200)',
-    'body': 'var(--neutral-950)',
-    'heading': 'var(--neutral-900)',
-    'subtle': 'var(--neutral-600)',
-    'border': 'var(--neutral-200)',
-    'ring': 'var(--primary-500)',
-    'link': 'var(--primary-600)',
-    'link-hover': 'var(--primary-700)',
-    'primary': 'var(--primary-600)',
-    'primary-foreground': 'white',
-    'primary-hover': 'var(--primary-700)',
-    'primary-border': 'transparent',
-    'secondary': 'white',
-    'secondary-foreground': 'var(--neutral-900)',
-    'secondary-hover': 'var(--neutral-100)',
-    'secondary-border': 'var(--neutral-300)',
-    'success': '#16a34a',
-    'success-subtle': '#f0fdf4',
-    'warning': '#d97706',
-    'warning-subtle': '#fffbeb',
-    'error': '#dc2626',
-    'error-subtle': '#fef2f2',
-    'info': '#2563eb',
-    'info-subtle': '#eff6ff',
-  },
-  medium: {
-    'section': 'var(--neutral-100)',
-    'card': 'var(--neutral-200)',
-    'muted': 'var(--neutral-300)',
-    'body': 'var(--neutral-950)',
-    'heading': 'var(--neutral-900)',
-    'subtle': 'var(--neutral-700)',
-    'border': 'var(--neutral-300)',
-    'ring': 'var(--primary-500)',
-    'link': 'var(--primary-600)',
-    'link-hover': 'var(--primary-700)',
-    'primary': 'var(--primary-600)',
-    'primary-foreground': 'white',
-    'primary-hover': 'var(--primary-700)',
-    'primary-border': 'transparent',
-    'secondary': 'white',
-    'secondary-foreground': 'var(--neutral-900)',
-    'secondary-hover': 'var(--neutral-100)',
-    'secondary-border': 'var(--neutral-300)',
-    'success': '#16a34a',
-    'success-subtle': '#f0fdf4',
-    'warning': '#d97706',
-    'warning-subtle': '#fffbeb',
-    'error': '#dc2626',
-    'error-subtle': '#fef2f2',
-    'info': '#2563eb',
-    'info-subtle': '#eff6ff',
-  },
-  dark: {
-    'section': 'var(--neutral-900)',
-    'card': 'var(--neutral-800)',
-    'muted': 'var(--neutral-700)',
-    'body': 'var(--neutral-50)',
-    'heading': 'white',
-    'subtle': 'var(--neutral-400)',
-    'border': 'var(--neutral-700)',
-    'ring': 'var(--primary-500)',
-    'link': 'var(--primary-400)',
-    'link-hover': 'var(--primary-300)',
-    'primary': 'var(--primary-500)',
-    'primary-foreground': 'white',
-    'primary-hover': 'var(--primary-400)',
-    'primary-border': 'transparent',
-    'secondary': 'var(--neutral-800)',
-    'secondary-foreground': 'var(--neutral-100)',
-    'secondary-hover': 'var(--neutral-700)',
-    'secondary-border': 'var(--neutral-600)',
-    'success': '#4ade80',
-    'success-subtle': '#052e16',
-    'warning': '#fbbf24',
-    'warning-subtle': '#451a03',
-    'error': '#f87171',
-    'error-subtle': '#450a0a',
-    'info': '#60a5fa',
-    'info-subtle': '#172554',
-  },
-}
-
-// Default color palette configuration
-const DEFAULT_COLORS = {
-  primary: '#3b82f6',   // Blue
-  secondary: '#64748b', // Slate
-  accent: '#8b5cf6',    // Purple
-  neutral: '#78716c',   // Stone
-}
-
-// Shade levels for CSS variable generation
-const SHADE_LEVELS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-
-/**
- * Generate CSS variable declarations from an object
- *
- * @param {Object} vars - Object with variable names as keys
- * @param {string} indent - Indentation string
- * @returns {string} CSS variable declarations
- */
-function generateVarDeclarations(vars, indent = '  ') {
-  return Object.entries(vars)
-    .map(([name, value]) => `${indent}--${name}: ${value};`)
-    .join('\n')
-}
-
-/**
- * Generate color palette CSS variables
- *
- * @param {Object} palettes - Object with palette name → shades
- * @returns {string} CSS variable declarations for all palettes
- */
-function generatePaletteVars(palettes) {
-  const lines = []
-
-  for (const [name, shades] of Object.entries(palettes)) {
-    for (const level of SHADE_LEVELS) {
-      if (shades[level]) {
-        lines.push(`  --${name}-${level}: ${shades[level]};`)
-      }
-    }
-  }
-
-  return lines.join('\n')
-}
-
-/**
- * Generate context class CSS
- *
- * @param {string} context - Context name (light, medium, dark)
- * @param {Object} tokens - Token overrides
- * @returns {string} CSS for context class
- */
-function generateContextCSS(context, tokens = {}) {
-  const defaultTokens = DEFAULT_CONTEXT_TOKENS[context] || DEFAULT_CONTEXT_TOKENS.light
-  const mergedTokens = { ...defaultTokens, ...tokens }
-
-  const vars = generateVarDeclarations(mergedTokens)
-
-  return `.context-${context} {\n${vars}\n  background-color: var(--section);\n}`
-}
-
-/**
- * Generate dark scheme CSS (for site-wide dark mode toggle)
- *
- * @param {Object} config - Appearance configuration
- * @returns {string} CSS for dark scheme support
- */
-function generateDarkSchemeCSS(config = {}) {
-  const { respectSystemPreference = true } = config
-
-  // Dark scheme tokens - similar to dark context but at root level
-  const darkTokens = {
-    'section': 'var(--neutral-950)',
-    'card': 'var(--neutral-900)',
-    'muted': 'var(--neutral-800)',
-    'body': 'var(--neutral-50)',
-    'heading': 'white',
-    'subtle': 'var(--neutral-400)',
-    'border': 'var(--neutral-800)',
-    'ring': 'var(--primary-500)',
-    'link': 'var(--primary-400)',
-    'link-hover': 'var(--primary-300)',
-    'primary': 'var(--primary-500)',
-    'primary-foreground': 'white',
-    'primary-hover': 'var(--primary-400)',
-    'primary-border': 'transparent',
-    'secondary': 'var(--neutral-800)',
-    'secondary-foreground': 'var(--neutral-100)',
-    'secondary-hover': 'var(--neutral-700)',
-    'secondary-border': 'var(--neutral-600)',
-    'success': '#4ade80',
-    'success-subtle': '#052e16',
-    'warning': '#fbbf24',
-    'warning-subtle': '#451a03',
-    'error': '#f87171',
-    'error-subtle': '#450a0a',
-    'info': '#60a5fa',
-    'info-subtle': '#172554',
-  }
-
-  const vars = generateVarDeclarations(darkTokens)
-
-  let css = `/* Dark scheme (user preference) */\n`
-  css += `.scheme-dark {\n${vars}\n}\n`
-
-  if (respectSystemPreference) {
-    css += `\n@media (prefers-color-scheme: dark) {\n`
-    css += `  :root:not(.scheme-light) {\n`
-    for (const [name, value] of Object.entries(darkTokens)) {
-      css += `    --${name}: ${value};\n`
-    }
-    css += `  }\n`
-    css += `}\n`
-  }
-
-  return css
-}
-
-/**
- * Generate font CSS
- *
- * @param {Object} fonts - Font configuration
- * @returns {string} CSS for fonts
- */
-function generateFontCSS(fonts = {}) {
-  const lines = []
-
-  // Font imports
-  if (fonts.import && Array.isArray(fonts.import)) {
-    for (const font of fonts.import) {
-      if (font.url) {
-        lines.push(`@import url('${font.url}');`)
-      }
-    }
-    if (lines.length > 0) {
-      lines.push('') // Empty line after imports
-    }
-  }
-
-  // Font family variables
-  const fontVars = []
-  if (fonts.body) {
-    fontVars.push(`  --font-body: ${fonts.body};`)
-  }
-  if (fonts.heading) {
-    fontVars.push(`  --font-heading: ${fonts.heading};`)
-  }
-  if (fonts.mono) {
-    fontVars.push(`  --font-mono: ${fonts.mono};`)
-  }
-
-  if (fontVars.length > 0) {
-    lines.push(':root {')
-    lines.push(...fontVars)
-    lines.push('}')
-  }
-
-  return lines.join('\n')
-}
-
-/**
- * Generate foundation-specific CSS variables
- *
- * @param {Object} vars - Foundation variables from vars.js
- * @returns {string} CSS variable declarations
- */
-function generateFoundationVars(vars = {}) {
-  if (!vars || Object.keys(vars).length === 0) {
-    return ''
-  }
-
-  const declarations = []
-
-  for (const [name, config] of Object.entries(vars)) {
-    const value = typeof config === 'object' ? config.default : config
-    if (value !== undefined) {
-      declarations.push(`  --${name}: ${value};`)
-    }
-  }
-
-  if (declarations.length === 0) {
-    return ''
-  }
-
-  return `:root {\n${declarations.join('\n')}\n}`
-}
-
-/**
- * Generate complete theme CSS
- *
- * @param {Object} config - Processed theme configuration
- * @param {Object} config.colors - Color palette configuration
- * @param {Object} config.contexts - Context token overrides
- * @param {Object} config.fonts - Font configuration
- * @param {Object} config.appearance - Appearance settings (dark mode, etc.)
- * @param {Object} config.foundationVars - Foundation-specific variables
- * @returns {string} Complete CSS string
- */
-export function generateThemeCSS(config = {}) {
-  const {
-    colors = DEFAULT_COLORS,
-    contexts = {},
-    fonts = {},
-    appearance = {},
-    foundationVars = {},
-  } = config
-
-  const sections = []
-
-  // 1. Font imports and variables
-  const fontCSS = generateFontCSS(fonts)
-  if (fontCSS) {
-    sections.push('/* Typography */\n' + fontCSS)
-  }
-
-  // 2. Color palettes
-  const palettes = generatePalettes(colors)
-  const paletteVars = generatePaletteVars(palettes)
-  sections.push(`/* Color Palettes */\n:root {\n${paletteVars}\n}`)
-
-  // 3. Default semantic tokens (applied to :root for global defaults)
-  const defaultTokens = { ...DEFAULT_CONTEXT_TOKENS.light, ...(contexts.light || {}) }
-  const defaultVars = generateVarDeclarations(defaultTokens)
-  sections.push(`/* Default Semantic Tokens */\n:root {\n${defaultVars}\n}`)
-
-  // 4. Context classes
-  const contextCSS = [
-    generateContextCSS('light', contexts.light),
-    generateContextCSS('medium', contexts.medium),
-    generateContextCSS('dark', contexts.dark),
-  ]
-  sections.push('/* Color Contexts */\n' + contextCSS.join('\n\n'))
-
-  // 5. Foundation variables
-  const foundationCSS = generateFoundationVars(foundationVars)
-  if (foundationCSS) {
-    sections.push('/* Foundation Variables */\n' + foundationCSS)
-  }
-
-  // 6. Dark scheme support (if enabled)
-  if (appearance.allowToggle || appearance.schemes?.includes('dark')) {
-    sections.push(generateDarkSchemeCSS(appearance))
-  }
-
-  // 7. Site background (if specified in theme.yml)
-  if (config.background) {
-    sections.push(`/* Site Background */\nbody {\n  background: ${config.background};\n}`)
-  }
-
-  // 8. Inline text styles (if specified in theme.yml)
-  if (config.inline && typeof config.inline === 'object') {
-    const rules = Object.entries(config.inline)
-      .filter(([, styles]) => styles && typeof styles === 'object')
-      .map(([name, styles]) => {
-        const declarations = Object.entries(styles)
-          .map(([prop, value]) => `  ${prop}: ${value};`)
-          .join('\n')
-        return `span[${name}] {\n${declarations}\n}`
-      })
-    if (rules.length > 0) {
-      sections.push('/* Inline Text Styles */\n' + rules.join('\n\n'))
-    }
-  }
-
-  return sections.join('\n\n')
-}
-
-/**
- * Generate CSS for a single context (useful for testing)
- */
-export { generateContextCSS }
-
-/**
- * Generate palette CSS variables (useful for testing)
- */
-export { generatePaletteVars }
-
-/**
- * Get default context tokens
- */
-export function getDefaultContextTokens() {
-  return JSON.parse(JSON.stringify(DEFAULT_CONTEXT_TOKENS))
-}
-
-/**
- * Get default colors
- */
-export function getDefaultColors() {
-  return { ...DEFAULT_COLORS }
-}
-
-export default {
-  generateThemeCSS,
-  generateContextCSS,
-  generatePaletteVars,
-  getDefaultContextTokens,
-  getDefaultColors,
-}