@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/theme-creator-block/index.tsx

@@ -0,0 +1,835 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible"
+import { ScrollArea } from "../../components/scroll-area"
+import { useToast } from "../../hooks/useToast"
+import { useTheme, ShadcnRegistryItem } from "../../context/theme-provider"
+import { Login, type LoginConfig } from "../login"
+import { WakaDashboard, defaultDashboardStats } from "../dashboard"
+import { WakaChat, defaultChatUser, defaultChatConversations, defaultChatMessages } from "../chat"
+import {
+  ChevronDown,
+  Sun,
+  Moon,
+  Undo2,
+  Redo2,
+  RotateCcw,
+  Upload,
+  Save,
+  Copy,
+  Check,
+  Loader2,
+  ImageIcon,
+  Trash2,
+  Palette,
+  Image as ImageLucide,
+} from "lucide-react"
+
+// ============================================================================
+// Types & Interfaces
+// ============================================================================
+
+export interface ThemeBlockColors {
+  background: string
+  foreground: string
+  card: string
+  cardForeground: string
+  popover: string
+  popoverForeground: string
+  primary: string
+  primaryForeground: string
+  secondary: string
+  secondaryForeground: string
+  muted: string
+  mutedForeground: string
+  accent: string
+  accentForeground: string
+  destructive: string
+  destructiveForeground: string
+  border: string
+  input: string
+  ring: string
+  chart1: string
+  chart2: string
+  chart3: string
+  chart4: string
+  chart5: string
+  sidebarBackground?: string
+  sidebarForeground?: string
+  sidebarPrimary?: string
+  sidebarPrimaryForeground?: string
+  sidebarAccent?: string
+  sidebarAccentForeground?: string
+  sidebarBorder?: string
+  sidebarRing?: string
+}
+
+export interface ThemeBlockAssets {
+  logoLight?: string
+  logoDark?: string
+  backgroundLight?: string
+  backgroundDark?: string
+  favicon?: string
+  sponsorLight?: string
+  sponsorDark?: string
+}
+
+export interface ThemeCreatorBlockTheme {
+  id: string
+  name: string
+  description?: string
+  author?: string
+  lightColors: ThemeBlockColors
+  darkColors: ThemeBlockColors
+  assets?: ThemeBlockAssets
+  radius?: string
+  fonts?: { sans?: string; mono?: string }
+}
+
+export interface ThemeColorGroup {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  colors: { key: keyof ThemeBlockColors; label: string; description?: string }[]
+}
+
+export interface WakaThemeCreatorBlockProps {
+  themes?: ThemeCreatorBlockTheme[]
+  initialTheme?: ThemeCreatorBlockTheme
+  onThemeChange?: (theme: ThemeCreatorBlockTheme) => void
+  onSave?: (theme: ThemeCreatorBlockTheme) => Promise<void>
+  onUploadAsset?: (file: File, assetType: keyof ThemeBlockAssets) => Promise<string>
+  onExport?: (theme: ThemeCreatorBlockTheme, format: 'json' | 'css') => void
+  showTypography?: boolean
+  showSidebarColors?: boolean
+  previewTabs?: ('login' | 'dashboard' | 'chat')[]
+  customPreview?: React.ReactNode
+  className?: string
+}
+
+// ============================================================================
+// Hex to HSL Conversion
+// ============================================================================
+
+function hexToHSL(hex: string): string {
+  hex = hex.replace(/^#/, '')
+  const r = parseInt(hex.slice(0, 2), 16) / 255
+  const g = parseInt(hex.slice(2, 4), 16) / 255
+  const b = parseInt(hex.slice(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0
+  let s = 0
+  const l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break
+      case g: h = ((b - r) / d + 2) / 6; break
+      case b: h = ((r - g) / d + 4) / 6; break
+    }
+  }
+
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
+}
+
+function colorsToRegistryItem(
+  themeId: string,
+  lightColors: ThemeBlockColors,
+  darkColors: ThemeBlockColors,
+  radius?: string
+): ShadcnRegistryItem {
+  const convertColors = (colors: ThemeBlockColors): Record<string, string> => ({
+    background: hexToHSL(colors.background),
+    foreground: hexToHSL(colors.foreground),
+    card: hexToHSL(colors.card),
+    "card-foreground": hexToHSL(colors.cardForeground),
+    popover: hexToHSL(colors.popover),
+    "popover-foreground": hexToHSL(colors.popoverForeground),
+    primary: hexToHSL(colors.primary),
+    "primary-foreground": hexToHSL(colors.primaryForeground),
+    secondary: hexToHSL(colors.secondary),
+    "secondary-foreground": hexToHSL(colors.secondaryForeground),
+    muted: hexToHSL(colors.muted),
+    "muted-foreground": hexToHSL(colors.mutedForeground),
+    accent: hexToHSL(colors.accent),
+    "accent-foreground": hexToHSL(colors.accentForeground),
+    destructive: hexToHSL(colors.destructive),
+    "destructive-foreground": hexToHSL(colors.destructiveForeground),
+    border: hexToHSL(colors.border),
+    input: hexToHSL(colors.input),
+    ring: hexToHSL(colors.ring),
+    "chart-1": hexToHSL(colors.chart1),
+    "chart-2": hexToHSL(colors.chart2),
+    "chart-3": hexToHSL(colors.chart3),
+    "chart-4": hexToHSL(colors.chart4),
+    "chart-5": hexToHSL(colors.chart5),
+    ...(colors.sidebarBackground && { "sidebar-background": hexToHSL(colors.sidebarBackground) }),
+    ...(colors.sidebarForeground && { "sidebar-foreground": hexToHSL(colors.sidebarForeground) }),
+    ...(colors.sidebarPrimary && { "sidebar-primary": hexToHSL(colors.sidebarPrimary) }),
+    ...(colors.sidebarPrimaryForeground && { "sidebar-primary-foreground": hexToHSL(colors.sidebarPrimaryForeground) }),
+    ...(colors.sidebarAccent && { "sidebar-accent": hexToHSL(colors.sidebarAccent) }),
+    ...(colors.sidebarAccentForeground && { "sidebar-accent-foreground": hexToHSL(colors.sidebarAccentForeground) }),
+    ...(colors.sidebarBorder && { "sidebar-border": hexToHSL(colors.sidebarBorder) }),
+    ...(colors.sidebarRing && { "sidebar-ring": hexToHSL(colors.sidebarRing) }),
+  })
+
+  return {
+    name: themeId,
+    type: "registry:theme",
+    cssVars: {
+      theme: { radius: radius || "0.5rem" },
+      light: convertColors(lightColors),
+      dark: convertColors(darkColors),
+    },
+  }
+}
+
+// ============================================================================
+// Default Themes
+// ============================================================================
+
+const defaultLightColors: ThemeBlockColors = {
+  background: "#ffffff", foreground: "#0a0a0a",
+  card: "#ffffff", cardForeground: "#0a0a0a",
+  popover: "#ffffff", popoverForeground: "#0a0a0a",
+  primary: "#171717", primaryForeground: "#fafafa",
+  secondary: "#f5f5f5", secondaryForeground: "#171717",
+  muted: "#f5f5f5", mutedForeground: "#737373",
+  accent: "#f5f5f5", accentForeground: "#171717",
+  destructive: "#ef4444", destructiveForeground: "#fafafa",
+  border: "#e5e5e5", input: "#e5e5e5", ring: "#0a0a0a",
+  chart1: "#e76e50", chart2: "#2a9d90", chart3: "#274754", chart4: "#e8c468", chart5: "#f4a462",
+}
+
+const defaultDarkColors: ThemeBlockColors = {
+  background: "#0a0a0a", foreground: "#fafafa",
+  card: "#0a0a0a", cardForeground: "#fafafa",
+  popover: "#0a0a0a", popoverForeground: "#fafafa",
+  primary: "#fafafa", primaryForeground: "#171717",
+  secondary: "#262626", secondaryForeground: "#fafafa",
+  muted: "#262626", mutedForeground: "#a3a3a3",
+  accent: "#262626", accentForeground: "#fafafa",
+  destructive: "#7f1d1d", destructiveForeground: "#fafafa",
+  border: "#262626", input: "#262626", ring: "#d4d4d4",
+  chart1: "#2662d9", chart2: "#2eb88a", chart3: "#e88c30", chart4: "#af57db", chart5: "#e23670",
+}
+
+const oceanLightColors: ThemeBlockColors = {
+  background: "#f0fdfa", foreground: "#134e4a",
+  card: "#ffffff", cardForeground: "#134e4a",
+  popover: "#ffffff", popoverForeground: "#134e4a",
+  primary: "#14b8a6", primaryForeground: "#ffffff",
+  secondary: "#ccfbf1", secondaryForeground: "#134e4a",
+  muted: "#ccfbf1", mutedForeground: "#5eead4",
+  accent: "#2dd4bf", accentForeground: "#022c22",
+  destructive: "#ef4444", destructiveForeground: "#fafafa",
+  border: "#99f6e4", input: "#99f6e4", ring: "#14b8a6",
+  chart1: "#14b8a6", chart2: "#2dd4bf", chart3: "#5eead4", chart4: "#0d9488", chart5: "#0f766e",
+}
+
+const oceanDarkColors: ThemeBlockColors = {
+  background: "#042f2e", foreground: "#ccfbf1",
+  card: "#134e4a", cardForeground: "#ccfbf1",
+  popover: "#134e4a", popoverForeground: "#ccfbf1",
+  primary: "#2dd4bf", primaryForeground: "#042f2e",
+  secondary: "#115e59", secondaryForeground: "#ccfbf1",
+  muted: "#115e59", mutedForeground: "#5eead4",
+  accent: "#14b8a6", accentForeground: "#042f2e",
+  destructive: "#ef4444", destructiveForeground: "#fafafa",
+  border: "#115e59", input: "#115e59", ring: "#2dd4bf",
+  chart1: "#2dd4bf", chart2: "#14b8a6", chart3: "#5eead4", chart4: "#99f6e4", chart5: "#0d9488",
+}
+
+export const defaultThemes: ThemeCreatorBlockTheme[] = [
+  { id: "default", name: "Default", lightColors: defaultLightColors, darkColors: defaultDarkColors, radius: "0.5rem" },
+  { id: "ocean", name: "Ocean Breeze", lightColors: oceanLightColors, darkColors: oceanDarkColors, radius: "0.5rem" },
+]
+
+// ============================================================================
+// Color Groups Configuration
+// ============================================================================
+
+const colorGroups: ThemeColorGroup[] = [
+  { id: "primary", label: "Primary", colors: [
+    { key: "primary", label: "Primary" }, { key: "primaryForeground", label: "Foreground" }
+  ]},
+  { id: "secondary", label: "Secondary", colors: [
+    { key: "secondary", label: "Secondary" }, { key: "secondaryForeground", label: "Foreground" }
+  ]},
+  { id: "accent", label: "Accent", colors: [
+    { key: "accent", label: "Accent" }, { key: "accentForeground", label: "Foreground" }
+  ]},
+  { id: "base", label: "Base", colors: [
+    { key: "background", label: "Background" }, { key: "foreground", label: "Foreground" }
+  ]},
+  { id: "card", label: "Card", colors: [
+    { key: "card", label: "Card" }, { key: "cardForeground", label: "Foreground" }
+  ]},
+  { id: "popover", label: "Popover", colors: [
+    { key: "popover", label: "Popover" }, { key: "popoverForeground", label: "Foreground" }
+  ]},
+  { id: "muted", label: "Muted", colors: [
+    { key: "muted", label: "Muted" }, { key: "mutedForeground", label: "Foreground" }
+  ]},
+  { id: "destructive", label: "Destructive", colors: [
+    { key: "destructive", label: "Destructive" }, { key: "destructiveForeground", label: "Foreground" }
+  ]},
+  { id: "border", label: "Border & Input", colors: [
+    { key: "border", label: "Border" }, { key: "input", label: "Input" }, { key: "ring", label: "Ring" }
+  ]},
+  { id: "chart", label: "Charts", colors: [
+    { key: "chart1", label: "1" }, { key: "chart2", label: "2" },
+    { key: "chart3", label: "3" }, { key: "chart4", label: "4" }, { key: "chart5", label: "5" }
+  ]},
+]
+
+// ============================================================================
+// Compact Color Row Component
+// ============================================================================
+
+interface ColorRowProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+}
+
+function ColorRow({ label, value, onChange }: ColorRowProps) {
+  return (
+    <div className="flex items-center gap-2 py-1">
+      <div className="relative">
+        <input
+          type="color"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-7 h-7 rounded cursor-pointer border-0 bg-transparent p-0"
+          style={{ WebkitAppearance: 'none', appearance: 'none' }}
+        />
+        <div
+          className="absolute inset-0.5 rounded pointer-events-none border border-border/20"
+          style={{ backgroundColor: value }}
+        />
+      </div>
+      <span className="text-[11px] text-muted-foreground flex-1 truncate">{label}</span>
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="h-6 w-16 text-[10px] font-mono px-1.5 bg-muted/50 border-0"
+      />
+    </div>
+  )
+}
+
+// ============================================================================
+// Asset Upload Component
+// ============================================================================
+
+interface AssetUploadProps {
+  label: string
+  value?: string
+  onUpload: (file: File) => Promise<void>
+  onRemove: () => void
+  accept?: string
+  isUploading?: boolean
+}
+
+function AssetUpload({ label, value, onUpload, onRemove, accept = "image/*", isUploading }: AssetUploadProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) await onUpload(file)
+    if (inputRef.current) inputRef.current.value = ''
+  }
+
+  return (
+    <div className="flex items-center gap-2 p-2 rounded-lg border border-border/30 bg-muted/20">
+      {value ? (
+        <img src={value} alt={label} className="w-8 h-8 object-contain rounded bg-background" />
+      ) : (
+        <div className="w-8 h-8 rounded bg-muted/50 flex items-center justify-center">
+          <ImageIcon className="w-3 h-3 text-muted-foreground" />
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <p className="text-[11px] font-medium truncate">{label}</p>
+      </div>
+      <div className="flex gap-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => inputRef.current?.click()}
+          disabled={isUploading}
+          className="h-6 w-6 p-0"
+        >
+          {isUploading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Upload className="h-3 w-3" />}
+        </Button>
+        {value && (
+          <Button variant="ghost" size="sm" onClick={onRemove} className="h-6 w-6 p-0 text-destructive">
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        )}
+      </div>
+      <input ref={inputRef} type="file" accept={accept} onChange={handleFileChange} className="hidden" />
+    </div>
+  )
+}
+
+// ============================================================================
+// Color Section Component
+// ============================================================================
+
+interface ColorSectionProps {
+  group: ThemeColorGroup
+  colors: ThemeBlockColors
+  onChange: (key: keyof ThemeBlockColors, value: string) => void
+  defaultOpen?: boolean
+}
+
+function ColorSection({ group, colors, onChange, defaultOpen = false }: ColorSectionProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen)
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center justify-between w-full py-1.5 px-2 hover:bg-muted/30 rounded transition-colors text-left">
+        <span className="text-[11px] font-medium">{group.label}</span>
+        <div className="flex items-center gap-1">
+          {group.colors.slice(0, 3).map((c) => (
+            <div key={c.key} className="w-2.5 h-2.5 rounded-sm border border-border/30" style={{ backgroundColor: colors[c.key] || '#000' }} />
+          ))}
+          <ChevronDown className={cn("h-3 w-3 text-muted-foreground ml-1 transition-transform", isOpen && "rotate-180")} />
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-2 pb-1">
+        {group.colors.map((color) => (
+          <ColorRow
+            key={color.key}
+            label={color.label}
+            value={colors[color.key] || "#000000"}
+            onChange={(value) => onChange(color.key, value)}
+          />
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+// ============================================================================
+// Preview Components (using real blocks)
+// ============================================================================
+
+function PreviewLogin({ assets, isDark }: { assets?: ThemeBlockAssets; isDark: boolean }) {
+  return (
+    <div className="h-full w-full overflow-auto">
+      <Login
+        config={{
+          theme_json: {
+            name: "preview",
+            dark_mode: isDark,
+          },
+          assets: {
+            theme_logo_light: assets?.logoLight,
+            theme_logo_dark: assets?.logoDark,
+            theme_image_light: assets?.backgroundLight,
+            theme_image_dark: assets?.backgroundDark,
+          },
+          signup_options: {
+            allow_login: true,
+            require_MFA: false,
+            MFA_email: false,
+            MFA_whatsapp: false,
+            MFA_RCS: false,
+            allow_sso_google: true,
+            allow_sso_microsoft: false,
+            allow_sso_apple: false,
+            allow_sso_linkedIn: false,
+            allow_sso_github: true,
+            allow_sso_facebook: false,
+            allow_sso_instagram: false,
+            allow_sso_france_connect: false,
+          },
+        } as any}
+        showSocialLogin
+        onSSOGoogle={() => {}}
+        onSSOGithub={() => {}}
+        className="min-h-full"
+      />
+    </div>
+  )
+}
+
+function PreviewDashboard() {
+  return (
+    <div className="h-full w-full overflow-auto p-4">
+      <WakaDashboard
+        title="Tableau de bord"
+        description="Aperçu de vos statistiques"
+        stats={defaultDashboardStats}
+        showHeader
+        statsLayout="grid"
+        statsColumns={4}
+      />
+    </div>
+  )
+}
+
+function PreviewChat() {
+  return (
+    <div className="h-full w-full overflow-hidden">
+      <WakaChat
+        conversations={defaultChatConversations}
+        activeConversation={defaultChatConversations[0]}
+        messages={defaultChatMessages}
+        currentUser={defaultChatUser}
+        showConversationList={true}
+        showHeader={true}
+        layout="full"
+        className="h-full"
+      />
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaThemeCreatorBlock({
+  themes = defaultThemes,
+  initialTheme,
+  onThemeChange,
+  onSave,
+  onUploadAsset,
+  showSidebarColors = false,
+  previewTabs = ['login', 'dashboard', 'chat'],
+  className,
+}: WakaThemeCreatorBlockProps) {
+  const { toast } = useToast()
+  const { loadThemeFromJSON, isDarkMode, toggleDarkMode } = useTheme()
+
+  // Theme state
+  const [currentTheme, setCurrentTheme] = React.useState<ThemeCreatorBlockTheme>(
+    initialTheme || themes[0] || defaultThemes[0]
+  )
+  const [selectedThemeId, setSelectedThemeId] = React.useState(currentTheme.id)
+
+  // UI state
+  const [activeTab, setActiveTab] = React.useState<'colors' | 'assets'>('colors')
+  const [previewTab, setPreviewTab] = React.useState<string>(previewTabs[0])
+  const [editMode, setEditMode] = React.useState<'light' | 'dark'>('light')
+  const [isSaving, setIsSaving] = React.useState(false)
+  const [isCopied, setIsCopied] = React.useState(false)
+  const [uploadingAsset, setUploadingAsset] = React.useState<keyof ThemeBlockAssets | null>(null)
+
+  // History for undo/redo
+  const [history, setHistory] = React.useState<ThemeCreatorBlockTheme[]>([currentTheme])
+  const [historyIndex, setHistoryIndex] = React.useState(0)
+
+  // Current colors based on edit mode
+  const editColors = editMode === 'light' ? currentTheme.lightColors : currentTheme.darkColors
+
+  // Apply theme to global ThemeProvider (debounced)
+  const applyThemeRef = React.useRef<NodeJS.Timeout>()
+
+  const applyThemeToProvider = React.useCallback((theme: ThemeCreatorBlockTheme) => {
+    if (applyThemeRef.current) clearTimeout(applyThemeRef.current)
+
+    applyThemeRef.current = setTimeout(async () => {
+      try {
+        const registryItem = colorsToRegistryItem(
+          `theme-creator-preview`,
+          theme.lightColors,
+          theme.darkColors,
+          theme.radius
+        )
+        await loadThemeFromJSON(`theme-creator-preview`, registryItem)
+      } catch (error) {
+        console.error("Failed to apply theme:", error)
+      }
+    }, 50) // Debounce 50ms
+  }, [loadThemeFromJSON])
+
+  // Apply theme on mount and when it changes
+  React.useEffect(() => {
+    applyThemeToProvider(currentTheme)
+    return () => {
+      if (applyThemeRef.current) clearTimeout(applyThemeRef.current)
+    }
+  }, [currentTheme, applyThemeToProvider])
+
+  // Sync dark mode with edit mode
+  React.useEffect(() => {
+    const shouldBeDark = editMode === 'dark'
+    if (isDarkMode !== shouldBeDark) {
+      toggleDarkMode()
+    }
+  }, [editMode, isDarkMode, toggleDarkMode])
+
+  // Update color (instant)
+  const updateColor = React.useCallback((key: keyof ThemeBlockColors, value: string) => {
+    setCurrentTheme(prev => {
+      const colorKey = editMode === 'light' ? 'lightColors' : 'darkColors'
+      const updated = { ...prev, [colorKey]: { ...prev[colorKey], [key]: value } }
+      onThemeChange?.(updated)
+      return updated
+    })
+  }, [editMode, onThemeChange])
+
+  // Save to history (debounced)
+  const saveToHistory = React.useCallback(() => {
+    setHistory(h => [...h.slice(0, historyIndex + 1), currentTheme])
+    setHistoryIndex(i => i + 1)
+  }, [currentTheme, historyIndex])
+
+  React.useEffect(() => {
+    const timeout = setTimeout(saveToHistory, 500)
+    return () => clearTimeout(timeout)
+  }, [currentTheme, saveToHistory])
+
+  // Load theme
+  const loadTheme = React.useCallback((themeId: string) => {
+    const theme = themes.find(t => t.id === themeId)
+    if (theme) {
+      setCurrentTheme(theme)
+      setSelectedThemeId(themeId)
+      setHistory([theme])
+      setHistoryIndex(0)
+      onThemeChange?.(theme)
+    }
+  }, [themes, onThemeChange])
+
+  // Undo/Redo
+  const undo = React.useCallback(() => {
+    if (historyIndex > 0) {
+      setHistoryIndex(i => i - 1)
+      setCurrentTheme(history[historyIndex - 1])
+    }
+  }, [history, historyIndex])
+
+  const redo = React.useCallback(() => {
+    if (historyIndex < history.length - 1) {
+      setHistoryIndex(i => i + 1)
+      setCurrentTheme(history[historyIndex + 1])
+    }
+  }, [history, historyIndex])
+
+  // Reset
+  const reset = React.useCallback(() => {
+    const theme = themes.find(t => t.id === selectedThemeId)
+    if (theme) {
+      setCurrentTheme(theme)
+      setHistory([theme])
+      setHistoryIndex(0)
+      onThemeChange?.(theme)
+      toast({ title: "Theme reset" })
+    }
+  }, [themes, selectedThemeId, onThemeChange, toast])
+
+  // Save
+  const save = React.useCallback(async () => {
+    if (!onSave) return
+    setIsSaving(true)
+    try {
+      await onSave(currentTheme)
+      toast({ title: "Theme saved!" })
+    } catch {
+      toast({ title: "Error saving theme", variant: "destructive" })
+    } finally {
+      setIsSaving(false)
+    }
+  }, [currentTheme, onSave, toast])
+
+  // Copy CSS (HSL format for shadcn)
+  const copyCSS = React.useCallback(async () => {
+    const registryItem = colorsToRegistryItem(
+      currentTheme.id,
+      currentTheme.lightColors,
+      currentTheme.darkColors,
+      currentTheme.radius
+    )
+
+    const lightVars = Object.entries(registryItem.cssVars?.light || {})
+      .map(([k, v]) => `  --${k}: ${v};`)
+      .join('\n')
+    const darkVars = Object.entries(registryItem.cssVars?.dark || {})
+      .map(([k, v]) => `  --${k}: ${v};`)
+      .join('\n')
+
+    const css = `:root {\n${lightVars}\n}\n\n.dark {\n${darkVars}\n}`
+
+    await navigator.clipboard.writeText(css)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+    toast({ title: "CSS copied!" })
+  }, [currentTheme, toast])
+
+  // Upload asset
+  const handleUploadAsset = React.useCallback(async (file: File, assetType: keyof ThemeBlockAssets) => {
+    if (!onUploadAsset) return
+    setUploadingAsset(assetType)
+    try {
+      const url = await onUploadAsset(file, assetType)
+      setCurrentTheme(prev => {
+        const updated = { ...prev, assets: { ...prev.assets, [assetType]: url } }
+        onThemeChange?.(updated)
+        return updated
+      })
+      toast({ title: "Asset uploaded" })
+    } catch {
+      toast({ title: "Upload failed", variant: "destructive" })
+    } finally {
+      setUploadingAsset(null)
+    }
+  }, [onUploadAsset, onThemeChange, toast])
+
+  // Remove asset
+  const handleRemoveAsset = React.useCallback((assetType: keyof ThemeBlockAssets) => {
+    setCurrentTheme(prev => {
+      const newAssets = { ...prev.assets }
+      delete newAssets[assetType]
+      const updated = { ...prev, assets: newAssets }
+      onThemeChange?.(updated)
+      return updated
+    })
+  }, [onThemeChange])
+
+  return (
+    <div className={cn("flex h-[calc(100vh-180px)] min-h-[500px] border rounded-lg overflow-hidden bg-background", className)}>
+      {/* Left Panel - Editor */}
+      <div className="w-56 border-r flex flex-col bg-card/30 shrink-0">
+        {/* Header */}
+        <div className="p-2 border-b space-y-1.5">
+          <Select value={selectedThemeId} onValueChange={loadTheme}>
+            <SelectTrigger className="h-7 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {themes.map(theme => (
+                <SelectItem key={theme.id} value={theme.id}>
+                  <div className="flex items-center gap-2">
+                    <div className="h-2 w-2 rounded-full" style={{ backgroundColor: theme.lightColors.primary }} />
+                    <span className="text-xs">{theme.name}</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {/* Tabs: Colors / Assets */}
+          <div className="flex gap-0.5 p-0.5 bg-muted rounded">
+            <button
+              onClick={() => setActiveTab('colors')}
+              className={cn("flex-1 flex items-center justify-center gap-1 px-2 py-0.5 rounded text-[10px] transition-all", activeTab === 'colors' ? "bg-background shadow-sm" : "text-muted-foreground hover:text-foreground")}
+            >
+              <Palette className="h-3 w-3" /> Colors
+            </button>
+            <button
+              onClick={() => setActiveTab('assets')}
+              className={cn("flex-1 flex items-center justify-center gap-1 px-2 py-0.5 rounded text-[10px] transition-all", activeTab === 'assets' ? "bg-background shadow-sm" : "text-muted-foreground hover:text-foreground")}
+            >
+              <ImageLucide className="h-3 w-3" /> Assets
+            </button>
+          </div>
+
+          {/* Light/Dark toggle */}
+          {activeTab === 'colors' && (
+            <div className="flex gap-0.5 p-0.5 bg-muted/50 rounded">
+              <button onClick={() => setEditMode('light')} className={cn("flex-1 flex items-center justify-center gap-1 px-2 py-0.5 rounded text-[10px] transition-all", editMode === 'light' ? "bg-background shadow-sm" : "text-muted-foreground")}>
+                <Sun className="h-3 w-3" /> Light
+              </button>
+              <button onClick={() => setEditMode('dark')} className={cn("flex-1 flex items-center justify-center gap-1 px-2 py-0.5 rounded text-[10px] transition-all", editMode === 'dark' ? "bg-background shadow-sm" : "text-muted-foreground")}>
+                <Moon className="h-3 w-3" /> Dark
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <ScrollArea className="flex-1">
+          {activeTab === 'colors' ? (
+            <div className="p-1">
+              {colorGroups.map((group, i) => (
+                <ColorSection key={group.id} group={group} colors={editColors} onChange={updateColor} defaultOpen={i < 3} />
+              ))}
+            </div>
+          ) : (
+            <div className="p-1.5 space-y-1.5">
+              <p className="text-[9px] font-semibold text-muted-foreground uppercase tracking-wider px-1">Logos</p>
+              <AssetUpload label="Logo Light" value={currentTheme.assets?.logoLight} onUpload={(f) => handleUploadAsset(f, 'logoLight')} onRemove={() => handleRemoveAsset('logoLight')} isUploading={uploadingAsset === 'logoLight'} />
+              <AssetUpload label="Logo Dark" value={currentTheme.assets?.logoDark} onUpload={(f) => handleUploadAsset(f, 'logoDark')} onRemove={() => handleRemoveAsset('logoDark')} isUploading={uploadingAsset === 'logoDark'} />
+
+              <p className="text-[9px] font-semibold text-muted-foreground uppercase tracking-wider px-1 pt-1">Backgrounds</p>
+              <AssetUpload label="Background Light" value={currentTheme.assets?.backgroundLight} onUpload={(f) => handleUploadAsset(f, 'backgroundLight')} onRemove={() => handleRemoveAsset('backgroundLight')} isUploading={uploadingAsset === 'backgroundLight'} />
+              <AssetUpload label="Background Dark" value={currentTheme.assets?.backgroundDark} onUpload={(f) => handleUploadAsset(f, 'backgroundDark')} onRemove={() => handleRemoveAsset('backgroundDark')} isUploading={uploadingAsset === 'backgroundDark'} />
+
+              <p className="text-[9px] font-semibold text-muted-foreground uppercase tracking-wider px-1 pt-1">Other</p>
+              <AssetUpload label="Favicon" value={currentTheme.assets?.favicon} onUpload={(f) => handleUploadAsset(f, 'favicon')} onRemove={() => handleRemoveAsset('favicon')} accept="image/x-icon,image/png,image/svg+xml" isUploading={uploadingAsset === 'favicon'} />
+              <AssetUpload label="Sponsor Light" value={currentTheme.assets?.sponsorLight} onUpload={(f) => handleUploadAsset(f, 'sponsorLight')} onRemove={() => handleRemoveAsset('sponsorLight')} isUploading={uploadingAsset === 'sponsorLight'} />
+              <AssetUpload label="Sponsor Dark" value={currentTheme.assets?.sponsorDark} onUpload={(f) => handleUploadAsset(f, 'sponsorDark')} onRemove={() => handleRemoveAsset('sponsorDark')} isUploading={uploadingAsset === 'sponsorDark'} />
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* Actions */}
+        <div className="p-1.5 border-t space-y-1">
+          <div className="flex gap-1">
+            <Button variant="outline" size="sm" onClick={undo} disabled={historyIndex === 0} className="flex-1 h-6 text-[10px]"><Undo2 className="h-3 w-3" /></Button>
+            <Button variant="outline" size="sm" onClick={redo} disabled={historyIndex === history.length - 1} className="flex-1 h-6 text-[10px]"><Redo2 className="h-3 w-3" /></Button>
+            <Button variant="outline" size="sm" onClick={reset} className="flex-1 h-6 text-[10px]"><RotateCcw className="h-3 w-3" /></Button>
+          </div>
+          <div className="flex gap-1">
+            <Button variant="outline" size="sm" onClick={copyCSS} className="flex-1 h-6 text-[10px]">
+              {isCopied ? <Check className="h-3 w-3 mr-1" /> : <Copy className="h-3 w-3 mr-1" />}
+              {isCopied ? 'Copied' : 'CSS'}
+            </Button>
+            {onSave && (
+              <Button size="sm" onClick={save} disabled={isSaving} className="flex-1 h-6 text-[10px]">
+                {isSaving ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Save className="h-3 w-3 mr-1" />}
+                Save
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Right Panel - Preview */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Preview Header */}
+        <div className="h-9 border-b flex items-center justify-between px-2 shrink-0">
+          <div className="flex gap-0.5 p-0.5 bg-muted rounded">
+            {previewTabs.includes('login') && (
+              <button onClick={() => setPreviewTab('login')} className={cn("px-2 py-0.5 rounded text-[10px] transition-all", previewTab === 'login' ? "bg-background shadow-sm" : "text-muted-foreground")}>Login</button>
+            )}
+            {previewTabs.includes('dashboard') && (
+              <button onClick={() => setPreviewTab('dashboard')} className={cn("px-2 py-0.5 rounded text-[10px] transition-all", previewTab === 'dashboard' ? "bg-background shadow-sm" : "text-muted-foreground")}>Dashboard</button>
+            )}
+            {previewTabs.includes('chat') && (
+              <button onClick={() => setPreviewTab('chat')} className={cn("px-2 py-0.5 rounded text-[10px] transition-all", previewTab === 'chat' ? "bg-background shadow-sm" : "text-muted-foreground")}>Chat</button>
+            )}
+          </div>
+          <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+            <span>Mode: {editMode === 'light' ? 'Light' : 'Dark'}</span>
+            {editMode === 'light' ? <Sun className="h-3 w-3" /> : <Moon className="h-3 w-3" />}
+          </div>
+        </div>
+
+        {/* Preview Content */}
+        <div className="flex-1 overflow-hidden">
+          {previewTab === 'login' && <PreviewLogin assets={currentTheme.assets} isDark={editMode === 'dark'} />}
+          {previewTab === 'dashboard' && <PreviewDashboard />}
+          {previewTab === 'chat' && <PreviewChat />}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+WakaThemeCreatorBlock.displayName = "WakaThemeCreatorBlock"