@jsonpages/cli 3.0.56 → 3.0.58

package/assets/src_tenant_alpha.sh

@@ -32,20 +32,22 @@ 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 { useState, useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { JsonPagesEngine } from '@jsonpages/core';
-import type { LibraryImageEntry } from '@jsonpages/core';
+import type { JsonPagesConfig, LibraryImageEntry, ProjectState } 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';
@@ -62,13 +64,41 @@ 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
@@ -78,11 +108,111 @@ function App() {
       .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"
-});
+
+  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]);
+
   const config: JsonPagesConfig = {
     tenantId: TENANT_ID,
     registry: ComponentRegistry as JsonPagesConfig['registry'],
@@ -95,30 +225,9 @@ 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}`);
-          }
+        if (isCloudMode) {
+          await runCloudSave({ state, slug }, true);
           return;
         }
 
@@ -164,15 +273,35 @@ console.log("🔍 DEBUG ENV:", {
     },
   };
 
-  return <JsonPagesEngine config={config} />;
+  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}
+      />
+    </>
+  );
 }
 
 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"
+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).
+ */
 import { useState, useEffect } from 'react';
 import { JsonPagesEngine } from '@jsonpages/core';
 import type { LibraryImageEntry } from '@jsonpages/core';
@@ -191,6 +320,10 @@ 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';
@@ -208,16 +341,22 @@ 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,
@@ -226,11 +365,41 @@ function App() {
     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}`);
       },
@@ -239,19 +408,24 @@ function App() {
       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');
@@ -265,6 +439,24 @@ function App() {
 
 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..."
@@ -3041,111 +3233,1200 @@ export type ProductTriadData = z.infer<typeof ProductTriadSchema>;
 export type ProductTriadSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
-mkdir -p "src/components/ui"
-echo "Creating src/components/ui/checkbox.tsx..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/ui/checkbox.tsx"
-"use client"
-
-import * as React from "react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+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;
+}
 
-import { cn } from "@/lib/utils"
-import { CheckIcon } from "lucide-react"
+export function DeployConnector({ fromState, toState, color }: DeployConnectorProps) {
+  const filled = fromState === 'done' && toState === 'done';
+  const filling = fromState === 'done' && toState === 'active';
+  const lit = filled || filling;
 
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
-      >
-        <CheckIcon
+    <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',
+          }}
         />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
+      )}
+    </div>
+  );
 }
 
-export { Checkbox }
+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;
+}
 
+export function DeployNode({ step, state }: DeployNodeProps) {
+  const isActive = state === 'active';
+  const isDone = state === 'done';
+  const isPending = state === 'pending';
 
+  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>
+        )}
 
+        {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>
+        )}
 
+        {isPending && (
+          <span className="jp-drawer-node-glyph jp-drawer-node-glyph-pending" aria-hidden>
+            {step.glyph}
+          </span>
+        )}
 
-END_OF_FILE_CONTENT
-echo "Creating src/components/ui/input.tsx..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/ui/input.tsx"
-import * as React from "react"
+        {isActive && (
+          <span
+            className="jp-drawer-node-ring"
+            style={{
+              inset: -7,
+              borderColor: `${step.color}50`,
+              animation: 'ring-expand 2s ease-out infinite',
+            }}
+          />
+        )}
+      </div>
 
-import { cn } from "@/lib/utils"
+      <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>
+  );
+}
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+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;
 }
 
-export { Input }
+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';
 
+  useEffect(() => {
+    const host = document.createElement('div');
+    host.setAttribute('data-jp-drawer-shadow-host', '');
 
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = `${fontsCss}\n${saverStyleCss}`;
 
+    const mount = document.createElement('div');
+    shadowRoot.append(style, mount);
 
+    document.body.appendChild(host);
+    setShadowMount(mount);
 
-END_OF_FILE_CONTENT
-echo "Creating src/components/ui/label.tsx..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/ui/label.tsx"
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
+    return () => {
+      setShadowMount(null);
+      host.remove();
+    };
+  }, []);
 
-import { cn } from "@/lib/utils"
+  useEffect(() => {
+    if (!isOpen) {
+      setBurst(false);
+      setCountdown(3);
+      return;
+    }
+    if (isDone) setBurst(true);
+  }, [isDone, isOpen]);
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+  useEffect(() => {
+    if (!isOpen || !isDone) return;
+    setCountdown(3);
+    const interval = window.setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          window.clearInterval(interval);
+          onClose();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => window.clearInterval(interval);
+  }, [isDone, isOpen, onClose]);
+
+  const currentStep = useMemo(
+    () => DEPLOY_STEPS.find((step) => step.id === currentStepId) ?? null,
+    [currentStepId]
+  );
 
-export { Label }
+  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';
+  };
 
+  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))' }}
+      >
+        <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',
+          }}
+        >
+          <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>
 
-END_OF_FILE_CONTENT
-echo "Creating src/components/ui/select.tsx..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/ui/select.tsx"
-import * as React from "react"
-import { Select as SelectPrimitive } from "radix-ui"
+                <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>
 
-import { cn } from "@/lib/utils"
+              <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>
+        </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`,
+          }}
+        />
+      ))}
+    </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 BURST_COLORS = ['#34d399', '#60a5fa', '#a78bfa', '#f59e0b', '#f472b6'];
+
+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>
+  );
+}
+
+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; }
+}
+
+@keyframes orb-travel {
+  from { left: 0%; }
+  to { left: calc(100% - 10px); }
+}
+
+@keyframes particle-float {
+  0% { transform: translateY(0) scale(1); opacity: 0; }
+  15% { opacity: 1; }
+  100% { transform: translateY(-90px) scale(0.3); opacity: 0; }
+}
+
+@keyframes bar-eq {
+  from { transform: scaleY(0.4); }
+  to { transform: scaleY(1); }
+}
+
+@keyframes burst-ray {
+  0% { transform: rotate(var(--r, 0deg)) translateX(0); opacity: 1; }
+  100% { transform: rotate(var(--r, 0deg)) translateX(56px); opacity: 0; }
+}
+
+@keyframes countdown-drain {
+  from { width: 100%; }
+  to { width: 0%; }
+}
+
+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"
+"use client"
+
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
+
+
+
+
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/ui/input.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/ui/input.tsx"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
+
+
+
+
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/ui/label.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/ui/label.tsx"
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
+
+
+
+
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/ui/select.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/ui/select.tsx"
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
 function Select({
@@ -4587,6 +5868,7 @@ 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';
@@ -4645,6 +5927,7 @@ 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';
@@ -4704,6 +5987,7 @@ 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';
@@ -4746,6 +6030,179 @@ 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..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/draftStorage.ts"
 /**
@@ -4774,6 +6231,7 @@ 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"
 /**
@@ -4809,6 +6267,7 @@ 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';
@@ -4856,6 +6315,7 @@ 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/utils.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/utils.ts"
 import { clsx, type ClassValue } from 'clsx';
@@ -4866,6 +6326,7 @@ 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
@@ -4885,26 +6346,9 @@ 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"
 echo "Creating src/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/types.ts"
 import type { MenuItem } from '@jsonpages/core';
@@ -4994,6 +6438,26 @@ declare module '@jsonpages/core' {
 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..."
 cat << 'END_OF_FILE_CONTENT' > "src/vite-env.d.ts"
 /// <reference types="vite/client" />
@@ -5005,4 +6469,26 @@ 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