uniweb 0.8.2 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uniweb",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Create structured Vite + React sites with content/code separation",
   "type": "module",
   "bin": {
@@ -41,9 +41,9 @@
     "js-yaml": "^4.1.0",
     "prompts": "^2.4.2",
     "tar": "^7.0.0",
-    "@uniweb/build": "0.8.2",
-    "@uniweb/kit": "0.7.2",
-    "@uniweb/runtime": "0.6.3",
-    "@uniweb/core": "0.5.3"
+    "@uniweb/runtime": "0.6.4",
+    "@uniweb/build": "0.8.3",
+    "@uniweb/core": "0.5.4",
+    "@uniweb/kit": "0.7.3"
   }
 }

package/partials/agents.md

@@ -100,7 +100,7 @@ content = {
   icons: [],        // { library, name, role }
   videos: [],       // Video embeds
   insets: [],       // Inline @Component references — { refId }
-  lists: [],        // Bullet/ordered lists
+  lists: [],        // [[{ paragraphs, links, lists, ... }]] — each list item is an object, not a string
   quotes: [],       // Blockquotes
   data: {},         // From tagged code blocks (```yaml:tagname)
   headings: [],     // Overflow headings after subtitle2
@@ -123,6 +123,35 @@ Lightning quick.        ← items[0].paragraphs[0]
 Enterprise-grade.       ← items[1].paragraphs[0]
 ```
 
+**Lists** contain bullet or ordered list items. Each list item is an object with the same content shape — not a plain string:
+
+```markdown
+# Features               ← title
+
+- Fast builds             ← lists[0][0].paragraphs[0]
+- **Hot** reload          ← lists[0][1].paragraphs[0]  (HTML: "<strong>Hot</strong> reload")
+```
+
+Items can contain lists:
+
+```markdown
+### Starter               ← items[0].title
+$9/month                  ← items[0].paragraphs[0]
+
+- Feature A               ← items[0].lists[0][0].paragraphs[0]
+- Feature B               ← items[0].lists[0][1].paragraphs[0]
+```
+
+Render list item text with kit components (see [kit section](#uniwebkit) below):
+
+```jsx
+import { Span } from '@uniweb/kit'
+
+content.lists[0]?.map((listItem, i) => (
+  <li key={i}><Span text={listItem.paragraphs[0]} /></li>
+))
+```
+
 ### Icons
 
 Use image syntax with library prefix: `![](lu-house)`. Supported libraries: `lu` (Lucide), `hi2` (Heroicons), `fi` (Feather), `pi` (Phosphor), `tb` (Tabler), `bs` (Bootstrap), `md` (Material), `fa6` (Font Awesome 6), and others. Browse at [react-icons.github.io/react-icons](https://react-icons.github.io/react-icons/).
@@ -270,16 +299,15 @@ nest:
 - Children are ordered by their position in the `nest:` array
 - Orphaned `@` files (no parent in `nest:`) appear at top-level with a warning
 
-Components receive children via `block.childBlocks`:
+Components receive children via `block.childBlocks`. Use `ChildBlocks` from kit to render them — the runtime handles component resolution:
 
 ```jsx
+import { ChildBlocks } from '@uniweb/kit'
+
 export default function Grid({ block, params }) {
   return (
     <div className={`grid grid-cols-${params.columns || 2} gap-6`}>
-      {block.childBlocks.map(child => {
-        const Comp = child.initComponent()
-        return Comp ? <Comp key={child.id} block={child} /> : null
-      })}
+      <ChildBlocks from={block} />
     </div>
   )
 }
@@ -520,9 +548,45 @@ All defaults belong in `meta.js`, not inline in component code.
 
 ### @uniweb/kit
 
-**Primitives** (`@uniweb/kit`): `H1`–`H6`, `P`, `Span`, `Text`, `Link`, `Image`, `Icon`, `Media`, `Asset`, `SocialIcon`, `FileLogo`, `cn()`
+Content fields (`title`, `pretitle`, `paragraphs[]`, list item text) are **HTML strings** — they contain markup like `<strong>`, `<em>`, `<a>` from the author's markdown. The kit provides components to render them correctly.
+
+**Rendering text** (`@uniweb/kit`):
+
+```jsx
+import { H2, P, Span } from '@uniweb/kit'
+
+<H2 text={content.title} className="text-heading text-3xl font-bold" />
+<P text={content.paragraphs[0]} className="text-body" />
+<P text={content.paragraphs} />   // array → each string becomes its own <p>
+<Span text={listItem.paragraphs[0]} className="text-subtle" />
+```
+
+`H1`–`H6`, `P`, `Span`, `Div` are all wrappers around `Text` with a preset tag:
+
+```jsx
+<Text text={content.title} as="h2" className="..." />  // explicit tag
+```
+
+Don't render content strings with `{content.paragraphs[0]}` in JSX — that shows HTML tags as visible text. Use `<P>`, `<H2>`, `<Span>`, etc. for content strings.
+
+**Rendering full content** (`@uniweb/kit`):
 
-**Styled** (`@uniweb/kit/styled`): `Section`, `Render`, `Visual`, `SidebarLayout`, `Code`, `Alert`, `Table`, `Details`, `Divider`, `Disclaimer`
+```jsx
+import { Section, Render } from '@uniweb/kit'
+
+<Render content={block.parsedContent} block={block} />   // ProseMirror nodes → React
+<Section block={block} width="lg" padding="md" />         // Render + prose styling + layout
+```
+
+`Render` processes ProseMirror nodes into React elements — paragraphs, headings, images, code blocks, lists, tables, alerts, and insets. `Section` wraps `Render` with prose typography and layout options. Use these when rendering a block's complete content. Use `P`, `H2`, etc. when you extract specific fields and arrange them with custom layout.
+
+**Rendering visuals** (`@uniweb/kit`):
+
+`<Visual>` renders the first non-empty candidate from the props you pass (inset, video, image). See Insets section below.
+
+**Other primitives** (`@uniweb/kit`): `Link`, `Image`, `Icon`, `Media`, `Asset`, `SafeHtml`, `SocialIcon`, `FileLogo`, `cn()`
+
+**Other styled** (`@uniweb/kit`): `SidebarLayout`, `Prose`, `Article`, `Code`, `Alert`, `Table`, `Details`, `Divider`, `Disclaimer`
 
 **Hooks:**
 - `useScrolled(threshold)` → boolean for scroll-based header styling
@@ -575,25 +639,26 @@ website.getLocaleUrl('es')
 Components access inline `@` references via `block.insets` (separate from `block.childBlocks`):
 
 ```jsx
-import { Visual } from '@uniweb/kit/styled'
+import { Visual } from '@uniweb/kit'
 
-// Visual renders the first visual: inset > video > image
-function SplitContent({ content, block, params }) {
+// Visual renders the first non-empty candidate: inset > video > image
+function SplitContent({ content, block }) {
   return (
     <div className="flex gap-12">
       <div className="flex-1">
         <h2 className="text-heading">{content.title}</h2>
       </div>
-      <Visual content={content} block={block} className="flex-1 rounded-lg" />
+      <Visual inset={block.insets[0]} video={content.videos[0]} image={content.imgs[0]} className="flex-1 rounded-lg" />
     </div>
   )
 }
 ```
 
+- `<Visual>` — renders first non-empty candidate from the props you pass (`inset`, `video`, `image`)
+- `<Render>` / `<Section>` — automatically handles `@Component` references placed in content flow
 - `block.insets` — array of Block instances from `@` references
 - `block.getInset(refId)` — lookup by refId (used by sequential renderers)
 - `content.insets` — flat array of `{ refId }` entries (parallel to `content.imgs`)
-- `<Visual>` — renders first inset > video > image from content (from `@uniweb/kit/styled`)
 
 Inset components declare `inset: true` in meta.js. Use `hidden: true` for inset-only components:
 
@@ -624,7 +689,7 @@ function SplitContent({ content, block, params }) {
         <h2 className="text-heading text-3xl font-bold">{content.title}</h2>
         <p className="text-body mt-4">{content.paragraphs[0]}</p>
       </div>
-      <Visual content={content} block={block} className="flex-1 rounded-2xl" />
+      <Visual inset={block.insets[0]} video={content.videos[0]} image={content.imgs[0]} className="flex-1 rounded-2xl" />
     </div>
   )
 }
@@ -731,7 +796,7 @@ Uniweb section types do more with less because the framework handles concerns th
 - **Dispatcher pattern** — one section type with a `variant` param replaces multiple near-duplicate components (`HeroHomepage` + `HeroPricing` → `Hero` with `variant: homepage | pricing`)
 - **Section nesting** — `@`-prefixed child files replace wrapper components that exist only to arrange children
 - **Insets** — `![](@ComponentName)` replaces prop-drilling of visual components into containers
-- **Visual component** — `<Visual>` renders image/video/inset from content, replacing manual media handling
+- **Visual component** — `<Visual>` renders the first non-empty visual from explicit candidates (inset, video, image), replacing manual media handling
 - **Semantic theming** — the runtime orchestrates context classes and token resolution, replacing per-component dark mode logic
 - **Engine backgrounds** — the runtime renders section backgrounds from frontmatter, replacing background-handling code in every section
 - **Rich params** — `meta.js` params with types, defaults, and presets replace config objects and conditional logic

package/partials/search-docs.hbs

@@ -14,7 +14,7 @@ pnpm add fuse.js
 Then use the search helpers from `@uniweb/kit`:
 
 ```jsx
-import { useSearch } from '@uniweb/kit/search'
+import { useSearch } from '@uniweb/kit'
 
 function SearchComponent({ website }) {
   const { query, results, isLoading, clear } = useSearch(website)

package/src/commands/add.js

@@ -22,6 +22,7 @@ import {
   discoverSites,
   updateRootScripts,
 } from '../utils/config.js'
+import { validatePackageName, getExistingPackageNames, resolveUniqueName } from '../utils/names.js'
 import { findWorkspaceRoot } from '../utils/workspace.js'
 import { detectPackageManager, filterCmd, installCmd } from '../utils/pm.js'
 import { resolveTemplate } from '../templates/index.js'
@@ -157,6 +158,16 @@ export async function add(args) {
  */
 async function addFoundation(rootDir, projectName, opts, pm = 'pnpm') {
   let name = opts.name
+  const existingNames = await getExistingPackageNames(rootDir)
+
+  // Reject reserved names (format + reserved check only — collisions handled at package name level)
+  if (name) {
+    const valid = validatePackageName(name)
+    if (valid !== true) {
+      error(valid)
+      process.exit(1)
+    }
+  }
 
   // Interactive name prompt when name not provided and no --path
   if (!name && !opts.path) {
@@ -167,11 +178,7 @@ async function addFoundation(rootDir, projectName, opts, pm = 'pnpm') {
       name: 'name',
       message: 'Foundation name:',
       initial: hasDefault ? 'foundation' : undefined,
-      validate: (value) => {
-        if (!value) return 'Name is required'
-        if (!/^[a-z0-9-]+$/.test(value)) return 'Use lowercase letters, numbers, and hyphens'
-        return true
-      },
+      validate: (value) => validatePackageName(value),
     }, {
       onCancel: () => {
         log('\nCancelled.')
@@ -193,9 +200,15 @@ async function addFoundation(rootDir, projectName, opts, pm = 'pnpm') {
     process.exit(1)
   }
 
+  // Compute package name — auto-suffix if it collides with an existing package
+  let packageName = name || opts.project || 'foundation'
+  if (existingNames.has(packageName)) {
+    packageName = resolveUniqueName(packageName, '-foundation', existingNames)
+  }
+
   // Scaffold
   await scaffoldFoundation(fullPath, {
-    name: name || opts.project || 'foundation',
+    name: packageName,
     projectName,
     isExtension: false,
   }, {
@@ -215,7 +228,7 @@ async function addFoundation(rootDir, projectName, opts, pm = 'pnpm') {
   const sites = await discoverSites(rootDir)
   await updateRootScripts(rootDir, sites, pm)
 
-  success(`Created foundation '${name || 'foundation'}' at ${target}/`)
+  success(`Created foundation '${packageName}' at ${target}/`)
   log('')
   log(`Next: ${colors.cyan}${installCmd(pm)}${colors.reset}`)
 }
@@ -225,6 +238,16 @@ async function addFoundation(rootDir, projectName, opts, pm = 'pnpm') {
  */
 async function addSite(rootDir, projectName, opts, pm = 'pnpm') {
   let name = opts.name
+  const existingNames = await getExistingPackageNames(rootDir)
+
+  // Reject reserved names (format + reserved check only — collisions handled at package name level)
+  if (name) {
+    const valid = validatePackageName(name)
+    if (valid !== true) {
+      error(valid)
+      process.exit(1)
+    }
+  }
 
   // Interactive name prompt when name not provided and no --path
   if (!name && !opts.path) {
@@ -235,11 +258,7 @@ async function addSite(rootDir, projectName, opts, pm = 'pnpm') {
       name: 'name',
       message: 'Site name:',
       initial: hasDefault ? 'site' : undefined,
-      validate: (value) => {
-        if (!value) return 'Name is required'
-        if (!/^[a-z0-9-]+$/.test(value)) return 'Use lowercase letters, numbers, and hyphens'
-        return true
-      },
+      validate: (value) => validatePackageName(value),
     }, {
       onCancel: () => {
         log('\nCancelled.')
@@ -271,6 +290,11 @@ async function addSite(rootDir, projectName, opts, pm = 'pnpm') {
     siteName = name || 'site'
   }
 
+  // Auto-suffix package name if it collides with an existing package
+  if (existingNames.has(siteName)) {
+    siteName = resolveUniqueName(siteName, '-site', existingNames)
+  }
+
   if (foundation) {
     // Compute relative path from site to foundation
     const foundationPath = computeFoundationPath(target, foundation.path)
@@ -334,6 +358,16 @@ async function addSite(rootDir, projectName, opts, pm = 'pnpm') {
  */
 async function addExtension(rootDir, projectName, opts, pm = 'pnpm') {
   let name = opts.name
+  const existingNames = await getExistingPackageNames(rootDir)
+
+  // Reject reserved names (format + reserved check only — collisions handled at package name level)
+  if (name) {
+    const valid = validatePackageName(name)
+    if (valid !== true) {
+      error(valid)
+      process.exit(1)
+    }
+  }
 
   // Interactive name prompt when name not provided
   if (!name) {
@@ -341,11 +375,7 @@ async function addExtension(rootDir, projectName, opts, pm = 'pnpm') {
       type: 'text',
       name: 'name',
       message: 'Extension name:',
-      validate: (value) => {
-        if (!value) return 'Name is required'
-        if (!/^[a-z0-9-]+$/.test(value)) return 'Use lowercase letters, numbers, and hyphens'
-        return true
-      },
+      validate: (value) => validatePackageName(value),
     }, {
       onCancel: () => {
         log('\nCancelled.')
@@ -355,6 +385,11 @@ async function addExtension(rootDir, projectName, opts, pm = 'pnpm') {
     name = response.name
   }
 
+  // Auto-suffix package name if it collides with an existing package
+  const extensionPackageName = existingNames.has(name)
+    ? resolveUniqueName(name, '-ext', existingNames)
+    : name
+
   // Determine target
   let target
   if (opts.path) {
@@ -372,7 +407,7 @@ async function addExtension(rootDir, projectName, opts, pm = 'pnpm') {
 
   // Scaffold foundation with extension flag
   await scaffoldFoundation(fullPath, {
-    name,
+    name: extensionPackageName,
     projectName,
     isExtension: true,
   }, {

package/src/utils/names.js

@@ -0,0 +1,91 @@
+/**
+ * Package Name Validation
+ *
+ * Validates package names for the `add` command — rejects reserved names
+ * and detects collisions with existing workspace packages.
+ */
+
+import { discoverFoundations, discoverSites, readWorkspaceConfig, resolveGlob } from './config.js'
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+/**
+ * Names that must not be used as package names.
+ * - JS module keywords: default, undefined, null, true, false
+ * - Node/filesystem: node_modules, package
+ * - Common directory names that would cause confusion: src, dist, build
+ */
+const RESERVED_NAMES = new Set([
+  'default', 'undefined', 'null', 'true', 'false',
+  'node_modules', 'package',
+  'src', 'dist', 'build',
+])
+
+/**
+ * Validate a package name.
+ * @param {string} name
+ * @param {Set<string>} [existingNames] - Names already in the workspace
+ * @returns {string|true} true if valid, or an error message string
+ */
+export function validatePackageName(name, existingNames) {
+  if (!name) return 'Name is required'
+  if (!/^[a-z0-9-]+$/.test(name)) return 'Use lowercase letters, numbers, and hyphens'
+  if (RESERVED_NAMES.has(name)) return `"${name}" is a reserved name — choose a different one`
+  if (existingNames?.has(name)) return `"${name}" already exists in this workspace`
+  return true
+}
+
+/**
+ * Discover all package names in the workspace (foundations + sites + extensions).
+ * @param {string} rootDir - Workspace root directory
+ * @returns {Promise<Set<string>>}
+ */
+export async function getExistingPackageNames(rootDir) {
+  const names = new Set()
+
+  // Foundations and sites via existing discovery
+  const foundations = await discoverFoundations(rootDir)
+  const sites = await discoverSites(rootDir)
+
+  for (const f of foundations) names.add(f.name)
+  for (const s of sites) names.add(s.name)
+
+  // Extensions (foundations with @uniweb/runtime absent — already captured above)
+  // Also scan extensions/* if it exists
+  const extensionsDir = join(rootDir, 'extensions')
+  if (existsSync(extensionsDir)) {
+    const dirs = await resolveGlob(rootDir, 'extensions/*')
+    for (const dir of dirs) {
+      const pkgPath = join(rootDir, dir, 'package.json')
+      if (!existsSync(pkgPath)) continue
+      try {
+        const pkg = JSON.parse(await readFile(pkgPath, 'utf-8'))
+        if (pkg.name) names.add(pkg.name)
+      } catch {
+        // skip
+      }
+    }
+  }
+
+  return names
+}
+
+/**
+ * Resolve a unique name by appending a suffix if there's a collision.
+ * @param {string} name - Proposed name
+ * @param {string} suffix - Suffix to append (e.g., '-site', '-foundation')
+ * @param {Set<string>} existingNames
+ * @returns {string} The resolved unique name
+ */
+export function resolveUniqueName(name, suffix, existingNames) {
+  if (!existingNames.has(name)) return name
+  const suffixed = `${name}${suffix}`
+  if (!existingNames.has(suffixed)) return suffixed
+  // Unlikely: both name and name-suffix taken — append number
+  for (let i = 2; i < 100; i++) {
+    const numbered = `${name}${suffix}-${i}`
+    if (!existingNames.has(numbered)) return numbered
+  }
+  return suffixed // give up
+}

package/templates/foundation/src/styles.css

@@ -2,4 +2,5 @@
 @import "@uniweb/kit/theme-tokens.css";
 
 @source "./sections/**/*.{js,jsx}";
+@source "./layouts/**/*.{js,jsx}";
 @source "../node_modules/@uniweb/kit/src/**/*.{js,jsx}";