@uniweb/runtime 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,229 @@
+# @uniweb/runtime
+
+Runtime loader and Vite plugins for Uniweb sites.
+
+## Overview
+
+This package provides the runtime environment for Uniweb sites—content-driven websites that load Foundation components dynamically. It bridges site content with Foundation components and provides Vite plugins for development.
+
+## Installation
+
+```bash
+npm install @uniweb/runtime
+```
+
+## Features
+
+- **Foundation Loading** - Load Foundations via dynamic import or import maps
+- **Content Rendering** - Render pages from structured content (JSON/YAML)
+- **Vite Plugins** - Collect site content and serve foundations in development
+- **React Integration** - Built on React with React Router for navigation
+
+## Usage
+
+### Runtime Loading
+
+Initialize the runtime with a Foundation URL:
+
+```jsx
+import { initRuntime } from '@uniweb/runtime'
+
+// Load foundation from URL
+initRuntime('/foundation/foundation.js', {
+  development: import.meta.env.DEV,
+})
+
+// Or with CSS
+initRuntime({
+  url: '/foundation/foundation.js',
+  cssUrl: '/foundation/assets/style.css'
+})
+```
+
+### Vite Plugins for Sites
+
+Use the Vite plugins to collect content and optionally serve a foundation:
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { siteContentPlugin, foundationPlugin } from '@uniweb/runtime/vite'
+
+export default defineConfig({
+  plugins: [
+    react(),
+
+    // Collect content from pages/ directory
+    siteContentPlugin({
+      sitePath: './',
+      inject: true,  // Inject into HTML
+    }),
+
+    // Optional: Serve foundation in dev mode
+    foundationPlugin({
+      name: 'my-foundation',
+      path: '../my-foundation',
+      serve: '/foundation',
+    }),
+  ]
+})
+```
+
+### Site Content Structure
+
+Sites use a pages/ directory structure:
+
+```
+site/
+├── site.yml           # Site configuration
+├── theme.yml          # Theme configuration
+└── pages/
+    ├── @header/       # Special: header section
+    │   └── 1.md
+    ├── @footer/       # Special: footer section
+    │   └── 1.md
+    ├── home/          # Home page (route: /)
+    │   ├── page.yml   # Page metadata
+    │   ├── 1.md       # First section
+    │   └── 2.md       # Second section
+    └── about/         # About page (route: /about)
+        ├── page.yml
+        └── 1.md
+```
+
+### Section Markdown Format
+
+Each `.md` file is a section with YAML frontmatter:
+
+```markdown
+---
+component: Hero
+preset: default
+title: Welcome to Our Site
+subtitle: Building the future together
+---
+
+Additional markdown content here...
+```
+
+## API Reference
+
+### Runtime Functions
+
+| Function | Description |
+|----------|-------------|
+| `initRuntime(source, options)` | Initialize runtime with foundation |
+| `initRTE(source, options)` | Alias for initRuntime |
+
+### Exported Components
+
+| Component | Description |
+|-----------|-------------|
+| `Link` | Router-aware link component |
+| `SafeHtml` | Safe HTML rendering |
+| `ChildBlocks` | Render child sections |
+| `ErrorBoundary` | Error boundary wrapper |
+
+### Vite Plugins
+
+| Plugin | Description |
+|--------|-------------|
+| `siteContentPlugin(options)` | Collect and inject site content |
+| `foundationPlugin(options)` | Build and serve foundation in dev |
+| `collectSiteContent(sitePath)` | Programmatic content collection |
+
+### Plugin Options
+
+**siteContentPlugin:**
+```js
+{
+  sitePath: './',           // Path to site directory
+  pagesDir: 'pages',        // Pages subdirectory
+  inject: true,             // Inject into HTML
+  filename: 'site-content.json',  // Output filename
+  watch: true               // Watch for changes (dev)
+}
+```
+
+**foundationPlugin:**
+```js
+{
+  name: 'foundation',       // Foundation name (for logs)
+  path: '../foundation',    // Path to foundation package
+  serve: '/foundation',     // URL path to serve from
+  watch: true,              // Watch for changes
+  buildOnStart: true        // Build when dev server starts
+}
+```
+
+## Core Classes
+
+### Uniweb
+
+The main runtime instance (available as `globalThis.uniweb`):
+
+```js
+uniweb.getComponent(name)     // Get component from foundation
+uniweb.listComponents()       // List available components
+uniweb.activeWebsite          // Current website instance
+```
+
+### Website
+
+Manages pages, theme, and localization:
+
+```js
+website.getPage(route)        // Get page by route
+website.setActivePage(route)  // Navigate to page
+website.localize(value)       // Localize a value
+website.getLanguage()         // Get current language
+```
+
+### Block
+
+Represents a section on a page:
+
+```js
+block.initComponent()         // Initialize foundation component
+block.getBlockContent()       // Get structured content
+block.getBlockProperties()    // Get configuration properties
+block.getBlockLinks()         // Get links from content
+```
+
+## Two Loading Modes
+
+### Runtime Loading (Import Maps)
+
+Foundation loaded at runtime via dynamic import. React provided by host via import map.
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@18",
+    "react-dom": "https://esm.sh/react-dom@18"
+  }
+}
+</script>
+```
+
+### Static Bundling
+
+Foundation imported directly and bundled with the site.
+
+```jsx
+import * as Foundation from '@my-org/my-foundation'
+import { initRuntime } from '@uniweb/runtime'
+
+initRuntime(Foundation)
+```
+
+## Related Packages
+
+- [`uniweb`](https://github.com/uniweb/cli) - CLI for creating Uniweb projects
+- [`@uniweb/build`](https://github.com/uniweb/build) - Foundation build tooling
+
+## License
+
+Apache 2.0

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@uniweb/runtime",
+  "version": "0.1.0",
+  "description": "Runtime loader and Vite plugins for Uniweb sites",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js",
+    "./vite": "./src/vite/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "uniweb",
+    "runtime",
+    "vite",
+    "react",
+    "components"
+  ],
+  "author": "Proximify",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uniweb/runtime.git"
+  },
+  "homepage": "https://github.com/uniweb/runtime#readme",
+  "bugs": {
+    "url": "https://github.com/uniweb/runtime/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0",
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "@uniwebcms/content-reader": "^0.1.0"
+  }
+}

package/src/components/BlockRenderer.jsx

@@ -0,0 +1,124 @@
+/**
+ * BlockRenderer
+ *
+ * Bridges Block data to foundation components.
+ * Handles theming and wrapper props.
+ */
+
+import React from 'react'
+
+/**
+ * Convert hex color to rgba
+ */
+const hexToRgba = (hex, opacity) => {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return `rgba(${r},${g},${b},${opacity})`
+}
+
+/**
+ * Build wrapper props from block configuration
+ */
+const getWrapperProps = (block) => {
+  const theme = block.themeName
+  const blockClassName = block.state?.className || ''
+
+  let className = theme || ''
+  if (blockClassName) {
+    className = className ? `${className} ${blockClassName}` : blockClassName
+  }
+
+  const { background = {}, colors = {} } = block.standardOptions
+  const style = {}
+
+  // Handle background modes
+  if (background.mode === 'gradient') {
+    const {
+      enabled = false,
+      start = 'transparent',
+      end = 'transparent',
+      angle = 0,
+      startPosition = 0,
+      endPosition = 100,
+      startOpacity = 0.7,
+      endOpacity = 0.3
+    } = background.gradient || {}
+
+    if (enabled) {
+      style['--bg-color'] = `linear-gradient(${angle}deg,
+        ${hexToRgba(start, startOpacity)} ${startPosition}%,
+        ${hexToRgba(end, endOpacity)} ${endPosition}%)`
+    }
+  } else if (background.mode === 'image' || background.mode === 'video') {
+    const settings = background[background.mode] || {}
+    const { url = '', file = '' } = settings
+
+    if (url || file) {
+      style['--bg-color'] = 'transparent'
+      style.position = 'relative'
+      style.maxWidth = '100%'
+    }
+  }
+
+  return {
+    id: `Section${block.id}`,
+    style,
+    className
+  }
+}
+
+/**
+ * BlockRenderer component
+ */
+export default function BlockRenderer({ block, pure = false, extra = {} }) {
+  const Component = block.initComponent()
+
+  if (!Component) {
+    return (
+      <div className="block-error" style={{ padding: '1rem', background: '#fef2f2', color: '#dc2626' }}>
+        Component not found: {block.component}
+      </div>
+    )
+  }
+
+  // Build content for component
+  // Components expect content as a simple object with all data
+  // Sources:
+  // 1. parsedContent.raw - simple PoC format (hardcoded content)
+  // 2. block.properties - params from frontmatter (title, subtitle, features, etc.)
+  // 3. parsedContent - full ProseMirror structure (markdown body)
+  let content
+
+  if (block.parsedContent?.raw) {
+    // Simple PoC format - content was passed directly
+    content = block.parsedContent.raw
+  } else {
+    // Collected content - merge params (frontmatter) with parsed content
+    content = {
+      ...block.properties,  // Frontmatter data (title, subtitle, features, items, etc.)
+      _prosemirror: block.parsedContent  // Keep ProseMirror for components that need it
+    }
+  }
+
+  const componentProps = {
+    content,
+    params: block.properties,
+    block,
+    page: globalThis.uniweb?.activeWebsite?.activePage,
+    website: globalThis.uniweb?.activeWebsite,
+    input: block.input
+  }
+
+  if (pure) {
+    return <Component {...componentProps} extra={extra} />
+  }
+
+  const wrapperProps = getWrapperProps(block)
+
+  return (
+    <div {...wrapperProps}>
+      <Component {...componentProps} />
+    </div>
+  )
+}

package/src/components/ErrorBoundary.jsx

@@ -0,0 +1,51 @@
+/**
+ * ErrorBoundary
+ *
+ * React error boundary to catch and display errors gracefully.
+ */
+
+import React from 'react'
+
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('[Runtime] Error caught by boundary:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div style={{
+          padding: '2rem',
+          margin: '1rem',
+          background: '#fef2f2',
+          border: '1px solid #fecaca',
+          borderRadius: '0.5rem',
+          color: '#dc2626'
+        }}>
+          <h2 style={{ margin: '0 0 1rem' }}>Something went wrong</h2>
+          <p>{this.state.error?.message || 'An unexpected error occurred'}</p>
+          {import.meta.env?.DEV && (
+            <pre style={{ fontSize: '0.75rem', overflow: 'auto', marginTop: '1rem' }}>
+              {this.state.error?.stack}
+            </pre>
+          )}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/components/Link.jsx

@@ -0,0 +1,28 @@
+/**
+ * Link
+ *
+ * A wrapper around React Router's Link that integrates with the runtime.
+ */
+
+import React from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+
+export default function Link({ to, href, children, className, ...props }) {
+  const target = to || href
+
+  // External links
+  if (target?.startsWith('http') || target?.startsWith('mailto:') || target?.startsWith('tel:')) {
+    return (
+      <a href={target} className={className} {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  // Internal links via React Router
+  return (
+    <RouterLink to={target || '/'} className={className} {...props}>
+      {children}
+    </RouterLink>
+  )
+}