@uniweb/kit 0.2.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -36,18 +36,14 @@
     "node": ">=20.19"
   },
   "dependencies": {
+    "fuse.js": "^7.0.0",
+    "shiki": "^3.0.0",
     "tailwind-merge": "^2.6.0",
     "@uniweb/core": "0.2.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "fuse.js": "^7.0.0"
-  },
-  "peerDependenciesMeta": {
-    "fuse.js": {
-      "optional": true
-    }
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "tailwindcss": "^3.4.0"

package/src/styled/Section/Render.jsx

@@ -12,6 +12,7 @@ import { cn } 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'
+import { Icon } from '../../components/Icon/index.js'
 import { Link } from '../../components/Link/index.js'
 import { Code } from './renderers/Code.jsx'
 import { Alert } from './renderers/Alert.jsx'
@@ -94,7 +95,80 @@ function RenderNode({ node, ...props }) {
       const src = attrs?.src || ''
       const alt = attrs?.alt || ''
       const caption = attrs?.caption || ''
+      const role = attrs?.role
 
+      // Dispatch based on role attribute
+      if (role === 'video') {
+        // Video content - use Media component
+        return (
+          <Media
+            src={src}
+            autoplay={attrs?.autoplay}
+            muted={attrs?.muted}
+            loop={attrs?.loop}
+            controls={attrs?.controls}
+            className="my-4 rounded-lg overflow-hidden"
+          />
+        )
+      }
+
+      if (role === 'document') {
+        // Document/file link with optional preview
+        const poster = attrs?.poster
+        const preview = attrs?.preview
+        const filename = alt || src.split('/').pop() || 'Document'
+
+        return (
+          <figure className="my-4">
+            <Link
+              to={src}
+              className="block group border rounded-lg overflow-hidden hover:shadow-md transition-shadow"
+              target="_blank"
+            >
+              {(poster || preview) ? (
+                <Image
+                  src={poster || preview}
+                  alt={filename}
+                  className="w-full"
+                />
+              ) : (
+                <div className="flex items-center gap-3 p-4 bg-gray-50">
+                  <Icon name="download" size="24" className="text-gray-500" />
+                  <span className="text-blue-600 group-hover:underline">
+                    {filename}
+                  </span>
+                </div>
+              )}
+            </Link>
+            {caption && (
+              <figcaption className="mt-2 text-sm text-gray-500 text-center">
+                {caption}
+              </figcaption>
+            )}
+          </figure>
+        )
+      }
+
+      if (role === 'icon') {
+        // Icon - use Icon component
+        // Supports: ![alt](lucide:icon-name){size=24 color=blue}
+        //           ![alt](icon:/path/to/icon.svg){size=32}
+        const size = attrs?.size || '24'
+        const iconName = attrs?.name || alt
+        const iconColor = attrs?.color
+
+        return (
+          <Icon
+            url={src}
+            name={iconName}
+            size={size}
+            color={iconColor}
+            className="inline-block"
+          />
+        )
+      }
+
+      // Default: image or banner - use Image component
       return (
         <figure className="my-4">
           <Image src={src} alt={alt} className="rounded-lg" />

package/src/styled/Section/renderers/Code.jsx

@@ -1,31 +1,173 @@
 /**
  * Code Block Renderer
  *
- * Renders syntax-highlighted code blocks.
- * Uses CSS classes for highlighting (bring your own Prism/Highlight.js CSS).
+ * Renders syntax-highlighted code blocks using Shiki.
+ * Shiki is lazy-loaded only when code blocks are actually used,
+ * and CSS variables are injected at runtime from theme.code.
  *
  * @module @uniweb/kit/Section/renderers/Code
  */
 
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useState, useMemo } from 'react'
 import { cn } from '../../../utils/index.js'
+import { getUniweb } from '@uniweb/core'
+
+// Module-level state to track CSS injection and Shiki loading
+let cssInjected = false
+let shikiInstance = null
+let shikiLoadPromise = null
 
 /**
- * Attempt to highlight code using Prism if available
+ * Map theme.code keys to Shiki CSS variable names
  */
-function highlightCode(code, language, element) {
-  if (typeof window !== 'undefined' && window.Prism && element) {
+const CSS_VAR_MAP = {
+  background: '--shiki-background',
+  foreground: '--shiki-foreground',
+  keyword: '--shiki-token-keyword',
+  string: '--shiki-token-string',
+  number: '--shiki-token-constant',
+  comment: '--shiki-token-comment',
+  function: '--shiki-token-function',
+  variable: '--shiki-token-variable',
+  operator: '--shiki-token-operator',
+  punctuation: '--shiki-token-punctuation',
+  type: '--shiki-token-type',
+  constant: '--shiki-token-constant',
+  property: '--shiki-token-property',
+  tag: '--shiki-token-tag',
+  attribute: '--shiki-token-attribute',
+  lineNumber: '--shiki-line-number',
+  selection: '--shiki-selection',
+}
+
+/**
+ * Inject CSS variables from theme.code into the document
+ */
+function injectCodeThemeCSS(codeTheme) {
+  if (cssInjected || typeof document === 'undefined') return
+
+  const styleId = 'uniweb-code-theme'
+
+  // Check if already injected (e.g., by another component instance)
+  if (document.getElementById(styleId)) {
+    cssInjected = true
+    return
+  }
+
+  // Build CSS variables
+  const cssVars = []
+  for (const [key, value] of Object.entries(codeTheme || {})) {
+    const varName = CSS_VAR_MAP[key]
+    if (varName && value) {
+      cssVars.push(`${varName}: ${value};`)
+    }
+  }
+
+  // Create and inject style element
+  const style = document.createElement('style')
+  style.id = styleId
+  style.textContent = `
+:root {
+  ${cssVars.join('\n  ')}
+}
+
+/* Code block base styles */
+.shiki {
+  background-color: var(--shiki-background, #1e1e2e);
+  color: var(--shiki-foreground, #cdd6f4);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+}
+
+/* Ensure proper token colors */
+.shiki span {
+  color: var(--shiki-token-foreground, inherit);
+}
+
+/* Code element inside shiki */
+.shiki code {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+}
+`
+  document.head.appendChild(style)
+  cssInjected = true
+}
+
+/**
+ * Lazy-load Shiki highlighter
+ */
+async function loadShiki() {
+  if (shikiInstance) return shikiInstance
+  if (shikiLoadPromise) return shikiLoadPromise
+
+  shikiLoadPromise = (async () => {
     try {
-      const grammar = window.Prism.languages[language]
-      if (grammar) {
-        element.innerHTML = window.Prism.highlight(code, grammar, language)
-        return true
+      const { createHighlighter } = await import('shiki')
+
+      // Create highlighter with CSS variables theme
+      // Only load common languages initially, others load on-demand
+      shikiInstance = await createHighlighter({
+        themes: ['css-variables'],
+        langs: [
+          'javascript',
+          'typescript',
+          'jsx',
+          'tsx',
+          'json',
+          'html',
+          'css',
+          'markdown',
+          'yaml',
+          'bash',
+          'shell',
+          'python',
+        ],
+      })
+
+      return shikiInstance
+    } catch (error) {
+      console.warn('[Code] Failed to load Shiki:', error)
+      shikiLoadPromise = null
+      return null
+    }
+  })()
+
+  return shikiLoadPromise
+}
+
+/**
+ * Highlight code using Shiki
+ */
+async function highlightCode(code, language, highlighter) {
+  if (!highlighter) return null
+
+  try {
+    // Load language if not already loaded
+    const loadedLangs = highlighter.getLoadedLanguages()
+    const lang = language?.toLowerCase() || 'plaintext'
+
+    if (!loadedLangs.includes(lang) && lang !== 'plaintext') {
+      try {
+        await highlighter.loadLanguage(lang)
+      } catch {
+        // Language not available, fall back to plaintext
+        return highlighter.codeToHtml(code, {
+          lang: 'plaintext',
+          theme: 'css-variables',
+        })
       }
-    } catch (e) {
-      console.warn('[Code] Prism highlighting failed:', e)
     }
+
+    return highlighter.codeToHtml(code, {
+      lang: lang === 'plaintext' ? 'text' : lang,
+      theme: 'css-variables',
+    })
+  } catch (error) {
+    console.warn('[Code] Highlighting failed:', error)
+    return null
   }
-  return false
 }
 
 /**
@@ -37,18 +179,77 @@ function highlightCode(code, language, element) {
  * @param {string} [props.className] - Additional CSS classes
  */
 export function Code({ content, language = 'plaintext', className, ...props }) {
-  const codeRef = useRef(null)
+  const [highlightedHtml, setHighlightedHtml] = useState(null)
+
+  // Get theme from website context (getUniweb is a regular function, not a hook)
+  const codeTheme = useMemo(() => {
+    try {
+      const uniweb = getUniweb()
+      return uniweb?.activeWebsite?.themeData?.code
+    } catch {
+      // Not in runtime context (e.g., storybook), use defaults
+      return null
+    }
+  }, [])
 
   // Normalize language
-  const lang = language?.toLowerCase() || 'plaintext'
+  const lang = useMemo(() => {
+    const l = language?.toLowerCase() || 'plaintext'
+    // Common aliases
+    const aliases = {
+      js: 'javascript',
+      ts: 'typescript',
+      sh: 'bash',
+      yml: 'yaml',
+      md: 'markdown',
+    }
+    return aliases[l] || l
+  }, [language])
+
+  // Inject CSS on first render (if in browser)
+  useEffect(() => {
+    if (typeof document !== 'undefined' && codeTheme) {
+      injectCodeThemeCSS(codeTheme)
+    }
+  }, [codeTheme])
 
-  // Try to highlight on mount
+  // Load Shiki and highlight code
   useEffect(() => {
-    if (codeRef.current && content) {
-      highlightCode(content, lang, codeRef.current)
+    let cancelled = false
+
+    async function highlight() {
+      const highlighter = await loadShiki()
+      if (cancelled) return
+
+      if (highlighter && content) {
+        const html = await highlightCode(content, lang, highlighter)
+        if (!cancelled) {
+          setHighlightedHtml(html)
+        }
+      }
+    }
+
+    highlight()
+
+    return () => {
+      cancelled = true
     }
   }, [content, lang])
 
+  // Render highlighted code or fallback
+  if (highlightedHtml) {
+    return (
+      <div
+        className={cn('overflow-x-auto rounded-lg text-sm', className)}
+        dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+        {...props}
+      />
+    )
+  }
+
+  // Fallback: plain code block (shown before Shiki loads or if it fails)
+  // No loading indicator - the code content is already visible and readable.
+  // When Shiki loads, syntax colors will appear smoothly.
   return (
     <pre
       className={cn(
@@ -57,10 +258,7 @@ export function Code({ content, language = 'plaintext', className, ...props }) {
       )}
       {...props}
     >
-      <code
-        ref={codeRef}
-        className={`language-${lang} text-gray-100`}
-      >
+      <code className={`language-${lang} text-gray-100`}>
         {content}
       </code>
     </pre>