@uniweb/kit 0.7.1 → 0.7.3

package/README.md

@@ -47,14 +47,6 @@ function Hero({ content }) {
 }
 ```
 
-## Exports Overview
-
-| Import Path | Purpose |
-|-------------|---------|
-| `@uniweb/kit` | Core components, hooks, and utilities |
-| `@uniweb/kit/styled` | Pre-styled components (Section, SidebarLayout, etc.) |
-| `@uniweb/kit/search` | Search client and hooks (requires Fuse.js) |
-
 ---
 
 ## Components
@@ -395,7 +387,7 @@ function ThemedComponent({ block }) {
 
 ---
 
-## Search (`@uniweb/kit/search`)
+## Search
 
 Full-text search powered by Fuse.js. Requires `fuse.js` as a peer dependency in your foundation.
 
@@ -408,7 +400,7 @@ npm install fuse.js
 Main search hook with debouncing and state management.
 
 ```jsx
-import { useSearch } from '@uniweb/kit/search'
+import { useSearch, useWebsite } from '@uniweb/kit'
 
 function SearchComponent() {
   const { website } = useWebsite()
@@ -433,7 +425,7 @@ function SearchComponent() {
 Intent-based preloading — loads search index on hover/focus instead of page load.
 
 ```jsx
-import { useSearchWithIntent, useSearchShortcut } from '@uniweb/kit/search'
+import { useSearchWithIntent, useSearchShortcut } from '@uniweb/kit'
 
 function SearchButton({ onClick }) {
   const { website } = useWebsite()
@@ -460,7 +452,7 @@ This saves bandwidth — the search index only loads when users show intent to s
 Keyboard shortcut for opening search.
 
 ```jsx
-import { useSearchShortcut } from '@uniweb/kit/search'
+import { useSearchShortcut } from '@uniweb/kit'
 
 // Simple
 useSearchShortcut(() => setSearchOpen(true))
@@ -477,7 +469,7 @@ useSearchShortcut({
 Low-level search client for advanced use.
 
 ```jsx
-import { createSearchClient } from '@uniweb/kit/search'
+import { createSearchClient } from '@uniweb/kit'
 
 const client = createSearchClient(website, {
   fuseOptions: { threshold: 0.3 },
@@ -497,12 +489,12 @@ client.getIndexUrl()
 
 ---
 
-## Styled Components (`@uniweb/kit/styled`)
+## Styled Components
 
-Pre-styled components with Tailwind CSS. Import separately to keep core kit dependency-free.
+Pre-styled components with Tailwind CSS.
 
 ```jsx
-import { Section, SidebarLayout, Disclaimer } from '@uniweb/kit/styled'
+import { Section, SidebarLayout, Disclaimer } from '@uniweb/kit'
 
 <Section width="lg" padding="md" className="bg-gray-50">
   <h1>Welcome</h1>

package/package.json

@@ -1,16 +1,10 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
-    "./styled": "./src/styled/index.js",
-    "./styles": {
-      "style": "./src/styles/index.css",
-      "default": "./src/styles/index.css"
-    },
-    "./search": "./src/search/index.js",
     "./theme-tokens.css": {
       "style": "./src/theme-tokens.css",
       "default": "./src/theme-tokens.css"
@@ -46,7 +40,7 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.5.2"
+    "@uniweb/core": "0.5.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/index.js

@@ -2,26 +2,14 @@
  * @uniweb/kit
  *
  * Standard component library for Uniweb foundations.
- *
- * For pre-styled components (Section, SidebarLayout, Disclaimer, etc.),
- * import from '@uniweb/kit/styled'.
+ * All components, hooks, and utilities are exported from this single entry point.
  *
  * @example
- * import { Link, Image, useWebsite } from '@uniweb/kit'
- *
- * function MyComponent() {
- *   const { localize } = useWebsite()
- *   return (
- *     <Link to="/about">
- *       <Image src="/logo.png" alt="Logo" />
- *       {localize({ en: 'About', fr: 'À propos' })}
- *     </Link>
- *   )
- * }
+ * import { Link, Image, Section, Render, useWebsite, cn } from '@uniweb/kit'
  */
 
 // ============================================================================
-// Components (Primitives - no Tailwind dependency)
+// Components (Primitives)
 // ============================================================================
 
 // Navigation
@@ -38,12 +26,12 @@ export {
   PlainText
 } from './components/Text/index.js'
 
-// Media (plain version - for styled facade, use @uniweb/kit/tailwind)
+// Media
 export { Media } from './components/Media/index.js'
 export { FileLogo } from './components/FileLogo/index.js'
 export { MediaIcon } from './components/MediaIcon/index.js'
 
-// Files (plain version - for styled card, use @uniweb/kit/tailwind)
+// Files
 export { Asset } from './components/Asset/index.js'
 
 // Data loading
@@ -99,7 +87,30 @@ export {
   isFileUrl,
   detectMediaType,
   parseIconRef,
+  // Runtime utilities (getChildBlockRenderer is internal — use ChildBlocks)
+  getChildBlockRenderer,
+  ChildBlocks,
   // Locale utilities
   LOCALE_DISPLAY_NAMES,
   getLocaleLabel
 } from './utils/index.js'
+
+// ============================================================================
+// Styled Components (Tailwind-based)
+// ============================================================================
+
+export { SidebarLayout } from './styled/SidebarLayout/index.js'
+export { Section, Render } from './styled/Section/index.js'
+export { Prose } from './styled/Prose/index.jsx'
+export { Article } from './styled/Article/index.jsx'
+export { Code, Alert, Warning, Table, Details, Divider } from './styled/Section/renderers/index.js'
+export { Disclaimer } from './styled/Disclaimer/index.js'
+export { Visual } from './styled/Visual/index.jsx'
+
+// ============================================================================
+// Search
+// ============================================================================
+
+export { createSearchClient, loadSearchIndex, clearSearchCache } from './search/client.js'
+export { buildSnippet, highlightMatches, escapeHtml } from './search/snippets.js'
+export { useSearch, useSearchIndex, useSearchShortcut, useSearchWithIntent } from './search/hooks.js'

package/src/search/index.js

@@ -4,10 +4,10 @@
  * Provides helpers for implementing search functionality in foundations.
  * Uses Fuse.js for fuzzy search (peer dependency - must be installed by foundation).
  *
- * @module @uniweb/kit/search
+ * @module @uniweb/kit (search)
  *
  * @example
- * import { createSearchClient, buildSnippet } from '@uniweb/kit/search'
+ * import { createSearchClient, buildSnippet } from '@uniweb/kit (search)'
  *
  * // Create a search client for your site
  * const search = createSearchClient(website)

package/src/styled/Section/Render.jsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react'
-import { cn } from '../../utils/index.js'
+import { cn, getChildBlockRenderer } from '../../utils/index.js'
 import { SafeHtml } from '../../components/SafeHtml/index.js'
 import { Image } from '../../components/Image/index.js'
 import { Media } from '../../components/Media/index.js'
@@ -239,17 +239,15 @@ 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
-
-      return <ChildBlocks blocks={[childBlock]} as="div" />
+      const InsetRenderer = getChildBlockRenderer()
+      return <InsetRenderer blocks={[insetBlock]} as="div" />
     }
 
     case 'button': {

package/src/styled/Visual/index.jsx

@@ -0,0 +1,52 @@
+/**
+ * Visual Component
+ *
+ * Renders the first non-empty visual from the given candidates.
+ * Resolution order: inset > video > image. Only tries what's passed.
+ *
+ * @module @uniweb/kit/styled/Visual
+ */
+
+import React from 'react'
+import { Media } from '../../components/Media/Media.jsx'
+import { Image } from '../../components/Image/index.js'
+import { getChildBlockRenderer } from '../../utils/index.js'
+
+/**
+ * Renders the first non-empty visual from the given candidates.
+ *
+ * @param {Object} props
+ * @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
+ * @param {string} [props.className] - CSS classes for the visual container
+ * @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.imgs[0]} />
+ *
+ * @example
+ * // Specific inset only
+ * <Visual inset={block.getInset('chart')} className="rounded-lg" />
+ *
+ * @example
+ * // Image only
+ * <Visual image={content.imgs[1]} className="aspect-video" />
+ */
+export function Visual({ inset, video, image, className, fallback = null }) {
+  if (inset) {
+    const Renderer = getChildBlockRenderer()
+    return <Renderer blocks={[inset]} as="div" extra={{ className }} />
+  }
+
+  if (video) {
+    return <Media src={video.src || video} className={className} />
+  }
+
+  if (image) {
+    return <Image src={image.src || image} alt={image.alt} className={className} />
+  }
+
+  return fallback
+}

package/src/styled/index.js

@@ -1,5 +1,5 @@
 /**
- * @uniweb/kit/styled
+ * @uniweb/kit (styled)
  *
  * Pre-styled components from the kit.
  *
@@ -7,7 +7,7 @@
  * For unstyled primitives, use the main '@uniweb/kit' export.
  *
  * @example
- * import { SidebarLayout, Section, Media } from '@uniweb/kit/styled'
+ * import { SidebarLayout, Section, Media } from '@uniweb/kit (styled)'
  */
 
 // ============================================================================
@@ -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'
 

package/src/utils/index.js

@@ -133,6 +133,36 @@ export function parseIconRef(ref) {
   return null
 }
 
+// ─────────────────────────────────────────────────────────────────
+// Runtime Utilities
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * Get the child block renderer component from the runtime.
+ * Internal — used by Visual and Render. Components should use ChildBlocks instead.
+ */
+export function getChildBlockRenderer() {
+  return globalThis.uniweb.childBlockRenderer
+}
+
+/**
+ * Renders child blocks or insets. Wrapper that defers runtime lookup to render time.
+ *
+ * @param {Object} props
+ * @param {Object} props.from - Parent block (renders block.childBlocks)
+ * @param {Array} props.blocks - Explicit array of blocks to render
+ *
+ * @example
+ * import { ChildBlocks } from '@uniweb/kit'
+ *
+ * <ChildBlocks from={block} />
+ * <ChildBlocks blocks={block.insets} />
+ */
+export function ChildBlocks(props) {
+  const Renderer = globalThis.uniweb.childBlockRenderer
+  return Renderer(props)
+}
+
 // ─────────────────────────────────────────────────────────────────
 // Class / String Utilities
 // ─────────────────────────────────────────────────────────────────