@uniweb/build 0.7.6 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.7.6",
+  "version": "0.8.1",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -50,9 +50,9 @@
     "sharp": "^0.33.2"
   },
   "optionalDependencies": {
-    "@uniweb/content-reader": "1.1.2",
-    "@uniweb/schemas": "0.2.1",
-    "@uniweb/runtime": "0.6.1"
+    "@uniweb/content-reader": "1.1.3",
+    "@uniweb/runtime": "0.6.1",
+    "@uniweb/schemas": "0.2.1"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
@@ -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.1"
+    "@uniweb/core": "0.5.2"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/runtime-schema.js

@@ -190,6 +190,11 @@ export function extractRuntimeSchema(fullMeta) {
 
   const runtime = {}
 
+  // Embed flag: signals this component is designed for inline embedding via @ refs
+  if (fullMeta.embed) {
+    runtime.embed = true
+  }
+
   // Background opt-out: 'self' means the component renders its own background
   // layer (solid colors, insets, effects), so the runtime skips its Background.
   if (fullMeta.background) {

package/src/site/content-collector.js

@@ -178,6 +178,45 @@ async function readYamlFile(filePath) {
   }
 }
 
+/**
+ * Extract inline child references from a ProseMirror document.
+ *
+ * Walks top-level nodes for `inline_child_ref` (produced by content-reader
+ * for `![alt](@ComponentName){params}` syntax). Each ref is removed from the
+ * document and replaced with an `inline_child_placeholder` node carrying a
+ * unique refId. The extracted refs are returned as an array.
+ *
+ * @param {Object} doc - ProseMirror document (mutated in place)
+ * @returns {Array} Array of { refId, type, params, alt }
+ */
+function extractInlineChildren(doc) {
+  if (!doc?.content || !Array.isArray(doc.content)) return []
+
+  const inlineChildren = []
+  let refIndex = 0
+
+  for (let i = 0; i < doc.content.length; i++) {
+    const node = doc.content[i]
+    if (node.type === 'inline_child_ref') {
+      const { component, alt, ...params } = node.attrs || {}
+      const refId = `inline_${refIndex++}`
+      inlineChildren.push({
+        refId,
+        type: component,
+        params: Object.keys(params).length > 0 ? params : {},
+        alt: alt || null,
+      })
+      // Replace in-place with placeholder
+      doc.content[i] = {
+        type: 'inline_child_placeholder',
+        attrs: { refId },
+      }
+    }
+  }
+
+  return inlineChildren
+}
+
 /**
  * Check if a file is a markdown file that should be processed.
  * Excludes:
@@ -579,6 +618,9 @@ async function processMarkdownFile(filePath, id, siteRoot, defaultStableId = nul
   // Convert markdown to ProseMirror
   const proseMirrorContent = markdownToProseMirror(markdown)
 
+  // Extract @ component references → inline children (mutates doc)
+  const inlineChildren = extractInlineChildren(proseMirrorContent)
+
   // Support 'data:' shorthand for collection fetch
   // data: team → fetch: { collection: team }
   // data: [team, articles] → fetch: { collection: team } (first item, others via inheritData)
@@ -601,6 +643,7 @@ async function processMarkdownFile(filePath, id, siteRoot, defaultStableId = nul
     params: { ...params, ...props },
     content: proseMirrorContent,
     fetch: parseFetchConfig(resolvedFetch),
+    ...(inlineChildren.length > 0 ? { inlineChildren } : {}),
     subsections: []
   }
 
@@ -1822,7 +1865,8 @@ export {
   extractItemName,
   parseWildcardArray,
   applyWildcardOrder,
-  getDirectChildName
+  getDirectChildName,
+  extractInlineChildren
 }
 
 export default collectSiteContent

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