@uniweb/kit 0.9.3 → 0.9.5

package/package.json

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

package/src/components/Image/Image.jsx

@@ -92,6 +92,9 @@ export function Image({
     src,
     url,
     alt = "",
+    caption,
+    figureClassName,
+    captionClassName,
     href,
     rounded,
     filter,
@@ -184,16 +187,27 @@ export function Image({
         />
     );
 
-    // Wrap in link if href provided
-    if (href) {
+    // Wrap in link if href provided. The link wraps the bare <img>; if a
+    // caption is also set, the figure wraps the link below.
+    const linked = href
+        ? <Link to={href} className="inline-block">{imageElement}</Link>
+        : imageElement;
+
+    // Caption present → wrap in <figure>/<figcaption> for HTML/EPUB output.
+    // Foundations that prefer their own figure styling can pass a richer
+    // wrapper component instead; this is the kit-level default.
+    if (caption) {
         return (
-            <Link to={href} className="inline-block">
-                {imageElement}
-            </Link>
+            <figure className={cn("uniweb-figure my-4", figureClassName)}>
+                {linked}
+                <figcaption className={cn("uniweb-figcaption text-sm text-subtle mt-2", captionClassName)}>
+                    {caption}
+                </figcaption>
+            </figure>
         );
     }
 
-    return imageElement;
+    return linked;
 }
 
 export default Image;

package/src/styled/Prose/index.jsx

@@ -38,6 +38,50 @@ function generateId(text) {
     .replace(/^-|-$/g, '')
 }
 
+const INLINE_INSET_RE = /<uniweb-inset data-ref-id="([^"]+)"><\/uniweb-inset>/g
+
+/**
+ * Render an HTML paragraph fragment that contains inline-inset markers
+ * (`<uniweb-inset data-ref-id="…">`). The fragment is split at marker
+ * boundaries; HTML chunks render via SafeHtml, marker positions render
+ * via the framework's child-block renderer (the same path block-level
+ * insets use, scoped to a single inset block).
+ *
+ * Components rendered through this path return an inline element
+ * (typically a `<span>`) so the paragraph stays a single line of prose.
+ */
+function renderParagraphWithInsets(html, block) {
+  if (!block) return <SafeHtml value={html} as="span" />
+  const InsetRenderer = getChildBlockRenderer()
+  const parts = []
+  let lastIdx = 0
+  INLINE_INSET_RE.lastIndex = 0
+  let match
+  while ((match = INLINE_INSET_RE.exec(html)) !== null) {
+    if (match.index > lastIdx) {
+      parts.push(
+        <SafeHtml
+          key={`t${lastIdx}`}
+          value={html.slice(lastIdx, match.index)}
+          as="span"
+        />
+      )
+    }
+    const refId = match[1]
+    const insetBlock = block.getInset?.(refId)
+    if (insetBlock && InsetRenderer) {
+      parts.push(<InsetRenderer key={`i${refId}`} blocks={[insetBlock]} />)
+    }
+    lastIdx = match.index + match[0].length
+  }
+  if (lastIdx < html.length) {
+    parts.push(
+      <SafeHtml key={`t${lastIdx}`} value={html.slice(lastIdx)} as="span" />
+    )
+  }
+  return parts
+}
+
 /**
  * Render a single sequence element to React
  */
@@ -54,6 +98,14 @@ function SequenceElement({ element, block }) {
 
     case 'paragraph': {
       if (!element.text) return null
+      // Inline insets ride through the paragraph text as
+      // `<uniweb-inset data-ref-id="…"></uniweb-inset>` markers (see
+      // semantic-parser's getTextContent). When any are present, walk
+      // the text once and intersperse React-rendered insets at the
+      // marker positions; otherwise stick to the fast SafeHtml path.
+      if (/<uniweb-inset/.test(element.text)) {
+        return <p>{renderParagraphWithInsets(element.text, block)}</p>
+      }
       return <p><SafeHtml value={element.text} as="span" /></p>
     }