@uniweb/build 0.7.5 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {

package/src/foundation/config.js

@@ -48,9 +48,9 @@ const DEFAULT_EXTERNALS = [
  * @param {Object} [options={}] - Configuration options
  * @param {string} [options.entry] - Entry point path (default: 'src/_entry.generated.js')
  * @param {string} [options.fileName] - Output file name (default: 'foundation')
- * @param {string[]} [options.components] - Paths to scan for content interfaces (relative to src/).
- *                                          Default: ['sections', 'components']
- *                                          Example: ['sections', 'sections/marketing']
+ * @param {string[]} [options.sections] - Paths to scan for section types (relative to src/).
+ *                                       Default: ['sections']
+ *                                       Example: ['sections', 'sections/marketing']
  * @param {string[]} [options.externals] - Additional packages to externalize
  * @param {boolean} [options.includeDefaultExternals] - Include default externals (default: true)
  * @param {Array} [options.plugins] - Additional Vite plugins
@@ -63,7 +63,7 @@ export async function defineFoundationConfig(options = {}) {
   const {
     entry = 'src/_entry.generated.js',
     fileName = 'foundation',
-    components: componentPaths,
+    sections: sectionPaths,
     externals: additionalExternals = [],
     includeDefaultExternals = true,
     plugins: extraPlugins = [],
@@ -108,7 +108,7 @@ export async function defineFoundationConfig(options = {}) {
   // Build the plugins array
   // foundationPlugin handles entry generation and schema building
   const plugins = [
-    foundationPlugin({ srcDir: 'src', components: componentPaths }),
+    foundationPlugin({ srcDir: 'src', sections: sectionPaths }),
     tailwind && tailwindcss(),
     react(),
     svgr(),

package/src/generate-entry.js

@@ -189,13 +189,13 @@ function detectComponentEntry(srcDir, componentPath, componentName) {
  * @param {string} srcDir - Source directory
  * @param {string} [outputPath] - Output file path (default: srcDir/_entry.generated.js)
  * @param {Object} [options] - Options
- * @param {string[]} [options.componentPaths] - Paths to search for components (relative to srcDir)
+ * @param {string[]} [options.sectionPaths] - Paths to scan for section types (relative to srcDir)
  */
 export async function generateEntryPoint(srcDir, outputPath = null, options = {}) {
-  const { componentPaths } = options
+  const { sectionPaths } = options
 
-  // Discover components (includes meta from meta.js files)
-  const components = await discoverComponents(srcDir, componentPaths)
+  // Discover section types (includes meta from meta.js files)
+  const components = await discoverComponents(srcDir, sectionPaths)
   const componentNames = Object.keys(components).sort()
 
   if (componentNames.length === 0) {

package/src/schema.js

@@ -1,13 +1,13 @@
 /**
  * Schema Discovery and Loading Utilities
  *
- * Discovers component meta files and loads them for schema.json generation.
+ * Discovers section type meta files and loads them for schema.json generation.
  * Schema data is for editor-time only, not runtime.
  *
  * Discovery rules:
  * - sections/ root: bare files and folders are addressable by default (implicit empty meta)
  * - sections/ nested: meta.js required for addressability
- * - components/ (and other paths): meta.js required (backward compatibility)
+ * - Additional paths (via config): meta.js required for addressability
  */
 
 import { readdir, readFile } from 'node:fs/promises'
@@ -22,9 +22,8 @@ const META_FILE_NAME = 'meta.js'
 // Foundation config file name
 const FOUNDATION_FILE_NAME = 'foundation.js'
 
-// Default paths to scan for content interfaces (relative to srcDir)
-// sections/ is the primary convention; components/ supported for backward compatibility
-const DEFAULT_COMPONENT_PATHS = ['sections', 'components']
+// Default paths to scan for section types (relative to srcDir)
+const DEFAULT_SECTION_PATHS = ['sections']
 
 // Extensions recognized as component entry files
 const COMPONENT_EXTENSIONS = new Set(['.jsx', '.tsx', '.js', '.ts'])
@@ -383,13 +382,13 @@ async function discoverNestedSections(srcDir, parentFullPath, parentRelPath, com
 }
 
 /**
- * Discover components in a non-sections path (meta.js required)
+ * Discover section types in a non-sections path (meta.js required)
  *
  * @param {string} srcDir - Source directory (e.g., 'src')
- * @param {string} relativePath - Path relative to srcDir (e.g., 'components')
- * @returns {Object} Map of componentName -> { name, path, ...meta }
+ * @param {string} relativePath - Path relative to srcDir
+ * @returns {Object} Map of sectionTypeName -> { name, path, ...meta }
  */
-async function discoverExplicitComponentsInPath(srcDir, relativePath) {
+async function discoverExplicitSectionsInPath(srcDir, relativePath) {
   const fullPath = join(srcDir, relativePath)
 
   if (!existsSync(fullPath)) {
@@ -426,30 +425,30 @@ async function discoverExplicitComponentsInPath(srcDir, relativePath) {
  * For other paths: strict discovery (meta.js required).
  *
  * @param {string} srcDir - Source directory (e.g., 'src')
- * @param {string[]} [componentPaths] - Paths to scan for section types (relative to srcDir).
- *                                      Default: ['sections', 'components']
+ * @param {string[]} [sectionPaths] - Paths to scan for section types (relative to srcDir).
+ *                                    Default: ['sections']
  * @returns {Object} Map of sectionTypeName -> { name, path, ...meta }
  */
-export async function discoverComponents(srcDir, componentPaths = DEFAULT_COMPONENT_PATHS) {
-  const components = {}
+export async function discoverComponents(srcDir, sectionPaths = DEFAULT_SECTION_PATHS) {
+  const sections = {}
 
-  for (const relativePath of componentPaths) {
+  for (const relativePath of sectionPaths) {
     // Use relaxed discovery for the primary sections path
     const found = relativePath === SECTIONS_PATH
       ? await discoverSectionsInPath(srcDir, relativePath)
-      : await discoverExplicitComponentsInPath(srcDir, relativePath)
+      : await discoverExplicitSectionsInPath(srcDir, relativePath)
 
     for (const [name, meta] of Object.entries(found)) {
-      if (components[name]) {
-        // Component already found in an earlier path - skip (first wins)
-        console.warn(`Warning: Component "${name}" found in multiple paths. Using ${components[name].path}, ignoring ${meta.path}`)
+      if (sections[name]) {
+        // Section type already found in an earlier path — skip (first wins)
+        console.warn(`Warning: Section type "${name}" found in multiple paths. Using ${sections[name].path}, ignoring ${meta.path}`)
         continue
       }
-      components[name] = meta
+      sections[name] = meta
     }
   }
 
-  return components
+  return sections
 }
 
 /**
@@ -461,17 +460,17 @@ export async function discoverComponents(srcDir, componentPaths = DEFAULT_COMPON
  * - Configuration from foundation.js (vars, Layout, etc.)
  *
  * @param {string} srcDir - Source directory
- * @param {string[]} [componentPaths] - Paths to search for components
+ * @param {string[]} [sectionPaths] - Paths to scan for section types
  */
-export async function buildSchema(srcDir, componentPaths) {
+export async function buildSchema(srcDir, sectionPaths) {
   // 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)
+  // Discover section types
+  const components = await discoverComponents(srcDir, sectionPaths)
 
   // Discover layouts from src/layouts/
   const layouts = await discoverLayoutsInPath(srcDir)
@@ -512,9 +511,9 @@ export async function buildSchema(srcDir, componentPaths) {
  * Get list of section type names
  *
  * @param {string} srcDir - Source directory
- * @param {string[]} [componentPaths] - Paths to scan for section types
+ * @param {string[]} [sectionPaths] - Paths to scan for section types
  */
-export async function getExposedComponents(srcDir, componentPaths) {
-  const components = await discoverComponents(srcDir, componentPaths)
+export async function getExposedComponents(srcDir, sectionPaths) {
+  const components = await discoverComponents(srcDir, sectionPaths)
   return Object.keys(components)
 }

package/src/theme/css-generator.js

@@ -16,64 +16,82 @@ import { generatePalettes, formatOklch } from './shade-generator.js'
 // These map abstract concepts to specific palette values
 const DEFAULT_CONTEXT_TOKENS = {
   light: {
-    'bg': 'var(--neutral-50)',
-    'bg-subtle': 'var(--neutral-100)',
-    'bg-muted': 'var(--neutral-200)',
-    'text': 'var(--neutral-950)',
-    'text-muted': 'var(--neutral-600)',
-    'text-subtle': 'var(--neutral-500)',
+    'section': 'var(--neutral-50)',
+    'card': 'var(--neutral-100)',
+    'muted': 'var(--neutral-200)',
+    'body': 'var(--neutral-950)',
     'heading': 'var(--neutral-900)',
-    'link': 'var(--primary-600)',
-    'link-hover': 'var(--primary-700)',
+    'subtle': 'var(--neutral-600)',
     'border': 'var(--neutral-200)',
-    'border-muted': 'var(--neutral-100)',
     'ring': 'var(--primary-500)',
-    'btn-primary-bg': 'var(--primary-600)',
-    'btn-primary-text': 'white',
-    'btn-primary-hover': 'var(--primary-700)',
-    'btn-secondary-bg': 'var(--neutral-100)',
-    'btn-secondary-text': 'var(--neutral-900)',
-    'btn-secondary-hover': 'var(--neutral-200)',
+    'link': 'var(--primary-600)',
+    'link-hover': 'var(--primary-700)',
+    'primary': 'var(--primary-600)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-700)',
+    'secondary': 'var(--neutral-100)',
+    'secondary-foreground': 'var(--neutral-900)',
+    'secondary-hover': 'var(--neutral-200)',
+    'success': '#16a34a',
+    'success-subtle': '#f0fdf4',
+    'warning': '#d97706',
+    'warning-subtle': '#fffbeb',
+    'error': '#dc2626',
+    'error-subtle': '#fef2f2',
+    'info': '#2563eb',
+    'info-subtle': '#eff6ff',
   },
   medium: {
-    'bg': 'var(--neutral-100)',
-    'bg-subtle': 'var(--neutral-200)',
-    'bg-muted': 'var(--neutral-300)',
-    'text': 'var(--neutral-950)',
-    'text-muted': 'var(--neutral-700)',
-    'text-subtle': 'var(--neutral-600)',
+    'section': 'var(--neutral-100)',
+    'card': 'var(--neutral-200)',
+    'muted': 'var(--neutral-300)',
+    'body': 'var(--neutral-950)',
     'heading': 'var(--neutral-900)',
-    'link': 'var(--primary-600)',
-    'link-hover': 'var(--primary-700)',
+    'subtle': 'var(--neutral-700)',
     'border': 'var(--neutral-300)',
-    'border-muted': 'var(--neutral-200)',
     'ring': 'var(--primary-500)',
-    'btn-primary-bg': 'var(--primary-600)',
-    'btn-primary-text': 'white',
-    'btn-primary-hover': 'var(--primary-700)',
-    'btn-secondary-bg': 'var(--neutral-200)',
-    'btn-secondary-text': 'var(--neutral-900)',
-    'btn-secondary-hover': 'var(--neutral-300)',
+    'link': 'var(--primary-600)',
+    'link-hover': 'var(--primary-700)',
+    'primary': 'var(--primary-600)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-700)',
+    'secondary': 'var(--neutral-200)',
+    'secondary-foreground': 'var(--neutral-900)',
+    'secondary-hover': 'var(--neutral-300)',
+    'success': '#16a34a',
+    'success-subtle': '#f0fdf4',
+    'warning': '#d97706',
+    'warning-subtle': '#fffbeb',
+    'error': '#dc2626',
+    'error-subtle': '#fef2f2',
+    'info': '#2563eb',
+    'info-subtle': '#eff6ff',
   },
   dark: {
-    'bg': 'var(--neutral-900)',
-    'bg-subtle': 'var(--neutral-800)',
-    'bg-muted': 'var(--neutral-700)',
-    'text': 'var(--neutral-50)',
-    'text-muted': 'var(--neutral-300)',
-    'text-subtle': 'var(--neutral-400)',
+    'section': 'var(--neutral-900)',
+    'card': 'var(--neutral-800)',
+    'muted': 'var(--neutral-700)',
+    'body': 'var(--neutral-50)',
     'heading': 'white',
-    'link': 'var(--primary-400)',
-    'link-hover': 'var(--primary-300)',
+    'subtle': 'var(--neutral-400)',
     'border': 'var(--neutral-700)',
-    'border-muted': 'var(--neutral-800)',
     'ring': 'var(--primary-500)',
-    'btn-primary-bg': 'var(--primary-500)',
-    'btn-primary-text': 'white',
-    'btn-primary-hover': 'var(--primary-400)',
-    'btn-secondary-bg': 'var(--neutral-800)',
-    'btn-secondary-text': 'var(--neutral-100)',
-    'btn-secondary-hover': 'var(--neutral-700)',
+    'link': 'var(--primary-400)',
+    'link-hover': 'var(--primary-300)',
+    'primary': 'var(--primary-500)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-400)',
+    'secondary': 'var(--neutral-800)',
+    'secondary-foreground': 'var(--neutral-100)',
+    'secondary-hover': 'var(--neutral-700)',
+    'success': '#4ade80',
+    'success-subtle': '#052e16',
+    'warning': '#fbbf24',
+    'warning-subtle': '#451a03',
+    'error': '#f87171',
+    'error-subtle': '#450a0a',
+    'info': '#60a5fa',
+    'info-subtle': '#172554',
   },
 }
 
@@ -82,7 +100,7 @@ const DEFAULT_COLORS = {
   primary: '#3b82f6',   // Blue
   secondary: '#64748b', // Slate
   accent: '#8b5cf6',    // Purple
-  neutral: '#71717a',   // Zinc
+  neutral: '#78716c',   // Stone
 }
 
 // Shade levels for CSS variable generation
@@ -134,7 +152,7 @@ function generateContextCSS(context, tokens = {}) {
 
   const vars = generateVarDeclarations(mergedTokens)
 
-  return `.context-${context} {\n${vars}\n  background-color: var(--bg);\n}`
+  return `.context-${context} {\n${vars}\n  background-color: var(--section);\n}`
 }
 
 /**
@@ -148,17 +166,30 @@ function generateDarkSchemeCSS(config = {}) {
 
   // Dark scheme tokens - similar to dark context but at root level
   const darkTokens = {
-    'bg': 'var(--neutral-950)',
-    'bg-subtle': 'var(--neutral-900)',
-    'bg-muted': 'var(--neutral-800)',
-    'text': 'var(--neutral-50)',
-    'text-muted': 'var(--neutral-300)',
-    'text-subtle': 'var(--neutral-400)',
+    '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)',
-    'border': 'var(--neutral-800)',
-    'border-muted': 'var(--neutral-900)',
+    'primary': 'var(--primary-500)',
+    'primary-foreground': 'white',
+    'primary-hover': 'var(--primary-400)',
+    'secondary': 'var(--neutral-800)',
+    'secondary-foreground': 'var(--neutral-100)',
+    'secondary-hover': 'var(--neutral-700)',
+    'success': '#4ade80',
+    'success-subtle': '#052e16',
+    'warning': '#fbbf24',
+    'warning-subtle': '#451a03',
+    'error': '#f87171',
+    'error-subtle': '#450a0a',
+    'info': '#60a5fa',
+    'info-subtle': '#172554',
   }
 
   const vars = generateVarDeclarations(darkTokens)

package/src/theme/processor.js

@@ -11,6 +11,31 @@
 import { isValidColor, generatePalettes } from './shade-generator.js'
 import { getDefaultColors, getDefaultContextTokens } from './css-generator.js'
 
+/**
+ * Named neutral presets mapping to Tailwind gray families
+ */
+const NEUTRAL_PRESETS = {
+  stone: '#78716c',
+  zinc: '#71717a',
+  gray: '#6b7280',
+  slate: '#64748b',
+  neutral: '#737373',
+}
+
+/**
+ * Default inline text styles (content-author markdown: [text]{emphasis})
+ * These reference semantic tokens so they adapt to context automatically
+ */
+const DEFAULT_INLINE = {
+  emphasis: {
+    color: 'var(--link)',
+    'font-weight': '600',
+  },
+  muted: {
+    color: 'var(--subtle)',
+  },
+}
+
 /**
  * Default appearance configuration
  */
@@ -84,6 +109,11 @@ function validateColors(colors) {
       continue
     }
 
+    // Accept neutral preset names (stone, zinc, gray, slate, neutral)
+    if (name === 'neutral' && NEUTRAL_PRESETS[value]) {
+      continue
+    }
+
     if (!isValidColor(value)) {
       errors.push(`Color "${name}" has invalid value: ${value}`)
     }
@@ -357,7 +387,12 @@ export function processTheme(rawConfig = {}, options = {}) {
 
   // Process colors
   const defaultColors = getDefaultColors()
-  const rawColors = rawConfig.colors || {}
+  const rawColors = { ...(rawConfig.colors || {}) }
+
+  // Resolve named neutral presets to hex values
+  if (typeof rawColors.neutral === 'string' && NEUTRAL_PRESETS[rawColors.neutral]) {
+    rawColors.neutral = NEUTRAL_PRESETS[rawColors.neutral]
+  }
 
   // Filter to only valid colors (skip invalid ones in non-strict mode)
   const validColors = {}
@@ -382,7 +417,7 @@ export function processTheme(rawConfig = {}, options = {}) {
     warnings.push('No primary color specified, using default blue (#3b82f6)')
   }
   if (!rawConfig.colors?.neutral) {
-    warnings.push('No neutral color specified, using default zinc (#71717a)')
+    warnings.push('No neutral color specified, using default stone (#78716c)')
   }
 
   // Process contexts
@@ -426,7 +461,8 @@ export function processTheme(rawConfig = {}, options = {}) {
   const background = rawConfig.background || null
 
   // Inline text styles (semantic names → CSS declarations)
-  const inline = rawConfig.inline || null
+  // Merge framework defaults with user overrides (user values win)
+  const inline = { ...DEFAULT_INLINE, ...(rawConfig.inline || {}) }
 
   const config = {
     colors,      // Raw colors for CSS generator

package/src/vite-foundation-plugin.js

@@ -16,8 +16,8 @@ import { processAllPreviews } from './images.js'
 /**
  * Build schema.json with preview image references
  */
-async function buildSchemaWithPreviews(srcDir, outDir, isProduction, componentPaths) {
-  const schema = await buildSchema(srcDir, componentPaths)
+async function buildSchemaWithPreviews(srcDir, outDir, isProduction, sectionPaths) {
+  const schema = await buildSchema(srcDir, sectionPaths)
 
   // Process preview images
   const { schema: schemaWithImages, totalImages } = await processAllPreviews(
@@ -42,7 +42,7 @@ export function foundationBuildPlugin(options = {}) {
     srcDir = 'src',
     generateEntry = true,
     entryFileName = '_entry.generated.js',
-    components: componentPaths,
+    sections: sectionPaths,
   } = options
 
   let resolvedSrcDir
@@ -59,7 +59,7 @@ export function foundationBuildPlugin(options = {}) {
       const root = config.root || process.cwd()
       const srcPath = resolve(root, srcDir)
       const entryPath = join(srcPath, entryFileName)
-      await generateEntryPoint(srcPath, entryPath, { componentPaths })
+      await generateEntryPoint(srcPath, entryPath, { sectionPaths })
     },
 
     async configResolved(config) {
@@ -80,7 +80,7 @@ export function foundationBuildPlugin(options = {}) {
         resolvedSrcDir,
         outDir,
         isProduction,
-        componentPaths
+        sectionPaths
       )
 
       const schemaPath = join(metaDir, 'schema.json')
@@ -99,7 +99,7 @@ export function foundationDevPlugin(options = {}) {
   const {
     srcDir = 'src',
     entryFileName = '_entry.generated.js',
-    components: componentPaths,
+    sections: sectionPaths,
   } = options
 
   let resolvedSrcDir
@@ -112,7 +112,7 @@ export function foundationDevPlugin(options = {}) {
       const root = config.root || process.cwd()
       const srcPath = resolve(root, srcDir)
       const entryPath = join(srcPath, entryFileName)
-      await generateEntryPoint(srcPath, entryPath, { componentPaths })
+      await generateEntryPoint(srcPath, entryPath, { sectionPaths })
     },
 
     configResolved(config) {
@@ -124,7 +124,7 @@ export function foundationDevPlugin(options = {}) {
       if (reason) {
         console.log(`[foundation] ${reason}, regenerating entry...`)
         const entryPath = join(resolvedSrcDir, entryFileName)
-        await generateEntryPoint(resolvedSrcDir, entryPath, { componentPaths })
+        await generateEntryPoint(resolvedSrcDir, entryPath, { sectionPaths })
         server.ws.send({ type: 'full-reload' })
       }
     },