@uniweb/kit 0.7.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -46,7 +46,7 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.5.2"
+    "@uniweb/core": "0.5.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/styled/Section/Render.jsx

@@ -239,17 +239,17 @@ function RenderNode({ node, block, ...props }) {
       return <Divider type={attrs?.type} className="my-6" />
     }
 
-    case 'inline_child_placeholder': {
+    case 'inset_placeholder': {
       const refId = attrs?.refId
       if (!block || !refId) return null
 
-      const childBlock = block.getInlineChild(refId)
-      if (!childBlock) return null
+      const insetBlock = block.getInset(refId)
+      if (!insetBlock) return null
 
-      const ChildBlocks = childBlock.getChildBlockRenderer()
-      if (!ChildBlocks) return null
+      const InsetRenderer = insetBlock.getChildBlockRenderer()
+      if (!InsetRenderer) return null
 
-      return <ChildBlocks blocks={[childBlock]} as="div" />
+      return <InsetRenderer blocks={[insetBlock]} as="div" />
     }
 
     case 'button': {

package/src/styled/Visual/index.jsx

@@ -0,0 +1,49 @@
+/**
+ * Visual Component
+ *
+ * Renders the first visual element from content: inset > video > image.
+ * Used by section types with a visual slot (SplitContent, Showcase, etc.).
+ *
+ * Section types that declare `visuals: 1` (any type) should use this component.
+ * Section types that declare `visuals: 'image'` (media only) should use Media/Image directly.
+ *
+ * @module @uniweb/kit/styled/Visual
+ */
+
+import React from 'react'
+import { Media } from '../../components/Media/Media.jsx'
+import { Image } from '../../components/Image/index.js'
+
+/**
+ * Renders the first visual from content, checking insets first, then video, then image.
+ *
+ * @param {Object} props
+ * @param {Object} props.content - Parsed content from prepare-props
+ * @param {Object} props.block - Block instance (provides block.insets)
+ * @param {string} [props.className] - CSS classes for the visual container
+ * @param {React.ReactNode} [props.fallback] - Fallback when no visual is found
+ */
+export function Visual({ content, block, className, fallback = null }) {
+  // Priority 1: Inset component (from @ComponentName in markdown)
+  const inset = block?.insets?.[0]
+  if (inset) {
+    const Renderer = inset.getChildBlockRenderer?.()
+    if (Renderer) {
+      return <Renderer blocks={[inset]} as="div" extra={{ className }} />
+    }
+  }
+
+  // Priority 2: Video
+  const video = content?.videos?.[0]
+  if (video) {
+    return <Media src={video.src || video} className={className} />
+  }
+
+  // Priority 3: Image
+  const img = content?.images?.[0] || content?.imgs?.[0]
+  if (img) {
+    return <Image src={img.src} alt={img.alt} className={className} />
+  }
+
+  return fallback
+}

package/src/styled/index.js

@@ -39,6 +39,9 @@ export { Code, Alert, Warning, Table, Details, Divider } from './Section/rendere
 // Disclaimer - Modal dialog for legal disclaimers
 export { Disclaimer } from './Disclaimer/index.js'
 
+// Visual - Unified visual renderer (inset > video > image)
+export { Visual } from './Visual/index.jsx'
+
 // Media - Video player with styled play button facade
 export { Media } from './Media/index.js'