uniweb 0.8.10 → 0.8.11

package/README.md

@@ -115,7 +115,7 @@ Frontmatter specifies the component type and configuration. The body contains th
 
 ### Beyond Markdown
 
-For content that doesn't fit markdown patterns—products, team members, events—use tagged code blocks:
+For content that doesn't fit markdown patterns—products, team members, events—use tagged data blocks:
 
 ````markdown
 ```yaml:team-member
@@ -202,7 +202,7 @@ Open `foundation/src/sections/Hero.jsx`. The component receives parsed content:
 
 ```jsx
 export default function Hero({ content }) {
-  const { title, paragraphs, links, imgs, items } = content
+  const { title, paragraphs, links, images, items } = content
   // Edit the JSX below...
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uniweb",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "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.9",
+    "@uniweb/build": "0.8.10",
     "@uniweb/content-reader": "1.1.4",
-    "@uniweb/kit": "0.7.6",
-    "@uniweb/core": "0.5.6",
-    "@uniweb/runtime": "0.6.6",
-    "@uniweb/semantic-parser": "1.1.4"
+    "@uniweb/core": "0.5.7",
+    "@uniweb/runtime": "0.6.7",
+    "@uniweb/kit": "0.7.7",
+    "@uniweb/semantic-parser": "1.1.5"
   }
 }

package/partials/agents.md

@@ -175,13 +175,14 @@ content = {
   subtitle2: '',    // Third-level heading
   paragraphs: [],   // Text blocks
   links: [],        // { href, label, role } — standalone links become buttons
-  imgs: [],         // { src, alt, role }
+  images: [],       // { src, alt, role, href }
   icons: [],        // { library, name, role }
-  videos: [],       // Video embeds
+  videos: [],       // { src, alt, role, poster, href }
   insets: [],       // Inline @Component references — { refId }
   lists: [],        // [[{ paragraphs, links, lists, ... }]] — each list item is an object, not a string
   quotes: [],       // Blockquotes
-  data: {},         // From tagged code blocks (```yaml:tagname) and (```js:tagname)
+  snippets: [],     // Fenced code — [{ language, code }]
+  data: {},         // From tagged data blocks (```yaml:tagname, ```json:tagname)
   headings: [],     // Overflow headings after subtitle2
   items: [],        // Each has the same flat structure — from headings after body content
   sequence: [],     // All elements in document order
@@ -204,7 +205,7 @@ Lightning quick.        ← items[0].paragraphs[0]
 Enterprise-grade.       ← items[1].paragraphs[0]
 ```
 
-**Items have the full content shape** — this is the most commonly overlooked feature. Each item has `title`, `pretitle`, `subtitle`, `paragraphs`, `links`, `icons`, `lists`, and even `data` (tagged blocks). You don't need workarounds for structured content within items:
+**Items have the full content shape** — this is the most commonly overlooked feature. Each item has `title`, `pretitle`, `subtitle`, `paragraphs`, `links`, `icons`, `lists`, `snippets`, and even `data` (tagged data blocks). You don't need workarounds for structured content within items:
 
 ```markdown
 ### The Problem                ← items[0].pretitle
@@ -257,7 +258,7 @@ You have three layers. Most of the design skill is choosing between them:
 
 **Frontmatter params** — `columns: 3`, `variant: centered`, `theme: dark`. Configuration that an author might change but that isn't *content*. Would changing this value change the section's *meaning*, or just its *presentation*? Presentation → param. Meaning → content.
 
-**Tagged data blocks** — for content that doesn't fit markdown patterns. Products with SKUs, team members with roles, event schedules, pricing metadata, form definitions. When the information is genuinely structured data that a content author still owns, a well-named tagged block (`yaml:pricing`, `yaml:speakers`, `yaml:config`) is clearer than contorting markdown into a data format.
+**Tagged data blocks** — for content that doesn't fit markdown patterns. Products with SKUs, team members with roles, event schedules, pricing metadata, form definitions. When the information is genuinely structured data that a content author still owns, a well-named tagged block (`yaml:pricing`, `yaml:speakers`, `yaml:config`) is clearer than contorting markdown into a data format. Supported formats: `yaml` and `json`. The format is a serialization format (how to parse the data), not a language for display. Tagged blocks are parsed at build time into JS objects and delivered as `content.data.tagName`.
 
 Read the markdown out loud. If a content author would understand what every line does and how to edit it, you've chosen the right layer. The moment markdown feels like it's encoding data rather than expressing content, step up to a tagged block — that's fine. A well-documented `yaml:pricing` block is better than a markdown structure that puzzles the author.
 
@@ -320,7 +321,7 @@ Custom SVGs: `![Logo](./logo.svg){role=icon}`
 ```markdown
 [text](url){target=_blank}              <!-- Open in new tab -->
 [text](./file.pdf){download}            <!-- Download -->
-![alt](./img.jpg){role=banner}          <!-- Role determines array: imgs, icons, or videos -->
+![alt](./img.jpg){role=banner}          <!-- Role determines array: images, icons, or videos -->
 ```
 
 **Quote values that contain spaces:** `{note="Ready to go"}` not `{note=Ready to go}`. Unquoted values end at the first space.
@@ -344,9 +345,11 @@ This is [less important]{muted} context.
 
 Sites can define additional named styles in `theme.yml`'s `inline:` section.
 
-### Structured Data
+### Fenced Code in Content
 
-Tagged code blocks pass structured data via `content.data`:
+Fenced code in markdown serves two distinct purposes depending on whether it has a tag:
+
+**Tagged data blocks** — structured data parsed into JS objects. The format (`yaml`/`json`) is a serialization format, not a display language. The tag is the key in `content.data`:
 
 ````markdown
 ```yaml:form
@@ -357,11 +360,21 @@ submitLabel: Send
 ```
 ````
 
-Access: `content.data?.form` → `{ fields: [...], submitLabel: "Send" }`
+Access: `content.data?.form` → `{ fields: [...], submitLabel: "Send" }`. Supported formats: `yaml` (or `yml`) and `json`.
+
+**Code snippets** — display content with a language for syntax highlighting. Available in `content.snippets` as `[{ language, code }]`:
+
+````markdown
+```jsx
+function Hello() {
+  return <h1>Hello world</h1>
+}
+```
+````
 
-> **FIXME:** The claim below is wrong. I think tagged blocks an only be YAML/JSON. We could add regular code blocks to the parsed content as an array of code blocks or "pre" elements.
+Access: `content.snippets[0]` → `{ language: 'jsx', code: 'function Hello() {...}' }`. The `language` attribute is a display hint for syntax highlighting, not a parsing format. Filter by language: `content.snippets.filter(s => s.language === 'css')`.
 
-**Untagged code blocks** are only visible to sequential-rendering components. If a component needs to access code blocks by name, tag them (`jsx:before`, `jsx:after` → `content.data?.before`, `content.data?.after`).
+Both appear in `content.sequence` for document-order rendering. The difference: tagged data blocks are parsed and extracted to `content.data`; code snippets are preserved and collected in `content.snippets`.
 
 ### Composition: Nesting and Embedding
 
@@ -378,7 +391,7 @@ In other frameworks, this is where you'd reach for MDX, or prop-drill a componen
 Standard markdown image syntax — `![alt](@Component){attributes}`. The content author placed a full React component with content and params, and it looks like an image reference. The developer builds `NetworkDiagram` as an ordinary React component with `inset: true` in its `meta.js`. The kit's `<Visual>` component renders the first non-empty candidate — so the same section type works whether the author provides a static image, a video, or an interactive component:
 
 ```jsx
-<Visual inset={block.insets[0]} video={content.videos[0]} image={content.imgs[0]} className="rounded-2xl" />
+<Visual inset={block.insets[0]} video={content.videos[0]} image={content.images[0]} className="rounded-2xl" />
 ```
 
 The content author controls what goes in the visual slot. The developer's component doesn't need to know or care whether it's rendering an image or a ThreeJS scene.
@@ -799,7 +812,7 @@ import { Section, Render } from '@uniweb/kit'
 ```jsx
 import { Visual } from '@uniweb/kit'
 
-<Visual inset={block.insets[0]} video={content.videos[0]} image={content.imgs[0]} className="rounded-2xl" />
+<Visual inset={block.insets[0]} video={content.videos[0]} image={content.images[0]} className="rounded-2xl" />
 ```
 
 ### Kit API by Use Case
@@ -977,7 +990,7 @@ export default function Hero({ content, block, params }) {
       links={content.links}
       block={block}
       // Content that only some variants use
-      images={content.imgs}
+      images={content.images}
       formData={content.data?.quote}
       // Translated params — author vocabulary → developer props
       interval={params.slideInterval}

package/src/commands/inspect.js

@@ -149,7 +149,7 @@ function guaranteeItemStructure(item) {
     subtitle: item.subtitle || '',
     paragraphs: item.paragraphs || [],
     links: item.links || [],
-    imgs: item.imgs || [],
+    images: item.images || [],
     lists: item.lists || [],
     icons: item.icons || [],
     videos: item.videos || [],
@@ -178,7 +178,7 @@ function guaranteeContentStructure(parsedContent) {
     alignment: content.alignment || null,
     paragraphs: content.paragraphs || [],
     links: content.links || [],
-    imgs: content.imgs || [],
+    images: content.images || [],
     lists: content.lists || [],
     icons: content.icons || [],
     videos: content.videos || [],

package/starter/foundation/src/sections/Section/index.jsx

@@ -7,7 +7,7 @@ import { H1, H2, P, Link, cn } from '@uniweb/kit'
  * Uses semantic tokens so it adapts to any theme context automatically.
  */
 export default function Section({ content, params }) {
-  const { title, pretitle, subtitle, paragraphs = [], links = [], imgs = [] } = content || {}
+  const { title, pretitle, subtitle, paragraphs = [], links = [], images = [] } = content || {}
 
   const {
     align = 'center',
@@ -77,9 +77,9 @@ export default function Section({ content, params }) {
           </div>
         )}
 
-        {imgs.length > 0 && (
+        {images.length > 0 && (
           <div className="mt-8">
-            {imgs.map((img, index) => (
+            {images.map((img, index) => (
               <img
                 key={index}
                 src={img.url || img.src}

package/starter/foundation/src/sections/Section/meta.js

@@ -10,7 +10,7 @@ export default {
     subtitle: 'Secondary heading',
     paragraphs: 'Body text',
     links: 'Call-to-action buttons',
-    imgs: 'Section images',
+    images: 'Section images',
   },
 
   params: {