@jsonpages/cli 3.0.45 → 3.0.47

package/assets/src_tenant_alpha.sh

@@ -41,6 +41,7 @@ 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 { SaveDrawer } from '@/components/SaveDrawer';
 
 import siteData from '@/data/config/site.json';
 import themeData from '@/data/config/theme.json';
@@ -69,6 +70,7 @@ function getInitialData() {
 function App() {
   const [{ pages, siteConfig }] = useState(getInitialData);
   const [assetsManifest, setAssetsManifest] = useState<LibraryImageEntry[]>([]);
+  const [saveDrawer, setSaveDrawer] = useState<{ state: ProjectState; slug: string } | null>(null);
 
   useEffect(() => {
     // In Cloud mode, listing assets might be different or disabled for MVP
@@ -78,11 +80,7 @@ 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"
-});
+
   const config: JsonPagesConfig = {
     tenantId: TENANT_ID,
     registry: ComponentRegistry as JsonPagesConfig['registry'],
@@ -96,29 +94,9 @@ console.log("🔍 DEBUG ENV:", {
     persistence: {
       async saveToFile(state: ProjectState, slug: string): Promise<void> {
         
-        // ☁️ SCENARIO A: CLOUD BRIDGE (Production)
+        // ☁️ SCENARIO A: CLOUD BRIDGE (Production) — open SaveDrawer, stream save-stream
         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}`);
-          }
+          setSaveDrawer({ state, slug });
           return;
         }
 
@@ -164,7 +142,20 @@ console.log("🔍 DEBUG ENV:", {
     },
   };
 
-  return <JsonPagesEngine config={config} />;
+  return (
+    <>
+      <JsonPagesEngine config={config} />
+      {saveDrawer && CLOUD_API_URL && CLOUD_API_KEY && (
+        <SaveDrawer
+          cloudUrl={CLOUD_API_URL}
+          apiKey={CLOUD_API_KEY}
+          state={saveDrawer.state}
+          slug={saveDrawer.slug}
+          onClose={() => setSaveDrawer(null)}
+        />
+      )}
+    </>
+  );
 }
 
 export default App;
@@ -301,6 +292,747 @@ 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 — Identical to prototype DopaDrawer.
+ * Bottom sheet for Cloud save; driven by real SSE (save-stream).
+ * Done: "Refresh page" + "Chiudi". Error: "Annulla" + "Retry".
+ */
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+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';
+
+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, 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">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 && <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]" />
+
+            <div className="flex items-center gap-4">
+              <div className="flex-1 h-[2px] bg-white/[0.06] rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-300"
+                  style={{
+                    width: `${progress}%`,
+                    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={() => 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"
+                    >
+                      Refresh page
+                    </button>
+                    <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>
+                  </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, but driven by real SSE from save-stream.
+ */
+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');
+  const out: { event: string; data: string }[] = [];
+  let event = 'message';
+  let data = '';
+  for (const line of lines) {
+    if (line.startsWith('event:')) event = line.slice(6).trim();
+    else if (line.startsWith('data:')) data = line.slice(5).trim();
+    else if (line === '' && data) {
+      out.push({ event, data });
+      data = '';
+      event = 'message';
+    }
+  }
+  if (data) out.push({ event, data });
+  return out;
+}
+
+interface UseSaveStreamOptions {
+  cloudUrl: string;
+  apiKey: string;
+  state: ProjectState;
+  slug: string;
+  onClose: () => void;
+}
+
+export function useSaveStream({
+  cloudUrl,
+  apiKey,
+  state,
+  slug,
+  onClose: _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 progressRef = useRef(0);
+  const [runId, setRunId] = useState(0);
+
+  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;
+    setPhase('running');
+    setDoneSteps([]);
+    setActiveStepId('commit');
+    setProgress(0);
+    progressRef.current = 0;
+
+    const url = `${cloudUrl.replace(/\/$/, '')}/save-stream`;
+
+    const run = async () => {
+      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`,
+        }),
+      });
+
+      if (!res.ok || !res.body) {
+        if (!cancelled) setPhase('error');
+        return;
+      }
+
+      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() || '';
+
+        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 === 'error') {
+                setPhase('error');
+                return;
+              } else if (ev === 'done') {
+                setProgress(100);
+                setDoneSteps(['commit', 'push', 'build', 'live']);
+                setActiveStepId(null);
+                setPhase('done');
+                return;
+              }
+            } catch {
+              // ignore
+            }
+          }
+        }
+      }
+    };
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [cloudUrl, apiKey, slug, state.page, runId]);
+
+  const retry = useCallback(() => setRunId((r) => r + 1), []);
+
+  return {
+    phase,
+    currentStep,
+    stepState,
+    doneSteps,
+    progress,
+    retry,
+  };
+}
+
 END_OF_FILE_CONTENT
 mkdir -p "src/components/arch-layers"
 echo "Creating src/components/arch-layers/View.tsx..."
@@ -4534,6 +5266,79 @@ 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; }
+}
 
 
 END_OF_FILE_CONTENT

package/package.json

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