@jsonpages/cli 3.0.46 → 3.0.48

package/assets/src_tenant_alpha.sh

@@ -294,22 +294,639 @@ export const NotFound: React.FC = () => {
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/SaveDrawer"
+echo "Creating src/components/SaveDrawer/DeployConnector.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/DeployConnector.tsx"
+import type { StepState } from './types';
+
+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="relative flex-1 z-0" style={{ height: 2, marginTop: -24 }}>
+      <div className="absolute inset-0 bg-white/8 rounded-full" />
+
+      <div
+        className="absolute top-0 left-0 bottom-0 rounded-full"
+        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="absolute rounded-full"
+          style={{
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 10,
+            height: 10,
+            background: color,
+            boxShadow: `0 0 14px ${color}, 0 0 28px ${color}88`,
+            animation: 'save-orb-travel 2s cubic-bezier(0.4,0,0.6,1) forwards',
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/SaveDrawer/DeployNode.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/DeployNode.tsx"
+import type { DeployStep, StepState } from './types';
+import { cn } from '@/lib/utils';
+
+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="flex flex-col items-center gap-2.5 relative z-10">
+      <div
+        className={cn(
+          'relative flex h-12 w-12 items-center justify-center rounded-full border transition-all duration-500',
+          isPending && 'border-white/8 bg-white/[0.02]',
+          isActive && 'border',
+          isDone && 'border-0'
+        )}
+        style={{
+          background: isDone ? step.color : isActive ? 'rgba(0,0,0,0.5)' : undefined,
+          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 ? 'save-node-glow 2s ease infinite' : undefined,
+          ['--glow-color' as string]: step.color,
+        }}
+      >
+        {isDone && (
+          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-label="Done">
+            <path
+              className="stroke-dash-30 save-check-draw"
+              d="M5 13l4 4L19 7"
+              stroke="#0a0f1a"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+
+        {isActive && (
+          <span
+            className="text-lg leading-none"
+            style={{
+              color: step.color,
+              animation: 'save-glyph-rotate 9s linear infinite',
+              display: 'inline-block',
+            }}
+            aria-hidden
+          >
+            {step.glyph}
+          </span>
+        )}
+
+        {isPending && (
+          <span className="text-lg leading-none text-white/15" aria-hidden>
+            {step.glyph}
+          </span>
+        )}
+
+        {isActive && (
+          <span
+            className="absolute rounded-full border"
+            style={{
+              inset: -7,
+              borderColor: `${step.color}50`,
+              animation: 'save-ring-expand 2s ease-out infinite',
+            }}
+          />
+        )}
+      </div>
+
+      <span
+        className="text-[10px] font-semibold uppercase tracking-[0.1em] transition-colors duration-500"
+        style={{
+          color: isDone ? step.color : isActive ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.18)',
+        }}
+      >
+        {step.label}
+      </span>
+    </div>
+  );
+}
+
+END_OF_FILE_CONTENT
 echo "Creating src/components/SaveDrawer/SaveDrawer.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/SaveDrawer.tsx"
 /**
- * SaveDrawer — Cloud save flow with real SSE (commit → push → build → live).
- * Opens when user saves in Cloud mode; consumes POST save-stream and shows
- * the four steps. On done: "Refresh page" + "Close" only (no redirect).
+ * SaveDrawer — Identical to prototype DopaDrawer (dopa-save).
+ * Bottom sheet for Cloud save; driven by real SSE (save-stream).
+ * Done: countdown 3s + "Chiusura in Xs" + Chiudi + Open site → auto-close. Error: Annulla + Retry.
  */
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+import { Progress } from '@/components/ui/progress';
+import { DeployNode } from './DeployNode';
+import { DeployConnector } from './DeployConnector';
+import { Particles, BuildBars, SuccessBurst, ElapsedTimer } from './Visuals';
+import { useSaveStream } from './useSaveStream';
+import { DEPLOY_STEPS } from './steps';
 import type { ProjectState } from '@jsonpages/core';
 
-const SAVE_STEPS = [
-  { id: 'commit' as const, label: 'Commit' },
-  { id: 'push' as const, label: 'Push' },
-  { id: 'build' as const, label: 'Build' },
-  { id: 'live' as const, label: 'Live' },
-];
+export interface SaveDrawerProps {
+  cloudUrl: string;
+  apiKey: string;
+  state: ProjectState;
+  slug: string;
+  onClose: () => void;
+}
+
+export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawerProps) {
+  const [burst, setBurst] = useState(false);
+
+  const {
+    phase,
+    currentStep,
+    stepState,
+    doneSteps,
+    progress,
+    deployUrl,
+    countdown,
+    logs,
+    errorMessage,
+    retry,
+  } = useSaveStream({
+    cloudUrl,
+    apiKey,
+    state,
+    slug,
+    onClose,
+  });
+
+  const isRunning = phase === 'running';
+  const isDone = phase === 'done';
+  const isError = phase === 'error';
+
+  if (isDone && !burst) setBurst(true);
+
+  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;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-40 save-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="fixed inset-x-0 bottom-0 z-50 flex justify-center pb-6 px-4 save-drawer-up"
+      >
+        <div
+          className={cn(
+            'relative w-full max-w-2xl overflow-hidden rounded-2xl',
+            'border border-white/[0.07] bg-[hsl(222,18%,7%)]'
+          )}
+          style={{
+            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="pointer-events-none absolute inset-0"
+            style={{
+              background: `radial-gradient(ellipse 70% 60% at 50% 110%, ${activeColor}12 0%, transparent 65%)`,
+              transition: 'background 1.5s ease',
+              animation: 'save-ambient-pulse 3.5s ease infinite',
+            }}
+            aria-hidden
+          />
+
+          {isDone && (
+            <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
+              <div
+                className="absolute inset-y-0 w-[35%]"
+                style={{
+                  background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent)',
+                  animation: 'save-shimmer-sweep 1.4s 0.1s ease forwards',
+                }}
+              />
+            </div>
+          )}
+
+          <Particles count={particleCount} color={activeColor} />
+          {burst && <SuccessBurst />}
+
+          <div className="relative z-10 px-8 pt-7 pb-6">
+            <div className="flex items-start justify-between mb-7">
+              <div className="flex flex-col gap-2.5">
+                <div
+                  className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.1em] transition-colors duration-500"
+                  style={{ color: activeColor }}
+                >
+                  <span
+                    className="inline-block h-1.5 w-1.5 rounded-full"
+                    style={{
+                      background: activeColor,
+                      boxShadow: `0 0 6px ${activeColor}`,
+                      animation: isRunning ? 'save-ambient-pulse 1.5s ease infinite' : 'none',
+                    }}
+                    aria-hidden
+                  />
+                  {isDone ? 'Live' : isError ? 'Build failed' : currentStep?.verb ?? 'Saving'}
+                </div>
+
+                <div key={currentStep?.id ?? phase} className="save-text-in min-h-[42px]">
+                  {isDone ? (
+                    <div className="save-success-pop">
+                      <p className="text-lg font-semibold text-white leading-snug">Your content is live.</p>
+                      <p className="text-sm text-white/40 mt-0.5">Deployed to production successfully</p>
+                    </div>
+                  ) : isError ? (
+                    <>
+                      <p className="text-base font-semibold text-white leading-snug">
+                        Deploy failed at build.
+                      </p>
+                      <p className="text-sm text-white/35 mt-0.5">
+                        {errorMessage ?? 'Check your Vercel logs or retry below'}
+                      </p>
+                    </>
+                  ) : currentStep ? (
+                    <>
+                      <p className="text-sm font-light text-white/55 leading-relaxed">{currentStep.poem[0]}</p>
+                      <p className="text-sm font-light text-white/30 leading-relaxed">{currentStep.poem[1]}</p>
+                    </>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="flex flex-col items-end gap-1.5 shrink-0 ml-6">
+                {isDone ? (
+                  <div className="flex flex-col items-end gap-1.5 save-fade-up">
+                    <span
+                      className="font-mono text-xs text-emerald-400 font-semibold"
+                      aria-live="polite"
+                    >
+                      Chiusura in {countdown}s
+                    </span>
+                    <div className="w-24 h-0.5 bg-white/10 rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-emerald-400 rounded-full countdown-bar"
+                        style={{ boxShadow: '0 0 6px #34d39988' }}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <ElapsedTimer running={isRunning} />
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center mb-5">
+              {DEPLOY_STEPS.map((step, i) => (
+                <div
+                  key={step.id}
+                  className={cn('flex items-center', i < DEPLOY_STEPS.length - 1 ? 'flex-1' : 'flex-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="flex justify-center mb-5">
+              <BuildBars active={stepState(2) === 'active'} />
+            </div>
+
+            <Separator className="mb-5 bg-white/[0.06]" />
+
+            {isRunning && currentStep && (logs[currentStep.id]?.length ?? 0) > 0 && (
+              <div className="mb-4 max-h-16 overflow-y-auto rounded-md bg-white/[0.04] px-3 py-2 font-mono text-[11px] text-white/50 leading-relaxed">
+                {logs[currentStep.id]?.map((line, i) => (
+                  <div key={i}>{line}</div>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-4">
+              <div className="flex-1">
+                <Progress
+                  value={progress}
+                  className="h-[2px] bg-white/[0.06]"
+                  indicatorClassName="transition-none"
+                  indicatorStyle={{
+                    background: `linear-gradient(90deg, ${DEPLOY_STEPS[0].color}, ${activeColor})`,
+                  }}
+                />
+              </div>
+
+              <div className="flex items-center gap-2 shrink-0">
+                {isDone && (
+                  <div className="flex gap-2 save-fade-up">
+                    <button
+                      type="button"
+                      onClick={onClose}
+                      className="px-3 py-1.5 rounded-md border border-white/20 text-white/90 text-sm hover:bg-white/10"
+                    >
+                      Chiudi
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        deployUrl ? window.open(deployUrl, '_blank') : window.location.reload()
+                      }
+                      className="px-3 py-1.5 rounded-md bg-emerald-400 text-zinc-900 text-sm font-semibold hover:bg-emerald-300 gap-1.5 inline-flex items-center"
+                    >
+                      <span aria-hidden>↗</span> Open site
+                    </button>
+                  </div>
+                )}
+
+                {isError && (
+                  <div className="flex gap-2 save-fade-up">
+                    <button
+                      type="button"
+                      onClick={onClose}
+                      className="px-3 py-1.5 rounded-md text-white/80 text-sm hover:bg-white/10"
+                    >
+                      Annulla
+                    </button>
+                    <button
+                      type="button"
+                      onClick={retry}
+                      className="px-3 py-1.5 rounded-md bg-red-500/90 text-white text-sm font-medium hover:bg-red-500"
+                    >
+                      Retry
+                    </button>
+                  </div>
+                )}
+
+                {isRunning && (
+                  <span className="font-mono text-xs text-white/20" aria-hidden>
+                    {doneSteps.length + 1} / {DEPLOY_STEPS.length}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/SaveDrawer/Visuals.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/Visuals.tsx"
+import { useRef, useState, useEffect } from 'react';
+
+const POOL: { id: number; x: number; y: number; size: number; dur: number; delay: number }[] = 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="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
+      {POOL.slice(0, count).map((p) => (
+        <div
+          key={p.id}
+          className="absolute rounded-full"
+          style={{
+            left: `${p.x}%`,
+            bottom: `${p.y}%`,
+            width: p.size,
+            height: p.size,
+            background: color,
+            boxShadow: `0 0 ${p.size * 3}px ${color}`,
+            opacity: 0,
+            animation: `save-particle-float ${p.dur}s ${p.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="h-7" />;
+  return (
+    <div className="flex items-end gap-[3px] h-7" aria-hidden>
+      {BAR_H.map((h, i) => (
+        <div
+          key={i}
+          className="w-[3px] rounded-sm"
+          style={{
+            background: '#f59e0b',
+            height: `${h * 100}%`,
+            transformOrigin: 'bottom',
+            animation: `save-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="pointer-events-none absolute inset-0 flex items-center justify-center" aria-hidden>
+      {Array.from({ length: 16 }).map((_, i) => (
+        <div
+          key={i}
+          className="absolute rounded-full"
+          style={{
+            width: 5,
+            height: 5,
+            background: BURST_COLORS[i % BURST_COLORS.length],
+            ['--r' as string]: `${i * 22.5}deg`,
+            animation: `save-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,
+          }}
+        />
+      ))}
+    </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 = (): void => {
+      setElapsed(Math.floor((performance.now() - (startRef.current ?? 0)) / 1000));
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [running]);
+
+  const s = String(elapsed % 60).padStart(2, '0');
+  const m = String(Math.floor(elapsed / 60)).padStart(2, '0');
+
+  return (
+    <span className="font-mono text-xs text-white/25 tracking-widest" aria-live="off">
+      {m}:{s}
+    </span>
+  );
+}
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/SaveDrawer/index.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/index.ts"
+export { SaveDrawer } from './SaveDrawer';
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/SaveDrawer/steps.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/steps.ts"
+import type { DeployStep } from './types';
+
+export const DEPLOY_STEPS: readonly DeployStep[] = [
+  {
+    id: 'commit',
+    label: 'Commit',
+    verb: 'Committing',
+    poem: ['Crystallizing your edit', 'into permanent history.'],
+    color: '#60a5fa',
+    glyph: '◈',
+    duration: 2200,
+  },
+  {
+    id: 'push',
+    label: 'Push',
+    verb: 'Pushing',
+    poem: ['Sending your vision', 'across the wire.'],
+    color: '#a78bfa',
+    glyph: '◎',
+    duration: 2800,
+  },
+  {
+    id: 'build',
+    label: 'Build',
+    verb: 'Building',
+    poem: ['Assembling the pieces,', 'brick by digital brick.'],
+    color: '#f59e0b',
+    glyph: '⬡',
+    duration: 7500,
+  },
+  {
+    id: 'live',
+    label: 'Live',
+    verb: 'Going live',
+    poem: ['Your content', 'is now breathing.'],
+    color: '#34d399',
+    glyph: '✦',
+    duration: 1600,
+  },
+] as const;
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/SaveDrawer/types.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/types.ts"
+/** Save/deploy flow types (aligned with prototype) */
+
+export type StepId = 'commit' | 'push' | 'build' | 'live';
+
+export type StepState = 'pending' | 'active' | 'done';
+
+export type DeployPhase = 'running' | 'done' | 'error';
+
+export interface DeployStep {
+  id: StepId;
+  label: string;
+  verb: string;
+  poem: [string, string];
+  color: string;
+  glyph: string;
+  duration: number;
+}
+
+END_OF_FILE_CONTENT
+echo "Creating src/components/SaveDrawer/useSaveStream.ts..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/useSaveStream.ts"
+/**
+ * useSaveStream — Same API as prototype useSaveOrchestrator, driven by SSE from save-stream.
+ * Event handling aligned with CreateTenantFlow (parseSSE, step/log/error/done, post-loop, try/catch).
+ * Payload is read from a ref at effect start so the effect does not depend on state.page (avoids re-run and stream kill).
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { ProjectState } from '@jsonpages/core';
+import type { DeployPhase, StepId, StepState } from './types';
+import { DEPLOY_STEPS } from './steps';
 
 function parseSSE(buffer: string): { event: string; data: string }[] {
   const lines = buffer.split('\n');
@@ -329,7 +946,7 @@ function parseSSE(buffer: string): { event: string; data: string }[] {
   return out;
 }
 
-export interface SaveDrawerProps {
+interface UseSaveStreamOptions {
   cloudUrl: string;
   apiKey: string;
   state: ProjectState;
@@ -337,91 +954,152 @@ export interface SaveDrawerProps {
   onClose: () => void;
 }
 
-export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawerProps) {
-  const [completedSteps, setCompletedSteps] = useState<string[]>([]);
-  const [activeStepId, setActiveStepId] = useState<string | null>('commit');
+export function useSaveStream({
+  cloudUrl,
+  apiKey,
+  state,
+  slug,
+  onClose,
+}: UseSaveStreamOptions) {
+  const [phase, setPhase] = useState<DeployPhase>('running');
+  const [doneSteps, setDoneSteps] = useState<StepId[]>([]);
+  const [activeStepId, setActiveStepId] = useState<StepId | null>('commit');
+  const [progress, setProgress] = useState(0);
+  const [deployUrl, setDeployUrl] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState(3);
   const [logs, setLogs] = useState<Record<string, string[]>>({});
-  const [phase, setPhase] = useState<'running' | 'done' | 'error'>('running');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const progressRef = useRef(0);
+  const [runId, setRunId] = useState(0);
+
+  const payloadRef = useRef<{ path: string; content: unknown; message: string } | null>(null);
 
   const addLog = useCallback((stepId: string, message: string) => {
     setLogs((prev) => ({ ...prev, [stepId]: [...(prev[stepId] || []), message] }));
   }, []);
 
+  const stepState = useCallback(
+    (i: number): StepState => {
+      const step = DEPLOY_STEPS[i];
+      if (!step) return 'pending';
+      if (doneSteps.includes(step.id)) return 'done';
+      if (activeStepId === step.id && phase === 'running') return 'active';
+      return 'pending';
+    },
+    [doneSteps, activeStepId, phase]
+  );
+
+  const currentStep = DEPLOY_STEPS.find((s) => s.id === activeStepId) ?? DEPLOY_STEPS[0] ?? null;
+
   useEffect(() => {
     let cancelled = false;
     let gotDone = false;
+    setPhase('running');
+    setDoneSteps([]);
+    setActiveStepId('commit');
+    setProgress(0);
+    setDeployUrl(null);
+    setCountdown(3);
+    setLogs({});
+    setErrorMessage(null);
+    progressRef.current = 0;
+
+    payloadRef.current = {
+      path: `src/data/pages/${slug}.json`,
+      content: state.page,
+      message: `Content update for ${slug} via Visual Editor`,
+    };
+
+    const url = `${cloudUrl.replace(/\/$/, '')}/save-stream`;
 
     const run = async () => {
-      const url = `${cloudUrl.replace(/\/$/, '')}/save-stream`;
-      const res = await fetch(url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${apiKey}`,
-        },
-        body: JSON.stringify({
-          path: `src/data/pages/${slug}.json`,
-          content: state.page,
-          message: `Content update for ${slug} via Visual Editor`,
-        }),
-      });
+      try {
+        const payload = payloadRef.current;
+        if (!payload || cancelled) return;
 
-      if (!res.ok || !res.body) {
-        const data = await res.json().catch(() => ({}));
-        setErrorMessage((data as { error?: string }).error || `Request failed: ${res.status}`);
-        setPhase('error');
-        return;
-      }
+        const res = await fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${apiKey}`,
+          },
+          body: JSON.stringify(payload),
+        });
+
+        if (!res.ok || !res.body) {
+          if (!cancelled) {
+            setPhase('error');
+            setErrorMessage('Request failed');
+          }
+          return;
+        }
 
-      const reader = res.body.getReader();
-      const dec = new TextDecoder();
-      let buffer = '';
+        const reader = res.body.getReader();
+        const dec = new TextDecoder();
+        let buffer = '';
 
-      while (true) {
-        const { value, done: streamDone } = await reader.read();
-        if (streamDone || cancelled) break;
-        buffer += dec.decode(value, { stream: true });
-        const parts = buffer.split('\n\n');
-        buffer = parts.pop() || '';
+        while (true) {
+          const { value, done: streamDone } = await reader.read();
+          if (streamDone || cancelled) break;
+          buffer += dec.decode(value, { stream: true });
+          const parts = buffer.split('\n\n');
+          buffer = parts.pop() || '';
 
-        for (const part of parts) {
-          const parsed = parseSSE(part + '\n\n');
-          for (const { event: ev, data: raw } of parsed) {
-            if (cancelled) return;
-            try {
-              const data = JSON.parse(raw) as Record<string, unknown>;
-              if (ev === 'step') {
-                const id = data.id as string | undefined;
-                const status = data.status as string | undefined;
-                if (id && status === 'running') setActiveStepId(id);
-                if (id && status === 'done') {
-                  setCompletedSteps((prev) => [...prev, id].filter(Boolean));
+          for (const part of parts) {
+            const parsed = parseSSE(part + '\n\n');
+            for (const { event: ev, data: raw } of parsed) {
+              if (cancelled) return;
+              try {
+                const data = JSON.parse(raw) as Record<string, unknown>;
+                if (ev === 'step') {
+                  const id = data.id as StepId | undefined;
+                  const status = data.status as string | undefined;
+                  if (id && status === 'running') {
+                    setActiveStepId(id);
+                    const idx = DEPLOY_STEPS.findIndex((s) => s.id === id);
+                    if (idx >= 0) progressRef.current = Math.round((idx / DEPLOY_STEPS.length) * 100);
+                    setProgress(progressRef.current);
+                  }
+                  if (id && status === 'done') {
+                    setDoneSteps((prev) => [...prev, id].filter(Boolean));
+                    setActiveStepId(null);
+                    const idx = DEPLOY_STEPS.findIndex((s) => s.id === id);
+                    progressRef.current = idx >= 0 ? Math.round(((idx + 1) / DEPLOY_STEPS.length) * 100) : 100;
+                    setProgress(progressRef.current);
+                  }
+                } else if (ev === 'log' && data.stepId && data.message) {
+                  addLog(data.stepId as string, data.message as string);
+                } else if (ev === 'error') {
+                  if (!cancelled) {
+                    setErrorMessage((data.message as string) || 'Errore');
+                    setPhase('error');
+                  }
+                  return;
+                } else if (ev === 'done') {
+                  gotDone = true;
+                  setDeployUrl((data.deployUrl as string) ?? null);
+                  setProgress(100);
+                  setDoneSteps(['commit', 'push', 'build', 'live']);
                   setActiveStepId(null);
+                  setPhase('done');
+                  return;
                 }
-              } else if (ev === 'log' && data.stepId && data.message) {
-                addLog(data.stepId as string, data.message as string);
-              } else if (ev === 'error') {
-                setErrorMessage((data.message as string) || 'Error');
-                setPhase('error');
-                return;
-              } else if (ev === 'done') {
-                gotDone = true;
-                setCompletedSteps((prev) => [...new Set([...prev, 'commit', 'push', 'build', 'live'])]);
-                setActiveStepId(null);
-                setPhase('done');
-                return;
+              } catch {
+                // ignore parse errors
               }
-            } catch {
-              // ignore parse errors
             }
           }
         }
-      }
 
-      if (!cancelled && !gotDone) {
-        setErrorMessage('Connection closed before completion');
-        setPhase('error');
+        if (!cancelled && !gotDone) {
+          setErrorMessage('Operazione interrotta o build non completato.');
+          setPhase('error');
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setErrorMessage(e instanceof Error ? e.message : 'Errore');
+          setPhase('error');
+        }
       }
     };
 
@@ -429,142 +1107,40 @@ export function SaveDrawer({ cloudUrl, apiKey, state, slug, onClose }: SaveDrawe
     return () => {
       cancelled = true;
     };
-  }, [cloudUrl, apiKey, state.page, slug, addLog]);
-
-  const progressPct =
-    phase === 'done' ? 100 : SAVE_STEPS.length > 0 ? Math.round((completedSteps.length / SAVE_STEPS.length) * 100) : 0;
-
-  const stepState = (id: string) => {
-    if (completedSteps.includes(id)) return 'done';
-    if (activeStepId === id) return 'active';
-    return 'pending';
-  };
-
-  return (
-    <>
-      <div
-        className="fixed inset-0 z-40 bg-black/40 backdrop-blur-[2px]"
-        onClick={phase === 'done' || phase === 'error' ? onClose : undefined}
-        aria-hidden
-      />
-      <div
-        role="status"
-        aria-live="polite"
-        className="fixed inset-x-0 bottom-0 z-50 flex justify-center pb-6 px-4"
-        aria-label={phase === 'done' ? 'Save completed' : phase === 'error' ? 'Save failed' : 'Saving'}
-      >
-        <div
-          className="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-white/[0.07] bg-[hsl(222,18%,7%)] shadow-lg"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div className="relative z-10 px-6 pt-6 pb-5">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-lg font-semibold text-white">
-                {phase === 'done' ? 'Content is live' : phase === 'error' ? 'Save failed' : 'Saving to Cloud'}
-              </h2>
-              {phase === 'running' && (
-                <span className="text-xs font-mono text-white/50">{completedSteps.length} / {SAVE_STEPS.length}</span>
-              )}
-            </div>
+  }, [cloudUrl, apiKey, slug, runId, addLog]);
 
-            {phase === 'error' && errorMessage && (
-              <p className="text-sm text-red-400 mb-4">{errorMessage}</p>
-            )}
-
-            <div className="flex items-center gap-2 mb-4">
-              {SAVE_STEPS.map((step, i) => (
-                <div key={step.id} className="flex items-center flex-1">
-                  <div
-                    className={`flex items-center justify-center w-8 h-8 rounded-full border-2 shrink-0 ${
-                      stepState(step.id) === 'done'
-                        ? 'bg-emerald-500/20 border-emerald-500'
-                        : stepState(step.id) === 'active'
-                          ? 'bg-blue-500/20 border-blue-500'
-                          : 'bg-white/10 border-white/20'
-                    }`}
-                  >
-                    {stepState(step.id) === 'done' ? (
-                      <span className="text-emerald-400" aria-hidden>✓</span>
-                    ) : stepState(step.id) === 'active' ? (
-                      <span className="w-3 h-3 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" aria-hidden />
-                    ) : (
-                      <span className="text-xs text-white/40">{i + 1}</span>
-                    )}
-                  </div>
-                  <span
-                    className={`ml-2 text-xs font-medium truncate ${
-                      stepState(step.id) !== 'pending' ? 'text-white' : 'text-white/40'
-                    }`}
-                  >
-                    {step.label}
-                  </span>
-                  {i < SAVE_STEPS.length - 1 && (
-                    <div
-                      className={`flex-1 h-0.5 mx-2 min-w-[8px] ${
-                        stepState(step.id) === 'done' ? 'bg-emerald-500/50' : 'bg-white/10'
-                      }`}
-                    />
-                  )}
-                </div>
-              ))}
-            </div>
-
-            <div className="h-1 bg-white/10 rounded-full overflow-hidden mb-4">
-              <div
-                className="h-full bg-emerald-500 rounded-full transition-all duration-300"
-                style={{ width: `${progressPct}%` }}
-              />
-            </div>
+  useEffect(() => {
+    if (phase !== 'done') return;
+    setCountdown(3);
+    const iv = setInterval(() => {
+      setCountdown((s) => {
+        if (s <= 1) {
+          clearInterval(iv);
+          onClose();
+          return 0;
+        }
+        return s - 1;
+      });
+    }, 1000);
+    return () => clearInterval(iv);
+  }, [phase, onClose]);
 
-            {Object.keys(logs).length > 0 && (
-              <div className="mb-4 p-2 rounded bg-black/30 border border-white/10 font-mono text-xs text-white/60 space-y-0.5 max-h-20 overflow-y-auto">
-                {(logs[activeStepId || ''] || []).slice(-3).map((line, i) => (
-                  <div key={i}>$ {line}</div>
-                ))}
-              </div>
-            )}
+  const retry = useCallback(() => setRunId((r) => r + 1), []);
 
-            <div className="flex items-center gap-2 justify-end">
-              {phase === 'done' && (
-                <>
-                  <button
-                    type="button"
-                    onClick={() => window.location.reload()}
-                    className="px-4 py-2 rounded-lg bg-emerald-500 text-zinc-900 font-medium text-sm hover:bg-emerald-400"
-                  >
-                    Refresh page
-                  </button>
-                  <button
-                    type="button"
-                    onClick={onClose}
-                    className="px-4 py-2 rounded-lg border border-white/20 text-white/90 text-sm hover:bg-white/10"
-                  >
-                    Close
-                  </button>
-                </>
-              )}
-              {phase === 'error' && (
-                <button
-                  type="button"
-                  onClick={onClose}
-                  className="px-4 py-2 rounded-lg border border-white/20 text-white/90 text-sm hover:bg-white/10"
-                >
-                  Close
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
+  return {
+    phase,
+    currentStep,
+    stepState,
+    doneSteps,
+    progress,
+    deployUrl,
+    countdown,
+    logs,
+    errorMessage,
+    retry,
+  };
 }
 
-END_OF_FILE_CONTENT
-echo "Creating src/components/SaveDrawer/index.ts..."
-cat << 'END_OF_FILE_CONTENT' > "src/components/SaveDrawer/index.ts"
-export { SaveDrawer } from './SaveDrawer';
-
 END_OF_FILE_CONTENT
 mkdir -p "src/components/arch-layers"
 echo "Creating src/components/arch-layers/View.tsx..."
@@ -3403,6 +3979,46 @@ export { Label }
 
 
 
+END_OF_FILE_CONTENT
+echo "Creating src/components/ui/progress.tsx..."
+cat << 'END_OF_FILE_CONTENT' > "src/components/ui/progress.tsx"
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  value?: number | null;
+  indicatorClassName?: string;
+  indicatorStyle?: React.CSSProperties;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value, indicatorClassName, indicatorStyle, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="progressbar"
+      aria-valuenow={value ?? 0}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', className)}
+      {...props}
+    >
+      <div
+        className={cn(
+          'h-full w-full flex-1 bg-primary transition-all duration-700 ease-out',
+          indicatorClassName
+        )}
+        style={{
+          transform: `translateX(-${100 - (value ?? 0)}%)`,
+          ...indicatorStyle,
+        }}
+      />
+    </div>
+  )
+);
+Progress.displayName = 'Progress';
+
+export { Progress };
+
 END_OF_FILE_CONTENT
 echo "Creating src/components/ui/select.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/ui/select.tsx"
@@ -4798,6 +5414,88 @@ html {
   opacity: 0;
 }
 
+/* ==========================================================================
+   SAVE DRAWER (prototype-identical animations)
+   ========================================================================== */
+@keyframes save-drawer-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@keyframes save-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes save-fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes save-success-pop {
+  0% { transform: scale(0.88); opacity: 0; }
+  60% { transform: scale(1.04); }
+  100% { transform: scale(1); opacity: 1; }
+}
+@keyframes save-ring-expand {
+  from { transform: scale(1); opacity: 0.7; }
+  to { transform: scale(2.1); opacity: 0; }
+}
+@keyframes save-orb-travel {
+  from { left: 0%; }
+  to { left: calc(100% - 10px); }
+}
+@keyframes save-glyph-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@keyframes save-particle-float {
+  0% { transform: translateY(0) scale(1); opacity: 0; }
+  15% { opacity: 1; }
+  100% { transform: translateY(-90px) scale(0.3); opacity: 0; }
+}
+@keyframes save-bar-eq {
+  from { transform: scaleY(0.4); }
+  to { transform: scaleY(1); }
+}
+@keyframes save-ambient-pulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.65; }
+}
+@keyframes save-shimmer-sweep {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+@keyframes save-text-in {
+  from { opacity: 0; transform: translateX(-6px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes save-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 save-burst-ray {
+  0% { transform: rotate(var(--r, 0deg)) translateX(0); opacity: 1; }
+  100% { transform: rotate(var(--r, 0deg)) translateX(56px); opacity: 0; }
+}
+
+.save-drawer-up { animation: save-drawer-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
+.save-fade-in { animation: save-fade-in 0.25s ease forwards; }
+.save-fade-up { animation: save-fade-up 0.35s ease forwards; }
+.save-success-pop { animation: save-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
+.save-text-in { animation: save-text-in 0.3s ease forwards; }
+
+.stroke-dash-30 { stroke-dasharray: 30; stroke-dashoffset: 30; }
+.save-check-draw { animation: save-check-draw 0.4s 0.05s ease forwards; }
+@keyframes save-check-draw {
+  to { stroke-dashoffset: 0; }
+}
+
+/* Countdown drain — 3s linear (dopa-save identical) */
+.countdown-bar {
+  animation: countdown-drain 3s linear forwards;
+}
+@keyframes countdown-drain {
+  from { width: 100%; }
+  to   { width: 0%;   }
+}
 
 
 END_OF_FILE_CONTENT

package/package.json

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