@olonjs/cli 3.0.128 → 3.0.130

package/assets/templates/alpha/src_tenant.sh

@@ -1597,6 +1597,37 @@ If user says "use dark theme" or "change my theme":
 4. Write the updated JSON back to the file
 5. Inform the user the setting has been changed and whether a reload is needed
 
+END_OF_FILE_CONTENT
+echo "Creating components.json..."
+cat << 'END_OF_FILE_CONTENT' > "components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "bold",
+  "registries": {}
+}
+
+
+
 END_OF_FILE_CONTENT
 echo "Creating index.html..."
 cat << 'END_OF_FILE_CONTENT' > "index.html"
@@ -1632,7 +1663,7 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
     "verify:webmcp": "node scripts/webmcp-feature-check.mjs",
     "prebuild": "node scripts/sync-pages-to-public.mjs && node scripts/generate-llms-txt.mjs",
     "build": "tsc && vite build",
-    "dist": "bash ./src2Code.sh --template alpha src .cursor vercel.json index.html tsconfig.json tsconfig.node.json vite.config.ts scripts ../../specs package.json public/assets/images/plug-graded-square.jpg",
+    "dist": "bash ./src2Code.sh --template alpha src .cursor vercel.json components.json index.html tsconfig.json package.json tsconfig.node.json vite.config.ts scripts ",
     "preview": "vite preview",
     "bake:email": "tsx scripts/bake-email.tsx",
     "bakemail": "npm run bake:email --",
@@ -1643,7 +1674,7 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/react": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@olonjs/core": "^1.0.117",
+    "@olonjs/core": "^1.0.121",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.474.0",
@@ -1672,7 +1703,6 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
 }
 
 END_OF_FILE_CONTENT
-# SKIP: public/assets/images/plug-graded-square.jpg is binary and cannot be embedded as text.
 mkdir -p "scripts"
 echo "Creating scripts/bake-email.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "scripts/bake-email.tsx"
@@ -2557,13 +2587,13 @@ import { JsonPagesEngine } from '@olonjs/core';
 import type { JsonPagesConfig, LibraryImageEntry, ProjectState } from '@olonjs/core';
 import { normalizeBasePath, withBasePath } from '@olonjs/core';
 import { ComponentRegistry } from '@/lib/ComponentRegistry';
-import { SECTION_SCHEMAS } from '@/lib/schemas';
+import { SECTION_SCHEMAS, SECTION_SUBMISSION_SCHEMAS } from '@/lib/schemas';
 import { addSectionConfig } from '@/lib/addSectionConfig';
 import { getHydratedData } from '@/lib/draftStorage';
 import type { SiteConfig, ThemeConfig, MenuConfig, PageConfig } from '@/types';
-import type { DeployPhase, StepId } from '@/types/deploy';
-import { DEPLOY_STEPS } from '@/lib/deploySteps';
-import { startCloudSaveStream } from '@/lib/cloudSaveStream';
+import type { DeployPhase, StepId } from '@olonjs/core';
+import { DEPLOY_STEPS } from '@olonjs/core';
+import { startCloudSaveStream } from '@olonjs/core';
 import siteData from '@/data/config/site.json';
 import themeData from '@/data/config/theme.json';
 import menuData from '@/data/config/menu.json';
@@ -2572,6 +2602,9 @@ import { DopaDrawer } from '@/components/save-drawer/DopaDrawer';
 import { EmptyTenantView } from '@/components/empty-tenant';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ThemeProvider } from '@/components/ThemeProvider';
+import { useOlonForms } from '@/lib/useOlonForms';
+import { OlonFormsContext } from '@olonjs/core';
+import { iconMap } from '@/lib/IconResolver';
 
 import tenantCss from './index.css?inline';
 
@@ -2718,7 +2751,6 @@ function coerceSiteConfig(value: unknown): SiteConfig | null {
   }
   if (!isObjectRecord(input)) return null;
   if (!isObjectRecord(input.identity)) return null;
-  if (!Array.isArray(input.pages)) return null;
 
   return input as unknown as SiteConfig;
 }
@@ -2966,6 +2998,7 @@ function setTenantPreviewReady(ready: boolean): void {
 }
 
 function App() {
+  const { states: formStates } = useOlonForms();
   const isCloudMode = Boolean(CLOUD_API_URL && CLOUD_API_KEY);
   const isSave2RepoMode = isCloudMode && SAVE2REPO_ENABLED;
   const isHotSaveMode = isCloudMode && !isSave2RepoMode;
@@ -3408,11 +3441,13 @@ function App() {
     basePath: APP_BASE_PATH,
     registry: ComponentRegistry as JsonPagesConfig['registry'],
     schemas: SECTION_SCHEMAS as unknown as JsonPagesConfig['schemas'],
+    submissionSchemas: SECTION_SUBMISSION_SCHEMAS as unknown as JsonPagesConfig['submissionSchemas'],
     pages,
     siteConfig,
     themeConfig,
     menuConfig,
     refDocuments,
+    iconRegistry: iconMap,
     themeCss: { tenant: resolvedTenantCss },
     addSection: addSectionConfig,
     webmcp: {
@@ -3575,6 +3610,7 @@ function App() {
 
   return (
     <ThemeProvider>
+      <OlonFormsContext.Provider value={formStates}>
       <>
       {isCloudMode && showTopProgress ? (
         <>
@@ -3696,6 +3732,7 @@ function App() {
         onRetry={retryCloudSave}
       />
       </>
+      </OlonFormsContext.Provider>
     </ThemeProvider>
   );
 }
@@ -3706,90 +3743,89 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components"
 echo "Creating src/components/ThemeProvider.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ThemeProvider.tsx"
-import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
-
-type Theme = 'dark' | 'light'
-
-interface ThemeContextValue {
-  theme: Theme
-  toggleTheme: () => void
-  setTheme: (t: Theme) => void
-}
-
-const ThemeContext = createContext<ThemeContextValue>({
-  theme: 'dark',
-  toggleTheme: () => {},
-  setTheme: () => {},
-})
-
-const STORAGE_KEY = 'olon:theme'
-
-function isTheme(value: unknown): value is Theme {
-  return value === 'dark' || value === 'light'
-}
-
-function resolveInitialTheme(): Theme {
-  if (typeof window === 'undefined') return 'dark'
-
-  const fromDom = document.documentElement.getAttribute('data-theme')
-  if (isTheme(fromDom)) return fromDom
-
-  const fromStorage = window.localStorage.getItem(STORAGE_KEY)
-  if (isTheme(fromStorage)) return fromStorage
-
-  const prefersLight = window.matchMedia?.('(prefers-color-scheme: light)').matches
-  return prefersLight ? 'light' : 'dark'
-}
-
-export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>(resolveInitialTheme)
-
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme)
-    window.localStorage.setItem(STORAGE_KEY, theme)
-  }, [theme])
-
-  function setTheme(t: Theme) {
-    setThemeState(t)
-  }
-
-  function toggleTheme() {
-    setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'))
-  }
-
-  const value = useMemo(() => ({ theme, toggleTheme, setTheme }), [theme])
-
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-}
-
-export function useTheme() {
-  return useContext(ThemeContext)
-}
-
-END_OF_FILE_CONTENT
-mkdir -p "src/components/empty-tenant"
-echo "Creating src/components/empty-tenant/View.tsx..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/empty-tenant/View.tsx"
-import type { EmptyTenantData } from './types';
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
 
-type EmptyTenantViewProps = {
-  data?: EmptyTenantData;
-};
+type Theme = 'dark' | 'light'
 
-export function EmptyTenantView({ data }: EmptyTenantViewProps) {
-  const title = data?.title?.trim() || 'Your tenant is empty.';
-  const description = data?.description?.trim() || 'Create your first page to start building your site.';
+interface ThemeContextValue {
+  theme: Theme
+  toggleTheme: () => void
+  setTheme: (t: Theme) => void
+}
 
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'dark',
+  toggleTheme: () => {},
+  setTheme: () => {},
+})
 
-  return (
-    <main className="min-h-screen flex items-center justify-center bg-background text-foreground px-6">
-      <section className="w-full max-w-xl rounded-xl border border-border bg-card p-8 shadow-sm">
-        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        <p className="mt-3 text-sm text-muted-foreground">{description}</p>
-      </section>
-    </main>
-  );
+const STORAGE_KEY = 'olon:theme'
+
+function isTheme(value: unknown): value is Theme {
+  return value === 'dark' || value === 'light'
+}
+
+function resolveInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'dark'
+
+  const fromDom = document.documentElement.getAttribute('data-theme')
+  if (isTheme(fromDom)) return fromDom
+
+  const fromStorage = window.localStorage.getItem(STORAGE_KEY)
+  if (isTheme(fromStorage)) return fromStorage
+
+  const prefersLight = window.matchMedia?.('(prefers-color-scheme: light)').matches
+  return prefersLight ? 'light' : 'dark'
 }
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(resolveInitialTheme)
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    window.localStorage.setItem(STORAGE_KEY, theme)
+  }, [theme])
+
+  function setTheme(t: Theme) {
+    setThemeState(t)
+  }
+
+  function toggleTheme() {
+    setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'))
+  }
+
+  const value = useMemo(() => ({ theme, toggleTheme, setTheme }), [theme])
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}
+
+END_OF_FILE_CONTENT
+mkdir -p "src/components/empty-tenant"
+echo "Creating src/components/empty-tenant/View.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/empty-tenant/View.tsx"
+import type { EmptyTenantData } from './types';
+
+type EmptyTenantViewProps = {
+  data?: EmptyTenantData;
+};
+
+export function EmptyTenantView({ data }: EmptyTenantViewProps) {
+  const title = data?.title?.trim() || 'Your tenant is empty.';
+  const description = data?.description?.trim() || 'Create your first page to start building your site.';
+
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-background text-foreground px-6">
+      <section className="w-full max-w-xl rounded-xl border border-border bg-card p-8 shadow-sm">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        <p className="mt-3 text-sm text-muted-foreground">{description}</p>
+      </section>
+    </main>
+  );
+}
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/empty-tenant/index.ts..."
@@ -3802,12 +3838,11 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/empty-tenant/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/empty-tenant/schema.ts"
 import { z } from 'zod';
-import { BaseSectionData } from '@/lib/base-schemas';
+import { BaseSectionData } from '@olonjs/core';
 
 export const EmptyTenantSchema = BaseSectionData.extend({
   title: z.string().optional().describe('ui:text'),
   description: z.string().optional().describe('ui:textarea'),
-
 });
 
 export const EmptyTenantSettingsSchema = z.object({});
@@ -3821,11 +3856,215 @@ import { EmptyTenantSchema, EmptyTenantSettingsSchema } from './schema';
 export type EmptyTenantData = z.infer<typeof EmptyTenantSchema>;
 export type EmptyTenantSettings = z.infer<typeof EmptyTenantSettingsSchema>;
 
+END_OF_FILE_CONTENT
+mkdir -p "src/components/form-demo"
+echo "Creating src/components/form-demo/View.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/form-demo/View.tsx"
+import { Icon } from '@/lib/IconResolver';
+import { useFormState } from '@olonjs/core';
+import type { FormDemoData } from './types';
+
+type FormDemoViewProps = {
+  data: FormDemoData;
+};
+
+const missingEnv =
+  !import.meta.env.VITE_JSONPAGES_CLOUD_URL &&
+  !import.meta.env.VITE_OLONJS_CLOUD_URL;
+
+function SetupGuide({ recipientEmail }: { recipientEmail?: string }) {
+  const steps = [
+    {
+      done: !!recipientEmail,
+      label: 'recipientEmail nel JSON della sezione',
+      code: '"recipientEmail": "tu@esempio.it"',
+    },
+    {
+      done: !missingEnv,
+      label: 'VITE_JSONPAGES_CLOUD_URL nel file .env',
+      code: 'VITE_JSONPAGES_CLOUD_URL=https://cloud.olonjs.io',
+    },
+    {
+      done: !!import.meta.env.VITE_JSONPAGES_API_KEY || !!import.meta.env.VITE_OLONJS_API_KEY,
+      label: 'VITE_JSONPAGES_API_KEY nel file .env',
+      code: 'VITE_JSONPAGES_API_KEY=sk-...',
+    },
+  ];
+
+  const allDone = steps.every((s) => s.done);
+  if (allDone) return null;
+
+  return (
+    <div className="rounded-lg border border-border bg-muted/40 p-4 space-y-3 text-sm">
+      <p className="font-medium text-foreground">Quasi pronto — completa questi passaggi</p>
+      <ol className="space-y-2">
+        {steps.map((step, i) => (
+          <li key={i} className="flex items-start gap-2">
+            <span className={step.done ? 'text-green-500' : 'text-muted-foreground'}>
+              {step.done ? '✓' : `${i + 1}.`}
+            </span>
+            <span className={step.done ? 'text-muted-foreground line-through' : 'text-foreground'}>
+              {step.label}
+              {!step.done && (
+                <code className="block mt-0.5 text-xs bg-background rounded px-1.5 py-0.5 font-mono text-muted-foreground border border-border">
+                  {step.code}
+                </code>
+              )}
+            </span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+export function FormDemoView({ data }: FormDemoViewProps) {
+  const formId = data.anchorId?.trim() || 'form-demo';
+  const { status, message } = useFormState(formId);
+
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-background text-foreground px-6">
+      <section className="w-full max-w-xl rounded-xl border border-border bg-card p-8 shadow-sm space-y-6">
+        {data.icon && (
+          <div data-jp-field="icon" className="mb-2">
+            <Icon name={data.icon} size={24} />
+          </div>
+        )}
+        {data.title && (
+          <div>
+            <h1
+              data-jp-field="title"
+              className="text-2xl font-semibold tracking-tight"
+            >
+              {data.title}
+            </h1>
+            {data.description && (
+              <p
+                data-jp-field="description"
+                className="mt-3 text-sm text-muted-foreground"
+              >
+                {data.description}
+              </p>
+            )}
+          </div>
+        )}
+
+        <SetupGuide recipientEmail={data.recipientEmail} />
+
+        <form
+          id={formId}
+          data-olon-recipient={data.recipientEmail ?? ''}
+          className="space-y-4"
+        >
+          <div>
+            <label className="block text-xs font-medium text-muted-foreground mb-1">
+              Nome
+            </label>
+            <input
+              name="name"
+              type="text"
+              required
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-muted-foreground mb-1">
+              Email
+            </label>
+            <input
+              name="email"
+              type="email"
+              required
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-muted-foreground mb-1">
+              Messaggio
+            </label>
+            <textarea
+              name="message"
+              required
+              rows={4}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+          </div>
+
+          {status === 'error' && (
+            <p className="text-xs text-destructive">{message}</p>
+          )}
+          {status === 'success' && (
+            <p className="text-xs text-green-600">
+              {data.successMessage || message}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={status === 'submitting'}
+            className="w-full rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-60 disabled:cursor-not-allowed transition-opacity"
+          >
+            {status === 'submitting' ? 'Invio...' : (data.submitLabel || 'Invia')}
+          </button>
+        </form>
+      </section>
+    </main>
+  );
+}
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/form-demo/index.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/form-demo/index.ts"
+export * from './View';
+export * from './schema';
+export * from './types';
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/form-demo/schema.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/form-demo/schema.ts"
+import { z } from 'zod';
+import { BaseSectionData, WithFormRecipient } from '@olonjs/core';
+
+export const FormDemoSchema = BaseSectionData.merge(WithFormRecipient).extend({
+  icon: z.string().optional().describe('ui:icon-picker'),
+  title: z.string().optional().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  submitLabel: z.string().default('Invia').describe('ui:text'),
+  successMessage: z.string().default('Richiesta inviata con successo.').describe('ui:text'),
+});
+
+export const FormDemoSettingsSchema = z.object({});
+
+/**
+ * Submission payload schema for the `form-demo` section.
+ *
+ * Describes the fields actually submitted by the rendered `<form>` in View.tsx
+ * (name, email, message). Exposed via `JsonPagesConfig.submissionSchemas` so that
+ * MCP agents can discover the submission contract for this section type without
+ * scraping the DOM. See ADR-0002 (docs/decisions/ADR-0002-form-submission-schemas.md).
+ */
+export const FormDemoSubmissionSchema = z.object({
+  name: z.string().min(1).describe('Full name of the person submitting the form'),
+  email: z.string().email().describe('Contact email address where we will reply'),
+  message: z.string().min(1).describe('Free-form message body'),
+});
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/form-demo/types.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/form-demo/types.ts"
+import { z } from 'zod';
+import { FormDemoSchema, FormDemoSettingsSchema } from './schema';
+
+export type FormDemoData = z.infer<typeof FormDemoSchema>;
+export type FormDemoSettings = z.infer<typeof FormDemoSettingsSchema>;
+
 END_OF_FILE_CONTENT
 mkdir -p "src/components/save-drawer"
 echo "Creating src/components/save-drawer/DeployConnector.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/save-drawer/DeployConnector.tsx"
-import type { StepState } from '@/types/deploy';
+import type { StepState } from '@olonjs/core';
 
 interface DeployConnectorProps {
   fromState: StepState;
@@ -3871,7 +4110,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/save-drawer/DeployNode.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/save-drawer/DeployNode.tsx"
 import type { CSSProperties } from 'react';
-import type { DeployStep, StepState } from '@/types/deploy';
+import type { DeployStep, StepState } from '@olonjs/core';
 
 interface DeployNodeProps {
   step: DeployStep;
@@ -3959,8 +4198,8 @@ echo "Creating src/components/save-drawer/DopaDrawer.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/save-drawer/DopaDrawer.tsx"
 import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import type { StepId, StepState } from '@/types/deploy';
-import { DEPLOY_STEPS } from '@/lib/deploySteps';
+import type { StepId, StepState } from '@olonjs/core';
+import { DEPLOY_STEPS } from '@olonjs/core';
 import fontsCss from '@/fonts.css?inline';
 import saverStyleCss from './saverStyle.css?inline';
 import { DeployNode } from './DeployNode';
@@ -4909,7 +5148,7 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components/ui"
 echo "Creating src/components/ui/OlonMark.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/OlonMark.tsx"
-import { cn } from '@/lib/utils'
+import { cn } from '@olonjs/core'
 
 interface OlonMarkProps {
   size?: number
@@ -4999,7 +5238,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/accordion.tsx"
 import * as React from "react"
 import { Accordion as AccordionPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 function Accordion({
@@ -5103,7 +5342,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/avatar.tsx"
 import * as React from "react"
 import { Avatar as AvatarPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function Avatar({
   className,
@@ -5218,7 +5457,7 @@ echo "Creating src/components/ui/badge.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/badge.tsx"
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
+import { cn } from '@olonjs/core'
 
 const badgeVariants = cva(
   'inline-flex items-center px-2.5 py-0.5 text-xs font-medium transition-colors',
@@ -5253,7 +5492,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/breadcrumb.tsx"
 import * as React from "react"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
@@ -5380,7 +5619,7 @@ echo "Creating src/components/ui/button.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/button.tsx"
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
+import { cn } from '@olonjs/core'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 shrink-0',
@@ -5441,7 +5680,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/ui/card.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/card.tsx"
 import * as React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '@olonjs/core'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
@@ -5500,7 +5739,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/checkbox.tsx"
 import * as React from "react"
 import { Checkbox as CheckboxPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { CheckIcon } from "lucide-react"
 
 function Checkbox({
@@ -5540,7 +5779,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/dialog.tsx"
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { Button } from "@/components/ui/button"
 import { XIcon } from "lucide-react"
 
@@ -5712,7 +5951,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/dropdown-menu.tsx"
 import * as React from "react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function DropdownMenu({
@@ -5987,7 +6226,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/hover-card.tsx"
 import * as React from "react"
 import { HoverCard as HoverCardPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function HoverCard({
   ...props
@@ -6033,7 +6272,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/ui/input.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/input.tsx"
 import * as React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '@olonjs/core'
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
@@ -6064,7 +6303,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/ui/label.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/label.tsx"
 import * as React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '@olonjs/core'
 
 const Label = React.forwardRef<
   HTMLLabelElement,
@@ -6088,7 +6327,7 @@ import * as React from "react"
 import { cva } from "class-variance-authority"
 import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { ChevronDownIcon } from "lucide-react"
 
 function NavigationMenu({
@@ -6257,7 +6496,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/progress.tsx"
 import * as React from "react"
 import { Progress as ProgressPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function Progress({
   className,
@@ -6292,7 +6531,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/scroll-area.tsx"
 import * as React from "react"
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function ScrollArea({
   className,
@@ -6351,7 +6590,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/select.tsx"
 import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
 function Select({
@@ -6737,7 +6976,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/components/ui/separator.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/separator.tsx"
 import * as React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '@olonjs/core'
 
 const Separator = React.forwardRef<
   HTMLDivElement,
@@ -6766,7 +7005,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/sheet.tsx"
 import * as React from "react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { Button } from "@/components/ui/button"
 import { XIcon } from "lucide-react"
 
@@ -6914,7 +7153,7 @@ END_OF_FILE_CONTENT
 # SKIP: src/components/ui/sheet.tsx:Zone.Identifier is binary and cannot be embedded as text.
 echo "Creating src/components/ui/skeleton.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/skeleton.tsx"
-import { cn } from '@/lib/utils';
+import { cn } from '@olonjs/core';
 import type { HTMLAttributes } from 'react';
 
 function Skeleton({
@@ -6938,7 +7177,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/switch.tsx"
 import * as React from "react"
 import { Switch as SwitchPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function Switch({
   className,
@@ -6974,7 +7213,7 @@ echo "Creating src/components/ui/table.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/table.tsx"
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
@@ -7098,7 +7337,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Tabs as TabsPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function Tabs({
   className,
@@ -7190,7 +7429,7 @@ echo "Creating src/components/ui/textarea.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/textarea.tsx"
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
@@ -7219,7 +7458,7 @@ import * as React from "react"
 import { type VariantProps } from "class-variance-authority"
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 import { toggleVariants } from "@/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
@@ -7314,7 +7553,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Toggle as TogglePrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 const toggleVariants = cva(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -7366,7 +7605,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/components/ui/tooltip.tsx"
 import * as React from "react"
 import { Tooltip as TooltipPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@olonjs/core"
 
 function TooltipProvider({
   delayDuration = 0,
@@ -7503,16 +7742,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/site.json"
     "title": "OlonJS",
     "logoUrl": "/brand/mark/olon-mark-dark.svg"
   },
-  "pages": [
-    {
-      "slug": "home",
-      "label": "Home"
-    },
-    {
-      "slug": "design-system",
-      "label": "Design System"
-    }
-  ],
+  
   "header": {
     "id": "global-header",
     "type": "header",
@@ -7734,6 +7964,33 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/theme.json"
 }
 END_OF_FILE_CONTENT
 mkdir -p "src/data/pages"
+echo "Creating src/data/pages/home.json..."
+cat << 'END_OF_FILE_CONTENT' > "src/data/pages/home.json"
+{
+  "id": "home-page",
+  "slug": "home",
+  "meta": {
+    "title": "Home",
+    "description": "OlonJS tenant alpha — form smoke test"
+  },
+  "sections": [
+    {
+      "id": "form-demo-1",
+      "type": "form-demo",
+      "data": {
+        "anchorId": "form-demo",
+        "title": "Contattaci",
+        "description": "Compila il modulo e ti risponderemo al più presto.",
+        "recipientEmail": "test@olonjs.io",
+        "submitLabel": "Invia",
+        "successMessage": "Richiesta inviata con successo.",
+        "icon": "mail"
+      }
+    }
+  ],
+  "global-header": false
+}
+END_OF_FILE_CONTENT
 mkdir -p "src/emails"
 echo "Creating src/emails/LeadNotificationEmail.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/emails/LeadNotificationEmail.tsx"
@@ -9185,11 +9442,13 @@ cat << 'END_OF_FILE_CONTENT' > "src/lib/ComponentRegistry.tsx"
 import type { SectionType } from '@/types';
 import type { SectionComponentPropsMap } from '@/types';
 import { EmptyTenantView } from '@/components/empty-tenant';
+import { FormDemoView } from '@/components/form-demo';
 
 export const ComponentRegistry: {
   [K in SectionType]: React.FC<SectionComponentPropsMap[K]>;
 } = {
   'empty-tenant': EmptyTenantView as React.FC<SectionComponentPropsMap['empty-tenant']>,
+  'form-demo': FormDemoView as React.FC<SectionComponentPropsMap['form-demo']>,
 };
 
 END_OF_FILE_CONTENT
@@ -9207,10 +9466,11 @@ import {
   X,
   Sparkles,
   Zap,
+  Mail,
   type LucideIcon
 } from 'lucide-react';
 
-const iconMap = {
+export const iconMap = {
   'layers': Layers,
   'github': Github,
   'arrow-right': ArrowRight,
@@ -9221,6 +9481,7 @@ const iconMap = {
   'x': X,
   'sparkles': Sparkles,
   'zap': Zap,
+  'mail': Mail,
 } as const satisfies Record<string, LucideIcon>;
 
 export type IconName = keyof typeof iconMap;
@@ -9255,10 +9516,11 @@ echo "Creating src/lib/addSectionConfig.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/addSectionConfig.ts"
 import type { AddSectionConfig } from '@olonjs/core';
 
-const addableSectionTypes = ['empty-tenant'] as const;
+const addableSectionTypes = ['empty-tenant', 'form-demo'] as const;
 
 const sectionTypeLabels: Record<string, string> = {
   'empty-tenant': 'Empty Tenant',
+  'form-demo': 'Form Demo',
 };
 
 function getDefaultSectionData(type: string): Record<string, unknown> {
@@ -9267,9 +9529,17 @@ function getDefaultSectionData(type: string): Record<string, unknown> {
       return {
         title: 'Your tenant is empty.',
         description: 'Create your first page to start building your site.',
-        ctaLabel: 'Open Studio',
       };
-    default:                  return {};
+    case 'form-demo':
+      return {
+        title: 'Contattaci',
+        description: 'Compila il modulo e ti risponderemo al più presto.',
+        recipientEmail: '',
+        submitLabel: 'Invia',
+        successMessage: 'Richiesta inviata con successo.',
+      };
+    default:
+      return {};
   }
 }
 
@@ -9279,219 +9549,6 @@ export const addSectionConfig: AddSectionConfig = {
   getDefaultSectionData,
 };
 
-END_OF_FILE_CONTENT
-echo "Creating src/lib/base-schemas.ts..."
-cat << 'END_OF_FILE_CONTENT' > "src/lib/base-schemas.ts"
-import { z } from 'zod';
-
-/**
- * Image picker field: object { url, alt? } with ui:image-picker for Form Factory.
- * Use in section data and resolve with resolveAssetUrl(url, tenantId) in View.
- */
-export const ImageSelectionSchema = z
-  .object({
-    url: z.string(),
-    alt: z.string().optional(),
-  }) 
-  .describe('ui:image-picker');
-
-/**
- * Base schemas shared by section capsules (CIP governance).
- * Capsules extend these for consistent anchorId, array items, and settings.
- */
-export const BaseSectionData = z.object({
-  id: z.string().optional(),
-  anchorId: z.string().optional().describe('ui:text'),
-});
-
-export const BaseArrayItem = z.object({
-  id: z.string().optional(),
-});
-
-export const BaseSectionSettingsSchema = z.object({
-  paddingTop: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
-  paddingBottom: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
-  theme: z.enum(['dark', 'light', 'accent']).default('dark').describe('ui:select'),
-  container: z.enum(['boxed', 'fluid']).default('boxed').describe('ui:select'),
-});
-
-export const CtaSchema = z.object({
-  id: z.string().optional(),
-  label: z.string().describe('ui:text'),
-  href: z.string().describe('ui:text'),
-  variant: z.enum(['primary', 'secondary', 'accent']).default('primary').describe('ui:select'),
-});
-
-END_OF_FILE_CONTENT
-echo "Creating src/lib/cloudSaveStream.ts..."
-cat << 'END_OF_FILE_CONTENT' > "src/lib/cloudSaveStream.ts"
-import type { StepId } from '@/types/deploy';
-
-interface SaveStreamStepEvent {
-  id: StepId;
-  status: 'running' | 'done';
-  label?: string;
-}
-
-interface SaveStreamLogEvent {
-  stepId: StepId;
-  message: string;
-}
-
-interface SaveStreamDoneEvent {
-  deployUrl?: string;
-  commitSha?: string;
-}
-
-interface SaveStreamErrorEvent {
-  message?: string;
-}
-
-interface StartCloudSaveStreamInput {
-  apiBaseUrl: string;
-  apiKey: string;
-  path: string;
-  content: unknown;
-  message?: string;
-  signal?: AbortSignal;
-  onStep: (event: SaveStreamStepEvent) => void;
-  onLog?: (event: SaveStreamLogEvent) => void;
-  onDone: (event: SaveStreamDoneEvent) => void;
-}
-
-function parseSseEventBlock(rawBlock: string): { event: string; data: string } | null {
-  const lines = rawBlock
-    .split('\n')
-    .map((line) => line.trimEnd())
-    .filter((line) => line.length > 0);
-
-  if (lines.length === 0) return null;
-
-  let eventName = 'message';
-  const dataLines: string[] = [];
-  for (const line of lines) {
-    if (line.startsWith('event:')) {
-      eventName = line.slice(6).trim();
-      continue;
-    }
-    if (line.startsWith('data:')) {
-      dataLines.push(line.slice(5).trim());
-    }
-  }
-  return { event: eventName, data: dataLines.join('\n') };
-}
-
-export async function startCloudSaveStream(input: StartCloudSaveStreamInput): Promise<void> {
-  const response = await fetch(`${input.apiBaseUrl}/save-stream`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${input.apiKey}`,
-    },
-    body: JSON.stringify({
-      path: input.path,
-      content: input.content,
-      message: input.message,
-    }),
-    signal: input.signal,
-  });
-
-  if (!response.ok || !response.body) {
-    const body = (await response.json().catch(() => ({}))) as SaveStreamErrorEvent;
-    throw new Error(body.message ?? `Cloud save stream failed: ${response.status}`);
-  }
-
-  const reader = response.body.getReader();
-  const decoder = new TextDecoder();
-  let buffer = '';
-  let receivedDone = false;
-
-  while (true) {
-    const { value, done } = await reader.read();
-    if (!done) {
-      buffer += decoder.decode(value, { stream: true });
-    } else {
-      buffer += decoder.decode();
-    }
-
-    const chunks = buffer.split('\n\n');
-    buffer = done ? '' : (chunks.pop() ?? '');
-
-    for (const chunk of chunks) {
-      const parsed = parseSseEventBlock(chunk);
-      if (!parsed) continue;
-      if (!parsed.data) continue;
-
-      if (parsed.event === 'step') {
-        const payload = JSON.parse(parsed.data) as SaveStreamStepEvent;
-        input.onStep(payload);
-      } else if (parsed.event === 'log') {
-        const payload = JSON.parse(parsed.data) as SaveStreamLogEvent;
-        input.onLog?.(payload);
-      } else if (parsed.event === 'error') {
-        const payload = JSON.parse(parsed.data) as SaveStreamErrorEvent;
-        throw new Error(payload.message ?? 'Cloud save failed.');
-      } else if (parsed.event === 'done') {
-        const payload = JSON.parse(parsed.data) as SaveStreamDoneEvent;
-        input.onDone(payload);
-        receivedDone = true;
-      }
-    }
-
-    if (done) break;
-  }
-
-  if (!receivedDone) {
-    throw new Error('Cloud save stream ended before completion.');
-  }
-}
-
-
-END_OF_FILE_CONTENT
-echo "Creating src/lib/deploySteps.ts..."
-cat << 'END_OF_FILE_CONTENT' > "src/lib/deploySteps.ts"
-import type { DeployStep } from '@/types/deploy';
-
-export const DEPLOY_STEPS: readonly DeployStep[] = [
-  {
-    id: 'commit',
-    label: 'Commit',
-    verb: 'Committing',
-    poem: ['Crystallizing your edit', 'into permanent history.'],
-    color: '#60a5fa',
-    glyph: '◈',
-    duration: 2200,
-  },
-  {
-    id: 'push',
-    label: 'Push',
-    verb: 'Pushing',
-    poem: ['Sending your vision', 'across the wire.'],
-    color: '#a78bfa',
-    glyph: '◎',
-    duration: 2800,
-  },
-  {
-    id: 'build',
-    label: 'Build',
-    verb: 'Building',
-    poem: ['Assembling the pieces,', 'brick by digital brick.'],
-    color: '#f59e0b',
-    glyph: '⬡',
-    duration: 7500,
-  },
-  {
-    id: 'live',
-    label: 'Live',
-    verb: 'Going live',
-    poem: ['Your content', 'is now breathing.'],
-    color: '#34d399',
-    glyph: '✦',
-    duration: 1600,
-  },
-] as const;
-
-
 END_OF_FILE_CONTENT
 echo "Creating src/lib/draftStorage.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/draftStorage.ts"
@@ -9572,9 +9629,22 @@ END_OF_FILE_CONTENT
 echo "Creating src/lib/schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/schemas.ts"
 import { EmptyTenantSchema } from '@/components/empty-tenant';
+import { FormDemoSchema, FormDemoSubmissionSchema } from '@/components/form-demo';
 
 export const SECTION_SCHEMAS = {
   'empty-tenant': EmptyTenantSchema,
+  'form-demo': FormDemoSchema,
+} as const;
+
+/**
+ * Registry of per-section-type submission schemas. Keys MUST match a key of
+ * SECTION_SCHEMAS. A section type appearing here is declaring itself as
+ * MCP-submittable: the Zod schema describes the payload accepted by the form.
+ *
+ * See ADR-0002 (docs/decisions/ADR-0002-form-submission-schemas.md).
+ */
+export const SECTION_SUBMISSION_SCHEMAS = {
+  'form-demo': FormDemoSubmissionSchema,
 } as const;
 
 export type SectionType = keyof typeof SECTION_SCHEMAS;
@@ -9585,7 +9655,7 @@ export {
   BaseSectionSettingsSchema,
   CtaSchema,
   ImageSelectionSchema,
-} from '@/lib/base-schemas';
+} from '@olonjs/core';
 
 END_OF_FILE_CONTENT
 echo "Creating src/lib/useFormSubmit.ts..."
@@ -9677,13 +9747,134 @@ export function useFormSubmit({ source, tenantId }: UseFormSubmitOptions) {
   return { submit, status, message, reset };
 }
 END_OF_FILE_CONTENT
-echo "Creating src/lib/utils.ts..."
-cat << 'END_OF_FILE_CONTENT' > "src/lib/utils.ts"
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+echo "Creating src/lib/useOlonForms.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/lib/useOlonForms.ts"
+import { useCallback, useEffect, useState } from 'react';
+import type { FormState } from '@olonjs/core';
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+const API_BASE =
+  (import.meta.env.VITE_OLONJS_CLOUD_URL as string | undefined) ??
+  (import.meta.env.VITE_JSONPAGES_CLOUD_URL as string | undefined);
+
+const API_KEY =
+  (import.meta.env.VITE_OLONJS_API_KEY as string | undefined) ??
+  (import.meta.env.VITE_JSONPAGES_API_KEY as string | undefined);
+
+interface UseOlonFormsOptions {
+  /** Override the submit endpoint. Defaults to VITE_OLONJS_CLOUD_URL/forms/submit */
+  endpoint?: string;
+}
+
+/**
+ * Mount once in App.tsx. Scans the DOM for all <form data-olon-recipient="...">
+ * elements and attaches submit handlers. Returns per-form states to be provided
+ * via OlonFormsContext.Provider.
+ *
+ * Views consume state via useFormState(formId) — no direct coupling to this hook.
+ */
+export function useOlonForms(options?: UseOlonFormsOptions): { states: Record<string, FormState> } {
+  const [states, setStates] = useState<Record<string, FormState>>({});
+
+  const setFormState = useCallback((formId: string, state: FormState) => {
+    setStates((prev) => ({ ...prev, [formId]: state }));
+  }, []);
+
+  useEffect(() => {
+    const resolvedBase = options?.endpoint
+      ? options.endpoint.replace(/\/$/, '')
+      : API_BASE
+        ? API_BASE.replace(/\/$/, '')
+        : null;
+
+    if (!resolvedBase || !API_KEY) {
+      console.warn('[useOlonForms] Missing API endpoint or key — forms will not submit.');
+      return;
+    }
+
+    const endpoint = resolvedBase.endsWith('/forms/submit')
+      ? resolvedBase
+      : `${resolvedBase}/forms/submit`;
+
+    const forms = Array.from(
+      document.querySelectorAll<HTMLFormElement>('form[data-olon-recipient]')
+    );
+
+    const controllers: AbortController[] = [];
+
+    async function handleSubmit(form: HTMLFormElement, event: SubmitEvent) {
+      event.preventDefault();
+
+      const formId = form.id || form.dataset.olonRecipient || 'olon-form';
+      const recipientEmail = form.dataset.olonRecipient ?? '';
+
+      setFormState(formId, { status: 'submitting', message: 'Invio in corso...' });
+
+      const raw: Record<string, string> = {};
+      new FormData(form).forEach((value, key) => {
+        raw[key] = String(value).trim();
+      });
+
+      const payload = {
+        ...raw,
+        recipientEmail,
+        page: window.location.pathname,
+        source: 'olon-form',
+        submittedAt: new Date().toISOString(),
+      };
+
+      const controller = new AbortController();
+      controllers.push(controller);
+
+      try {
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${API_KEY}`,
+            'Content-Type': 'application/json',
+            'Idempotency-Key': `form-${formId}-${Date.now()}`,
+          },
+          body: JSON.stringify(payload),
+          signal: controller.signal,
+        });
+
+        const body = (await response.json().catch(() => ({}))) as {
+          error?: string;
+          code?: string;
+        };
+
+        if (!response.ok) {
+          throw new Error(body.error ?? body.code ?? `Submit failed (${response.status})`);
+        }
+
+        setFormState(formId, {
+          status: 'success',
+          message: 'Richiesta inviata con successo.',
+        });
+        form.reset();
+      } catch (error: unknown) {
+        if (error instanceof Error && error.name === 'AbortError') return;
+        const message =
+          error instanceof Error ? error.message : 'Invio non riuscito. Riprova.';
+        setFormState(formId, { status: 'error', message });
+      }
+    }
+
+    type Listener = { form: HTMLFormElement; handler: (e: Event) => void };
+    const listeners: Listener[] = [];
+
+    forms.forEach((form) => {
+      const handler = (e: Event) => void handleSubmit(form, e as SubmitEvent);
+      form.addEventListener('submit', handler);
+      listeners.push({ form, handler });
+    });
+
+    return () => {
+      controllers.forEach((c) => c.abort());
+      listeners.forEach(({ form, handler }) => form.removeEventListener('submit', handler));
+    };
+  }, [options?.endpoint, setFormState]);
+
+  return { states };
 }
 
 END_OF_FILE_CONTENT
@@ -9708,7 +9899,7 @@ END_OF_FILE_CONTENT
 echo "Creating src/runtime.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/runtime.ts"
 import type { JsonPagesConfig, MenuConfig, PageConfig, SiteConfig, ThemeConfig } from '@/types';
-import { SECTION_SCHEMAS } from '@/lib/schemas';
+import { SECTION_SCHEMAS, SECTION_SUBMISSION_SCHEMAS } from '@/lib/schemas';
 import { getFilePages } from '@/lib/getFilePages';
 import siteData from '@/data/config/site.json';
 import menuData from '@/data/config/menu.json';
@@ -9727,56 +9918,41 @@ export const refDocuments = {
 export function getWebMcpBuildState(): {
   pages: Record<string, PageConfig>;
   schemas: JsonPagesConfig['schemas'];
+  submissionSchemas: JsonPagesConfig['submissionSchemas'];
   siteConfig: SiteConfig;
 } {
   return {
     pages,
     schemas: SECTION_SCHEMAS as unknown as JsonPagesConfig['schemas'],
+    submissionSchemas: SECTION_SUBMISSION_SCHEMAS as unknown as JsonPagesConfig['submissionSchemas'],
     siteConfig,
   };
 }
 
 END_OF_FILE_CONTENT
-mkdir -p "src/types"
 echo "Creating src/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/types.ts"
 import type { EmptyTenantData, EmptyTenantSettings } from '@/components/empty-tenant';
+import type { FormDemoData, FormDemoSettings } from '@/components/form-demo';
 
 export type SectionComponentPropsMap = {
   'empty-tenant': { data: EmptyTenantData; settings?: EmptyTenantSettings };
+  'form-demo': { data: FormDemoData; settings?: FormDemoSettings };
 };
 
 declare module '@olonjs/core' {
   export interface SectionDataRegistry {
     'empty-tenant': EmptyTenantData;
+    'form-demo': FormDemoData;
   }
   export interface SectionSettingsRegistry {
     'empty-tenant': EmptyTenantSettings;
+    'form-demo': FormDemoSettings;
   }
 }
 
 export * from '@olonjs/core';
 
-END_OF_FILE_CONTENT
-echo "Creating src/types/deploy.ts..."
-cat << 'END_OF_FILE_CONTENT' > "src/types/deploy.ts"
-export type StepId = 'commit' | 'push' | 'build' | 'live';
-
-export type StepState = 'pending' | 'active' | 'done';
-
-export type DeployPhase = 'idle' | 'running' | 'done' | 'error';
-
-export interface DeployStep {
-  id: StepId;
-  label: string;
-  verb: string;
-  poem: [string, string];
-  color: string;
-  glyph: string;
-  duration: number;
-}
-
-
 END_OF_FILE_CONTENT
 echo "Creating src/vite-env.d.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/vite-env.d.ts"
@@ -9968,6 +10144,7 @@ export default defineConfig({
               sendJson(res, 200, buildSiteManifest({
                 pages: buildState.pages,
                 schemas: buildState.schemas,
+                submissionSchemas: buildState.submissionSchemas,
                 siteConfig: buildState.siteConfig,
               }));
               return true;
@@ -9986,6 +10163,7 @@ export default defineConfig({
                 slug,
                 pageConfig,
                 schemas: buildState.schemas,
+                submissionSchemas: buildState.submissionSchemas,
                 siteConfig: buildState.siteConfig,
               }));
               return true;
@@ -10004,6 +10182,7 @@ export default defineConfig({
                 slug,
                 pageConfig,
                 schemas: buildState.schemas,
+                submissionSchemas: buildState.submissionSchemas,
                 siteConfig: buildState.siteConfig,
               }));
               return true;