@uniweb/runtime 0.1.0

package/src/components/PageRenderer.jsx

@@ -0,0 +1,57 @@
+/**
+ * PageRenderer
+ *
+ * Renders a page by iterating through its blocks.
+ */
+
+import React, { useEffect } from 'react'
+import BlockRenderer from './BlockRenderer.jsx'
+
+/**
+ * ChildBlocks - renders child blocks of a block
+ * Exposed for use by foundation components
+ */
+export function ChildBlocks({ block, childBlocks, pure = false, extra = {} }) {
+  const blocks = childBlocks || block?.childBlocks || []
+
+  return blocks.map((childBlock, index) => (
+    <React.Fragment key={childBlock.id || index}>
+      <BlockRenderer block={childBlock} pure={pure} extra={extra} />
+    </React.Fragment>
+  ))
+}
+
+/**
+ * PageRenderer component
+ */
+export default function PageRenderer() {
+  const page = globalThis.uniweb?.activeWebsite?.activePage
+  const pageTitle = page?.title || 'Website'
+
+  useEffect(() => {
+    document.title = pageTitle
+    return () => {
+      document.title = 'Website'
+    }
+  }, [pageTitle])
+
+  if (!page) {
+    return (
+      <div className="page-loading" style={{ padding: '2rem', textAlign: 'center', color: '#64748b' }}>
+        No page loaded
+      </div>
+    )
+  }
+
+  const blocks = page.getPageBlocks()
+
+  return (
+    <>
+      {blocks.map((block, index) => (
+        <React.Fragment key={block.id || index}>
+          <BlockRenderer block={block} />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/src/components/SafeHtml.jsx

@@ -0,0 +1,22 @@
+/**
+ * SafeHtml
+ *
+ * Safely render HTML content with sanitization.
+ * TODO: Add DOMPurify for production use
+ */
+
+import React from 'react'
+
+export default function SafeHtml({ html, className, as: Component = 'div', ...props }) {
+  if (!html) return null
+
+  // For now, render directly
+  // TODO: Integrate DOMPurify for sanitization
+  return (
+    <Component
+      className={className}
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...props}
+    />
+  )
+}

package/src/components/WebsiteRenderer.jsx

@@ -0,0 +1,84 @@
+/**
+ * WebsiteRenderer
+ *
+ * Top-level renderer that sets up theme styles and renders pages.
+ */
+
+import React from 'react'
+import PageRenderer from './PageRenderer.jsx'
+
+/**
+ * Build CSS custom properties from theme data
+ */
+function buildThemeStyles(themeData) {
+  if (!themeData) return ''
+
+  const { contexts = {} } = themeData
+  const styles = []
+
+  // Generate CSS for each context (light, medium, dark)
+  for (const [contextName, contextData] of Object.entries(contexts)) {
+    const selector = `.context__${contextName}`
+    const vars = []
+
+    if (contextData.colors) {
+      for (const [key, value] of Object.entries(contextData.colors)) {
+        vars.push(`  --${key}: ${value};`)
+      }
+    }
+
+    if (vars.length > 0) {
+      styles.push(`${selector} {\n${vars.join('\n')}\n}`)
+    }
+  }
+
+  return styles.join('\n\n')
+}
+
+/**
+ * Fonts component - loads custom fonts
+ */
+function Fonts({ fontsData }) {
+  if (!fontsData || !fontsData.length) return null
+
+  const fontLinks = fontsData.map((font, index) => {
+    if (font.url) {
+      return <link key={index} rel="stylesheet" href={font.url} />
+    }
+    return null
+  })
+
+  return <>{fontLinks.filter(Boolean)}</>
+}
+
+/**
+ * WebsiteRenderer component
+ */
+export default function WebsiteRenderer() {
+  const website = globalThis.uniweb?.activeWebsite
+
+  if (!website) {
+    return (
+      <div className="website-loading" style={{ padding: '2rem', textAlign: 'center', color: '#64748b' }}>
+        Loading website...
+      </div>
+    )
+  }
+
+  const themeStyles = buildThemeStyles(website.themeData)
+
+  return (
+    <>
+      {/* Load custom fonts */}
+      <Fonts fontsData={website.themeData?.importedFonts} />
+
+      {/* Inject theme CSS variables */}
+      {themeStyles && (
+        <style dangerouslySetInnerHTML={{ __html: themeStyles }} />
+      )}
+
+      {/* Render the page */}
+      <PageRenderer />
+    </>
+  )
+}

package/src/core/block.js

@@ -0,0 +1,279 @@
+/**
+ * Block
+ *
+ * Represents a section/block on a page. Contains content, properties,
+ * child blocks, and state management. Connects to foundation components.
+ */
+
+export default class Block {
+  constructor(blockData, id) {
+    this.id = id
+    this.component = blockData.component || 'Section'
+    this.Component = null
+
+    // Content structure
+    // The content can be:
+    // 1. Raw ProseMirror content (from content collection)
+    // 2. Pre-parsed content with main/items structure
+    // For now, store raw and parse on demand
+    this.rawContent = blockData.content || {}
+    this.parsedContent = this.parseContent(blockData.content)
+
+    const { main, items } = this.parsedContent
+    this.main = main
+    this.items = items
+
+    // Block configuration
+    const blockConfig = blockData.params || blockData.config || {}
+    this.preset = blockData.preset
+    this.themeName = `context__${blockConfig.theme || 'light'}`
+    this.standardOptions = blockConfig.standardOptions || {}
+    this.properties = blockConfig.properties || blockConfig
+
+    // Child blocks (subsections)
+    this.childBlocks = blockData.subsections
+      ? blockData.subsections.map((block, i) => new Block(block, `${id}_${i}`))
+      : []
+
+    // Input data
+    this.input = blockData.input || null
+
+    // State management
+    this.startState = null
+    this.state = null
+    this.resetStateHook = null
+  }
+
+  /**
+   * Parse content into structured format
+   * Supports multiple content formats:
+   * 1. Pre-parsed groups structure
+   * 2. ProseMirror document
+   * 3. Simple key-value content (PoC style)
+   *
+   * TODO: Integrate @uniwebcms/semantic-parser for full parsing
+   */
+  parseContent(content) {
+    // If content is already parsed with groups structure
+    if (content?.groups) {
+      return content.groups
+    }
+
+    // ProseMirror document
+    if (content?.type === 'doc') {
+      return this.extractFromProseMirror(content)
+    }
+
+    // Simple key-value content (PoC style) - pass through directly
+    // This allows components to receive content like { title, subtitle, items }
+    if (content && typeof content === 'object' && !Array.isArray(content)) {
+      return {
+        main: { header: {}, body: {} },
+        items: [],
+        // Store raw content for direct access
+        raw: content
+      }
+    }
+
+    // Fallback
+    return {
+      main: { header: {}, body: {} },
+      items: []
+    }
+  }
+
+  /**
+   * Basic extraction from ProseMirror content
+   * This is simplified - full implementation uses semantic-parser
+   */
+  extractFromProseMirror(doc) {
+    const main = { header: {}, body: {} }
+    const items = []
+
+    if (!doc.content) return { main, items }
+
+    for (const node of doc.content) {
+      if (node.type === 'heading') {
+        const text = this.extractText(node)
+        if (node.attrs?.level === 1) {
+          main.header.title = text
+        } else if (node.attrs?.level === 2) {
+          main.header.subtitle = text
+        }
+      } else if (node.type === 'paragraph') {
+        const text = this.extractText(node)
+        if (!main.body.paragraphs) main.body.paragraphs = []
+        main.body.paragraphs.push(text)
+      }
+    }
+
+    return { main, items }
+  }
+
+  /**
+   * Extract text from a node
+   */
+  extractText(node) {
+    if (!node.content) return ''
+    return node.content
+      .filter((n) => n.type === 'text')
+      .map((n) => n.text)
+      .join('')
+  }
+
+  /**
+   * Initialize the component from the foundation
+   * @returns {React.ComponentType|null}
+   */
+  initComponent() {
+    if (this.Component) return this.Component
+
+    this.Component = globalThis.uniweb?.getComponent(this.component)
+
+    if (!this.Component) {
+      console.warn(`[Block] Component not found: ${this.component}`)
+      return null
+    }
+
+    // Initialize state from component defaults
+    const defaults = this.Component.blockDefaults || { state: this.Component.blockState }
+    this.startState = defaults.state ? { ...defaults.state } : null
+    this.initState()
+
+    return this.Component
+  }
+
+  /**
+   * Get structured block content for components
+   */
+  getBlockContent() {
+    const mainHeader = this.main?.header || {}
+    const mainBody = this.main?.body || {}
+    const banner = this.main?.banner || null
+
+    return {
+      banner,
+      pretitle: mainHeader.pretitle || '',
+      title: mainHeader.title || '',
+      subtitle: mainHeader.subtitle || '',
+      description: mainHeader.description || '',
+      paragraphs: mainBody.paragraphs || [],
+      images: mainBody.imgs || mainBody.images || [],
+      links: mainBody.links || [],
+      icons: mainBody.icons || [],
+      properties: mainBody.propertyBlocks?.[0] || {},
+      videos: mainBody.videos || [],
+      lists: mainBody.lists || [],
+      buttons: mainBody.buttons || []
+    }
+  }
+
+  /**
+   * Get block properties
+   */
+  getBlockProperties() {
+    return this.properties
+  }
+
+  /**
+   * Get child block renderer from runtime
+   */
+  getChildBlockRenderer() {
+    return globalThis.uniweb?.childBlockRenderer
+  }
+
+  /**
+   * Get links from block content
+   * @param {Object} options
+   * @returns {Array}
+   */
+  getBlockLinks(options = {}) {
+    const website = globalThis.uniweb?.activeWebsite
+
+    if (options.nested) {
+      const lists = this.main?.body?.lists || []
+      const links = lists[0]
+      return Block.parseNestedLinks(links, website)
+    }
+
+    const links = this.main?.body?.links || []
+    return links.map((link) => ({
+      route: website?.makeHref(link.href) || link.href,
+      label: link.label
+    }))
+  }
+
+  /**
+   * Initialize block state
+   */
+  initState() {
+    this.state = this.startState
+    if (this.resetStateHook) this.resetStateHook()
+  }
+
+  /**
+   * React hook for block state management
+   * @param {Function} useState - React useState hook
+   * @param {any} initState - Initial state
+   * @returns {[any, Function]}
+   */
+  useBlockState(useState, initState) {
+    if (initState !== undefined && this.startState === null) {
+      this.startState = initState
+      this.state = initState
+    } else {
+      initState = this.startState
+    }
+
+    const [state, setState] = useState(initState)
+
+    this.resetStateHook = () => setState(initState)
+
+    return [state, (newState) => setState((this.state = newState))]
+  }
+
+  /**
+   * Parse nested links structure
+   */
+  static parseNestedLinks(list, website) {
+    const parsed = []
+
+    if (!list?.length) return parsed
+
+    for (const listItem of list) {
+      const { links = [], lists = [], paragraphs = [] } = listItem
+
+      const link = links[0]
+      const nestedList = lists[0]
+      const text = paragraphs[0]
+
+      let label = ''
+      let href = ''
+      let subLinks = []
+      let hasData = true
+
+      if (link) {
+        label = link.label
+        href = link.href
+        if (nestedList) {
+          subLinks = Block.parseNestedLinks(nestedList, website)
+        }
+      } else {
+        label = text
+        hasData = false
+        if (nestedList) {
+          subLinks = Block.parseNestedLinks(nestedList, website)
+        }
+      }
+
+      parsed.push({
+        label,
+        route: website?.makeHref(href) || href,
+        child_items: subLinks,
+        hasData
+      })
+    }
+
+    return parsed
+  }
+}

package/src/core/input.js

@@ -0,0 +1,15 @@
+/**
+ * Input
+ *
+ * Handles input/form data within blocks.
+ */
+
+export default class Input {
+  constructor(inputData) {
+    this.data = inputData || {}
+  }
+
+  getData() {
+    return this.data
+  }
+}

package/src/core/page.js

@@ -0,0 +1,75 @@
+/**
+ * Page
+ *
+ * Represents a single page with header, body sections, and footer.
+ */
+
+import Block from './block.js'
+
+export default class Page {
+  constructor(pageData, id, pageHeader, pageFooter) {
+    this.id = id
+    this.route = pageData.route
+    this.title = pageData.title || ''
+    this.description = pageData.description || ''
+
+    this.pageBlocks = this.buildPageBlocks(
+      pageData.sections,
+      pageHeader?.sections,
+      pageFooter?.sections
+    )
+  }
+
+  /**
+   * Build the page block structure
+   */
+  buildPageBlocks(body, header, footer) {
+    const headerSection = header?.[0]
+    const footerSection = footer?.[0]
+    const bodySections = body || []
+
+    return {
+      header: headerSection ? new Block(headerSection, 'header') : null,
+      body: bodySections.map((section, index) => new Block(section, index)),
+      footer: footerSection ? new Block(footerSection, 'footer') : null,
+      leftPanel: null,
+      rightPanel: null
+    }
+  }
+
+  /**
+   * Get all blocks (header, body, footer) as flat array
+   * @returns {Block[]}
+   */
+  getPageBlocks() {
+    return [
+      this.pageBlocks.header,
+      ...this.pageBlocks.body,
+      this.pageBlocks.footer
+    ].filter(Boolean)
+  }
+
+  /**
+   * Get just body blocks
+   * @returns {Block[]}
+   */
+  getBodyBlocks() {
+    return this.pageBlocks.body
+  }
+
+  /**
+   * Get header block
+   * @returns {Block|null}
+   */
+  getHeader() {
+    return this.pageBlocks.header
+  }
+
+  /**
+   * Get footer block
+   * @returns {Block|null}
+   */
+  getFooter() {
+    return this.pageBlocks.footer
+  }
+}

package/src/core/uniweb.js

@@ -0,0 +1,103 @@
+/**
+ * Uniweb Core Runtime
+ *
+ * The main runtime instance that manages the website, foundation components,
+ * and provides utilities to components.
+ */
+
+import Website from './website.js'
+
+export default class Uniweb {
+  constructor(configData) {
+    this.activeWebsite = new Website(configData)
+    this.childBlockRenderer = null // Function to render child blocks
+    this.routingComponents = {} // Link, SafeHtml, useNavigate, etc.
+    this.foundation = null // The loaded foundation module
+    this.foundationConfig = {} // Configuration from foundation
+    this.language = 'en'
+  }
+
+  /**
+   * Set the foundation module after loading
+   * @param {Object} foundation - The loaded ESM foundation module
+   */
+  setFoundation(foundation) {
+    this.foundation = foundation
+  }
+
+  /**
+   * Get a component from the foundation by name
+   * @param {string} name - Component name
+   * @returns {React.ComponentType|undefined}
+   */
+  getComponent(name) {
+    if (!this.foundation) {
+      console.warn('[Runtime] No foundation loaded')
+      return undefined
+    }
+
+    // Use foundation's getComponent interface
+    if (typeof this.foundation.getComponent === 'function') {
+      return this.foundation.getComponent(name)
+    }
+
+    // Fallback: direct component access
+    return this.foundation[name]
+  }
+
+  /**
+   * List available components from the foundation
+   * @returns {string[]}
+   */
+  listComponents() {
+    if (!this.foundation) return []
+
+    if (typeof this.foundation.listComponents === 'function') {
+      return this.foundation.listComponents()
+    }
+
+    return []
+  }
+
+  /**
+   * Get component schema
+   * @param {string} name - Component name
+   * @returns {Object|undefined}
+   */
+  getSchema(name) {
+    if (!this.foundation) return undefined
+
+    if (typeof this.foundation.getSchema === 'function') {
+      return this.foundation.getSchema(name)
+    }
+
+    return undefined
+  }
+
+  /**
+   * Set foundation configuration
+   * @param {Object} config
+   */
+  setFoundationConfig(config) {
+    this.foundationConfig = config
+  }
+
+  // Legacy compatibility - maps to new method names
+  getRemoteComponent(name) {
+    return this.getComponent(name)
+  }
+
+  setRemoteComponents(components) {
+    // Legacy: components was an object map
+    // Convert to foundation-like interface
+    this.foundation = {
+      getComponent: (name) => components[name],
+      listComponents: () => Object.keys(components),
+      components
+    }
+  }
+
+  setRemoteConfig(config) {
+    this.setFoundationConfig(config)
+  }
+}