@uniweb/kit 0.1.1

package/src/components/Section/Render.jsx

@@ -0,0 +1,245 @@
+/**
+ * Render Component
+ *
+ * Orchestrates rendering of content blocks within a Section.
+ * Dispatches to appropriate renderers based on content type.
+ *
+ * @module @uniweb/kit/Section/Render
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+import { SafeHtml } from '../SafeHtml/index.js'
+import { Image } from '../Image/index.js'
+import { Media } from '../Media/index.js'
+import { Link } from '../Link/index.js'
+import { Code } from './renderers/Code.jsx'
+import { Alert } from './renderers/Alert.jsx'
+import { Table } from './renderers/Table.jsx'
+import { Details } from './renderers/Details.jsx'
+import { Divider } from './renderers/Divider.jsx'
+
+/**
+ * Extract text content from a node
+ */
+function extractText(node) {
+  if (!node) return ''
+  if (typeof node === 'string') return node
+  if (node.text) return node.text
+  if (node.content) {
+    return node.content.map(extractText).join('')
+  }
+  return ''
+}
+
+/**
+ * Generate ID from heading text
+ */
+function generateId(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+/**
+ * Render a list (ordered or unordered)
+ */
+function renderList(items, ordered = false) {
+  const Tag = ordered ? 'ol' : 'ul'
+  const listClass = ordered ? 'list-decimal' : 'list-disc'
+
+  return (
+    <Tag className={cn('pl-6 space-y-1', listClass)}>
+      {items?.map((item, i) => (
+        <li key={i}>
+          {item.content?.map((child, j) => (
+            <RenderNode key={j} node={child} />
+          ))}
+        </li>
+      ))}
+    </Tag>
+  )
+}
+
+/**
+ * Render a single content node
+ */
+function RenderNode({ node, ...props }) {
+  if (!node) return null
+
+  const { type, attrs, content } = node
+
+  switch (type) {
+    case 'paragraph': {
+      const html = extractText(node)
+      if (!html) return null
+      return <p><SafeHtml value={html} as="span" /></p>
+    }
+
+    case 'heading': {
+      const level = attrs?.level || 1
+      const text = extractText(node)
+      const id = generateId(text)
+      const Tag = `h${Math.min(level, 6)}`
+
+      return (
+        <Tag id={id} className="scroll-mt-20">
+          {text}
+        </Tag>
+      )
+    }
+
+    case 'image': {
+      const src = attrs?.src || ''
+      const alt = attrs?.alt || ''
+      const caption = attrs?.caption || ''
+
+      return (
+        <figure className="my-4">
+          <Image src={src} alt={alt} className="rounded-lg" />
+          {caption && (
+            <figcaption className="mt-2 text-sm text-gray-500 text-center">
+              {caption}
+            </figcaption>
+          )}
+        </figure>
+      )
+    }
+
+    case 'video': {
+      const src = attrs?.src || ''
+      return <Media src={src} className="my-4 rounded-lg overflow-hidden" />
+    }
+
+    case 'codeBlock': {
+      const language = attrs?.language || 'plaintext'
+      const code = extractText(node)
+      return <Code content={code} language={language} className="my-4" />
+    }
+
+    case 'warning':
+    case 'alert': {
+      const alertType = attrs?.type || 'info'
+      const alertContent = content?.map(extractText).join('') || ''
+      return <Alert type={alertType} content={alertContent} className="my-4" />
+    }
+
+    case 'blockquote': {
+      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} />
+          ))}
+        </blockquote>
+      )
+    }
+
+    case 'bulletList': {
+      return renderList(content, false)
+    }
+
+    case 'orderedList': {
+      return renderList(content, true)
+    }
+
+    case 'table': {
+      return <Table content={content} className="my-4" />
+    }
+
+    case 'details': {
+      const summary = attrs?.summary || 'Details'
+      const detailsContent = content?.map(extractText).join('') || ''
+      return (
+        <Details
+          summary={summary}
+          content={detailsContent}
+          open={attrs?.open}
+          className="my-4"
+        />
+      )
+    }
+
+    case 'horizontalRule':
+    case 'divider': {
+      return <Divider type={attrs?.type} className="my-6" />
+    }
+
+    case 'button': {
+      const href = attrs?.href || '#'
+      const label = extractText(node) || attrs?.label || 'Button'
+      return (
+        <Link
+          to={href}
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors my-2"
+        >
+          {label}
+        </Link>
+      )
+    }
+
+    case 'text': {
+      // Handle inline marks (bold, italic, etc.)
+      let text = node.text || ''
+
+      if (node.marks) {
+        node.marks.forEach((mark) => {
+          switch (mark.type) {
+            case 'bold':
+            case 'strong':
+              text = `<strong>${text}</strong>`
+              break
+            case 'italic':
+            case 'em':
+              text = `<em>${text}</em>`
+              break
+            case 'code':
+              text = `<code class="px-1 py-0.5 bg-gray-100 rounded text-sm">${text}</code>`
+              break
+            case 'link':
+              text = `<a href="${mark.attrs?.href || '#'}" class="text-blue-600 hover:underline">${text}</a>`
+              break
+          }
+        })
+      }
+
+      return <SafeHtml value={text} as="span" />
+    }
+
+    default:
+      // Try to render children if they exist
+      if (content && Array.isArray(content)) {
+        return (
+          <>
+            {content.map((child, i) => (
+              <RenderNode key={i} node={child} />
+            ))}
+          </>
+        )
+      }
+      return null
+  }
+}
+
+/**
+ * Render - Content block renderer
+ *
+ * @param {Object} 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 }) {
+  if (!content) return null
+
+  const nodes = Array.isArray(content) ? content : [content]
+
+  return (
+    <div className={cn('space-y-4', className)} {...props}>
+      {nodes.map((node, i) => (
+        <RenderNode key={i} node={node} />
+      ))}
+    </div>
+  )
+}
+
+export default Render

package/src/components/Section/Section.jsx

@@ -0,0 +1,131 @@
+/**
+ * Section Component
+ *
+ * Rich content section renderer for Uniweb pages.
+ * Handles content parsing, layout, and rendering.
+ *
+ * @module @uniweb/kit/Section
+ */
+
+import React from 'react'
+import { cn } from '../../utils/index.js'
+import { useWebsite } from '../../hooks/useWebsite.js'
+import { Render } from './Render.jsx'
+
+/**
+ * Width presets
+ */
+const WIDTH_CLASSES = {
+  sm: 'max-w-2xl',
+  md: 'max-w-4xl',
+  lg: 'max-w-5xl',
+  xl: 'max-w-6xl',
+  '2xl': 'max-w-7xl',
+  full: 'max-w-none'
+}
+
+/**
+ * Column layouts
+ */
+const COLUMN_CLASSES = {
+  '1': 'grid-cols-1',
+  '2': 'grid-cols-1 md:grid-cols-2',
+  '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  '4': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+}
+
+/**
+ * Padding presets
+ */
+const PADDING_CLASSES = {
+  none: '',
+  sm: 'py-8',
+  md: 'py-12',
+  lg: 'py-16',
+  xl: 'py-24'
+}
+
+/**
+ * Section - Rich content section
+ *
+ * @param {Object} props
+ * @param {Object} [props.block] - Block object from content
+ * @param {Object|Array} [props.content] - Content to render
+ * @param {string} [props.width='lg'] - Content width: sm, md, lg, xl, 2xl, full
+ * @param {string} [props.columns='1'] - Column layout: 1, 2, 3, 4
+ * @param {string} [props.padding='lg'] - Vertical padding: none, sm, md, lg, xl
+ * @param {string} [props.as='section'] - HTML element to render as
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.children] - Child elements
+ *
+ * @example
+ * <Section content={blockContent} width="lg" padding="md" />
+ *
+ * @example
+ * <Section width="xl" columns="2" className="bg-gray-50">
+ *   <div>Column 1</div>
+ *   <div>Column 2</div>
+ * </Section>
+ */
+export function Section({
+  block,
+  content,
+  width = 'lg',
+  columns = '1',
+  padding = 'lg',
+  as: Component = 'section',
+  className,
+  children,
+  ...props
+}) {
+  const { website } = useWebsite()
+
+  // Get properties from block if provided
+  const blockProps = block?.getBlockProperties?.() || {}
+  const resolvedWidth = blockProps.width || width
+  const resolvedColumns = blockProps.columns || columns
+  const resolvedPadding = blockProps.vertical_padding || padding
+
+  // Get content from block if not provided directly
+  let resolvedContent = content
+
+  if (!resolvedContent && block) {
+    // Get parsed content from block
+    resolvedContent = block.parsedContent || block.content
+
+    // If it's a ProseMirror doc, get the content array
+    if (resolvedContent?.type === 'doc') {
+      resolvedContent = resolvedContent.content
+    }
+  }
+
+  // Build classes
+  const widthClass = WIDTH_CLASSES[resolvedWidth] || WIDTH_CLASSES.lg
+  const columnClass = COLUMN_CLASSES[resolvedColumns] || COLUMN_CLASSES['1']
+  const paddingClass = PADDING_CLASSES[resolvedPadding] || PADDING_CLASSES.lg
+
+  return (
+    <Component
+      className={cn(paddingClass, className)}
+      {...props}
+    >
+      <div className={cn('mx-auto px-4 sm:px-6 lg:px-8', widthClass)}>
+        {/* Content grid */}
+        {(resolvedContent || children) && (
+          <div className={cn(
+            columns !== '1' && 'grid gap-8',
+            columns !== '1' && columnClass
+          )}>
+            {children || (
+              <div className="prose prose-gray max-w-none">
+                <Render content={resolvedContent} />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </Component>
+  )
+}
+
+export default Section

package/src/components/Section/index.js

@@ -0,0 +1,3 @@
+export { Section, default } from './Section.jsx'
+export { Render } from './Render.jsx'
+export * from './renderers/index.js'

package/src/components/Section/renderers/Alert.jsx

@@ -0,0 +1,101 @@
+/**
+ * Alert/Warning Renderer
+ *
+ * Renders alert boxes for warnings, info, success, and error messages.
+ *
+ * @module @uniweb/kit/Section/renderers/Alert
+ */
+
+import React from 'react'
+import { cn } from '../../../utils/index.js'
+import { SafeHtml } from '../../SafeHtml/index.js'
+
+/**
+ * Alert type configurations
+ */
+const ALERT_STYLES = {
+  info: {
+    container: 'bg-blue-50 border-blue-200 text-blue-800',
+    icon: (
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    ),
+    iconColor: 'text-blue-500'
+  },
+  success: {
+    container: 'bg-green-50 border-green-200 text-green-800',
+    icon: (
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    ),
+    iconColor: 'text-green-500'
+  },
+  warning: {
+    container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    icon: (
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    ),
+    iconColor: 'text-yellow-500'
+  },
+  danger: {
+    container: 'bg-red-50 border-red-200 text-red-800',
+    icon: (
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    ),
+    iconColor: 'text-red-500'
+  },
+  error: {
+    container: 'bg-red-50 border-red-200 text-red-800',
+    icon: (
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    ),
+    iconColor: 'text-red-500'
+  }
+}
+
+/**
+ * Alert - Alert/warning box
+ *
+ * @param {Object} props
+ * @param {string} [props.type='info'] - Alert type: info, success, warning, danger, error
+ * @param {string|React.ReactNode} props.content - Alert content
+ * @param {string} [props.title] - Optional title
+ * @param {string} [props.className] - Additional CSS classes
+ */
+export function Alert({ type = 'info', content, title, className, ...props }) {
+  const styles = ALERT_STYLES[type] || ALERT_STYLES.info
+
+  return (
+    <div
+      className={cn(
+        'flex gap-3 rounded-lg border p-4',
+        styles.container,
+        className
+      )}
+      role="alert"
+      {...props}
+    >
+      {/* Icon */}
+      <div className={cn('flex-shrink-0', styles.iconColor)}>
+        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          {styles.icon}
+        </svg>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1">
+        {title && (
+          <h4 className="font-medium mb-1">{title}</h4>
+        )}
+        {typeof content === 'string' ? (
+          <SafeHtml value={content} className="text-sm" />
+        ) : (
+          <div className="text-sm">{content}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Alias for backwards compatibility
+export const Warning = Alert
+
+export default Alert

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

@@ -0,0 +1,70 @@
+/**
+ * Code Block Renderer
+ *
+ * Renders syntax-highlighted code blocks.
+ * Uses CSS classes for highlighting (bring your own Prism/Highlight.js CSS).
+ *
+ * @module @uniweb/kit/Section/renderers/Code
+ */
+
+import React, { useEffect, useRef } from 'react'
+import { cn } from '../../../utils/index.js'
+
+/**
+ * Attempt to highlight code using Prism if available
+ */
+function highlightCode(code, language, element) {
+  if (typeof window !== 'undefined' && window.Prism && element) {
+    try {
+      const grammar = window.Prism.languages[language]
+      if (grammar) {
+        element.innerHTML = window.Prism.highlight(code, grammar, language)
+        return true
+      }
+    } catch (e) {
+      console.warn('[Code] Prism highlighting failed:', e)
+    }
+  }
+  return false
+}
+
+/**
+ * Code - Syntax highlighted code block
+ *
+ * @param {Object} props
+ * @param {string} props.content - Code content
+ * @param {string} [props.language='plaintext'] - Programming language
+ * @param {string} [props.className] - Additional CSS classes
+ */
+export function Code({ content, language = 'plaintext', className, ...props }) {
+  const codeRef = useRef(null)
+
+  // Normalize language
+  const lang = language?.toLowerCase() || 'plaintext'
+
+  // Try to highlight on mount
+  useEffect(() => {
+    if (codeRef.current && content) {
+      highlightCode(content, lang, codeRef.current)
+    }
+  }, [content, lang])
+
+  return (
+    <pre
+      className={cn(
+        'overflow-x-auto rounded-lg bg-gray-900 p-4 text-sm',
+        className
+      )}
+      {...props}
+    >
+      <code
+        ref={codeRef}
+        className={`language-${lang} text-gray-100`}
+      >
+        {content}
+      </code>
+    </pre>
+  )
+}
+
+export default Code

package/src/components/Section/renderers/Details.jsx

@@ -0,0 +1,77 @@
+/**
+ * Details/Collapsible Renderer
+ *
+ * Renders collapsible content sections.
+ *
+ * @module @uniweb/kit/Section/renderers/Details
+ */
+
+import React, { useState } from 'react'
+import { cn } from '../../../utils/index.js'
+import { SafeHtml } from '../../SafeHtml/index.js'
+
+/**
+ * Details - Collapsible section
+ *
+ * @param {Object} props
+ * @param {string} props.summary - Summary/title text
+ * @param {string|React.ReactNode} props.content - Collapsible content
+ * @param {boolean} [props.open=false] - Initially open
+ * @param {string} [props.className] - Additional CSS classes
+ */
+export function Details({
+  summary,
+  content,
+  open = false,
+  className,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(open)
+
+  return (
+    <div
+      className={cn(
+        'border border-gray-200 rounded-lg overflow-hidden',
+        className
+      )}
+      {...props}
+    >
+      {/* Summary/Toggle */}
+      <button
+        className={cn(
+          'w-full flex items-center justify-between px-4 py-3',
+          'text-left font-medium text-gray-900 bg-gray-50',
+          'hover:bg-gray-100 transition-colors'
+        )}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <span>{summary}</span>
+        <svg
+          className={cn(
+            'w-5 h-5 text-gray-500 transition-transform',
+            isOpen && 'rotate-180'
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Content */}
+      {isOpen && (
+        <div className="px-4 py-3 border-t border-gray-200">
+          {typeof content === 'string' ? (
+            <SafeHtml value={content} className="prose prose-sm" />
+          ) : (
+            content
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Details

package/src/components/Section/renderers/Divider.jsx

@@ -0,0 +1,42 @@
+/**
+ * Divider Renderer
+ *
+ * Renders horizontal dividers.
+ *
+ * @module @uniweb/kit/Section/renderers/Divider
+ */
+
+import React from 'react'
+import { cn } from '../../../utils/index.js'
+
+/**
+ * Divider - Horizontal divider
+ *
+ * @param {Object} props
+ * @param {string} [props.type='hr'] - Divider type: 'hr' or 'dots'
+ * @param {string} [props.className] - Additional CSS classes
+ */
+export function Divider({ type = 'hr', className, ...props }) {
+  if (type === 'dots') {
+    return (
+      <div
+        className={cn('flex justify-center gap-2 py-4', className)}
+        role="separator"
+        {...props}
+      >
+        <span className="w-2 h-2 bg-gray-300 rounded-full" />
+        <span className="w-2 h-2 bg-gray-300 rounded-full" />
+        <span className="w-2 h-2 bg-gray-300 rounded-full" />
+      </div>
+    )
+  }
+
+  return (
+    <hr
+      className={cn('border-gray-200 my-6', className)}
+      {...props}
+    />
+  )
+}
+
+export default Divider