@uniweb/build 0.8.5 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -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.5.4"
+    "@uniweb/core": "0.5.5"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/prerender.js

@@ -825,7 +825,24 @@ export async function prerenderSite(siteDir, options = {}) {
       try {
         renderedContent = renderToString(element)
       } catch (err) {
-        console.warn(`Warning: Failed to render ${outputRoute}: ${err.message}`)
+        const msg = err.message || ''
+
+        if (msg.includes('Invalid hook call') || msg.includes('useState') || msg.includes('useEffect')) {
+          console.warn(
+            `  Skipped SSG for ${outputRoute} — contains components with React hooks ` +
+            `(useState/useEffect) that cannot render during pre-rendering. ` +
+            `The page will render correctly client-side.`
+          )
+        } else if (msg.includes('Element type is invalid') && msg.includes('null')) {
+          console.warn(
+            `  Skipped SSG for ${outputRoute} — a component resolved to null during pre-rendering. ` +
+            `This often happens with components that use React hooks. ` +
+            `The page will render correctly client-side.`
+          )
+        } else {
+          console.warn(`  Warning: Failed to render ${outputRoute}: ${msg}`)
+        }
+
         if (process.env.DEBUG) {
           console.error(err.stack)
         }

package/src/theme/css-generator.js

@@ -29,9 +29,11 @@ const DEFAULT_CONTEXT_TOKENS = {
     'primary': 'var(--primary-600)',
     'primary-foreground': 'white',
     'primary-hover': 'var(--primary-700)',
-    'secondary': 'var(--neutral-100)',
+    'primary-border': 'transparent',
+    'secondary': 'white',
     'secondary-foreground': 'var(--neutral-900)',
-    'secondary-hover': 'var(--neutral-200)',
+    'secondary-hover': 'var(--neutral-100)',
+    'secondary-border': 'var(--neutral-300)',
     'success': '#16a34a',
     'success-subtle': '#f0fdf4',
     'warning': '#d97706',
@@ -55,9 +57,11 @@ const DEFAULT_CONTEXT_TOKENS = {
     'primary': 'var(--primary-600)',
     'primary-foreground': 'white',
     'primary-hover': 'var(--primary-700)',
-    'secondary': 'var(--neutral-200)',
+    'primary-border': 'transparent',
+    'secondary': 'white',
     'secondary-foreground': 'var(--neutral-900)',
-    'secondary-hover': 'var(--neutral-300)',
+    'secondary-hover': 'var(--neutral-100)',
+    'secondary-border': 'var(--neutral-300)',
     'success': '#16a34a',
     'success-subtle': '#f0fdf4',
     'warning': '#d97706',
@@ -81,9 +85,11 @@ const DEFAULT_CONTEXT_TOKENS = {
     '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',
@@ -179,9 +185,11 @@ function generateDarkSchemeCSS(config = {}) {
     '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',

package/src/theme/processor.js

@@ -85,6 +85,45 @@ const DEFAULT_CODE_THEME = {
   selection: '#45475a',       // Selection background
 }
 
+/**
+ * Valid shade levels for palette references
+ */
+const SHADE_LEVELS = new Set([50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950])
+
+/**
+ * Resolve context token values to valid CSS.
+ *
+ * Content authors write palette references as bare names: `primary-500`,
+ * `neutral-200`. This is the natural syntax in theme.yml. The processor
+ * resolves these to `var(--primary-500)` etc. Plain CSS values (hex, var(),
+ * named colors) pass through as-is — that's the escape hatch.
+ *
+ * @param {string} value - The token value from theme.yml
+ * @returns {string} Valid CSS value
+ */
+function normalizePaletteRef(value) {
+  if (typeof value !== 'string') return value
+
+  // Already a CSS function (var(), rgb(), etc.) — pass through
+  if (value.includes('(')) return value
+
+  // Hex color — pass through
+  if (value.startsWith('#')) return value
+
+  // Bare palette reference: "primary-500", "--primary-500"
+  const bare = value.replace(/^-{0,2}/, '')
+  const match = bare.match(/^([a-z][a-z0-9]*)-(\d+)$/)
+
+  if (match) {
+    const shade = parseInt(match[2], 10)
+    if (SHADE_LEVELS.has(shade)) {
+      return `var(--${bare})`
+    }
+  }
+
+  return value
+}
+
 /**
  * Validate color configuration
  *
@@ -420,12 +459,20 @@ export function processTheme(rawConfig = {}, options = {}) {
     warnings.push('No neutral color specified, using default stone (#78716c)')
   }
 
-  // Process contexts
+  // Process contexts (resolve bare palette refs like "primary-500" to var())
   const defaultContexts = getDefaultContextTokens()
-  const contexts = {
-    light: { ...defaultContexts.light, ...(rawConfig.contexts?.light || {}) },
-    medium: { ...defaultContexts.medium, ...(rawConfig.contexts?.medium || {}) },
-    dark: { ...defaultContexts.dark, ...(rawConfig.contexts?.dark || {}) },
+  const rawContexts = rawConfig.contexts || {}
+  const contexts = {}
+
+  for (const name of ['light', 'medium', 'dark']) {
+    const overrides = rawContexts[name] || {}
+    const normalized = {}
+
+    for (const [token, value] of Object.entries(overrides)) {
+      normalized[token] = normalizePaletteRef(value)
+    }
+
+    contexts[name] = { ...defaultContexts[name], ...normalized }
   }
 
   // Process fonts