@uniweb/kit 0.19.11 → 0.19.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.19.11",
+  "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.1",
     "@uniweb/core": "^0.35.0",
     "@uniweb/projections": "^0.7.11",
-    "@uniweb/scene": "^0.1.3",
-    "@uniweb/schemas": "^0.9.1",
-    "@uniweb/semantic-parser": "^1.4.1"
+    "@uniweb/schemas": "^0.9.4",
+    "@uniweb/scene": "^0.1.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/FileLogo/FileLogo.jsx

@@ -131,13 +131,17 @@ export function FileLogo({ filename, size = '24', className, ...props }) {
   const ext = getExtension(filename)
   const iconType = FILE_ICONS[ext] || 'default'
   const icon = ICONS[iconType]
+  // A number or a string of digits is pixels. React appends `px` to a number and
+  // to nothing else, so the default `'24'` rendered `width:24` — invalid CSS the
+  // browser drops — until 2026-09-29. Any other string (`'1.5em'`) is kept as written.
+  const dimension = /^\d+(\.\d+)?$/.test(String(size)) ? `${size}px` : size
 
   return (
     <svg
       viewBox="0 0 24 24"
       fill="currentColor"
       className={cn('inline-block', className)}
-      style={{ width: size, height: size }}
+      style={{ width: dimension, height: dimension }}
       aria-hidden="true"
       {...props}
     >

package/src/styled/Render/index.jsx

@@ -54,6 +54,7 @@ import { Image } from '../../components/Image/index.js'
 import { Media } from '../../components/Media/index.js'
 import { Icon } from '../../components/Icon/index.js'
 import { Link } from '../../components/Link/index.js'
+import { FileLogo } from '../../components/FileLogo/index.js'
 import { Code } from '../Section/renderers/Code.jsx'
 import { Divider } from '../Section/renderers/Divider.jsx'
 
@@ -98,7 +99,6 @@ export const NOT_RENDERED = {
     'inset_ref nodes, and they render nothing.',
   form: 'an editor node; its data reaches components as content.data[schemaId]',
   'card-group': 'an editor node, deprecated — maps to content.data[cardType]',
-  'document-group': 'an editor node — its documents reach content.links',
 }
 
 /**
@@ -114,6 +114,11 @@ export const NOT_RENDERED = {
  * internal links. Until 2026-07-31 nothing emitted it, so an authored id
  * existed only inside the registry and never reached the document.
  */
+/** A file's name from its address — the last path segment, without a query or fragment. */
+function fileNameOf(url) {
+  return String(url || '').split(/[?#]/)[0].split('/').pop() || ''
+}
+
 function authoredId(element) {
   return element?.attrs?.id ?? element?.id ?? undefined
 }
@@ -312,6 +317,36 @@ export function SequenceElement({ element, block, components }) {
       )
     }
 
+    // A file — a PDF — with an optional preview: one link to the file, holding
+    // the preview (or a file badge, when there is none) and the document's name.
+    // The author and description describe the RESOURCE, so they sit in the
+    // caption, and the preview's alt is empty — the name labels the link. <Link>
+    // treats a file address as a download and applies the base path. Until
+    // 2026-09-29 the parser delivered a document as an image, and this drew
+    // `<img src="report.pdf">`.
+    case 'document': {
+      // `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={file || url} />}
+            <span>{name}</span>
+          </Link>
+          {(author || description) && (
+            <figcaption>
+              {author && <span>{author}</span>}
+              {author && description && ' — '}
+              {description && <span>{description}</span>}
+            </figcaption>
+          )}
+        </figure>
+      )
+    }
+
     // Spread rather than cherry-pick: a markdown video carries poster and the
     // playback flags, and <Media> reads all of them.
     case 'video':

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;
+}