@jsonpages/cli 3.0.63 → 3.0.64

package/assets/src_tenant_alpha.sh

@@ -36,14 +36,16 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
     "dev:clean": "vite --force",
     "build": "tsc && vite build",
     "dist": "bash ./src2Code.sh src index.html package.json",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "bake:email": "tsx scripts/bake-email.tsx",
+    "bakemail": "npm run bake:email --"
   },
   "dependencies": {
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/react": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@jsonpages/core": "^1.0.50",
+    "@jsonpages/core": "^1.0.51",
     "clsx": "^2.1.1",
     "lucide-react": "^0.474.0",
     "react": "^19.0.0",
@@ -62,7 +64,10 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.3",
-    "vite": "^6.0.11"
+    "vite": "^6.0.11",
+    "@react-email/components": "^0.0.41",
+    "@react-email/render": "^1.0.5",
+    "tsx": "^4.20.5"
   }
 }
 
@@ -213,7 +218,6 @@ console.log("🔍 DEBUG ENV:", {
 export default App;
 
 END_OF_FILE_CONTENT
-# SKIP: src/App.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/App_.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/App_.tsx"
 import { useState, useEffect } from 'react';
@@ -3085,17 +3089,248 @@ export type ProductTriadSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/save-drawer"
-# SKIP: src/components/save-drawer/DeployConnector.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/DeployConnector.tsx:Zone.Identifier:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/DeployNode.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/DeployNode.tsx:Zone.Identifier:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/DopaDrawer.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/DopaDrawer.tsx:Zone.Identifier:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/Visuals.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/Visuals.tsx:Zone.Identifier:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/saverStyle.css:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/components/save-drawer/saverStyle.css:Zone.Identifier:Zone.Identifier è un file binario e non può essere convertito in testo.
 mkdir -p "src/components/tiptap"
+echo "Creating src/components/tiptap/INTEGRATION.md..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/tiptap/INTEGRATION.md"
+# Tiptap Editorial — Integration Guide
+
+How to add the `tiptap` section to a new tenant.
+
+---
+
+## 1. Copy the component
+
+Copy the entire folder into the new tenant:
+
+```
+src/components/tiptap/
+  index.ts
+  types.ts
+  View.tsx
+```
+
+---
+
+## 2. Install npm dependencies
+
+Add to the tenant's `package.json` and run `npm install`:
+
+```json
+"@tiptap/extension-image": "^2.11.5",
+"@tiptap/extension-link": "^2.11.5",
+"@tiptap/react": "^2.11.5",
+"@tiptap/starter-kit": "^2.11.5",
+"react-markdown": "^9.0.1",
+"rehype-sanitize": "^6.0.0",
+"remark-gfm": "^4.0.1",
+"tiptap-markdown": "^0.8.10"
+```
+
+---
+
+## 3. Add CSS to `src/index.css`
+
+Two blocks are required — one for the public (visitor) view, one for the editor (studio) view.
+
+```css
+/* ==========================================================================
+   TIPTAP — Public content typography (visitor view)
+   ========================================================================== */
+.jp-tiptap-content > * + * { margin-top: 0.75em; }
+
+.jp-tiptap-content h1 { font-size: 2em;    font-weight: 700; line-height: 1.2; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-tiptap-content h2 { font-size: 1.5em;  font-weight: 700; line-height: 1.3; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-tiptap-content h3 { font-size: 1.25em; font-weight: 600; line-height: 1.4; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-tiptap-content h4 { font-size: 1em;    font-weight: 600; line-height: 1.5; margin-top: 1em;    margin-bottom: 0.25em; }
+
+.jp-tiptap-content p  { line-height: 1.7; }
+.jp-tiptap-content strong { font-weight: 700; }
+.jp-tiptap-content em     { font-style: italic; }
+.jp-tiptap-content s      { text-decoration: line-through; }
+
+.jp-tiptap-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
+.jp-tiptap-content a:hover { opacity: 0.8; }
+
+.jp-tiptap-content code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.875em;
+  background: color-mix(in oklch, var(--foreground) 8%, transparent);
+  border-radius: 0.25em;
+  padding: 0.1em 0.35em;
+}
+.jp-tiptap-content pre {
+  background: color-mix(in oklch, var(--background) 60%, black);
+  border-radius: 0.5em;
+  padding: 1em 1.25em;
+  overflow-x: auto;
+}
+.jp-tiptap-content pre code { background: none; padding: 0; }
+
+.jp-tiptap-content ul { list-style-type: disc;    padding-left: 1.625em; }
+.jp-tiptap-content ol { list-style-type: decimal; padding-left: 1.625em; }
+.jp-tiptap-content li { line-height: 1.7; margin-top: 0.25em; }
+.jp-tiptap-content li + li { margin-top: 0.25em; }
+
+.jp-tiptap-content blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1em;
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+.jp-tiptap-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
+.jp-tiptap-content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
+
+/* ==========================================================================
+   TIPTAP / PROSEMIRROR — Editor typography (studio view)
+   ========================================================================== */
+.jp-simple-editor .ProseMirror { outline: none; word-break: break-word; }
+.jp-simple-editor .ProseMirror > * + * { margin-top: 0.75em; }
+
+.jp-simple-editor .ProseMirror h1 { font-size: 2em;    font-weight: 700; line-height: 1.2; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-simple-editor .ProseMirror h2 { font-size: 1.5em;  font-weight: 700; line-height: 1.3; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-simple-editor .ProseMirror h3 { font-size: 1.25em; font-weight: 600; line-height: 1.4; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-simple-editor .ProseMirror h4 { font-size: 1em;    font-weight: 600; line-height: 1.5; margin-top: 1em;    margin-bottom: 0.25em; }
+
+.jp-simple-editor .ProseMirror p  { line-height: 1.7; }
+.jp-simple-editor .ProseMirror strong { font-weight: 700; }
+.jp-simple-editor .ProseMirror em     { font-style: italic; }
+.jp-simple-editor .ProseMirror s      { text-decoration: line-through; }
+
+.jp-simple-editor .ProseMirror a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
+.jp-simple-editor .ProseMirror a:hover { opacity: 0.8; }
+
+.jp-simple-editor .ProseMirror code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.875em;
+  background: color-mix(in oklch, var(--foreground) 8%, transparent);
+  border-radius: 0.25em;
+  padding: 0.1em 0.35em;
+}
+.jp-simple-editor .ProseMirror pre {
+  background: color-mix(in oklch, var(--background) 60%, black);
+  border-radius: 0.5em;
+  padding: 1em 1.25em;
+  overflow-x: auto;
+}
+.jp-simple-editor .ProseMirror pre code { background: none; padding: 0; }
+
+.jp-simple-editor .ProseMirror ul { list-style-type: disc;    padding-left: 1.625em; }
+.jp-simple-editor .ProseMirror ol { list-style-type: decimal; padding-left: 1.625em; }
+.jp-simple-editor .ProseMirror li { line-height: 1.7; margin-top: 0.25em; }
+.jp-simple-editor .ProseMirror li + li { margin-top: 0.25em; }
+
+.jp-simple-editor .ProseMirror blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1em;
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+.jp-simple-editor .ProseMirror hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
+
+.jp-simple-editor .ProseMirror img { max-width: 100%; height: auto; border-radius: 0.5rem; }
+.jp-simple-editor .ProseMirror img[data-uploading="true"] {
+  opacity: 0.6;
+  filter: grayscale(0.25);
+  outline: 2px dashed rgb(59 130 246 / 0.7);
+  outline-offset: 2px;
+}
+.jp-simple-editor .ProseMirror img[data-upload-error="true"] {
+  outline: 2px solid rgb(239 68 68 / 0.8);
+  outline-offset: 2px;
+}
+.jp-simple-editor .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+```
+
+---
+
+## 4. Register in `src/lib/schemas.ts`
+
+```ts
+import { TiptapSchema } from '@/components/tiptap';
+
+export const SECTION_SCHEMAS = {
+  // ... existing schemas
+  'tiptap': TiptapSchema,
+} as const;
+```
+
+---
+
+## 5. Register in `src/lib/addSectionConfig.ts`
+
+```ts
+const addableSectionTypes = [
+  // ... existing types
+  'tiptap',
+] as const;
+
+const sectionTypeLabels = {
+  // ... existing labels
+  'tiptap': 'Tiptap Editorial',
+};
+
+function getDefaultSectionData(type: string) {
+  switch (type) {
+    // ... existing cases
+    case 'tiptap': return { content: '# Post title\n\nStart writing in Markdown...' };
+  }
+}
+```
+
+---
+
+## 6. Register in `src/lib/ComponentRegistry.tsx`
+
+```tsx
+import { Tiptap } from '@/components/tiptap';
+
+export const ComponentRegistry = {
+  // ... existing components
+  'tiptap': Tiptap,
+};
+```
+
+---
+
+## 7. Register in `src/types.ts`
+
+```ts
+import type { TiptapData, TiptapSettings } from '@/components/tiptap';
+
+export type SectionComponentPropsMap = {
+  // ... existing entries
+  'tiptap': { data: TiptapData; settings?: TiptapSettings };
+};
+
+declare module '@jsonpages/core' {
+  export interface SectionDataRegistry {
+    // ... existing entries
+    'tiptap': TiptapData;
+  }
+  export interface SectionSettingsRegistry {
+    // ... existing entries
+    'tiptap': TiptapSettings;
+  }
+}
+```
+
+---
+
+## Notes
+
+- Typography uses tenant CSS variables (`--primary`, `--border`, `--muted-foreground`, `--font-mono`) — no hardcoded colors.
+- `@tailwindcss/typography` is **not** required; the CSS blocks above replace it.
+- The toolbar is admin-only (studio mode). In visitor mode, content is rendered via `ReactMarkdown`.
+- Underline is intentionally excluded: `tiptap-markdown` with `html: false` cannot round-trip `<u>` tags.
+
+END_OF_FILE_CONTENT
 echo "Creating src/components/tiptap/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/tiptap/View.tsx"
 import React from 'react';
@@ -3770,7 +4005,7 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
 // ── Public view ───────────────────────────────────────────────────────────────
 
 const PublicTiptapContent: React.FC<{ content: string }> = ({ content }) => (
-  <article className="prose max-w-none prose-zinc" data-jp-field="content">
+  <article className="jp-tiptap-content" data-jp-field="content">
     <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize]}>
       {content}
     </ReactMarkdown>
@@ -3782,12 +4017,14 @@ const PublicTiptapContent: React.FC<{ content: string }> = ({ content }) => (
 export const Tiptap: React.FC<{ data: TiptapData; settings?: TiptapSettings }> = ({ data }) => {
   const { mode } = useStudio();
   return (
-    <section className="w-full">
-      {mode === 'studio' ? (
-        <StudioTiptapEditor data={data} />
-      ) : (
-        <PublicTiptapContent content={data.content ?? ''} />
-      )}
+    <section className="w-full py-12">
+      <div className="container mx-auto px-6 max-w-3xl">
+        {mode === 'studio' ? (
+          <StudioTiptapEditor data={data} />
+        ) : (
+          <PublicTiptapContent content={data.content ?? ''} />
+        )}
+      </div>
     </section>
   );
 };
@@ -4393,7 +4630,6 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/menu.json"
   ]
 }
 END_OF_FILE_CONTENT
-# SKIP: src/data/config/menu.json:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/data/config/site.json..."
 cat << 'END_OF_FILE_CONTENT' > "src/data/config/site.json"
 {
@@ -4481,7 +4717,6 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/site.json"
   }
 }
 END_OF_FILE_CONTENT
-# SKIP: src/data/config/site.json:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/data/config/theme.json..."
 cat << 'END_OF_FILE_CONTENT' > "src/data/config/theme.json"
 {
@@ -4513,7 +4748,6 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/theme.json"
   }
 }
 END_OF_FILE_CONTENT
-# SKIP: src/data/config/theme.json:Zone.Identifier è un file binario e non può essere convertito in testo.
 mkdir -p "src/data/pages"
 echo "Creating src/data/pages/docs.json..."
 cat << 'END_OF_FILE_CONTENT' > "src/data/pages/docs.json"
@@ -5106,7 +5340,6 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/pages/home.json"
   ]
 }
 END_OF_FILE_CONTENT
-# SKIP: src/data/pages/home.json:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/data/pages/post.json..."
 cat << 'END_OF_FILE_CONTENT' > "src/data/pages/post.json"
 {
@@ -5121,7 +5354,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/pages/post.json"
       "id": "post-editorial-main",
       "type": "tiptap",
       "data": {
-        "content": "# JsonPages Cloud – Terms of Service & EULA\n\n---\n\n### **Last Updated:** March 2026\n\n### 1. THE SERVICE\n\nJsonPages provides a hybrid content management infrastructure consisting of:\n\n- **The Core:** An open-source library (@jsonpages/core) governed by the **MIT License**.\n- **The Cloud:** A proprietary SaaS platform (`cloud.jsonpages.io`) that provides the \"Git Bridge,\" Asset Pipeline, and Managed Infrastructure.\n\nBy using the Cloud Service, you agree to these terms.\n\n### 2. DATA SOVEREIGNTY & OWNERSHIP\n\n- **Your Content:** All data (JSON files), code, and assets managed through JsonPages remain your exclusive property. JsonPages acts only as an **orchestrator**.\n- **The Bridge:** You grant JsonPages the necessary permissions to perform Git operations (commits/pushes) on your behalf to your designated repositories (GitHub/GitLab).\n- **Portability:** Since your content is stored as flat JSON files in your own repository, you retain the right to migrate away from the Cloud Service at any time without data lock-in.\n- \n\n### 3. SUBSCRIPTIONS & ENTITLEMENTS\n\n- **Billing:** The Cloud Service is billed on a subscription basis (**Monthly Recurring Revenue**).\n- **Entitlements:** Each \"Project\" or \"Tenant\" consumes one entitlement. Active entitlements grant access to the Visual Studio (ICE) and the Cloud Save API.\n- **Third-Party Costs:** You are solely responsible for any costs incurred on third-party platforms (e.g., **Vercel** hosting, **GitHub** storage, **Cloudflare** workers).\n- \n\n### 4. ACCEPTABLE USE\n\nYou may not use JsonPages Cloud to:\n\n- Host or manage illegal, harmful, or offensive content.\n- Attempt to reverse-engineer the proprietary Cloud Bridge or bypass entitlement checks.\n- Interfere with the stability of the API for other users.\n- \n\n### 5. LIMITATION OF LIABILITY\n\n- **\"As-Is\" Basis:** The service is provided \"as-is.\" While we strive for 99.9% uptime, JsonPages is not liable for data loss resulting from Git conflicts, third-party outages (Vercel/GitHub), or user error.\n- **No Warranty:** We do not warrant that the service will be error-free or uninterrupted.\n- \n\n### 6. TERMINATION\n\n- **By You:** You can cancel your subscription at any time. Your Studio access will remain active until the end of the current billing cycle.\n- \n- **By Us:** We reserve the right to suspend accounts that violate these terms or fail to settle outstanding invoices.\n\n### 7. GOVERNING LAW\n\nThese terms are governed by the laws of **Italy/European Union**, without regard to conflict of law principles."
+        "content": "# JsonPages Cloud – Terms of Service & EULA\n\n---\n\n### **Last Updated:** March 2026\n\n### 1. THE SERVICE\n\nJsonPages provides a hybrid content management infrastructure consisting of:\n\n- **The Core:** An open-source library (@jsonpages/core) governed by the **MIT License**.\n- **The Cloud:** A proprietary SaaS platform (`cloud.jsonpages.io`) that provides the \"Git Bridge,\" Asset Pipeline, and Managed Infrastructure.\n\nBy using the Cloud Service, you agree to these terms.\n\n### 2. DATA SOVEREIGNTY & OWNERSHIP\n\n- **Your Content:** All data (JSON files), code, and assets managed through JsonPages remain your exclusive property. JsonPages acts only as an **orchestrator**.\n- **The Bridge:** You grant JsonPages the necessary permissions to perform Git operations (commits/pushes) on your behalf to your designated repositories (GitHub/GitLab).\n- **Portability:** Since your content is stored as flat JSON files in your own repository, you retain the right to migrate away from the Cloud Service at any time without data lock-in.\n- \n\n### 3. SUBSCRIPTIONS & ENTITLEMENTS\n\n- **Billing:** The Cloud Service is billed on a subscription basis (**Monthly Recurring Revenue**).\n- **Entitlements:** Each \"Project\" or \"Tenant\" consumes one entitlement. Active entitlements grant access to the Visual Studio (ICE) and the Cloud Save API.\n- **Third-Party Costs:** You are solely responsible for any costs incurred on third-party platforms (e.g., **Vercel** hosting, **GitHub** storage, **Cloudflare** workers).\n\n### 4. ACCEPTABLE USE\n\nYou may not use JsonPages Cloud to:\n\n- Host or manage illegal, harmful, or offensive content.\n- Attempt to reverse-engineer the proprietary Cloud Bridge or bypass entitlement checks.\n- Interfere with the stability of the API for other users.\n- \n\n### 5. LIMITATION OF LIABILITY\n\n- **\"As-Is\" Basis:** The service is provided \"as-is.\" While we strive for 99.9% uptime, JsonPages is not liable for data loss resulting from Git conflicts, third-party outages (Vercel/GitHub), or user error.\n- **No Warranty:** We do not warrant that the service will be error-free or uninterrupted.\n- \n\n### 6. TERMINATION\n\n- **By You:** You can cancel your subscription at any time. Your Studio access will remain active until the end of the current billing cycle.\n- \n- **By Us:** We reserve the right to suspend accounts that violate these terms or fail to settle outstanding invoices.\n\n### 7. GOVERNING LAW\n\nThese terms are governed by the laws of **Italy/European Union**, without regard to conflict of law principles."
       },
       "settings": {}
     }
@@ -5193,6 +5426,317 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/pages/servizi_trattamento.json"
     }
   ]
 }
+END_OF_FILE_CONTENT
+mkdir -p "src/emails"
+echo "Creating src/emails/LeadNotificationEmail.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/emails/LeadNotificationEmail.tsx"
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+type LeadData = Record<string, unknown>;
+
+type EmailTheme = {
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    accent?: string;
+    background?: string;
+    surface?: string;
+    surfaceAlt?: string;
+    text?: string;
+    textMuted?: string;
+    border?: string;
+  };
+  typography?: {
+    fontFamily?: {
+      primary?: string;
+      display?: string;
+      mono?: string;
+    };
+  };
+  borderRadius?: {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+  };
+};
+
+export type LeadNotificationEmailProps = {
+  tenantName: string;
+  correlationId: string;
+  replyTo?: string | null;
+  leadData: LeadData;
+  brandName?: string;
+  logoUrl?: string;
+  logoAlt?: string;
+  tagline?: string;
+  theme?: EmailTheme;
+};
+
+function safeString(value: unknown): string {
+  if (value == null) return "-";
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed || "-";
+  }
+  return JSON.stringify(value);
+}
+
+function flattenLeadData(data: LeadData) {
+  return Object.entries(data)
+    .filter(([key]) => !key.startsWith("_"))
+    .slice(0, 20)
+    .map(([key, value]) => ({ label: key, value: safeString(value) }));
+}
+
+export function LeadNotificationEmail({
+  tenantName,
+  correlationId,
+  replyTo,
+  leadData,
+  brandName,
+  logoUrl,
+  logoAlt,
+  tagline,
+  theme,
+}: LeadNotificationEmailProps) {
+  const fields = flattenLeadData(leadData);
+  const brandLabel = brandName || tenantName;
+
+  const colors = {
+    primary: theme?.colors?.primary || "#2D5016",
+    background: theme?.colors?.background || "#FAFAF5",
+    surface: theme?.colors?.surface || "#FFFFFF",
+    text: theme?.colors?.text || "#1C1C14",
+    textMuted: theme?.colors?.textMuted || "#5A5A4A",
+    border: theme?.colors?.border || "#D8D5C5",
+  };
+
+  const fonts = {
+    primary: theme?.typography?.fontFamily?.primary || "Inter, Arial, sans-serif",
+    display: theme?.typography?.fontFamily?.display || "Georgia, serif",
+  };
+
+  const radius = {
+    md: theme?.borderRadius?.md || "10px",
+    lg: theme?.borderRadius?.lg || "16px",
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>Nuovo lead ricevuto da {brandLabel}</Preview>
+      <Body style={{ backgroundColor: colors.background, color: colors.text, fontFamily: fonts.primary, padding: "24px" }}>
+        <Container style={{ backgroundColor: colors.surface, border: `1px solid ${colors.border}`, borderRadius: radius.lg, padding: "24px" }}>
+          <Section>
+            {logoUrl ? <Img src={logoUrl} alt={logoAlt || brandLabel} height="44" style={{ marginBottom: "8px" }} /> : null}
+            <Text style={{ color: colors.text, fontSize: "18px", fontWeight: 700, margin: "0 0 6px 0" }}>{brandLabel}</Text>
+            <Text style={{ color: colors.textMuted, marginTop: "0", marginBottom: "0" }}>{tagline || "Notifica automatica lead"}</Text>
+          </Section>
+
+          <Hr style={{ borderColor: colors.border, margin: "20px 0" }} />
+
+          <Heading as="h2" style={{ color: colors.text, margin: "0 0 12px 0", fontSize: "22px", fontFamily: fonts.display }}>
+            Nuovo lead da {tenantName}
+          </Heading>
+          <Text style={{ color: colors.textMuted, marginTop: "0", marginBottom: "16px" }}>Correlation ID: {correlationId}</Text>
+
+          <Section style={{ border: `1px solid ${colors.border}`, borderRadius: radius.md, padding: "12px" }}>
+            {fields.length === 0 ? (
+              <Text style={{ color: colors.textMuted, margin: 0 }}>Nessun campo lead disponibile.</Text>
+            ) : (
+              fields.map((field) => (
+                <Text key={field.label} style={{ margin: "0 0 8px 0", color: colors.text, fontSize: "14px", wordBreak: "break-word" }}>
+                  <strong>{field.label}:</strong> {field.value}
+                </Text>
+              ))
+            )}
+          </Section>
+
+          <Section style={{ marginTop: "18px" }}>
+            <Button
+              href={replyTo ? `mailto:${replyTo}` : "mailto:"}
+              style={{
+                backgroundColor: colors.primary,
+                color: "#ffffff",
+                borderRadius: radius.md,
+                textDecoration: "none",
+                padding: "12px 18px",
+                fontWeight: 600,
+              }}
+            >
+              Rispondi ora
+            </Button>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default LeadNotificationEmail;
+
+END_OF_FILE_CONTENT
+echo "Creating src/emails/LeadSenderConfirmationEmail.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/emails/LeadSenderConfirmationEmail.tsx"
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+type LeadData = Record<string, unknown>;
+
+type EmailTheme = {
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    accent?: string;
+    background?: string;
+    surface?: string;
+    surfaceAlt?: string;
+    text?: string;
+    textMuted?: string;
+    border?: string;
+  };
+  typography?: {
+    fontFamily?: {
+      primary?: string;
+      display?: string;
+      mono?: string;
+    };
+  };
+  borderRadius?: {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+  };
+};
+
+export type LeadSenderConfirmationEmailProps = {
+  tenantName: string;
+  correlationId: string;
+  leadData: LeadData;
+  brandName?: string;
+  logoUrl?: string;
+  logoAlt?: string;
+  tagline?: string;
+  theme?: EmailTheme;
+};
+
+function safeString(value: unknown): string {
+  if (value == null) return "-";
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed || "-";
+  }
+  return JSON.stringify(value);
+}
+
+function flattenLeadData(data: LeadData) {
+  const skipKeys = new Set(["recipientEmail", "tenant", "source", "submittedAt", "email_confirm"]);
+  return Object.entries(data)
+    .filter(([key]) => !key.startsWith("_") && !skipKeys.has(key))
+    .slice(0, 12)
+    .map(([key, value]) => ({ label: key, value: safeString(value) }));
+}
+
+export function LeadSenderConfirmationEmail({
+  tenantName,
+  correlationId,
+  leadData,
+  brandName,
+  logoUrl,
+  logoAlt,
+  tagline,
+  theme,
+}: LeadSenderConfirmationEmailProps) {
+  const fields = flattenLeadData(leadData);
+  const brandLabel = brandName || tenantName;
+
+  const colors = {
+    primary: theme?.colors?.primary || "#2D5016",
+    background: theme?.colors?.background || "#FAFAF5",
+    surface: theme?.colors?.surface || "#FFFFFF",
+    text: theme?.colors?.text || "#1C1C14",
+    textMuted: theme?.colors?.textMuted || "#5A5A4A",
+    border: theme?.colors?.border || "#D8D5C5",
+  };
+
+  const fonts = {
+    primary: theme?.typography?.fontFamily?.primary || "Inter, Arial, sans-serif",
+    display: theme?.typography?.fontFamily?.display || "Georgia, serif",
+  };
+
+  const radius = {
+    md: theme?.borderRadius?.md || "10px",
+    lg: theme?.borderRadius?.lg || "16px",
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>Conferma invio richiesta - {brandLabel}</Preview>
+      <Body style={{ backgroundColor: colors.background, color: colors.background, fontFamily: fonts.primary, padding: "24px" }}>
+        <Container style={{ backgroundColor: colors.primary, color: colors.background, border: `1px solid ${colors.border}`, borderRadius: radius.lg, padding: "24px" }}>
+          <Section>
+            {logoUrl ? <Img src={logoUrl} alt={logoAlt || brandLabel} height="44" style={{ marginBottom: "8px" }} /> : null}
+            <Text style={{ color: colors.background, fontSize: "18px", fontWeight: 700, margin: "0 0 6px 0" }}>{brandLabel}</Text>
+            <Text style={{ color: colors.background, marginTop: "0", marginBottom: "0" }}>{tagline || "Conferma automatica di ricezione"}</Text>
+          </Section>
+
+          <Hr style={{ borderColor: colors.border, margin: "20px 0" }} />
+
+          <Heading as="h2" style={{ color: colors.background, margin: "0 0 12px 0", fontSize: "22px", fontFamily: fonts.display }}>
+            Richiesta ricevuta
+          </Heading>
+          <Text style={{ color: colors.background, marginTop: "0", marginBottom: "16px" }}>
+            Grazie, abbiamo ricevuto la tua richiesta per {tenantName}. Ti risponderemo il prima possibile.
+          </Text>
+
+          <Section style={{ border: `1px solid ${colors.border}`, borderRadius: radius.md, padding: "12px" }}>
+            <Text style={{ margin: "0 0 8px 0", color: colors.background, fontWeight: 600 }}>Riepilogo inviato</Text>
+            {fields.length === 0 ? (
+              <Text style={{ color: colors.background, margin: 0 }}>Nessun dettaglio disponibile.</Text>
+            ) : (
+              fields.map((field) => (
+                <Text key={field.label} style={{ margin: "0 0 8px 0", color: colors.background, fontSize: "14px", wordBreak: "break-word" }}>
+                  <strong>{field.label}:</strong> {field.value}
+                </Text>
+              ))
+            )}
+          </Section>
+
+          <Hr style={{ borderColor: colors.border, margin: "20px 0 12px 0" }} />
+          <Text style={{ color: colors.background, fontSize: "12px", margin: 0 }}>Riferimento richiesta: {correlationId}</Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default LeadSenderConfirmationEmail;
+
 END_OF_FILE_CONTENT
 echo "Creating src/fonts.css..."
 cat << 'END_OF_FILE_CONTENT' > "src/fonts.css"
@@ -5412,6 +5956,61 @@ html {
   pointer-events: none;
 }
 
+/* ==========================================================================
+   TIPTAP — Public content typography (visitor view)
+   ReactMarkdown renders plain HTML; preflight resets it. Re-apply here.
+   ========================================================================== */
+.jp-tiptap-content > * + * { margin-top: 0.75em; }
+
+.jp-tiptap-content h1 { font-size: 2em;    font-weight: 700; line-height: 1.2; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-tiptap-content h2 { font-size: 1.5em;  font-weight: 700; line-height: 1.3; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-tiptap-content h3 { font-size: 1.25em; font-weight: 600; line-height: 1.4; margin-top: 1.25em; margin-bottom: 0.25em; }
+.jp-tiptap-content h4 { font-size: 1em;    font-weight: 600; line-height: 1.5; margin-top: 1em;    margin-bottom: 0.25em; }
+
+.jp-tiptap-content p  { line-height: 1.7; }
+
+.jp-tiptap-content strong { font-weight: 700; }
+.jp-tiptap-content em     { font-style: italic; }
+.jp-tiptap-content s      { text-decoration: line-through; }
+
+.jp-tiptap-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
+.jp-tiptap-content a:hover { opacity: 0.8; }
+
+.jp-tiptap-content code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.875em;
+  background: color-mix(in oklch, var(--foreground) 8%, transparent);
+  border-radius: 0.25em;
+  padding: 0.1em 0.35em;
+}
+.jp-tiptap-content pre {
+  background: color-mix(in oklch, var(--background) 60%, black);
+  border-radius: 0.5em;
+  padding: 1em 1.25em;
+  overflow-x: auto;
+}
+.jp-tiptap-content pre code { background: none; padding: 0; }
+
+.jp-tiptap-content ul { list-style-type: disc;    padding-left: 1.625em; }
+.jp-tiptap-content ol { list-style-type: decimal; padding-left: 1.625em; }
+.jp-tiptap-content li { line-height: 1.7; margin-top: 0.25em; }
+.jp-tiptap-content li + li { margin-top: 0.25em; }
+
+.jp-tiptap-content blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1em;
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+.jp-tiptap-content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.5em 0;
+}
+
+.jp-tiptap-content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
+
 /* ==========================================================================
    TIPTAP / PROSEMIRROR — Editor typography
    Tailwind preflight resets all heading/list styles. Re-apply here using
@@ -5556,7 +6155,6 @@ export const ComponentRegistry: {
 };
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/ComponentRegistry.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/lib/IconResolver.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/IconResolver.tsx"
 import React from 'react';
@@ -5615,7 +6213,6 @@ export const Icon: React.FC<IconProps> = ({ name, size = 20, className }) => {
 
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/IconResolver.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/lib/addSectionConfig.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/addSectionConfig.ts"
 import type { AddSectionConfig } from '@jsonpages/core';
@@ -5677,7 +6274,6 @@ export const addSectionConfig: AddSectionConfig = {
 };
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/addSectionConfig.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/lib/base-schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/base-schemas.ts"
 import { z } from 'zod';
@@ -5720,11 +6316,6 @@ export const CtaSchema = z.object({
 });
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/base-schemas.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/lib/cloudSaveStream.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/lib/cloudSaveStream.ts:Zone.Identifier:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/lib/deploySteps.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
-# SKIP: src/lib/deploySteps.ts:Zone.Identifier:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/lib/draftStorage.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/draftStorage.ts"
 /**
@@ -5753,7 +6344,6 @@ export function getHydratedData(
 }
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/draftStorage.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/lib/getFilePages.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/getFilePages.ts"
 /**
@@ -5802,7 +6392,6 @@ export function getFilePages(): Record<string, PageConfig> {
 }
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/getFilePages.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/lib/schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/schemas.ts"
 export { BaseSectionData, BaseArrayItem, BaseSectionSettingsSchema, CtaSchema } from './base-schemas';
@@ -5852,7 +6441,95 @@ export const SECTION_SCHEMAS = {
 export type SectionType = keyof typeof SECTION_SCHEMAS;
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/schemas.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
+echo "Creating src/lib/useFormSubmit.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/lib/useFormSubmit.ts"
+import { useState, useCallback } from 'react';
+
+export type SubmitStatus = 'idle' | 'submitting' | 'success' | 'error';
+
+interface UseFormSubmitOptions {
+  source: string;
+  tenantId: string;
+}
+
+export function useFormSubmit({ source, tenantId }: UseFormSubmitOptions) {
+  const [status, setStatus] = useState<SubmitStatus>('idle');
+  const [message, setMessage] = useState<string>('');
+
+  const submit = useCallback(async (
+    formData: FormData, 
+    recipientEmail: string, 
+    pageSlug: string, 
+    sectionId: string
+  ) => {
+    const cloudApiUrl = import.meta.env.VITE_JSONPAGES_CLOUD_URL as string | undefined;
+    const cloudApiKey = import.meta.env.VITE_JSONPAGES_API_KEY as string | undefined;
+
+    if (!cloudApiUrl || !cloudApiKey) {
+      setStatus('error');
+      setMessage('Configurazione API non disponibile. Riprova tra poco.');
+      return false;
+    }
+
+    // Trasformiamo FormData in un oggetto piatto per il payload JSON
+    const data: Record<string, any> = {};
+    formData.forEach((value, key) => {
+      data[key] = String(value).trim();
+    });
+
+    const payload = {
+      ...data,
+      recipientEmail,
+      page: pageSlug,
+      section: sectionId,
+      tenant: tenantId,
+      source: source,
+      submittedAt: new Date().toISOString(),
+    };
+
+    // Idempotency Key per evitare doppi invii accidentali
+    const idempotencyKey = `form-${sectionId}-${Date.now()}`;
+
+    setStatus('submitting');
+    setMessage('Invio in corso...');
+
+    try {
+      const apiBase = cloudApiUrl.replace(/\/$/, '');
+      const response = await fetch(`${apiBase}/forms/submit`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${cloudApiKey}`,
+          'Content-Type': 'application/json',
+          'Idempotency-Key': idempotencyKey,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      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})`);
+      }
+
+      setStatus('success');
+      setMessage('Richiesta inviata con successo. Ti risponderemo al più presto.');
+      return true;
+    } catch (error: unknown) {
+      const errorMsg = error instanceof Error ? error.message : 'Invio non riuscito. Riprova tra poco.';
+      setStatus('error');
+      setMessage(errorMsg);
+      return false;
+    }
+  }, [source, tenantId]);
+
+  const reset = useCallback(() => {
+    setStatus('idle');
+    setMessage('');
+  }, []);
+
+  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';
@@ -5863,7 +6540,6 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 END_OF_FILE_CONTENT
-# SKIP: src/lib/utils.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/main.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/main.tsx"
 import '@/types'; // TBP: load type augmentation from capsule-driven types
@@ -5882,7 +6558,6 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 
 END_OF_FILE_CONTENT
-# SKIP: src/main.tsx:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/main_.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/main_.tsx"
 import '@/types'; // TBP: load type augmentation from capsule-driven types
@@ -5997,7 +6672,6 @@ declare module '@jsonpages/core' {
 export * from '@jsonpages/core';
 
 END_OF_FILE_CONTENT
-# SKIP: src/types/deploy.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/vite-env.d.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/vite-env.d.ts"
 /// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonpages/cli",
-  "version": "3.0.63",
+  "version": "3.0.64",
   "description": "The Sovereign CLI Engine for JsonPages.",
   "type": "module",
   "bin": {