uniweb 0.8.13 → 0.8.15

package/README.md

@@ -36,10 +36,10 @@ Edit files in `site/pages/` and `foundation/src/sections/` to see changes instan
 | **Store** | E-commerce with product grid |
 | **Extensions** | Multi-foundation with visual effects extension |
 
-Use `--blank` for an empty workspace (no packages) — grow with `uniweb add`.
-
 **See them live:** [View all template demos](https://uniweb.github.io/templates/)
 
+Use `--blank` for an empty workspace (no packages) — grow with `uniweb add`.
+
 Or skip the interactive prompt:
 
 ```bash
@@ -164,6 +164,36 @@ export default function Hero({ content, params }) {
 
 Standard React. Standard Tailwind. The `{ content, params }` interface is only for _section types_ — components that content creators select in markdown frontmatter. Everything else uses regular React props.
 
+### Composition
+
+Sections aren't limited to flat content. Content authors can embed interactive React components using markdown image syntax:
+
+```markdown
+---
+type: SplitContent
+---
+
+# See it in action
+
+The architecture handles the hard parts so you can focus on what matters.
+
+![Live metrics](@PerformanceChart){period=30d}
+```
+
+`@PerformanceChart` is a full React component — a ThreeJS animation, an interactive diagram, a live data visualization — placed by the content author, rendered in the component's visual slot via `<Visual>`. It looks like an image reference, but it can be anything.
+
+Authors can also compose layouts from reusable section types using child sections:
+
+```
+pages/home/
+├── highlights.md            # type: Grid, columns: 3
+├── @stats.md                # type: StatCard
+├── @testimonial.md          # type: Testimonial
+└── @demo.md                 # type: SplitContent (with an embedded @LiveDemo inset)
+```
+
+Three different section types, arranged in a grid, one with an interactive component inside it — all authored in markdown. The developer builds reusable pieces; the content author composes them. See the [Component Patterns guide](https://github.com/uniweb/docs/blob/main/development/component-patterns.md) for the full composition model.
+
 ## Next Steps
 
 After creating your project:
@@ -386,7 +416,7 @@ packages:
 
 **How is this different from MDX?**
 
-MDX blends markdown and JSX—content authors write code. Uniweb keeps them separate: content stays in markdown, components stay in React. Content authors can't break components, and component updates don't require content changes.
+MDX blends markdown and JSX—content authors write code. Uniweb keeps them separate: content stays in markdown, components stay in React. Authors can still embed interactive components (via `![](@Component)` syntax), but they never see JSX. Component updates don't require content changes, and content changes can't break components.
 
 **How is this different from Astro?**
 
@@ -420,4 +450,4 @@ Yes — documentation is a natural fit. Content stays in markdown (easy to versi
 
 ## License
 
-Apache 2.0
+Apache 2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uniweb",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "description": "Create structured Vite + React sites with content/code separation",
   "type": "module",
   "bin": {
@@ -41,11 +41,11 @@
     "js-yaml": "^4.1.0",
     "prompts": "^2.4.2",
     "tar": "^7.0.0",
-    "@uniweb/build": "0.8.12",
+    "@uniweb/build": "0.8.14",
     "@uniweb/content-reader": "1.1.4",
-    "@uniweb/core": "0.5.9",
-    "@uniweb/kit": "0.7.9",
-    "@uniweb/runtime": "0.6.9",
+    "@uniweb/core": "0.5.10",
+    "@uniweb/runtime": "0.6.11",
+    "@uniweb/kit": "0.7.10",
     "@uniweb/semantic-parser": "1.1.6"
   }
 }

package/src/commands/add.js

@@ -121,7 +121,7 @@ export async function add(rawArgs) {
       error(`Missing subcommand.\n`)
       log(formatOptions([
         { label: 'project', description: 'Co-located foundation + site pair' },
-        { label: 'foundation', description: 'Component library' },
+        { label: 'foundation', description: 'Component system for content authors' },
         { label: 'site', description: 'Content site' },
         { label: 'extension', description: 'Additional component package' },
         { label: 'section', description: 'Section type in a foundation' },
@@ -137,7 +137,7 @@ export async function add(rawArgs) {
       message: 'What would you like to add?',
       choices: [
         { title: 'Project', value: 'project', description: 'Co-located foundation + site pair' },
-        { title: 'Foundation', value: 'foundation', description: 'Component library' },
+        { title: 'Foundation', value: 'foundation', description: 'Component system for content authors' },
         { title: 'Site', value: 'site', description: 'Content site' },
         { title: 'Extension', value: 'extension', description: 'Additional component package' },
         { title: 'Section', value: 'section', description: 'Section type in a foundation' },
@@ -594,7 +594,8 @@ async function addProject(rootDir, projectName, opts, pm = 'pnpm') {
  * - --project: {project}/foundation (co-located)
  * - Existing co-located glob: follow pattern
  * - Existing segregated glob: follow pattern
- * - First foundation: dir name is the name (default: 'foundation')
+ * - Named (e.g., "marketing"): segregated at foundations/{name}
+ * - Unnamed: root-level 'foundation'
  * - Already have one: error in non-interactive, ask in interactive
  */
 async function resolveFoundationTarget(rootDir, name, opts) {
@@ -619,8 +620,13 @@ async function resolveFoundationTarget(rootDir, name, opts) {
     return `foundations/${name || 'foundation'}`
   }
 
-  // dir name = name or 'foundation'
-  const dirName = name || 'foundation'
+  // Named foundation → segregated layout (foundations/{name})
+  if (name) {
+    return `foundations/${name}`
+  }
+
+  // Unnamed → root-level 'foundation'
+  const dirName = 'foundation'
 
   // Check if target already exists
   if (!existsSync(join(rootDir, dirName))) {
@@ -667,8 +673,13 @@ async function resolveSiteTarget(rootDir, name, opts) {
     return `sites/${name || 'site'}`
   }
 
-  // dir name = name or 'site'
-  const dirName = name || 'site'
+  // Named site → segregated layout (sites/{name})
+  if (name) {
+    return `sites/${name}`
+  }
+
+  // Unnamed → root-level 'site'
+  const dirName = 'site'
 
   // Check if target already exists
   if (!existsSync(join(rootDir, dirName))) {
@@ -1050,9 +1061,9 @@ ${colors.bright}Examples:${colors.reset}
   uniweb add project docs                              # Create docs/foundation/ + docs/site/
   uniweb add project docs --from academic              # Co-located pair + academic content
   uniweb add foundation                                # Create ./foundation/ at root
-  uniweb add foundation ui                             # Create ./ui/ at root
+  uniweb add foundation ui                             # Create ./foundations/ui/
   uniweb add site                                      # Create ./site/ at root
-  uniweb add site blog --foundation marketing          # Create ./blog/ wired to marketing
+  uniweb add site blog --foundation marketing          # Create ./sites/blog/ wired to marketing
   uniweb add extension effects --site site             # Create ./extensions/effects/
   uniweb add section Hero                              # Create Hero section type
   uniweb add section Hero --foundation ui              # Target specific foundation

package/src/commands/build.js

@@ -18,9 +18,7 @@ import { writeFile, mkdir } from 'node:fs/promises'
 // Import build utilities from @uniweb/build
 import {
   generateEntryPoint,
-  buildSchema,
   discoverComponents,
-  processAllPreviews,
 } from '@uniweb/build'
 import { readSiteConfig } from '@uniweb/build/site'
 import { readWorkspaceConfig, resolveGlob } from '../utils/config.js'
@@ -130,7 +128,6 @@ function runCommand(command, args, cwd) {
  */
 async function buildFoundation(projectDir, options = {}) {
   const srcDir = join(projectDir, 'src')
-  const distDir = join(projectDir, 'dist')
 
   info('Building foundation...')
 
@@ -163,50 +160,19 @@ async function buildFoundation(projectDir, options = {}) {
   // For now, just run the standard vite build
   await runCommand('npx', ['vite', 'build'], projectDir)
 
-  success('Vite build complete')
-
-  // 4. Generate schema.json
-  log('')
-  info('Generating schema.json...')
-  let schema = await buildSchema(srcDir)
-
-  await mkdir(distDir, { recursive: true })
+  // Vite's foundation plugin generates dist/meta/schema.json
+  // and processes preview images during the build.
 
-  // 5. Process preview images
-  log('')
-  info('Processing preview images...')
-  const isProduction = process.env.NODE_ENV === 'production' || !process.env.NODE_ENV
-  const { schema: updatedSchema, totalImages } = await processAllPreviews(
-    srcDir,
-    distDir,
-    schema,
-    isProduction
-  )
-  schema = updatedSchema
-
-  if (totalImages > 0) {
-    success(`Processed ${totalImages} preview image${totalImages > 1 ? 's' : ''} (converted to webp)`)
-  } else {
-    log(`  ${colors.dim}No preview images found${colors.reset}`)
-  }
-
-  // 6. Write schema.json
-  const schemaPath = join(distDir, 'schema.json')
-  await writeFile(schemaPath, JSON.stringify(schema, null, 2), 'utf-8')
-
-  success(`Generated schema.json with ${componentNames.length} components`)
+  success('Vite build complete')
 
   // Summary
   log('')
   log(`${colors.green}${colors.bright}Build complete!${colors.reset}`)
+
   log('')
-  log(`Output:`)
-  log(`  ${colors.dim}dist/foundation.js${colors.reset}    - Bundled components`)
-  log(`  ${colors.dim}dist/assets/style.css${colors.reset} - Compiled CSS`)
-  log(`  ${colors.dim}dist/schema.json${colors.reset}      - Component schemas`)
-  if (totalImages > 0) {
-    log(`  ${colors.dim}dist/assets/[component]/${colors.reset} - Preview images`)
-  }
+  log(`${colors.bright}Share with clients:${colors.reset}`)
+  log(`  ${colors.bright}uniweb publish${colors.reset}              Register your foundation (one-time setup)`)
+  log(`  ${colors.bright}uniweb handoff <email>${colors.reset}      Hand off a site to a client`)
 }
 
 /**
@@ -225,7 +191,7 @@ async function loadI18nConfig(projectDir, siteConfig = null) {
 
   // Resolve locales (undefined/'*' → all available, array → specific)
   const { resolveLocales } = await import('@uniweb/build/i18n')
-  const locales = await resolveLocales(config.i18n?.locales, localesPath)
+  const locales = await resolveLocales(config.languages, localesPath)
 
   if (locales.length === 0) return null
 
@@ -489,6 +455,8 @@ async function buildSite(projectDir, options = {}) {
       process.exit(1)
     }
   }
+
+  showNextSteps(false, true)
 }
 
 /**
@@ -625,6 +593,26 @@ async function buildWorkspace(workspaceDir, options = {}) {
   log(`${colors.green}${colors.bright}Workspace build complete!${colors.reset}`)
   log('')
   log(`Built ${parts.join(', ')}`)
+
+  showNextSteps(foundations.length > 0, sites.length > 0)
+}
+
+/**
+ * Show next-step hints after workspace build
+ */
+function showNextSteps(hasFoundations, hasSites) {
+  if (hasFoundations) {
+    log('')
+    log(`${colors.bright}Share with clients:${colors.reset}`)
+    log(`  ${colors.bright}uniweb publish${colors.reset}              Register your foundation (one-time setup)`)
+    log(`  ${colors.bright}uniweb handoff <email>${colors.reset}      Hand off a site to a client`)
+  }
+  if (hasSites) {
+    log('')
+    log(`${colors.bright}Deploy:${colors.reset}`)
+    log(`  ${colors.bright}uniweb deploy${colors.reset}     Uniweb hosting`)
+    log(`  Or upload ${colors.cyan}dist/${colors.reset} to any static host`)
+  }
 }
 
 /**

package/src/commands/deploy.js

@@ -0,0 +1,272 @@
+/**
+ * Deploy Command
+ *
+ * Deploys a built site to Uniweb hosting.
+ *
+ * Usage:
+ *   uniweb deploy                          # Deploy to Uniweb hosting
+ *   uniweb deploy --local                  # Deploy to local server (no auth)
+ *   uniweb deploy --registry <url>         # Deploy to a specific server URL
+ *   uniweb deploy --dry-run                # Show what would be deployed
+ *   uniweb deploy --prod                   # Deploy to production (future)
+ */
+
+import { existsSync } from 'node:fs'
+import { readFile, readdir } from 'node:fs/promises'
+import { resolve, join, basename, relative } from 'node:path'
+import { execSync } from 'node:child_process'
+
+import { ensureAuth } from '../utils/auth.js'
+import { findWorkspaceRoot, findSites, findFoundations, classifyPackage, promptSelect } from '../utils/workspace.js'
+import { isNonInteractive, getCliPrefix } from '../utils/interactive.js'
+
+// Colors for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  cyan: '\x1b[36m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+}
+
+function success(message) {
+  console.log(`${colors.green}✓${colors.reset} ${message}`)
+}
+
+function error(message) {
+  console.error(`${colors.red}✗${colors.reset} ${message}`)
+}
+
+function info(message) {
+  console.log(`${colors.cyan}→${colors.reset} ${message}`)
+}
+
+/**
+ * Resolve the site directory to deploy.
+ *
+ * Priority:
+ * 1. In a site directory → use it
+ * 2. At workspace root, one site → use it
+ * 3. At workspace root, multiple → prompt (or error if non-interactive)
+ * 4. No site → educational error with alternatives
+ *
+ * @param {string[]} args
+ * @returns {Promise<string>} Absolute path to the site directory
+ */
+async function resolveSiteDir(args) {
+  const cwd = process.cwd()
+  const prefix = getCliPrefix()
+
+  // Check if current directory is a site
+  const type = await classifyPackage(cwd)
+  if (type === 'site') {
+    return cwd
+  }
+
+  // Check workspace
+  const workspaceRoot = findWorkspaceRoot(cwd)
+  if (workspaceRoot) {
+    const sites = await findSites(workspaceRoot)
+
+    if (sites.length === 1) {
+      return resolve(workspaceRoot, sites[0])
+    }
+
+    if (sites.length > 1) {
+      if (isNonInteractive(args)) {
+        error('Multiple sites found. Specify which one to deploy.')
+        console.log('')
+        for (const s of sites) {
+          console.log(`  ${colors.cyan}cd ${s} && ${prefix} deploy${colors.reset}`)
+        }
+        process.exit(1)
+      }
+
+      const choice = await promptSelect('Which site?', sites)
+      if (!choice) {
+        console.log('\nDeploy cancelled.')
+        process.exit(0)
+      }
+      return resolve(workspaceRoot, choice)
+    }
+  }
+
+  // No site found — educational error
+  error('No site found in this workspace.')
+  console.log('')
+  console.log(`  ${colors.dim}\`deploy\` uploads your built site to Uniweb hosting.${colors.reset}`)
+  console.log('')
+  console.log(`  ${colors.dim}The site is a standard Vite build — you can also upload dist/${colors.reset}`)
+  console.log(`  ${colors.dim}to any static host.${colors.reset}`)
+  process.exit(1)
+}
+
+/**
+ * Parse --registry <url> from args.
+ * @param {string[]} args
+ * @returns {string|null}
+ */
+function parseRegistryUrl(args) {
+  const idx = args.indexOf('--registry')
+  if (idx === -1 || !args[idx + 1]) return null
+  return args[idx + 1]
+}
+
+/**
+ * Derive a siteId from the site's package.json or directory name.
+ * @param {string} siteDir
+ * @returns {Promise<string>}
+ */
+async function deriveSiteId(siteDir) {
+  const pkgPath = join(siteDir, 'package.json')
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(await readFile(pkgPath, 'utf8'))
+      if (pkg.name) return pkg.name
+    } catch {
+      // Fall through
+    }
+  }
+  return basename(siteDir)
+}
+
+/**
+ * Walk a directory recursively and collect all files as base64.
+ * @param {string} dir
+ * @returns {Promise<Object<string, string>>} Map of relative paths to base64 content
+ */
+async function collectFiles(dir) {
+  const files = {}
+  const entries = await readdir(dir, { withFileTypes: true, recursive: true })
+
+  for (const entry of entries) {
+    if (!entry.isFile()) continue
+    const fullPath = join(entry.parentPath || entry.path, entry.name)
+    const relPath = relative(dir, fullPath)
+    const content = await readFile(fullPath)
+    files[relPath] = content.toString('base64')
+  }
+
+  return files
+}
+
+/**
+ * Main deploy command handler
+ */
+export async function deploy(args = []) {
+  const isLocal = args.includes('--local')
+  const isDryRun = args.includes('--dry-run')
+  const registryUrl = parseRegistryUrl(args)
+  const prefix = getCliPrefix()
+
+  // 1. Resolve site directory
+  const siteDir = await resolveSiteDir(args)
+
+  // 2. Check auth (unless --local)
+  let token = null
+  if (!isLocal) {
+    token = await ensureAuth({ command: 'Deploying' })
+  }
+
+  // 3. Auto-build if dist/ is missing
+  const distDir = join(siteDir, 'dist')
+  const indexHtml = join(distDir, 'index.html')
+
+  if (!existsSync(indexHtml)) {
+    console.log(`${colors.yellow}⚠${colors.reset} No build found. Building site...`)
+    console.log('')
+    execSync('npx uniweb build', {
+      cwd: siteDir,
+      stdio: 'inherit',
+    })
+    console.log('')
+
+    if (!existsSync(indexHtml)) {
+      error('Build did not produce dist/index.html')
+      process.exit(1)
+    }
+  }
+
+  // 4. Derive siteId
+  const siteId = await deriveSiteId(siteDir)
+
+  // 5. Collect files from dist/
+  const files = await collectFiles(distDir)
+  const filesCount = Object.keys(files).length
+
+  // 6. Dry-run check
+  if (isDryRun) {
+    console.log('')
+    info(`Would deploy ${colors.bright}${siteId}${colors.reset} (${filesCount} files)`)
+    console.log(`  ${colors.dim}Source: ${distDir}${colors.reset}`)
+    const serverUrl = registryUrl || process.env.UNIWEB_REGISTRY_URL || 'http://localhost:4001'
+    console.log(`  ${colors.dim}Target: ${serverUrl}/sites/${siteId}/${colors.reset}`)
+    return
+  }
+
+  // 7. Deploy
+  const serverUrl = registryUrl || process.env.UNIWEB_REGISTRY_URL || 'http://localhost:4001'
+  info(`Deploying ${colors.bright}${siteId}${colors.reset} (${filesCount} files)...`)
+
+  const headers = { 'Content-Type': 'application/json' }
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`
+  }
+
+  const payload = {
+    siteId,
+    files,
+    metadata: {
+      deployedBy: isLocal ? 'local' : 'cli',
+    },
+  }
+
+  let res
+  try {
+    res = await fetch(`${serverUrl}/deploy`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(payload),
+    })
+  } catch (err) {
+    error(`Could not connect to ${serverUrl}`)
+    console.log('')
+    console.log(`  ${colors.dim}Make sure the cloud server is running:${colors.reset}`)
+    console.log(`    ${colors.cyan}cd packages/cloud && pnpm dev${colors.reset}`)
+    process.exit(1)
+  }
+
+  const body = await res.json()
+
+  if (!res.ok) {
+    if (res.status === 401) {
+      error('Authentication failed.')
+      console.log(`  Run ${colors.cyan}${prefix} login${colors.reset} to refresh your credentials.`)
+      process.exit(1)
+    }
+    error(body.error || `Deploy failed (${res.status})`)
+    process.exit(1)
+  }
+
+  console.log('')
+  success(`Deployed ${colors.bright}${siteId}${colors.reset}`)
+
+  const siteUrl = body.siteUrl
+    ? `${serverUrl}${body.siteUrl}`
+    : `${serverUrl}/sites/${siteId}/`
+  console.log(`  ${colors.cyan}${siteUrl}${colors.reset}`)
+
+  // Cross-promotion: if workspace has a foundation, tip about publish
+  const workspaceRoot = findWorkspaceRoot(siteDir)
+  if (workspaceRoot) {
+    const foundations = await findFoundations(workspaceRoot)
+    if (foundations.length > 0) {
+      console.log('')
+      console.log(`  ${colors.dim}Tip: Run \`${prefix} publish\` to register your foundation and invite clients.${colors.reset}`)
+    }
+  }
+}
+
+export default deploy

package/src/commands/docs.js

@@ -80,7 +80,7 @@ ${colors.bright}Page Ordering:${colors.reset}
                     Rest are auto-discovered
 
 ${colors.bright}Internationalization:${colors.reset}
-  ${colors.cyan}i18n.locales${colors.reset}      Locales to build (array or "*" for all)
+  ${colors.cyan}languages${colors.reset}         Languages to build (array or "*" for all)
                     Example: [es, fr, de]
   ${colors.cyan}i18n.localesDir${colors.reset}   Translation files directory (default: "locales")