@jsonpages/cli 3.0.49 → 3.0.51

package/assets/src_tenant_alpha.sh

@@ -41,7 +41,6 @@ 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';
@@ -70,7 +69,6 @@ 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
@@ -93,14 +91,7 @@ function App() {
     addSection: addSectionConfig,
     persistence: {
       async saveToFile(state: ProjectState, slug: string): Promise<void> {
-        
-        // ☁️ SCENARIO A: CLOUD BRIDGE (Production) — open SaveDrawer, stream save-stream
-        if (CLOUD_API_URL && CLOUD_API_KEY) {
-          setSaveDrawer({ state, slug });
-          return;
-        }
-
-        // 💻 SCENARIO B: LOCAL FILESYSTEM (Development)
+        // Local only (cloud uses saveToFileStream and Core’s SaveProgressDrawer)
         console.log(`💻 Saving ${slug} to Local Filesystem...`);
         const res = await fetch('/api/save-to-file', {
           method: 'POST',
@@ -111,6 +102,25 @@ function App() {
         const body = (await res.json().catch(() => ({}))) as { error?: string };
         if (!res.ok) throw new Error(body.error ?? `Save to file failed: ${res.status}`);
       },
+      ...(CLOUD_API_URL && CLOUD_API_KEY
+        ? {
+            saveToFileStream: async (state: ProjectState, slug: string): Promise<Response> => {
+              const res = await fetch(`${CLOUD_API_URL}/save-stream`, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  Authorization: `Bearer ${CLOUD_API_KEY}`,
+                },
+                body: JSON.stringify({
+                  path: `src/data/pages/${slug}.json`,
+                  content: state.page,
+                  message: `Content update for ${slug} via Visual Editor`,
+                }),
+              });
+              return res;
+            },
+          }
+        : {}),
     },
     assets: {
       assetsBaseUrl: '/assets',
@@ -142,20 +152,7 @@ function App() {
     },
   };
 
-  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)}
-        />
-      )}
-    </>
-  );
+  return <JsonPagesEngine config={config} />;
 }
 
 export default App;
@@ -292,858 +289,6 @@ 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 (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 } 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';
-
-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="h-9 rounded-md px-3 inline-flex items-center justify-center text-sm font-medium border border-white/20 bg-white/5 text-white/90 hover:bg-white/10 transition-colors"
-                    >
-                      Chiudi
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        deployUrl ? window.open(deployUrl, '_blank') : window.location.reload()
-                      }
-                      className="h-9 rounded-md px-3 inline-flex items-center justify-center gap-1.5 text-sm font-semibold bg-emerald-400 text-zinc-900 hover:bg-emerald-300 transition-colors"
-                    >
-                      <span aria-hidden>↗</span> Open site
-                    </button>
-                  </div>
-                )}
-
-                {isError && (
-                  <div className="flex gap-2 save-fade-up">
-                    <button
-                      type="button"
-                      onClick={onClose}
-                      className="h-9 rounded-md px-3 inline-flex items-center justify-center text-sm font-medium text-white/80 hover:bg-white/10 transition-colors"
-                    >
-                      Annulla
-                    </button>
-                    <button
-                      type="button"
-                      onClick={retry}
-                      className="h-9 rounded-md px-3 inline-flex items-center justify-center text-sm font-medium bg-red-600 text-white hover:bg-red-500 transition-colors"
-                    >
-                      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');
-  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,
-}: 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 [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 base = cloudUrl.replace(/\/$/, '');
-    const url = base.includes('/api/v1')
-      ? `${base}/save-stream`
-      : `${base}/api/v1/save-stream`;
-
-    const run = async () => {
-      try {
-        const payload = payloadRef.current;
-        if (!payload || cancelled) 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(res.status ? `HTTP ${res.status}` : 'Request failed');
-          }
-          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 === '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;
-                }
-              } catch {
-                // ignore parse errors
-              }
-            }
-          }
-        }
-
-        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');
-        }
-      }
-    };
-
-    run();
-    return () => {
-      cancelled = true;
-    };
-  }, [cloudUrl, apiKey, slug, runId, addLog]);
-
-  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]);
-
-  const retry = useCallback(() => setRunId((r) => r + 1), []);
-
-  return {
-    phase,
-    currentStep,
-    stepState,
-    doneSteps,
-    progress,
-    deployUrl,
-    countdown,
-    logs,
-    errorMessage,
-    retry,
-  };
-}
-
 END_OF_FILE_CONTENT
 mkdir -p "src/components/arch-layers"
 echo "Creating src/components/arch-layers/View.tsx..."
@@ -3982,47 +3127,6 @@ 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 min-w-full bg-primary transition-all duration-700 ease-out',
-          indicatorClassName
-        )}
-        style={{
-          width: '100%',
-          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"
@@ -5418,88 +4522,6 @@ 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/assets/vercel.json

@@ -1 +1 @@
-{"rewrites":[{"source":"/(.*)","destination":"/index.html"}],"headers":[{"source":"/assets/(.*)","headers":[{"key":"Cache-Control","value":"public, max-age=31536000, immutable"}]}]}
+{"rewrites":[{"source":"/(.*)","destination":"/index.html"}],"headers":[{"source":"/assets/(.*)","headers":[{"key":"Cache-Control","value":"public, max-age=31536000, immutable"}]}]}

package/package.json

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