@olonjs/cli 3.0.127 → 3.0.129

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.116",
+    "@olonjs/core": "^1.0.120",
     "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"
@@ -2064,7 +2094,7 @@ if (targets.length === 0) {
 console.log(`[bake] Targets: ${targets.map((t) => t.slug).join(', ')}`);
 
 const ssrEntryUrl = pathToFileURL(path.resolve(root, 'dist-ssr/entry-ssg.js')).href;
-const { render, getCss, getPageMeta, getWebMcpBuildState } = await import(ssrEntryUrl);
+const { render, getCss, getRemoteStylesheets, getPageMeta, getWebMcpBuildState } = await import(ssrEntryUrl);
 
 const template = await fs.readFile(path.resolve(root, 'dist/index.html'), 'utf-8');
 const hasCommentMarker = template.includes('<!--app-html-->');
@@ -2075,6 +2105,9 @@ if (!hasCommentMarker && !hasRootDivMarker) {
 
 const inlinedCss = getCss();
 const styleTag = `<style data-bake="inline">${inlinedCss}</style>`;
+const remoteStylesheetTags = getRemoteStylesheets()
+  .map((href) => `<link rel="stylesheet" href="${escapeHtmlAttribute(href)}">`)
+  .join('\n  ');
 const webMcpBuildState = getWebMcpBuildState();
 
 for (const { slug } of targets) {
@@ -2148,7 +2181,7 @@ for (const { slug, out, depth } of targets) {
   ].join('\n  ');
 
   let bakedHtml = fixedTemplate
-    .replace('</head>', `  ${styleTag}\n  ${contractLinks}\n</head>`)
+    .replace('</head>', `  ${remoteStylesheetTags ? `${remoteStylesheetTags}\n  ` : ''}${styleTag}\n  ${contractLinks}\n</head>`)
     .replace(/<title>.*?<\/title>/, `<title>${safeTitle}</title>\n    ${metaTags}`);
 
   if (hasCommentMarker) {
@@ -2569,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 '@/lib/OlonFormsContext';
+import { iconMap } from '@/lib/IconResolver';
 
 import tenantCss from './index.css?inline';
 
@@ -2917,6 +2953,42 @@ function buildThemeFontVarsCss(input: unknown): string {
   return `:root{--theme-font-primary:${primary};--theme-font-serif:${serif};--theme-font-mono:${mono};}`;
 }
 
+const REMOTE_CSS_LINK_ATTR = 'data-jp-tenant-remote-css';
+
+function isRemoteStylesheetHref(value: string): boolean {
+  return /^https?:\/\//i.test(value.trim());
+}
+
+function extractLeadingRemoteCssImports(cssText: string): { hrefs: string[]; rest: string } {
+  const hrefs = new Set<string>();
+  const leadingTriviaPattern = /^(?:\s+|\/\*[\s\S]*?\*\/)*/;
+  const importPattern =
+    /^@import\s+url\(\s*(?:'([^']+)'|"([^"]+)"|([^'")\s][^)]*))\s*\)\s*([^;]*);/i;
+  let rest = cssText;
+
+  for (;;) {
+    const trivia = rest.match(leadingTriviaPattern);
+    if (trivia && trivia[0]) {
+      rest = rest.slice(trivia[0].length);
+    }
+
+    const match = rest.match(importPattern);
+    if (!match) break;
+
+    const href = (match[1] ?? match[2] ?? match[3] ?? '').trim();
+    const trailingDirectives = (match[4] ?? '').trim();
+
+    if (!isRemoteStylesheetHref(href) || trailingDirectives.length > 0) {
+      break;
+    }
+
+    hrefs.add(href);
+    rest = rest.slice(match[0].length);
+  }
+
+  return { hrefs: Array.from(hrefs), rest };
+}
+
 function setTenantPreviewReady(ready: boolean): void {
   if (typeof window !== 'undefined') {
     (window as Window & { __TENANT_PREVIEW_READY__?: boolean }).__TENANT_PREVIEW_READY__ = ready;
@@ -2927,6 +2999,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;
@@ -3331,6 +3404,39 @@ function App() {
     void runCloudSave(pendingCloudSave.current, false);
   }, [runCloudSave]);
 
+  const tenantCssParts = useMemo(() => extractLeadingRemoteCssImports(tenantCss), [tenantCss]);
+  const resolvedTenantCss = useMemo(
+    () => [buildThemeFontVarsCss(themeConfig), tenantCssParts.rest].filter(Boolean).join('\n'),
+    [tenantCssParts],
+  );
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return undefined;
+
+    const createdLinks: HTMLLinkElement[] = [];
+
+    tenantCssParts.hrefs.forEach((href) => {
+      const existing = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).find(
+        (link) => (link as HTMLLinkElement).href === href,
+      ) as HTMLLinkElement | undefined;
+      if (existing) return;
+
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      link.setAttribute(REMOTE_CSS_LINK_ATTR, href);
+      document.head.appendChild(link);
+      createdLinks.push(link);
+    });
+
+    return () => {
+      createdLinks.forEach((link) => {
+        if (link.getAttribute(REMOTE_CSS_LINK_ATTR) !== link.href) return;
+        if (link.parentNode) link.parentNode.removeChild(link);
+      });
+    };
+  }, [tenantCssParts]);
+
   const config: JsonPagesConfig = {
     tenantId: TENANT_ID,
     basePath: APP_BASE_PATH,
@@ -3341,7 +3447,8 @@ function App() {
     themeConfig,
     menuConfig,
     refDocuments,
-    themeCss: { tenant: `${buildThemeFontVarsCss(themeConfig)}\n${tenantCss}` },
+    iconRegistry: iconMap,
+    themeCss: { tenant: resolvedTenantCss },
     addSection: addSectionConfig,
     webmcp: {
       enabled: true,
@@ -3503,6 +3610,7 @@ function App() {
 
   return (
     <ThemeProvider>
+      <OlonFormsContext.Provider value={formStates}>
       <>
       {isCloudMode && showTopProgress ? (
         <>
@@ -3624,6 +3732,7 @@ function App() {
         onRetry={retryCloudSave}
       />
       </>
+      </OlonFormsContext.Provider>
     </ThemeProvider>
   );
 }
@@ -3634,91 +3743,90 @@ 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..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/empty-tenant/index.ts"
@@ -3735,7 +3843,6 @@ import { BaseSectionData } from '@/lib/base-schemas';
 export const EmptyTenantSchema = BaseSectionData.extend({
   title: z.string().optional().describe('ui:text'),
   description: z.string().optional().describe('ui:textarea'),
-
 });
 
 export const EmptyTenantSettingsSchema = z.object({});
@@ -3749,6 +3856,196 @@ 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 '@/lib/OlonFormsContext';
+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 '@/lib/base-schemas';
+
+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({});
+
+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..."
@@ -7662,6 +7959,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"
@@ -8044,6 +8368,39 @@ function buildThemeCssFromSot(theme: ThemeConfig): string {
   return `:root{${serialized}}`;
 }
 
+function isRemoteStylesheetHref(value: string): boolean {
+  return /^https?:\/\//i.test(value.trim());
+}
+
+function extractLeadingRemoteCssImports(cssText: string): { hrefs: string[]; rest: string } {
+  const hrefs = new Set<string>();
+  const leadingTriviaPattern = /^(?:\s+|\/\*[\s\S]*?\*\/)*/;
+  const importPattern =
+    /^@import(?:\s+url\(\s*(?:'([^']+)'|"([^"]+)"|([^'")\s][^)]*))\s*\)|\s*(['"])([^'"]+)\4)\s*([^;]*);/i;
+  let rest = cssText;
+
+  for (;;) {
+    const trivia = rest.match(leadingTriviaPattern);
+    if (trivia && trivia[0]) {
+      rest = rest.slice(trivia[0].length);
+    }
+
+    const match = rest.match(importPattern);
+    if (!match) break;
+
+    const href = (match[1] ?? match[2] ?? match[3] ?? match[5] ?? '').trim();
+    const trailingDirectives = (match[6] ?? '').trim();
+    if (!isRemoteStylesheetHref(href) || trailingDirectives.length > 0) {
+      break;
+    }
+
+    hrefs.add(href);
+    rest = rest.slice(match[0].length);
+  }
+
+  return { hrefs: Array.from(hrefs), rest };
+}
+
 function resolveTenantId(): string {
   const site: Record<string, unknown> = isRecord(siteConfig) ? siteConfig : {};
   const identityRaw = site['identity'];
@@ -8099,8 +8456,13 @@ export function render(slug: string): string {
 
 export function getCss(): string {
   const themeCss = buildThemeCssFromSot(themeConfig);
-  if (!themeCss) return tenantCss;
-  return `${themeCss}\n${tenantCss}`;
+  const { rest } = extractLeadingRemoteCssImports(tenantCss);
+  if (!themeCss) return rest;
+  return `${themeCss}\n${rest}`;
+}
+
+export function getRemoteStylesheets(): string[] {
+  return extractLeadingRemoteCssImports(tenantCss).hrefs;
 }
 
 export function getPageMeta(slug: string): { title: string; description: string } {
@@ -8127,6 +8489,7 @@ export function getWebMcpBuildState(): {
 }
 
 END_OF_FILE_CONTENT
+# SKIP: src/entry-ssg.tsx:Zone.Identifier is binary and cannot be embedded as text.
 echo "Creating src/fonts.css..."
 cat << 'END_OF_FILE_CONTENT' > "src/fonts.css"
 @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
@@ -9074,11 +9437,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
@@ -9096,10 +9461,11 @@ import {
   X,
   Sparkles,
   Zap,
+  Mail,
   type LucideIcon
 } from 'lucide-react';
 
-const iconMap = {
+export const iconMap = {
   'layers': Layers,
   'github': Github,
   'arrow-right': ArrowRight,
@@ -9110,6 +9476,7 @@ const iconMap = {
   'x': X,
   'sparkles': Sparkles,
   'zap': Zap,
+  'mail': Mail,
 } as const satisfies Record<string, LucideIcon>;
 
 export type IconName = keyof typeof iconMap;
@@ -9139,15 +9506,46 @@ export const Icon: React.FC<IconProps> = ({ name, size = 20, className }) => {
 
 
 
+END_OF_FILE_CONTENT
+echo "Creating src/lib/OlonFormsContext.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/lib/OlonFormsContext.ts"
+import { createContext, useContext } from 'react';
+
+export type FormStatus = 'idle' | 'submitting' | 'success' | 'error';
+
+export interface FormState {
+  status: FormStatus;
+  message: string;
+}
+
+const DEFAULT_FORM_STATE: FormState = { status: 'idle', message: '' };
+
+/**
+ * Context holding the submission state of every olon-managed form,
+ * keyed by the form's id attribute (or anchorId).
+ * Provided by App.tsx via useOlonForms().
+ */
+export const OlonFormsContext = createContext<Record<string, FormState>>({});
+
+/**
+ * Read the submission state for a specific form.
+ * @param formId - must match the id attribute on the <form> element.
+ */
+export function useFormState(formId: string): FormState {
+  const states = useContext(OlonFormsContext);
+  return states[formId] ?? DEFAULT_FORM_STATE;
+}
+
 END_OF_FILE_CONTENT
 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> {
@@ -9156,9 +9554,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 {};
   }
 }
 
@@ -9211,6 +9617,16 @@ export const CtaSchema = z.object({
   variant: z.enum(['primary', 'secondary', 'accent']).default('primary').describe('ui:select'),
 });
 
+/**
+ * Mixin for any section capsule that includes a contact form.
+ * Merge into the section data schema to expose recipientEmail
+ * as an editable field in the Studio inspector.
+ * The View must set data-olon-recipient={data.recipientEmail} on the <form>.
+ */
+export const WithFormRecipient = z.object({
+  recipientEmail: z.string().optional().describe('ui:text'),
+});
+
 END_OF_FILE_CONTENT
 echo "Creating src/lib/cloudSaveStream.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/cloudSaveStream.ts"
@@ -9461,9 +9877,11 @@ 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 } from '@/components/form-demo';
 
 export const SECTION_SCHEMAS = {
   'empty-tenant': EmptyTenantSchema,
+  'form-demo': FormDemoSchema,
 } as const;
 
 export type SectionType = keyof typeof SECTION_SCHEMAS;
@@ -9565,6 +9983,137 @@ export function useFormSubmit({ source, tenantId }: UseFormSubmitOptions) {
 
   return { submit, status, message, reset };
 }
+END_OF_FILE_CONTENT
+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 './OlonFormsContext';
+
+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
 echo "Creating src/lib/utils.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/utils.ts"
@@ -9630,17 +10179,21 @@ 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;
   }
 }