@uniweb/kit 0.1.1

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

@@ -0,0 +1,55 @@
+/**
+ * Table Renderer
+ *
+ * Renders HTML tables from structured content.
+ *
+ * @module @uniweb/kit/Section/renderers/Table
+ */
+
+import React from 'react'
+import { cn } from '../../../utils/index.js'
+import { SafeHtml } from '../../SafeHtml/index.js'
+
+/**
+ * Table - Table renderer
+ *
+ * @param {Object} props
+ * @param {Array} props.content - Table content as rows/cells array
+ * @param {string} [props.className] - Additional CSS classes
+ */
+export function Table({ content, className, ...props }) {
+  if (!content || !Array.isArray(content)) return null
+
+  return (
+    <div className={cn('overflow-x-auto', className)} {...props}>
+      <table className="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg">
+        <tbody className="divide-y divide-gray-200 bg-white">
+          {content.map((row, rowIndex) => (
+            <tr key={rowIndex} className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+              {row.content?.map((cell, cellIndex) => {
+                const CellTag = cell.type === 'tableHeader' ? 'th' : 'td'
+                const cellContent = cell.content?.[0]?.content?.[0]?.text || ''
+
+                return (
+                  <CellTag
+                    key={cellIndex}
+                    className={cn(
+                      'px-4 py-2 text-sm',
+                      cell.type === 'tableHeader'
+                        ? 'font-medium text-gray-900 bg-gray-100'
+                        : 'text-gray-600'
+                    )}
+                  >
+                    <SafeHtml value={cellContent} as="span" />
+                  </CellTag>
+                )
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default Table

package/src/components/Section/renderers/index.js

@@ -0,0 +1,11 @@
+/**
+ * Section Renderers
+ *
+ * Individual content type renderers for the Section component.
+ */
+
+export { Code } from './Code.jsx'
+export { Alert, Warning } from './Alert.jsx'
+export { Table } from './Table.jsx'
+export { Details } from './Details.jsx'
+export { Divider } from './Divider.jsx'

package/src/components/Text/Text.jsx

@@ -0,0 +1,207 @@
+/**
+ * Text Component
+ *
+ * Smart typography component for rendering content from semantic-parser.
+ * Handles single strings or arrays of paragraphs with automatic semantic
+ * tag selection and empty content filtering.
+ *
+ * Security Model:
+ * - Assumes content is ALREADY SANITIZED at the engine level
+ * - Does NOT sanitize HTML (that's the engine's responsibility)
+ * - Trusts the data it receives and renders it as-is
+ *
+ * @module @uniweb/kit/Text
+ */
+
+import React, { memo } from 'react'
+import { cn } from '../../utils/index.js'
+
+/**
+ * Text - Smart typography component
+ *
+ * @param {Object} props
+ * @param {string|string[]} props.text - Content to render (string or array of strings)
+ * @param {string} [props.as='p'] - HTML tag: 'h1'-'h6', 'p', 'div', 'span'
+ * @param {boolean} [props.html=true] - Render as HTML (true) or plain text (false)
+ * @param {string} [props.className] - CSS classes for wrapper/elements
+ * @param {string} [props.lineAs] - Tag for each line in array. Defaults: 'div' for headings, 'p' for others
+ *
+ * @example
+ * // Simple paragraph
+ * <Text text="Hello World" />
+ *
+ * @example
+ * // Heading
+ * <Text text="Welcome" as="h1" />
+ *
+ * @example
+ * // Multi-line heading (wrapped in single h1)
+ * <Text text={["Welcome to", "Our Platform"]} as="h1" />
+ *
+ * @example
+ * // Multiple paragraphs (each gets its own <p>)
+ * <Text text={["First paragraph", "Second paragraph"]} />
+ *
+ * @example
+ * // Rich HTML content (assumes pre-sanitized)
+ * <Text text="Hello <strong>World</strong>" />
+ *
+ * @example
+ * // Plain text (HTML tags shown as text)
+ * <Text text="Show <strong>tags</strong>" html={false} />
+ */
+export const Text = memo(function Text({
+  text,
+  as = 'p',
+  html = true,
+  className,
+  lineAs,
+  ...props
+}) {
+  const isArray = Array.isArray(text)
+  const Tag = as
+  const isHeading = /^h[1-6]$/.test(as)
+
+  // Single string input
+  if (!isArray) {
+    if (!text || (typeof text === 'string' && text.trim() === '')) {
+      return null
+    }
+
+    if (html) {
+      return (
+        <Tag
+          className={className}
+          dangerouslySetInnerHTML={{ __html: text }}
+          {...props}
+        />
+      )
+    }
+
+    return (
+      <Tag className={className} {...props}>
+        {text}
+      </Tag>
+    )
+  }
+
+  // Array input - filter empty content
+  const filteredText = text.filter(
+    (item) => typeof item === 'string' && item.trim() !== ''
+  )
+
+  if (filteredText.length === 0) {
+    return null
+  }
+
+  // Determine line wrapper tag with smart defaults
+  const LineTag = lineAs || (isHeading ? 'div' : 'p')
+
+  // Multi-line heading: wrap all lines in single heading tag
+  if (isHeading) {
+    return (
+      <Tag className={className} {...props}>
+        {filteredText.map((line, i) => {
+          if (html) {
+            return (
+              <LineTag
+                key={i}
+                dangerouslySetInnerHTML={{ __html: line }}
+              />
+            )
+          }
+          return <LineTag key={i}>{line}</LineTag>
+        })}
+      </Tag>
+    )
+  }
+
+  // Non-heading arrays: render each line as separate element
+  return (
+    <>
+      {filteredText.map((line, i) => {
+        if (html) {
+          return (
+            <LineTag
+              key={i}
+              className={className}
+              dangerouslySetInnerHTML={{ __html: line }}
+              {...props}
+            />
+          )
+        }
+        return (
+          <LineTag key={i} className={className} {...props}>
+            {line}
+          </LineTag>
+        )
+      })}
+    </>
+  )
+})
+
+// ============================================================================
+// Semantic Wrapper Components
+// ============================================================================
+
+/**
+ * H1 - Heading level 1
+ * @example
+ * <H1 text="Main Title" />
+ * <H1 text={["Multi-line", "Title"]} />
+ */
+export const H1 = (props) => <Text {...props} as="h1" />
+
+/**
+ * H2 - Heading level 2
+ */
+export const H2 = (props) => <Text {...props} as="h2" />
+
+/**
+ * H3 - Heading level 3
+ */
+export const H3 = (props) => <Text {...props} as="h3" />
+
+/**
+ * H4 - Heading level 4
+ */
+export const H4 = (props) => <Text {...props} as="h4" />
+
+/**
+ * H5 - Heading level 5
+ */
+export const H5 = (props) => <Text {...props} as="h5" />
+
+/**
+ * H6 - Heading level 6
+ */
+export const H6 = (props) => <Text {...props} as="h6" />
+
+/**
+ * P - Paragraph
+ * @example
+ * <P text="A paragraph of content" />
+ * <P text={["First paragraph", "Second paragraph"]} />
+ */
+export const P = (props) => <Text {...props} as="p" />
+
+/**
+ * Span - Inline text
+ */
+export const Span = (props) => <Text {...props} as="span" />
+
+/**
+ * Div - Block container
+ * @example
+ * <Div text={["Item 1", "Item 2"]} lineAs="span" />
+ */
+export const Div = (props) => <Text {...props} as="div" />
+
+/**
+ * PlainText - Text with HTML rendering disabled
+ * @example
+ * <PlainText text="Show <strong>tags</strong> as text" />
+ */
+export const PlainText = (props) => <Text {...props} html={false} />
+
+export default Text

package/src/components/Text/index.js

@@ -0,0 +1,14 @@
+export {
+  Text,
+  default,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  Span,
+  Div,
+  PlainText
+} from './Text.jsx'

package/src/hooks/index.js

@@ -0,0 +1 @@
+export { useWebsite, default } from './useWebsite.js'

package/src/hooks/useWebsite.js

@@ -0,0 +1,77 @@
+/**
+ * useWebsite Hook
+ *
+ * Provides access to the current website instance and common utilities.
+ * This is the primary hook for kit components to interact with the runtime.
+ *
+ * @example
+ * function MyComponent() {
+ *   const { website, localize, makeHref } = useWebsite()
+ *   return <a href={makeHref('/about')}>{localize({ en: 'About', fr: 'À propos' })}</a>
+ * }
+ */
+
+import { getUniweb } from '@uniweb/core'
+
+/**
+ * Get the current website instance and utilities
+ * @returns {Object} Website utilities
+ */
+export function useWebsite() {
+  const uniweb = getUniweb()
+
+  if (!uniweb) {
+    console.warn('[Kit] Runtime not initialized. Components require @uniweb/runtime.')
+    return {
+      website: null,
+      localize: (val, defaultVal = '') => defaultVal,
+      makeHref: (href) => href,
+      getLanguage: () => 'en',
+      getLanguages: () => []
+    }
+  }
+
+  const website = uniweb.activeWebsite
+
+  return {
+    /**
+     * The active Website instance
+     */
+    website,
+
+    /**
+     * Localize a multilingual value
+     * @param {Object|string} value - Object with language keys or string
+     * @param {string} defaultVal - Fallback value
+     * @returns {string}
+     */
+    localize: (value, defaultVal = '') => website.localize(value, defaultVal),
+
+    /**
+     * Transform a href (handles topic: protocol, etc.)
+     * @param {string} href
+     * @returns {string}
+     */
+    makeHref: (href) => website.makeHref(href),
+
+    /**
+     * Get current language code
+     * @returns {string}
+     */
+    getLanguage: () => website.getLanguage(),
+
+    /**
+     * Get available languages
+     * @returns {Array<{label: string, value: string}>}
+     */
+    getLanguages: () => website.getLanguages(),
+
+    /**
+     * Get routing components (Link, useNavigate, etc.)
+     * @returns {Object}
+     */
+    getRoutingComponents: () => website.getRoutingComponents()
+  }
+}
+
+export default useWebsite

package/src/index.js

@@ -0,0 +1,69 @@
+/**
+ * @uniweb/kit
+ *
+ * Standard component library for Uniweb foundations.
+ *
+ * @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>
+ *   )
+ * }
+ */
+
+// ============================================================================
+// Components
+// ============================================================================
+
+// Primitives
+export { Link } from './components/Link/index.js'
+export { Image } from './components/Image/index.js'
+export { SafeHtml } from './components/SafeHtml/index.js'
+export { Icon } from './components/Icon/index.js'
+
+// Typography
+export {
+  Text,
+  H1, H2, H3, H4, H5, H6,
+  P, Span, Div,
+  PlainText
+} from './components/Text/index.js'
+
+// Media
+export { Media } from './components/Media/index.js'
+export { FileLogo } from './components/FileLogo/index.js'
+export { MediaIcon } from './components/MediaIcon/index.js'
+
+// Content
+export { Section, Render } from './components/Section/index.js'
+export { Code, Alert, Warning, Table, Details, Divider } from './components/Section/renderers/index.js'
+
+// Utilities
+export { Asset } from './components/Asset/index.js'
+export { Disclaimer } from './components/Disclaimer/index.js'
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+export { useWebsite } from './hooks/index.js'
+
+// ============================================================================
+// Utilities
+// ============================================================================
+
+export {
+  cn,
+  twMerge,
+  twJoin,
+  stripTags,
+  isExternalUrl,
+  isFileUrl,
+  detectMediaType
+} from './utils/index.js'

package/src/styles/index.css

@@ -0,0 +1,8 @@
+/**
+ * @uniweb/kit styles
+ *
+ * Import this file to include kit component styles:
+ * import '@uniweb/kit/styles'
+ */
+
+/* Base component styles will be added here as components are migrated */

package/src/utils/index.js

@@ -0,0 +1,104 @@
+/**
+ * Kit Utilities
+ *
+ * Common utility functions for kit components.
+ */
+
+import { twMerge, twJoin } from 'tailwind-merge'
+
+// Re-export tailwind-merge utilities
+export { twMerge, twJoin }
+
+/**
+ * Merge class names with Tailwind CSS conflict resolution
+ * @param {...string} classes - Class names to merge
+ * @returns {string}
+ */
+export function cn(...classes) {
+  return twMerge(twJoin(classes.filter(Boolean)))
+}
+
+/**
+ * Strip HTML tags from a string
+ * @param {string} html - HTML string
+ * @returns {string} Plain text
+ */
+export function stripTags(html) {
+  if (!html || typeof html !== 'string') return ''
+
+  // Use DOMParser for safe HTML entity decoding
+  if (typeof DOMParser !== 'undefined') {
+    const doc = new DOMParser().parseFromString(html, 'text/html')
+    return doc.body.textContent || ''
+  }
+
+  // Fallback: simple regex (less accurate but works in Node)
+  return html.replace(/<[^>]*>/g, '')
+}
+
+/**
+ * Check if a URL is external (different origin)
+ * @param {string} url
+ * @returns {boolean}
+ */
+export function isExternalUrl(url) {
+  if (!url || typeof url !== 'string') return false
+  if (url.startsWith('/') || url.startsWith('#')) return false
+
+  try {
+    const urlObj = new URL(url, window.location.origin)
+    return urlObj.origin !== window.location.origin
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Check if a URL points to a downloadable file
+ * @param {string} url
+ * @returns {boolean}
+ */
+export function isFileUrl(url) {
+  if (!url || typeof url !== 'string') return false
+
+  const fileExtensions = [
+    '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx',
+    '.zip', '.rar', '.7z', '.tar', '.gz',
+    '.mp3', '.wav', '.ogg', '.flac',
+    '.mp4', '.avi', '.mov', '.wmv', '.webm',
+    '.jpg', '.jpeg', '.png', '.gif', '.svg', '.webp',
+    '.txt', '.csv', '.json', '.xml'
+  ]
+
+  const lowerUrl = url.toLowerCase()
+  return fileExtensions.some(ext => lowerUrl.includes(ext))
+}
+
+/**
+ * Detect media type from URL
+ * @param {string} url
+ * @returns {'youtube'|'vimeo'|'video'|'image'|'audio'|'unknown'}
+ */
+export function detectMediaType(url) {
+  if (!url) return 'unknown'
+
+  const lowerUrl = url.toLowerCase()
+
+  if (lowerUrl.includes('youtube.com') || lowerUrl.includes('youtu.be')) {
+    return 'youtube'
+  }
+  if (lowerUrl.includes('vimeo.com')) {
+    return 'vimeo'
+  }
+  if (/\.(mp4|webm|ogg|mov|avi)/.test(lowerUrl)) {
+    return 'video'
+  }
+  if (/\.(mp3|wav|ogg|flac|aac)/.test(lowerUrl)) {
+    return 'audio'
+  }
+  if (/\.(jpg|jpeg|png|gif|svg|webp|avif)/.test(lowerUrl)) {
+    return 'image'
+  }
+
+  return 'unknown'
+}