@siteable/core 0.1.0

package/src/editor/DesignPanel.tsx

@@ -0,0 +1,224 @@
+import { useState, useMemo } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { useConfigStore } from '@/store/configStore'
+import type { ThemeConfig } from '@/blocks/types'
+import { themePresets, resolveTheme, googleFontOptions } from '@/lib/theme-presets'
+
+function ColorInput({ value, onInput, onChange }: { value: string; onInput: (v: string) => void; onChange: (v: string) => void }) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <input
+        type="color"
+        value={value}
+        onInput={(e) => onInput((e.target as HTMLInputElement).value)}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-6 h-6 rounded border border-border-default bg-bg-2 cursor-pointer p-0.5 shrink-0"
+      />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => {
+          const v = e.target.value
+          if (/^#[0-9a-fA-F]{6}$/.test(v)) onChange(v)
+        }}
+        onBlur={(e) => {
+          const v = e.target.value
+          if (/^#[0-9a-fA-F]{6}$/.test(v)) onChange(v)
+        }}
+        className="w-[72px] px-1.5 py-1 rounded border border-border-default bg-bg-2 text-text-1 text-[10px] font-mono outline-none focus:border-green"
+      />
+    </div>
+  )
+}
+
+function ColorSection({ title, colors, defaultOpen = false }: {
+  title: string
+  colors: { key: keyof ThemeConfig; label: string }[]
+  defaultOpen?: boolean
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+  const theme = useConfigStore((s) => s.config.theme)
+  const previewTheme = useConfigStore((s) => s.previewTheme)
+  const updateTheme = useConfigStore((s) => s.updateTheme)
+  const resolved = useMemo(() => resolveTheme(theme), [theme])
+
+  return (
+    <div className="border border-border-default rounded-lg overflow-hidden">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between px-3 py-2 bg-bg-2 hover:bg-bg-3 transition-colors text-left"
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-[11px] font-semibold">{title}</span>
+          <div className="flex gap-0.5">
+            {colors.slice(0, 4).map((c) => (
+              <div
+                key={c.key}
+                className="w-3 h-3 rounded-sm border border-border-subtle"
+                style={{ backgroundColor: resolved[c.key] as string }}
+              />
+            ))}
+          </div>
+        </div>
+        <ChevronDown size={12} className={`text-text-3 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && (
+        <div className="px-3 py-2.5 space-y-2.5 bg-bg-1">
+          {colors.map((c) => (
+            <div key={c.key} className="flex items-center justify-between">
+              <span className="text-[10.5px] text-text-2">{c.label}</span>
+              <ColorInput
+                value={resolved[c.key] as string}
+                onInput={(v) => previewTheme({ [c.key]: v })}
+                onChange={(v) => updateTheme({ [c.key]: v })}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function DesignPanel() {
+  const theme = useConfigStore((s) => s.config.theme)
+  const setTheme = useConfigStore((s) => s.setTheme)
+  const updateTheme = useConfigStore((s) => s.updateTheme)
+  const resolved = useMemo(() => resolveTheme(theme), [theme])
+
+  const activePresetId = useMemo(() => {
+    for (const preset of themePresets) {
+      const match = Object.keys(preset.theme).every(
+        (k) => resolved[k as keyof ThemeConfig] === preset.theme[k as keyof ThemeConfig]
+      )
+      if (match) return preset.id
+    }
+    return null
+  }, [resolved])
+
+  return (
+    <div className="px-3.5 py-3.5">
+      {/* Preset grid */}
+      <div className="mb-4">
+        <div className="text-[10px] font-semibold uppercase tracking-wider text-text-3 mb-2">Presets</div>
+        <div className="grid grid-cols-2 gap-1.5">
+          {themePresets.map((preset) => (
+            <button
+              key={preset.id}
+              onClick={() => setTheme(preset.theme)}
+              className={`p-2 rounded-lg border transition-all text-left ${
+                activePresetId === preset.id
+                  ? 'border-green bg-green/5'
+                  : 'border-border-default bg-bg-2 hover:border-border-hover hover:bg-bg-3'
+              }`}
+            >
+              <div className="flex gap-0.5 mb-1.5">
+                <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: preset.theme.bg0 }} />
+                <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: preset.theme.bg2 }} />
+                <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: preset.theme.accent }} />
+                <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: preset.theme.text0 }} />
+              </div>
+              <div className="text-[10px] font-medium truncate">{preset.name}</div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Color sections */}
+      <div className="space-y-2 mb-4">
+        <ColorSection
+          title="Backgrounds"
+          defaultOpen
+          colors={[
+            { key: 'bg0', label: 'Base' },
+            { key: 'bg1', label: 'Surface 1' },
+            { key: 'bg2', label: 'Surface 2' },
+            { key: 'bg3', label: 'Surface 3' },
+            { key: 'bg4', label: 'Surface 4' },
+            { key: 'bg5', label: 'Surface 5' },
+          ]}
+        />
+        <ColorSection
+          title="Text"
+          colors={[
+            { key: 'text0', label: 'Primary' },
+            { key: 'text1', label: 'Secondary' },
+            { key: 'text2', label: 'Muted' },
+            { key: 'text3', label: 'Dimmed' },
+          ]}
+        />
+        <ColorSection
+          title="Accent"
+          defaultOpen
+          colors={[
+            { key: 'accent', label: 'Accent' },
+            { key: 'accentDim', label: 'Accent Dim' },
+          ]}
+        />
+        <ColorSection
+          title="Borders"
+          colors={[
+            { key: 'borderDefault', label: 'Default' },
+            { key: 'borderSubtle', label: 'Subtle' },
+            { key: 'borderHover', label: 'Hover' },
+          ]}
+        />
+      </div>
+
+      {/* Fonts */}
+      <div className="mb-4">
+        <div className="text-[10px] font-semibold uppercase tracking-wider text-text-3 mb-2">Fonts</div>
+        <div className="space-y-2.5">
+          {([
+            { key: 'fontSans' as const, label: 'Body' },
+            { key: 'fontDisplay' as const, label: 'Display' },
+            { key: 'fontMono' as const, label: 'Mono' },
+          ]).map(({ key, label }) => (
+            <div key={key}>
+              <label className="block text-[10.5px] text-text-2 mb-1">{label}</label>
+              <select
+                value={resolved[key]}
+                onChange={(e) => updateTheme({ [key]: e.target.value })}
+                className="w-full px-2 py-1.5 rounded-lg border border-border-default bg-bg-2 text-text-0 text-[11px] outline-none focus:border-green cursor-pointer"
+                style={{ fontFamily: `"${resolved[key]}", sans-serif` }}
+              >
+                {googleFontOptions.map((f) => (
+                  <option key={f} value={f}>{f}</option>
+                ))}
+              </select>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Radius */}
+      <div>
+        <div className="text-[10px] font-semibold uppercase tracking-wider text-text-3 mb-2">Radius</div>
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <label className="block text-[10.5px] text-text-2 mb-1">Default</label>
+            <input
+              type="number"
+              min={0}
+              max={24}
+              value={resolved.radius}
+              onChange={(e) => updateTheme({ radius: Number(e.target.value) })}
+              className="w-full px-2 py-1.5 rounded-lg border border-border-default bg-bg-2 text-text-0 text-[11px] outline-none focus:border-green"
+            />
+          </div>
+          <div>
+            <label className="block text-[10.5px] text-text-2 mb-1">Large</label>
+            <input
+              type="number"
+              min={0}
+              max={32}
+              value={resolved.radiusLg}
+              onChange={(e) => updateTheme({ radiusLg: Number(e.target.value) })}
+              className="w-full px-2 py-1.5 rounded-lg border border-border-default bg-bg-2 text-text-0 text-[11px] outline-none focus:border-green"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/editor/EditorLayout.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useRef } from 'react'
+import { toast } from 'sonner'
+import { FolderOpen, Layers, Briefcase, UtensilsCrossed, Building2, BookOpen } from 'lucide-react'
+import { CanvasToolbar } from './CanvasToolbar'
+import { LeftSidebar } from './LeftSidebar'
+import { Canvas } from './Canvas'
+import { RightSidebar } from './RightSidebar'
+import { JsonDrawer } from './JsonDrawer'
+import { VersionHistory } from './VersionHistory'
+import { GenerationOverlay } from './GenerationOverlay'
+import { useConfigStore } from '@/store/configStore'
+import { useEditorStore } from '@/store/editorStore'
+import { generateSiteConfig } from '@/lib/generate-site'
+import { templateMeta, buildTemplate } from '@/lib/templates'
+import { hexToRgb } from '@/lib/theme-presets'
+import type { SiteConfig } from '@/blocks/types'
+import type { ExportSiteSettings } from '@/lib/export-html'
+
+const templateIcons: Record<string, typeof Briefcase> = {
+  Briefcase, UtensilsCrossed, Building2, BookOpen,
+}
+
+export interface EditorLayoutProps {
+  onConfigChange?: (id: string, config: SiteConfig) => void
+  onRename?: (id: string, name: string) => void
+  onCreate?: (name: string) => string
+  activeProject?: { name: string; settings?: ExportSiteSettings }
+  onExit?: () => void
+  onServerFallback?: (prompt: string, signal?: AbortSignal) => Promise<SiteConfig>
+}
+
+function useAutoSaveToProject(onConfigChange?: EditorLayoutProps['onConfigChange']) {
+  const config = useConfigStore((s) => s.config)
+  const activeProjectId = useEditorStore((s) => s.activeProjectId)
+  const loadedConfigRef = useRef<string | null>(null)
+
+  // Snapshot the config at load time so we can diff
+  useEffect(() => {
+    loadedConfigRef.current = JSON.stringify(config)
+  }, [activeProjectId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (!activeProjectId) return
+    const serialized = JSON.stringify(config)
+    // Only save when config actually differs from what was loaded
+    if (serialized === loadedConfigRef.current) return
+    onConfigChange?.(activeProjectId, config)
+  }, [config, activeProjectId]) // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+function useGenerationOrchestration(onConfigChange?: EditorLayoutProps['onConfigChange'], onRename?: EditorLayoutProps['onRename'], onServerFallback?: EditorLayoutProps['onServerFallback']) {
+  const isGenerating = useEditorStore((s) => s.isGenerating)
+  const generationPrompt = useEditorStore((s) => s.generationPrompt)
+  const clearGeneration = useEditorStore((s) => s.clearGeneration)
+  const setGenerationError = useEditorStore((s) => s.setGenerationError)
+  const activeProjectId = useEditorStore((s) => s.activeProjectId)
+  const setConfig = useConfigStore((s) => s.setConfig)
+  const abortRef = useRef<AbortController | null>(null)
+
+  useEffect(() => {
+    if (!isGenerating || !generationPrompt) return
+
+    const controller = new AbortController()
+    abortRef.current = controller
+
+    // Timeout after 30s to prevent infinite loading
+    const timeout = setTimeout(() => {
+      controller.abort()
+      setGenerationError('Generation timed out')
+      toast.error('Generation timed out. Try again or add a Gemini API key in Settings.')
+      clearGeneration()
+    }, 30000)
+
+    generateSiteConfig(generationPrompt, controller.signal, onServerFallback)
+      .then(({ config, source }) => {
+        clearTimeout(timeout)
+        if (controller.signal.aborted) return
+        setConfig(config)
+        if (activeProjectId) {
+          onConfigChange?.(activeProjectId, config)
+          if (config.name) onRename?.(activeProjectId, config.name)
+        }
+        clearGeneration()
+        if (source === 'template') {
+          toast('Generated from template. Add a Gemini API key in Settings for AI generation.')
+        }
+      })
+      .catch((err) => {
+        clearTimeout(timeout)
+        if (err instanceof Error && err.name === 'AbortError') return
+        setGenerationError(err instanceof Error ? err.message : 'Generation failed')
+        toast.error(err instanceof Error ? err.message : 'Generation failed')
+        clearGeneration()
+      })
+
+    return () => {
+      clearTimeout(timeout)
+      controller.abort()
+      abortRef.current = null
+    }
+  }, [isGenerating, generationPrompt]) // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+function EditorEmptyState({ onCreate, onExit }: Pick<EditorLayoutProps, 'onCreate' | 'onExit'>) {
+  const setConfig = useConfigStore((s) => s.setConfig)
+  const setActiveProject = useEditorStore((s) => s.setActiveProject)
+
+  function startFromTemplate(tplId: string, tplName: string) {
+    const id = onCreate?.(tplName) ?? `local-${Date.now()}` // eslint-disable-line react-hooks/purity
+    setActiveProject(id)
+    setConfig(buildTemplate(tplId, tplName))
+  }
+
+  return (
+    <div className="h-full flex items-center justify-center">
+      <div className="flex flex-col items-center text-center px-6 max-w-md">
+        <div className="w-12 h-12 rounded-xl bg-bg-3 border border-border-default flex items-center justify-center mb-4">
+          <FolderOpen size={20} className="text-text-3" />
+        </div>
+        <h2 className="text-[16px] font-display font-semibold text-text-1 mb-1">No project selected</h2>
+        <p className="text-text-2 text-[13px] mb-6">Open a project from the Dashboard, or start from a template.</p>
+
+        <button
+          onClick={() => onExit?.()}
+          className="px-5 py-2 rounded-xl bg-green text-black text-[13px] font-semibold hover:bg-green-dim active:scale-[0.97] transition-all mb-6"
+        >
+          Go to Dashboard
+        </button>
+
+        <div className="grid grid-cols-2 gap-2 w-full">
+          {templateMeta.map((tpl) => {
+            const rgb = hexToRgb(tpl.accent)
+            const Icon = templateIcons[tpl.icon] || Layers
+            return (
+              <button
+                key={tpl.id}
+                onClick={() => startFromTemplate(tpl.id, tpl.name)}
+                className="group relative bg-bg-1 border border-border-default rounded-lg p-3 text-left transition-all hover:border-border-hover card-lift hover:card-lift-hover active:scale-[0.97]"
+              >
+                <div
+                  className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"
+                  style={{ background: `rgba(${rgb}, 0.06)` }}
+                />
+                <div className="relative">
+                  <div className="flex items-center gap-2 mb-1.5">
+                    <div
+                      className="w-6 h-6 rounded flex items-center justify-center shrink-0 transition-all opacity-70 group-hover:opacity-100 group-hover:scale-110"
+                      style={{ background: `rgba(${rgb}, 0.12)`, color: tpl.accent }}
+                    >
+                      <Icon size={12} />
+                    </div>
+                    <div className="text-[11.5px] font-semibold text-text-0">{tpl.name}</div>
+                  </div>
+                  <div className="text-[10px] text-text-2 leading-snug mb-1.5">{tpl.description}</div>
+                  <div className="text-[10px] text-text-3 flex items-center gap-1">
+                    <Layers size={9} />
+                    {tpl.blockCount} blocks
+                  </div>
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function EditorLayout({ onConfigChange, onRename, onCreate, activeProject, onExit, onServerFallback }: EditorLayoutProps = {}) {
+  useAutoSaveToProject(onConfigChange)
+  useGenerationOrchestration(onConfigChange, onRename, onServerFallback)
+  const previewMode = useEditorStore((s) => s.previewMode)
+  const activeProjectId = useEditorStore((s) => s.activeProjectId)
+
+  if (!activeProjectId) {
+    return <EditorEmptyState onCreate={onCreate} onExit={onExit} />
+  }
+
+  return (
+    <div className="h-full flex flex-col relative">
+      <div className="flex-1 flex overflow-hidden">
+        {!previewMode && <LeftSidebar />}
+        <div className="flex-1 flex flex-col min-w-0 relative">
+          <CanvasToolbar activeProject={activeProject} onExit={onExit} />
+          <div className="flex-1 flex flex-col overflow-hidden relative">
+            <Canvas />
+            <JsonDrawer />
+            <GenerationOverlay />
+          </div>
+        </div>
+        {!previewMode && <RightSidebar />}
+      </div>
+      <VersionHistory />
+    </div>
+  )
+}

package/src/editor/GenerationOverlay.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useReducer } from 'react'
+import { X } from 'lucide-react'
+import { useEditorStore } from '@/store/editorStore'
+
+const steps = [
+  { label: 'Analyzing prompt', duration: 3 },
+  { label: 'Generating layout', duration: 5 },
+  { label: 'Writing copy', duration: 4 },
+  { label: 'Applying theme', duration: 3 },
+]
+
+type OverlayState = {
+  elapsed: number
+  showAfterFade: boolean
+}
+
+type OverlayAction =
+  | { type: 'start' }
+  | { type: 'tick' }
+  | { type: 'hide' }
+
+function overlayReducer(state: OverlayState, action: OverlayAction): OverlayState {
+  switch (action.type) {
+    case 'start':
+      return { elapsed: 0, showAfterFade: true }
+    case 'tick':
+      return state.showAfterFade ? { ...state, elapsed: state.elapsed + 1 } : state
+    case 'hide':
+      return { ...state, showAfterFade: false }
+    default:
+      return state
+  }
+}
+
+export function GenerationOverlay() {
+  const isGenerating = useEditorStore((s) => s.isGenerating)
+  const clearGeneration = useEditorStore((s) => s.clearGeneration)
+  const [{ elapsed, showAfterFade }, dispatch] = useReducer(overlayReducer, {
+    elapsed: 0,
+    showAfterFade: false,
+  })
+
+  useEffect(() => {
+    if (isGenerating) {
+      dispatch({ type: 'start' })
+      const timer = setInterval(() => dispatch({ type: 'tick' }), 1000)
+      return () => clearInterval(timer)
+    }
+
+    const timer = setTimeout(() => dispatch({ type: 'hide' }), 600)
+    return () => clearTimeout(timer)
+  }, [isGenerating])
+
+  const visible = isGenerating || showAfterFade
+  const fading = !isGenerating && showAfterFade
+
+  if (!visible) return null
+
+  // Determine active step based on elapsed time
+  let stepTime = 0
+  let activeStep = steps.length - 1
+  for (let i = 0; i < steps.length; i++) {
+    stepTime += steps[i].duration
+    if (elapsed < stepTime) { activeStep = i; break }
+  }
+
+  return (
+    <div
+      className={`absolute inset-0 z-50 flex items-center justify-center transition-opacity duration-600 ${
+        fading ? 'opacity-0' : 'opacity-100'
+      }`}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-bg-0/90 backdrop-blur-md" />
+
+      {/* Animated glow orb */}
+      <div
+        className="absolute w-[400px] h-[400px] rounded-full opacity-20 blur-[100px]"
+        style={{
+          background: 'radial-gradient(circle, var(--color-green) 0%, transparent 70%)',
+          animation: 'gen-orb 4s ease-in-out infinite',
+        }}
+      />
+
+      <div className="relative flex flex-col items-center gap-8 max-w-md px-8">
+        {/* Wireframe animation */}
+        <div className="relative w-[200px] h-[130px] rounded-lg border border-border-default bg-bg-1/80 overflow-hidden">
+          {/* Animated wireframe blocks */}
+          <div className="absolute top-0 left-0 right-0 h-4 bg-bg-3/60 flex items-center px-2 gap-1">
+            <div className="w-6 h-1.5 rounded-sm bg-green/40" />
+            <div className="flex-1" />
+            <div className="w-3 h-1.5 rounded-sm bg-bg-4" />
+            <div className="w-3 h-1.5 rounded-sm bg-bg-4" />
+            <div className="w-3 h-1.5 rounded-sm bg-bg-4" />
+          </div>
+          <div className="absolute top-6 left-3 right-3 space-y-1.5">
+            <div className="h-2 w-16 rounded-sm bg-green/30 gen-shimmer" style={{ animationDelay: '0ms' }} />
+            <div className="h-4 w-full rounded-sm bg-bg-4/80 gen-shimmer" style={{ animationDelay: '100ms' }} />
+            <div className="h-2 w-3/4 rounded-sm bg-bg-4/50 gen-shimmer" style={{ animationDelay: '200ms' }} />
+            <div className="flex gap-1.5 pt-1">
+              <div className="h-3 w-12 rounded-sm bg-green/40 gen-shimmer" style={{ animationDelay: '300ms' }} />
+              <div className="h-3 w-10 rounded-sm bg-bg-4/60 gen-shimmer" style={{ animationDelay: '350ms' }} />
+            </div>
+          </div>
+          <div className="absolute bottom-2 left-3 right-3 flex gap-1.5">
+            <div className="flex-1 h-8 rounded bg-bg-3/60 gen-shimmer" style={{ animationDelay: '400ms' }} />
+            <div className="flex-1 h-8 rounded bg-bg-3/60 gen-shimmer" style={{ animationDelay: '500ms' }} />
+            <div className="flex-1 h-8 rounded bg-bg-3/60 gen-shimmer" style={{ animationDelay: '600ms' }} />
+          </div>
+          {/* Scan line */}
+          <div className="absolute left-0 right-0 h-px bg-green/40 gen-scan" />
+        </div>
+
+        {/* Status */}
+        <div className="text-center">
+          <p className="text-text-0 text-[16px] font-display font-semibold mb-2 tracking-tight">
+            Building your site
+          </p>
+          <div className="flex items-center justify-center gap-2 text-green text-[13px] tabular-nums">
+            <div className="w-4 h-4 rounded-full border-2 border-green/30 border-t-green animate-spin" />
+            <span>{elapsed}s</span>
+          </div>
+        </div>
+
+        {/* Progress steps */}
+        <div className="w-full space-y-2">
+          {steps.map((step, i) => (
+            <div key={step.label} className="flex items-center gap-3">
+              <div className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold border transition-all duration-500 ${
+                i < activeStep
+                  ? 'bg-green/20 border-green/40 text-green'
+                  : i === activeStep
+                    ? 'border-green text-green animate-pulse'
+                    : 'border-border-default text-text-3'
+              }`}>
+                {i < activeStep ? (
+                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                    <path d="M2 5L4 7L8 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                ) : (
+                  <span>{i + 1}</span>
+                )}
+              </div>
+              <span className={`text-[12px] transition-colors duration-500 ${
+                i < activeStep ? 'text-text-2' : i === activeStep ? 'text-text-0 font-medium' : 'text-text-3'
+              }`}>
+                {step.label}
+              </span>
+              {i === activeStep && (
+                <div className="flex-1 h-1 rounded-full bg-bg-3 overflow-hidden ml-auto max-w-[80px]">
+                  <div className="h-full bg-green/60 rounded-full gen-progress" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Cancel */}
+        <button
+          onClick={() => clearGeneration()}
+          className="px-4 py-2 rounded-lg bg-bg-2 text-text-2 text-[12px] border border-border-default hover:bg-bg-3 hover:text-text-0 hover:border-border-hover transition-all inline-flex items-center gap-1.5"
+        >
+          <X size={12} />
+          Cancel
+        </button>
+      </div>
+
+      <style>{`
+        @keyframes gen-orb {
+          0%, 100% { transform: translate(-30%, -20%) scale(1); }
+          33% { transform: translate(20%, -10%) scale(1.1); }
+          66% { transform: translate(-10%, 20%) scale(0.9); }
+        }
+        .gen-shimmer {
+          animation: gen-shimmer 2s ease-in-out infinite;
+        }
+        @keyframes gen-shimmer {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 0.8; }
+        }
+        .gen-scan {
+          animation: gen-scan 2.5s ease-in-out infinite;
+        }
+        @keyframes gen-scan {
+          0% { top: 0; opacity: 0; }
+          10% { opacity: 1; }
+          90% { opacity: 1; }
+          100% { top: 100%; opacity: 0; }
+        }
+        .gen-progress {
+          animation: gen-progress 3s ease-in-out infinite;
+        }
+        @keyframes gen-progress {
+          0% { width: 0%; }
+          50% { width: 80%; }
+          100% { width: 100%; }
+        }
+      `}</style>
+    </div>
+  )
+}