uniweb 1.0.0 → 1.0.2

package/starter/foundation/main.js

@@ -0,0 +1,50 @@
+/**
+ * Foundation Configuration
+ *
+ * This file defines foundation-level configuration:
+ * - vars: CSS custom properties that sites can override in theme.yml
+ * - defaultLayout: Name of the default layout from src/layouts/ (optional)
+ * - props: Foundation-wide props accessible via website.foundationProps
+ *
+ * Name: `name` in the default export is what this foundation registers as
+ * (@org/<name>) — `uniweb create` adds it. The version comes from package.json.
+ */
+
+// Create a layout at src/layouts/MyLayout/index.jsx
+
+/**
+ * CSS custom properties that sites can override in theme.yml
+ */
+export const vars = {
+  'header-height': {
+    default: '4rem',
+    description: 'Fixed header height',
+  },
+  'max-content-width': {
+    default: '80rem',
+    description: 'Maximum content width (1280px)',
+  },
+  'section-padding-y': {
+    default: 'clamp(4rem, 6vw, 7rem)',
+    description: 'Vertical padding for sections (fluid: adapts to viewport)',
+  },
+}
+
+/**
+ * Runtime exports
+ *
+ * Layout components live in src/layouts/ and are auto-discovered.
+ * Each layout receives pre-rendered page areas as props:
+ * - page, website, params: Runtime context
+ * - header, body, footer: Core page regions (pre-rendered React elements)
+ * - Plus any custom areas declared in the layout's meta.js
+ *
+ * If no layouts exist, the runtime uses a default layout.
+ */
+export default {
+  // Optional: Create custom layouts in src/layouts/
+  // Then set defaultLayout: 'MyLayout' below
+
+  // Foundation-wide props (accessible via website.foundationProps):
+  props: {},
+}

package/starter/foundation/sections/Section/index.jsx

@@ -0,0 +1,95 @@
+import { H1, H2, P, Link, cn } from '@uniweb/kit'
+
+/**
+ * Section Component
+ *
+ * A versatile content section that handles headings, text, and links.
+ * Uses semantic tokens so it adapts to any theme context automatically.
+ */
+export default function Section({ content, params }) {
+  const { title, pretitle, subtitle, paragraphs = [], links = [], images = [] } = content || {}
+
+  const {
+    align = 'center',
+    width = 'default',
+  } = params || {}
+
+  const alignments = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  }
+
+  const widths = {
+    narrow: 'max-w-2xl',
+    default: 'max-w-4xl',
+    wide: 'max-w-6xl',
+    full: 'max-w-none',
+  }
+
+  return (
+    <div className={cn('py-16 px-6', alignments[align])}>
+      <div className={cn('mx-auto', widths[width])}>
+        {pretitle && (
+          <p className="text-sm font-medium text-link mb-4 uppercase tracking-wide">
+            {pretitle}
+          </p>
+        )}
+
+        {title && (
+          <H1
+            text={title}
+            className="text-heading text-3xl sm:text-4xl font-bold mb-4"
+          />
+        )}
+
+        {subtitle && (
+          <H2
+            text={subtitle}
+            className="text-body text-xl mb-6"
+          />
+        )}
+
+        {paragraphs.map((para, index) => (
+          <P
+            key={index}
+            text={para}
+            className="text-body text-lg mb-4 leading-relaxed"
+          />
+        ))}
+
+        {links.length > 0 && (
+          <div className={cn('mt-8 flex gap-4 flex-wrap', align === 'center' && 'justify-center')}>
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                to={link.href}
+                className={cn(
+                  'inline-flex items-center px-6 py-3 font-medium rounded-lg transition-colors',
+                  index === 0
+                    ? 'bg-primary text-primary-foreground hover:bg-primary-hover'
+                    : 'bg-secondary text-secondary-foreground hover:bg-secondary-hover'
+                )}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {images.length > 0 && (
+          <div className="mt-8">
+            {images.map((img, index) => (
+              <img
+                key={index}
+                src={img.url || img.src}
+                alt={img.alt || ''}
+                className="rounded-lg shadow-lg mx-auto"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/starter/foundation/sections/Section/meta.js

@@ -0,0 +1,44 @@
+export default {
+  title: 'Section',
+  description: 'A versatile content section for headings, text, and links',
+
+  content: {
+    pretitle: 'Eyebrow text',
+    title: 'Main heading',
+    subtitle: 'Secondary heading',
+    paragraphs: 'Body text',
+    links: 'Call-to-action buttons',
+    images: 'Section images',
+  },
+
+  params: {
+    align: {
+      type: 'select',
+      label: 'Alignment',
+      options: ['left', 'center', 'right'],
+      default: 'center',
+    },
+    width: {
+      type: 'select',
+      label: 'Width',
+      options: [
+        'narrow',
+        'default',
+        'wide',
+        { value: 'full', label: 'Full Width' },
+      ],
+      default: 'default',
+    },
+  },
+
+  presets: {
+    default: {
+      label: 'Centered',
+      params: { align: 'center' },
+    },
+    left: {
+      label: 'Left Aligned',
+      params: { align: 'left' },
+    },
+  },
+}

package/starter/site/pages/about/1-about.md.hbs

@@ -0,0 +1,13 @@
+---
+type: Section
+theme: dark
+align: center
+---
+
+# About {{projectName}}
+
+## A second page to demonstrate routing
+
+This page uses a dark theme. Click the link below to navigate back to the home page and see the theme change.
+
+[Back to Home](/)

package/starter/site/pages/about/page.yml

@@ -0,0 +1,3 @@
+id: e5f6a7b8
+title: About
+description: About this project

package/starter/site/pages/home/1-welcome.md.hbs

@@ -0,0 +1,14 @@
+---
+type: Section
+theme: light
+align: center
+---
+
+# Welcome to {{projectName}}
+
+## Your Uniweb project is ready
+
+This is a minimal starting point for your Uniweb project. Edit the content in `site/pages/` and build section types in `src/sections/`.
+
+[About](/about)
+[Documentation](https://github.com/uniweb)

package/starter/site/pages/home/page.yml

@@ -0,0 +1,3 @@
+id: a1b2c3d4
+title: Home
+description: Welcome to the site

package/templates/foundation/_gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+_entry.generated.js
+.DS_Store
+*.local

package/templates/foundation/main.js.hbs

@@ -0,0 +1,33 @@
+// Foundation Configuration
+//
+// ─── CSS Custom Properties ──────────────────────────────────────────────────────
+// Export `vars` to declare CSS custom properties that sites can override in theme.yml:
+//
+// export const vars = {
+//   'header-height': { default: '4rem', description: 'Fixed header height' },
+//   'max-content-width': { default: '80rem', description: 'Max content width' },
+// }
+//
+// Sites override in theme.yml:  vars: { header-height: 5rem }
+// Components use:               height: var(--header-height)
+
+{{#if isExtension}}
+export default {
+{{#if registryName}}
+  name: '{{registryName}}',
+{{/if}}
+  extension: true,
+}
+{{else}}
+export default {
+{{#if registryName}}
+  // ─── Name ───────────────────────────────────────────────────────────────────
+  // What this foundation registers as — @<org>/<name> — and what sites pin.
+  name: '{{registryName}}',
+
+{{/if}}
+  // ─── Layout ─────────────────────────────────────────────────────────────────
+  // Create layouts in layouts/MyLayout/index.jsx (auto-discovered).
+  // defaultLayout: 'MyLayout',
+}
+{{/if}}

package/templates/foundation/package.json.hbs

@@ -0,0 +1,51 @@
+{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "description": "{{projectName}} foundation",
+  "type": "module",
+  "main": "./_entry.generated.js",
+  "exports": {
+    ".": "./_entry.generated.js",
+    "./styles": "./styles.css",
+    "./dist": "./dist/entry.js",
+    "./dist/styles": "./dist/assets/style.css"
+  },
+  "imports": {
+    "#components/*": "./components/*",
+    "#utils/*": "./utils/*"
+  },
+  "files": [
+    "dist",
+    "sections",
+    "components",
+    "layouts",
+    "utils",
+    "main.js",
+    "styles.css",
+    "_entry.generated.js"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "uniweb build",
+    "build:vite": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "{{version "react"}}",
+    "react-dom": "{{version "react-dom"}}"
+  },
+  "dependencies": {
+    "@uniweb/core": "{{version "@uniweb/core"}}",
+    "@uniweb/kit": "{{version "@uniweb/kit"}}"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@uniweb/build": "{{version "@uniweb/build"}}",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "{{version "react"}}",
+    "react-dom": "{{version "react-dom"}}",
+    "tailwindcss": "^4.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

package/templates/foundation/styles.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@import "@uniweb/kit/theme-tokens.css";
+
+@source "./sections/**/*.{js,jsx}";
+@source "./layouts/**/*.{js,jsx}";
+@source "./node_modules/@uniweb/kit/src/**/*.{js,jsx}";

package/templates/foundation/vite.config.js

@@ -0,0 +1,3 @@
+import { defineFoundationConfig } from '@uniweb/build'
+
+export default defineFoundationConfig()

package/templates/site/_gitignore

@@ -0,0 +1,12 @@
+node_modules
+dist
+.uniweb/
+.DS_Store
+*.local
+
+# Generated from records/ on every build — compiled queries in public/data/, and
+# each record's files, published in public/records/. Both land in the source tree
+# rather than dist/, so without this they look permanent, get committed, and then
+# look like something you may edit. They aren't: records live in records/.
+public/data/
+public/records/

package/templates/site/entry.js

@@ -0,0 +1,7 @@
+import '#foundation/styles'
+import { start } from '@uniweb/runtime'
+
+start({
+  config: __FOUNDATION_CONFIG__,
+  foundation: import('#foundation')
+})

package/templates/site/index.html.hbs

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/entry.js"></script>
+  </body>
+</html>

package/templates/site/package.json.hbs

@@ -0,0 +1,27 @@
+{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "dev:runtime": "VITE_FOUNDATION_MODE=runtime vite",
+    "build": "uniweb build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@uniweb/runtime": "{{version "@uniweb/runtime"}}"{{#if foundationPath}},
+    "{{foundationName}}": "{{foundationPath}}"{{/if}}
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@uniweb/build": "{{version "@uniweb/build"}}",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "{{version "react"}}",
+    "react-dom": "{{version "react-dom"}}",
+    "react-router-dom": "^7.0.0",
+    "tailwindcss": "^4.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

package/templates/site/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#1e293b"/>
+  <!-- < symbol -->
+  <path d="M12 10 L6 16 L12 22" stroke="#FA8400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <!-- > symbol -->
+  <path d="M20 10 L26 16 L20 22" stroke="#00ADFE" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>

package/templates/site/site.yml.hbs

@@ -0,0 +1,91 @@
+# Site Configuration
+# Full reference: uniweb docs site  |  Schema: schemas/site.schema.json
+
+name: {{projectName}}
+
+{{#if foundationRef}}
+foundation: {{{foundationRefYaml}}}
+
+{{/if}}
+index: home
+
+# ─── Page Ordering ─────────────────────────────────────────────────────────────
+# Control which pages appear in navigation and in what order.
+# pages: [home, about, ...]        # home first, about second, rest auto-discovered
+# pages: [home, ..., contact]      # home first, contact last, rest in middle
+# pages: [home, about]             # Strict: only these pages in nav (others still built)
+# Or just set the homepage and auto-discover the rest:
+# index: home
+
+# ─── Content Paths ─────────────────────────────────────────────────────────────
+# Mount external content directories into your site's page tree.
+# Paths resolve relative to this file.
+#
+# paths:
+#   pages/docs: ../../../docs       # Mount docs repo at /docs route
+#   pages/blog: ../../blog-content  # Mount blog content at /blog route
+#   layout: ./custom-layout         # Custom layout directory
+#   records: ./data                 # Where this site's records live
+#
+# To give a mounted route a layout or a title, add a local folder for it
+# (pages/docs/) holding a folder.yml — folder.yml, not page.yml, because the
+# mounted directory is a folder of pages. Whatever that stub leaves unset comes
+# from the mounted directory's own folder.yml, so it need only say what differs.
+#
+# ! A `pages/<segment>:` sub-mount is BUILD-ONLY today. `uniweb export` and
+#   `uniweb deploy --host <adapter>` mount it normally, but `uniweb push` /
+#   `uniweb publish` do not read the key, so the mounted pages do not reach a
+#   backend (the CLI warns when it skips them). The whole-directory form
+#   `paths: { pages: <dir> }` IS carried by both. Static hosting: use either.
+
+# ─── Structured Content ───────────────────────────────────────────────────────
+# Three things, and they are separate on purpose:
+#
+#   records/{schema}/    your site's records — every file here is one. The folder
+#                        names their data schema:
+#                          records/article/        → @/article  (your foundation's)
+#                          records/std/person/     → @std/person
+#                        A file whose name starts with `_` is not a record.
+#   records/folder.yml   OPTIONAL — sorts records into folders a query can slice
+#                        with `scope:`. The one file in records/ that is not a
+#                        record. Most sites have none:
+#                            - folder: archive
+#                              records:
+#                                - article/2025-*.md
+#   queries.yml          HOW CONTENT IS REACHED — named queries over those records:
+#                            recent:
+#                              schema: '@/article'
+#                              sort: date desc
+#                              limit: 10
+#
+# Pages and sections then name a query: `query: recent`, or
+# `fetch: { query: recent, limit: 3 }` for anything more.
+#
+# You can also keep queries here instead of in queries.yml:
+#
+# queries:
+#   articles:
+#     schema: '@/article'
+#     sort: date desc                    # Sort by frontmatter field
+#
+# fetch:
+#   - url: https://api.example.com/team  # Remote JSON
+#     as: team                           # Access as content.data.team
+#   - path: /data/config.json            # Local file from public/
+
+# ─── Extensions ────────────────────────────────────────────────────────────────
+# Load additional foundations (section types) via URL.
+# extensions:
+#   - https://cdn.example.com/effects/foundation.js
+
+# ─── Layout ────────────────────────────────────────────────────────────────────
+# Override the foundation's default layout per-site.
+# layout: DocsLayout
+# Or per-page in page.yml:  layout: { name: MarketingLayout, hide: [left] }
+
+# ─── Base Path ─────────────────────────────────────────────────────────────────
+# For subdirectory deployments (e.g., https://example.com/docs/).
+# base: /docs/
+
+build:
+  prerender: true

package/templates/site/theme.yml

@@ -0,0 +1,99 @@
+# Theme Configuration
+# Controls colors, typography, and visual style for the site.
+# Only set what you want to change — everything has sensible defaults.
+
+# ─── Colors ────────────────────────────────────────────────────────────────────
+# Palette colors generate shades (50–950) used by semantic tokens.
+# Values: any CSS color (hex, rgb, hsl, oklch).
+
+colors:
+  primary: '#3b82f6'        # Brand color — buttons, links, focus rings
+  # secondary: '#64748b'    # Secondary actions
+  # accent: '#8b5cf6'       # Highlights, decorative elements (defaults to primary)
+  # neutral: stone           # Gray family — stone, zinc, gray, slate, neutral
+
+# ─── Fonts ─────────────────────────────────────────────────────────────────────
+# Font families for text, headings, and code blocks.
+# Default: system-ui stack. Uncomment to use custom fonts.
+
+# fonts:
+#   heading: '"Inter", system-ui, sans-serif'
+#   body: '"Inter", system-ui, sans-serif'
+#   code: '"JetBrains Mono", ui-monospace, monospace'
+#   import:
+#     - url: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap
+#     - url: https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap
+
+# ─── Page Background ──────────────────────────────────────────────────────────
+# Background applied to the page body. Any CSS background value.
+
+# background: '#fafaf9'
+# background: 'linear-gradient(to bottom, #fafaf9, white)'
+
+# ─── Appearance ────────────────────────────────────────────────────────────────
+# Color scheme support. Simple value: light, dark, or system.
+# Or use the expanded form for more control.
+
+# appearance: light
+# appearance:
+#   default: light
+#   schemes: [light, dark]
+#   allowToggle: true
+#   respectSystemPreference: true
+
+# ─── Context Overrides ─────────────────────────────────────────────────────────
+# Sections declare a context (light, medium, dark) in frontmatter.
+# Each context maps semantic tokens to palette values.
+# Override individual tokens here — unlisted tokens keep their defaults.
+#
+# Available tokens:
+#   Surfaces:  section, card, muted
+#   Text:      body, heading, subtle
+#   Border:    border, ring
+#   Links:     link, link-hover
+#   Actions:   primary, primary-foreground, primary-hover, primary-border
+#              secondary, secondary-foreground, secondary-hover, secondary-border
+#   Status:    success, warning, error, info (+ -subtle variants)
+
+# contexts:
+#   light:
+#     section: white
+#   medium:
+#     section: neutral-100
+#   dark:
+#     heading: white
+
+# ─── Inline Text Styles ───────────────────────────────────────────────────────
+# Named styles for inline text in markdown: [text]{accent}
+# Each name maps to CSS properties.
+# Defaults: accent (colored + bold), muted (subtle).
+
+# inline:
+#   accent:
+#     color: 'var(--link)'
+#     font-weight: '600'
+#   muted:
+#     color: 'var(--subtle)'
+
+# ─── Code Blocks ───────────────────────────────────────────────────────────────
+# Syntax highlighting colors for code blocks (uses Shiki).
+
+# code:
+#   background: '#1e1e2e'
+#   foreground: '#cdd6f4'
+#   keyword: '#cba6f7'
+#   string: '#a6e3a1'
+#   number: '#fab387'
+#   comment: '#6c7086'
+#   function: '#89b4fa'
+#   variable: '#f5e0dc'
+#   type: '#f9e2af'
+#   property: '#94e2d5'
+#   tag: '#89b4fa'
+
+# ─── Foundation Variables ──────────────────────────────────────────────────────
+# Override variables declared by the foundation (e.g., header-height, max-width).
+# Available variables depend on the foundation — check its main.js.
+
+# vars:
+#   header-height: 5rem

package/templates/site/vite.config.js

@@ -0,0 +1,7 @@
+import { defineSiteConfig } from '@uniweb/build/site'
+
+// Options passed here REPLACE the framework's, key by key — except
+// optimizeDeps.include / .exclude, which are added to rather than replaced.
+// So `build: { sourcemap: true }` overrides the framework's whole build block;
+// check what you are replacing before you pass one.
+export default defineSiteConfig()

package/templates/workspace/AGENTS.md.hbs

@@ -0,0 +1,2 @@
+<!-- uniweb-agents v{{cliVersion}} -->
+{{> agents}}