@uniweb/kit 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.7.0",
+  "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.1"
+    "@uniweb/core": "0.5.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/styled/Section/Render.jsx

@@ -66,7 +66,7 @@ function renderList(items, ordered = false) {
 /**
  * Render a single content node
  */
-function RenderNode({ node, ...props }) {
+function RenderNode({ node, block, ...props }) {
   if (!node) return null
 
   const { type, attrs, content } = node
@@ -203,7 +203,7 @@ function RenderNode({ node, ...props }) {
       return (
         <blockquote className="border-l-4 border-gray-300 pl-4 italic text-gray-600 my-4">
           {content?.map((child, i) => (
-            <RenderNode key={i} node={child} />
+            <RenderNode key={i} node={child} block={block} />
           ))}
         </blockquote>
       )
@@ -239,6 +239,19 @@ function RenderNode({ node, ...props }) {
       return <Divider type={attrs?.type} className="my-6" />
     }
 
+    case 'inset_placeholder': {
+      const refId = attrs?.refId
+      if (!block || !refId) return null
+
+      const insetBlock = block.getInset(refId)
+      if (!insetBlock) return null
+
+      const InsetRenderer = insetBlock.getChildBlockRenderer()
+      if (!InsetRenderer) return null
+
+      return <InsetRenderer blocks={[insetBlock]} as="div" />
+    }
+
     case 'button': {
       const href = attrs?.href || '#'
       const label = extractText(node) || attrs?.label || 'Button'
@@ -286,7 +299,7 @@ function RenderNode({ node, ...props }) {
         return (
           <>
             {content.map((child, i) => (
-              <RenderNode key={i} node={child} />
+              <RenderNode key={i} node={child} block={block} />
             ))}
           </>
         )
@@ -302,7 +315,7 @@ function RenderNode({ node, ...props }) {
  * @param {Array|Object} props.content - Content to render (array of nodes or single node)
  * @param {string} [props.className] - Additional CSS classes
  */
-export function Render({ content, className, ...props }) {
+export function Render({ content, block, className, ...props }) {
   if (!content) return null
 
   const nodes = Array.isArray(content) ? content : [content]
@@ -310,7 +323,7 @@ export function Render({ content, className, ...props }) {
   return (
     <div className={cn('space-y-4', className)} {...props}>
       {nodes.map((node, i) => (
-        <RenderNode key={i} node={node} />
+        <RenderNode key={i} node={node} block={block} />
       ))}
     </div>
   )

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'