npm - @jsonpages/cli - Versions diffs - 3.0.58 → 3.0.60 - Mend

@jsonpages/cli 3.0.58 → 3.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/assets/src_tenant_alpha.sh +762 -1491
package/package.json +1 -1
package/src/index.js +16 -7

package/assets/src_tenant_alpha.sh CHANGED Viewed

@@ -32,22 +32,20 @@ cat << 'END_OF_FILE_CONTENT' > "src/App.tsx"
  * Data from getHydratedData (file-backed or draft); assets from public/assets/images.
  * Supports Hybrid Persistence: Local Filesystem (Dev) or Cloud Bridge (Prod).
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useState, useEffect } from 'react';
 import { JsonPagesEngine } from '@jsonpages/core';
-import type { JsonPagesConfig, LibraryImageEntry, ProjectState } from '@jsonpages/core';
+import type { LibraryImageEntry } from '@jsonpages/core';
 import { ComponentRegistry } from '@/lib/ComponentRegistry';
 import { SECTION_SCHEMAS } from '@/lib/schemas';
 import { addSectionConfig } from '@/lib/addSectionConfig';
 import { getHydratedData } from '@/lib/draftStorage';
+import type { JsonPagesConfig, ProjectState } from '@jsonpages/core';
 import type { SiteConfig, ThemeConfig, MenuConfig } from '@/types';
-import type { DeployPhase, StepId } from '@/types/deploy';
-import { DEPLOY_STEPS } from '@/lib/deploySteps';
-import { startCloudSaveStream } from '@/lib/cloudSaveStream';
 import siteData from '@/data/config/site.json';
 import themeData from '@/data/config/theme.json';
 import menuData from '@/data/config/menu.json';
 import { getFilePages } from '@/lib/getFilePages';
-import { DopaDrawer } from '@/components/save-drawer/DopaDrawer';
 import fontsCss from './fonts.css?inline';
 import tenantCss from './index.css?inline';
@@ -64,41 +62,13 @@ const filePages = getFilePages();
 const fileSiteConfig = siteData as unknown as SiteConfig;
 const MAX_UPLOAD_SIZE_BYTES = 5 * 1024 * 1024;
-interface CloudSaveUiState {
-  isOpen: boolean;
-  phase: DeployPhase;
-  currentStepId: StepId | null;
-  doneSteps: StepId[];
-  progress: number;
-  errorMessage?: string;
-  deployUrl?: string;
-}
 function getInitialData() {
   return getHydratedData(TENANT_ID, filePages, fileSiteConfig);
 }
-function getInitialCloudSaveUiState(): CloudSaveUiState {
-  return {
-    isOpen: false,
-    phase: 'idle',
-    currentStepId: null,
-    doneSteps: [],
-    progress: 0,
-  };
-}
-function stepProgress(doneSteps: StepId[]): number {
-  return Math.round((doneSteps.length / DEPLOY_STEPS.length) * 100);
-}
 function App() {
   const [{ pages, siteConfig }] = useState(getInitialData);
   const [assetsManifest, setAssetsManifest] = useState<LibraryImageEntry[]>([]);
-  const [cloudSaveUi, setCloudSaveUi] = useState<CloudSaveUiState>(getInitialCloudSaveUiState);
-  const activeCloudSaveController = useRef<AbortController | null>(null);
-  const pendingCloudSave = useRef<{ state: ProjectState; slug: string } | null>(null);
-  const isCloudMode = Boolean(CLOUD_API_URL && CLOUD_API_KEY);
   useEffect(() => {
     // In Cloud mode, listing assets might be different or disabled for MVP
@@ -108,111 +78,11 @@ function App() {
       .then((list: LibraryImageEntry[]) => setAssetsManifest(Array.isArray(list) ? list : []))
       .catch(() => setAssetsManifest([]));
   }, []);
-  useEffect(() => {
-    return () => {
-      activeCloudSaveController.current?.abort();
-    };
-  }, []);
-  const runCloudSave = useCallback(
-    async (
-      payload: { state: ProjectState; slug: string },
-      rejectOnError: boolean
-    ): Promise<void> => {
-      if (!CLOUD_API_URL || !CLOUD_API_KEY) {
-        const noCloudError = new Error('Cloud mode is not configured.');
-        if (rejectOnError) throw noCloudError;
-        return;
-      }
-      pendingCloudSave.current = payload;
-      activeCloudSaveController.current?.abort();
-      const controller = new AbortController();
-      activeCloudSaveController.current = controller;
-      setCloudSaveUi({
-        isOpen: true,
-        phase: 'running',
-        currentStepId: null,
-        doneSteps: [],
-        progress: 0,
-      });
-      try {
-        await startCloudSaveStream({
-          apiBaseUrl: CLOUD_API_URL,
-          apiKey: CLOUD_API_KEY,
-          path: `src/data/pages/${payload.slug}.json`,
-          content: payload.state.page,
-          message: `Content update for ${payload.slug} via Visual Editor`,
-          signal: controller.signal,
-          onStep: (event) => {
-            setCloudSaveUi((prev) => {
-              if (event.status === 'running') {
-                return {
-                  ...prev,
-                  isOpen: true,
-                  phase: 'running',
-                  currentStepId: event.id,
-                  errorMessage: undefined,
-                };
-              }
-              if (prev.doneSteps.includes(event.id)) {
-                return prev;
-              }
-              const nextDone = [...prev.doneSteps, event.id];
-              return {
-                ...prev,
-                isOpen: true,
-                phase: 'running',
-                currentStepId: event.id,
-                doneSteps: nextDone,
-                progress: stepProgress(nextDone),
-              };
-            });
-          },
-          onDone: (event) => {
-            const completed = DEPLOY_STEPS.map((step) => step.id);
-            setCloudSaveUi({
-              isOpen: true,
-              phase: 'done',
-              currentStepId: 'live',
-              doneSteps: completed,
-              progress: 100,
-              deployUrl: event.deployUrl,
-            });
-          },
-        });
-      } catch (error: unknown) {
-        const message = error instanceof Error ? error.message : 'Cloud save failed.';
-        setCloudSaveUi((prev) => ({
-          ...prev,
-          isOpen: true,
-          phase: 'error',
-          errorMessage: message,
-        }));
-        if (rejectOnError) throw new Error(message);
-      } finally {
-        if (activeCloudSaveController.current === controller) {
-          activeCloudSaveController.current = null;
-        }
-      }
-    },
-    []
-  );
-  const closeCloudDrawer = useCallback(() => {
-    setCloudSaveUi(getInitialCloudSaveUiState());
-  }, []);
-  const retryCloudSave = useCallback(() => {
-    if (!pendingCloudSave.current) return;
-    void runCloudSave(pendingCloudSave.current, false);
-  }, [runCloudSave]);
+console.log("🔍 DEBUG ENV:", {
+  URL: import.meta.env.VITE_JSONPAGES_CLOUD_URL,
+  KEY: import.meta.env.VITE_JSONPAGES_API_KEY ? "PRESENT" : "MISSING"
+});
   const config: JsonPagesConfig = {
     tenantId: TENANT_ID,
     registry: ComponentRegistry as JsonPagesConfig['registry'],
@@ -225,9 +95,30 @@ function App() {
     addSection: addSectionConfig,
     persistence: {
       async saveToFile(state: ProjectState, slug: string): Promise<void> {
         // ☁️ SCENARIO A: CLOUD BRIDGE (Production)
-        if (isCloudMode) {
-          await runCloudSave({ state, slug }, true);
+        if (CLOUD_API_URL && CLOUD_API_KEY) {
+          console.log(`☁️ Saving ${slug} via Cloud Bridge...`);
+          const res = await fetch(`${CLOUD_API_URL}/save`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${CLOUD_API_KEY}`
+            },
+            body: JSON.stringify({
+              // Mapping logical slug to physical path in repo
+              path: `src/data/pages/${slug}.json`,
+              // We save the page config specifically
+              content: state.page,
+              message: `Content update for ${slug} via Visual Editor`
+            }),
+          });
+          if (!res.ok) {
+            const err = await res.json().catch(() => ({}));
+            throw new Error(err.error || `Cloud save failed: ${res.status}`);
+          }
           return;
         }
@@ -273,35 +164,15 @@ function App() {
     },
   };
-  return (
-    <>
-      <JsonPagesEngine config={config} />
-      <DopaDrawer
-        isOpen={cloudSaveUi.isOpen}
-        phase={cloudSaveUi.phase}
-        currentStepId={cloudSaveUi.currentStepId}
-        doneSteps={cloudSaveUi.doneSteps}
-        progress={cloudSaveUi.progress}
-        errorMessage={cloudSaveUi.errorMessage}
-        deployUrl={cloudSaveUi.deployUrl}
-        onClose={closeCloudDrawer}
-        onRetry={retryCloudSave}
-      />
-    </>
-  );
+  return <JsonPagesEngine config={config} />;
 }
 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"
-/**
- * Thin Entry Point (Tenant).
- * Data from getHydratedData (file-backed or draft); assets from public/assets/images.
- * Supports Hybrid Persistence: Local Filesystem (Dev) or Cloud Bridge (Prod).
- */
+echo "Creating src/App_.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/App_.tsx"
 import { useState, useEffect } from 'react';
 import { JsonPagesEngine } from '@jsonpages/core';
 import type { LibraryImageEntry } from '@jsonpages/core';
@@ -320,10 +191,6 @@ import { getFilePages } from '@/lib/getFilePages';
 import fontsCss from './fonts.css?inline';
 import tenantCss from './index.css?inline';
-// Cloud Configuration (Injected by Vercel/Netlify Env Vars)
-const CLOUD_API_URL = import.meta.env.VITE_JSONPAGES_CLOUD_URL;
-const CLOUD_API_KEY = import.meta.env.VITE_JSONPAGES_API_KEY;
 const themeConfig = themeData as unknown as ThemeConfig;
 const menuConfig = menuData as unknown as MenuConfig;
 const TENANT_ID = 'alpha';
@@ -341,22 +208,16 @@ function App() {
   const [assetsManifest, setAssetsManifest] = useState<LibraryImageEntry[]>([]);
   useEffect(() => {
-    // In Cloud mode, listing assets might be different or disabled for MVP
-    // For now, we keep the local fetch which will fail gracefully on Vercel (404)
     fetch('/api/list-assets')
       .then((r) => (r.ok ? r.json() : []))
       .then((list: LibraryImageEntry[]) => setAssetsManifest(Array.isArray(list) ? list : []))
       .catch(() => setAssetsManifest([]));
   }, []);
-console.log("🔍 DEBUG ENV:", {
-  URL: import.meta.env.VITE_JSONPAGES_CLOUD_URL,
-  KEY: import.meta.env.VITE_JSONPAGES_API_KEY ? "PRESENT" : "MISSING"
-});
   const config: JsonPagesConfig = {
     tenantId: TENANT_ID,
     registry: ComponentRegistry as JsonPagesConfig['registry'],
-    schemas: SECTION_SCHEMAS as unknown as JsonPagesConfig['schemas'],
+    schemas:  SECTION_SCHEMAS  as unknown as JsonPagesConfig['schemas'],
     pages,
     siteConfig,
     themeConfig,
@@ -365,41 +226,11 @@ console.log("🔍 DEBUG ENV:", {
     addSection: addSectionConfig,
     persistence: {
       async saveToFile(state: ProjectState, slug: string): Promise<void> {
-        // ☁️ SCENARIO A: CLOUD BRIDGE (Production)
-        if (CLOUD_API_URL && CLOUD_API_KEY) {
-          console.log(`☁️ Saving ${slug} via Cloud Bridge...`);
-          const res = await fetch(`${CLOUD_API_URL}/save`, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${CLOUD_API_KEY}`
-            },
-            body: JSON.stringify({
-              // Mapping logical slug to physical path in repo
-              path: `src/data/pages/${slug}.json`,
-              // We save the page config specifically
-              content: state.page,
-              message: `Content update for ${slug} via Visual Editor`
-            }),
-          });
-          if (!res.ok) {
-            const err = await res.json().catch(() => ({}));
-            throw new Error(err.error || `Cloud save failed: ${res.status}`);
-          }
-          return;
-        }
-        // 💻 SCENARIO B: LOCAL FILESYSTEM (Development)
-        console.log(`💻 Saving ${slug} to Local Filesystem...`);
         const res = await fetch('/api/save-to-file', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ projectState: state, slug }),
         });
         const body = (await res.json().catch(() => ({}))) as { error?: string };
         if (!res.ok) throw new Error(body.error ?? `Save to file failed: ${res.status}`);
       },
@@ -408,24 +239,19 @@ console.log("🔍 DEBUG ENV:", {
       assetsBaseUrl: '/assets',
       assetsManifest,
       async onAssetUpload(file: File): Promise<string> {
-        // Note: Asset upload in Cloud Mode requires the R2 Bridge (Next Step in Roadmap)
-        // For now, this works in Local Mode.
         if (!file.type.startsWith('image/')) throw new Error('Invalid file type.');
         if (file.size > MAX_UPLOAD_SIZE_BYTES) throw new Error(`File too large. Max ${MAX_UPLOAD_SIZE_BYTES / 1024 / 1024}MB.`);
         const base64 = await new Promise<string>((resolve, reject) => {
           const reader = new FileReader();
           reader.onload  = () => resolve((reader.result as string).split(',')[1] ?? '');
           reader.onerror = () => reject(reader.error);
           reader.readAsDataURL(file);
         });
         const res = await fetch('/api/upload-asset', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ filename: file.name, mimeType: file.type || undefined, data: base64 }),
         });
         const body = (await res.json().catch(() => ({}))) as { url?: string; error?: string };
         if (!res.ok) throw new Error(body.error || `Upload failed: ${res.status}`);
         if (typeof body.url !== 'string') throw new Error('Invalid server response: missing url');
@@ -439,24 +265,6 @@ console.log("🔍 DEBUG ENV:", {
 export default App;
-END_OF_FILE_CONTENT
-echo "Creating src/_main.tsx..."
-cat << 'END_OF_FILE_CONTENT' > "src/_main.tsx"
-import '@/types'; // TBP: load type augmentation from capsule-driven types
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-// ... resto del file
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
 END_OF_FILE_CONTENT
 mkdir -p "src/components"
 echo "Creating src/components/NotFound.tsx..."
@@ -3234,1094 +3042,604 @@ export type ProductTriadSettings = z.infer<typeof BaseSectionSettingsSchema>;
 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';
-interface DeployConnectorProps {
-  fromState: StepState;
-  toState: StepState;
-  color: string;
-}
-export function DeployConnector({ fromState, toState, color }: DeployConnectorProps) {
-  const filled = fromState === 'done' && toState === 'done';
-  const filling = fromState === 'done' && toState === 'active';
-  const lit = filled || filling;
-  return (
-    <div className="jp-drawer-connector">
-      <div className="jp-drawer-connector-base" />
-      <div
-        className="jp-drawer-connector-fill"
-        style={{
-          background: `linear-gradient(90deg, ${color}cc, ${color}66)`,
-          width: filled ? '100%' : filling ? '100%' : '0%',
-          transition: filling ? 'width 2s cubic-bezier(0.4,0,0.2,1)' : 'none',
-          boxShadow: lit ? `0 0 8px ${color}77` : 'none',
-        }}
-      />
-      {filling && (
-        <div
-          className="jp-drawer-connector-orb"
-          style={{
-            background: color,
-            boxShadow: `0 0 14px ${color}, 0 0 28px ${color}88`,
-            animation: 'orb-travel 2s cubic-bezier(0.4,0,0.6,1) forwards',
-          }}
-        />
-      )}
-    </div>
-  );
-}
-END_OF_FILE_CONTENT
 # 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.
-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';
-interface DeployNodeProps {
-  step: DeployStep;
-  state: StepState;
-}
+# 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/View.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/tiptap/View.tsx"
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeSanitize from 'rehype-sanitize';
+import { useEditor, EditorContent } from '@tiptap/react';
+import type { Editor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import Underline from '@tiptap/extension-underline';
+import { Markdown } from 'tiptap-markdown';
+import {
+  Undo2,
+  Redo2,
+  Heading,
+  List,
+  ListOrdered,
+  Bold,
+  Italic,
+  Strikethrough,
+  Underline as UnderlineIcon,
+  Code2,
+  Quote,
+  SquareCode,
+  Link2,
+  Unlink2,
+  ImagePlus,
+  Eraser,
+} from 'lucide-react';
+import { STUDIO_EVENTS, useConfig, useStudio } from '@jsonpages/core';
+import type { TiptapData, TiptapSettings } from './types';
+const ToolbarButton: React.FC<{
+  active?: boolean;
+  title: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}> = ({ active = false, title, onClick, children }) => (
+  <button
+    type="button"
+    title={title}
+    onMouseDown={(e) => e.preventDefault()}
+    onClick={onClick}
+    className={[
+      'inline-flex h-7 min-w-7 items-center justify-center rounded-md border px-2 text-xs transition-colors',
+      active
+        ? 'bg-blue-600/25 border-blue-400/60 text-blue-100'
+        : 'bg-zinc-900 border-zinc-700 text-zinc-200 hover:bg-zinc-800',
+    ].join(' ')}
+  >
+    {children}
+  </button>
+);
-export function DeployNode({ step, state }: DeployNodeProps) {
-  const isActive = state === 'active';
-  const isDone = state === 'done';
-  const isPending = state === 'pending';
+const ToolbarSeparator: React.FC = () => <span className="mx-1 h-5 w-px bg-zinc-700" aria-hidden />;
+const UploadableImage = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      uploadId: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-upload-id'),
+        renderHTML: (attributes: Record<string, unknown>) =>
+          attributes.uploadId ? { 'data-upload-id': String(attributes.uploadId) } : {},
+      },
+      uploading: {
+        default: false,
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-uploading') === 'true',
+        renderHTML: (attributes: Record<string, unknown>) =>
+          attributes.uploading ? { 'data-uploading': 'true' } : {},
+      },
+      uploadError: {
+        default: false,
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-upload-error') === 'true',
+        renderHTML: (attributes: Record<string, unknown>) =>
+          attributes.uploadError ? { 'data-upload-error': 'true' } : {},
+      },
+      awaitingUpload: {
+        default: false,
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-awaiting-upload') === 'true',
+        renderHTML: (attributes: Record<string, unknown>) =>
+          attributes.awaitingUpload ? { 'data-awaiting-upload': 'true' } : {},
+      },
+    };
+  },
+});
-  return (
-    <div className="jp-drawer-node-wrap">
-      <div
-        className={`jp-drawer-node ${isPending ? 'jp-drawer-node-pending' : ''}`}
-        style={
-          {
-            background: isDone ? step.color : isActive ? 'rgba(0,0,0,0.5)' : undefined,
-            borderWidth: isDone ? 0 : 1,
-            borderColor: isActive ? `${step.color}80` : undefined,
-            boxShadow: isDone
-              ? `0 0 20px ${step.color}55, 0 0 40px ${step.color}22`
-              : isActive
-                ? `0 0 14px ${step.color}33`
-                : undefined,
-            animation: isActive ? 'node-glow 2s ease infinite' : undefined,
-            ['--glow-color' as string]: step.color,
-          } as CSSProperties
-        }
-      >
-        {isDone && (
-          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-label="Done">
-            <path
-              className="stroke-dash-30 animate-check-draw"
-              d="M5 13l4 4L19 7"
-              stroke="#0a0f1a"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        )}
+const getEditorMarkdown = (editor: Editor | null | undefined): string => {
+  const storage = editor?.storage as
+    | {
+        markdown?: {
+          getMarkdown?: () => string;
+        };
+      }
+    | undefined;
+  return storage?.markdown?.getMarkdown?.() ?? '';
+};
-        {isActive && (
-          <span
-            className="jp-drawer-node-glyph jp-drawer-node-glyph-active"
-            style={{ color: step.color, animation: 'glyph-rotate 9s linear infinite' }}
-            aria-hidden
-          >
-            {step.glyph}
-          </span>
-        )}
+const UPLOAD_PLACEHOLDER_SRC =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420'>
+      <rect width='1200' height='420' fill='#090B14' stroke='#3F3F46' stroke-width='3' stroke-dasharray='10 10' rx='12' />
+      <g font-family='Inter,Arial,sans-serif' text-anchor='middle' fill='#A1A1AA'>
+        <text x='600' y='190' font-size='30' font-weight='700'>Uploading image...</text>
+        <text x='600' y='235' font-size='22'>Please wait while we process your file</text>
+      </g>
+    </svg>`
+  );
-        {isPending && (
-          <span className="jp-drawer-node-glyph jp-drawer-node-glyph-pending" aria-hidden>
-            {step.glyph}
-          </span>
-        )}
+const UPLOAD_PICKER_PLACEHOLDER_SRC =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420'>
+      <rect width='1200' height='420' fill='#090B14' stroke='#3F3F46' stroke-width='3' stroke-dasharray='10 10' rx='12' />
+      <g font-family='Inter,Arial,sans-serif' text-anchor='middle'>
+        <text x='600' y='210' font-size='34' font-weight='700' fill='#E4E4E7'>Click to upload or drag and drop</text>
+        <text x='600' y='255' font-size='24' font-weight='500' fill='#A1A1AA'>Maximum 3 files, 5MB each.</text>
+      </g>
+    </svg>`
+  );
-        {isActive && (
-          <span
-            className="jp-drawer-node-ring"
-            style={{
-              inset: -7,
-              borderColor: `${step.color}50`,
-              animation: 'ring-expand 2s ease-out infinite',
-            }}
-          />
-        )}
-      </div>
+const updateImageByUploadId = (
+  editor: Editor,
+  uploadId: string,
+  patch: Record<string, unknown>
+): boolean => {
+  let targetPos: number | null = null;
+  editor.state.doc.descendants((node: { type: { name: string }; attrs?: Record<string, unknown> }, pos: number) => {
+    if (node.type.name === 'image' && node.attrs?.uploadId === uploadId) {
+      targetPos = pos;
+      return false;
+    }
+    return true;
+  });
+  if (targetPos == null) return false;
+  const current = editor.state.doc.nodeAt(targetPos);
+  if (!current) return false;
+  const attrs = { ...current.attrs, ...patch };
+  editor.view.dispatch(editor.state.tr.setNodeMarkup(targetPos, undefined, attrs));
+  return true;
+};
-      <span
-        className="jp-drawer-node-label"
-        style={{ color: isDone ? step.color : isActive ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.18)' }}
-      >
-        {step.label}
-      </span>
-    </div>
+const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
+  const { assets } = useConfig();
+  const rootRef = React.useRef<HTMLElement | null>(null);
+  const editorHostRef = React.useRef<HTMLDivElement | null>(null);
+  const editorInstanceRef = React.useRef<Editor | null>(null);
+  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
+  const pendingUploadsRef = React.useRef<Map<string, Promise<void>>>(new Map());
+  const pendingPickerUploadIdRef = React.useRef<string | null>(null);
+  const latestMarkdownRef = React.useRef<string>(data.content ?? '');
+  const latestEmittedMarkdownRef = React.useRef<string>(data.content ?? '');
+  const resolveSectionId = React.useCallback(() => {
+    const sectionEl =
+      rootRef.current ??
+      (editorHostRef.current?.closest('[data-section-id]') as HTMLElement | null);
+    rootRef.current = sectionEl;
+    return sectionEl?.getAttribute('data-section-id') ?? null;
+  }, []);
+  const emitInlineUpdate = React.useCallback((markdown: string) => {
+    latestMarkdownRef.current = markdown;
+    const sectionId = resolveSectionId();
+    if (!sectionId) return;
+    window.parent.postMessage(
+      {
+        type: STUDIO_EVENTS.INLINE_FIELD_UPDATE,
+        sectionId,
+        fieldKey: 'content',
+        value: markdown,
+      },
+      window.location.origin
+    );
+    latestEmittedMarkdownRef.current = markdown;
+  }, [resolveSectionId]);
+  const insertUploadPlaceholder = React.useCallback(
+    (uploadId: string, src: string, awaitingUpload: boolean) => {
+      const editor = editorInstanceRef.current;
+      if (!editor) return;
+      editor
+        .chain()
+        .focus()
+        .setImage({
+          src,
+          alt: 'upload-placeholder',
+          title: awaitingUpload ? 'Click to upload' : 'Uploading...',
+          uploadId,
+          uploading: !awaitingUpload,
+          awaitingUpload,
+          uploadError: false,
+        } as any)
+        .run();
+      emitInlineUpdate(getEditorMarkdown(editor));
+    },
+    [emitInlineUpdate]
   );
-}
-END_OF_FILE_CONTENT
-# 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.
-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 fontsCss from '@/fonts.css?inline';
-import saverStyleCss from './saverStyle.css?inline';
-import { DeployNode } from './DeployNode';
-import { DeployConnector } from './DeployConnector';
-import { BuildBars, ElapsedTimer, Particles, SuccessBurst } from './Visuals';
-interface DopaDrawerProps {
-  isOpen: boolean;
-  phase: 'idle' | 'running' | 'done' | 'error';
-  currentStepId: StepId | null;
-  doneSteps: StepId[];
-  progress: number;
-  errorMessage?: string;
-  deployUrl?: string;
-  onClose: () => void;
-  onRetry: () => void;
-}
+  const startUploadForId = React.useCallback(
+    async (uploadId: string, file: File) => {
+      const uploadAsset = assets?.onAssetUpload;
+      if (!uploadAsset) return;
+      const editor = editorInstanceRef.current;
+      if (!editor) return;
+      updateImageByUploadId(editor, uploadId, {
+        src: UPLOAD_PLACEHOLDER_SRC,
+        alt: file.name,
+        title: file.name,
+        uploading: true,
+        awaitingUpload: false,
+        uploadError: false,
+      });
+      const task = (async () => {
+        try {
+          const url = await uploadAsset(file);
+          const currentEditor = editorInstanceRef.current;
+          if (currentEditor) {
+            updateImageByUploadId(currentEditor, uploadId, {
+              src: url,
+              alt: file.name,
+              title: file.name,
+              uploadId: null,
+              uploading: false,
+              awaitingUpload: false,
+              uploadError: false,
+            });
+            emitInlineUpdate(getEditorMarkdown(currentEditor));
+          }
+        } catch (err) {
+          console.error('[tiptap] upload failed', err);
+          const currentEditor = editorInstanceRef.current;
+          if (currentEditor) {
+            updateImageByUploadId(currentEditor, uploadId, {
+              uploading: false,
+              awaitingUpload: false,
+              uploadError: true,
+            });
+          }
+        } finally {
+          pendingUploadsRef.current.delete(uploadId);
+        }
+      })();
+      pendingUploadsRef.current.set(uploadId, task);
+      await task;
+    },
+    [assets, emitInlineUpdate]
+  );
-export function DopaDrawer({
-  isOpen,
-  phase,
-  currentStepId,
-  doneSteps,
-  progress,
-  errorMessage,
-  deployUrl,
-  onClose,
-  onRetry,
-}: DopaDrawerProps) {
-  const [shadowMount, setShadowMount] = useState<HTMLElement | null>(null);
-  const [burst, setBurst] = useState(false);
-  const [countdown, setCountdown] = useState(3);
-  const isRunning = phase === 'running';
-  const isDone = phase === 'done';
-  const isError = phase === 'error';
+  const uploadImage = React.useCallback(
+    async (file: File) => {
+      const uploadId = crypto.randomUUID();
+      insertUploadPlaceholder(uploadId, UPLOAD_PLACEHOLDER_SRC, false);
+      await startUploadForId(uploadId, file);
+    },
+    [insertUploadPlaceholder, startUploadForId]
+  );
-  useEffect(() => {
-    const host = document.createElement('div');
-    host.setAttribute('data-jp-drawer-shadow-host', '');
+  const setFocusLock = React.useCallback((enabled: boolean) => {
+    const sectionEl = rootRef.current;
+    if (!sectionEl) return;
+    if (enabled) sectionEl.classList.add('jp-editorial-focus');
+    else sectionEl.classList.remove('jp-editorial-focus');
+  }, []);
-    const shadowRoot = host.attachShadow({ mode: 'open' });
-    const style = document.createElement('style');
-    style.textContent = `${fontsCss}\n${saverStyleCss}`;
+  const editor = useEditor(
+    {
+      extensions: [
+        StarterKit,
+        Link.configure({ openOnClick: false, autolink: true }),
+        Underline,
+        UploadableImage,
+        Markdown.configure({ html: false }),
+      ],
+      content: data.content ?? '',
+      autofocus: false,
+      editorProps: {
+        attributes: {
+          class:
+            'prose prose-invert max-w-none min-h-[220px] rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 text-zinc-100 outline-none',
+        },
+        handleDrop: (_view: unknown, event: DragEvent) => {
+          const file = event.dataTransfer?.files?.[0];
+          if (!file || !file.type.startsWith('image/') || !assets?.onAssetUpload) return false;
+          event.preventDefault();
+          void (async () => {
+            try {
+              await uploadImage(file);
+            } catch (err) {
+              console.error('[tiptap] upload failed on drop', err);
+            }
+          })();
+          return true;
+        },
+        handlePaste: (_view: unknown, event: ClipboardEvent) => {
+          const file = Array.from(event.clipboardData?.files ?? []).find((f: File) =>
+            f.type.startsWith('image/')
+          );
+          if (!file || !assets?.onAssetUpload) return false;
+          event.preventDefault();
+          void (async () => {
+            try {
+              await uploadImage(file);
+            } catch (err) {
+              console.error('[tiptap] upload failed on paste', err);
+            }
+          })();
+          return true;
+        },
+        handleClickOn: (_view: unknown, _pos: number, node: { type: { name: string }; attrs?: Record<string, unknown> }) => {
+          if (node.type.name !== 'image') return false;
+          if (node.attrs?.awaitingUpload !== true) return false;
+          const uploadId = typeof node.attrs?.uploadId === 'string' ? node.attrs.uploadId : null;
+          if (!uploadId) return false;
+          pendingPickerUploadIdRef.current = uploadId;
+          fileInputRef.current?.click();
+          return true;
+        },
+      },
+      onUpdate: ({ editor: currentEditor }: { editor: Editor }) => {
+        const markdown = getEditorMarkdown(currentEditor);
+        emitInlineUpdate(markdown);
+      },
+      onFocus: () => {
+        setFocusLock(true);
+      },
+      onBlur: ({ editor: currentEditor }: { editor: Editor }) => {
+        const markdown = getEditorMarkdown(currentEditor);
+        if (markdown !== latestEmittedMarkdownRef.current) {
+          emitInlineUpdate(markdown);
+        }
+        setFocusLock(false);
+      },
+    }
+  );
-    const mount = document.createElement('div');
-    shadowRoot.append(style, mount);
+  React.useEffect(() => {
+    const sectionEl = editorHostRef.current?.closest('[data-section-id]') as HTMLElement | null;
+    rootRef.current = sectionEl;
+  }, []);
-    document.body.appendChild(host);
-    setShadowMount(mount);
+  React.useEffect(() => {
+    editorInstanceRef.current = editor ?? null;
+  }, [editor]);
+  React.useEffect(() => {
+    const handleInlineFlushRequest = () => {
+      void (async () => {
+        const pending = Array.from(pendingUploadsRef.current.values());
+        if (pending.length > 0) {
+          await Promise.allSettled(pending);
+        }
+        const markdown = getEditorMarkdown(editorInstanceRef.current);
+        emitInlineUpdate(markdown);
+      })();
+    };
+    window.addEventListener(STUDIO_EVENTS.REQUEST_INLINE_FLUSH, handleInlineFlushRequest as EventListener);
     return () => {
-      setShadowMount(null);
-      host.remove();
+      window.removeEventListener(STUDIO_EVENTS.REQUEST_INLINE_FLUSH, handleInlineFlushRequest as EventListener);
     };
-  }, []);
+  }, [emitInlineUpdate]);
+  React.useEffect(() => {
+    if (!editor) return;
+    const nextMarkdown = data.content ?? '';
+    if (nextMarkdown === latestMarkdownRef.current) return;
+    editor.commands.setContent(nextMarkdown);
+    latestMarkdownRef.current = nextMarkdown;
+  }, [data.content, editor]);
+  React.useEffect(
+    () => () => {
+      const editorInstance = editorInstanceRef.current;
+      const markdown = getEditorMarkdown(editorInstance);
+      if (markdown !== latestEmittedMarkdownRef.current) {
+        emitInlineUpdate(markdown);
+      }
+      setFocusLock(false);
+    },
+    [emitInlineUpdate, setFocusLock]
+  );
-  useEffect(() => {
-    if (!isOpen) {
-      setBurst(false);
-      setCountdown(3);
+  const setParagraph = () => editor?.chain().focus().setParagraph().run();
+  const setHeading = (level: 1 | 2 | 3) => editor?.chain().focus().toggleHeading({ level }).run();
+  const setLink = () => {
+    if (!editor) return;
+    const prev = editor.getAttributes('link').href as string | undefined;
+    const href = window.prompt('URL', prev ?? 'https://');
+    if (href == null) return;
+    if (href.trim() === '') {
+      editor.chain().focus().unsetLink().run();
       return;
     }
-    if (isDone) setBurst(true);
-  }, [isDone, isOpen]);
-  useEffect(() => {
-    if (!isOpen || !isDone) return;
-    setCountdown(3);
-    const interval = window.setInterval(() => {
-      setCountdown((prev) => {
-        if (prev <= 1) {
-          window.clearInterval(interval);
-          onClose();
-          return 0;
+    editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
+  };
+  const clearFormatting = () => {
+    editor?.chain().focus().unsetAllMarks().clearNodes().run();
+  };
+  const onPickImageClick = () => {
+    if (pendingPickerUploadIdRef.current) return;
+    const uploadId = crypto.randomUUID();
+    pendingPickerUploadIdRef.current = uploadId;
+    insertUploadPlaceholder(uploadId, UPLOAD_PICKER_PLACEHOLDER_SRC, true);
+  };
+  const onFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    const pendingUploadId = pendingPickerUploadIdRef.current;
+    if (!file || !file.type.startsWith('image/') || !assets?.onAssetUpload) {
+      event.target.value = '';
+      return;
+    }
+    void (async () => {
+      try {
+        if (pendingUploadId) {
+          await startUploadForId(pendingUploadId, file);
+          pendingPickerUploadIdRef.current = null;
+        } else {
+          await uploadImage(file);
         }
-        return prev - 1;
-      });
-    }, 1000);
-    return () => window.clearInterval(interval);
-  }, [isDone, isOpen, onClose]);
-  const currentStep = useMemo(
-    () => DEPLOY_STEPS.find((step) => step.id === currentStepId) ?? null,
-    [currentStepId]
-  );
-  const activeColor = isDone ? '#34d399' : isError ? '#f87171' : (currentStep?.color ?? '#60a5fa');
-  const particleCount = isDone ? 40 : doneSteps.length === 3 ? 28 : doneSteps.length === 2 ? 16 : doneSteps.length === 1 ? 8 : 4;
-  const stepState = (index: number): StepState => {
-    const step = DEPLOY_STEPS[index];
-    if (doneSteps.includes(step.id)) return 'done';
-    if (phase === 'running' && currentStepId === step.id) return 'active';
-    return 'pending';
+      } catch (err) {
+        console.error('[tiptap] upload failed from picker', err);
+      } finally {
+        event.target.value = '';
+      }
+    })();
   };
+  const isActive = (name: string, attrs?: Record<string, unknown>) => editor?.isActive(name, attrs) ?? false;
-  if (!shadowMount || !isOpen || phase === 'idle') return null;
-  return createPortal(
-    <div className="jp-drawer-root">
-      <div
-        className="jp-drawer-overlay animate-fade-in"
-        onClick={isDone || isError ? onClose : undefined}
-        aria-hidden
-      />
-      <div
-        role="status"
-        aria-live="polite"
-        aria-label={isDone ? 'Deploy completed' : isError ? 'Deploy failed' : 'Deploying'}
-        className="jp-drawer-shell animate-drawer-up"
-        style={{ bottom: 'max(2.25rem, env(safe-area-inset-bottom))' }}
-      >
+  return (
+    <div
+      ref={editorHostRef}
+      data-jp-field="content"
+      className="space-y-3"
+    >
+      {editor && (
         <div
-          className="jp-drawer-card"
-          style={{
-            backgroundColor: 'hsl(222 18% 7%)',
-            boxShadow: `0 0 0 1px rgba(255,255,255,0.04), 0 -20px 60px rgba(0,0,0,0.6), 0 0 80px ${activeColor}0d`,
-            transition: 'box-shadow 1.2s ease',
-          }}
+          data-jp-ignore-select="true"
+          className="sticky top-2 z-[65] rounded-md border border-zinc-700 bg-zinc-950/95 p-2 shadow-lg backdrop-blur"
         >
-          <div
-            className="jp-drawer-ambient"
-            style={{
-              background: `radial-gradient(ellipse 70% 60% at 50% 110%, ${activeColor}12 0%, transparent 65%)`,
-              transition: 'background 1.5s ease',
-              animation: 'ambient-pulse 3.5s ease infinite',
-            }}
-            aria-hidden
-          />
-          {isDone && (
-            <div className="jp-drawer-shimmer" aria-hidden>
-              <div
-                className="jp-drawer-shimmer-bar"
-                style={{
-                  background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent)',
-                  animation: 'shimmer-sweep 1.4s 0.1s ease forwards',
-                }}
-              />
-            </div>
-          )}
-          <Particles count={particleCount} color={activeColor} />
-          {burst && <SuccessBurst />}
-          <div className="jp-drawer-content">
-            <div className="jp-drawer-header">
-              <div className="jp-drawer-header-left">
-                <div className="jp-drawer-status" style={{ color: activeColor }}>
-                  <span
-                    className="jp-drawer-status-dot"
-                    style={{
-                      background: activeColor,
-                      boxShadow: `0 0 6px ${activeColor}`,
-                      animation: isRunning ? 'ambient-pulse 1.5s ease infinite' : 'none',
-                    }}
-                    aria-hidden
-                  />
-                  {isDone ? 'Live' : isError ? 'Build failed' : currentStep?.verb ?? 'Saving'}
-                </div>
-                <div key={currentStep?.id ?? phase} className="jp-drawer-copy animate-text-in">
-                  {isDone ? (
-                    <div className="animate-success-pop">
-                      <p className="jp-drawer-copy-title jp-drawer-copy-title-lg">Your content is live.</p>
-                      <p className="jp-drawer-copy-sub">Deployed to production successfully</p>
-                    </div>
-                  ) : isError ? (
-                    <>
-                      <p className="jp-drawer-copy-title jp-drawer-copy-title-md">Deploy failed at build.</p>
-                      <p className="jp-drawer-copy-sub jp-drawer-copy-sub-error">{errorMessage ?? 'Check your Vercel logs or retry below'}</p>
-                    </>
-                  ) : currentStep ? (
-                    <>
-                      <p className="jp-drawer-poem-line jp-drawer-poem-line-1">{currentStep.poem[0]}</p>
-                      <p className="jp-drawer-poem-line jp-drawer-poem-line-2">{currentStep.poem[1]}</p>
-                    </>
-                  ) : null}
-                </div>
-              </div>
-              <div className="jp-drawer-right">
-                {isDone ? (
-                  <div className="jp-drawer-countdown-wrap animate-fade-up">
-                    <span className="jp-drawer-countdown-text" aria-live="polite">
-                      Chiusura in {countdown}s
-                    </span>
-                    <div className="jp-drawer-countdown-track">
-                      <div className="jp-drawer-countdown-bar countdown-bar" style={{ boxShadow: '0 0 6px #34d39988' }} />
-                    </div>
-                  </div>
-                ) : (
-                  <ElapsedTimer running={isRunning} />
-                )}
-              </div>
-            </div>
-            <div className="jp-drawer-track-row">
-              {DEPLOY_STEPS.map((step, i) => (
-                <div key={step.id} style={{ display: 'flex', alignItems: 'center', flex: i < DEPLOY_STEPS.length - 1 ? 1 : 'none' }}>
-                  <DeployNode step={step} state={stepState(i)} />
-                  {i < DEPLOY_STEPS.length - 1 && (
-                    <DeployConnector fromState={stepState(i)} toState={stepState(i + 1)} color={DEPLOY_STEPS[i + 1].color} />
-                  )}
-                </div>
-              ))}
-            </div>
-            <div className="jp-drawer-bars-wrap">
-              <BuildBars active={stepState(2) === 'active'} />
-            </div>
-            <div className="jp-drawer-separator" />
-            <div className="jp-drawer-footer">
-              <div className="jp-drawer-progress">
-                <div
-                  className="jp-drawer-progress-indicator"
-                  style={{
-                    width: `${Math.max(0, Math.min(100, progress))}%`,
-                    background: `linear-gradient(90deg, ${DEPLOY_STEPS[0].color}, ${activeColor})`,
-                  }}
-                />
-              </div>
-              <div className="jp-drawer-cta">
-                {isDone && (
-                  <div className="jp-drawer-btn-row animate-fade-up">
-                    <button type="button" className="jp-drawer-btn jp-drawer-btn-secondary" onClick={onClose}>
-                      Chiudi
-                    </button>
-                    <button
-                      type="button"
-                      className="jp-drawer-btn jp-drawer-btn-emerald"
-                      onClick={() => {
-                        if (deployUrl) window.open(deployUrl, '_blank', 'noopener,noreferrer');
-                      }}
-                      disabled={!deployUrl}
-                    >
-                      <span aria-hidden>↗</span> Open site
-                    </button>
-                  </div>
-                )}
-                {isError && (
-                  <div className="jp-drawer-btn-row animate-fade-up">
-                    <button type="button" className="jp-drawer-btn jp-drawer-btn-ghost" onClick={onClose}>
-                      Annulla
-                    </button>
-                    <button type="button" className="jp-drawer-btn jp-drawer-btn-destructive" onClick={onRetry}>
-                      Retry
-                    </button>
-                  </div>
-                )}
-                {isRunning && (
-                  <span className="jp-drawer-running-step" aria-hidden>
-                    {doneSteps.length + 1} / {DEPLOY_STEPS.length}
-                  </span>
-                )}
-              </div>
-            </div>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <ToolbarButton title="Undo" onClick={() => editor.chain().focus().undo().run()}>
+              <Undo2 size={14} />
+            </ToolbarButton>
+            <ToolbarButton title="Redo" onClick={() => editor.chain().focus().redo().run()}>
+              <Redo2 size={14} />
+            </ToolbarButton>
+            <ToolbarSeparator />
+            <ToolbarButton active={isActive('paragraph')} title="Paragraph" onClick={setParagraph}>
+              P
+            </ToolbarButton>
+            <ToolbarButton active={isActive('heading', { level: 1 })} title="Heading 1" onClick={() => setHeading(1)}>
+              H1
+            </ToolbarButton>
+            <ToolbarButton active={isActive('heading', { level: 2 })} title="Heading 2" onClick={() => setHeading(2)}>
+              H2
+            </ToolbarButton>
+            <ToolbarButton active={isActive('heading', { level: 3 })} title="Heading 3" onClick={() => setHeading(3)}>
+              H3
+            </ToolbarButton>
+            <ToolbarButton title="Headings" onClick={() => setHeading(2)}>
+              <Heading size={14} />
+            </ToolbarButton>
+            <ToolbarSeparator />
+            <ToolbarButton active={isActive('bold')} title="Bold" onClick={() => editor.chain().focus().toggleBold().run()}>
+              <Bold size={14} />
+            </ToolbarButton>
+            <ToolbarButton active={isActive('italic')} title="Italic" onClick={() => editor.chain().focus().toggleItalic().run()}>
+              <Italic size={14} />
+            </ToolbarButton>
+            <ToolbarButton active={isActive('underline')} title="Underline" onClick={() => editor.chain().focus().toggleUnderline().run()}>
+              <UnderlineIcon size={14} />
+            </ToolbarButton>
+            <ToolbarButton active={isActive('strike')} title="Strike" onClick={() => editor.chain().focus().toggleStrike().run()}>
+              <Strikethrough size={14} />
+            </ToolbarButton>
+            <ToolbarButton active={isActive('code')} title="Inline code" onClick={() => editor.chain().focus().toggleCode().run()}>
+              <Code2 size={14} />
+            </ToolbarButton>
+            <ToolbarSeparator />
+            <ToolbarButton active={isActive('bulletList')} title="Bullet list" onClick={() => editor.chain().focus().toggleBulletList().run()}>
+              <List size={14} />
+            </ToolbarButton>
+            <ToolbarButton active={isActive('orderedList')} title="Ordered list" onClick={() => editor.chain().focus().toggleOrderedList().run()}>
+              <ListOrdered size={14} />
+            </ToolbarButton>
+            <ToolbarButton active={isActive('blockquote')} title="Blockquote" onClick={() => editor.chain().focus().toggleBlockquote().run()}>
+              <Quote size={14} />
+            </ToolbarButton>
+            <ToolbarButton active={isActive('codeBlock')} title="Code block" onClick={() => editor.chain().focus().toggleCodeBlock().run()}>
+              <SquareCode size={14} />
+            </ToolbarButton>
+            <ToolbarSeparator />
+            <ToolbarButton active={isActive('link')} title="Set link" onClick={setLink}>
+              <Link2 size={14} />
+            </ToolbarButton>
+            <ToolbarButton title="Remove link" onClick={() => editor.chain().focus().unsetLink().run()}>
+              <Unlink2 size={14} />
+            </ToolbarButton>
+            <ToolbarButton title="Add image" onClick={onPickImageClick}>
+              <ImagePlus size={14} />
+            </ToolbarButton>
+            <ToolbarButton title="Clear formatting" onClick={clearFormatting}>
+              <Eraser size={14} />
+            </ToolbarButton>
           </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={onFileSelected}
+          />
         </div>
-      </div>
-    </div>,
-    shadowMount
-  );
-}
-END_OF_FILE_CONTENT
-# 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.
-echo "Creating src/components/save-drawer/Visuals.tsx..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/save-drawer/Visuals.tsx"
-import { useEffect, useRef, useState } from 'react';
-import type { CSSProperties } from 'react';
-interface Particle {
-  id: number;
-  x: number;
-  y: number;
-  size: number;
-  dur: number;
-  delay: number;
-}
-const PARTICLE_POOL: Particle[] = Array.from({ length: 44 }, (_, i) => ({
-  id: i,
-  x: 5 + Math.random() * 90,
-  y: 15 + Math.random() * 70,
-  size: 1.5 + Math.random() * 2.5,
-  dur: 2.8 + Math.random() * 3.5,
-  delay: Math.random() * 4,
-}));
-interface ParticlesProps {
-  count: number;
-  color: string;
-}
-export function Particles({ count, color }: ParticlesProps) {
-  return (
-    <div className="jp-drawer-particles" aria-hidden>
-      {PARTICLE_POOL.slice(0, count).map((particle) => (
-        <div
-          key={particle.id}
-          className="jp-drawer-particle"
-          style={{
-            left: `${particle.x}%`,
-            bottom: `${particle.y}%`,
-            width: particle.size,
-            height: particle.size,
-            background: color,
-            boxShadow: `0 0 ${particle.size * 3}px ${color}`,
-            opacity: 0,
-            animation: `particle-float ${particle.dur}s ${particle.delay}s ease-out infinite`,
-          }}
-        />
-      ))}
+      )}
+      <EditorContent editor={editor} className="jp-simple-editor" />
     </div>
   );
-}
-const BAR_H = [0.45, 0.75, 0.55, 0.9, 0.65, 0.8, 0.5, 0.72, 0.6, 0.85, 0.42, 0.7];
-interface BuildBarsProps {
-  active: boolean;
-}
-export function BuildBars({ active }: BuildBarsProps) {
-  if (!active) return <div className="jp-drawer-bars-placeholder" />;
+};
-  return (
-    <div className="jp-drawer-bars" aria-hidden>
-      {BAR_H.map((height, i) => (
-        <div
-          key={i}
-          className="jp-drawer-bar"
-          style={{
-            height: `${height * 100}%`,
-            animation: `bar-eq ${0.42 + i * 0.06}s ${i * 0.04}s ease-in-out infinite alternate`,
-          }}
-        />
-      ))}
-    </div>
-  );
-}
+const PublicTiptapContent: React.FC<{ content: string }> = ({ content }) => (
+  <article className="prose max-w-none prose-zinc" data-jp-field="content">
+    <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize]}>
+      {content}
+    </ReactMarkdown>
+  </article>
+);
-const BURST_COLORS = ['#34d399', '#60a5fa', '#a78bfa', '#f59e0b', '#f472b6'];
+export const Tiptap: React.FC<{ data: TiptapData; settings?: TiptapSettings }> = ({ data }) => {
+  const { mode } = useStudio();
+  const isStudio = mode === 'studio';
-export function SuccessBurst() {
   return (
-    <div className="jp-drawer-burst" aria-hidden>
-      {Array.from({ length: 16 }).map((_, i) => (
-        <div
-          key={i}
-          className="jp-drawer-burst-dot"
-          style={
-            {
-              background: BURST_COLORS[i % BURST_COLORS.length],
-              ['--r' as string]: `${i * 22.5}deg`,
-              animation: `burst-ray 0.85s ${i * 0.03}s cubic-bezier(0,0.6,0.5,1) forwards`,
-              transform: `rotate(${i * 22.5}deg)`,
-              transformOrigin: '50% 50%',
-              opacity: 0,
-            } as CSSProperties
-          }
-        />
-      ))}
-    </div>
+    <section
+      style={
+        {
+          '--local-bg': 'var(--background)',
+          '--local-surface': 'var(--card)',
+          '--local-text': 'var(--foreground)',
+          '--local-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      className="py-12 bg-[var(--local-bg)]"
+    >
+      <div className="container mx-auto px-6 max-w-4xl">
+        {isStudio ? <StudioTiptapEditor data={data} /> : <PublicTiptapContent content={data.content ?? ''} />}
+      </div>
+    </section>
   );
-}
-interface ElapsedTimerProps {
-  running: boolean;
-}
-export function ElapsedTimer({ running }: ElapsedTimerProps) {
-  const [elapsed, setElapsed] = useState(0);
-  const startRef = useRef<number | null>(null);
-  const rafRef = useRef<number | null>(null);
-  useEffect(() => {
-    if (!running) return;
-    if (!startRef.current) startRef.current = performance.now();
-    const tick = () => {
-      if (!startRef.current) return;
-      setElapsed(Math.floor((performance.now() - startRef.current) / 1000));
-      rafRef.current = requestAnimationFrame(tick);
-    };
-    rafRef.current = requestAnimationFrame(tick);
-    return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-    };
-  }, [running]);
-  const sec = String(elapsed % 60).padStart(2, '0');
-  const min = String(Math.floor(elapsed / 60)).padStart(2, '0');
-  return <span className="jp-drawer-elapsed" aria-live="off">{min}:{sec}</span>;
-}
+};
 END_OF_FILE_CONTENT
-# 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.
-echo "Creating src/components/save-drawer/saverStyle.css..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/save-drawer/saverStyle.css"
-/* Save Drawer strict_full isolated stylesheet */
-.jp-drawer-root {
-  --background: 222 18% 6%;
-  --foreground: 210 20% 96%;
-  --card: 222 16% 8%;
-  --card-foreground: 210 20% 96%;
-  --primary: 0 0% 95%;
-  --primary-foreground: 222 18% 6%;
-  --secondary: 220 14% 13%;
-  --secondary-foreground: 210 20% 96%;
-  --destructive: 0 72% 51%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 220 14% 13%;
-  --radius: 0.6rem;
-  font-family: 'Geist', system-ui, sans-serif;
-}
-.jp-drawer-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2147483600;
-  background: rgb(0 0 0 / 0.4);
-  backdrop-filter: blur(2px);
-}
-.jp-drawer-shell {
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: 2147483601;
-  display: flex;
-  justify-content: center;
-  padding: 0 1rem;
-}
-.jp-drawer-card {
-  position: relative;
-  width: 100%;
-  max-width: 31rem;
-  overflow: hidden;
-  border-radius: 1rem;
-  border: 1px solid rgb(255 255 255 / 0.07);
-}
-.jp-drawer-ambient {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-.jp-drawer-shimmer {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-.jp-drawer-shimmer-bar {
-  position: absolute;
-  inset-block: 0;
-  width: 35%;
-}
-.jp-drawer-content {
-  position: relative;
-  z-index: 10;
-  padding: 2rem 2rem 1.75rem;
-}
-.jp-drawer-header {
-  margin-bottom: 1.5rem;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-.jp-drawer-header-left {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-}
-.jp-drawer-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  transition: color 0.5s;
-}
-.jp-drawer-status-dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 9999px;
-  display: inline-block;
-}
-.jp-drawer-copy {
-  min-height: 52px;
-}
-.jp-drawer-copy-title {
-  margin: 0;
-  color: white;
-  line-height: 1.25;
-  font-weight: 600;
-}
-.jp-drawer-copy-title-lg {
-  font-size: 1.125rem;
-}
-.jp-drawer-copy-title-md {
-  font-size: 1rem;
-}
-.jp-drawer-copy-sub {
-  margin: 0.125rem 0 0;
-  color: rgb(255 255 255 / 0.4);
-  font-size: 0.875rem;
-}
-.jp-drawer-copy-sub-error {
-  color: rgb(255 255 255 / 0.35);
-}
-.jp-drawer-poem-line {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 300;
-  line-height: 1.5;
-}
-.jp-drawer-poem-line-1 {
-  color: rgb(255 255 255 / 0.55);
-}
-.jp-drawer-poem-line-2 {
-  color: rgb(255 255 255 / 0.3);
-}
-.jp-drawer-right {
-  margin-left: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-.jp-drawer-countdown-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.5rem;
-}
-.jp-drawer-countdown-text {
-  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #34d399;
-}
-.jp-drawer-countdown-track {
-  width: 6rem;
-  height: 0.125rem;
-  border-radius: 9999px;
-  overflow: hidden;
-  background: rgb(255 255 255 / 0.1);
-}
-.jp-drawer-countdown-bar {
-  width: 100%;
-  height: 100%;
-  border-radius: 9999px;
-  background: #34d399;
-}
-.jp-drawer-track-row {
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-}
-.jp-drawer-bars-wrap {
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-}
-.jp-drawer-separator {
-  margin-bottom: 1rem;
-  height: 1px;
-  width: 100%;
-  border: 0;
-  background: rgb(255 255 255 / 0.06);
-}
-.jp-drawer-footer {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-.jp-drawer-progress {
-  flex: 1;
-  height: 2px;
-  border-radius: 9999px;
-  overflow: hidden;
-  background: rgb(255 255 255 / 0.06);
-}
-.jp-drawer-progress-indicator {
-  height: 100%;
-}
-.jp-drawer-cta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-.jp-drawer-running-step {
-  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.75rem;
-  color: rgb(255 255 255 / 0.2);
-}
-.jp-drawer-btn-row {
-  display: flex;
-  gap: 0.5rem;
-}
-.jp-drawer-btn {
-  border: 1px solid transparent;
-  border-radius: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  line-height: 1;
-  height: 2.25rem;
-  padding: 0 0.75rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-}
-.jp-drawer-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.jp-drawer-btn-secondary {
-  background: hsl(var(--secondary));
-  color: hsl(var(--secondary-foreground));
-}
-.jp-drawer-btn-secondary:hover {
-  filter: brightness(1.08);
-}
-.jp-drawer-btn-emerald {
-  background: #34d399;
-  color: #18181b;
-  font-weight: 600;
-}
-.jp-drawer-btn-emerald:hover {
-  background: #6ee7b7;
-}
-.jp-drawer-btn-ghost {
-  background: transparent;
-  color: rgb(255 255 255 / 0.9);
-}
-.jp-drawer-btn-ghost:hover {
-  background: rgb(255 255 255 / 0.08);
-}
-.jp-drawer-btn-destructive {
-  background: hsl(var(--destructive));
-  color: hsl(var(--destructive-foreground));
-}
-.jp-drawer-btn-destructive:hover {
-  filter: brightness(1.06);
-}
-.jp-drawer-node-wrap {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.625rem;
-}
-.jp-drawer-node {
-  position: relative;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 9999px;
-  border: 1px solid transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.5s;
-}
-.jp-drawer-node-pending {
-  border-color: rgb(255 255 255 / 0.08);
-  background: rgb(255 255 255 / 0.02);
-}
-.jp-drawer-node-glyph {
-  font-size: 1.125rem;
-  line-height: 1;
-}
-.jp-drawer-node-glyph-active {
-  display: inline-block;
-}
-.jp-drawer-node-glyph-pending {
-  color: rgb(255 255 255 / 0.15);
-}
-.jp-drawer-node-ring {
-  position: absolute;
-  border-radius: 9999px;
-  border: 1px solid transparent;
-}
-.jp-drawer-node-label {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  transition: color 0.5s;
-}
-.jp-drawer-connector {
-  position: relative;
-  z-index: 0;
-  flex: 1;
-  height: 2px;
-  margin-top: -24px;
-}
-.jp-drawer-connector-base {
-  position: absolute;
-  inset: 0;
-  border-radius: 9999px;
-  background: rgb(255 255 255 / 0.08);
-}
-.jp-drawer-connector-fill {
-  position: absolute;
-  left: 0;
-  right: auto;
-  top: 0;
-  bottom: 0;
-  border-radius: 9999px;
-}
-.jp-drawer-connector-orb {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 10px;
-  height: 10px;
-  border-radius: 9999px;
-}
-.jp-drawer-particles {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-.jp-drawer-particle {
-  position: absolute;
-  border-radius: 9999px;
-}
-.jp-drawer-bars {
-  height: 1.75rem;
-  display: flex;
-  align-items: flex-end;
-  gap: 3px;
-}
-.jp-drawer-bars-placeholder {
-  height: 1.75rem;
-}
-.jp-drawer-bar {
-  width: 3px;
-  border-radius: 2px;
-  background: #f59e0b;
-  transform-origin: bottom;
-}
-.jp-drawer-burst {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-.jp-drawer-burst-dot {
-  position: absolute;
-  width: 5px;
-  height: 5px;
-  border-radius: 9999px;
-}
-.jp-drawer-elapsed {
-  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.75rem;
-  letter-spacing: 0.1em;
-  color: rgb(255 255 255 / 0.25);
-}
-/* Animation helper classes */
-.animate-drawer-up { animation: drawer-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.animate-fade-in { animation: fade-in 0.25s ease forwards; }
-.animate-fade-up { animation: fade-up 0.35s ease forwards; }
-.animate-text-in { animation: text-in 0.3s ease forwards; }
-.animate-success-pop { animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
-.countdown-bar { animation: countdown-drain 3s linear forwards; }
-.stroke-dash-30 {
-  stroke-dasharray: 30;
-  stroke-dashoffset: 30;
-}
-.animate-check-draw {
-  animation: check-draw 0.4s 0.05s ease forwards;
-}
-@keyframes check-draw {
-  to { stroke-dashoffset: 0; }
-}
-@keyframes drawer-up {
-  from { transform: translateY(100%); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fade-up {
-  from { opacity: 0; transform: translateY(8px); }
-  to { transform: translateY(0); opacity: 1; }
-}
-@keyframes text-in {
-  from { opacity: 0; transform: translateX(-6px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes success-pop {
-  0% { transform: scale(0.88); opacity: 0; }
-  60% { transform: scale(1.04); }
-  100% { transform: scale(1); opacity: 1; }
-}
-@keyframes ambient-pulse {
-  0%, 100% { opacity: 0.3; }
-  50% { opacity: 0.65; }
-}
-@keyframes shimmer-sweep {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(250%); }
-}
-@keyframes node-glow {
-  0%, 100% { box-shadow: 0 0 12px var(--glow-color,#60a5fa55); }
-  50% { box-shadow: 0 0 28px var(--glow-color,#60a5fa88), 0 0 48px var(--glow-color,#60a5fa22); }
-}
-@keyframes glyph-rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-@keyframes ring-expand {
-  from { transform: scale(1); opacity: 0.7; }
-  to { transform: scale(2.1); opacity: 0; }
-}
+echo "Creating src/components/tiptap/index.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/tiptap/index.ts"
+export * from './View';
+export * from './schema';
+export * from './types';
-@keyframes orb-travel {
-  from { left: 0%; }
-  to { left: calc(100% - 10px); }
-}
+END_OF_FILE_CONTENT
+echo "Creating src/components/tiptap/schema.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/tiptap/schema.ts"
+import { z } from 'zod';
+import { BaseSectionData } from '@/lib/base-schemas';
-@keyframes particle-float {
-  0% { transform: translateY(0) scale(1); opacity: 0; }
-  15% { opacity: 1; }
-  100% { transform: translateY(-90px) scale(0.3); opacity: 0; }
-}
+export const TiptapSchema = BaseSectionData.extend({
+  content: z.string().default('').describe('ui:editorial-markdown'),
+});
-@keyframes bar-eq {
-  from { transform: scaleY(0.4); }
-  to { transform: scaleY(1); }
-}
+export const TiptapSettingsSchema = z.object({});
-@keyframes burst-ray {
-  0% { transform: rotate(var(--r, 0deg)) translateX(0); opacity: 1; }
-  100% { transform: rotate(var(--r, 0deg)) translateX(56px); opacity: 0; }
-}
+END_OF_FILE_CONTENT
+echo "Creating src/components/tiptap/types.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/tiptap/types.ts"
+import { z } from 'zod';
+import { TiptapSchema, TiptapSettingsSchema } from './schema';
-@keyframes countdown-drain {
-  from { width: 100%; }
-  to { width: 0%; }
-}
+export type TiptapData = z.infer<typeof TiptapSchema>;
+export type TiptapSettings = z.infer<typeof TiptapSettingsSchema>;
 END_OF_FILE_CONTENT
-# 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/ui"
 echo "Creating src/components/ui/checkbox.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/checkbox.tsx"
@@ -5608,6 +4926,93 @@ 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"
+{
+  "id": "post-page",
+  "slug": "post",
+  "meta": {
+    "title": "Post",
+    "description": "Smoke test page for header + tiptap + footer flow."
+  },
+  "sections": [
+    {
+      "id": "post-editorial-main",
+      "type": "tiptap",
+      "data": {
+        "content": "![Screenshot 2026-03-05 at 14-45-10 JsonPages.png](/assets/images/1772721027290-Screenshot_2026-03-05_at_14-45-10_JsonPages.png \"Screenshot 2026-03-05 at 14-45-10 JsonPages.png\")## qefqfqfqf**header / tiptap / footer** smoke flow.\n\nInline **editing** in Studio\n\n## `Markdown persistence on Save`\n\n- Safe render on public route"
+      },
+      "settings": {}
+    }
+  ]
+}
+END_OF_FILE_CONTENT
+mkdir -p "src/data/pages/servizi"
+echo "Creating src/data/pages/servizi/trattamento.json..."
+cat << 'END_OF_FILE_CONTENT' > "src/data/pages/servizi/trattamento.json"
+{
+  "id": "servizi-trattamento-page",
+  "slug": "servizi/trattamento",
+  "meta": {
+    "title": "Servizi - Trattamento",
+    "description": "Pagina nested di smoke test per verificare routing visitor/admin/preview."
+  },
+  "sections": [
+    {
+      "id": "hero-servizi-trattamento",
+      "type": "hero",
+      "data": {
+        "badge": "Smoke Test",
+        "title": "Trattamento",
+        "titleHighlight": "Pagina Nested",
+        "description": "Questa pagina verifica il supporto ai nested slug su filesystem e router.",
+        "ctas": [
+          {
+            "id": "cta-home",
+            "label": "Torna Home",
+            "href": "/",
+            "variant": "primary"
+          }
+        ]
+      },
+      "settings": {}
+    }
+  ]
+}
+END_OF_FILE_CONTENT
+echo "Creating src/data/pages/servizi_trattamento.json..."
+cat << 'END_OF_FILE_CONTENT' > "src/data/pages/servizi_trattamento.json"
+{
+  "id": "servizi-trattamento-page",
+  "slug": "servizi/trattamento",
+  "meta": {
+    "title": "Servizi - Trattamento",
+    "description": "Pagina nested di smoke test per verificare routing visitor/admin/preview."
+  },
+  "sections": [
+    {
+      "id": "hero-servizi-trattamento",
+      "type": "hero",
+      "data": {
+        "badge": "Smoke Test",
+        "title": "Trattamentos",
+        "titleHighlight": "Pagina Nested",
+        "description": "Questa pagina verifica il supporto ai nested slug su filesystem e router.",
+        "ctas": [
+          {
+            "id": "cta-home",
+            "label": "Torna Home",
+            "href": "/",
+            "variant": "primary"
+          }
+        ]
+      },
+      "settings": {}
+    }
+  ]
+}
+END_OF_FILE_CONTENT
 echo "Creating src/fonts.css..."
 cat << 'END_OF_FILE_CONTENT' > "src/fonts.css"
 @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600&display=swap');
@@ -5815,6 +5220,40 @@ html {
   opacity: 0;
 }
+/* Editorial focus lock: avoid section reselection while selecting text in inline editor. */
+[data-section-id].jp-editorial-focus [data-jp-section-overlay] {
+  border-color: transparent !important;
+  background: transparent !important;
+}
+[data-section-id].jp-editorial-focus [data-jp-section-overlay] > div {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+/* Tiptap simple-editor-like behavior in Studio */
+.jp-simple-editor .ProseMirror:focus {
+  outline: none;
+}
+.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;
+}
 END_OF_FILE_CONTENT
@@ -5840,6 +5279,7 @@ import { GitSection }       from '@/components/git-section';
 import { Devex }            from '@/components/devex';
 import { CliSection }       from '@/components/cli-section';
 import { DocsLayout }       from '@/components/docs-layout';
+import { Tiptap }           from '@/components/tiptap';
 import type { SectionType }              from '@jsonpages/core';
 import type { SectionComponentPropsMap } from '@/types';
@@ -5865,6 +5305,7 @@ export const ComponentRegistry: {
   'devex':             Devex,
   'cli-section':       CliSection,
   'docs-layout':       DocsLayout,
+  'tiptap':            Tiptap,
 };
 END_OF_FILE_CONTENT
@@ -5936,7 +5377,7 @@ const addableSectionTypes = [
   'hero', 'feature-grid', 'code-block', 'problem-statement',
   'pillars-grid', 'arch-layers', 'product-triad', 'pa-section',
   'philosophy', 'cta-banner', 'image-break',
-  'cms-ice', 'git-section', 'devex', 'cli-section', 'docs-layout',
+  'cms-ice', 'git-section', 'devex', 'cli-section', 'docs-layout', 'tiptap',
 ] as const;
 const sectionTypeLabels: Record<string, string> = {
@@ -5956,6 +5397,7 @@ const sectionTypeLabels: Record<string, string> = {
   'devex':             'Developer Experience',
   'cli-section':       'CLI Tool',
   'docs-layout':       'Documentation Layout',
+  'tiptap':            'Tiptap Editorial',
 };
 function getDefaultSectionData(type: string): Record<string, unknown> {
@@ -5976,6 +5418,7 @@ function getDefaultSectionData(type: string): Record<string, unknown> {
     case 'devex':             return { title: 'Developer Experience', description: '', features: [] };
     case 'cli-section':       return { title: 'CLI Tool', description: '', steps: [] };
     case 'docs-layout':       return { pageTitle: 'Documentation', pageSubtitle: '', version: 'v1.0', groups: [] };
+    case 'tiptap':            return { content: '# Post title\n\nStart writing in Markdown...' };
     default:                  return {};
   }
 }
@@ -6031,176 +5474,8 @@ 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.
-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
 # 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.
-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
 # 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..."
@@ -6235,24 +5510,37 @@ END_OF_FILE_CONTENT
 echo "Creating src/lib/getFilePages.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/getFilePages.ts"
 /**
- * Page registry from src/data/pages/*.json.
- * Add a .json file in that directory to add a page; no manual list in App.tsx.
+ * Page registry loaded from nested JSON files under src/data/pages.
+ * Add a JSON file in that directory tree to register a page; no manual list in App.tsx.
  */
 import type { PageConfig } from '@/types';
 function slugFromPath(filePath: string): string {
-  const base = filePath.split('/').pop() ?? filePath;
-  const name = base.replace(/\.json$/i, '').trim();
-  return name || 'page';
+  const normalizedPath = filePath.replace(/\\/g, '/');
+  const match = normalizedPath.match(/\/data\/pages\/(.+)\.json$/i);
+  const rawSlug = match?.[1] ?? normalizedPath.split('/').pop()?.replace(/\.json$/i, '') ?? '';
+  const canonical = rawSlug
+    .split('/')
+    .map((segment) => segment.trim())
+    .filter(Boolean)
+    .join('/');
+  return canonical || 'home';
 }
 export function getFilePages(): Record<string, PageConfig> {
-  const glob = import.meta.glob<{ default: unknown }>('@/data/pages/*.json', { eager: true });
+  const glob = import.meta.glob<{ default: unknown }>('@/data/pages/**/*.json', { eager: true });
   const bySlug = new Map<string, PageConfig>();
-  for (const [path, mod] of Object.entries(glob)) {
+  const entries = Object.entries(glob).sort(([a], [b]) => a.localeCompare(b));
+  for (const [path, mod] of entries) {
     const slug = slugFromPath(path);
     const raw = mod?.default;
-    if (raw == null || typeof raw !== 'object') continue;
+    if (raw == null || typeof raw !== 'object') {
+      console.warn(`[tenant-alpha:getFilePages] Ignoring invalid page module at "${path}".`);
+      continue;
+    }
+    if (bySlug.has(slug)) {
+      console.warn(`[tenant-alpha:getFilePages] Duplicate slug "${slug}" at "${path}". Keeping latest match.`);
+    }
     bySlug.set(slug, raw as PageConfig);
   }
   const slugs = Array.from(bySlug.keys()).sort((a, b) =>
@@ -6290,6 +5578,7 @@ import { GitSectionSchema }       from '@/components/git-section';
 import { DevexSchema }            from '@/components/devex';
 import { CliSectionSchema }       from '@/components/cli-section';
 import { DocsLayoutSchema }       from '@/components/docs-layout';
+import { TiptapSchema }           from '@/components/tiptap';
 export const SECTION_SCHEMAS = {
   'header':            HeaderSchema,
@@ -6310,6 +5599,7 @@ export const SECTION_SCHEMAS = {
   'devex':             DevexSchema,
   'cli-section':       CliSectionSchema,
   'docs-layout':       DocsLayoutSchema,
+  'tiptap':            TiptapSchema,
 } as const;
 export type SectionType = keyof typeof SECTION_SCHEMAS;
@@ -6346,6 +5636,24 @@ 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
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+// ... resto del file
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+END_OF_FILE_CONTENT
 # SKIP: src/registry-types.ts è un file binario e non può essere convertito in testo.
 mkdir -p "src/server"
 mkdir -p "src/types"
@@ -6370,6 +5678,7 @@ import type { GitSectionData,       GitSectionSettings }       from '@/component
 import type { DevexData,            DevexSettings }            from '@/components/devex';
 import type { CliSectionData,       CliSectionSettings }       from '@/components/cli-section';
 import type { DocsLayoutData,       DocsLayoutSettings }       from '@/components/docs-layout';
+import type { TiptapData,           TiptapSettings }           from '@/components/tiptap';
 export type SectionComponentPropsMap = {
   'header':            { data: HeaderData;           settings?: HeaderSettings;           menu: MenuItem[] };
@@ -6390,6 +5699,7 @@ export type SectionComponentPropsMap = {
   'devex':             { data: DevexData;             settings?: DevexSettings             };
   'cli-section':       { data: CliSectionData;        settings?: CliSectionSettings        };
   'docs-layout':       { data: DocsLayoutData;        settings?: DocsLayoutSettings        };
+  'tiptap':            { data: TiptapData;            settings?: TiptapSettings            };
 };
 declare module '@jsonpages/core' {
@@ -6412,6 +5722,7 @@ declare module '@jsonpages/core' {
     'devex':             DevexData;
     'cli-section':       CliSectionData;
     'docs-layout':       DocsLayoutData;
+    'tiptap':            TiptapData;
   }
   export interface SectionSettingsRegistry {
     'header':            HeaderSettings;
@@ -6432,30 +5743,12 @@ declare module '@jsonpages/core' {
     'devex':             DevexSettings;
     'cli-section':       CliSectionSettings;
     'docs-layout':       DocsLayoutSettings;
+    'tiptap':            TiptapSettings;
   }
 }
 export * from '@jsonpages/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
 # SKIP: src/types/deploy.ts:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/vite-env.d.ts..."
@@ -6469,26 +5762,4 @@ declare module '*?inline' {
-END_OF_FILE_CONTENT
-echo "Creating vercel.json..."
-cat << 'END_OF_FILE_CONTENT' > "vercel.json"
-{
-  "rewrites": [
-    {
-      "source": "/(.*)",
-      "destination": "/index.html"
-    }
-  ],
-  "headers": [
-    {
-      "source": "/assets/(.*)",
-      "headers": [
-        {
-          "key": "Cache-Control",
-          "value": "public, max-age=31536000, immutable"
-        }
-      ]
-    }
-  ]
-}
 END_OF_FILE_CONTENT