@uniweb/kit 0.19.12 → 0.19.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.19.12",
+  "version": "0.19.13",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -43,11 +43,11 @@
     "shiki": "^3.0.0",
     "tailwind-merge": "^3.6.0",
     "temml": "^0.13.2",
-    "@uniweb/semantic-parser": "^1.5.0",
+    "@uniweb/semantic-parser": "^1.5.1",
     "@uniweb/core": "^0.35.0",
-    "@uniweb/scene": "^0.1.3",
-    "@uniweb/schemas": "^0.9.3",
-    "@uniweb/projections": "^0.7.11"
+    "@uniweb/projections": "^0.7.11",
+    "@uniweb/schemas": "^0.9.4",
+    "@uniweb/scene": "^0.1.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/styled/Render/index.jsx

@@ -325,12 +325,15 @@ export function SequenceElement({ element, block, components }) {
     // 2026-09-29 the parser delivered a document as an image, and this drew
     // `<img src="report.pdf">`.
     case 'document': {
-      const { url, alt, caption, preview, author, description } = element.attrs || {}
-      const name = caption || alt || fileNameOf(url)
+      // `file` is the file's own name — the parser reads it from the address, and a build
+      // that copies the file under a hashed name stamps the one it had; the address is
+      // the fallback for content parsed before documents carried one (2026-09-29).
+      const { url, alt, caption, preview, author, description, name: file } = element.attrs || {}
+      const name = caption || alt || file || fileNameOf(url)
       return (
         <figure id={authoredId(element)} data-kind="document">
           <Link to={url}>
-            {preview ? <Image src={preview} alt="" /> : <FileLogo filename={url} />}
+            {preview ? <Image src={preview} alt="" /> : <FileLogo filename={file || url} />}
             <span>{name}</span>
           </Link>
           {(author || description) && (

package/src/styled/Visual/index.jsx

@@ -1,8 +1,8 @@
 /**
  * Visual Component
  *
- * Renders the first non-empty visual from the given candidates.
- * Resolution order: inset > video > image. Only tries what's passed.
+ * Renders one visual: a `content.media` item by its kind, or the first non-empty of
+ * the candidates it is handed (inset, then video, then image).
  *
  * @module @uniweb/kit/styled/Visual
  */
@@ -13,9 +13,19 @@ import { Image } from "../../components/Image/index.js";
 import { getChildBlockRenderer } from "../../utils/index.js";
 
 /**
- * Renders the first non-empty visual from the given candidates.
+ * Renders one visual.
+ *
+ * ⭐ `media` is a `content.media` item — an image, a video or an embedded component,
+ * tagged with its `kind` — rendered by that kind. Handed the whole `content.media`,
+ * it renders the first item: a slot of one is the first thing the author placed in
+ * it, whatever its kind. An embedded component needs `block`, whose insets it is
+ * one of.
+ *
+ * Without `media`, the first non-empty candidate: inset, then video, then image.
  *
  * @param {Object} props
+ * @param {Object|Object[]} [props.media] - A `content.media` item, or the list (its first item)
+ * @param {Object} [props.block] - The section's block — resolves an embedded component
  * @param {Object} [props.inset] - Inset Block instance (from block.insets or block.getInset())
  * @param {Object} [props.video] - Video object with src property
  * @param {Object} [props.image] - Image object with src and alt properties
@@ -23,24 +33,25 @@ import { getChildBlockRenderer } from "../../utils/index.js";
  * @param {React.ReactNode} [props.fallback] - Fallback when no visual is found
  *
  * @example
- * // Try inset first, fall back to video, then image
- * <Visual inset={block.insets[0]} video={content.videos[0]} image={content.images[0]} />
+ * // The slot of one — the author's first image, video or component
+ * <Visual media={content.media} block={block} className="rounded-lg" />
  *
  * @example
- * // Specific inset only
- * <Visual inset={block.getInset('chart')} className="rounded-lg" />
+ * // Every item of a gallery, in the author's order
+ * {content.media.map((item, i) => <Visual key={i} media={item} block={block} />)}
  *
  * @example
- * // Image only
- * <Visual image={content.images[1]} className="aspect-video" />
+ * // Try inset first, fall back to video, then image
+ * <Visual inset={block.insets[0]} video={content.videos[0]} image={content.images[0]} />
  */
-export function Visual({ inset, video, image, className, fallback = null }) {
-    if (inset) {
-        const Renderer = getChildBlockRenderer();
-        const rendered = <Renderer blocks={[inset]} />;
-        return className ? <div className={className}>{rendered}</div> : rendered;
+export function Visual({ media, block, inset, video, image, className, fallback = null }) {
+    if (media !== undefined) {
+        const item = Array.isArray(media) ? media[0] : media;
+        return renderItem(item, block, className) ?? fallback;
     }
 
+    if (inset) return renderInset(inset, className);
+
     if (video) {
         return <Media {...video} className={className} />;
     }
@@ -52,3 +63,30 @@ export function Visual({ inset, video, image, className, fallback = null }) {
 
     return fallback;
 }
+
+/** A `content.media` item, rendered by its kind — or null when it cannot be. */
+function renderItem(item, block, className) {
+    if (!item || typeof item !== "object") return null;
+    const { kind, ...attrs } = item;
+    switch (kind) {
+        case "image": {
+            const { contentType, viewType, contentId, imgPos, ...imageProps } = attrs;
+            return <Image {...imageProps} className={className} />;
+        }
+        case "video":
+            return <Media {...attrs} className={className} />;
+        case "inset": {
+            const insetBlock = attrs.refId ? block?.getInset?.(attrs.refId) : null;
+            return insetBlock ? renderInset(insetBlock, className) : null;
+        }
+        default:
+            return null;
+    }
+}
+
+function renderInset(inset, className) {
+    const Renderer = getChildBlockRenderer();
+    if (!Renderer) return null;
+    const rendered = <Renderer blocks={[inset]} />;
+    return className ? <div className={className}>{rendered}</div> : rendered;
+}