diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index fb5b87be..5757fd09 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -16,16 +16,17 @@ import { WebSocketProvider } from "@/contexts/WS_Socket";
 import { registerAllWidgets } from "@/lib/registerWidgets";
 import TopNavigation from "@/components/TopNavigation";
 import Footer from "@/components/Footer";
-const GlobalDragDrop = React.lazy(() => import("@/components/GlobalDragDrop"));
 import { DragDropProvider } from "@/contexts/DragDropContext";
 import { useAppStore } from "@/store/appStore";
 
+const GlobalDragDrop = React.lazy(() => import("@/components/GlobalDragDrop"));
 // Register all widgets on app boot
 registerAllWidgets();
 
 
 import Index from "./pages/Index";
 import Auth from "./pages/Auth";
+
 const UpdatePassword = React.lazy(() => import("./pages/UpdatePassword"));
 
 import Profile from "./pages/Profile";
@@ -34,8 +35,8 @@ const Post = React.lazy(() => import("./modules/posts/PostPage"));
 import UserProfile from "./pages/UserProfile";
 import TagPage from "./pages/TagPage";
 import SearchResults from "./pages/SearchResults";
-const LogsPage = React.lazy(() => import("./components/logging/LogsPage"));
 
+const LogsPage = React.lazy(() => import("./components/logging/LogsPage"));
 const Wizard = React.lazy(() => import("./pages/Wizard"));
 const ProviderSettings = React.lazy(() => import("./pages/ProviderSettings"));
 const NotFound = React.lazy(() => import("./pages/NotFound"));
@@ -51,7 +52,6 @@ let VideoPlayerPlaygroundIntern: any;
 let PlaygroundImages: any;
 let PlaygroundImageEditor: any;
 let VideoGenPlayground: any;
-let GridSearchPlayground: any;
 let PlaygroundCanvas: any;
 let TypesPlayground: any;
 let VariablePlayground: any;
@@ -76,13 +76,11 @@ if (enablePlaygrounds) {
   PlaygroundImages = React.lazy(() => import("./pages/PlaygroundImages"));
   PlaygroundImageEditor = React.lazy(() => import("./pages/PlaygroundImageEditor"));
   VideoGenPlayground = React.lazy(() => import("./pages/VideoGenPlayground"));
-  GridSearchPlayground = React.lazy(() => import("./modules/places/GridSearchPlayground"));
   PlaygroundCanvas = React.lazy(() => import("./modules/layout/PlaygroundCanvas"));
   TypesPlayground = React.lazy(() => import("@/modules/types/TypesPlayground"));
   VariablePlayground = React.lazy(() => import("./components/variables/VariablesEditor").then(module => ({ default: module.VariablesEditor })));
   I18nPlayground = React.lazy(() => import("./components/playground/I18nPlayground"));
   PlaygroundChat = React.lazy(() => import("./pages/PlaygroundChat"));
-  PlacesModule = React.lazy(() => import("./modules/places/index"));
   LocationDetail = React.lazy(() => import("./modules/places/LocationDetail"));
   Tetris = React.lazy(() => import("./apps/tetris/Tetris"));
   FileBrowser = React.lazy(() => import("./apps/filebrowser/FileBrowser"));
@@ -101,7 +99,6 @@ const EditPost = React.lazy(() => import("./modules/posts/EditPost"));
 // <GlobalDebug />
 import { EcommerceBundleWrapper } from "./bundles/ecommerce";
 
-
 // Create a single tracker instance outside the component to avoid re-creation on re-renders
 /*
 const tracker = new Tracker({
@@ -114,25 +111,6 @@ tracker.use(trackerAssist());
 
 const AppWrapper = () => {
   const location = useLocation();
-  // Start tracker once on mount
-  /*
-  React.useEffect(() => {
-    
-    tracker.start().catch(() => {
-      // Silently ignore — DoNotTrack is active or browser doesn't support required APIs
-      console.log('OpenReplay tracker failed to start');
-    });
-    
-  }, []);
-
-  // Update user identity when auth state changes
-  React.useEffect(() => {
-    if (user?.email) {
-      tracker.setUserID(user.email);
-      tracker.setMetadata('roles', roles.join(','));
-    }
-  }, [user?.email, roles]);
-*/
   const searchParams = new URLSearchParams(location.search);
   const isPageEditor = location.pathname.includes('/pages/') && searchParams.get('edit') === 'true';
   const isFullScreenPage = location.pathname.startsWith('/video-feed') || isPageEditor;
@@ -206,7 +184,6 @@ const AppWrapper = () => {
           {/* Playground Routes */}
           {enablePlaygrounds && (
             <>
-              <Route path="/playground/gridsearch" element={<React.Suspense fallback={<div>Loading...</div>}><GridSearchPlayground /></React.Suspense>} />
               <Route path="/playground/images" element={<React.Suspense fallback={<div>Loading...</div>}><PlaygroundImages /></React.Suspense>} />
               <Route path="/playground/image-editor" element={<React.Suspense fallback={<div>Loading...</div>}><PlaygroundImageEditor /></React.Suspense>} />
               <Route path="/playground/video-generator" element={<React.Suspense fallback={<div>Loading...</div>}><VideoGenPlayground /></React.Suspense>} />
diff --git a/packages/ui/src/apps/filebrowser/FileBrowserPanel.tsx b/packages/ui/src/apps/filebrowser/FileBrowserPanel.tsx
index db31d29c..1b821ea4 100644
--- a/packages/ui/src/apps/filebrowser/FileBrowserPanel.tsx
+++ b/packages/ui/src/apps/filebrowser/FileBrowserPanel.tsx
@@ -1,869 +1,869 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Loader2 } from 'lucide-react';
-import { useAuth } from '@/hooks/useAuth';
-import ImageLightbox from '@/components/ImageLightbox';
-import LightboxText from '@/modules/storage/views/LightboxText';
-import LightboxIframe from '@/modules/storage/views/LightboxIframe';
-import { renderFileViewer } from '@/modules/storage/FileViewerRegistry';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
-
-import type { INode, SortKey } from '@/modules/storage/types';
-import { getMimeCategory, vfsUrl, formatSize } from '@/modules/storage/helpers';
-import FileBrowserToolbar from '@/modules/storage/FileBrowserToolbar';
-import FileListView from '@/modules/storage/FileListView';
-import FileGridView from '@/modules/storage/FileGridView';
-import FileDetailPanel from '@/modules/storage/FileDetailPanel';
-import MarkdownRenderer from '@/components/MarkdownRenderer';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { IMAGE_EXTS, VIDEO_EXTS, CODE_EXTS } from '@/modules/storage/helpers';
-import { T } from '@/i18n';
-
-import { useVfsAdapter } from '@/modules/storage/hooks/useVfsAdapter';
-import { useSelection } from '@/modules/storage/hooks/useSelection';
-import { useFilePreview } from '@/modules/storage/hooks/useFilePreview';
-import { useDefaultKeyboardHandler } from '@/modules/storage/hooks/useDefaultKeyboardHandler';
-import { useDefaultSelectionHandler } from '@/modules/storage/hooks/useDefaultSelectionHandler';
-import { useDefaultActions } from '@/modules/storage/hooks/useDefaultActions';
-import { FileTree } from './FileTree';
-import SearchDialog from './SearchDialog';
-
-// ── Props ────────────────────────────────────────────────────────
-
-export interface FileBrowserPanelProps {
-    mount?: string;
-    path?: string;
-    glob?: string;
-    mode?: 'simple' | 'advanced';
-    viewMode?: 'list' | 'thumbs' | 'tree';
-    sortBy?: SortKey;
-    showToolbar?: boolean;
-    canChangeMount?: boolean;
-    allowFileViewer?: boolean;
-    allowLightbox?: boolean;
-    allowPreview?: boolean;
-    allowDownload?: boolean;
-    jail?: boolean;
-    onPathChange?: (path: string) => void;
-    onMountChange?: (mount: string) => void;
-    /** If set, auto-open this file in lightbox after directory loads */
-    initialFile?: string;
-    /** If true, automatically loads and renders a readme.md (case-insensitive) in the current directory */
-    index?: boolean;
-    /** If true, allows the fallback FileBrowserPanel to render when no readme is found. */
-    allowFallback?: boolean;
-    /** ID for saving user preferences like viewMode locally (e.g. 'pm-filebrowser-left-panel') */
-    autoSaveId?: string;
-    showFolders?: boolean;
-    showExplorer?: boolean;
-    showPreview?: boolean;
-    showTree?: boolean;
-    onToggleExplorer?: () => void;
-    onTogglePreview?: () => void;
-    onFilterChange?: (glob: string, showFolders: boolean) => void;
-    onSelect?: (nodes: INode[] | INode | null) => void;
-    searchQuery?: string;
-    onSearchQueryChange?: (q: string) => void;
-    autoFocus?: boolean;
-    includeSize?: boolean;
-    splitSizeHorizontal?: number[];
-    splitSizeVertical?: number[];
-    onLayoutChange?: (sizes: number[], direction: 'horizontal' | 'vertical') => void;
-    showStatusBar?: boolean;
-}
-
-// ── Main Component ───────────────────────────────────────────────
-
-const FileBrowserPanel: React.FC<FileBrowserPanelProps> = ({
-    mount: mountProp = 'machines',
-    path: pathProp = '/',
-    glob = '*.*',
-    mode = 'simple',
-    viewMode: initialViewMode = 'list',
-    sortBy: initialSort = 'name',
-    showToolbar = true,
-    canChangeMount = false,
-    allowFileViewer = true,
-    allowLightbox = true,
-    allowPreview = true,
-    allowDownload = true,
-    jail = false,
-    initialFile,
-    allowFallback = true,
-    autoFocus = true,
-    includeSize = false,
-    index = true,
-    autoSaveId,
-    showFolders: showFoldersProp,
-    showExplorer = true,
-    showPreview = true,
-    showTree = true,
-    onToggleExplorer,
-    onTogglePreview,
-    onPathChange,
-    onMountChange,
-    onSelect,
-    onFilterChange,
-    searchQuery,
-    onSearchQueryChange,
-    splitSizeHorizontal,
-    splitSizeVertical,
-    onLayoutChange,
-    showStatusBar = true
-}) => {
-
-    const { session } = useAuth();
-    const accessToken = session?.access_token;
-
-    const [readmeContent, setReadmeContent] = useState<string | null>(null);
-    const [selectedReadmeContent, setSelectedReadmeContent] = useState<string | null>(null);
-
-    // ── Controlled / uncontrolled mode ────────────────────────────
-
-    const [internalMount, setInternalMount] = useState(mountProp);
-    const mount = onMountChange ? mountProp : internalMount;
-
-    const [internalGlob, setInternalGlob] = useState(glob);
-    const [internalShowFolders, setInternalShowFolders] = useState(true);
-    const actualCurrentGlob = onFilterChange ? glob : internalGlob;
-    const showFolders = onFilterChange ? (showFoldersProp ?? true) : internalShowFolders;
-
-    const updateFilter = useCallback((newGlob: string, newShowFolders: boolean) => {
-        if (onFilterChange) onFilterChange(newGlob, newShowFolders);
-        else {
-            setInternalGlob(newGlob);
-            setInternalShowFolders(newShowFolders);
-        }
-    }, [onFilterChange]);
-
-    // ── Available mounts ─────────────────────────────────────────
-
-    const [availableMounts, setAvailableMounts] = useState<string[]>([]);
-    useEffect(() => {
-        const headers: Record<string, string> = {};
-        if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
-        fetch('/api/vfs/mounts', { headers })
-            .then(r => r.ok ? r.json() : [])
-            .then((mounts: { name: string }[]) => setAvailableMounts(mounts.map(m => m.name)))
-            .catch(() => { });
-    }, [accessToken]);
-
-    // ── VFS Adapter ───────────────────────────────────────────────
-
-    const {
-        nodes,
-        sorted,
-        loading,
-        error,
-        currentPath,
-        currentGlob,
-        updatePath,
-        updateMount,
-        fetchDir,
-        canGoUp,
-        goUp: rawGoUp,
-        breadcrumbs,
-        jailRoot,
-        isSearchMode
-    } = useVfsAdapter({
-        mount,
-        pathProp,
-        glob: actualCurrentGlob,
-        showFolders,
-        accessToken,
-        index,
-        jail,
-        jailPath: pathProp,
-        sortBy: initialSort,
-        sortAsc: true,
-        includeSize,
-        searchQuery,
-        onPathChange,
-        onMountChange: (m) => {
-            setInternalMount(m);
-            if (onMountChange) onMountChange(m);
-        },
-        onFetched: async (fetchedNodes, isSearch) => {
-            setReadmeContent(null);
-            if (index && !isSearch) {
-                const readmeNode = fetchedNodes.find(n => n.name.toLowerCase() === 'readme.md');
-                if (readmeNode) {
-                    const tokenParam = accessToken ? `token=${encodeURIComponent(accessToken)}` : '';
-                    const base = vfsUrl('get', mount, readmeNode.path);
-                    const fileUrl = tokenParam ? `${base}?${tokenParam}` : base;
-                    const fileRes = await fetch(fileUrl, { cache: 'no-cache' });
-                    if (fileRes.ok) {
-                        const content = await fileRes.text();
-                        setReadmeContent(content);
-                    }
-                }
-            }
-        }
-    });
-
-    // ── View Mode & Zoom ─────────────────────────────────────────
-
-    const [internalViewMode, setInternalViewMode] = useState<'list' | 'thumbs' | 'tree'>(() => {
-        if (autoSaveId) {
-            const saved = localStorage.getItem(`${autoSaveId}-viewMode`);
-            if (saved === 'list' || saved === 'thumbs' || saved === 'tree') return saved;
-        }
-        return initialViewMode;
-    });
-
-    const [internalMode, setInternalMode] = useState<'simple' | 'advanced'>(() => {
-        if (autoSaveId) {
-            const saved = localStorage.getItem(`${autoSaveId}-mode`);
-            if (saved === 'simple' || saved === 'advanced') return saved;
-        }
-        return mode;
-    });
-
-    const setViewMode = useCallback((m: 'list' | 'thumbs' | 'tree') => {
-        setInternalViewMode(m);
-        if (autoSaveId) localStorage.setItem(`${autoSaveId}-viewMode`, m);
-    }, [autoSaveId]);
-
-    const setDisplayMode = useCallback((m: 'simple' | 'advanced') => {
-        setInternalMode(m);
-        if (autoSaveId) localStorage.setItem(`${autoSaveId}-mode`, m);
-    }, [autoSaveId]);
-
-    const [splitDirection, setSplitDirectionState] = useState<'horizontal' | 'vertical'>(() => {
-        if (autoSaveId) {
-            const saved = localStorage.getItem(`${autoSaveId}-splitDir`);
-            if (saved === 'horizontal' || saved === 'vertical') return saved;
-        }
-        return typeof window !== 'undefined' && window.innerWidth < 768 ? 'vertical' : 'horizontal';
-    });
-
-    const setSplitDirection = useCallback((m: 'horizontal' | 'vertical') => {
-        setSplitDirectionState(m);
-        if (autoSaveId) localStorage.setItem(`${autoSaveId}-splitDir`, m);
-    }, [autoSaveId]);
-
-    const viewMode = internalViewMode;
-    const currentMode = internalMode;
-    const activeSplitSize = splitDirection === 'horizontal' ? splitSizeHorizontal : splitSizeVertical;
-
-    const [thumbSize, setThumbSize] = useState(() => {
-        const v = localStorage.getItem('fb-thumb-size');
-        return v ? Math.max(60, Math.min(200, Number(v))) : 80;
-    });
-    const [fontSize, setFontSize] = useState(() => {
-        const v = localStorage.getItem('fb-font-size');
-        return v ? Math.max(10, Math.min(18, Number(v))) : 14;
-    });
-
-    const zoomIn = () => {
-        if (viewMode === 'thumbs') setThumbSize(s => { const n = Math.min(200, s + 20); localStorage.setItem('fb-thumb-size', String(n)); return n; });
-        else setFontSize(s => { const n = Math.min(18, s + 1); localStorage.setItem('fb-font-size', String(n)); return n; });
-    };
-    const zoomOut = () => {
-        if (viewMode === 'thumbs') setThumbSize(s => { const n = Math.max(60, s - 20); localStorage.setItem('fb-thumb-size', String(n)); return n; });
-        else setFontSize(s => { const n = Math.max(10, s - 1); localStorage.setItem('fb-font-size', String(n)); return n; });
-    };
-
-    // ── Selection & Refs ─────────────────────────────────────────
-
-    const listRef = useRef<HTMLDivElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const {
-        focusIdx,
-        setFocusIdx,
-        selected,
-        setSelected,
-        itemCount,
-        getNode,
-        handleItemClick,
-        clearSelection
-    } = useSelection({
-        sorted,
-        canGoUp,
-        onSelect
-    });
-
-    // Dummy Sort controls for now since useVfsAdapter uses static sortBy
-    const [sortBy, setSortBy] = useState<SortKey>(initialSort);
-    const [sortAsc, setSortAsc] = useState(true);
-    const cycleSort = () => {
-        const keys: SortKey[] = ['name', 'ext', 'date', 'type'];
-        const i = keys.indexOf(sortBy);
-        if (sortAsc) { setSortAsc(false); } else { setSortBy(keys[(i + 1) % keys.length]); setSortAsc(true); }
-    };
-
-    // ── Previews ─────────────────────────────────────────────────
-
-    const {
-        lightboxNode,
-        setLightboxNode,
-        textLightboxNode,
-        setTextLightboxNode,
-        iframeLightboxNode,
-        setIframeLightboxNode,
-        openPreview,
-        closeAllPreviews
-    } = useFilePreview({ allowLightbox, allowFileViewer });
-
-    // ── Filter Dialog State ────────────────────────────────────────
-
-    const [filterDialogOpen, setFilterDialogOpen] = useState(false);
-    const [tempGlob, setTempGlob] = useState(currentGlob);
-    const [tempShowFolders, setTempShowFolders] = useState(showFolders);
-
-    const applyTempFilter = () => {
-        updateFilter(tempGlob, tempShowFolders);
-        setFilterDialogOpen(false);
-        setTimeout(() => containerRef.current?.focus(), 0);
-    };
-
-    const mediaGlob = Array.from(new Set([...IMAGE_EXTS, ...VIDEO_EXTS])).map(ext => `*.${ext}`).join(',');
-    const codeGlob = Array.from(CODE_EXTS).map(ext => `*.${ext}`).join(',');
-
-    const tokenParam = accessToken ? `token=${encodeURIComponent(accessToken)}` : '';
-
-    // ── Standalone scroll & grid helpers (shared by keyboard + selection hooks) ──
-
-    const scrollItemIntoView = useCallback((idx: number) => {
-        if (!listRef.current) return;
-        const items = listRef.current.querySelectorAll('[data-fb-idx]');
-        const el = items[idx] as HTMLElement | undefined;
-        el?.scrollIntoView({ block: 'nearest' });
-    }, []);
-
-    const getGridCols = useCallback((): number => {
-        if (viewMode !== 'thumbs' || !listRef.current) return 1;
-        const style = getComputedStyle(listRef.current);
-        const cols = style.gridTemplateColumns.split(' ').length;
-        return Math.max(1, cols);
-    }, [viewMode]);
-
-    // ── Default Selection Handler (first so we get wrapped goUp) ──
-
-    const [pendingFileSelect, setPendingFileSelect] = useState<string | null>(null);
-
-    const { goUp } = useDefaultSelectionHandler({
-        sorted,
-        canGoUp,
-        rawGoUp,
-        currentPath,
-        loading,
-        viewMode,
-        autoFocus,
-        index,
-        isSearchMode,
-        initialFile,
-        allowFallback,
-        setFocusIdx,
-        setSelected,
-        onSelect,
-        pendingFileSelect,
-        setPendingFileSelect,
-        scrollItemIntoView,
-        containerRef,
-        listRef,
-    });
-
-    // ── Default Keyboard Handler (uses wrapped goUp) ─────────────
-
-    const {
-        searchOpen,
-        setSearchOpen,
-        searchDisplay,
-        searchBufferRef,
-        pendingSearchSelection,
-        setPendingSearchSelection,
-        handleKeyDown
-    } = useDefaultKeyboardHandler({
-        focusIdx,
-        setFocusIdx,
-        selected,
-        setSelected,
-        itemCount,
-        getNode,
-        clearSelection,
-        canGoUp,
-        goUp,
-        updatePath,
-        openPreview,
-        viewMode,
-        setViewMode,
-        setDisplayMode,
-        currentGlob,
-        showFolders,
-        cycleSort,
-        setTempGlob,
-        setTempShowFolders,
-        setFilterDialogOpen,
-        containerRef,
-        scrollItemIntoView,
-        getGridCols,
-        autoFocus,
-        allowFallback,
-        currentPath,
-        onSearchQueryChange,
-        searchQuery,
-        isSearchMode,
-        onSelect,
-        sorted,
-    });
-
-    // ── Default Actions ──────────────────────────────────────────
-
-    const {
-        selectedFile,
-        getFileUrl,
-        handleView,
-        handleDownload,
-        handleDownloadDir,
-        mediaNodes,
-        lightboxIdx,
-        lightboxPrev,
-        lightboxNext,
-        closeLightbox,
-        closeTextLightbox,
-        closeIframeLightbox,
-        handleDoubleClick,
-        handleLinkClick
-    } = useDefaultActions({
-        mount,
-        mountProp,
-        pathProp,
-        accessToken,
-        selected,
-        sorted,
-        canGoUp,
-        setFocusIdx,
-        setSelected,
-        lightboxNode,
-        setLightboxNode,
-        textLightboxNode,
-        setTextLightboxNode,
-        iframeLightboxNode,
-        setIframeLightboxNode,
-        openPreview,
-        updatePath,
-        setPendingFileSelect,
-        containerRef,
-        getNode,
-        goUp,
-    });
-
-    return (
-        <div
-            ref={containerRef}
-            data-testid="file-browser-panel"
-            tabIndex={viewMode === 'tree' ? undefined : 0}
-            className="fb-panel-container"
-            onKeyDown={handleKeyDown}
-            style={{
-                display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0,
-                border: '1px solid var(--border, #334155)', borderRadius: 6, overflow: 'hidden',
-
-                fontFamily: 'var(--font-sans, system-ui, sans-serif)', outline: 'none',
-            }}
-        >
-            <style>{`
-        @media (max-width: 767px) { 
-          .fb-detail-pane { display: none !important; }
-        }
-      `}</style>
-
-            {/* ═══ Toolbar ═══════════════════════════════════ */}
-            {showToolbar && (
-                <FileBrowserToolbar
-                    canGoUp={canGoUp}
-                    goUp={goUp}
-                    canChangeMount={!jail && canChangeMount}
-                    availableMounts={availableMounts}
-                    mount={mount}
-                    updateMount={updateMount}
-                    mountProp={mountProp}
-                    pathProp={pathProp}
-                    updatePath={updatePath}
-                    breadcrumbs={breadcrumbs}
-                    selectedNode={selected.length === 1 ? selected[0] : null}
-                    selectedNodes={selected}
-                    selectedFile={selectedFile}
-                    handleView={handleView}
-                    handleDownload={handleDownload}
-                    allowDownload={allowDownload && selected.length > 0}
-                    handleDownloadDir={handleDownloadDir}
-                    allowDownloadDir={allowDownload}
-                    sortBy={sortBy}
-                    sortAsc={sortAsc}
-                    cycleSort={cycleSort}
-                    zoomIn={zoomIn}
-                    zoomOut={zoomOut}
-                    viewMode={viewMode}
-                    setViewMode={setViewMode}
-                    displayMode={currentMode}
-                    setDisplayMode={setDisplayMode}
-                    splitDirection={splitDirection}
-                    setSplitDirection={setSplitDirection}
-                    showExplorer={showExplorer}
-                    onToggleExplorer={onToggleExplorer}
-                    showPreview={showPreview}
-                    onTogglePreview={onTogglePreview}
-                    onFilterOpen={() => {
-                        setTempGlob(currentGlob);
-                        setTempShowFolders(showFolders);
-                        setFilterDialogOpen(true);
-                    }}
-                    onSearchOpen={() => setSearchOpen(true)}
-                    fontSize={fontSize}
-                    isSearchMode={isSearchMode}
-                    onClearSearch={() => onSearchQueryChange && onSearchQueryChange('')}
-                />
-            )}
-
-            {/* ═══ Content ═══════════════════════════════════ */}
-            {loading ? (
-                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, opacity: 0.6 }}>
-                    <Loader2 size={16} className="animate-spin" />
-                    <span style={{ fontSize: 14 }}><T>Loading…</T></span>
-                </div>
-            ) : error ? (
-                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, fontSize: 14, color: '#ef4444' }}>
-                    <T>{error}</T>
-                </div>
-            ) : itemCount === 0 ? (
-                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, fontSize: 14, opacity: 0.5 }}>
-                    <T>Empty directory</T>
-                </div>
-            ) : (
-                <div style={{ display: 'flex', flex: 1, overflow: 'hidden', minHeight: 0 }}>
-
-                    <ResizablePanelGroup
-                        direction={splitDirection}
-                        onLayout={(sizes) => {
-                            if (onLayoutChange) onLayoutChange(sizes, splitDirection);
-                        }}
-                        {...(activeSplitSize && activeSplitSize.length > 0 ? {} : { autoSaveId: autoSaveId ? `${autoSaveId}-split-${splitDirection}` : `pm-filebrowser-panel-layout-${splitDirection}` })}
-                        className={`flex-1 flex overflow-hidden ${splitDirection === 'vertical' ? 'flex-col min-h-0' : 'flex-row min-w-0'}`}
-                    >
-                        {showExplorer && (
-                            <ResizablePanel defaultSize={activeSplitSize ? activeSplitSize[0] : 60} minSize={15} className="relative min-w-0 bg-white dark:bg-slate-800/50">
-                                <div className="w-full h-full flex flex-col min-h-[50px] min-w-0">
-                                    {viewMode === 'tree' ? (
-                                        <div className="flex-1 min-h-0 overflow-hidden pt-1">
-                                            <FileTree
-                                                data={sorted}
-                                                canGoUp={canGoUp}
-                                                onGoUp={goUp}
-                                                selectedId={selected.length === 1 ? selected[0].path : undefined}
-                                                fontSize={fontSize}
-                                                fetchChildren={async (node: INode) => {
-                                                    const clean = node.path.replace(/^\/+/, '');
-                                                    const base = vfsUrl('ls', mount, clean);
-                                                    const url = `${base}?includeSize=true`;
-                                                    const headers: Record<string, string> = {};
-                                                    if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
-                                                    const res = await fetch(url, { headers });
-                                                    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-                                                    return res.json();
-                                                }}
-                                                onSelectionChange={(nodes) => {
-                                                    setSelected(nodes);
-                                                }}
-                                                onSelect={(n) => {
-                                                    setSelected([n]);
-                                                }}
-                                                onActivate={(n) => {
-                                                    if (getMimeCategory(n) === 'dir') {
-                                                        updatePath(n.path || n.name);
-                                                    } else {
-                                                        openPreview(n);
-                                                    }
-                                                }}
-                                            />
-                                        </div>
-                                    ) : viewMode === 'list' ? (
-                                        <div className="flex-1 min-h-0 overflow-hidden pt-1 flex flex-col w-full h-full">
-                                            <FileListView
-                                                listRef={listRef}
-                                                sorted={sorted}
-                                                canGoUp={canGoUp}
-                                                goUp={goUp}
-                                                focusIdx={focusIdx}
-                                                setFocusIdx={setFocusIdx}
-                                                selected={selected}
-                                                onItemClick={handleItemClick}
-                                                onItemDoubleClick={handleDoubleClick}
-                                                fontSize={fontSize}
-                                                mode={currentMode}
-                                                searchBuffer={isSearchMode ? (searchQuery || searchDisplay) : searchDisplay}
-                                                isSearchMode={isSearchMode}
-                                            />
-                                        </div>
-                                    ) : (
-                                        <div className="flex-1 flex flex-col min-h-0 overflow-hidden w-full h-full pt-1">
-                                            <FileGridView
-                                                listRef={listRef}
-                                                sorted={sorted}
-                                                canGoUp={canGoUp}
-                                                goUp={goUp}
-                                                focusIdx={focusIdx}
-                                                setFocusIdx={setFocusIdx}
-                                                selected={selected}
-                                                onItemClick={handleItemClick}
-                                                onItemDoubleClick={handleDoubleClick}
-                                                thumbSize={thumbSize}
-                                                mount={mount}
-                                                tokenParam={tokenParam}
-                                                fontSize={fontSize}
-                                                isSearchMode={isSearchMode}
-                                            />
-                                        </div>
-                                    )}
-                                </div>
-                            </ResizablePanel>
-                        )}
-
-                        {/* Right Pane conditionally renders if preview or fallback exists */}
-                        {showPreview && ((!showExplorer && selected.length === 1) || (allowPreview && selected.length === 1 && getMimeCategory(selected[0]) !== 'dir') || (selected.length === 0 && readmeContent) || (allowPreview && selectedReadmeContent) || (allowPreview && allowFallback && selected.length === 1 && getMimeCategory(selected[0]) === 'dir')) && (
-                            <>
-                                {showExplorer && <ResizableHandle withHandle />}
-                                <ResizablePanel defaultSize={activeSplitSize && activeSplitSize.length > 1 ? activeSplitSize[1] : (showExplorer ? 40 : 100)} minSize={15} className="relative min-w-0 bg-card/30">
-                                    <div className="w-full h-full flex flex-col min-h-[50px] min-w-0">
-                                        {((!showExplorer && selected.length === 1 && getMimeCategory(selected[0]) !== 'dir') || (allowPreview && selected.length === 1 && getMimeCategory(selected[0]) !== 'dir')) ? (
-                                            <div className="fb-readme-pane shrink-0 border-t md:border-t-0 border-border overflow-hidden w-full h-full relative flex flex-1 flex-col min-h-0">
-                                                {renderFileViewer({
-                                                    selected: selected[0],
-                                                    url: getFileUrl(selected[0]),
-                                                    fileName: selected[0].name,
-                                                    inline: true,
-                                                    isOpen: true,
-                                                    onClose: () => { },
-                                                    onLinkClick: (href, e) => handleLinkClick(href, e, selected[0].parent || '/')
-                                                })}
-                                            </div>
-                                        ) : ((selected.length === 0 && readmeContent) || (allowPreview && selectedReadmeContent)) ? (
-                                            <div className="fb-readme-pane shrink-0 p-6 border-t md:border-t-0 border-border overflow-y-auto flex-1 w-full h-full">
-                                                <MarkdownRenderer
-                                                    content={selectedReadmeContent || readmeContent || ''}
-                                                    baseUrl={
-                                                        selectedReadmeContent && selected.length === 1
-                                                            ? vfsUrl('get', mount, selected[0].path) + '/'
-                                                            : vfsUrl('get', mount, currentPath) + '/'
-                                                    }
-                                                    onLinkClick={(href, e) => {
-                                                        const basePath = (selectedReadmeContent && selected.length === 1)
-                                                            ? (selected[0].parent || '/')
-                                                            : currentPath;
-                                                        handleLinkClick(href, e, basePath);
-                                                    }}
-                                                />
-                                            </div>
-                                        ) : (allowPreview && allowFallback && selected.length === 1 && getMimeCategory(selected[0]) === 'dir') ? (
-                                            <div className="fb-readme-pane flex shrink-0 border-t md:border-t-0 border-border flex-1 flex-col min-h-0 overflow-hidden relative w-full h-full">
-                                                <FileBrowserPanel
-                                                    mount={mount}
-                                                    path={selected[0].path}
-                                                    viewMode="thumbs"
-                                                    showToolbar={false}
-                                                    mode="simple"
-                                                    jail={true}
-                                                    allowFallback={false}
-                                                    index={false}
-                                                    autoFocus={false}
-                                                    showStatusBar={false}
-                                                />
-                                            </div>
-                                        ) : null}
-                                    </div>
-                                </ResizablePanel>
-                            </>
-                        )}
-                    </ResizablePanelGroup>
-
-                    {/* Detail panel (advanced, desktop only) */}
-
-
-                    {/* Detail panel (advanced, desktop only) */}
-                    {mode === 'advanced' && (
-                        <FileDetailPanel file={selected.length === 1 ? selected[0] : null} fileUrl={selected.length === 1 ? getFileUrl(selected[0]) : ''} />
-                    )}
-                </div>
-            )}
-
-            {showStatusBar && <div style={{
-                padding: '4px 10px', fontSize: 13, borderTop: '2px solid var(--border)',
-                color: 'var(--muted-foreground)', display: 'flex', justifyContent: 'space-between',
-                background: 'var(--muted)', width: '100%', overflow: 'hidden', gap: '8px'
-            }}>
-                <span
-                    title={`${sorted.length} ${sorted.length !== 1 ? 'items' : 'item'} · ${formatSize(sorted.reduce((sum, n) => sum + (n.size || 0), 0))}${selectedFile ? ` · ${selectedFile.name} (${formatSize(selectedFile.size)})` : ''}`}
-                    style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-                >
-                    {sorted.length} <T>{sorted.length !== 1 ? 'items' : 'item'}</T>
-                    {' · '}{formatSize(sorted.reduce((sum, n) => sum + (n.size || 0), 0))}
-                    {selectedFile ? ` · ${selectedFile.name} (${formatSize(selectedFile.size)})` : ''}
-                </span>
-                <span
-                    title={`${mount}:${currentPath || '/'}`}
-                    style={{
-                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
-                        flexShrink: 1, textAlign: 'right', minWidth: 50, maxWidth: '50%'
-                    }}
-                >
-                    {mount}:{currentPath || '/'}
-                </span>
-            </div>}
-
-            {/* ═══ Lightboxes ════════════════════════════════ */}
-            <ImageLightbox
-                isOpen={!!lightboxNode}
-                onClose={closeLightbox}
-                imageUrl={lightboxNode ? getFileUrl(lightboxNode) : ''}
-                imageTitle={lightboxNode?.name || ''}
-                currentIndex={lightboxIdx}
-                totalCount={mediaNodes.length}
-                onNavigate={(dir) => dir === 'prev' ? lightboxPrev() : lightboxNext()}
-                showPrompt={false}
-            />
-            <LightboxText
-                isOpen={!!textLightboxNode}
-                onClose={closeTextLightbox}
-                url={textLightboxNode ? getFileUrl(textLightboxNode) : ''}
-                fileName={textLightboxNode?.name || ''}
-            />
-            <LightboxIframe
-                isOpen={!!iframeLightboxNode}
-                onClose={closeIframeLightbox}
-                url={iframeLightboxNode ? getFileUrl(iframeLightboxNode) : ''}
-                fileName={iframeLightboxNode?.name || ''}
-            />
-
-            {/* ── Dialogs ───────────────────────────────────────────── */}
-            {filterDialogOpen && (
-                <Dialog open={filterDialogOpen} onOpenChange={(open) => {
-                    if (!open) {
-                        setFilterDialogOpen(false);
-                        setTimeout(() => containerRef.current?.focus(), 0);
-                    }
-                }}>
-                    <DialogContent className="sm:max-w-md">
-                        <DialogHeader>
-                            <DialogTitle><T>Filter Current View</T></DialogTitle>
-                            <DialogDescription>
-                                <T>Enter a list of comma-separated wildcard matcher expressions (e.g., *.jpg, *.png) or use a preset below.</T>
-                            </DialogDescription>
-                        </DialogHeader>
-                        <div className="grid gap-4 py-4">
-                            <div className="flex items-center justify-between">
-                                <Label htmlFor="showFolders" className="flex flex-col gap-1">
-                                    <span><T>Show Folders</T></span>
-                                    <span className="font-normal text-xs text-muted-foreground"><T>Keep subdirectories visible alongside matched files</T></span>
-                                </Label>
-                                <Switch
-                                    id="showFolders"
-                                    checked={tempShowFolders}
-                                    onCheckedChange={setTempShowFolders}
-                                />
-                            </div>
-                            <div className="grid gap-2">
-                                <Label htmlFor="globPattern">Glob Pattern</Label>
-                                <Input
-                                    id="globPattern"
-                                    value={tempGlob}
-                                    onChange={(e) => setTempGlob(e.target.value)}
-                                    onKeyDown={(e) => {
-                                        if (e.key === 'Enter') {
-                                            e.preventDefault();
-                                            applyTempFilter();
-                                        }
-                                    }}
-                                    autoFocus
-                                    placeholder="*.*"
-                                />
-                            </div>
-                            <div className="flex flex-wrap gap-2 mt-2">
-                                <Badge variant="outline" className="cursor-pointer hover:bg-muted" onClick={() => setTempGlob('*.*')}>
-                                    All Files (*.*)
-                                </Badge>
-                                <Badge variant="outline" className="cursor-pointer hover:bg-muted" onClick={() => setTempGlob(mediaGlob)}>
-                                    Media
-                                </Badge>
-                                <Badge variant="outline" className="cursor-pointer hover:bg-muted" onClick={() => setTempGlob(codeGlob)}>
-                                    Code
-                                </Badge>
-                            </div>
-                        </div>
-                        <div className="flex justify-end gap-3 w-full">
-                            <Button variant="outline" onClick={() => {
-                                setFilterDialogOpen(false);
-                                setTimeout(() => containerRef.current?.focus(), 0);
-                            }}>
-                                Cancel
-                            </Button>
-                            <Button onClick={applyTempFilter}>
-                                Apply Filter
-                            </Button>
-                        </div>
-                    </DialogContent>
-                </Dialog>
-            )}
-
-            {/* Search dialog */}
-            {searchOpen && (
-                <SearchDialog
-                    mount={mount}
-                    currentPath={currentPath}
-                    accessToken={accessToken}
-                    onNavigate={(node: INode) => {
-                        const isDir = getMimeCategory(node) === 'dir';
-
-                        if (isDir) {
-                            updatePath(node.path.startsWith('/') ? node.path : `/${node.path}`);
-                        } else {
-                            const parentPath = node.parent || '/';
-
-                            const currentTarget = parentPath.startsWith('/') ? parentPath : `/${parentPath}`;
-                            const normalizedCurrent = currentPath.replace(/\/+$/, '') || '/';
-                            const normalizedTarget = currentTarget.replace(/\/+$/, '') || '/';
-
-                            if (normalizedTarget !== normalizedCurrent) {
-                                setPendingSearchSelection(node.name);
-                                updatePath(currentTarget);
-                            } else {
-                                const idx = sorted.findIndex(n => n.name === node.name);
-                                if (idx >= 0) {
-                                    const focusIndex = canGoUp ? idx + 1 : idx;
-                                    setFocusIdx(focusIndex);
-                                    const itemNode = sorted[idx];
-                                    if (itemNode) {
-                                        const newlySelected = [itemNode];
-                                        setSelected(newlySelected);
-                                        if (onSelect) {
-                                            onSelect(newlySelected);
-                                        }
-                                        requestAnimationFrame(() => scrollItemIntoView(focusIndex));
-                                    }
-                                }
-                            }
-                        }
-                    }}
-                    onClose={() => {
-                        setSearchOpen(false);
-                        setTimeout(() => {
-                            if (viewMode === 'tree') {
-                                listRef.current?.focus();
-                            } else {
-                                containerRef.current?.focus();
-                            }
-                        }, 0);
-                    }}
-                />
-            )}
-        </div>
-    );
-};
-
-export { FileBrowserPanel };
-export default FileBrowserPanel;
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Loader2 } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import ImageLightbox from '@/components/ImageLightbox';
+import LightboxText from '@/modules/storage/views/LightboxText';
+import LightboxIframe from '@/modules/storage/views/LightboxIframe';
+import { renderFileViewer } from '@/modules/storage/FileViewerRegistry';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
+
+import type { INode, SortKey } from '@/modules/storage/types';
+import { getMimeCategory, vfsUrl, formatSize } from '@/modules/storage/helpers';
+import FileBrowserToolbar from '@/modules/storage/FileBrowserToolbar';
+import FileListView from '@/modules/storage/FileListView';
+import FileGridView from '@/modules/storage/FileGridView';
+import FileDetailPanel from '@/modules/storage/FileDetailPanel';
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { IMAGE_EXTS, VIDEO_EXTS, CODE_EXTS } from '@/modules/storage/helpers';
+import { T } from '@/i18n';
+
+import { useVfsAdapter } from '@/modules/storage/hooks/useVfsAdapter';
+import { useSelection } from '@/modules/storage/hooks/useSelection';
+import { useFilePreview } from '@/modules/storage/hooks/useFilePreview';
+import { useDefaultKeyboardHandler } from '@/modules/storage/hooks/useDefaultKeyboardHandler';
+import { useDefaultSelectionHandler } from '@/modules/storage/hooks/useDefaultSelectionHandler';
+import { useDefaultActions } from '@/modules/storage/hooks/useDefaultActions';
+import { FileTree } from './FileTree';
+import SearchDialog from './SearchDialog';
+
+// ── Props ────────────────────────────────────────────────────────
+
+export interface FileBrowserPanelProps {
+    mount?: string;
+    path?: string;
+    glob?: string;
+    mode?: 'simple' | 'advanced';
+    viewMode?: 'list' | 'thumbs' | 'tree';
+    sortBy?: SortKey;
+    showToolbar?: boolean;
+    canChangeMount?: boolean;
+    allowFileViewer?: boolean;
+    allowLightbox?: boolean;
+    allowPreview?: boolean;
+    allowDownload?: boolean;
+    jail?: boolean;
+    onPathChange?: (path: string) => void;
+    onMountChange?: (mount: string) => void;
+    /** If set, auto-open this file in lightbox after directory loads */
+    initialFile?: string;
+    /** If true, automatically loads and renders a readme.md (case-insensitive) in the current directory */
+    index?: boolean;
+    /** If true, allows the fallback FileBrowserPanel to render when no readme is found. */
+    allowFallback?: boolean;
+    /** ID for saving user preferences like viewMode locally (e.g. 'pm-filebrowser-left-panel') */
+    autoSaveId?: string;
+    showFolders?: boolean;
+    showExplorer?: boolean;
+    showPreview?: boolean;
+    showTree?: boolean;
+    onToggleExplorer?: () => void;
+    onTogglePreview?: () => void;
+    onFilterChange?: (glob: string, showFolders: boolean) => void;
+    onSelect?: (nodes: INode[] | INode | null) => void;
+    searchQuery?: string;
+    onSearchQueryChange?: (q: string) => void;
+    autoFocus?: boolean;
+    includeSize?: boolean;
+    splitSizeHorizontal?: number[];
+    splitSizeVertical?: number[];
+    onLayoutChange?: (sizes: number[], direction: 'horizontal' | 'vertical') => void;
+    showStatusBar?: boolean;
+}
+
+// ── Main Component ───────────────────────────────────────────────
+
+const FileBrowserPanel: React.FC<FileBrowserPanelProps> = ({
+    mount: mountProp = 'machines',
+    path: pathProp = '/',
+    glob = '*.*',
+    mode = 'simple',
+    viewMode: initialViewMode = 'list',
+    sortBy: initialSort = 'name',
+    showToolbar = true,
+    canChangeMount = false,
+    allowFileViewer = true,
+    allowLightbox = true,
+    allowPreview = true,
+    allowDownload = true,
+    jail = false,
+    initialFile,
+    allowFallback = true,
+    autoFocus = true,
+    includeSize = false,
+    index = true,
+    autoSaveId,
+    showFolders: showFoldersProp,
+    showExplorer = true,
+    showPreview = true,
+    showTree = true,
+    onToggleExplorer,
+    onTogglePreview,
+    onPathChange,
+    onMountChange,
+    onSelect,
+    onFilterChange,
+    searchQuery,
+    onSearchQueryChange,
+    splitSizeHorizontal,
+    splitSizeVertical,
+    onLayoutChange,
+    showStatusBar = true
+}) => {
+
+    const { session } = useAuth();
+    const accessToken = session?.access_token;
+
+    const [readmeContent, setReadmeContent] = useState<string | null>(null);
+    const [selectedReadmeContent, setSelectedReadmeContent] = useState<string | null>(null);
+
+    // ── Controlled / uncontrolled mode ────────────────────────────
+
+    const [internalMount, setInternalMount] = useState(mountProp);
+    const mount = onMountChange ? mountProp : internalMount;
+
+    const [internalGlob, setInternalGlob] = useState(glob);
+    const [internalShowFolders, setInternalShowFolders] = useState(true);
+    const actualCurrentGlob = onFilterChange ? glob : internalGlob;
+    const showFolders = onFilterChange ? (showFoldersProp ?? true) : internalShowFolders;
+
+    const updateFilter = useCallback((newGlob: string, newShowFolders: boolean) => {
+        if (onFilterChange) onFilterChange(newGlob, newShowFolders);
+        else {
+            setInternalGlob(newGlob);
+            setInternalShowFolders(newShowFolders);
+        }
+    }, [onFilterChange]);
+
+    // ── Available mounts ─────────────────────────────────────────
+
+    const [availableMounts, setAvailableMounts] = useState<string[]>([]);
+    useEffect(() => {
+        const headers: Record<string, string> = {};
+        if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
+        fetch('/api/vfs/mounts', { headers })
+            .then(r => r.ok ? r.json() : [])
+            .then((mounts: { name: string }[]) => setAvailableMounts(mounts.map(m => m.name)))
+            .catch(() => { });
+    }, [accessToken]);
+
+    // ── VFS Adapter ───────────────────────────────────────────────
+
+    const {
+        nodes,
+        sorted,
+        loading,
+        error,
+        currentPath,
+        currentGlob,
+        updatePath,
+        updateMount,
+        fetchDir,
+        canGoUp,
+        goUp: rawGoUp,
+        breadcrumbs,
+        jailRoot,
+        isSearchMode
+    } = useVfsAdapter({
+        mount,
+        pathProp,
+        glob: actualCurrentGlob,
+        showFolders,
+        accessToken,
+        index,
+        jail,
+        jailPath: pathProp,
+        sortBy: initialSort,
+        sortAsc: true,
+        includeSize,
+        searchQuery,
+        onPathChange,
+        onMountChange: (m) => {
+            setInternalMount(m);
+            if (onMountChange) onMountChange(m);
+        },
+        onFetched: async (fetchedNodes, isSearch) => {
+            setReadmeContent(null);
+            if (index && !isSearch) {
+                const readmeNode = fetchedNodes.find(n => n.name.toLowerCase() === 'readme.md');
+                if (readmeNode) {
+                    const tokenParam = accessToken ? `token=${encodeURIComponent(accessToken)}` : '';
+                    const base = vfsUrl('get', mount, readmeNode.path);
+                    const fileUrl = tokenParam ? `${base}?${tokenParam}` : base;
+                    const fileRes = await fetch(fileUrl, { cache: 'no-cache' });
+                    if (fileRes.ok) {
+                        const content = await fileRes.text();
+                        setReadmeContent(content);
+                    }
+                }
+            }
+        }
+    });
+
+    // ── View Mode & Zoom ─────────────────────────────────────────
+
+    const [internalViewMode, setInternalViewMode] = useState<'list' | 'thumbs' | 'tree'>(() => {
+        if (autoSaveId) {
+            const saved = localStorage.getItem(`${autoSaveId}-viewMode`);
+            if (saved === 'list' || saved === 'thumbs' || saved === 'tree') return saved;
+        }
+        return initialViewMode;
+    });
+
+    const [internalMode, setInternalMode] = useState<'simple' | 'advanced'>(() => {
+        if (autoSaveId) {
+            const saved = localStorage.getItem(`${autoSaveId}-mode`);
+            if (saved === 'simple' || saved === 'advanced') return saved;
+        }
+        return mode;
+    });
+
+    const setViewMode = useCallback((m: 'list' | 'thumbs' | 'tree') => {
+        setInternalViewMode(m);
+        if (autoSaveId) localStorage.setItem(`${autoSaveId}-viewMode`, m);
+    }, [autoSaveId]);
+
+    const setDisplayMode = useCallback((m: 'simple' | 'advanced') => {
+        setInternalMode(m);
+        if (autoSaveId) localStorage.setItem(`${autoSaveId}-mode`, m);
+    }, [autoSaveId]);
+
+    const [splitDirection, setSplitDirectionState] = useState<'horizontal' | 'vertical'>(() => {
+        if (autoSaveId) {
+            const saved = localStorage.getItem(`${autoSaveId}-splitDir`);
+            if (saved === 'horizontal' || saved === 'vertical') return saved;
+        }
+        return typeof window !== 'undefined' && window.innerWidth < 768 ? 'vertical' : 'horizontal';
+    });
+
+    const setSplitDirection = useCallback((m: 'horizontal' | 'vertical') => {
+        setSplitDirectionState(m);
+        if (autoSaveId) localStorage.setItem(`${autoSaveId}-splitDir`, m);
+    }, [autoSaveId]);
+
+    const viewMode = internalViewMode;
+    const currentMode = internalMode;
+    const activeSplitSize = splitDirection === 'horizontal' ? splitSizeHorizontal : splitSizeVertical;
+
+    const [thumbSize, setThumbSize] = useState(() => {
+        const v = localStorage.getItem('fb-thumb-size');
+        return v ? Math.max(60, Math.min(200, Number(v))) : 80;
+    });
+    const [fontSize, setFontSize] = useState(() => {
+        const v = localStorage.getItem('fb-font-size');
+        return v ? Math.max(10, Math.min(18, Number(v))) : 14;
+    });
+
+    const zoomIn = () => {
+        if (viewMode === 'thumbs') setThumbSize(s => { const n = Math.min(200, s + 20); localStorage.setItem('fb-thumb-size', String(n)); return n; });
+        else setFontSize(s => { const n = Math.min(18, s + 1); localStorage.setItem('fb-font-size', String(n)); return n; });
+    };
+    const zoomOut = () => {
+        if (viewMode === 'thumbs') setThumbSize(s => { const n = Math.max(60, s - 20); localStorage.setItem('fb-thumb-size', String(n)); return n; });
+        else setFontSize(s => { const n = Math.max(10, s - 1); localStorage.setItem('fb-font-size', String(n)); return n; });
+    };
+
+    // ── Selection & Refs ─────────────────────────────────────────
+
+    const listRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const {
+        focusIdx,
+        setFocusIdx,
+        selected,
+        setSelected,
+        itemCount,
+        getNode,
+        handleItemClick,
+        clearSelection
+    } = useSelection({
+        sorted,
+        canGoUp,
+        onSelect
+    });
+
+    // Dummy Sort controls for now since useVfsAdapter uses static sortBy
+    const [sortBy, setSortBy] = useState<SortKey>(initialSort);
+    const [sortAsc, setSortAsc] = useState(true);
+    const cycleSort = () => {
+        const keys: SortKey[] = ['name', 'ext', 'date', 'type'];
+        const i = keys.indexOf(sortBy);
+        if (sortAsc) { setSortAsc(false); } else { setSortBy(keys[(i + 1) % keys.length]); setSortAsc(true); }
+    };
+
+    // ── Previews ─────────────────────────────────────────────────
+
+    const {
+        lightboxNode,
+        setLightboxNode,
+        textLightboxNode,
+        setTextLightboxNode,
+        iframeLightboxNode,
+        setIframeLightboxNode,
+        openPreview,
+        closeAllPreviews
+    } = useFilePreview({ allowLightbox, allowFileViewer });
+
+    // ── Filter Dialog State ────────────────────────────────────────
+
+    const [filterDialogOpen, setFilterDialogOpen] = useState(false);
+    const [tempGlob, setTempGlob] = useState(currentGlob);
+    const [tempShowFolders, setTempShowFolders] = useState(showFolders);
+
+    const applyTempFilter = () => {
+        updateFilter(tempGlob, tempShowFolders);
+        setFilterDialogOpen(false);
+        setTimeout(() => containerRef.current?.focus(), 0);
+    };
+
+    const mediaGlob = Array.from(new Set([...IMAGE_EXTS, ...VIDEO_EXTS])).map(ext => `*.${ext}`).join(',');
+    const codeGlob = Array.from(CODE_EXTS).map(ext => `*.${ext}`).join(',');
+
+    const tokenParam = accessToken ? `token=${encodeURIComponent(accessToken)}` : '';
+
+    // ── Standalone scroll & grid helpers (shared by keyboard + selection hooks) ──
+
+    const scrollItemIntoView = useCallback((idx: number) => {
+        if (!listRef.current) return;
+        const items = listRef.current.querySelectorAll('[data-fb-idx]');
+        const el = items[idx] as HTMLElement | undefined;
+        el?.scrollIntoView({ block: 'nearest' });
+    }, []);
+
+    const getGridCols = useCallback((): number => {
+        if (viewMode !== 'thumbs' || !listRef.current) return 1;
+        const style = getComputedStyle(listRef.current);
+        const cols = style.gridTemplateColumns.split(' ').length;
+        return Math.max(1, cols);
+    }, [viewMode]);
+
+    // ── Default Selection Handler (first so we get wrapped goUp) ──
+
+    const [pendingFileSelect, setPendingFileSelect] = useState<string | null>(null);
+
+    const { goUp } = useDefaultSelectionHandler({
+        sorted,
+        canGoUp,
+        rawGoUp,
+        currentPath,
+        loading,
+        viewMode,
+        autoFocus,
+        index,
+        isSearchMode,
+        initialFile,
+        allowFallback,
+        setFocusIdx,
+        setSelected,
+        onSelect,
+        pendingFileSelect,
+        setPendingFileSelect,
+        scrollItemIntoView,
+        containerRef,
+        listRef,
+    });
+
+    // ── Default Keyboard Handler (uses wrapped goUp) ─────────────
+
+    const {
+        searchOpen,
+        setSearchOpen,
+        searchDisplay,
+        searchBufferRef,
+        pendingSearchSelection,
+        setPendingSearchSelection,
+        handleKeyDown
+    } = useDefaultKeyboardHandler({
+        focusIdx,
+        setFocusIdx,
+        selected,
+        setSelected,
+        itemCount,
+        getNode,
+        clearSelection,
+        canGoUp,
+        goUp,
+        updatePath,
+        openPreview,
+        viewMode,
+        setViewMode,
+        setDisplayMode,
+        currentGlob,
+        showFolders,
+        cycleSort,
+        setTempGlob,
+        setTempShowFolders,
+        setFilterDialogOpen,
+        containerRef,
+        scrollItemIntoView,
+        getGridCols,
+        autoFocus,
+        allowFallback,
+        currentPath,
+        onSearchQueryChange,
+        searchQuery,
+        isSearchMode,
+        onSelect,
+        sorted,
+    });
+
+    // ── Default Actions ──────────────────────────────────────────
+
+    const {
+        selectedFile,
+        getFileUrl,
+        handleView,
+        handleDownload,
+        handleDownloadDir,
+        mediaNodes,
+        lightboxIdx,
+        lightboxPrev,
+        lightboxNext,
+        closeLightbox,
+        closeTextLightbox,
+        closeIframeLightbox,
+        handleDoubleClick,
+        handleLinkClick
+    } = useDefaultActions({
+        mount,
+        mountProp,
+        pathProp,
+        accessToken,
+        selected,
+        sorted,
+        canGoUp,
+        setFocusIdx,
+        setSelected,
+        lightboxNode,
+        setLightboxNode,
+        textLightboxNode,
+        setTextLightboxNode,
+        iframeLightboxNode,
+        setIframeLightboxNode,
+        openPreview,
+        updatePath,
+        setPendingFileSelect,
+        containerRef,
+        getNode,
+        goUp,
+    });
+
+    return (
+        <div
+            ref={containerRef}
+            data-testid="file-browser-panel"
+            tabIndex={viewMode === 'tree' ? undefined : 0}
+            className="fb-panel-container"
+            onKeyDown={handleKeyDown}
+            style={{
+                display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0,
+                border: '1px solid var(--border, #334155)', borderRadius: 6, overflow: 'hidden',
+
+                fontFamily: 'var(--font-sans, system-ui, sans-serif)', outline: 'none',
+            }}
+        >
+            <style>{`
+        @media (max-width: 767px) { 
+          .fb-detail-pane { display: none !important; }
+        }
+      `}</style>
+
+            {/* ═══ Toolbar ═══════════════════════════════════ */}
+            {showToolbar && (
+                <FileBrowserToolbar
+                    canGoUp={canGoUp}
+                    goUp={goUp}
+                    canChangeMount={!jail && canChangeMount}
+                    availableMounts={availableMounts}
+                    mount={mount}
+                    updateMount={updateMount}
+                    mountProp={mountProp}
+                    pathProp={pathProp}
+                    updatePath={updatePath}
+                    breadcrumbs={breadcrumbs}
+                    selectedNode={selected.length === 1 ? selected[0] : null}
+                    selectedNodes={selected}
+                    selectedFile={selectedFile}
+                    handleView={handleView}
+                    handleDownload={handleDownload}
+                    allowDownload={allowDownload && selected.length > 0}
+                    handleDownloadDir={handleDownloadDir}
+                    allowDownloadDir={allowDownload}
+                    sortBy={sortBy}
+                    sortAsc={sortAsc}
+                    cycleSort={cycleSort}
+                    zoomIn={zoomIn}
+                    zoomOut={zoomOut}
+                    viewMode={viewMode}
+                    setViewMode={setViewMode}
+                    displayMode={currentMode}
+                    setDisplayMode={setDisplayMode}
+                    splitDirection={splitDirection}
+                    setSplitDirection={setSplitDirection}
+                    showExplorer={showExplorer}
+                    onToggleExplorer={onToggleExplorer}
+                    showPreview={showPreview}
+                    onTogglePreview={onTogglePreview}
+                    onFilterOpen={() => {
+                        setTempGlob(currentGlob);
+                        setTempShowFolders(showFolders);
+                        setFilterDialogOpen(true);
+                    }}
+                    onSearchOpen={() => setSearchOpen(true)}
+                    fontSize={fontSize}
+                    isSearchMode={isSearchMode}
+                    onClearSearch={() => onSearchQueryChange && onSearchQueryChange('')}
+                />
+            )}
+
+            {/* ═══ Content ═══════════════════════════════════ */}
+            {loading ? (
+                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, opacity: 0.6 }}>
+                    <Loader2 size={16} className="animate-spin" />
+                    <span style={{ fontSize: 14 }}><T>Loading…</T></span>
+                </div>
+            ) : error ? (
+                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, fontSize: 14, color: '#ef4444' }}>
+                    <T>{error}</T>
+                </div>
+            ) : itemCount === 0 ? (
+                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, fontSize: 14, opacity: 0.5 }}>
+                    <T>Empty directory</T>
+                </div>
+            ) : (
+                <div style={{ display: 'flex', flex: 1, overflow: 'hidden', minHeight: 0 }}>
+
+                    <ResizablePanelGroup
+                        direction={splitDirection}
+                        onLayout={(sizes) => {
+                            if (onLayoutChange) onLayoutChange(sizes, splitDirection);
+                        }}
+                        {...(activeSplitSize && activeSplitSize.length > 0 ? {} : { autoSaveId: autoSaveId ? `${autoSaveId}-split-${splitDirection}` : `pm-filebrowser-panel-layout-${splitDirection}` })}
+                        className={`flex-1 flex overflow-hidden ${splitDirection === 'vertical' ? 'flex-col min-h-0' : 'flex-row min-w-0'}`}
+                    >
+                        {showExplorer && (
+                            <ResizablePanel defaultSize={activeSplitSize ? activeSplitSize[0] : 60} minSize={15} className="relative min-w-0 bg-white dark:bg-slate-800/50">
+                                <div className="w-full h-full flex flex-col min-h-[50px] min-w-0">
+                                    {viewMode === 'tree' ? (
+                                        <div className="flex-1 min-h-0 overflow-hidden pt-1">
+                                            <FileTree
+                                                data={sorted}
+                                                canGoUp={canGoUp}
+                                                onGoUp={goUp}
+                                                selectedId={selected.length === 1 ? selected[0].path : undefined}
+                                                fontSize={fontSize}
+                                                fetchChildren={async (node: INode) => {
+                                                    const clean = node.path.replace(/^\/+/, '');
+                                                    const base = vfsUrl('ls', mount, clean);
+                                                    const url = `${base}?includeSize=true`;
+                                                    const headers: Record<string, string> = {};
+                                                    if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
+                                                    const res = await fetch(url, { headers });
+                                                    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+                                                    return res.json();
+                                                }}
+                                                onSelectionChange={(nodes) => {
+                                                    setSelected(nodes);
+                                                }}
+                                                onSelect={(n) => {
+                                                    setSelected([n]);
+                                                }}
+                                                onActivate={(n) => {
+                                                    if (getMimeCategory(n) === 'dir') {
+                                                        updatePath(n.path || n.name);
+                                                    } else {
+                                                        openPreview(n);
+                                                    }
+                                                }}
+                                            />
+                                        </div>
+                                    ) : viewMode === 'list' ? (
+                                        <div className="flex-1 min-h-0 overflow-hidden pt-1 flex flex-col w-full h-full">
+                                            <FileListView
+                                                listRef={listRef}
+                                                sorted={sorted}
+                                                canGoUp={canGoUp}
+                                                goUp={goUp}
+                                                focusIdx={focusIdx}
+                                                setFocusIdx={setFocusIdx}
+                                                selected={selected}
+                                                onItemClick={handleItemClick}
+                                                onItemDoubleClick={handleDoubleClick}
+                                                fontSize={fontSize}
+                                                mode={currentMode}
+                                                searchBuffer={isSearchMode ? (searchQuery || searchDisplay) : searchDisplay}
+                                                isSearchMode={isSearchMode}
+                                            />
+                                        </div>
+                                    ) : (
+                                        <div className="flex-1 flex flex-col min-h-0 overflow-hidden w-full h-full pt-1">
+                                            <FileGridView
+                                                listRef={listRef}
+                                                sorted={sorted}
+                                                canGoUp={canGoUp}
+                                                goUp={goUp}
+                                                focusIdx={focusIdx}
+                                                setFocusIdx={setFocusIdx}
+                                                selected={selected}
+                                                onItemClick={handleItemClick}
+                                                onItemDoubleClick={handleDoubleClick}
+                                                thumbSize={thumbSize}
+                                                mount={mount}
+                                                tokenParam={tokenParam}
+                                                fontSize={fontSize}
+                                                isSearchMode={isSearchMode}
+                                            />
+                                        </div>
+                                    )}
+                                </div>
+                            </ResizablePanel>
+                        )}
+
+                        {/* Right Pane conditionally renders if preview or fallback exists */}
+                        {showPreview && ((!showExplorer && selected.length === 1) || (allowPreview && selected.length === 1 && getMimeCategory(selected[0]) !== 'dir') || (selected.length === 0 && readmeContent) || (allowPreview && selectedReadmeContent) || (allowPreview && allowFallback && selected.length === 1 && getMimeCategory(selected[0]) === 'dir')) && (
+                            <>
+                                {showExplorer && <ResizableHandle withHandle />}
+                                <ResizablePanel defaultSize={activeSplitSize && activeSplitSize.length > 1 ? activeSplitSize[1] : (showExplorer ? 40 : 100)} minSize={15} className="relative min-w-0 bg-card/30">
+                                    <div className="w-full h-full flex flex-col min-h-[50px] min-w-0">
+                                        {((!showExplorer && selected.length === 1 && getMimeCategory(selected[0]) !== 'dir') || (allowPreview && selected.length === 1 && getMimeCategory(selected[0]) !== 'dir')) ? (
+                                            <div className="fb-readme-pane shrink-0 border-t md:border-t-0 border-border overflow-hidden w-full h-full relative flex flex-1 flex-col min-h-0">
+                                                {renderFileViewer({
+                                                    selected: selected[0],
+                                                    url: getFileUrl(selected[0]),
+                                                    fileName: selected[0].name,
+                                                    inline: true,
+                                                    isOpen: true,
+                                                    onClose: () => { },
+                                                    onLinkClick: (href, e) => handleLinkClick(href, e, selected[0].parent || '/')
+                                                })}
+                                            </div>
+                                        ) : ((selected.length === 0 && readmeContent) || (allowPreview && selectedReadmeContent)) ? (
+                                            <div className="fb-readme-pane shrink-0 p-6 border-t md:border-t-0 border-border overflow-y-auto flex-1 w-full h-full">
+                                                <MarkdownRenderer
+                                                    content={selectedReadmeContent || readmeContent || ''}
+                                                    baseUrl={
+                                                        selectedReadmeContent && selected.length === 1
+                                                            ? vfsUrl('get', mount, selected[0].path) + '/'
+                                                            : vfsUrl('get', mount, currentPath) + '/'
+                                                    }
+                                                    onLinkClick={(href, e) => {
+                                                        const basePath = (selectedReadmeContent && selected.length === 1)
+                                                            ? (selected[0].parent || '/')
+                                                            : currentPath;
+                                                        handleLinkClick(href, e, basePath);
+                                                    }}
+                                                />
+                                            </div>
+                                        ) : (allowPreview && allowFallback && selected.length === 1 && getMimeCategory(selected[0]) === 'dir') ? (
+                                            <div className="fb-readme-pane flex shrink-0 border-t md:border-t-0 border-border flex-1 flex-col min-h-0 overflow-hidden relative w-full h-full">
+                                                <FileBrowserPanel
+                                                    mount={mount}
+                                                    path={selected[0].path}
+                                                    viewMode="thumbs"
+                                                    showToolbar={false}
+                                                    mode="simple"
+                                                    jail={true}
+                                                    allowFallback={false}
+                                                    index={false}
+                                                    autoFocus={false}
+                                                    showStatusBar={false}
+                                                />
+                                            </div>
+                                        ) : null}
+                                    </div>
+                                </ResizablePanel>
+                            </>
+                        )}
+                    </ResizablePanelGroup>
+
+                    {/* Detail panel (advanced, desktop only) */}
+
+
+                    {/* Detail panel (advanced, desktop only) */}
+                    {mode === 'advanced' && (
+                        <FileDetailPanel file={selected.length === 1 ? selected[0] : null} fileUrl={selected.length === 1 ? getFileUrl(selected[0]) : ''} />
+                    )}
+                </div>
+            )}
+
+            {showStatusBar && <div style={{
+                padding: '4px 10px', fontSize: 13, borderTop: '2px solid var(--border)',
+                color: 'var(--muted-foreground)', display: 'flex', justifyContent: 'space-between',
+                background: 'var(--muted)', width: '100%', overflow: 'hidden', gap: '8px'
+            }}>
+                <span
+                    title={`${sorted.length} ${sorted.length !== 1 ? 'items' : 'item'} · ${formatSize(sorted.reduce((sum, n) => sum + (n.size || 0), 0))}${selectedFile ? ` · ${selectedFile.name} (${formatSize(selectedFile.size)})` : ''}`}
+                    style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+                >
+                    {sorted.length} <T>{sorted.length !== 1 ? 'items' : 'item'}</T>
+                    {' · '}{formatSize(sorted.reduce((sum, n) => sum + (n.size || 0), 0))}
+                    {selectedFile ? ` · ${selectedFile.name} (${formatSize(selectedFile.size)})` : ''}
+                </span>
+                <span
+                    title={`${mount}:${currentPath || '/'}`}
+                    style={{
+                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                        flexShrink: 1, textAlign: 'right', minWidth: 50, maxWidth: '50%'
+                    }}
+                >
+                    {mount}:{currentPath || '/'}
+                </span>
+            </div>}
+
+            {/* ═══ Lightboxes ════════════════════════════════ */}
+            <ImageLightbox
+                isOpen={!!lightboxNode}
+                onClose={closeLightbox}
+                imageUrl={lightboxNode ? getFileUrl(lightboxNode) : ''}
+                imageTitle={lightboxNode?.name || ''}
+                currentIndex={lightboxIdx}
+                totalCount={mediaNodes.length}
+                onNavigate={(dir) => dir === 'prev' ? lightboxPrev() : lightboxNext()}
+                showPrompt={false}
+            />
+            <LightboxText
+                isOpen={!!textLightboxNode}
+                onClose={closeTextLightbox}
+                url={textLightboxNode ? getFileUrl(textLightboxNode) : ''}
+                fileName={textLightboxNode?.name || ''}
+            />
+            <LightboxIframe
+                isOpen={!!iframeLightboxNode}
+                onClose={closeIframeLightbox}
+                url={iframeLightboxNode ? getFileUrl(iframeLightboxNode) : ''}
+                fileName={iframeLightboxNode?.name || ''}
+            />
+
+            {/* ── Dialogs ───────────────────────────────────────────── */}
+            {filterDialogOpen && (
+                <Dialog open={filterDialogOpen} onOpenChange={(open) => {
+                    if (!open) {
+                        setFilterDialogOpen(false);
+                        setTimeout(() => containerRef.current?.focus(), 0);
+                    }
+                }}>
+                    <DialogContent className="sm:max-w-md">
+                        <DialogHeader>
+                            <DialogTitle><T>Filter Current View</T></DialogTitle>
+                            <DialogDescription>
+                                <T>Enter a list of comma-separated wildcard matcher expressions (e.g., *.jpg, *.png) or use a preset below.</T>
+                            </DialogDescription>
+                        </DialogHeader>
+                        <div className="grid gap-4 py-4">
+                            <div className="flex items-center justify-between">
+                                <Label htmlFor="showFolders" className="flex flex-col gap-1">
+                                    <span><T>Show Folders</T></span>
+                                    <span className="font-normal text-xs text-muted-foreground"><T>Keep subdirectories visible alongside matched files</T></span>
+                                </Label>
+                                <Switch
+                                    id="showFolders"
+                                    checked={tempShowFolders}
+                                    onCheckedChange={setTempShowFolders}
+                                />
+                            </div>
+                            <div className="grid gap-2">
+                                <Label htmlFor="globPattern">Glob Pattern</Label>
+                                <Input
+                                    id="globPattern"
+                                    value={tempGlob}
+                                    onChange={(e) => setTempGlob(e.target.value)}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            applyTempFilter();
+                                        }
+                                    }}
+                                    autoFocus
+                                    placeholder="*.*"
+                                />
+                            </div>
+                            <div className="flex flex-wrap gap-2 mt-2">
+                                <Badge variant="outline" className="cursor-pointer hover:bg-muted" onClick={() => setTempGlob('*.*')}>
+                                    All Files (*.*)
+                                </Badge>
+                                <Badge variant="outline" className="cursor-pointer hover:bg-muted" onClick={() => setTempGlob(mediaGlob)}>
+                                    Media
+                                </Badge>
+                                <Badge variant="outline" className="cursor-pointer hover:bg-muted" onClick={() => setTempGlob(codeGlob)}>
+                                    Code
+                                </Badge>
+                            </div>
+                        </div>
+                        <div className="flex justify-end gap-3 w-full">
+                            <Button variant="outline" onClick={() => {
+                                setFilterDialogOpen(false);
+                                setTimeout(() => containerRef.current?.focus(), 0);
+                            }}>
+                                Cancel
+                            </Button>
+                            <Button onClick={applyTempFilter}>
+                                Apply Filter
+                            </Button>
+                        </div>
+                    </DialogContent>
+                </Dialog>
+            )}
+
+            {/* Search dialog */}
+            {searchOpen && (
+                <SearchDialog
+                    mount={mount}
+                    currentPath={currentPath}
+                    accessToken={accessToken}
+                    onNavigate={(node: INode) => {
+                        const isDir = getMimeCategory(node) === 'dir';
+
+                        if (isDir) {
+                            updatePath(node.path.startsWith('/') ? node.path : `/${node.path}`);
+                        } else {
+                            const parentPath = node.parent || '/';
+
+                            const currentTarget = parentPath.startsWith('/') ? parentPath : `/${parentPath}`;
+                            const normalizedCurrent = currentPath.replace(/\/+$/, '') || '/';
+                            const normalizedTarget = currentTarget.replace(/\/+$/, '') || '/';
+
+                            if (normalizedTarget !== normalizedCurrent) {
+                                setPendingSearchSelection(node.name);
+                                updatePath(currentTarget);
+                            } else {
+                                const idx = sorted.findIndex(n => n.name === node.name);
+                                if (idx >= 0) {
+                                    const focusIndex = canGoUp ? idx + 1 : idx;
+                                    setFocusIdx(focusIndex);
+                                    const itemNode = sorted[idx];
+                                    if (itemNode) {
+                                        const newlySelected = [itemNode];
+                                        setSelected(newlySelected);
+                                        if (onSelect) {
+                                            onSelect(newlySelected);
+                                        }
+                                        requestAnimationFrame(() => scrollItemIntoView(focusIndex));
+                                    }
+                                }
+                            }
+                        }
+                    }}
+                    onClose={() => {
+                        setSearchOpen(false);
+                        setTimeout(() => {
+                            if (viewMode === 'tree') {
+                                listRef.current?.focus();
+                            } else {
+                                containerRef.current?.focus();
+                            }
+                        }, 0);
+                    }}
+                />
+            )}
+        </div>
+    );
+};
+
+export { FileBrowserPanel };
+export default FileBrowserPanel;
diff --git a/packages/ui/src/components/AddToCollectionModal.tsx b/packages/ui/src/components/AddToCollectionModal.tsx
index 4834e39e..410dd339 100644
--- a/packages/ui/src/components/AddToCollectionModal.tsx
+++ b/packages/ui/src/components/AddToCollectionModal.tsx
@@ -1,350 +1,350 @@
-import React, { useState, useEffect } from 'react';
-import { supabase } from '@/integrations/supabase/client';
-import { useAuth } from '@/hooks/useAuth';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Card, CardContent } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Plus, Bookmark } from 'lucide-react';
-import { useToast } from '@/hooks/use-toast';
-
-interface Collection {
-  id: string;
-  name: string;
-  description: string;
-  slug: string;
-  is_public: boolean;
-  created_at: string;
-}
-
-interface AddToCollectionModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  pictureId?: string;
-  postId?: string;
-}
-
-const AddToCollectionModal = ({ isOpen, onClose, pictureId, postId }: AddToCollectionModalProps) => {
-  if (!pictureId && !postId) {
-    console.error('AddToCollectionModal requires either pictureId or postId');
-    return null;
-  }
-  const { user } = useAuth();
-  const { toast } = useToast();
-  const [collections, setCollections] = useState<Collection[]>([]);
-  const [selectedCollections, setSelectedCollections] = useState<Set<string>>(new Set());
-  const [showCreateForm, setShowCreateForm] = useState(false);
-  const [newCollection, setNewCollection] = useState({
-    name: '',
-    description: '',
-    is_public: true
-  });
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (isOpen && user) {
-      fetchCollections();
-      fetchItemCollections();
-    }
-  }, [isOpen, user, pictureId, postId]);
-
-  const fetchCollections = async () => {
-    if (!user) return;
-
-    const { data, error } = await supabase
-      .from('collections')
-      .select('*')
-      .eq('user_id', user.id)
-      .order('created_at', { ascending: false });
-
-    if (error) {
-      console.error('Error fetching collections:', error);
-      return;
-    }
-
-    setCollections(data || []);
-  };
-
-  const fetchItemCollections = async () => {
-    if (!user) return;
-
-    if (postId) {
-      // Fetch for post
-      const { data, error } = await supabase
-        .from('collection_posts' as any) // Cast as any until types are generated
-        .select('collection_id')
-        .eq('post_id', postId);
-
-      if (error) {
-        console.error('Error fetching post collections:', error);
-        return;
-      }
-      const collectionIds = new Set(data.map((item: any) => item.collection_id));
-      setSelectedCollections(collectionIds);
-    } else if (pictureId) {
-      // Fetch for picture
-      const { data, error } = await supabase
-        .from('collection_pictures')
-        .select('collection_id')
-        .eq('picture_id', pictureId);
-
-      if (error) {
-        console.error('Error fetching picture collections:', error);
-        return;
-      }
-      const collectionIds = new Set(data.map(item => item.collection_id));
-      setSelectedCollections(collectionIds);
-    }
-  };
-
-  const createSlug = (name: string) => {
-    return name
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .trim();
-  };
-
-  const handleCreateCollection = async () => {
-    if (!user || !newCollection.name.trim()) return;
-
-    setLoading(true);
-    const slug = createSlug(newCollection.name);
-
-    const { data, error } = await supabase
-      .from('collections')
-      .insert({
-        user_id: user.id,
-        name: newCollection.name.trim(),
-        description: newCollection.description.trim() || null,
-        slug,
-        is_public: newCollection.is_public
-      })
-      .select()
-      .single();
-
-    if (error) {
-      console.error('Error creating collection:', error);
-      toast({
-        title: "Error",
-        description: "Failed to create collection",
-        variant: "destructive"
-      });
-      setLoading(false);
-      return;
-    }
-
-    // Add item to new collection
-    if (postId) {
-      await supabase
-        .from('collection_posts' as any)
-        .insert({
-          collection_id: data.id,
-          post_id: postId
-        });
-    } else if (pictureId) {
-      await supabase
-        .from('collection_pictures')
-        .insert({
-          collection_id: data.id,
-          picture_id: pictureId
-        });
-    }
-
-    setCollections(prev => [data, ...prev]);
-    setSelectedCollections(prev => new Set([...prev, data.id]));
-    setNewCollection({ name: '', description: '', is_public: true });
-    setShowCreateForm(false);
-    setLoading(false);
-
-    toast({
-      title: "Success",
-      description: "Collection created and photo added!"
-    });
-  };
-
-  const handleToggleCollection = async (collectionId: string) => {
-    if (!user) return;
-
-    const isSelected = selectedCollections.has(collectionId);
-
-    if (isSelected) {
-      // Remove from collection
-      if (postId) {
-        const { error } = await supabase
-          .from('collection_posts' as any)
-          .delete()
-          .eq('collection_id', collectionId)
-          .eq('post_id', postId);
-        if (error) console.error('Error removing post from collection:', error);
-      } else if (pictureId) {
-        const { error } = await supabase
-          .from('collection_pictures')
-          .delete()
-          .eq('collection_id', collectionId)
-          .eq('picture_id', pictureId);
-        if (error) console.error('Error removing picture from collection:', error);
-      }
-
-      setSelectedCollections(prev => {
-        const newSet = new Set(prev);
-        newSet.delete(collectionId);
-        return newSet;
-      });
-    } else {
-      // Add to collection
-      if (postId) {
-        const { error } = await supabase
-          .from('collection_posts' as any)
-          .insert({
-            collection_id: collectionId,
-            post_id: postId
-          });
-        if (error) console.error('Error adding post to collection:', error);
-      } else if (pictureId) {
-        const { error } = await supabase
-          .from('collection_pictures')
-          .insert({
-            collection_id: collectionId,
-            picture_id: pictureId
-          });
-        if (error) console.error('Error adding picture to collection:', error);
-      }
-
-      setSelectedCollections(prev => new Set([...prev, collectionId]));
-    }
-  };
-
-  const handleSave = () => {
-    toast({
-      title: "Saved",
-      description: "Collection preferences updated!"
-    });
-    onClose();
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Bookmark className="h-5 w-5" />
-            Add to Collection
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          {/* Create new collection */}
-          {!showCreateForm ? (
-            <Button
-              variant="outline"
-              className="w-full justify-start"
-              onClick={() => setShowCreateForm(true)}
-            >
-              <Plus className="h-4 w-4 mr-2" />
-              Create New Collection
-            </Button>
-          ) : (
-            <Card>
-              <CardContent className="p-4 space-y-3">
-                <Input
-                  placeholder="Collection name"
-                  value={newCollection.name}
-                  onChange={(e) => setNewCollection(prev => ({ ...prev, name: e.target.value }))}
-                />
-                <Textarea
-                  placeholder="Description (optional)"
-                  value={newCollection.description}
-                  onChange={(e) => setNewCollection(prev => ({ ...prev, description: e.target.value }))}
-                  rows={2}
-                />
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="public"
-                    checked={newCollection.is_public}
-                    onCheckedChange={(checked) =>
-                      setNewCollection(prev => ({ ...prev, is_public: checked as boolean }))
-                    }
-                  />
-                  <label htmlFor="public" className="text-sm">Make public</label>
-                </div>
-                <div className="flex gap-2">
-                  <Button
-                    size="sm"
-                    onClick={handleCreateCollection}
-                    disabled={!newCollection.name.trim() || loading}
-                  >
-                    Create
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setShowCreateForm(false)}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          )}
-
-          {/* Existing collections */}
-          <div className="space-y-2 max-h-60 overflow-y-auto">
-            {collections.map((collection) => (
-              <Card
-                key={collection.id}
-                className={`cursor-pointer transition-colors ${selectedCollections.has(collection.id)
-                  ? 'bg-primary/10 border-primary'
-                  : 'hover:bg-muted/50'
-                  }`}
-                onClick={() => handleToggleCollection(collection.id)}
-              >
-                <CardContent className="p-3">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h4 className="font-medium">{collection.name}</h4>
-                      {collection.description && (
-                        <p className="text-sm text-muted-foreground">
-                          {collection.description}
-                        </p>
-                      )}
-                    </div>
-                    <Checkbox
-                      checked={selectedCollections.has(collection.id)}
-                      disabled
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-
-          {collections.length === 0 && !showCreateForm && (
-            <p className="text-center text-muted-foreground py-4">
-              No collections yet. Create your first one!
-            </p>
-          )}
-        </div>
-
-        <div className="flex justify-end gap-2 pt-4">
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave}>
-            Done
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default AddToCollectionModal;
+import React, { useState, useEffect } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Plus, Bookmark } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+interface Collection {
+  id: string;
+  name: string;
+  description: string;
+  slug: string;
+  is_public: boolean;
+  created_at: string;
+}
+
+interface AddToCollectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  pictureId?: string;
+  postId?: string;
+}
+
+const AddToCollectionModal = ({ isOpen, onClose, pictureId, postId }: AddToCollectionModalProps) => {
+  if (!pictureId && !postId) {
+    console.error('AddToCollectionModal requires either pictureId or postId');
+    return null;
+  }
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [selectedCollections, setSelectedCollections] = useState<Set<string>>(new Set());
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newCollection, setNewCollection] = useState({
+    name: '',
+    description: '',
+    is_public: true
+  });
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && user) {
+      fetchCollections();
+      fetchItemCollections();
+    }
+  }, [isOpen, user, pictureId, postId]);
+
+  const fetchCollections = async () => {
+    if (!user) return;
+
+    const { data, error } = await supabase
+      .from('collections')
+      .select('*')
+      .eq('user_id', user.id)
+      .order('created_at', { ascending: false });
+
+    if (error) {
+      console.error('Error fetching collections:', error);
+      return;
+    }
+
+    setCollections(data || []);
+  };
+
+  const fetchItemCollections = async () => {
+    if (!user) return;
+
+    if (postId) {
+      // Fetch for post
+      const { data, error } = await supabase
+        .from('collection_posts' as any) // Cast as any until types are generated
+        .select('collection_id')
+        .eq('post_id', postId);
+
+      if (error) {
+        console.error('Error fetching post collections:', error);
+        return;
+      }
+      const collectionIds = new Set(data.map((item: any) => item.collection_id));
+      setSelectedCollections(collectionIds);
+    } else if (pictureId) {
+      // Fetch for picture
+      const { data, error } = await supabase
+        .from('collection_pictures')
+        .select('collection_id')
+        .eq('picture_id', pictureId);
+
+      if (error) {
+        console.error('Error fetching picture collections:', error);
+        return;
+      }
+      const collectionIds = new Set(data.map(item => item.collection_id));
+      setSelectedCollections(collectionIds);
+    }
+  };
+
+  const createSlug = (name: string) => {
+    return name
+      .toLowerCase()
+      .replace(/[^a-z0-9\s-]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/-+/g, '-')
+      .trim();
+  };
+
+  const handleCreateCollection = async () => {
+    if (!user || !newCollection.name.trim()) return;
+
+    setLoading(true);
+    const slug = createSlug(newCollection.name);
+
+    const { data, error } = await supabase
+      .from('collections')
+      .insert({
+        user_id: user.id,
+        name: newCollection.name.trim(),
+        description: newCollection.description.trim() || null,
+        slug,
+        is_public: newCollection.is_public
+      })
+      .select()
+      .single();
+
+    if (error) {
+      console.error('Error creating collection:', error);
+      toast({
+        title: "Error",
+        description: "Failed to create collection",
+        variant: "destructive"
+      });
+      setLoading(false);
+      return;
+    }
+
+    // Add item to new collection
+    if (postId) {
+      await supabase
+        .from('collection_posts' as any)
+        .insert({
+          collection_id: data.id,
+          post_id: postId
+        });
+    } else if (pictureId) {
+      await supabase
+        .from('collection_pictures')
+        .insert({
+          collection_id: data.id,
+          picture_id: pictureId
+        });
+    }
+
+    setCollections(prev => [data, ...prev]);
+    setSelectedCollections(prev => new Set([...prev, data.id]));
+    setNewCollection({ name: '', description: '', is_public: true });
+    setShowCreateForm(false);
+    setLoading(false);
+
+    toast({
+      title: "Success",
+      description: "Collection created and photo added!"
+    });
+  };
+
+  const handleToggleCollection = async (collectionId: string) => {
+    if (!user) return;
+
+    const isSelected = selectedCollections.has(collectionId);
+
+    if (isSelected) {
+      // Remove from collection
+      if (postId) {
+        const { error } = await supabase
+          .from('collection_posts' as any)
+          .delete()
+          .eq('collection_id', collectionId)
+          .eq('post_id', postId);
+        if (error) console.error('Error removing post from collection:', error);
+      } else if (pictureId) {
+        const { error } = await supabase
+          .from('collection_pictures')
+          .delete()
+          .eq('collection_id', collectionId)
+          .eq('picture_id', pictureId);
+        if (error) console.error('Error removing picture from collection:', error);
+      }
+
+      setSelectedCollections(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(collectionId);
+        return newSet;
+      });
+    } else {
+      // Add to collection
+      if (postId) {
+        const { error } = await supabase
+          .from('collection_posts' as any)
+          .insert({
+            collection_id: collectionId,
+            post_id: postId
+          });
+        if (error) console.error('Error adding post to collection:', error);
+      } else if (pictureId) {
+        const { error } = await supabase
+          .from('collection_pictures')
+          .insert({
+            collection_id: collectionId,
+            picture_id: pictureId
+          });
+        if (error) console.error('Error adding picture to collection:', error);
+      }
+
+      setSelectedCollections(prev => new Set([...prev, collectionId]));
+    }
+  };
+
+  const handleSave = () => {
+    toast({
+      title: "Saved",
+      description: "Collection preferences updated!"
+    });
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Bookmark className="h-5 w-5" />
+            Add to Collection
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Create new collection */}
+          {!showCreateForm ? (
+            <Button
+              variant="outline"
+              className="w-full justify-start"
+              onClick={() => setShowCreateForm(true)}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Create New Collection
+            </Button>
+          ) : (
+            <Card>
+              <CardContent className="p-4 space-y-3">
+                <Input
+                  placeholder="Collection name"
+                  value={newCollection.name}
+                  onChange={(e) => setNewCollection(prev => ({ ...prev, name: e.target.value }))}
+                />
+                <Textarea
+                  placeholder="Description (optional)"
+                  value={newCollection.description}
+                  onChange={(e) => setNewCollection(prev => ({ ...prev, description: e.target.value }))}
+                  rows={2}
+                />
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="public"
+                    checked={newCollection.is_public}
+                    onCheckedChange={(checked) =>
+                      setNewCollection(prev => ({ ...prev, is_public: checked as boolean }))
+                    }
+                  />
+                  <label htmlFor="public" className="text-sm">Make public</label>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    size="sm"
+                    onClick={handleCreateCollection}
+                    disabled={!newCollection.name.trim() || loading}
+                  >
+                    Create
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowCreateForm(false)}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Existing collections */}
+          <div className="space-y-2 max-h-60 overflow-y-auto">
+            {collections.map((collection) => (
+              <Card
+                key={collection.id}
+                className={`cursor-pointer transition-colors ${selectedCollections.has(collection.id)
+                  ? 'bg-primary/10 border-primary'
+                  : 'hover:bg-muted/50'
+                  }`}
+                onClick={() => handleToggleCollection(collection.id)}
+              >
+                <CardContent className="p-3">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h4 className="font-medium">{collection.name}</h4>
+                      {collection.description && (
+                        <p className="text-sm text-muted-foreground">
+                          {collection.description}
+                        </p>
+                      )}
+                    </div>
+                    <Checkbox
+                      checked={selectedCollections.has(collection.id)}
+                      disabled
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {collections.length === 0 && !showCreateForm && (
+            <p className="text-center text-muted-foreground py-4">
+              No collections yet. Create your first one!
+            </p>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>
+            Done
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddToCollectionModal;
diff --git a/packages/ui/src/components/CollapsibleSection.tsx b/packages/ui/src/components/CollapsibleSection.tsx
index 366b8299..87ddcf89 100644
--- a/packages/ui/src/components/CollapsibleSection.tsx
+++ b/packages/ui/src/components/CollapsibleSection.tsx
@@ -169,4 +169,4 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
   );
 };
 
-export default CollapsibleSection; 
\ No newline at end of file
+export default CollapsibleSection; 
diff --git a/packages/ui/src/components/CollectionButton.tsx b/packages/ui/src/components/CollectionButton.tsx
index 3cfbb82c..575b481c 100644
--- a/packages/ui/src/components/CollectionButton.tsx
+++ b/packages/ui/src/components/CollectionButton.tsx
@@ -1,49 +1,49 @@
-import React, { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Bookmark } from 'lucide-react';
-import AddToCollectionModal from './AddToCollectionModal';
-import { useAuth } from '@/hooks/useAuth';
-
-interface CollectionButtonProps {
-  pictureId: string;
-  size?: 'sm' | 'lg';
-  variant?: 'default' | 'ghost' | 'outline';
-  className?: string;
-}
-
-const CollectionButton = ({ 
-  pictureId, 
-  size = 'sm',
-  variant = 'ghost',
-  className = ''
-}: CollectionButtonProps) => {
-  const { user } = useAuth();
-  const [showModal, setShowModal] = useState(false);
-
-  if (!user) return null;
-
-  return (
-    <>
-      <Button
-        variant={variant}
-        size={size}
-        onClick={(e) => {
-          e.stopPropagation();
-          setShowModal(true);
-        }}
-        className={`transition-all duration-200 hover:scale-110 ${className}`}
-        title="Add to collection"
-      >
-        <Bookmark className={`${size === 'sm' ? 'h-3 w-3' : 'h-5 w-5'}`} />
-      </Button>
-
-      <AddToCollectionModal
-        isOpen={showModal}
-        onClose={() => setShowModal(false)}
-        pictureId={pictureId}
-      />
-    </>
-  );
-};
-
-export default CollectionButton;
\ No newline at end of file
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Bookmark } from 'lucide-react';
+import AddToCollectionModal from './AddToCollectionModal';
+import { useAuth } from '@/hooks/useAuth';
+
+interface CollectionButtonProps {
+  pictureId: string;
+  size?: 'sm' | 'lg';
+  variant?: 'default' | 'ghost' | 'outline';
+  className?: string;
+}
+
+const CollectionButton = ({ 
+  pictureId, 
+  size = 'sm',
+  variant = 'ghost',
+  className = ''
+}: CollectionButtonProps) => {
+  const { user } = useAuth();
+  const [showModal, setShowModal] = useState(false);
+
+  if (!user) return null;
+
+  return (
+    <>
+      <Button
+        variant={variant}
+        size={size}
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowModal(true);
+        }}
+        className={`transition-all duration-200 hover:scale-110 ${className}`}
+        title="Add to collection"
+      >
+        <Bookmark className={`${size === 'sm' ? 'h-3 w-3' : 'h-5 w-5'}`} />
+      </Button>
+
+      <AddToCollectionModal
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        pictureId={pictureId}
+      />
+    </>
+  );
+};
+
+export default CollectionButton;
diff --git a/packages/ui/src/components/Comments.tsx b/packages/ui/src/components/Comments.tsx
index c08f6933..d5bcb9f6 100644
--- a/packages/ui/src/components/Comments.tsx
+++ b/packages/ui/src/components/Comments.tsx
@@ -1,642 +1,642 @@
-import { useState, useEffect, useRef } from "react";
-import { useAuth } from "@/hooks/useAuth";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { User, MessageCircle, Heart, MoreHorizontal, Mic, MicOff, Loader2 } from "lucide-react";
-import { toast } from "sonner";
-import { Link } from "react-router-dom";
-import MarkdownRenderer from "@/components/MarkdownRenderer";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { transcribeAudio } from "@/lib/openai";
-import { T, translate } from "@/i18n";
-
-import { Comment } from "@/types";
-import {
-  fetchCommentsAPI,
-  addCommentAPI,
-  editCommentAPI,
-  deleteCommentAPI,
-  toggleCommentLikeAPI
-} from "@/modules/posts/client-pictures";
-
-interface UserProfile {
-  user_id: string;
-  avatar_url: string | null;
-  display_name: string | null;
-  username: string | null;
-}
-
-interface CommentsProps {
-  pictureId: string;
-  initialComments?: Comment[];
-}
-
-const Comments = ({ pictureId, initialComments }: CommentsProps) => {
-  const { user } = useAuth();
-  const [comments, setComments] = useState<Comment[]>([]);
-  const [newComment, setNewComment] = useState("");
-  const [replyingTo, setReplyingTo] = useState<string | null>(null);
-  const [replyText, setReplyText] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [useMarkdown, setUseMarkdown] = useState(false);
-  const [likedComments, setLikedComments] = useState<Set<string>>(new Set());
-  const [userProfiles, setUserProfiles] = useState<Map<string, UserProfile>>(new Map());
-  const [editingComment, setEditingComment] = useState<string | null>(null);
-  const [editText, setEditText] = useState("");
-
-  // Microphone recording state
-  const [isRecording, setIsRecording] = useState(false);
-  const [isTranscribing, setIsTranscribing] = useState(false);
-  const [recordingFor, setRecordingFor] = useState<'new' | 'reply' | null>(null);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const audioChunksRef = useRef<Blob[]>([]);
-
-  useEffect(() => {
-    fetchComments();
-  }, [pictureId, initialComments]);
-
-  const fetchComments = async () => {
-    try {
-      let data: Comment[] = [];
-
-      if (initialComments) {
-        data = initialComments;
-        // Still fetch profiles and likes from API for initial comments
-        if (data.length > 0) {
-          try {
-            const apiResult = await fetchCommentsAPI(pictureId);
-            setLikedComments(new Set(apiResult.likedCommentIds));
-            const newProfiles = new Map(userProfiles);
-            Object.entries(apiResult.profiles).forEach(([userId, profile]) => {
-              newProfiles.set(userId, profile as UserProfile);
-            });
-            setUserProfiles(newProfiles);
-          } catch {
-            // Profiles/likes are optional enrichment, don't fail
-          }
-        }
-      } else {
-        // Fetch everything from API in one call
-        const apiResult = await fetchCommentsAPI(pictureId);
-        data = apiResult.comments as Comment[];
-        setLikedComments(new Set(apiResult.likedCommentIds));
-
-        const newProfiles = new Map(userProfiles);
-        Object.entries(apiResult.profiles).forEach(([userId, profile]) => {
-          newProfiles.set(userId, profile as UserProfile);
-        });
-        setUserProfiles(newProfiles);
-      }
-
-      if (data.length === 0) {
-        setComments([]);
-        setLoading(false);
-        return;
-      }
-
-      // Organize comments into nested structure with max 3 levels
-      const commentsMap = new Map<string, Comment>();
-      const rootComments: Comment[] = [];
-
-      // First pass: create all comments with depth tracking
-      data.forEach(comment => {
-        const commentWithReplies = { ...comment, replies: [], depth: 0 };
-        commentsMap.set(comment.id, commentWithReplies);
-      });
-
-      // Second pass: organize hierarchy with depth limit
-      data.forEach(comment => {
-        const commentWithReplies = commentsMap.get(comment.id)!;
-
-        // If it has a parent, try to attach to it
-        if (comment.parent_comment_id) {
-          const parent = commentsMap.get(comment.parent_comment_id);
-          if (parent) {
-            // Calculate depth: parent depth + 1, but max 2 (0, 1, 2 = 3 levels)
-            const newDepth = Math.min(parent.depth! + 1, 2);
-            commentWithReplies.depth = newDepth;
-
-            if (parent.depth! >= 2) {
-              if (parent.replies) {
-                parent.replies.push(commentWithReplies);
-              }
-            } else {
-              if (parent.replies) {
-                parent.replies.push(commentWithReplies);
-              }
-            }
-          } else {
-            // Parent not found (deleted?), treat as root
-            rootComments.push(commentWithReplies);
-          }
-        } else {
-          rootComments.push(commentWithReplies);
-        }
-      });
-
-      setComments(rootComments);
-    } catch (error) {
-      console.error('Error fetching comments:', error);
-      toast.error('Failed to load comments');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleAddComment = async () => {
-    if (!user || !newComment.trim()) return;
-
-    try {
-      await addCommentAPI(pictureId, newComment.trim());
-      setNewComment("");
-      fetchComments();
-      toast.success(translate('Comment added!'));
-    } catch (error) {
-      console.error('Error adding comment:', error);
-      toast.error(translate('Failed to add comment'));
-    }
-  };
-
-  const handleAddReply = async (parentId: string) => {
-    if (!user || !replyText.trim()) return;
-
-    try {
-      await addCommentAPI(pictureId, replyText.trim(), parentId);
-      setReplyText("");
-      setReplyingTo(null);
-      fetchComments();
-      toast.success(translate('Reply added!'));
-    } catch (error) {
-      console.error('Error adding reply:', error);
-      toast.error(translate('Failed to add reply'));
-    }
-  };
-
-  const handleDeleteComment = async (commentId: string) => {
-    if (!user) return;
-
-    try {
-      await deleteCommentAPI(pictureId, commentId);
-      fetchComments();
-      toast.success(translate('Comment deleted'));
-    } catch (error) {
-      console.error('Error deleting comment:', error);
-      toast.error(translate('Failed to delete comment'));
-    }
-  };
-
-  const handleEditComment = async (commentId: string) => {
-    if (!user || !editText.trim()) return;
-
-    try {
-      await editCommentAPI(pictureId, commentId, editText.trim());
-      toast.success(translate('Comment updated successfully'));
-      setEditingComment(null);
-      setEditText("");
-      fetchComments(); // Refresh comments
-    } catch (error) {
-      console.error('Error updating comment:', error);
-      toast.error(translate('Failed to update comment'));
-    }
-  };
-
-  const startEditingComment = (comment: Comment) => {
-    setEditingComment(comment.id);
-    setEditText(comment.content);
-  };
-
-  const cancelEditingComment = () => {
-    setEditingComment(null);
-    setEditText("");
-  };
-
-  const handleToggleLike = async (commentId: string) => {
-    if (!user) {
-      toast.error(translate('Please sign in to like comments'));
-      return;
-    }
-
-    const isLiked = likedComments.has(commentId);
-
-    try {
-      const result = await toggleCommentLikeAPI(pictureId, commentId);
-
-      // Update local liked state
-      const newLikedComments = new Set(likedComments);
-      if (result.liked) {
-        newLikedComments.add(commentId);
-      } else {
-        newLikedComments.delete(commentId);
-      }
-      setLikedComments(newLikedComments);
-
-      // Update comments state for likes_count
-      const delta = result.liked ? 1 : -1;
-      const updateCommentsLikes = (comments: Comment[]): Comment[] => {
-        return comments.map(comment => {
-          if (comment.id === commentId) {
-            return { ...comment, likes_count: Math.max(0, comment.likes_count + delta) };
-          }
-          if (comment.replies) {
-            return { ...comment, replies: updateCommentsLikes(comment.replies) };
-          }
-          return comment;
-        });
-      };
-      setComments(updateCommentsLikes);
-    } catch (error) {
-      console.error('Error toggling like:', error);
-      toast.error('Failed to toggle like');
-    }
-  };
-
-  const getRelativeTime = (dateString: string) => {
-    const now = new Date();
-    const commentDate = new Date(dateString);
-    const diffInMs = now.getTime() - commentDate.getTime();
-    const diffInHours = diffInMs / (1000 * 60 * 60);
-
-    // If more than 24 hours ago, show regular date
-    if (diffInHours >= 24) {
-      return commentDate.toLocaleDateString();
-    }
-
-    // Show relative time for recent comments
-    const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
-
-    if (diffInMinutes < 1) {
-      return 'just now';
-    } else if (diffInMinutes < 60) {
-      return `${diffInMinutes} min${diffInMinutes === 1 ? '' : 's'} ago`;
-    } else {
-      const hours = Math.floor(diffInMinutes / 60);
-      return `${hours} hour${hours === 1 ? '' : 's'} ago`;
-    }
-  };
-
-  const handleMicrophone = async (type: 'new' | 'reply') => {
-    if (isRecording) {
-      // Stop recording
-      if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-        mediaRecorderRef.current.stop();
-        setIsRecording(false);
-      }
-    } else {
-      // Start recording
-      try {
-        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-          toast.error(translate('Audio recording is not supported in your browser'));
-          return;
-        }
-
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
-        const options = { mimeType: 'audio/webm' };
-        let mediaRecorder: MediaRecorder;
-
-        try {
-          mediaRecorder = new MediaRecorder(stream, options);
-        } catch (e) {
-          mediaRecorder = new MediaRecorder(stream);
-        }
-
-        mediaRecorderRef.current = mediaRecorder;
-        audioChunksRef.current = [];
-        setRecordingFor(type);
-
-        mediaRecorder.ondataavailable = (event) => {
-          if (event.data.size > 0) {
-            audioChunksRef.current.push(event.data);
-          }
-        };
-
-        mediaRecorder.onstop = async () => {
-          setIsTranscribing(true);
-
-          try {
-            const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
-            const audioFile = new File([audioBlob], 'recording.webm', { type: 'audio/webm' });
-
-            toast.info(translate('Transcribing audio...'));
-            const transcribedText = await transcribeAudio(audioFile);
-
-            if (transcribedText) {
-              if (type === 'new') {
-                setNewComment(prev => {
-                  const trimmed = prev.trim();
-                  return trimmed ? `${trimmed}\n\n${transcribedText}` : transcribedText;
-                });
-              } else if (type === 'reply') {
-                setReplyText(prev => {
-                  const trimmed = prev.trim();
-                  return trimmed ? `${trimmed}\n\n${transcribedText}` : transcribedText;
-                });
-              }
-              toast.success(translate('Audio transcribed successfully!'));
-            } else {
-              toast.error(translate('Failed to transcribe audio. Please check your OpenAI API key.'));
-            }
-          } catch (error: any) {
-            console.error('Error transcribing audio:', error);
-            toast.error(error.message || translate('Failed to transcribe audio'));
-          } finally {
-            setIsTranscribing(false);
-            setRecordingFor(null);
-            audioChunksRef.current = [];
-            stream.getTracks().forEach(track => track.stop());
-          }
-        };
-
-        mediaRecorder.start();
-        setIsRecording(true);
-        toast.info(translate('Recording... Click mic again to stop'));
-
-      } catch (error: any) {
-        console.error('Error accessing microphone:', error);
-        if (error.name === 'NotAllowedError') {
-          toast.error(translate('Microphone access denied. Please allow microphone access in your browser settings.'));
-        } else {
-          toast.error(translate('Failed to access microphone') + ': ' + error.message);
-        }
-      }
-    }
-  };
-
-  const renderComment = (comment: Comment) => {
-    const isOwner = user?.id === comment.user_id;
-    const marginLeft = comment.depth ? comment.depth * 24 : 0;
-    const userProfile = userProfiles.get(comment.user_id);
-
-    return (
-      <div key={comment.id} className="space-y-3">
-        <div className="flex space-x-3" style={{ marginLeft: `${marginLeft}px` }}>
-          <Link
-            to={`/user/${comment.user_id}`}
-            className="w-8 h-8 bg-gradient-primary rounded-full flex items-center justify-center flex-shrink-0 hover:scale-110 transition-transform overflow-hidden"
-          >
-            {userProfile?.avatar_url ? (
-              <img
-                src={userProfile.avatar_url}
-                alt={userProfile.display_name || 'User avatar'}
-                className="w-full h-full rounded-full object-cover"
-              />
-            ) : (
-              <User className="h-4 w-4 text-white" />
-            )}
-          </Link>
-          <div className="flex-1 min-w-0">
-            <div className="bg-card rounded-lg p-3">
-              <div className="flex items-center justify-between mb-1">
-                <div className="flex items-center space-x-2">
-                  <Link
-                    to={`/user/${comment.user_id}`}
-                    className="text-sm font-semibold hover:underline"
-                  >
-                    {userProfile?.display_name || `User ${comment.user_id.slice(0, 8)}`}
-                  </Link>
-                  <span className="text-xs text-muted-foreground">
-                    {getRelativeTime(comment.created_at)}
-                  </span>
-                </div>
-                {isOwner && (
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
-                        <MoreHorizontal className="h-3 w-3" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem
-                        onClick={() => startEditingComment(comment)}
-                      >
-                        <T>Edit</T>
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => handleDeleteComment(comment.id)}
-                        className="text-destructive"
-                      >
-                        <T>Delete</T>
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )}
-              </div>
-              <div className="text-sm">
-                {editingComment === comment.id ? (
-                  <div className="space-y-2">
-                    <Textarea
-                      value={editText}
-                      onChange={(e) => setEditText(e.target.value)}
-                      className="min-h-[60px] text-sm"
-                      autoFocus
-                    />
-                    <div className="flex items-center space-x-2">
-                      <Button
-                        size="sm"
-                        onClick={() => handleEditComment(comment.id)}
-                        disabled={!editText.trim()}
-                      >
-                        <T>Save</T>
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={cancelEditingComment}
-                      >
-                        <T>Cancel</T>
-                      </Button>
-                    </div>
-                  </div>
-                ) : (
-                  <MarkdownRenderer content={comment.content} className="prose-sm" />
-                )}
-              </div>
-            </div>
-            <div className="flex items-center space-x-4 mt-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => handleToggleLike(comment.id)}
-                className={`h-6 px-2 text-xs ${likedComments.has(comment.id)
-                  ? 'text-red-500 hover:text-red-600'
-                  : 'text-muted-foreground hover:text-foreground'
-                  }`}
-              >
-                <Heart
-                  className={`h-3 w-3 mr-1 ${likedComments.has(comment.id) ? 'fill-current' : ''
-                    }`}
-                />
-                {comment.likes_count > 0 && <span className="mr-1">{comment.likes_count}</span>}
-                <T>Like</T>
-              </Button>
-              {comment.depth < 2 && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setReplyingTo(replyingTo === comment.id ? null : comment.id)}
-                  className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
-                >
-                  <MessageCircle className="h-3 w-3 mr-1" />
-                  <T>Reply</T>
-                </Button>
-              )}
-            </div>
-
-            {replyingTo === comment.id && (
-              <div className="mt-3 space-y-2">
-                <div className="relative">
-                  <Textarea
-                    value={replyText}
-                    onChange={(e) => setReplyText(e.target.value)}
-                    placeholder={translate('Write a reply...')}
-                    className="min-h-[60px] text-sm pr-10"
-                    autoFocus={false}
-                    onKeyDown={(e) => {
-                      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                        e.preventDefault();
-                        handleAddReply(comment.id);
-                      }
-                    }}
-                  />
-                  <button
-                    onClick={() => handleMicrophone('reply')}
-                    disabled={isTranscribing}
-                    className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'reply'
-                      ? 'bg-red-100 text-red-600 hover:bg-red-200'
-                      : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                      }`}
-                    title={isRecording && recordingFor === 'reply' ? 'Stop recording' : 'Record audio'}
-                  >
-                    {isTranscribing && recordingFor === 'reply' ? (
-                      <Loader2 className="h-3 w-3 animate-spin" />
-                    ) : isRecording && recordingFor === 'reply' ? (
-                      <MicOff className="h-3 w-3" />
-                    ) : (
-                      <Mic className="h-3 w-3" />
-                    )}
-                  </button>
-                </div>
-                <div className="flex space-x-2">
-                  <Button
-                    size="sm"
-                    onClick={() => handleAddReply(comment.id)}
-                    disabled={!replyText.trim()}
-                  >
-                    <T>Reply</T>
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => {
-                      setReplyingTo(null);
-                      setReplyText("");
-                    }}
-                  >
-                    <T>Cancel</T>
-                  </Button>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {comment.replies && comment.replies.length > 0 && (
-          <div className="space-y-3">
-            {comment.replies.map(reply => renderComment(reply))}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  if (loading) {
-    return (
-      <div className="text-center py-4">
-        <div className="text-muted-foreground"><T>Loading comments...</T></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Comment Input - Always visible */}
-      {user && (
-        <div className="space-y-3 pb-4 border-b">
-          <div className="relative">
-            {useMarkdown ? (
-              <div />
-            ) : (
-              <Textarea
-                value={newComment}
-                onChange={(e) => setNewComment(e.target.value)}
-                placeholder={translate('Add a comment...')}
-                className="min-h-[60px] pr-10"
-                autoFocus={false}
-                onKeyDown={(e) => {
-                  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                    e.preventDefault();
-                    handleAddComment();
-                  }
-                }}
-              />
-            )}
-            <button
-              onClick={() => handleMicrophone('new')}
-              disabled={isTranscribing}
-              className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'new'
-                ? 'bg-red-100 text-red-600 hover:bg-red-200'
-                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                }`}
-              title={isRecording && recordingFor === 'new' ? 'Stop recording' : 'Record audio'}
-            >
-              {isTranscribing && recordingFor === 'new' ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : isRecording && recordingFor === 'new' ? (
-                <MicOff className="h-4 w-4" />
-              ) : (
-                <Mic className="h-4 w-4" />
-              )}
-            </button>
-          </div>
-          <div className="flex items-center justify-between">
-            <Button
-              onClick={handleAddComment}
-              disabled={!newComment.trim()}
-            >
-              <T>Post Comment</T>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setUseMarkdown(!useMarkdown)}
-              className="text-xs"
-            >
-              <T>{useMarkdown ? "Simple" : "Markdown"}</T>
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {/* Comments List - Scrollable */}
-      <div className="max-h-[50vh] overflow-y-auto space-y-4">
-        {comments.length === 0 ? (
-          <div className="text-center py-8 text-muted-foreground">
-            <MessageCircle className="h-12 w-12 mx-auto mb-3 opacity-50" />
-            <p><T>No comments yet</T></p>
-            <p className="text-sm"><T>Be the first to comment!</T></p>
-          </div>
-        ) : (
-          comments.map(comment => renderComment(comment))
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Comments;
\ No newline at end of file
+import { useState, useEffect, useRef } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { User, MessageCircle, Heart, MoreHorizontal, Mic, MicOff, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { Link } from "react-router-dom";
+import MarkdownRenderer from "@/components/MarkdownRenderer";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { transcribeAudio } from "@/lib/openai";
+import { T, translate } from "@/i18n";
+
+import { Comment } from "@/types";
+import {
+  fetchCommentsAPI,
+  addCommentAPI,
+  editCommentAPI,
+  deleteCommentAPI,
+  toggleCommentLikeAPI
+} from "@/modules/posts/client-pictures";
+
+interface UserProfile {
+  user_id: string;
+  avatar_url: string | null;
+  display_name: string | null;
+  username: string | null;
+}
+
+interface CommentsProps {
+  pictureId: string;
+  initialComments?: Comment[];
+}
+
+const Comments = ({ pictureId, initialComments }: CommentsProps) => {
+  const { user } = useAuth();
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [newComment, setNewComment] = useState("");
+  const [replyingTo, setReplyingTo] = useState<string | null>(null);
+  const [replyText, setReplyText] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [useMarkdown, setUseMarkdown] = useState(false);
+  const [likedComments, setLikedComments] = useState<Set<string>>(new Set());
+  const [userProfiles, setUserProfiles] = useState<Map<string, UserProfile>>(new Map());
+  const [editingComment, setEditingComment] = useState<string | null>(null);
+  const [editText, setEditText] = useState("");
+
+  // Microphone recording state
+  const [isRecording, setIsRecording] = useState(false);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [recordingFor, setRecordingFor] = useState<'new' | 'reply' | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+
+  useEffect(() => {
+    fetchComments();
+  }, [pictureId, initialComments]);
+
+  const fetchComments = async () => {
+    try {
+      let data: Comment[] = [];
+
+      if (initialComments) {
+        data = initialComments;
+        // Still fetch profiles and likes from API for initial comments
+        if (data.length > 0) {
+          try {
+            const apiResult = await fetchCommentsAPI(pictureId);
+            setLikedComments(new Set(apiResult.likedCommentIds));
+            const newProfiles = new Map(userProfiles);
+            Object.entries(apiResult.profiles).forEach(([userId, profile]) => {
+              newProfiles.set(userId, profile as UserProfile);
+            });
+            setUserProfiles(newProfiles);
+          } catch {
+            // Profiles/likes are optional enrichment, don't fail
+          }
+        }
+      } else {
+        // Fetch everything from API in one call
+        const apiResult = await fetchCommentsAPI(pictureId);
+        data = apiResult.comments as Comment[];
+        setLikedComments(new Set(apiResult.likedCommentIds));
+
+        const newProfiles = new Map(userProfiles);
+        Object.entries(apiResult.profiles).forEach(([userId, profile]) => {
+          newProfiles.set(userId, profile as UserProfile);
+        });
+        setUserProfiles(newProfiles);
+      }
+
+      if (data.length === 0) {
+        setComments([]);
+        setLoading(false);
+        return;
+      }
+
+      // Organize comments into nested structure with max 3 levels
+      const commentsMap = new Map<string, Comment>();
+      const rootComments: Comment[] = [];
+
+      // First pass: create all comments with depth tracking
+      data.forEach(comment => {
+        const commentWithReplies = { ...comment, replies: [], depth: 0 };
+        commentsMap.set(comment.id, commentWithReplies);
+      });
+
+      // Second pass: organize hierarchy with depth limit
+      data.forEach(comment => {
+        const commentWithReplies = commentsMap.get(comment.id)!;
+
+        // If it has a parent, try to attach to it
+        if (comment.parent_comment_id) {
+          const parent = commentsMap.get(comment.parent_comment_id);
+          if (parent) {
+            // Calculate depth: parent depth + 1, but max 2 (0, 1, 2 = 3 levels)
+            const newDepth = Math.min(parent.depth! + 1, 2);
+            commentWithReplies.depth = newDepth;
+
+            if (parent.depth! >= 2) {
+              if (parent.replies) {
+                parent.replies.push(commentWithReplies);
+              }
+            } else {
+              if (parent.replies) {
+                parent.replies.push(commentWithReplies);
+              }
+            }
+          } else {
+            // Parent not found (deleted?), treat as root
+            rootComments.push(commentWithReplies);
+          }
+        } else {
+          rootComments.push(commentWithReplies);
+        }
+      });
+
+      setComments(rootComments);
+    } catch (error) {
+      console.error('Error fetching comments:', error);
+      toast.error('Failed to load comments');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddComment = async () => {
+    if (!user || !newComment.trim()) return;
+
+    try {
+      await addCommentAPI(pictureId, newComment.trim());
+      setNewComment("");
+      fetchComments();
+      toast.success(translate('Comment added!'));
+    } catch (error) {
+      console.error('Error adding comment:', error);
+      toast.error(translate('Failed to add comment'));
+    }
+  };
+
+  const handleAddReply = async (parentId: string) => {
+    if (!user || !replyText.trim()) return;
+
+    try {
+      await addCommentAPI(pictureId, replyText.trim(), parentId);
+      setReplyText("");
+      setReplyingTo(null);
+      fetchComments();
+      toast.success(translate('Reply added!'));
+    } catch (error) {
+      console.error('Error adding reply:', error);
+      toast.error(translate('Failed to add reply'));
+    }
+  };
+
+  const handleDeleteComment = async (commentId: string) => {
+    if (!user) return;
+
+    try {
+      await deleteCommentAPI(pictureId, commentId);
+      fetchComments();
+      toast.success(translate('Comment deleted'));
+    } catch (error) {
+      console.error('Error deleting comment:', error);
+      toast.error(translate('Failed to delete comment'));
+    }
+  };
+
+  const handleEditComment = async (commentId: string) => {
+    if (!user || !editText.trim()) return;
+
+    try {
+      await editCommentAPI(pictureId, commentId, editText.trim());
+      toast.success(translate('Comment updated successfully'));
+      setEditingComment(null);
+      setEditText("");
+      fetchComments(); // Refresh comments
+    } catch (error) {
+      console.error('Error updating comment:', error);
+      toast.error(translate('Failed to update comment'));
+    }
+  };
+
+  const startEditingComment = (comment: Comment) => {
+    setEditingComment(comment.id);
+    setEditText(comment.content);
+  };
+
+  const cancelEditingComment = () => {
+    setEditingComment(null);
+    setEditText("");
+  };
+
+  const handleToggleLike = async (commentId: string) => {
+    if (!user) {
+      toast.error(translate('Please sign in to like comments'));
+      return;
+    }
+
+    const isLiked = likedComments.has(commentId);
+
+    try {
+      const result = await toggleCommentLikeAPI(pictureId, commentId);
+
+      // Update local liked state
+      const newLikedComments = new Set(likedComments);
+      if (result.liked) {
+        newLikedComments.add(commentId);
+      } else {
+        newLikedComments.delete(commentId);
+      }
+      setLikedComments(newLikedComments);
+
+      // Update comments state for likes_count
+      const delta = result.liked ? 1 : -1;
+      const updateCommentsLikes = (comments: Comment[]): Comment[] => {
+        return comments.map(comment => {
+          if (comment.id === commentId) {
+            return { ...comment, likes_count: Math.max(0, comment.likes_count + delta) };
+          }
+          if (comment.replies) {
+            return { ...comment, replies: updateCommentsLikes(comment.replies) };
+          }
+          return comment;
+        });
+      };
+      setComments(updateCommentsLikes);
+    } catch (error) {
+      console.error('Error toggling like:', error);
+      toast.error('Failed to toggle like');
+    }
+  };
+
+  const getRelativeTime = (dateString: string) => {
+    const now = new Date();
+    const commentDate = new Date(dateString);
+    const diffInMs = now.getTime() - commentDate.getTime();
+    const diffInHours = diffInMs / (1000 * 60 * 60);
+
+    // If more than 24 hours ago, show regular date
+    if (diffInHours >= 24) {
+      return commentDate.toLocaleDateString();
+    }
+
+    // Show relative time for recent comments
+    const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+
+    if (diffInMinutes < 1) {
+      return 'just now';
+    } else if (diffInMinutes < 60) {
+      return `${diffInMinutes} min${diffInMinutes === 1 ? '' : 's'} ago`;
+    } else {
+      const hours = Math.floor(diffInMinutes / 60);
+      return `${hours} hour${hours === 1 ? '' : 's'} ago`;
+    }
+  };
+
+  const handleMicrophone = async (type: 'new' | 'reply') => {
+    if (isRecording) {
+      // Stop recording
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
+        mediaRecorderRef.current.stop();
+        setIsRecording(false);
+      }
+    } else {
+      // Start recording
+      try {
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+          toast.error(translate('Audio recording is not supported in your browser'));
+          return;
+        }
+
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+        const options = { mimeType: 'audio/webm' };
+        let mediaRecorder: MediaRecorder;
+
+        try {
+          mediaRecorder = new MediaRecorder(stream, options);
+        } catch (e) {
+          mediaRecorder = new MediaRecorder(stream);
+        }
+
+        mediaRecorderRef.current = mediaRecorder;
+        audioChunksRef.current = [];
+        setRecordingFor(type);
+
+        mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            audioChunksRef.current.push(event.data);
+          }
+        };
+
+        mediaRecorder.onstop = async () => {
+          setIsTranscribing(true);
+
+          try {
+            const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
+            const audioFile = new File([audioBlob], 'recording.webm', { type: 'audio/webm' });
+
+            toast.info(translate('Transcribing audio...'));
+            const transcribedText = await transcribeAudio(audioFile);
+
+            if (transcribedText) {
+              if (type === 'new') {
+                setNewComment(prev => {
+                  const trimmed = prev.trim();
+                  return trimmed ? `${trimmed}\n\n${transcribedText}` : transcribedText;
+                });
+              } else if (type === 'reply') {
+                setReplyText(prev => {
+                  const trimmed = prev.trim();
+                  return trimmed ? `${trimmed}\n\n${transcribedText}` : transcribedText;
+                });
+              }
+              toast.success(translate('Audio transcribed successfully!'));
+            } else {
+              toast.error(translate('Failed to transcribe audio. Please check your OpenAI API key.'));
+            }
+          } catch (error: any) {
+            console.error('Error transcribing audio:', error);
+            toast.error(error.message || translate('Failed to transcribe audio'));
+          } finally {
+            setIsTranscribing(false);
+            setRecordingFor(null);
+            audioChunksRef.current = [];
+            stream.getTracks().forEach(track => track.stop());
+          }
+        };
+
+        mediaRecorder.start();
+        setIsRecording(true);
+        toast.info(translate('Recording... Click mic again to stop'));
+
+      } catch (error: any) {
+        console.error('Error accessing microphone:', error);
+        if (error.name === 'NotAllowedError') {
+          toast.error(translate('Microphone access denied. Please allow microphone access in your browser settings.'));
+        } else {
+          toast.error(translate('Failed to access microphone') + ': ' + error.message);
+        }
+      }
+    }
+  };
+
+  const renderComment = (comment: Comment) => {
+    const isOwner = user?.id === comment.user_id;
+    const marginLeft = comment.depth ? comment.depth * 24 : 0;
+    const userProfile = userProfiles.get(comment.user_id);
+
+    return (
+      <div key={comment.id} className="space-y-3">
+        <div className="flex space-x-3" style={{ marginLeft: `${marginLeft}px` }}>
+          <Link
+            to={`/user/${comment.user_id}`}
+            className="w-8 h-8 bg-gradient-primary rounded-full flex items-center justify-center flex-shrink-0 hover:scale-110 transition-transform overflow-hidden"
+          >
+            {userProfile?.avatar_url ? (
+              <img
+                src={userProfile.avatar_url}
+                alt={userProfile.display_name || 'User avatar'}
+                className="w-full h-full rounded-full object-cover"
+              />
+            ) : (
+              <User className="h-4 w-4 text-white" />
+            )}
+          </Link>
+          <div className="flex-1 min-w-0">
+            <div className="bg-card rounded-lg p-3">
+              <div className="flex items-center justify-between mb-1">
+                <div className="flex items-center space-x-2">
+                  <Link
+                    to={`/user/${comment.user_id}`}
+                    className="text-sm font-semibold hover:underline"
+                  >
+                    {userProfile?.display_name || `User ${comment.user_id.slice(0, 8)}`}
+                  </Link>
+                  <span className="text-xs text-muted-foreground">
+                    {getRelativeTime(comment.created_at)}
+                  </span>
+                </div>
+                {isOwner && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
+                        <MoreHorizontal className="h-3 w-3" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => startEditingComment(comment)}
+                      >
+                        <T>Edit</T>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() => handleDeleteComment(comment.id)}
+                        className="text-destructive"
+                      >
+                        <T>Delete</T>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
+              <div className="text-sm">
+                {editingComment === comment.id ? (
+                  <div className="space-y-2">
+                    <Textarea
+                      value={editText}
+                      onChange={(e) => setEditText(e.target.value)}
+                      className="min-h-[60px] text-sm"
+                      autoFocus
+                    />
+                    <div className="flex items-center space-x-2">
+                      <Button
+                        size="sm"
+                        onClick={() => handleEditComment(comment.id)}
+                        disabled={!editText.trim()}
+                      >
+                        <T>Save</T>
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={cancelEditingComment}
+                      >
+                        <T>Cancel</T>
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <MarkdownRenderer content={comment.content} className="prose-sm" />
+                )}
+              </div>
+            </div>
+            <div className="flex items-center space-x-4 mt-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleToggleLike(comment.id)}
+                className={`h-6 px-2 text-xs ${likedComments.has(comment.id)
+                  ? 'text-red-500 hover:text-red-600'
+                  : 'text-muted-foreground hover:text-foreground'
+                  }`}
+              >
+                <Heart
+                  className={`h-3 w-3 mr-1 ${likedComments.has(comment.id) ? 'fill-current' : ''
+                    }`}
+                />
+                {comment.likes_count > 0 && <span className="mr-1">{comment.likes_count}</span>}
+                <T>Like</T>
+              </Button>
+              {comment.depth < 2 && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setReplyingTo(replyingTo === comment.id ? null : comment.id)}
+                  className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
+                >
+                  <MessageCircle className="h-3 w-3 mr-1" />
+                  <T>Reply</T>
+                </Button>
+              )}
+            </div>
+
+            {replyingTo === comment.id && (
+              <div className="mt-3 space-y-2">
+                <div className="relative">
+                  <Textarea
+                    value={replyText}
+                    onChange={(e) => setReplyText(e.target.value)}
+                    placeholder={translate('Write a reply...')}
+                    className="min-h-[60px] text-sm pr-10"
+                    autoFocus={false}
+                    onKeyDown={(e) => {
+                      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                        e.preventDefault();
+                        handleAddReply(comment.id);
+                      }
+                    }}
+                  />
+                  <button
+                    onClick={() => handleMicrophone('reply')}
+                    disabled={isTranscribing}
+                    className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'reply'
+                      ? 'bg-red-100 text-red-600 hover:bg-red-200'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                      }`}
+                    title={isRecording && recordingFor === 'reply' ? 'Stop recording' : 'Record audio'}
+                  >
+                    {isTranscribing && recordingFor === 'reply' ? (
+                      <Loader2 className="h-3 w-3 animate-spin" />
+                    ) : isRecording && recordingFor === 'reply' ? (
+                      <MicOff className="h-3 w-3" />
+                    ) : (
+                      <Mic className="h-3 w-3" />
+                    )}
+                  </button>
+                </div>
+                <div className="flex space-x-2">
+                  <Button
+                    size="sm"
+                    onClick={() => handleAddReply(comment.id)}
+                    disabled={!replyText.trim()}
+                  >
+                    <T>Reply</T>
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      setReplyingTo(null);
+                      setReplyText("");
+                    }}
+                  >
+                    <T>Cancel</T>
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {comment.replies && comment.replies.length > 0 && (
+          <div className="space-y-3">
+            {comment.replies.map(reply => renderComment(reply))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center py-4">
+        <div className="text-muted-foreground"><T>Loading comments...</T></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Comment Input - Always visible */}
+      {user && (
+        <div className="space-y-3 pb-4 border-b">
+          <div className="relative">
+            {useMarkdown ? (
+              <div />
+            ) : (
+              <Textarea
+                value={newComment}
+                onChange={(e) => setNewComment(e.target.value)}
+                placeholder={translate('Add a comment...')}
+                className="min-h-[60px] pr-10"
+                autoFocus={false}
+                onKeyDown={(e) => {
+                  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                    e.preventDefault();
+                    handleAddComment();
+                  }
+                }}
+              />
+            )}
+            <button
+              onClick={() => handleMicrophone('new')}
+              disabled={isTranscribing}
+              className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'new'
+                ? 'bg-red-100 text-red-600 hover:bg-red-200'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                }`}
+              title={isRecording && recordingFor === 'new' ? 'Stop recording' : 'Record audio'}
+            >
+              {isTranscribing && recordingFor === 'new' ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : isRecording && recordingFor === 'new' ? (
+                <MicOff className="h-4 w-4" />
+              ) : (
+                <Mic className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+          <div className="flex items-center justify-between">
+            <Button
+              onClick={handleAddComment}
+              disabled={!newComment.trim()}
+            >
+              <T>Post Comment</T>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setUseMarkdown(!useMarkdown)}
+              className="text-xs"
+            >
+              <T>{useMarkdown ? "Simple" : "Markdown"}</T>
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Comments List - Scrollable */}
+      <div className="max-h-[50vh] overflow-y-auto space-y-4">
+        {comments.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <MessageCircle className="h-12 w-12 mx-auto mb-3 opacity-50" />
+            <p><T>No comments yet</T></p>
+            <p className="text-sm"><T>Be the first to comment!</T></p>
+          </div>
+        ) : (
+          comments.map(comment => renderComment(comment))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Comments;
diff --git a/packages/ui/src/components/EditImageModal.tsx b/packages/ui/src/components/EditImageModal.tsx
index 688aabcf..36f06112 100644
--- a/packages/ui/src/components/EditImageModal.tsx
+++ b/packages/ui/src/components/EditImageModal.tsx
@@ -1,564 +1,564 @@
-import { useState, useRef, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Switch } from '@/components/ui/switch';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Card, CardContent } from '@/components/ui/card';
-import { useForm } from 'react-hook-form';
-import { supabase } from '@/integrations/supabase/client';
-import { updatePicture } from '@/modules/posts/client-pictures';
-import { useAuth } from '@/hooks/useAuth';
-import { toast } from 'sonner';
-import { Edit3, GitBranch, Sparkles, Mic, MicOff, Loader2, Bookmark } from 'lucide-react';
-import MarkdownEditor from '@/components/MarkdownEditor';
-import VersionSelector from '@/components/VersionSelector';
-import { analyzeImages, transcribeAudio } from '@/lib/openai';
-import { AI_IMAGE_ANALYSIS_PROMPT } from '@/constants';
-import { T, translate } from '@/i18n';
-
-interface Collection {
-  id: string;
-  name: string;
-  description: string | null;
-  slug: string;
-  is_public: boolean;
-}
-
-interface EditFormData {
-  title?: string;
-  description?: string;
-  visible: boolean;
-}
-
-interface EditImageModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  pictureId: string;
-  currentTitle: string;
-  currentDescription: string | null;
-  currentVisible: boolean;
-  imageUrl?: string;
-  onUpdateSuccess: () => void;
-}
-
-const EditImageModal = ({
-  open,
-  onOpenChange,
-  pictureId,
-  currentTitle,
-  currentDescription,
-  currentVisible,
-  imageUrl,
-  onUpdateSuccess
-}: EditImageModalProps) => {
-  const [updating, setUpdating] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const { user } = useAuth();
-
-  // Microphone recording state
-  const [isRecording, setIsRecording] = useState(false);
-  const [isTranscribing, setIsTranscribing] = useState(false);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const audioChunksRef = useRef<Blob[]>([]);
-
-  // Collections state
-  const [collections, setCollections] = useState<Collection[]>([]);
-  const [selectedCollections, setSelectedCollections] = useState<Set<string>>(new Set());
-  const [loadingCollections, setLoadingCollections] = useState(false);
-
-  const form = useForm<EditFormData>({
-    defaultValues: {
-      title: currentTitle,
-      description: currentDescription || '',
-      visible: currentVisible,
-    },
-  });
-
-  // Load collections when modal opens
-  useEffect(() => {
-    if (open && user) {
-      fetchCollections();
-      fetchPictureCollections();
-    }
-  }, [open, user, pictureId]);
-
-  const fetchCollections = async () => {
-    if (!user) return;
-
-    setLoadingCollections(true);
-    try {
-      const { data, error } = await supabase
-        .from('collections')
-        .select('*')
-        .eq('user_id', user.id)
-        .order('created_at', { ascending: false });
-
-      if (error) throw error;
-      setCollections(data || []);
-    } catch (error) {
-      console.error('Error fetching collections:', error);
-      toast.error(translate('Failed to load collections'));
-    } finally {
-      setLoadingCollections(false);
-    }
-  };
-
-  const fetchPictureCollections = async () => {
-    if (!user) return;
-
-    try {
-      const { data, error } = await supabase
-        .from('collection_pictures')
-        .select('collection_id')
-        .eq('picture_id', pictureId);
-
-      if (error) throw error;
-
-      const collectionIds = new Set(data.map(item => item.collection_id));
-      setSelectedCollections(collectionIds);
-    } catch (error) {
-      console.error('Error fetching picture collections:', error);
-    }
-  };
-
-  const handleToggleCollection = async (collectionId: string) => {
-    if (!user) return;
-
-    const isSelected = selectedCollections.has(collectionId);
-
-    try {
-      if (isSelected) {
-        // Remove from collection
-        const { error } = await supabase
-          .from('collection_pictures')
-          .delete()
-          .eq('collection_id', collectionId)
-          .eq('picture_id', pictureId);
-
-        if (error) throw error;
-
-        setSelectedCollections(prev => {
-          const newSet = new Set(prev);
-          newSet.delete(collectionId);
-          return newSet;
-        });
-
-        toast.success(translate('Removed from collection'));
-      } else {
-        // Add to collection
-        const { error } = await supabase
-          .from('collection_pictures')
-          .insert({
-            collection_id: collectionId,
-            picture_id: pictureId
-          });
-
-        if (error) throw error;
-
-        setSelectedCollections(prev => new Set([...prev, collectionId]));
-        toast.success(translate('Added to collection'));
-      }
-    } catch (error) {
-      console.error('Error toggling collection:', error);
-      toast.error(translate('Failed to update collection'));
-    }
-  };
-
-  const onSubmit = async (data: EditFormData) => {
-    if (!user) return;
-
-    setUpdating(true);
-    try {
-      await updatePicture(pictureId, {
-        title: data.title?.trim() || '',
-        description: data.description || null,
-        visible: data.visible,
-        updated_at: new Date().toISOString(),
-      });
-
-      toast.success(translate('Picture updated successfully!'));
-      onUpdateSuccess();
-    } catch (error: any) {
-      console.error('Error updating picture:', error);
-      toast.error(translate('Failed to update picture'));
-    } finally {
-      setUpdating(false);
-    }
-  };
-
-  const handleClose = () => {
-    form.reset();
-    onOpenChange(false);
-  };
-
-  const handleMagicGenerate = async () => {
-    if (!imageUrl) {
-      toast.error(translate('No image URL available'));
-      return;
-    }
-
-    setIsGenerating(true);
-    try {
-      // Fetch the image and convert to File
-      const response = await fetch(imageUrl);
-      const blob = await response.blob();
-      const file = new File([blob], 'image.png', { type: blob.type || 'image/png' });
-
-      // Call OpenAI to analyze the image
-      const result = await analyzeImages([file], AI_IMAGE_ANALYSIS_PROMPT);
-
-      if (!result) {
-        toast.error(translate('OpenAI API key not configured. Please add your OpenAI API key in your profile settings.'));
-        return;
-      }
-
-      // Update form fields with generated content
-      form.setValue('title', result.title);
-      form.setValue('description', result.description);
-
-      toast.success(translate('Title and description generated!'));
-    } catch (error: any) {
-      console.error('Error generating metadata:', error);
-      toast.error(error.message || translate('Failed to generate metadata. Please check your OpenAI API key.'));
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleMicrophone = async () => {
-    if (isRecording) {
-      // Stop recording
-      if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-        mediaRecorderRef.current.stop();
-        setIsRecording(false);
-      }
-    } else {
-      // Start recording
-      try {
-        // Check if MediaRecorder is supported
-        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-          toast.error(translate('Audio recording is not supported in your browser'));
-          return;
-        }
-
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
-        // Create MediaRecorder with common audio format
-        const options = { mimeType: 'audio/webm' };
-        let mediaRecorder: MediaRecorder;
-
-        try {
-          mediaRecorder = new MediaRecorder(stream, options);
-        } catch (e) {
-          // Fallback without options if the format is not supported
-          mediaRecorder = new MediaRecorder(stream);
-        }
-
-        mediaRecorderRef.current = mediaRecorder;
-        audioChunksRef.current = [];
-
-        mediaRecorder.ondataavailable = (event) => {
-          if (event.data.size > 0) {
-            audioChunksRef.current.push(event.data);
-          }
-        };
-
-        mediaRecorder.onstop = async () => {
-          setIsTranscribing(true);
-
-          try {
-            const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
-            const audioFile = new File([audioBlob], 'recording.webm', { type: 'audio/webm' });
-
-            toast.info(translate('Transcribing audio...'));
-            const transcribedText = await transcribeAudio(audioFile);
-
-            if (transcribedText) {
-              // Append transcribed text to description field
-              const currentDescription = form.getValues('description') || '';
-              const trimmed = currentDescription.trim();
-              const newDescription = trimmed ? `${trimmed}\n\n${transcribedText}` : transcribedText;
-
-              form.setValue('description', newDescription);
-              toast.success(translate('Audio transcribed successfully!'));
-            } else {
-              toast.error(translate('Failed to transcribe audio. Please check your OpenAI API key.'));
-            }
-          } catch (error: any) {
-            console.error('Error transcribing audio:', error);
-            toast.error(error.message || translate('Failed to transcribe audio'));
-          } finally {
-            setIsTranscribing(false);
-            audioChunksRef.current = [];
-
-            // Stop all tracks
-            stream.getTracks().forEach(track => track.stop());
-          }
-        };
-
-        mediaRecorder.start();
-        setIsRecording(true);
-        toast.info(translate('Recording started... Click again to stop'));
-
-      } catch (error: any) {
-        console.error('Error accessing microphone:', error);
-        if (error.name === 'NotAllowedError') {
-          toast.error(translate('Microphone access denied. Please allow microphone access in your browser settings.'));
-        } else {
-          toast.error(translate('Failed to access microphone') + ': ' + error.message);
-        }
-      }
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Edit3 className="h-5 w-5" />
-            <T>Edit Picture</T>
-          </DialogTitle>
-        </DialogHeader>
-
-        <Tabs defaultValue="edit" className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="edit" className="flex items-center gap-2">
-              <Edit3 className="h-4 w-4" />
-              <T>Edit Details</T>
-            </TabsTrigger>
-            <TabsTrigger value="collections" className="flex items-center gap-2">
-              <Bookmark className="h-4 w-4" />
-              <T>Collections</T>
-            </TabsTrigger>
-            <TabsTrigger value="versions" className="flex items-center gap-2">
-              <GitBranch className="h-4 w-4" />
-              <T>Versions</T>
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="edit" className="mt-4">
-            <Form {...form}>
-              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-                {/* Magic Generate Button */}
-                {imageUrl && (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    className="w-full"
-                    onClick={handleMagicGenerate}
-                    disabled={isGenerating || updating}
-                  >
-                    {isGenerating ? (
-                      <>
-                        <div className="animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent mr-2"></div>
-                        <T>Generating...</T>
-                      </>
-                    ) : (
-                      <>
-                        <Sparkles className="h-4 w-4 mr-2" />
-                        <T>Generate Title & Description with AI</T>
-                      </>
-                    )}
-                  </Button>
-                )}
-
-                <FormField
-                  control={form.control}
-                  name="title"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel><T>Title (Optional)</T></FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder={translate("Enter a title...")}
-                          {...field}
-                          onKeyDown={(e) => {
-                            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                              e.preventDefault();
-                              form.handleSubmit(onSubmit)();
-                            }
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="description"
-                  render={({ field }) => (
-                    <FormItem>
-                      <div className="flex items-center justify-between mb-2">
-                        <FormLabel><T>Description (Optional)</T></FormLabel>
-                        <button
-                          type="button"
-                          onClick={handleMicrophone}
-                          disabled={isTranscribing || updating}
-                          className={`p-1.5 rounded-md transition-colors ${isRecording
-                            ? 'bg-red-100 text-red-600 hover:bg-red-200'
-                            : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                            }`}
-                          title={translate(isRecording ? 'Stop recording' : 'Record audio')}
-                        >
-                          {isTranscribing ? (
-                            <Loader2 className="h-4 w-4 animate-spin" />
-                          ) : isRecording ? (
-                            <MicOff className="h-4 w-4" />
-                          ) : (
-                            <Mic className="h-4 w-4" />
-                          )}
-                        </button>
-                      </div>
-                      <FormControl>
-                        <MarkdownEditor
-                          value={field.value || ''}
-                          onChange={field.onChange}
-                          placeholder={translate("Describe your photo... You can use **markdown** formatting!")}
-                          className="min-h-[120px]"
-                          onKeyDown={(e) => {
-                            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                              e.preventDefault();
-                              form.handleSubmit(onSubmit)();
-                            }
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="visible"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                      <div className="space-y-0.5">
-                        <FormLabel className="text-base">
-                          <T>Visible</T>
-                        </FormLabel>
-                        <div className="text-sm text-muted-foreground">
-                          <T>Make this picture visible to others</T>
-                        </div>
-                      </div>
-                      <FormControl>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-                <div className="flex gap-2">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    className="flex-1"
-                    onClick={handleClose}
-                    disabled={updating}
-                  >
-                    <T>Cancel</T>
-                  </Button>
-                  <Button
-                    type="submit"
-                    className="flex-1"
-                    disabled={updating}
-                  >
-                    <T>{updating ? 'Updating...' : 'Update'}</T>
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </TabsContent>
-
-          <TabsContent value="collections" className="mt-4">
-            <div className="space-y-4">
-              {loadingCollections ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                </div>
-              ) : collections.length === 0 ? (
-                <div className="text-center py-8">
-                  <Bookmark className="h-12 w-12 mx-auto mb-3 text-muted-foreground opacity-50" />
-                  <p className="text-muted-foreground mb-4">
-                    <T>No collections yet</T>
-                  </p>
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      handleClose();
-                      // Navigate to create collection - could be improved with proper navigation
-                      window.location.href = '/collections/new';
-                    }}
-                  >
-                    <T>Create Collection</T>
-                  </Button>
-                </div>
-              ) : (
-                <div className="space-y-2 max-h-96 overflow-y-auto">
-                  {collections.map((collection) => (
-                    <Card
-                      key={collection.id}
-                      className={`cursor-pointer transition-colors ${selectedCollections.has(collection.id)
-                        ? 'bg-primary/10 border-primary'
-                        : 'hover:bg-muted/50'
-                        }`}
-                      onClick={() => handleToggleCollection(collection.id)}
-                    >
-                      <CardContent className="p-3">
-                        <div className="flex items-center justify-between">
-                          <div className="flex-1 mr-3">
-                            <div className="flex items-center gap-2">
-                              <h4 className="font-medium">{collection.name}</h4>
-                              {!collection.is_public && (
-                                <span className="text-xs text-muted-foreground">(Private)</span>
-                              )}
-                            </div>
-                            {collection.description && (
-                              <p className="text-sm text-muted-foreground line-clamp-1">
-                                {collection.description}
-                              </p>
-                            )}
-                          </div>
-                          <Checkbox
-                            checked={selectedCollections.has(collection.id)}
-                            onCheckedChange={() => handleToggleCollection(collection.id)}
-                            onClick={(e) => e.stopPropagation()}
-                          />
-                        </div>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
-              )}
-
-              <div className="pt-2 text-sm text-muted-foreground text-center">
-                <T>
-                  {selectedCollections.size === 0
-                    ? 'Not in any collections'
-                    : selectedCollections.size === 1
-                      ? 'In 1 collection'
-                      : `In ${selectedCollections.size} collections`}
-                </T>
-              </div>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="versions" className="mt-4">
-            <VersionSelector
-              currentPictureId={pictureId}
-              onVersionSelect={() => { /* stay open — user may toggle multiple versions */ }}
-            />
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default EditImageModal;
\ No newline at end of file
+import { useState, useRef, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Switch } from '@/components/ui/switch';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Card, CardContent } from '@/components/ui/card';
+import { useForm } from 'react-hook-form';
+import { supabase } from '@/integrations/supabase/client';
+import { updatePicture } from '@/modules/posts/client-pictures';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from 'sonner';
+import { Edit3, GitBranch, Sparkles, Mic, MicOff, Loader2, Bookmark } from 'lucide-react';
+import MarkdownEditor from '@/components/MarkdownEditor';
+import VersionSelector from '@/components/VersionSelector';
+import { analyzeImages, transcribeAudio } from '@/lib/openai';
+import { AI_IMAGE_ANALYSIS_PROMPT } from '@/constants';
+import { T, translate } from '@/i18n';
+
+interface Collection {
+  id: string;
+  name: string;
+  description: string | null;
+  slug: string;
+  is_public: boolean;
+}
+
+interface EditFormData {
+  title?: string;
+  description?: string;
+  visible: boolean;
+}
+
+interface EditImageModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  pictureId: string;
+  currentTitle: string;
+  currentDescription: string | null;
+  currentVisible: boolean;
+  imageUrl?: string;
+  onUpdateSuccess: () => void;
+}
+
+const EditImageModal = ({
+  open,
+  onOpenChange,
+  pictureId,
+  currentTitle,
+  currentDescription,
+  currentVisible,
+  imageUrl,
+  onUpdateSuccess
+}: EditImageModalProps) => {
+  const [updating, setUpdating] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const { user } = useAuth();
+
+  // Microphone recording state
+  const [isRecording, setIsRecording] = useState(false);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+
+  // Collections state
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [selectedCollections, setSelectedCollections] = useState<Set<string>>(new Set());
+  const [loadingCollections, setLoadingCollections] = useState(false);
+
+  const form = useForm<EditFormData>({
+    defaultValues: {
+      title: currentTitle,
+      description: currentDescription || '',
+      visible: currentVisible,
+    },
+  });
+
+  // Load collections when modal opens
+  useEffect(() => {
+    if (open && user) {
+      fetchCollections();
+      fetchPictureCollections();
+    }
+  }, [open, user, pictureId]);
+
+  const fetchCollections = async () => {
+    if (!user) return;
+
+    setLoadingCollections(true);
+    try {
+      const { data, error } = await supabase
+        .from('collections')
+        .select('*')
+        .eq('user_id', user.id)
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      setCollections(data || []);
+    } catch (error) {
+      console.error('Error fetching collections:', error);
+      toast.error(translate('Failed to load collections'));
+    } finally {
+      setLoadingCollections(false);
+    }
+  };
+
+  const fetchPictureCollections = async () => {
+    if (!user) return;
+
+    try {
+      const { data, error } = await supabase
+        .from('collection_pictures')
+        .select('collection_id')
+        .eq('picture_id', pictureId);
+
+      if (error) throw error;
+
+      const collectionIds = new Set(data.map(item => item.collection_id));
+      setSelectedCollections(collectionIds);
+    } catch (error) {
+      console.error('Error fetching picture collections:', error);
+    }
+  };
+
+  const handleToggleCollection = async (collectionId: string) => {
+    if (!user) return;
+
+    const isSelected = selectedCollections.has(collectionId);
+
+    try {
+      if (isSelected) {
+        // Remove from collection
+        const { error } = await supabase
+          .from('collection_pictures')
+          .delete()
+          .eq('collection_id', collectionId)
+          .eq('picture_id', pictureId);
+
+        if (error) throw error;
+
+        setSelectedCollections(prev => {
+          const newSet = new Set(prev);
+          newSet.delete(collectionId);
+          return newSet;
+        });
+
+        toast.success(translate('Removed from collection'));
+      } else {
+        // Add to collection
+        const { error } = await supabase
+          .from('collection_pictures')
+          .insert({
+            collection_id: collectionId,
+            picture_id: pictureId
+          });
+
+        if (error) throw error;
+
+        setSelectedCollections(prev => new Set([...prev, collectionId]));
+        toast.success(translate('Added to collection'));
+      }
+    } catch (error) {
+      console.error('Error toggling collection:', error);
+      toast.error(translate('Failed to update collection'));
+    }
+  };
+
+  const onSubmit = async (data: EditFormData) => {
+    if (!user) return;
+
+    setUpdating(true);
+    try {
+      await updatePicture(pictureId, {
+        title: data.title?.trim() || '',
+        description: data.description || null,
+        visible: data.visible,
+        updated_at: new Date().toISOString(),
+      });
+
+      toast.success(translate('Picture updated successfully!'));
+      onUpdateSuccess();
+    } catch (error: any) {
+      console.error('Error updating picture:', error);
+      toast.error(translate('Failed to update picture'));
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const handleClose = () => {
+    form.reset();
+    onOpenChange(false);
+  };
+
+  const handleMagicGenerate = async () => {
+    if (!imageUrl) {
+      toast.error(translate('No image URL available'));
+      return;
+    }
+
+    setIsGenerating(true);
+    try {
+      // Fetch the image and convert to File
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+      const file = new File([blob], 'image.png', { type: blob.type || 'image/png' });
+
+      // Call OpenAI to analyze the image
+      const result = await analyzeImages([file], AI_IMAGE_ANALYSIS_PROMPT);
+
+      if (!result) {
+        toast.error(translate('OpenAI API key not configured. Please add your OpenAI API key in your profile settings.'));
+        return;
+      }
+
+      // Update form fields with generated content
+      form.setValue('title', result.title);
+      form.setValue('description', result.description);
+
+      toast.success(translate('Title and description generated!'));
+    } catch (error: any) {
+      console.error('Error generating metadata:', error);
+      toast.error(error.message || translate('Failed to generate metadata. Please check your OpenAI API key.'));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleMicrophone = async () => {
+    if (isRecording) {
+      // Stop recording
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
+        mediaRecorderRef.current.stop();
+        setIsRecording(false);
+      }
+    } else {
+      // Start recording
+      try {
+        // Check if MediaRecorder is supported
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+          toast.error(translate('Audio recording is not supported in your browser'));
+          return;
+        }
+
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+        // Create MediaRecorder with common audio format
+        const options = { mimeType: 'audio/webm' };
+        let mediaRecorder: MediaRecorder;
+
+        try {
+          mediaRecorder = new MediaRecorder(stream, options);
+        } catch (e) {
+          // Fallback without options if the format is not supported
+          mediaRecorder = new MediaRecorder(stream);
+        }
+
+        mediaRecorderRef.current = mediaRecorder;
+        audioChunksRef.current = [];
+
+        mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            audioChunksRef.current.push(event.data);
+          }
+        };
+
+        mediaRecorder.onstop = async () => {
+          setIsTranscribing(true);
+
+          try {
+            const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
+            const audioFile = new File([audioBlob], 'recording.webm', { type: 'audio/webm' });
+
+            toast.info(translate('Transcribing audio...'));
+            const transcribedText = await transcribeAudio(audioFile);
+
+            if (transcribedText) {
+              // Append transcribed text to description field
+              const currentDescription = form.getValues('description') || '';
+              const trimmed = currentDescription.trim();
+              const newDescription = trimmed ? `${trimmed}\n\n${transcribedText}` : transcribedText;
+
+              form.setValue('description', newDescription);
+              toast.success(translate('Audio transcribed successfully!'));
+            } else {
+              toast.error(translate('Failed to transcribe audio. Please check your OpenAI API key.'));
+            }
+          } catch (error: any) {
+            console.error('Error transcribing audio:', error);
+            toast.error(error.message || translate('Failed to transcribe audio'));
+          } finally {
+            setIsTranscribing(false);
+            audioChunksRef.current = [];
+
+            // Stop all tracks
+            stream.getTracks().forEach(track => track.stop());
+          }
+        };
+
+        mediaRecorder.start();
+        setIsRecording(true);
+        toast.info(translate('Recording started... Click again to stop'));
+
+      } catch (error: any) {
+        console.error('Error accessing microphone:', error);
+        if (error.name === 'NotAllowedError') {
+          toast.error(translate('Microphone access denied. Please allow microphone access in your browser settings.'));
+        } else {
+          toast.error(translate('Failed to access microphone') + ': ' + error.message);
+        }
+      }
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Edit3 className="h-5 w-5" />
+            <T>Edit Picture</T>
+          </DialogTitle>
+        </DialogHeader>
+
+        <Tabs defaultValue="edit" className="w-full">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="edit" className="flex items-center gap-2">
+              <Edit3 className="h-4 w-4" />
+              <T>Edit Details</T>
+            </TabsTrigger>
+            <TabsTrigger value="collections" className="flex items-center gap-2">
+              <Bookmark className="h-4 w-4" />
+              <T>Collections</T>
+            </TabsTrigger>
+            <TabsTrigger value="versions" className="flex items-center gap-2">
+              <GitBranch className="h-4 w-4" />
+              <T>Versions</T>
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="edit" className="mt-4">
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                {/* Magic Generate Button */}
+                {imageUrl && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    onClick={handleMagicGenerate}
+                    disabled={isGenerating || updating}
+                  >
+                    {isGenerating ? (
+                      <>
+                        <div className="animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent mr-2"></div>
+                        <T>Generating...</T>
+                      </>
+                    ) : (
+                      <>
+                        <Sparkles className="h-4 w-4 mr-2" />
+                        <T>Generate Title & Description with AI</T>
+                      </>
+                    )}
+                  </Button>
+                )}
+
+                <FormField
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel><T>Title (Optional)</T></FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={translate("Enter a title...")}
+                          {...field}
+                          onKeyDown={(e) => {
+                            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                              e.preventDefault();
+                              form.handleSubmit(onSubmit)();
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex items-center justify-between mb-2">
+                        <FormLabel><T>Description (Optional)</T></FormLabel>
+                        <button
+                          type="button"
+                          onClick={handleMicrophone}
+                          disabled={isTranscribing || updating}
+                          className={`p-1.5 rounded-md transition-colors ${isRecording
+                            ? 'bg-red-100 text-red-600 hover:bg-red-200'
+                            : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                            }`}
+                          title={translate(isRecording ? 'Stop recording' : 'Record audio')}
+                        >
+                          {isTranscribing ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : isRecording ? (
+                            <MicOff className="h-4 w-4" />
+                          ) : (
+                            <Mic className="h-4 w-4" />
+                          )}
+                        </button>
+                      </div>
+                      <FormControl>
+                        <MarkdownEditor
+                          value={field.value || ''}
+                          onChange={field.onChange}
+                          placeholder={translate("Describe your photo... You can use **markdown** formatting!")}
+                          className="min-h-[120px]"
+                          onKeyDown={(e) => {
+                            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                              e.preventDefault();
+                              form.handleSubmit(onSubmit)();
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="visible"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base">
+                          <T>Visible</T>
+                        </FormLabel>
+                        <div className="text-sm text-muted-foreground">
+                          <T>Make this picture visible to others</T>
+                        </div>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="flex-1"
+                    onClick={handleClose}
+                    disabled={updating}
+                  >
+                    <T>Cancel</T>
+                  </Button>
+                  <Button
+                    type="submit"
+                    className="flex-1"
+                    disabled={updating}
+                  >
+                    <T>{updating ? 'Updating...' : 'Update'}</T>
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </TabsContent>
+
+          <TabsContent value="collections" className="mt-4">
+            <div className="space-y-4">
+              {loadingCollections ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : collections.length === 0 ? (
+                <div className="text-center py-8">
+                  <Bookmark className="h-12 w-12 mx-auto mb-3 text-muted-foreground opacity-50" />
+                  <p className="text-muted-foreground mb-4">
+                    <T>No collections yet</T>
+                  </p>
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      handleClose();
+                      // Navigate to create collection - could be improved with proper navigation
+                      window.location.href = '/collections/new';
+                    }}
+                  >
+                    <T>Create Collection</T>
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-2 max-h-96 overflow-y-auto">
+                  {collections.map((collection) => (
+                    <Card
+                      key={collection.id}
+                      className={`cursor-pointer transition-colors ${selectedCollections.has(collection.id)
+                        ? 'bg-primary/10 border-primary'
+                        : 'hover:bg-muted/50'
+                        }`}
+                      onClick={() => handleToggleCollection(collection.id)}
+                    >
+                      <CardContent className="p-3">
+                        <div className="flex items-center justify-between">
+                          <div className="flex-1 mr-3">
+                            <div className="flex items-center gap-2">
+                              <h4 className="font-medium">{collection.name}</h4>
+                              {!collection.is_public && (
+                                <span className="text-xs text-muted-foreground">(Private)</span>
+                              )}
+                            </div>
+                            {collection.description && (
+                              <p className="text-sm text-muted-foreground line-clamp-1">
+                                {collection.description}
+                              </p>
+                            )}
+                          </div>
+                          <Checkbox
+                            checked={selectedCollections.has(collection.id)}
+                            onCheckedChange={() => handleToggleCollection(collection.id)}
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              )}
+
+              <div className="pt-2 text-sm text-muted-foreground text-center">
+                <T>
+                  {selectedCollections.size === 0
+                    ? 'Not in any collections'
+                    : selectedCollections.size === 1
+                      ? 'In 1 collection'
+                      : `In ${selectedCollections.size} collections`}
+                </T>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="versions" className="mt-4">
+            <VersionSelector
+              currentPictureId={pictureId}
+              onVersionSelect={() => { /* stay open — user may toggle multiple versions */ }}
+            />
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditImageModal;
diff --git a/packages/ui/src/components/GalleryLarge.tsx b/packages/ui/src/components/GalleryLarge.tsx
index dbd036c6..85361a19 100644
--- a/packages/ui/src/components/GalleryLarge.tsx
+++ b/packages/ui/src/components/GalleryLarge.tsx
@@ -1,157 +1,157 @@
-import MediaCard from "./MediaCard";
-import React, { useEffect, useState, useRef, useCallback } from "react";
-import { useAuth } from "@/hooks/useAuth";
-import { useNavigate } from "react-router-dom";
-
-import { useOrganization } from "@/contexts/OrganizationContext";
-import { useFeedData } from "@/hooks/useFeedData";
-import { normalizeMediaType, isVideoType } from "@/lib/mediaRegistry";
-import type { MediaItem } from "@/types";
-import { fetchUserMediaLikes } from "@/modules/posts/client-pictures";
-import { T } from '@/i18n';
-
-import type { FeedSortOption } from '@/hooks/useFeedData';
-import { mapFeedPostsToMediaItems } from "@/modules/posts/client-posts";
-
-interface GalleryLargeProps {
-    customPictures?: any[];
-    customLoading?: boolean;
-    navigationSource?: 'home' | 'collection' | 'tag' | 'user' | 'search';
-    navigationSourceId?: string;
-    sortBy?: FeedSortOption;
-    categorySlugs?: string[];
-    categoryIds?: string[];
-    contentType?: 'posts' | 'pages' | 'pictures' | 'files';
-    visibilityFilter?: 'invisible' | 'private';
-    center?: boolean;
-}
-
-const GalleryLarge = ({
-    customPictures,
-    customLoading,
-    navigationSource = 'home',
-    navigationSourceId,
-    sortBy = 'latest',
-    categorySlugs,
-    categoryIds,
-    contentType,
-    visibilityFilter,
-    center
-}: GalleryLargeProps) => {
-    const { user } = useAuth();
-    const navigate = useNavigate();
-
-    const { orgSlug, isOrgContext } = useOrganization();
-    const [mediaItems, setMediaItems] = useState<any[]>([]);
-    const [userLikes, setUserLikes] = useState<Set<string>>(new Set());
-    const [loading, setLoading] = useState(true);
-
-    // 1. Data Fetching
-    const { posts: feedPosts, loading: feedLoading } = useFeedData({
-        source: navigationSource,
-        sourceId: navigationSourceId,
-        isOrgContext,
-        orgSlug,
-        sortBy,
-        categorySlugs,
-        categoryIds,
-        contentType,
-        visibilityFilter,
-        // Disable hook if we have custom pictures
-        enabled: !customPictures
-    });
-
-    // 2. State & Effects
-    useEffect(() => {
-        let finalMedia: any[] = [];
-
-        if (customPictures) {
-            finalMedia = customPictures;
-            setLoading(customLoading || false);
-        } else {
-            // Map FeedPost[] -> MediaItemType[]
-            finalMedia = mapFeedPostsToMediaItems(feedPosts as any, sortBy);
-            setLoading(feedLoading);
-        }
-
-        setMediaItems(finalMedia || []);
-    }, [feedPosts, feedLoading, customPictures, customLoading, sortBy]);
-
-    const refreshUserLikes = useCallback(async () => {
-        if (!user || mediaItems.length === 0) return;
-        try {
-            const { pictureLikes } = await fetchUserMediaLikes(user.id);
-            setUserLikes(pictureLikes);
-        } catch (error) {
-            console.error('Error fetching user likes:', error);
-        }
-    }, [user, mediaItems.length]);
-
-    // Fetch likes on mount and whenever the media list changes
-    useEffect(() => {
-        refreshUserLikes();
-    }, [refreshUserLikes]);
-
-    const handleError = () => {
-        window.location.reload();
-    }
-
-    if (loading) {
-        return (
-            <div className="py-8">
-                <div className="text-center text-muted-foreground">
-                    <T>Loading gallery...</T>
-                </div>
-            </div>
-        );
-    }
-
-    if (!mediaItems || mediaItems.length === 0) {
-        return (
-            <div className="py-8">
-                <div className="text-center text-muted-foreground">
-                    <p className="text-lg"><T>No media yet!</T></p>
-                    <p><T>Be the first to share content with the community.</T></p>
-                </div>
-            </div>
-        )
-    }
-
-    return (
-        <div className="w-full relative max-w-4xl mx-auto px-4 pb-20 pt-4">
-            <div className="flex flex-col gap-12">
-                {mediaItems.map((item, index) => {
-                    const itemType = normalizeMediaType(item.type);
-                    const displayUrl = item.image_url; return (
-                        <MediaCard
-                            key={item.id}
-                            id={item.id}
-                            pictureId={item.picture_id}
-                            url={displayUrl}
-                            thumbnailUrl={item.thumbnail_url}
-                            title={item.title}
-                            author={undefined as any}
-                            authorAvatarUrl={undefined}
-                            authorId={item.user_id}
-                            likes={item.likes_count || 0}
-                            comments={item.comments[0]?.count || 0}
-                            isLiked={userLikes.has(item.picture_id || item.id)}
-                            description={item.description}
-                            type={itemType}
-                            meta={item.meta}
-                            onClick={() => navigate(`/post/${item.id}`)}
-                            onLike={refreshUserLikes}
-                            onDelete={handleError}
-                            created_at={item.created_at}
-                            job={item.job}
-                            responsive={item.responsive}
-                            variant="feed"
-                        />
-                    );
-                })}
-            </div>
-        </div>
-    );
-};
-
-export default GalleryLarge;
+import MediaCard from "./MediaCard";
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useNavigate } from "react-router-dom";
+
+import { useOrganization } from "@/contexts/OrganizationContext";
+import { useFeedData } from "@/hooks/useFeedData";
+import { normalizeMediaType, isVideoType } from "@/lib/mediaRegistry";
+import type { MediaItem } from "@/types";
+import { fetchUserMediaLikes } from "@/modules/posts/client-pictures";
+import { T } from '@/i18n';
+
+import type { FeedSortOption } from '@/hooks/useFeedData';
+import { mapFeedPostsToMediaItems } from "@/modules/posts/client-posts";
+
+interface GalleryLargeProps {
+    customPictures?: any[];
+    customLoading?: boolean;
+    navigationSource?: 'home' | 'collection' | 'tag' | 'user' | 'search';
+    navigationSourceId?: string;
+    sortBy?: FeedSortOption;
+    categorySlugs?: string[];
+    categoryIds?: string[];
+    contentType?: 'posts' | 'pages' | 'pictures' | 'files';
+    visibilityFilter?: 'invisible' | 'private';
+    center?: boolean;
+}
+
+const GalleryLarge = ({
+    customPictures,
+    customLoading,
+    navigationSource = 'home',
+    navigationSourceId,
+    sortBy = 'latest',
+    categorySlugs,
+    categoryIds,
+    contentType,
+    visibilityFilter,
+    center
+}: GalleryLargeProps) => {
+    const { user } = useAuth();
+    const navigate = useNavigate();
+
+    const { orgSlug, isOrgContext } = useOrganization();
+    const [mediaItems, setMediaItems] = useState<any[]>([]);
+    const [userLikes, setUserLikes] = useState<Set<string>>(new Set());
+    const [loading, setLoading] = useState(true);
+
+    // 1. Data Fetching
+    const { posts: feedPosts, loading: feedLoading } = useFeedData({
+        source: navigationSource,
+        sourceId: navigationSourceId,
+        isOrgContext,
+        orgSlug,
+        sortBy,
+        categorySlugs,
+        categoryIds,
+        contentType,
+        visibilityFilter,
+        // Disable hook if we have custom pictures
+        enabled: !customPictures
+    });
+
+    // 2. State & Effects
+    useEffect(() => {
+        let finalMedia: any[] = [];
+
+        if (customPictures) {
+            finalMedia = customPictures;
+            setLoading(customLoading || false);
+        } else {
+            // Map FeedPost[] -> MediaItemType[]
+            finalMedia = mapFeedPostsToMediaItems(feedPosts as any, sortBy);
+            setLoading(feedLoading);
+        }
+
+        setMediaItems(finalMedia || []);
+    }, [feedPosts, feedLoading, customPictures, customLoading, sortBy]);
+
+    const refreshUserLikes = useCallback(async () => {
+        if (!user || mediaItems.length === 0) return;
+        try {
+            const { pictureLikes } = await fetchUserMediaLikes(user.id);
+            setUserLikes(pictureLikes);
+        } catch (error) {
+            console.error('Error fetching user likes:', error);
+        }
+    }, [user, mediaItems.length]);
+
+    // Fetch likes on mount and whenever the media list changes
+    useEffect(() => {
+        refreshUserLikes();
+    }, [refreshUserLikes]);
+
+    const handleError = () => {
+        window.location.reload();
+    }
+
+    if (loading) {
+        return (
+            <div className="py-8">
+                <div className="text-center text-muted-foreground">
+                    <T>Loading gallery...</T>
+                </div>
+            </div>
+        );
+    }
+
+    if (!mediaItems || mediaItems.length === 0) {
+        return (
+            <div className="py-8">
+                <div className="text-center text-muted-foreground">
+                    <p className="text-lg"><T>No media yet!</T></p>
+                    <p><T>Be the first to share content with the community.</T></p>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="w-full relative max-w-4xl mx-auto px-4 pb-20 pt-4">
+            <div className="flex flex-col gap-12">
+                {mediaItems.map((item, index) => {
+                    const itemType = normalizeMediaType(item.type);
+                    const displayUrl = item.image_url; return (
+                        <MediaCard
+                            key={item.id}
+                            id={item.id}
+                            pictureId={item.picture_id}
+                            url={displayUrl}
+                            thumbnailUrl={item.thumbnail_url}
+                            title={item.title}
+                            author={undefined as any}
+                            authorAvatarUrl={undefined}
+                            authorId={item.user_id}
+                            likes={item.likes_count || 0}
+                            comments={item.comments[0]?.count || 0}
+                            isLiked={userLikes.has(item.picture_id || item.id)}
+                            description={item.description}
+                            type={itemType}
+                            meta={item.meta}
+                            onClick={() => navigate(`/post/${item.id}`)}
+                            onLike={refreshUserLikes}
+                            onDelete={handleError}
+                            created_at={item.created_at}
+                            job={item.job}
+                            responsive={item.responsive}
+                            variant="feed"
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default GalleryLarge;
diff --git a/packages/ui/src/components/HashtagText.tsx b/packages/ui/src/components/HashtagText.tsx
index 25860a42..69dceb58 100644
--- a/packages/ui/src/components/HashtagText.tsx
+++ b/packages/ui/src/components/HashtagText.tsx
@@ -1,52 +1,52 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { parseHashtagContent, type ContentSegment } from '@/utils/tagUtils';
-
-interface HashtagTextProps {
-  children: string;
-  className?: string;
-  onTagClick?: (tag: string) => void;
-}
-
-const HashtagText: React.FC<HashtagTextProps> = ({ 
-  children, 
-  className = '',
-  onTagClick 
-}) => {
-  const navigate = useNavigate();
-  
-  const handleTagClick = (tag: string) => {
-    if (onTagClick) {
-      onTagClick(tag);
-    } else {
-      navigate(`/tags/${tag}`);
-    }
-  };
-
-  const segments = parseHashtagContent(children);
-
-  return (
-    <span className={className}>
-      {segments.map((segment: ContentSegment, index: number) => {
-        if (segment.type === 'hashtag') {
-          return (
-            <button
-              key={`tag-${index}`}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleTagClick(segment.content);
-              }}
-              className="text-primary hover:text-primary/80 font-medium hover:underline cursor-pointer transition-colors"
-            >
-              #{segment.content}
-            </button>
-          );
-        }
-        return <span key={`text-${index}`}>{segment.content}</span>;
-      })}
-    </span>
-  );
-};
-
-export default HashtagText;
\ No newline at end of file
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { parseHashtagContent, type ContentSegment } from '@/utils/tagUtils';
+
+interface HashtagTextProps {
+  children: string;
+  className?: string;
+  onTagClick?: (tag: string) => void;
+}
+
+const HashtagText: React.FC<HashtagTextProps> = ({ 
+  children, 
+  className = '',
+  onTagClick 
+}) => {
+  const navigate = useNavigate();
+  
+  const handleTagClick = (tag: string) => {
+    if (onTagClick) {
+      onTagClick(tag);
+    } else {
+      navigate(`/tags/${tag}`);
+    }
+  };
+
+  const segments = parseHashtagContent(children);
+
+  return (
+    <span className={className}>
+      {segments.map((segment: ContentSegment, index: number) => {
+        if (segment.type === 'hashtag') {
+          return (
+            <button
+              key={`tag-${index}`}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleTagClick(segment.content);
+              }}
+              className="text-primary hover:text-primary/80 font-medium hover:underline cursor-pointer transition-colors"
+            >
+              #{segment.content}
+            </button>
+          );
+        }
+        return <span key={`text-${index}`}>{segment.content}</span>;
+      })}
+    </span>
+  );
+};
+
+export default HashtagText;
diff --git a/packages/ui/src/components/ImageGallery.tsx b/packages/ui/src/components/ImageGallery.tsx
index 765d2efb..a597567e 100644
--- a/packages/ui/src/components/ImageGallery.tsx
+++ b/packages/ui/src/components/ImageGallery.tsx
@@ -1,556 +1,556 @@
-import { useState, useEffect, useRef } from 'react';
-import { ImageFile } from '../types';
-import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
-import { downloadImage, generateFilename } from '@/utils/downloadUtils';
-import { toast } from 'sonner';
-import { translate } from '@/i18n';
-
-interface ImageGalleryProps {
-  images: ImageFile[];
-  onImageSelection?: (imagePath: string, isMultiSelect: boolean) => void;
-  onImageRemove?: (imagePath: string) => void;
-  onImageDelete?: (imagePath: string) => void;
-  onImageSaveAs?: (imagePath: string) => void;
-  showSelection?: boolean;
-  currentIndex: number;
-  setCurrentIndex: (index: number) => void;
-  onDoubleClick?: (imagePath: string) => void;
-  onLightboxPromptSubmit?: (prompt: string, imagePath: string) => void;
-  promptHistory?: string[];
-  historyIndex?: number;
-  navigateHistory?: (direction: 'up' | 'down') => void;
-  isGenerating?: boolean;
-  errorMessage?: string | null;
-  setErrorMessage?: (message: string | null) => void;
-}
-
-export default function ImageGallery({
-  images,
-  onImageSelection,
-  onImageRemove,
-  onImageDelete,
-  onImageSaveAs,
-  showSelection = false,
-  currentIndex,
-  setCurrentIndex,
-  onDoubleClick,
-  onLightboxPromptSubmit,
-  promptHistory = [],
-  historyIndex = -1,
-  navigateHistory,
-  isGenerating = false,
-  errorMessage,
-  setErrorMessage
-}: ImageGalleryProps) {
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxLoaded, setLightboxLoaded] = useState(false);
-  const [isPanning, setIsPanning] = useState(false);
-  const [lightboxPrompt, setLightboxPrompt] = useState('');
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [skipDeleteConfirm, setSkipDeleteConfirm] = useState(false);
-  const [rememberChoice, setRememberChoice] = useState(false);
-  const panStartRef = useRef<{ x: number; y: number } | null>(null);
-
-  // Sync lightbox prompt with history navigation
-  useEffect(() => {
-    if (lightboxOpen && historyIndex >= 0 && historyIndex < promptHistory.length) {
-      setLightboxPrompt(promptHistory[historyIndex]);
-    }
-  }, [historyIndex, promptHistory, lightboxOpen]);
-
-  // Handle keyboard events for lightbox
-  useEffect(() => {
-    if (!lightboxOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Delete' && !isGenerating && onImageDelete) {
-        e.preventDefault();
-        const safeIndex = Math.max(0, Math.min(currentIndex, images.length - 1));
-        if (images[safeIndex]) {
-          handleDeleteImage(images[safeIndex].path);
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [lightboxOpen, currentIndex, images, isGenerating, onImageDelete]);
-
-  const handleDeleteImage = (imagePath: string) => {
-    if (skipDeleteConfirm) {
-      // Skip confirmation and delete immediately
-      onImageDelete?.(imagePath);
-      // Close lightbox if this was the last image or adjust index
-      if (images.length <= 1) {
-        setLightboxOpen(false);
-      } else {
-        // Adjust current index if needed
-        const deletingIndex = images.findIndex(img => img.path === imagePath);
-        if (deletingIndex === currentIndex && currentIndex >= images.length - 1) {
-          setCurrentIndex(Math.max(0, currentIndex - 1));
-        }
-      }
-    } else {
-      // Show confirmation dialog
-      setShowDeleteConfirm(true);
-    }
-  };
-
-  const handleDownloadImage = async (image: ImageFile) => {
-    try {
-      const filename = generateFilename(image.path.split(/[/\\]/).pop() || 'image');
-      await downloadImage(image.src, filename);
-      toast.success(translate('Image downloaded successfully'));
-    } catch (error) {
-      console.error('Error downloading image:', error);
-      toast.error(translate('Failed to download image'));
-    }
-  };
-
-  const confirmDelete = (remember: boolean) => {
-    const safeIndex = Math.max(0, Math.min(currentIndex, images.length - 1));
-    if (images[safeIndex]) {
-      if (remember) {
-        setSkipDeleteConfirm(true);
-      }
-      onImageDelete?.(images[safeIndex].path);
-
-      // Close lightbox if this was the last image or adjust index
-      if (images.length <= 1) {
-        setLightboxOpen(false);
-      } else {
-        // Adjust current index if needed
-        if (currentIndex >= images.length - 1) {
-          setCurrentIndex(Math.max(0, currentIndex - 1));
-        }
-      }
-    }
-    setShowDeleteConfirm(false);
-  };
-
-  // Reset current index if images change, preventing out-of-bounds errors
-  useEffect(() => {
-    if (images.length > 0 && currentIndex >= images.length) {
-      setCurrentIndex(Math.max(0, images.length - 1));
-    }
-  }, [images.length, currentIndex, setCurrentIndex]);
-
-  // ESC key handler for lightbox
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (!lightboxOpen) return;
-
-      if (event.key === 'Escape') {
-        setLightboxOpen(false);
-      } else if (event.key === 'ArrowRight' && currentIndex < images.length - 1) {
-        const newIndex = currentIndex + 1;
-        setCurrentIndex(newIndex);
-        preloadImage(newIndex);
-      } else if (event.key === 'ArrowLeft' && currentIndex > 0) {
-        const newIndex = currentIndex - 1;
-        setCurrentIndex(newIndex);
-        preloadImage(newIndex);
-      }
-    };
-
-    if (lightboxOpen) {
-      document.addEventListener('keydown', handleKeyDown);
-      return () => document.removeEventListener('keydown', handleKeyDown);
-    }
-  }, [lightboxOpen, currentIndex, images.length, setCurrentIndex]);
-
-  const preloadImage = (index: number) => {
-    if (images.length === 0 || index < 0 || index >= images.length) return;
-
-    setLightboxLoaded(false);
-    const img = new Image();
-    img.src = images[index].src;
-    img.onload = () => {
-      setLightboxLoaded(true);
-    };
-    img.onerror = () => {
-      setLightboxLoaded(true); // Show even if failed to load
-    };
-  };
-
-  const openLightbox = (index: number) => {
-    setCurrentIndex(index);
-    setLightboxOpen(true);
-    preloadImage(index);
-  };
-
-  const handleThumbnailClick = (event: React.MouseEvent<HTMLButtonElement>, imagePath: string, index: number) => {
-    const isMultiSelect = event.ctrlKey || event.metaKey;
-
-    if (showSelection && onImageSelection) {
-      onImageSelection(imagePath, isMultiSelect);
-    }
-
-    if (!isMultiSelect) {
-      setCurrentIndex(index);
-    }
-  };
-
-  if (images.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center p-8 text-center">
-        <div className="w-64 h-64 bg-gradient-to-br from-muted/50 to-muted rounded-xl border-2 border-dashed border-muted-foreground/30 flex items-center justify-center">
-          <div className="text-muted-foreground">
-            <svg className="w-16 h-16 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
-            </svg>
-            <p className="text-lg font-medium">No images yet</p>
-            <p className="text-sm">Upload images to get started</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Safeguard against rendering with an invalid index after a delete/remove operation
-  const safeIndex = Math.max(0, Math.min(currentIndex, images.length - 1));
-  const currentImage = images.length > 0 ? images[safeIndex] : null;
-
-  if (!currentImage) {
-    // This should theoretically not be reached if the length check above is sound,
-    // but it's an extra layer of protection.
-    return (
-      <div className="flex flex-col items-center justify-center p-8 text-center">
-        <div className="w-64 h-64 bg-muted rounded-xl flex items-center justify-center">
-          <p>Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  const isGenerated = !!currentImage.isGenerated;
-  const isSelected = currentImage.selected || false;
-
-  return (
-    <div>
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left column: Main Image Display */}
-        <div className="lg:col-span-2">
-          <div className="flex items-center justify-center rounded-lg">
-            <div className="relative w-full h-[300px] flex items-center justify-center">
-              <img
-                src={currentImage.src}
-                alt={currentImage.path}
-                className={`max-h-[300px] max-w-full object-contain shadow-lg border-2 transition-all duration-300 cursor-pointer ${isSelected
-                    ? 'border-primary shadow-primary/30'
-                    : isGenerated
-                      ? 'border-green-300'
-                      : 'border-border'
-                  }`}
-                onDoubleClick={() => openLightbox(safeIndex)}
-                title="Double-click for fullscreen"
-              />
-              <div className="absolute top-2 left-2 flex flex-col gap-2">
-                {/* Compact overlays */}
-                {isGenerated && isSelected && (
-                  <div className="bg-primary text-primary-foreground px-2 py-1 rounded text-xs font-semibold shadow-lg flex items-center gap-1">
-                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                    </svg>
-                    ✓
-                  </div>
-                )}
-
-                {isGenerated && !isSelected && (
-                  <div className="bg-green-500 text-white px-2 py-1 rounded text-xs font-semibold shadow-lg">
-                    ✨
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* Image Info */}
-          <div className="text-center mt-3">
-            <p className="text-sm text-muted-foreground">
-              {currentImage.path.split(/[/\\]/).pop()} • {safeIndex + 1}/{images.length}
-            </p>
-          </div>
-        </div>
-
-        {/* Right column: Thumbnails */}
-        <div className="space-y-3">
-          <h4 className="text-sm font-semibold text-foreground">Images ({images.length})</h4>
-          <div className="grid grid-cols-2 gap-2">
-            {images.map((image, index) => {
-              const thumbIsGenerating = image.path.startsWith('generating_');
-              const thumbIsGenerated = !!image.isGenerated;
-              const thumbIsSelected = image.selected || false;
-
-              return (
-                <button
-                  type="button"
-                  key={image.path}
-                  onClick={(e) => handleThumbnailClick(e, image.path, index)}
-                  onDoubleClick={() => {
-                    if (onDoubleClick) {
-                      onDoubleClick(image.path);
-                    } else {
-                      openLightbox(index);
-                    }
-                  }}
-                  className={`group relative aspect-square overflow-hidden transition-all duration-300 border-2 ${currentIndex === index
-                      ? 'ring-2 ring-primary border-primary'
-                      : thumbIsSelected
-                        ? 'border-primary ring-2 ring-primary/30'
-                        : thumbIsGenerated
-                          ? 'border-green-300 hover:border-primary/50'
-                          : 'border-border hover:border-border/80'
-                    }`}
-                  title={
-                    thumbIsGenerated
-                      ? "Generated image - click to select/view"
-                      : "Click to view"
-                  }
-                >
-                  <img
-                    src={image.src}
-                    alt={image.path}
-                    className="w-full h-full object-cover"
-                  />
-
-                  {/* Selection indicator */}
-                  {thumbIsGenerated && thumbIsSelected && (
-                    <div className="absolute top-1 left-1 bg-primary text-primary-foreground rounded-full w-5 h-5 flex items-center justify-center">
-                      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                      </svg>
-                    </div>
-                  )}
-
-                  {/* Generated indicator */}
-                  {thumbIsGenerated && !thumbIsSelected && (
-                    <div className="absolute top-1 left-1 bg-green-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
-                      ✨
-                    </div>
-                  )}
-
-                  {/* Save button */}
-                  {!thumbIsGenerating && (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleDownloadImage(image);
-                      }}
-                      className="absolute bottom-1 left-1 bg-primary/70 hover:bg-primary text-primary-foreground rounded-full w-5 h-5 flex items-center justify-center text-xs transition-all duration-200"
-                      title="Download Image"
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
-                        <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
-                      </svg>
-                    </button>
-                  )}
-
-                  {/* Delete Button */}
-                  {!thumbIsGenerating && onImageDelete && (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (window.confirm('Are you sure you want to permanently delete this file? This action cannot be undone.')) {
-                          onImageDelete(image.path);
-                        }
-                      }}
-                      className="absolute bottom-1 right-1 bg-destructive/80 hover:bg-destructive text-destructive-foreground rounded-full w-5 h-5 flex items-center justify-center text-xs transition-all duration-200"
-                      title="Delete File Permanently"
-                    >
-                      ×
-                    </button>
-                  )}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-
-      {/* Lightbox Modal */}
-      {lightboxOpen && (
-        <div
-          className="fixed inset-0 bg-black/95 z-[9999] flex items-center justify-center"
-          onMouseDown={(e) => {
-            panStartRef.current = { x: e.clientX, y: e.clientY };
-            setIsPanning(false);
-          }}
-          onMouseMove={(e) => {
-            if (panStartRef.current) {
-              const distance = Math.sqrt(
-                Math.pow(e.clientX - panStartRef.current.x, 2) +
-                Math.pow(e.clientY - panStartRef.current.y, 2)
-              );
-              if (distance > 5) { // 5px threshold for pan detection
-                setIsPanning(true);
-              }
-            }
-          }}
-          onMouseUp={() => {
-            panStartRef.current = null;
-          }}
-          onClick={(e) => {
-            // Only close if not panning and clicking on background
-            if (!isPanning && e.target === e.currentTarget) {
-              setLightboxOpen(false);
-            }
-            setIsPanning(false);
-          }}
-        >
-          <div className="relative w-full h-full flex items-center justify-center">
-            {lightboxLoaded ? (
-              <TransformWrapper
-                initialScale={1}
-                minScale={0.1}
-                maxScale={10}
-                centerOnInit={true}
-                wheel={{ step: 0.1 }}
-                doubleClick={{ disabled: false, step: 0.7 }}
-                pinch={{ step: 5 }}
-              >
-                <TransformComponent
-                  wrapperClass="w-full h-full flex items-center justify-center"
-                  contentClass="max-w-full max-h-full"
-                >
-                  <img
-                    src={images[safeIndex].src}
-                    alt={images[safeIndex].path}
-                    className="max-w-full max-h-full object-contain cursor-grab active:cursor-grabbing"
-                    onClick={(e) => e.stopPropagation()}
-                    draggable={false}
-                  />
-                </TransformComponent>
-              </TransformWrapper>
-            ) : (
-              <div className="flex items-center justify-center">
-                <div className="w-12 h-12 border-4 border-white/30 border-t-white rounded-full animate-spin"></div>
-              </div>
-            )}
-
-            {/* Close Button */}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setLightboxOpen(false);
-              }}
-              className="absolute top-4 right-4 text-white text-2xl p-4 bg-black/75 rounded-lg hover:bg-black/90 transition-all duration-200"
-              title="Close (ESC)"
-            >
-              ×
-            </button>
-
-            {/* Navigation Buttons */}
-            {safeIndex > 0 && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setCurrentIndex(safeIndex - 1);
-                  setLightboxLoaded(false);
-                  const img = new Image();
-                  img.src = images[safeIndex - 1].src;
-                  img.onload = () => setLightboxLoaded(true);
-                }}
-                className="absolute left-4 top-1/2 transform -translate-y-1/2 p-4 text-white text-3xl bg-black/75 rounded-lg hover:bg-black/90 transition-all duration-200"
-                title="Previous (←)"
-              >
-                ‹
-              </button>
-            )}
-
-            {safeIndex < images.length - 1 && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setCurrentIndex(safeIndex + 1);
-                  setLightboxLoaded(false);
-                  const img = new Image();
-                  img.src = images[safeIndex + 1].src;
-                  img.onload = () => setLightboxLoaded(true);
-                }}
-                className="absolute right-4 top-1/2 transform -translate-y-1/2 p-4 text-white text-3xl bg-black/75 rounded-lg hover:bg-black/90 transition-all duration-200"
-                title="Next (→)"
-              >
-                ›
-              </button>
-            )}
-
-            {/* Info */}
-            {lightboxLoaded && (
-              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/75 text-white px-4 py-2 rounded-lg text-sm">
-                {`${images[safeIndex].path.split(/[/\\]/).pop()} • ${safeIndex + 1} of ${images.length} • Del: delete • ESC to close`}
-              </div>
-            )}
-
-            {/* Delete Confirmation Dialog */}
-            {showDeleteConfirm && (
-              <div
-                className="absolute inset-0 bg-black/90 flex items-center justify-center z-50"
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    confirmDelete(rememberChoice);
-                    setRememberChoice(false);
-                  } else if (e.key === 'Escape') {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    setShowDeleteConfirm(false);
-                    setRememberChoice(false);
-                  }
-                }}
-                tabIndex={0}
-                autoFocus
-              >
-                <div className="bg-background rounded-xl p-6 max-w-md mx-4 shadow-2xl">
-                  <h3 className="text-lg font-semibold text-foreground mb-2">
-                    Delete Image?
-                  </h3>
-                  <p className="text-muted-foreground mb-2">
-                    Are you sure you want to delete "{images[Math.max(0, Math.min(currentIndex, images.length - 1))]?.path.split(/[/\\]/).pop()}"?
-                  </p>
-                  <p className="text-sm text-muted-foreground mb-4">
-                    Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">Enter</kbd> to confirm or <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">Escape</kbd> to cancel
-                  </p>
-                  <div className="space-y-3">
-                    <label className="flex items-center gap-2 text-sm text-muted-foreground">
-                      <input
-                        type="checkbox"
-                        className="rounded"
-                        checked={rememberChoice}
-                        onChange={(e) => setRememberChoice(e.target.checked)}
-                      />
-                      Remember for this session (skip confirmation)
-                    </label>
-                    <div className="flex gap-3 justify-end">
-                      <button
-                        onClick={() => {
-                          setShowDeleteConfirm(false);
-                          setRememberChoice(false);
-                        }}
-                        className="px-4 py-2 text-muted-foreground hover:bg-muted rounded-lg transition-colors"
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        onClick={() => {
-                          confirmDelete(rememberChoice);
-                          setRememberChoice(false);
-                        }}
-                        className="px-4 py-2 bg-destructive hover:bg-destructive/90 text-destructive-foreground rounded-lg transition-colors"
-                      >
-                        Delete
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
\ No newline at end of file
+import { useState, useEffect, useRef } from 'react';
+import { ImageFile } from '../types';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import { downloadImage, generateFilename } from '@/utils/downloadUtils';
+import { toast } from 'sonner';
+import { translate } from '@/i18n';
+
+interface ImageGalleryProps {
+  images: ImageFile[];
+  onImageSelection?: (imagePath: string, isMultiSelect: boolean) => void;
+  onImageRemove?: (imagePath: string) => void;
+  onImageDelete?: (imagePath: string) => void;
+  onImageSaveAs?: (imagePath: string) => void;
+  showSelection?: boolean;
+  currentIndex: number;
+  setCurrentIndex: (index: number) => void;
+  onDoubleClick?: (imagePath: string) => void;
+  onLightboxPromptSubmit?: (prompt: string, imagePath: string) => void;
+  promptHistory?: string[];
+  historyIndex?: number;
+  navigateHistory?: (direction: 'up' | 'down') => void;
+  isGenerating?: boolean;
+  errorMessage?: string | null;
+  setErrorMessage?: (message: string | null) => void;
+}
+
+export default function ImageGallery({
+  images,
+  onImageSelection,
+  onImageRemove,
+  onImageDelete,
+  onImageSaveAs,
+  showSelection = false,
+  currentIndex,
+  setCurrentIndex,
+  onDoubleClick,
+  onLightboxPromptSubmit,
+  promptHistory = [],
+  historyIndex = -1,
+  navigateHistory,
+  isGenerating = false,
+  errorMessage,
+  setErrorMessage
+}: ImageGalleryProps) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxLoaded, setLightboxLoaded] = useState(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const [lightboxPrompt, setLightboxPrompt] = useState('');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [skipDeleteConfirm, setSkipDeleteConfirm] = useState(false);
+  const [rememberChoice, setRememberChoice] = useState(false);
+  const panStartRef = useRef<{ x: number; y: number } | null>(null);
+
+  // Sync lightbox prompt with history navigation
+  useEffect(() => {
+    if (lightboxOpen && historyIndex >= 0 && historyIndex < promptHistory.length) {
+      setLightboxPrompt(promptHistory[historyIndex]);
+    }
+  }, [historyIndex, promptHistory, lightboxOpen]);
+
+  // Handle keyboard events for lightbox
+  useEffect(() => {
+    if (!lightboxOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Delete' && !isGenerating && onImageDelete) {
+        e.preventDefault();
+        const safeIndex = Math.max(0, Math.min(currentIndex, images.length - 1));
+        if (images[safeIndex]) {
+          handleDeleteImage(images[safeIndex].path);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [lightboxOpen, currentIndex, images, isGenerating, onImageDelete]);
+
+  const handleDeleteImage = (imagePath: string) => {
+    if (skipDeleteConfirm) {
+      // Skip confirmation and delete immediately
+      onImageDelete?.(imagePath);
+      // Close lightbox if this was the last image or adjust index
+      if (images.length <= 1) {
+        setLightboxOpen(false);
+      } else {
+        // Adjust current index if needed
+        const deletingIndex = images.findIndex(img => img.path === imagePath);
+        if (deletingIndex === currentIndex && currentIndex >= images.length - 1) {
+          setCurrentIndex(Math.max(0, currentIndex - 1));
+        }
+      }
+    } else {
+      // Show confirmation dialog
+      setShowDeleteConfirm(true);
+    }
+  };
+
+  const handleDownloadImage = async (image: ImageFile) => {
+    try {
+      const filename = generateFilename(image.path.split(/[/\\]/).pop() || 'image');
+      await downloadImage(image.src, filename);
+      toast.success(translate('Image downloaded successfully'));
+    } catch (error) {
+      console.error('Error downloading image:', error);
+      toast.error(translate('Failed to download image'));
+    }
+  };
+
+  const confirmDelete = (remember: boolean) => {
+    const safeIndex = Math.max(0, Math.min(currentIndex, images.length - 1));
+    if (images[safeIndex]) {
+      if (remember) {
+        setSkipDeleteConfirm(true);
+      }
+      onImageDelete?.(images[safeIndex].path);
+
+      // Close lightbox if this was the last image or adjust index
+      if (images.length <= 1) {
+        setLightboxOpen(false);
+      } else {
+        // Adjust current index if needed
+        if (currentIndex >= images.length - 1) {
+          setCurrentIndex(Math.max(0, currentIndex - 1));
+        }
+      }
+    }
+    setShowDeleteConfirm(false);
+  };
+
+  // Reset current index if images change, preventing out-of-bounds errors
+  useEffect(() => {
+    if (images.length > 0 && currentIndex >= images.length) {
+      setCurrentIndex(Math.max(0, images.length - 1));
+    }
+  }, [images.length, currentIndex, setCurrentIndex]);
+
+  // ESC key handler for lightbox
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!lightboxOpen) return;
+
+      if (event.key === 'Escape') {
+        setLightboxOpen(false);
+      } else if (event.key === 'ArrowRight' && currentIndex < images.length - 1) {
+        const newIndex = currentIndex + 1;
+        setCurrentIndex(newIndex);
+        preloadImage(newIndex);
+      } else if (event.key === 'ArrowLeft' && currentIndex > 0) {
+        const newIndex = currentIndex - 1;
+        setCurrentIndex(newIndex);
+        preloadImage(newIndex);
+      }
+    };
+
+    if (lightboxOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      return () => document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [lightboxOpen, currentIndex, images.length, setCurrentIndex]);
+
+  const preloadImage = (index: number) => {
+    if (images.length === 0 || index < 0 || index >= images.length) return;
+
+    setLightboxLoaded(false);
+    const img = new Image();
+    img.src = images[index].src;
+    img.onload = () => {
+      setLightboxLoaded(true);
+    };
+    img.onerror = () => {
+      setLightboxLoaded(true); // Show even if failed to load
+    };
+  };
+
+  const openLightbox = (index: number) => {
+    setCurrentIndex(index);
+    setLightboxOpen(true);
+    preloadImage(index);
+  };
+
+  const handleThumbnailClick = (event: React.MouseEvent<HTMLButtonElement>, imagePath: string, index: number) => {
+    const isMultiSelect = event.ctrlKey || event.metaKey;
+
+    if (showSelection && onImageSelection) {
+      onImageSelection(imagePath, isMultiSelect);
+    }
+
+    if (!isMultiSelect) {
+      setCurrentIndex(index);
+    }
+  };
+
+  if (images.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 text-center">
+        <div className="w-64 h-64 bg-gradient-to-br from-muted/50 to-muted rounded-xl border-2 border-dashed border-muted-foreground/30 flex items-center justify-center">
+          <div className="text-muted-foreground">
+            <svg className="w-16 h-16 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+            </svg>
+            <p className="text-lg font-medium">No images yet</p>
+            <p className="text-sm">Upload images to get started</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Safeguard against rendering with an invalid index after a delete/remove operation
+  const safeIndex = Math.max(0, Math.min(currentIndex, images.length - 1));
+  const currentImage = images.length > 0 ? images[safeIndex] : null;
+
+  if (!currentImage) {
+    // This should theoretically not be reached if the length check above is sound,
+    // but it's an extra layer of protection.
+    return (
+      <div className="flex flex-col items-center justify-center p-8 text-center">
+        <div className="w-64 h-64 bg-muted rounded-xl flex items-center justify-center">
+          <p>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const isGenerated = !!currentImage.isGenerated;
+  const isSelected = currentImage.selected || false;
+
+  return (
+    <div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left column: Main Image Display */}
+        <div className="lg:col-span-2">
+          <div className="flex items-center justify-center rounded-lg">
+            <div className="relative w-full h-[300px] flex items-center justify-center">
+              <img
+                src={currentImage.src}
+                alt={currentImage.path}
+                className={`max-h-[300px] max-w-full object-contain shadow-lg border-2 transition-all duration-300 cursor-pointer ${isSelected
+                    ? 'border-primary shadow-primary/30'
+                    : isGenerated
+                      ? 'border-green-300'
+                      : 'border-border'
+                  }`}
+                onDoubleClick={() => openLightbox(safeIndex)}
+                title="Double-click for fullscreen"
+              />
+              <div className="absolute top-2 left-2 flex flex-col gap-2">
+                {/* Compact overlays */}
+                {isGenerated && isSelected && (
+                  <div className="bg-primary text-primary-foreground px-2 py-1 rounded text-xs font-semibold shadow-lg flex items-center gap-1">
+                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    ✓
+                  </div>
+                )}
+
+                {isGenerated && !isSelected && (
+                  <div className="bg-green-500 text-white px-2 py-1 rounded text-xs font-semibold shadow-lg">
+                    ✨
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Image Info */}
+          <div className="text-center mt-3">
+            <p className="text-sm text-muted-foreground">
+              {currentImage.path.split(/[/\\]/).pop()} • {safeIndex + 1}/{images.length}
+            </p>
+          </div>
+        </div>
+
+        {/* Right column: Thumbnails */}
+        <div className="space-y-3">
+          <h4 className="text-sm font-semibold text-foreground">Images ({images.length})</h4>
+          <div className="grid grid-cols-2 gap-2">
+            {images.map((image, index) => {
+              const thumbIsGenerating = image.path.startsWith('generating_');
+              const thumbIsGenerated = !!image.isGenerated;
+              const thumbIsSelected = image.selected || false;
+
+              return (
+                <button
+                  type="button"
+                  key={image.path}
+                  onClick={(e) => handleThumbnailClick(e, image.path, index)}
+                  onDoubleClick={() => {
+                    if (onDoubleClick) {
+                      onDoubleClick(image.path);
+                    } else {
+                      openLightbox(index);
+                    }
+                  }}
+                  className={`group relative aspect-square overflow-hidden transition-all duration-300 border-2 ${currentIndex === index
+                      ? 'ring-2 ring-primary border-primary'
+                      : thumbIsSelected
+                        ? 'border-primary ring-2 ring-primary/30'
+                        : thumbIsGenerated
+                          ? 'border-green-300 hover:border-primary/50'
+                          : 'border-border hover:border-border/80'
+                    }`}
+                  title={
+                    thumbIsGenerated
+                      ? "Generated image - click to select/view"
+                      : "Click to view"
+                  }
+                >
+                  <img
+                    src={image.src}
+                    alt={image.path}
+                    className="w-full h-full object-cover"
+                  />
+
+                  {/* Selection indicator */}
+                  {thumbIsGenerated && thumbIsSelected && (
+                    <div className="absolute top-1 left-1 bg-primary text-primary-foreground rounded-full w-5 h-5 flex items-center justify-center">
+                      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                  )}
+
+                  {/* Generated indicator */}
+                  {thumbIsGenerated && !thumbIsSelected && (
+                    <div className="absolute top-1 left-1 bg-green-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
+                      ✨
+                    </div>
+                  )}
+
+                  {/* Save button */}
+                  {!thumbIsGenerating && (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDownloadImage(image);
+                      }}
+                      className="absolute bottom-1 left-1 bg-primary/70 hover:bg-primary text-primary-foreground rounded-full w-5 h-5 flex items-center justify-center text-xs transition-all duration-200"
+                      title="Download Image"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
+                        <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
+                      </svg>
+                    </button>
+                  )}
+
+                  {/* Delete Button */}
+                  {!thumbIsGenerating && onImageDelete && (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (window.confirm('Are you sure you want to permanently delete this file? This action cannot be undone.')) {
+                          onImageDelete(image.path);
+                        }
+                      }}
+                      className="absolute bottom-1 right-1 bg-destructive/80 hover:bg-destructive text-destructive-foreground rounded-full w-5 h-5 flex items-center justify-center text-xs transition-all duration-200"
+                      title="Delete File Permanently"
+                    >
+                      ×
+                    </button>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Lightbox Modal */}
+      {lightboxOpen && (
+        <div
+          className="fixed inset-0 bg-black/95 z-[9999] flex items-center justify-center"
+          onMouseDown={(e) => {
+            panStartRef.current = { x: e.clientX, y: e.clientY };
+            setIsPanning(false);
+          }}
+          onMouseMove={(e) => {
+            if (panStartRef.current) {
+              const distance = Math.sqrt(
+                Math.pow(e.clientX - panStartRef.current.x, 2) +
+                Math.pow(e.clientY - panStartRef.current.y, 2)
+              );
+              if (distance > 5) { // 5px threshold for pan detection
+                setIsPanning(true);
+              }
+            }
+          }}
+          onMouseUp={() => {
+            panStartRef.current = null;
+          }}
+          onClick={(e) => {
+            // Only close if not panning and clicking on background
+            if (!isPanning && e.target === e.currentTarget) {
+              setLightboxOpen(false);
+            }
+            setIsPanning(false);
+          }}
+        >
+          <div className="relative w-full h-full flex items-center justify-center">
+            {lightboxLoaded ? (
+              <TransformWrapper
+                initialScale={1}
+                minScale={0.1}
+                maxScale={10}
+                centerOnInit={true}
+                wheel={{ step: 0.1 }}
+                doubleClick={{ disabled: false, step: 0.7 }}
+                pinch={{ step: 5 }}
+              >
+                <TransformComponent
+                  wrapperClass="w-full h-full flex items-center justify-center"
+                  contentClass="max-w-full max-h-full"
+                >
+                  <img
+                    src={images[safeIndex].src}
+                    alt={images[safeIndex].path}
+                    className="max-w-full max-h-full object-contain cursor-grab active:cursor-grabbing"
+                    onClick={(e) => e.stopPropagation()}
+                    draggable={false}
+                  />
+                </TransformComponent>
+              </TransformWrapper>
+            ) : (
+              <div className="flex items-center justify-center">
+                <div className="w-12 h-12 border-4 border-white/30 border-t-white rounded-full animate-spin"></div>
+              </div>
+            )}
+
+            {/* Close Button */}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setLightboxOpen(false);
+              }}
+              className="absolute top-4 right-4 text-white text-2xl p-4 bg-black/75 rounded-lg hover:bg-black/90 transition-all duration-200"
+              title="Close (ESC)"
+            >
+              ×
+            </button>
+
+            {/* Navigation Buttons */}
+            {safeIndex > 0 && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setCurrentIndex(safeIndex - 1);
+                  setLightboxLoaded(false);
+                  const img = new Image();
+                  img.src = images[safeIndex - 1].src;
+                  img.onload = () => setLightboxLoaded(true);
+                }}
+                className="absolute left-4 top-1/2 transform -translate-y-1/2 p-4 text-white text-3xl bg-black/75 rounded-lg hover:bg-black/90 transition-all duration-200"
+                title="Previous (←)"
+              >
+                ‹
+              </button>
+            )}
+
+            {safeIndex < images.length - 1 && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setCurrentIndex(safeIndex + 1);
+                  setLightboxLoaded(false);
+                  const img = new Image();
+                  img.src = images[safeIndex + 1].src;
+                  img.onload = () => setLightboxLoaded(true);
+                }}
+                className="absolute right-4 top-1/2 transform -translate-y-1/2 p-4 text-white text-3xl bg-black/75 rounded-lg hover:bg-black/90 transition-all duration-200"
+                title="Next (→)"
+              >
+                ›
+              </button>
+            )}
+
+            {/* Info */}
+            {lightboxLoaded && (
+              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/75 text-white px-4 py-2 rounded-lg text-sm">
+                {`${images[safeIndex].path.split(/[/\\]/).pop()} • ${safeIndex + 1} of ${images.length} • Del: delete • ESC to close`}
+              </div>
+            )}
+
+            {/* Delete Confirmation Dialog */}
+            {showDeleteConfirm && (
+              <div
+                className="absolute inset-0 bg-black/90 flex items-center justify-center z-50"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    confirmDelete(rememberChoice);
+                    setRememberChoice(false);
+                  } else if (e.key === 'Escape') {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setShowDeleteConfirm(false);
+                    setRememberChoice(false);
+                  }
+                }}
+                tabIndex={0}
+                autoFocus
+              >
+                <div className="bg-background rounded-xl p-6 max-w-md mx-4 shadow-2xl">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
+                    Delete Image?
+                  </h3>
+                  <p className="text-muted-foreground mb-2">
+                    Are you sure you want to delete "{images[Math.max(0, Math.min(currentIndex, images.length - 1))]?.path.split(/[/\\]/).pop()}"?
+                  </p>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">Enter</kbd> to confirm or <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">Escape</kbd> to cancel
+                  </p>
+                  <div className="space-y-3">
+                    <label className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <input
+                        type="checkbox"
+                        className="rounded"
+                        checked={rememberChoice}
+                        onChange={(e) => setRememberChoice(e.target.checked)}
+                      />
+                      Remember for this session (skip confirmation)
+                    </label>
+                    <div className="flex gap-3 justify-end">
+                      <button
+                        onClick={() => {
+                          setShowDeleteConfirm(false);
+                          setRememberChoice(false);
+                        }}
+                        className="px-4 py-2 text-muted-foreground hover:bg-muted rounded-lg transition-colors"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        onClick={() => {
+                          confirmDelete(rememberChoice);
+                          setRememberChoice(false);
+                        }}
+                        className="px-4 py-2 bg-destructive hover:bg-destructive/90 text-destructive-foreground rounded-lg transition-colors"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/ImageWizard.tsx b/packages/ui/src/components/ImageWizard.tsx
index 9711fb0d..577b6e6f 100644
--- a/packages/ui/src/components/ImageWizard.tsx
+++ b/packages/ui/src/components/ImageWizard.tsx
@@ -1,1984 +1,1984 @@
-import React, { useEffect } from "react";
-import { fetchPostById } from '@/modules/posts/client-posts';
-import { Button } from "@/components/ui/button";
-import { useWizardContext } from "@/hooks/useWizardContext";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle
-} from "@/components/ui/alert-dialog";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import {
-  Wand2,
-  Save,
-  ArrowLeft,
-  Plus,
-  Trash2
-} from "lucide-react";
-import { toast } from "sonner";
-import { useAuth } from "@/hooks/useAuth";
-import { useNavigate } from "react-router-dom";
-import { createImage, editImage } from "@/lib/image-router";
-import PublishDialog from "@/components/PublishDialog";
-
-import { runTools } from "@/lib/openai";
-import { T, translate } from "@/i18n";
-import { DEFAULT_QUICK_ACTIONS, QuickAction as QuickActionType } from "@/constants";
-import { PromptPreset } from "@/components/PresetManager";
-import VoiceRecordingPopup from "@/components/VoiceRecordingPopup";
-import { Workflow } from "@/components/WorkflowManager";
-import { useLog } from "@/contexts/LogContext";
-import LogViewer from "@/components/LogViewer";
-import ImageLightbox from "@/components/ImageLightbox";
-import { uploadInternalVideo } from '@/utils/uploadUtils';
-import { ImageEditor } from "@/components/ImageEditor";
-import EditImageModal from "@/components/EditImageModal";
-import PostPicker from "@/modules/posts/components/PostPicker";
-
-// Import types and handlers
-import { ImageFile, ImageWizardProps } from "./ImageWizard/types";
-import { getUserApiKeys as getUserSecrets } from "@/modules/user/client-user";
-type QuickAction = QuickActionType; // Re-export for compatibility
-import {
-  handleFileUpload,
-  toggleImageSelection as toggleImageSelectionUtil,
-  removeImageRequest,
-  confirmDeleteImage as confirmDeleteImageUtil,
-  setAsSelected as setAsSelectedUtil,
-  handleDownloadImage,
-} from "./ImageWizard/handlers/imageHandlers";
-import {
-  handleOptimizePrompt as handleOptimizePromptUtil,
-  buildFullPrompt,
-  abortGeneration,
-} from "./ImageWizard/handlers/generationHandlers";
-import {
-  publishImage as publishImageUtil,
-  quickPublishAsNew as quickPublishAsNewUtil,
-  publishToGallery as publishToGalleryUtil,
-} from "./ImageWizard/handlers/publishHandlers";
-import {
-  loadFamilyVersions as loadFamilyVersionsUtil,
-  loadAvailableImages as loadAvailableImagesUtil,
-} from "./ImageWizard/handlers/dataHandlers";
-// Settings handlers are now used via useUserSettings hook
-import {
-  handleMicrophone as handleMicrophoneUtil,
-  handleVoiceToImage as handleVoiceToImageUtil,
-} from "./ImageWizard/handlers/voiceHandlers";
-import {
-  handleAgentGeneration as handleAgentGenerationUtil,
-} from "./ImageWizard/handlers/agentHandlers";
-import {
-  generateImageSplit as generateImageSplitUtil,
-} from "./ImageWizard/handlers/promptHandlers";
-import {
-  handleDragEnter,
-  handleDragOver,
-  handleDragLeave,
-  handleDrop,
-} from "./ImageWizard/handlers/dropHandlers";
-import {
-  WizardSidebar,
-  Prompt,
-  ImageGalleryPanel,
-} from "./ImageWizard/components";
-import { PostComposer } from "@/modules/posts/components/PostComposer";
-import { createLogger } from "./ImageWizard/utils/logger";
-import { useImageWizardState } from "./ImageWizard/hooks/useImageWizardState";
-import * as wizardDb from "./ImageWizard/db";
-import {
-  loadPromptTemplates,
-  savePromptTemplates,
-  loadPromptPresets,
-  loadWorkflows,
-  loadQuickActions,
-  saveQuickActions,
-  loadPromptHistory,
-  addToPromptHistory,
-  navigatePromptHistory,
-  savePromptPreset,
-  updatePromptPreset,
-  deletePromptPreset,
-  saveWorkflow,
-  updateWorkflow,
-  deleteWorkflow,
-} from "./ImageWizard/handlers/settingsHandlers";
-import { WizardProvider } from "./ImageWizard/context/WizardContext";
-
-const ImageWizard: React.FC<ImageWizardProps> = ({
-  isOpen,
-  onClose,
-  initialImages = [],
-  onPublish,
-  originalImageId,
-  mode = 'default',
-  initialPostTitle = "",
-  initialPostDescription = "",
-  initialPostSettings,
-  editingPostId = undefined
-}) => {
-  const { user } = useAuth();
-  const navigate = useNavigate();
-  const { addLog, isLoggerVisible, setLoggerVisible } = useLog();
-
-  // Create logger instance for this component
-  const logger = createLogger(addLog, 'ImageWizard');
-
-  // Centralized state management - flat destructuring
-  const {
-    // Image state
-    images, setImages, availableImages, setAvailableImages, generatedImage, setGeneratedImage,
-    // Generation state
-    isGenerating, setIsGenerating, isAgentMode, setIsAgentMode, isSplitMode, setIsSplitMode,
-    isOptimizingPrompt, setIsOptimizingPrompt, abortControllerRef,
-    // UI state
-    dragIn, setDragIn, loadingImages, setLoadingImages, isPublishing, setIsPublishing,
-    dropZoneRef, dragLeaveTimeoutRef,
-    // Form state
-    prompt, setPrompt, postTitle, setPostTitle, postDescription, setPostDescription,
-    selectedModel, setSelectedModel,
-    // New state for Gemini 3 Pro
-    aspectRatio, setAspectRatio,
-    resolution, setResolution,
-    searchGrounding, setSearchGrounding,
-    imageSearch, setImageSearch,
-    // Dialog state
-    showDeleteConfirmDialog, setShowDeleteConfirmDialog, imageToDelete, setImageToDelete,
-    showSaveTemplateDialog, setShowSaveTemplateDialog, newTemplateName, setNewTemplateName,
-    showTemplateManager, setShowTemplateManager, showEditActionsDialog, setShowEditActionsDialog,
-    showLightboxPublishDialog, setShowLightboxPublishDialog, showVoicePopup, setShowVoicePopup,
-    // Lightbox state
-    lightboxOpen, setLightboxOpen, currentImageIndex, setCurrentImageIndex,
-    lightboxPrompt, setLightboxPrompt, selectedOriginalImageId, setSelectedOriginalImageId,
-    // Settings state
-    promptTemplates, setPromptTemplates, loadingTemplates, setLoadingTemplates,
-    promptPresets, setPromptPresets, selectedPreset, setSelectedPreset,
-    loadingPresets, setLoadingPresets, workflows, setWorkflows,
-    loadingWorkflows, setLoadingWorkflows, quickActions, setQuickActions,
-    editingActions, setEditingActions, loadingActions, setLoadingActions,
-    promptHistory, setPromptHistory, historyIndex, setHistoryIndex,
-    // Voice state
-    isRecording, setIsRecording, isTranscribing, setIsTranscribing,
-    mediaRecorderRef, audioChunksRef, voicePopupRef,
-    // Add editingPostId to destructuring
-    editingPostId: currentEditingPostId,
-  } = useImageWizardState(initialImages, initialPostTitle, initialPostDescription, editingPostId);
-
-  const [settings, setSettings] = React.useState<any>(initialPostSettings || { visibility: 'public' }); // Post settings
-  const [lastError, setLastError] = React.useState<string | null>(null);
-
-  // Auto-retry state for 503 "high demand" errors
-  const retryTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const retryCountdownRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
-  const retryCountRef = React.useRef(0);
-  const isRetryCallRef = React.useRef(false);
-  const [retryInfo, setRetryInfo] = React.useState<{ attempt: number; secondsLeft: number } | null>(null);
-
-  const cancelRetry = React.useCallback(() => {
-    if (retryTimerRef.current) { clearTimeout(retryTimerRef.current); retryTimerRef.current = null; }
-    if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
-    retryCountRef.current = 0;
-    isRetryCallRef.current = false;
-    setRetryInfo(null);
-  }, []);
-
-  const scheduleRetry = React.useCallback((retryFn: () => void, errorMsg: string) => {
-    const MAX_RETRIES = 5;
-    const RETRY_SECS = 120;
-    if (retryCountRef.current >= MAX_RETRIES) {
-      retryCountRef.current = 0;
-      setLastError(`${errorMsg} — gave up after ${MAX_RETRIES} attempts`);
-      return;
-    }
-    retryCountRef.current++;
-    const attempt = retryCountRef.current;
-    let seconds = RETRY_SECS;
-    setRetryInfo({ attempt, secondsLeft: seconds });
-    retryCountdownRef.current = setInterval(() => {
-      seconds--;
-      if (seconds > 0) { setRetryInfo({ attempt, secondsLeft: seconds }); }
-      else if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
-    }, 1000);
-    retryTimerRef.current = setTimeout(() => {
-      if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
-      retryTimerRef.current = null;
-      setRetryInfo(null);
-      setLastError(null);
-      isRetryCallRef.current = true;
-      retryFn();
-    }, RETRY_SECS * 1000);
-  }, []);
-
-  // Cleanup retry on unmount
-  React.useEffect(() => () => cancelRetry(), [cancelRetry]);
-
-  // Editor and Settings state
-  const [editingImage, setEditingImage] = React.useState<{ url: string; id: string } | null>(null);
-  const [configuringImageId, setConfiguringImageId] = React.useState<{ id: string; title: string; description: string; visible: boolean } | null>(null);
-  const [showPostPicker, setShowPostPicker] = React.useState(false);
-  // const [isPublishing, setIsPublishing] = React.useState(false); // Using hook state or other defined state
-  useEffect(() => {
-    if (user?.id) {
-      loadPromptTemplates(user.id, setPromptTemplates, setLoadingTemplates);
-      loadPromptPresets(user.id, setPromptPresets, setLoadingPresets);
-      loadWorkflows(user.id, setWorkflows, setLoadingWorkflows);
-      loadQuickActions(user.id, setQuickActions, setLoadingActions, DEFAULT_QUICK_ACTIONS);
-      loadPromptHistory(user.id, setPromptHistory);
-
-      // Load saved model selection from user_secrets
-      wizardDb.loadWizardModel(user.id).then(model => {
-        if (model) setSelectedModel(model);
-      });
-    }
-  }, [user?.id]);
-
-  // Persist model selection when changed
-  const modelSaveTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    if (!user?.id) return;
-    // Debounce to avoid saving on initial load
-    if (modelSaveTimeoutRef.current) clearTimeout(modelSaveTimeoutRef.current);
-    modelSaveTimeoutRef.current = setTimeout(() => {
-      wizardDb.saveWizardModel(user.id, selectedModel);
-    }, 500);
-    return () => { if (modelSaveTimeoutRef.current) clearTimeout(modelSaveTimeoutRef.current); };
-  }, [selectedModel, user?.id]);
-
-  // Auto-upload effect for videos that come from share target (or other sources) without upload status
-  React.useEffect(() => {
-    // Find videos that have a file but no upload status (meaning they were just added via prop/state)
-    const pendingVideos = images.filter(img =>
-      img.type === 'video' &&
-      img.file &&
-      !img.uploadStatus
-    );
-
-    if (pendingVideos.length > 0) {
-      console.log('Found pending videos for upload:', pendingVideos.length);
-
-      pendingVideos.forEach(async (video) => {
-        if (!video.file || !user?.id) return;
-
-        // Mark as uploading immediately
-        setImages(prev => prev.map(img =>
-          img.id === video.id ? { ...img, uploadStatus: 'uploading', uploadProgress: 0 } : img
-        ));
-
-        try {
-          // Perform upload
-          await uploadInternalVideo(video.file, user.id, (progress) => {
-            setImages(prev => prev.map(img =>
-              img.id === video.id ? { ...img, uploadProgress: progress } : img
-            ));
-          }).then(data => {
-            setImages(prev => prev.map(img =>
-              img.id === video.id ? {
-                ...img,
-                id: data.dbId || video.id, // Update ID to DB ID
-                realDatabaseId: data.dbId,
-                uploadStatus: 'ready',
-                src: data.thumbnailUrl || video.src || '',
-              } : img
-            ));
-            toast.success(translate('Video uploaded successfully'));
-          });
-        } catch (err) {
-          console.error("Auto-upload video failed", err);
-          setImages(prev => prev.map(img =>
-            img.id === video.id ? { ...img, uploadStatus: 'error' } : img
-          ));
-          toast.error(translate('Failed to upload video'));
-        }
-      });
-    }
-  }, [images, user?.id, setImages]);
-
-  // Drop zone handlers are used directly from imported functions
-
-  // Load initial image from Zustand store (replaces sessionStorage)
-  const { wizardInitialImage } = useWizardContext();
-
-  useEffect(() => {
-    if (wizardInitialImage) {
-      setImages(prev => {
-        // Load family versions for this image first, then add the initial image
-        if (wizardInitialImage.realDatabaseId) {
-          // Check the current selection status from database for this image
-          wizardDb.getImageSelectionStatus(wizardInitialImage.realDatabaseId)
-            .then((isSelected) => {
-              const updatedImageData = { ...wizardInitialImage, selected: isSelected };
-              setImages(currentImages => {
-                // Check if image already exists to avoid duplicates
-                const exists = currentImages.find(img => img.id === updatedImageData.id);
-                if (exists) return currentImages;
-                return [...currentImages, updatedImageData];
-              });
-            });
-          loadFamilyVersions([wizardInitialImage]);
-        } else {
-          // For non-database images, just add as is
-          const exists = prev.find(img => img.id === wizardInitialImage.id);
-          if (!exists) {
-            return [...prev, wizardInitialImage];
-          }
-        }
-        return prev;
-      });
-
-      // Clear wizard image after loading (optional - keep it if you want to persist)
-      // clearWizardImage();
-    }
-  }, [wizardInitialImage]);
-
-  // Load complete family versions when initial images are provided
-  useEffect(() => {
-    if (initialImages.length > 0) {
-      loadFamilyVersions(initialImages);
-    }
-  }, [initialImages]);
-
-  // Load available images from user and others
-  useEffect(() => {
-    loadAvailableImages();
-  }, []);
-
-  // Settings are now loaded in useUserSettings hook
-
-  // Use extracted handlers with local state
-  const loadFamilyVersions = (parentImages: ImageFile[]) =>
-    loadFamilyVersionsUtil(parentImages, setImages, logger);
-
-  const loadAvailableImages = () =>
-    loadAvailableImagesUtil(setAvailableImages, setLoadingImages);
-
-  // Template operations
-  const applyTemplate = (template: string) => {
-    if (lightboxOpen) {
-      setLightboxPrompt(template);
-    } else {
-      setPrompt(template);
-    }
-  };
-
-  const deleteTemplate = async (index: number) => {
-    if (!user?.id) {
-      toast.error(translate('User not authenticated'));
-      return;
-    }
-    const newTemplates = promptTemplates.filter((_, i) => i !== index);
-    await savePromptTemplates(user.id, newTemplates);
-    setPromptTemplates(newTemplates);
-  };
-
-  const executeWorkflow = async (workflow: Workflow) => {
-    if (!user) {
-      toast.error(translate('User not authenticated'));
-      return;
-    }
-    toast.info(`🔄 Executing workflow: ${workflow.name}`);
-    logger.info(`Starting workflow: ${workflow.name} (${workflow.actions.length} actions)`);
-    try {
-      for (let i = 0; i < workflow.actions.length; i++) {
-        const action = workflow.actions[i];
-        toast.info(`⚙️ Step ${i + 1}/${workflow.actions.length}: ${action.label}`);
-        logger.info(`Workflow step ${i + 1}: ${action.label} (${action.type})`);
-
-        switch (action.type) {
-          case 'optimize_prompt':
-            await handleOptimizePrompt();
-            break;
-
-          case 'generate_image':
-            await generateImage();
-            break;
-
-          case 'generate_metadata':
-            // Generate title and description using AI
-            if (prompt.trim()) {
-              const apiKey = await wizardDb.getUserOpenAIKey(user.id);
-
-              const result = await runTools({
-                prompt: `Generate a title and description for this image prompt: "${prompt}"`,
-                preset: 'metadata-only',
-                apiKey,
-              });
-
-              const metadataToolCall = result.toolCalls?.find(
-                tc => 'function' in tc && tc.function?.name === 'generate_image_metadata'
-              );
-
-              if (metadataToolCall && 'function' in metadataToolCall) {
-                const metadata = JSON.parse(metadataToolCall.function.arguments || '{}');
-                if (metadata.title) setPostTitle(metadata.title);
-                if (metadata.description) setPostDescription(metadata.description);
-              }
-            }
-            break;
-
-          case 'quick_publish':
-            await quickPublishAsNew();
-            break;
-
-          /* Removed publish_to_gallery from workflow actions as it's not supported in type */
-
-          case 'download_image':
-            if (images.length > 0) {
-              const lastImage = images[images.length - 1];
-              await handleDownloadImage(lastImage);
-            }
-            break;
-
-          case 'enhance_image':
-            if (images.filter(img => img.selected).length > 0) {
-              setPrompt('Enhance and improve this image with better quality and details');
-              await generateImage();
-            }
-            break;
-
-          case 'apply_style':
-            if (images.filter(img => img.selected).length > 0) {
-              setPrompt('Apply artistic style transformation to this image');
-              await generateImage();
-            }
-            break;
-        }
-
-        // Small delay between actions
-        await new Promise(resolve => setTimeout(resolve, 500));
-      }
-      toast.success(`✅ Workflow "${workflow.name}" completed successfully!`);
-      logger.success(`Workflow "${workflow.name}" completed successfully`);
-    } catch (error: any) {
-      console.error('Error executing workflow:', error);
-      logger.error(`Workflow "${workflow.name}" failed: ${error.message}`);
-      toast.error(`Workflow failed: ${error.message}`);
-    }
-  };
-
-
-  const handleSaveCurrentPromptAsTemplate = () => {
-    const currentPrompt = lightboxOpen ? lightboxPrompt : prompt;
-    if (!currentPrompt.trim()) {
-      toast.error(translate('Please enter a prompt first'));
-      return;
-    }
-    setShowSaveTemplateDialog(true);
-  };
-
-  const confirmSaveTemplate = async () => {
-    if (!newTemplateName.trim()) {
-      toast.error(translate('Please enter a template name'));
-      return;
-    }
-
-    if (!user?.id) {
-      toast.error(translate('User not authenticated'));
-      return;
-    }
-
-    const currentPrompt = lightboxOpen ? lightboxPrompt : prompt;
-    const newTemplates = [...promptTemplates, { name: newTemplateName.trim(), template: currentPrompt }];
-    await savePromptTemplates(user.id, newTemplates);
-    setPromptTemplates(newTemplates);
-    setNewTemplateName("");
-    setShowSaveTemplateDialog(false);
-  };
-
-  const toggleImageSelection = (imageId: string, isMultiSelect = false, fromGallery = false) =>
-    toggleImageSelectionUtil(imageId, isMultiSelect, fromGallery, availableImages, images, setImages);
-
-  const removeImage = (imageId: string) =>
-    removeImageRequest(imageId, setImageToDelete, setShowDeleteConfirmDialog);
-
-  const confirmDeleteImage = () =>
-    confirmDeleteImageUtil(imageToDelete, setImages, setImageToDelete, setShowDeleteConfirmDialog, initialImages, loadFamilyVersions);
-
-  const deleteSelectedImages = () => {
-    const selectedImages = images.filter(img => img.selected);
-    if (selectedImages.length === 0) {
-      toast.error(translate('No images selected'));
-      return;
-    }
-
-    // Show confirmation for bulk delete
-    const count = selectedImages.length;
-    setShowDeleteConfirmDialog(true);
-    setImageToDelete(`bulk:${count}`); // Special marker for bulk delete
-  };
-
-  const confirmBulkDelete = () => {
-    const selectedImages = images.filter(img => img.selected);
-    const selectedIds = selectedImages.map(img => img.id);
-
-    // Remove all selected images
-    setImages(prev => prev.filter(img => !selectedIds.includes(img.id)));
-
-    toast.success(translate(`${selectedImages.length} image(s) deleted`));
-    logger.info(`Deleted ${selectedImages.length} selected images`);
-
-    setShowDeleteConfirmDialog(false);
-    setImageToDelete(null);
-  };
-
-  const setAsSelected = (imageId: string) =>
-    setAsSelectedUtil(imageId, images, setImages, initialImages, loadFamilyVersions);
-
-  const handleMicrophone = () =>
-    handleMicrophoneUtil(
-      isRecording,
-      mediaRecorderRef,
-      setIsRecording,
-      setIsTranscribing,
-      audioChunksRef,
-      lightboxOpen,
-      setLightboxPrompt,
-      setPrompt
-    );
-
-  const handleOptimizePrompt = () =>
-    handleOptimizePromptUtil(
-      lightboxOpen ? lightboxPrompt : prompt,
-      lightboxOpen,
-      setLightboxPrompt,
-      setPrompt,
-      setIsOptimizingPrompt
-    );
-
-  const handleVoiceTranscription = (transcribedText: string) => {
-    setPrompt(transcribedText);
-    toast.success(translate('Voice transcribed successfully!'));
-  };
-
-  const handlePresetSelect = (preset: PromptPreset) => {
-    setSelectedPreset(preset);
-    toast.success(`Preset "${preset.name}" activated as context`);
-  };
-
-  const handlePresetClear = () => {
-    setSelectedPreset(null);
-    toast.info(translate('Preset context cleared'));
-  };
-
-  const handleVoiceToImage = (transcribedText: string) =>
-    handleVoiceToImageUtil(
-      transcribedText,
-      user?.id,
-      selectedPreset,
-      selectedModel,
-      setPrompt,
-      setImages,
-      setPostTitle,
-      setPostDescription,
-      voicePopupRef,
-      logger
-    );
-
-  const handleAgentGeneration = () =>
-    handleAgentGenerationUtil(
-      prompt,
-      user?.id,
-      buildFullPrompt(selectedPreset, prompt),
-      selectedModel,
-      setIsAgentMode,
-      setIsGenerating,
-      setImages,
-      setPostTitle,
-      setPostDescription,
-      logger
-    );
-
-
-  const handlePublishToGallery = async () => {
-    await publishToGalleryUtil({
-      user: user,
-      generatedImage: typeof generatedImage === 'string' ? generatedImage : (generatedImage as any)?.src || null,
-      images: images,
-      lightboxOpen: lightboxOpen,
-      currentImageIndex: currentImageIndex,
-      postTitle: '',
-      postDescription: '',
-      prompt: prompt,
-      isOrgContext: false,
-      orgSlug: null,
-      onPublish: (url) => {
-        // No navigation needed for gallery publish, maybe just stay or go specific place?
-        // For now stay in wizard or close? Implementation plan said "Verify success message" so staying might be fine, but closing is better UX usually.
-        // Let's close.
-        onClose();
-        navigate('/'); // Or to gallery view if possible
-      }
-    }, setIsPublishing);
-  };
-
-  const handleAppendToPost = () => {
-    setShowPostPicker(true);
-  };
-
-  const handlePostSelected = async (postId: string) => {
-    setShowPostPicker(false);
-
-    // Switch to edit mode for this post
-    // This logic mimics CreationWizardPopup's handlePostSelected
-    try {
-      const toastId = toast.loading(translate('Loading post...'));
-
-      // Fetch full post via API (returns FeedPost with pictures)
-      const post = await fetchPostById(postId);
-
-      if (!post) throw new Error('Post not found');
-
-      // Transform existing pictures
-      const existingImages = (post.pictures || [])
-        .sort((a: any, b: any) => ((a.position || 0) - (b.position || 0)))
-        .map((p: any) => ({
-          id: p.id,
-          path: p.id,
-          src: p.image_url,
-          title: p.title,
-          description: p.description || '',
-          selected: false,
-          realDatabaseId: p.id,
-          type: p.type || 'image',
-          isGenerated: false
-        }));
-
-      // Merge current wizard images as new
-      const newImages = images.map(img => ({
-        ...img,
-        selected: true
-      }));
-
-      const combinedImages = [...existingImages, ...newImages];
-
-      setImages(combinedImages);
-      setPostTitle(post.title);
-      setPostDescription(post.description || '');
-
-      navigate('/wizard', {
-        state: {
-          mode: 'post',
-          editingPostId: postId,
-          initialImages: combinedImages,
-          postTitle: post.title,
-          postDescription: post.description,
-          postSettings: post.settings
-        },
-        replace: true
-      });
-
-      toast.dismiss(toastId);
-      toast.success(translate('Switched to post editing mode'));
-
-    } catch (err) {
-      console.error("Error loading post for append:", err);
-      toast.error(translate('Failed to load post'));
-    }
-  };
-
-
-
-  const executeQuickAction = (action: QuickAction) => {
-    const selectedImages = images.filter(img => img.selected);
-    if (selectedImages.length === 0) {
-      toast.error(translate('Please select at least one image for this action'));
-      return;
-    }
-    setPrompt(action.prompt);
-  };
-
-  const openEditActionsDialog = () => {
-    setEditingActions([...quickActions]);
-    setShowEditActionsDialog(true);
-  };
-
-  const addQuickAction = () => {
-    const newAction: QuickAction = {
-      id: `action_${Date.now()}`,
-      name: 'New Action',
-      prompt: '',
-      icon: '⭐'
-    };
-    setEditingActions([...editingActions, newAction]);
-  };
-
-  const updateQuickAction = (id: string, field: keyof QuickAction, value: string) => {
-    setEditingActions(editingActions.map(action =>
-      action.id === id ? { ...action, [field]: value } : action
-    ));
-  };
-
-  const deleteQuickAction = (id: string) => {
-    setEditingActions(editingActions.filter(action => action.id !== id));
-  };
-
-  const saveEditedActions = async () => {
-    // Validate
-    const invalid = editingActions.find(a => !a.name.trim() || !a.prompt.trim());
-    if (invalid) {
-      toast.error(translate('All actions must have a name and prompt'));
-      return;
-    }
-
-    if (!user?.id) {
-      toast.error(translate('User not authenticated'));
-      return;
-    }
-
-    await saveQuickActions(user.id, editingActions);
-    setQuickActions(editingActions);
-    setShowEditActionsDialog(false);
-  };
-
-  const handleLightboxPromptSubmit = async (promptText: string) => {
-    if (!lightboxOpen || currentImageIndex >= images.length) return;
-
-    // Set the prompt and get the current lightbox image for editing
-    setPrompt(promptText);
-
-    const targetImage = images[currentImageIndex];
-    if (targetImage) {
-
-      // Store current lightbox state
-      const wasLightboxOpen = lightboxOpen;
-
-      // Directly pass the target image to avoid state timing issues
-      await generateImageWithSpecificImage(promptText, targetImage);
-      setLightboxPrompt(""); // Clear the lightbox prompt
-
-      // Keep lightbox open if it was open during generation
-      if (wasLightboxOpen && !lightboxOpen) {
-        setLightboxOpen(true);
-      }
-    }
-  };
-
-  const openLightbox = (index: number) => {
-    setCurrentImageIndex(index);
-    setLightboxOpen(true);
-
-    // Set the parent ID for version creation when opening lightbox
-    const currentImage = images[index];
-    let parentId = null;
-
-    if (currentImage) {
-      // If this image has a parentForNewVersions (from version map), use that
-      if (currentImage.parentForNewVersions) {
-        parentId = currentImage.parentForNewVersions;
-      }
-      // If this is the initial image from a database post, use its real ID
-      else if (currentImage.realDatabaseId) {
-        parentId = currentImage.realDatabaseId;
-      }
-      // If this is a saved image (has UUID), use it as parent
-      else if (currentImage.id && currentImage.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)) {
-        parentId = currentImage.id;
-      }
-      // Otherwise, find the first non-generated image in the array
-      else {
-        const originalImage = images.find(img => !img.isGenerated && img.id && img.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
-        parentId = originalImage?.id || null;
-      }
-    }
-
-    setSelectedOriginalImageId(parentId);
-
-    // Pre-populate lightbox prompt with main prompt for quick publish context
-    // Only if lightbox prompt is empty to avoid overwriting user's edits
-    if (!lightboxPrompt.trim() && prompt.trim()) {
-      setLightboxPrompt(prompt);
-    }
-  };
-
-  // Auto-update lightbox when images change
-  useEffect(() => {
-    if (lightboxOpen && currentImageIndex >= images.length && images.length > 0) {
-      // If current index is out of bounds, go to the last image (newest)
-      const newIndex = images.length - 1;
-      setCurrentImageIndex(newIndex);
-    }
-  }, [images.length, lightboxOpen, currentImageIndex]);
-
-  const generateImageWithSpecificImage = async (promptText: string, targetImage: ImageFile) => {
-    if (!isRetryCallRef.current) { cancelRetry(); }
-    isRetryCallRef.current = false;
-    setIsGenerating(true);
-    setLastError(null);
-    try {
-
-      let result: { imageData: ArrayBuffer; text?: string } | null = null;
-
-      // Resolve correct API key for the selected provider
-      let apiKey: string | undefined = undefined;
-      if (user?.id) {
-        const secrets = await getUserSecrets(user.id);
-        if (secrets) {
-          const provider = selectedModel.split('/')[0]?.toLowerCase();
-          switch (provider) {
-            case 'aimlapi': apiKey = secrets.aimlapi_api_key; break;
-            case 'replicate': apiKey = secrets.replicate_api_key; break;
-            case 'bria': apiKey = secrets.bria_api_key; break;
-            default: apiKey = secrets.google_api_key; break;
-          }
-        }
-      }
-
-      // Edit the specific target image
-      if (targetImage.file) {
-        result = await editImage(
-          promptText,
-          [targetImage.file],
-          selectedModel,
-          apiKey,
-          aspectRatio,
-          resolution,
-          searchGrounding,
-          imageSearch
-        );
-      } else {
-        // Convert any image source (data URL or HTTP URL) to File for editing
-        try {
-          const response = await fetch(targetImage.src);
-          const blob = await response.blob();
-          const file = new File([blob], targetImage.title || 'image.png', {
-            type: blob.type || 'image/png'
-          });
-          result = await editImage(
-            promptText,
-            [file],
-            selectedModel,
-            apiKey,
-            aspectRatio,
-            resolution,
-            searchGrounding,
-            imageSearch
-          );
-        } catch (error) {
-          console.error('Error converting image:', error);
-          toast.error(translate('Failed to convert image for editing'));
-          return;
-        }
-      }
-
-      if (result) {
-        // Convert ArrayBuffer to base64 data URL  
-        const uint8Array = new Uint8Array(result.imageData);
-        const blob = new Blob([uint8Array], { type: 'image/png' });
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          const dataUrl = reader.result as string;
-
-          // Add generated image to the images list and auto-select it
-          const newImage: ImageFile = {
-            id: `generated-${Date.now()}`,
-            src: dataUrl,
-            title: promptText.substring(0, 50) + (promptText.length > 50 ? '...' : ''),
-            selected: true,
-            isGenerated: true,
-            aiText: result.text, // Store AI description
-            parentForNewVersions: targetImage.parentForNewVersions || targetImage.realDatabaseId || (targetImage.id && /^[0-9a-f]{8}-/.test(targetImage.id) ? targetImage.id : undefined)
-          };
-          const newIndex = images.length; // Calculate the new index BEFORE updating state
-
-          // Deselect all other images and add the new one as selected
-          setImages(prev => {
-            const updated = [...prev.map(img => ({ ...img, selected: false })), newImage];
-
-            // If lightbox is open, update to show the new image immediately after state update
-            if (lightboxOpen) {
-              // Use setTimeout to ensure React has processed the state update
-              setTimeout(() => {
-                setCurrentImageIndex(newIndex);
-              }, 50); // Reduced timeout
-            }
-
-            return updated;
-          });
-        };
-
-        reader.readAsDataURL(blob);
-      }
-    } catch (error: any) {
-      console.error('Error generating image:', error);
-      const errMsg = error?.message || String(error);
-      // Extract meaningful message from GoogleGenerativeAI errors
-      // Pattern: "[GoogleGenerativeAI Error]: Error fetching from <url>: [503 ] Actual message"
-      const httpMatch = errMsg.match(/\[\d{3}\s*\]\s*(.+)/s);
-      const userMessage = httpMatch ? httpMatch[1].trim() : errMsg.replace(/\[GoogleGenerativeAI Error\][:\s]*/i, '').trim();
-      setLastError(userMessage || 'Failed to generate image');
-      // Auto-retry for "high demand" / rate-limit errors
-      if (userMessage.toLowerCase().includes('later')) {
-        scheduleRetry(() => generateImageWithSpecificImage(promptText, targetImage), userMessage);
-      } else {
-        toast.error(userMessage || translate('Failed to generate image'));
-      }
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const generateImageSplit = async () => {
-    await generateImageSplitUtil(
-      prompt,
-      images,
-      selectedModel,
-      abortControllerRef,
-      setIsGenerating,
-      setImages,
-      async (promptText: string) => {
-        if (user?.id) {
-          await addToPromptHistory(user.id, promptText, setPromptHistory, setHistoryIndex);
-        }
-      },
-      logger
-    );
-  };
-
-  const generateImage = async () => {
-    const fullPrompt = buildFullPrompt(selectedPreset, prompt);
-
-    if (!fullPrompt.trim()) {
-      toast.error(translate('Please enter a prompt'));
-      return;
-    }
-
-    // Add to history before generating
-    if (prompt.trim() && user?.id) {
-      await addToPromptHistory(user.id, prompt.trim(), setPromptHistory, setHistoryIndex);
-    }
-
-    // Create new abort controller
-    abortControllerRef.current = new AbortController();
-
-    // Clear retry state only for manual triggers (not auto-retries)
-    if (!isRetryCallRef.current) { cancelRetry(); }
-    isRetryCallRef.current = false;
-    setLastError(null);
-    setIsGenerating(true);
-    logger.info(`Starting image generation with prompt: "${fullPrompt.substring(0, 50)}..."`);
-    // Create placeholder image with loading state
-    const placeholderId = `placeholder-${Date.now()}`;
-    const placeholderImage: ImageFile = {
-      id: placeholderId,
-      src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', // Transparent pixel — spinner overlay provides visual
-      title: 'Generating...',
-      selected: false,
-      isGenerated: false,
-    };
-    // Remember which images were selected before we deselect for the placeholder
-    const previouslySelectedIds = images.filter(img => img.selected).map(img => img.id);
-    setImages(prev => [...prev.map(img => ({ ...img, selected: false })), placeholderImage]);
-
-    try {
-      // Check if aborted
-      if (abortControllerRef.current.signal.aborted) {
-        // Remove placeholder on abort
-        setImages(prev => prev.filter(img => img.id !== placeholderId));
-        return;
-      }
-
-      // Get API Key – resolve the correct key based on the selected model's provider
-      let apiKey: string | undefined = undefined;
-      if (user?.id) {
-        const secrets = await getUserSecrets(user.id);
-        if (secrets) {
-          const provider = selectedModel.split('/')[0]?.toLowerCase();
-          switch (provider) {
-            case 'aimlapi': apiKey = secrets.aimlapi_api_key; break;
-            case 'replicate': apiKey = secrets.replicate_api_key; break;
-            case 'bria': apiKey = secrets.bria_api_key; break;
-            default: apiKey = secrets.google_api_key; break;
-          }
-        }
-      }
-
-
-      const selectedImages = images.filter(img => img.selected);
-
-      let result: { imageData: ArrayBuffer; text?: string } | null = null;
-
-      if (selectedImages.length > 0) {
-        // Edit existing images - ensure we have File objects for ALL selected images
-        const files = selectedImages
-          .map(img => img.file)
-          .filter((file): file is File => file !== undefined);
-
-        // Check if ALL selected images have File objects
-        if (files.length === selectedImages.length) {
-          // All images have files, use them directly
-          result = await editImage(
-            fullPrompt,
-            files,
-            selectedModel,
-            apiKey,
-            aspectRatio,
-            resolution,
-            searchGrounding,
-            imageSearch
-          );
-        } else {
-          // Some images don't have File objects, convert all from src to ensure consistency
-          const convertedFiles: File[] = [];
-          for (const img of selectedImages) {
-            try {
-              const response = await fetch(img.src);
-              const blob = await response.blob();
-              const file = new File([blob], img.title || 'image.png', {
-                type: blob.type || 'image/png'
-              });
-              convertedFiles.push(file);
-            } catch (error) {
-              console.error('Error converting image:', img.title, error);
-            }
-          }
-
-          if (convertedFiles.length > 0) {
-            result = await editImage(
-              fullPrompt,
-              convertedFiles,
-              selectedModel,
-              apiKey,
-              aspectRatio,
-              resolution,
-              searchGrounding,
-              imageSearch
-            );
-          } else {
-            toast.error(translate('Failed to convert selected images for editing'));
-            return;
-          }
-        }
-      } else {
-        // Generate new image
-        result = await createImage(
-          fullPrompt,
-          selectedModel,
-          apiKey,
-          aspectRatio,
-          resolution,
-          searchGrounding,
-          imageSearch
-        );
-      }
-
-      if (result) {
-        logger.success('Image generated successfully');
-        // Convert ArrayBuffer to base64 data URL  
-        const uint8Array = new Uint8Array(result.imageData);
-        const blob = new Blob([uint8Array], { type: 'image/png' });
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          const dataUrl = reader.result as string;
-          setGeneratedImage(dataUrl);
-
-          // Determine parent ID inheritance from selected image (if any)
-          let inheritedParentId: string | undefined;
-          if (selectedImages.length === 1) {
-            // If selected image is a Real DB image, it becomes the parent.
-            // If it's a generated image that has a parent pointer, we inherit that (sibling/child logic).
-            // However, strictly speaking, if we edit 'A', 'B' is a child of 'A'.
-            // But if 'A' is unsaved, we can't link to it. We fall back to 'A's parent if available.
-            inheritedParentId = selectedImages[0].realDatabaseId || selectedImages[0].parentForNewVersions;
-          }
-
-          // Add generated image to the images list and auto-select it
-          const newImage: ImageFile = {
-            id: `generated-${Date.now()}`,
-            src: dataUrl,
-            title: (selectedPreset ? `[${selectedPreset.name}] ` : '') + prompt.substring(0, 40) + (prompt.length > 40 ? '...' : ''),
-            selected: true,
-            isGenerated: true,
-            aiText: result.text, // Store AI description
-            parentForNewVersions: inheritedParentId // Propagate parent ID
-          };
-          logger.debug(`Added new image: ${newImage.title}`);
-          const newIndex = images.length; // Calculate the new index BEFORE updating state
-
-          // Replace placeholder with actual image
-          setImages(prev => {
-            const withoutPlaceholder = prev.filter(img => img.id !== placeholderId);
-            const updated = [...withoutPlaceholder.map(img => ({ ...img, selected: false })), newImage];
-
-            // If lightbox is open, update to show the new image immediately after state update
-            if (lightboxOpen) {
-              // Use setTimeout to ensure React has processed the state update
-              setTimeout(() => {
-                setCurrentImageIndex(newIndex);
-              }, 50); // Reduced timeout
-            }
-
-            return updated;
-          });
-        };
-
-        reader.readAsDataURL(blob);
-      }
-    } catch (error: any) {
-      console.error('Error generating image:', error);
-      const errMsg = error?.message || String(error);
-      logger.error(`Failed to generate image: ${errMsg}`);
-      // Extract meaningful message from GoogleGenerativeAI errors
-      // Pattern: "[GoogleGenerativeAI Error]: Error fetching from <url>: [503 ] Actual message"
-      const httpMatch = errMsg.match(/\[\d{3}\s*\]\s*(.+)/s);
-      const userMessage = httpMatch ? httpMatch[1].trim() : errMsg.replace(/\[GoogleGenerativeAI Error\][:\s]*/i, '').trim();
-      setLastError(userMessage || 'Failed to generate image');
-      // Auto-retry for "high demand" / rate-limit errors
-      if (userMessage.toLowerCase().includes('later')) {
-        scheduleRetry(() => generateImage(), userMessage);
-      } else {
-        toast.error(userMessage || translate('Failed to generate image'));
-      }
-      // Remove placeholder on error and restore previous selection
-      setImages(prev => prev
-        .filter(img => img.id !== placeholderId)
-        .map(img => ({ ...img, selected: previouslySelectedIds.includes(img.id) }))
-      );
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const publishImage = () =>
-    publishImageUtil(
-      {
-        user,
-        generatedImage,
-        images,
-        lightboxOpen,
-        currentImageIndex,
-        postTitle,
-        prompt,
-        isOrgContext: false,
-        orgSlug: null,
-        onPublish,
-      },
-      setIsPublishing
-    );
-
-  // Quick publish function that uses prompt as description
-  const quickPublishAsNew = () =>
-    quickPublishAsNewUtil(
-      {
-        user,
-        generatedImage,
-        images,
-        lightboxOpen,
-        currentImageIndex,
-        postTitle,
-        prompt,
-        isOrgContext: false,
-        orgSlug: null,
-        onPublish,
-      },
-      setIsPublishing
-    );
-
-  const handleAddToPost = async (imageSrc: string, title: string, description?: string) => {
-    if (!currentEditingPostId) {
-      toast.error("No active post to add to");
-      return;
-    }
-
-    if (!user) {
-      toast.error(translate('User not authenticated'));
-      return;
-    }
-
-    setIsPublishing(true);
-    try {
-      // Fetch the image
-      const response = await fetch(imageSrc);
-      const blob = await response.blob();
-
-      await wizardDb.publishImageToPost({
-        userId: user.id,
-        blob,
-        title: title || prompt, // Fallback to prompt if no title
-        description: description,
-        postId: currentEditingPostId,
-        isOrgContext: false,
-        orgSlug: null,
-        collectionIds: []
-      });
-      // Navigate back success
-      navigate(`/post/${currentEditingPostId}`);
-    } catch (error: any) {
-      console.error('Error adding to post:', error);
-
-      // Reset loading state
-      if (currentImageIndex !== -1) {
-        setImages(prev => {
-          const newImgs = [...prev];
-          // Only reset if it still exists at that index (simple check)
-          if (newImgs[currentImageIndex]) {
-            newImgs[currentImageIndex] = { ...newImgs[currentImageIndex], isAddingToPost: false };
-          }
-          return newImgs;
-        });
-      }
-
-      if (error.code === '23503') {
-        toast.error(translate('Could not add to this post. The post might have been deleted or the link is invalid.'));
-      } else {
-        toast.error(translate('Failed to add image to post'));
-      }
-    }
-  };
-
-  const handleLightboxPublish = async (option: 'overwrite' | 'new' | 'version' | 'add-to-post', imageUrl: string, title: string, description?: string, parentId?: string, collectionIds?: string[]) => {
-    if (!user) {
-      toast.error(translate('User not authenticated'));
-      return;
-    }
-
-    if (currentImageIndex >= images.length) {
-      toast.error(translate('No image selected'));
-      return;
-    }
-
-    const currentImage = images[currentImageIndex];
-    if (!currentImage) {
-      toast.error(translate('No image available to publish'));
-      return;
-    }
-
-    // Handle Add to Post
-    if (option === 'add-to-post' && currentEditingPostId) {
-      await handleAddToPost(currentImage.src, title, description);
-      setShowLightboxPublishDialog(false);
-      return;
-    }
-
-    setIsPublishing(true);
-    try {
-      // Convert image to blob for upload
-      const response = await fetch(currentImage.src);
-      const blob = await response.blob();
-
-      if (option === 'overwrite') {
-        toast.info(translate('Overwrite not supported in wizard, creating new image instead'));
-        option = 'new';
-      }
-
-      if (option === 'new') {
-        await wizardDb.publishImageAsNew({
-          userId: user.id,
-          blob,
-          title,
-          description,
-          isOrgContext: false,
-          orgSlug: null,
-          collectionIds,
-        });
-      } else if (option === 'version' && parentId) {
-        await wizardDb.publishImageAsVersion({
-          userId: user.id,
-          blob,
-          title,
-          description,
-          parentId,
-          isOrgContext: false,
-          orgSlug: null,
-          collectionIds,
-        });
-      } else if (option === 'version' && !parentId) {
-        toast.info(translate('No parent image found, creating as new post instead'));
-        // Recursive call with 'new'
-        // FIX: call self but ensure we don't loop if logic is wrong. 
-        // Here it changes option to 'new', so it should be fine.
-        // We need to re-call handleLightboxPublish logic essentially.
-        // For simplicity, just run the new logic here:
-        await wizardDb.publishImageAsNew({
-          userId: user.id,
-          blob,
-          title,
-          description,
-          isOrgContext: false,
-          orgSlug: null,
-          collectionIds,
-        });
-      }
-
-      setShowLightboxPublishDialog(false);
-      // Only navigate/close if NOT "Add to Post" (which handled navigation)
-      // For standard publish, we usually close wizard or call onPublish prop
-      onPublish?.(currentImage.src, lightboxPrompt);
-    } catch (error) {
-      console.error('Error publishing image:', error);
-      toast.error(translate('Failed to publish image'));
-    } finally {
-      setIsPublishing(false);
-    }
-  };
-
-  const handleEditImage = (index: number) => {
-    const img = images[index];
-    if (img) {
-      setEditingImage({ url: img.src, id: img.realDatabaseId || img.id });
-    }
-  };
-
-  const handleConfigureImage = (index: number) => {
-    const img = images[index];
-    if (img && img.realDatabaseId) {
-      setConfiguringImageId({
-        id: img.realDatabaseId,
-        title: img.title,
-        description: img.aiText || null,
-        visible: true // Default
-      });
-    } else {
-      toast.error(translate("Please save the image first to configure settings"));
-    }
-  };
-
-  // Prepare context value
-  const contextValue = {
-    // User
-    userId: user?.id,
-
-    // Images
-    images,
-    setImages,
-    availableImages,
-    generatedImage,
-
-    // Generation state
-    isGenerating,
-    isAgentMode,
-    isSplitMode,
-    setIsSplitMode,
-    isOptimizingPrompt,
-
-    // Form state
-    prompt,
-    setPrompt,
-    postTitle,
-    setPostTitle,
-    selectedModel,
-    setSelectedModel,
-    aspectRatio,
-    setAspectRatio,
-    resolution,
-    setResolution,
-    searchGrounding,
-    setSearchGrounding,
-
-    // Settings
-    selectedPreset,
-    promptPresets,
-    loadingPresets,
-    workflows,
-    loadingWorkflows,
-    promptTemplates,
-    quickActions,
-
-    // Prompt history
-    promptHistory,
-    historyIndex,
-    setHistoryIndex,
-
-    // Voice
-    isRecording,
-    isTranscribing,
-
-    // UI state
-    isPublishing,
-    dragIn,
-    setDragIn,
-    loadingImages,
-    dragLeaveTimeoutRef,
-
-    // Actions - Image operations
-    toggleImageSelection,
-    openLightbox,
-    setAsSelected,
-    removeImage,
-    deleteSelectedImages,
-
-    // Actions - Generation
-    generateImage,
-    generateImageSplit,
-    handleAgentGeneration,
-    handleOptimizePrompt,
-    handleMicrophone,
-
-    // Actions - Settings
-    handlePresetSelect,
-    handlePresetClear,
-    savePreset: async (preset: Omit<PromptPreset, 'id' | 'createdAt'>) => {
-      if (user?.id) await savePromptPreset(user.id, preset, setPromptPresets);
-    },
-    updatePreset: async (id: string, preset: Omit<PromptPreset, 'id' | 'createdAt'>) => {
-      if (user?.id) await updatePromptPreset(user.id, id, preset, setPromptPresets);
-    },
-    deletePreset: async (id: string) => {
-      if (user?.id) await deletePromptPreset(user.id, id, setPromptPresets);
-    },
-
-    saveWorkflow: async (workflow: Omit<Workflow, 'id' | 'createdAt'>) => {
-      if (user?.id) await saveWorkflow(user.id, workflow, setWorkflows);
-    },
-    updateWorkflow: async (id: string, workflow: Omit<Workflow, 'id' | 'createdAt'>) => {
-      if (user?.id) await updateWorkflow(user.id, id, workflow, setWorkflows);
-    },
-    deleteWorkflow: async (id: string) => {
-      if (user?.id) await deleteWorkflow(user.id, id, setWorkflows);
-    },
-    executeWorkflow,
-
-    applyTemplate,
-    deleteTemplate,
-    handleSaveCurrentPromptAsTemplate,
-
-    executeQuickAction,
-    openEditActionsDialog,
-
-    navigateHistory: (direction: 'up' | 'down') =>
-      navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setPrompt),
-
-    // Actions - Publishing
-    quickPublishAsNew,
-    publishImage,
-
-    // Actions - Misc
-    setShowVoicePopup,
-
-    // Logger
-    logger,
-
-    // Add To Post State
-    currentEditingPostId,
-    handleAddToPost: (imageSrc: string) => handleAddToPost(imageSrc, postTitle || prompt, postDescription)
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <WizardProvider value={contextValue}>
-      {/* Editor Overlay */}
-      {editingImage && (
-        <div className="fixed inset-0 z-[60] bg-background">
-          <ImageEditor
-            imageUrl={editingImage.url}
-            pictureId={editingImage.id}
-            onClose={() => setEditingImage(null)}
-            onSave={(newUrl) => {
-              setImages(prev => prev.map(img =>
-                (img.id === editingImage.id || img.realDatabaseId === editingImage.id)
-                  ? { ...img, src: newUrl, isGenerated: false }
-                  : img
-              ));
-              setEditingImage(null);
-            }}
-          />
-        </div>
-      )}
-
-      {/* Settings Modal */}
-      {configuringImageId && (
-        <EditImageModal
-          open={!!configuringImageId}
-          onOpenChange={(open) => !open && setConfiguringImageId(null)}
-          pictureId={configuringImageId.id}
-          currentTitle={configuringImageId.title}
-          currentDescription={configuringImageId.description}
-          currentVisible={configuringImageId.visible}
-          imageUrl={images.find(i => i.realDatabaseId === configuringImageId.id)?.src}
-          onUpdateSuccess={() => {
-            setConfiguringImageId(null);
-            toast.success(translate("Image settings updated"));
-          }}
-        />
-      )}
-
-      <div className="space-y-4 p-2 md:space-y-6">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 md:gap-3">
-            <Button variant="ghost" size="sm" onClick={onClose} className="h-10 w-10 md:h-9 md:w-9 p-0 touch-manipulation">
-              <ArrowLeft className="h-5 w-5 md:h-4 md:w-4" />
-            </Button>
-            <div className="flex items-center gap-2">
-              <Wand2 className="h-5 w-5 md:h-6 md:w-6 text-primary" />
-              <h1 className="text-xl md:text-2xl font-bold">
-                {mode === 'post' ? <T>Post Wizard</T> : <T>AI Image Wizard</T>}
-              </h1>
-            </div>
-          </div>
-
-          {/* Unified Lightbox Component */}
-          <ImageLightbox
-            isOpen={lightboxOpen && images.length > 0}
-            onClose={() => setLightboxOpen(false)}
-            imageUrl={images[currentImageIndex]?.src || ''}
-            imageTitle={images[currentImageIndex]?.title || 'Generated Image'}
-            originalImageId={selectedOriginalImageId || undefined}
-            onPromptSubmit={(promptText) => handleLightboxPromptSubmit(promptText)}
-            onPublish={handleLightboxPublish}
-            isGenerating={isGenerating}
-            isPublishing={isPublishing}
-            showPrompt={true}
-            showPublish={images[currentImageIndex]?.isGenerated}
-            generatedImageUrl={undefined}
-            currentIndex={currentImageIndex}
-            totalCount={images.length}
-            onNavigate={(direction) => {
-              const newIndex = direction === 'next' ? currentImageIndex + 1 : currentImageIndex - 1;
-              if (newIndex >= 0 && newIndex < images.length) {
-                setCurrentImageIndex(newIndex);
-              }
-            }}
-            // Wizard features
-            showWizardFeatures={true}
-            promptTemplates={promptTemplates}
-            onApplyTemplate={(template) => setLightboxPrompt(template)}
-            onSaveTemplate={handleSaveCurrentPromptAsTemplate}
-            onDeleteTemplate={deleteTemplate}
-            onOptimizePrompt={handleOptimizePrompt}
-            isOptimizing={isOptimizingPrompt}
-            onMicrophoneToggle={handleMicrophone}
-            isRecording={isRecording}
-            isTranscribing={isTranscribing}
-            showQuickPublish={images[currentImageIndex]?.isGenerated && lightboxPrompt.trim().length > 0}
-            onQuickPublish={quickPublishAsNew}
-            prompt={lightboxPrompt}
-            onPromptChange={setLightboxPrompt}
-            // Prompt history
-            promptHistory={promptHistory}
-            historyIndex={historyIndex}
-            onNavigateHistory={(direction) => navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setLightboxPrompt)}
-            onManualPromptEdit={() => setHistoryIndex(-1)}
-          />
-        </div>
-
-        {/* Logger Panel - Collapsible */}
-        {isLoggerVisible && (
-          <div className="mb-4 md:mb-6">
-            <div className="h-48 md:h-64">
-              <LogViewer onClose={() => setLoggerVisible(false)} />
-            </div>
-          </div>
-        )}
-
-        <div className={mode === 'post' ? "h-[calc(100vh-140px)]" : "grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6"}>
-          {mode === 'post' ? (
-            <PostComposer
-              images={images}
-              setImages={setImages}
-              onRemoveImage={removeImage}
-              onFileUpload={(event) => handleFileUpload(event, setImages, user)}
-              dropZoneRef={dropZoneRef}
-              isDragging={dragIn}
-              onDragEnter={(e) => handleDragEnter(e, dragLeaveTimeoutRef, setDragIn)}
-              onDragOver={(e) => handleDragOver(e, dragIn, setDragIn)}
-              onDragLeave={(e) => handleDragLeave(e, dragLeaveTimeoutRef, setDragIn)}
-              onDrop={(e) => handleDrop(e, dragLeaveTimeoutRef, setDragIn, setImages, user)}
-              postTitle={postTitle}
-              setPostTitle={setPostTitle}
-              postDescription={postDescription}
-              setPostDescription={setPostDescription}
-              isEditing={!!currentEditingPostId}
-              postId={currentEditingPostId}
-              settings={settings}
-              setSettings={setSettings}
-              onPublish={() => {
-                // Auto-inject link into settings if present
-                const externalPage = images.find(img => img.type === 'page-external');
-                const publishSettings = { ...settings };
-
-                if (externalPage && externalPage.path && !publishSettings.link) {
-                  publishSettings.link = externalPage.path;
-                }
-
-                publishImageUtil({
-                  user: user,
-                  generatedImage: typeof generatedImage === 'string' ? generatedImage : (generatedImage as any)?.src || null,
-                  images: images,
-                  lightboxOpen: lightboxOpen,
-                  currentImageIndex: currentImageIndex,
-                  postTitle: postTitle,
-                  postDescription: postDescription,
-                  settings: publishSettings, // Pass enriched settings
-                  prompt: prompt,
-                  isOrgContext: false,
-                  orgSlug: null,
-                  publishAll: mode === 'post',
-                  editingPostId: currentEditingPostId,
-                  onPublish: (url, postId) => {
-                    onClose();
-                    // If we have a postId (passed as 2nd arg for posts), navigate to it
-                    if (postId && (mode === 'post' || currentEditingPostId)) {
-                      navigate(`/post/${postId}`);
-                    } else {
-                      navigate('/');
-                    }
-                  }
-                }, setIsPublishing);
-              }}
-              onPublishToGallery={handlePublishToGallery}
-              onAppendToPost={handleAppendToPost}
-              isPublishing={isPublishing}
-            />
-          ) : (
-            <>
-              {/* Left Panel - Controls */}
-              <WizardSidebar
-                selectedModel={selectedModel}
-                onModelChange={setSelectedModel}
-                onLoadModel={wizardDb.loadWizardModel}
-                onSaveModel={wizardDb.saveWizardModel}
-                aspectRatio={aspectRatio}
-                onAspectRatioChange={setAspectRatio}
-                resolution={resolution}
-                onResolutionChange={setResolution}
-                searchGrounding={searchGrounding}
-                onSearchGroundingChange={setSearchGrounding}
-                imageSearch={imageSearch}
-                onImageSearchChange={setImageSearch}
-                selectedPreset={selectedPreset}
-                presets={promptPresets}
-                loadingPresets={loadingPresets}
-                onPresetSelect={handlePresetSelect}
-                onPresetClear={handlePresetClear}
-                onSavePreset={(preset) => user?.id && savePromptPreset(user.id, preset, setPromptPresets)}
-                onUpdatePreset={(id, preset) => user?.id && updatePromptPreset(user.id, id, preset, setPromptPresets)}
-                onDeletePreset={(id) => user?.id && deletePromptPreset(user.id, id, setPromptPresets)}
-                workflows={workflows}
-                loadingWorkflows={loadingWorkflows}
-                onSaveWorkflow={(workflow) => user?.id && saveWorkflow(user.id, workflow, setWorkflows)}
-                onUpdateWorkflow={(id, workflow) => user?.id && updateWorkflow(user.id, id, workflow, setWorkflows)}
-                onDeleteWorkflow={(id) => user?.id && deleteWorkflow(user.id, id, setWorkflows)}
-                onExecuteWorkflow={executeWorkflow}
-                isGenerating={isGenerating}
-                isAgentMode={isAgentMode}
-                isSplitMode={isSplitMode}
-                prompt={prompt}
-                onGenerate={generateImage}
-                onGenerateSplit={generateImageSplit}
-                onAgentGenerate={handleAgentGeneration}
-                onVoiceGenerate={() => setShowVoicePopup(true)}
-                onAbort={() => { cancelRetry(); abortGeneration(abortControllerRef, setIsGenerating, setIsAgentMode, setImages, logger); }}
-                images={images}
-                generatedImage={generatedImage}
-                postTitle={postTitle}
-                onPostTitleChange={setPostTitle}
-                isPublishing={isPublishing}
-                onQuickPublish={quickPublishAsNew}
-                onPublish={() => setShowLightboxPublishDialog(true)}
-                onPublishToGallery={handlePublishToGallery}
-                onAppendToPost={handleAppendToPost}
-                onAddToPost={() => {
-                  const currentImage = images[images.length - 1]; // Default to most recent for sidebar action
-                  if (currentImage) handleAddToPost(currentImage.src, postTitle || prompt, postDescription)
-                }}
-                editingPostId={currentEditingPostId}
-                lastError={lastError}
-                retryInfo={retryInfo}
-                onDismissError={() => { cancelRetry(); setLastError(null); }}
-              >
-                <Prompt
-                  prompt={prompt}
-                  onPromptChange={setPrompt}
-                  isSplitMode={isSplitMode}
-                  onSplitModeChange={setIsSplitMode}
-                  selectedPreset={selectedPreset}
-                  templates={promptTemplates}
-                  onApplyTemplate={applyTemplate}
-                  onSaveTemplate={handleSaveCurrentPromptAsTemplate}
-                  onDeleteTemplate={deleteTemplate}
-                  onOptimizePrompt={handleOptimizePrompt}
-                  isOptimizing={isOptimizingPrompt}
-                  onMicrophoneToggle={handleMicrophone}
-                  isRecording={isRecording}
-                  isTranscribing={isTranscribing}
-                  promptHistory={promptHistory}
-                  historyIndex={historyIndex}
-                  onNavigateHistory={(direction) => navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setPrompt)}
-                  onManualEdit={() => setHistoryIndex(-1)}
-                  isGenerating={isGenerating}
-                  onGenerate={generateImage}
-                  onImagePaste={(image) => setImages(prev => [...prev, image])}
-                />
-              </WizardSidebar>
-
-              {/* Right Panel - Images */}
-              <ImageGalleryPanel
-                images={images}
-                onImageClick={toggleImageSelection}
-                onImageDoubleClick={openLightbox}
-                onFileUpload={(event) => handleFileUpload(event, setImages, user)}
-                onDeleteSelected={deleteSelectedImages}
-                onDownload={handleDownloadImage}
-                onSetAsSelected={setAsSelected}
-                onSaveAsVersion={(img, idx) => {
-                  setCurrentImageIndex(idx);
-                  const currentImage = images[idx];
-                  let parentId = null;
-
-                  if (currentImage.parentForNewVersions) {
-                    parentId = currentImage.parentForNewVersions;
-                  } else if (currentImage.realDatabaseId) {
-                    parentId = currentImage.realDatabaseId;
-                  } else {
-                    const originalImage = images.find(img => !img.isGenerated && img.id && img.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
-                    parentId = originalImage?.id || null;
-                  }
-
-                  setSelectedOriginalImageId(parentId);
-                  setShowLightboxPublishDialog(true);
-                }}
-                onEdit={handleEditImage}
-                onRemove={removeImage}
-                availableImages={availableImages}
-                loadingImages={loadingImages}
-                onGalleryImageSelect={(imageId, isMultiSelect) => toggleImageSelection(imageId, isMultiSelect, true)}
-                quickActions={quickActions}
-                onExecuteAction={executeQuickAction}
-                onEditActions={openEditActionsDialog}
-                onSettings={handleConfigureImage}
-                isGenerating={isGenerating}
-                dragIn={dragIn}
-                onDragEnter={(e) => handleDragEnter(e, dragLeaveTimeoutRef, setDragIn)}
-                onDragOver={(e) => handleDragOver(e, dragIn, setDragIn)}
-                onDragLeave={(e) => handleDragLeave(e, dragLeaveTimeoutRef, setDragIn)}
-                onDrop={(e) => handleDrop(e, dragLeaveTimeoutRef, setDragIn, setImages, user)}
-                dropZoneRef={dropZoneRef}
-                onAddToPost={(image) => handleAddToPost(image.src, postTitle || prompt, postDescription)}
-                editingPostId={currentEditingPostId}
-              />
-            </>
-          )}
-        </div>
-
-        <Dialog open={showPostPicker} onOpenChange={setShowPostPicker}>
-          <DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col">
-            <DialogHeader>
-              <DialogTitle><T>Select a Post to Append To</T></DialogTitle>
-              <DialogDescription>
-                <T>Choose one of your existing posts to add these images to.</T>
-              </DialogDescription>
-            </DialogHeader>
-            <div className="flex-1 overflow-hidden min-h-0">
-              <PostPicker onSelect={handlePostSelected} />
-            </div>
-          </DialogContent>
-        </Dialog>
-
-        {/* Lightbox Publish Dialog */}
-        {/* Delete Confirmation Dialog */}
-        <AlertDialog open={showDeleteConfirmDialog} onOpenChange={setShowDeleteConfirmDialog}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>
-                {imageToDelete?.startsWith('bulk:') ? (
-                  <T>Delete Multiple Images</T>
-                ) : (
-                  <T>Delete Image Version</T>
-                )}
-              </AlertDialogTitle>
-              <AlertDialogDescription>
-                {imageToDelete?.startsWith('bulk:') ? (
-                  <>
-                    <T>Are you sure you want to delete {imageToDelete.split(':')[1]} selected image(s)? This action cannot be undone.</T>
-                  </>
-                ) : (
-                  <T>Are you sure you want to delete this image version? This action cannot be undone and will permanently remove the image from your account.</T>
-                )}
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel onClick={() => setShowDeleteConfirmDialog(false)}>
-                <T>Cancel</T>
-              </AlertDialogCancel>
-              <AlertDialogAction
-                onClick={imageToDelete?.startsWith('bulk:') ? confirmBulkDelete : confirmDeleteImage}
-                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              >
-                <T>Delete</T>
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-
-        <PublishDialog
-          isOpen={showLightboxPublishDialog}
-          onClose={() => setShowLightboxPublishDialog(false)}
-          onPublish={(option, title, description, parentId, collectionIds) => {
-            const currentImage = images[currentImageIndex];
-            if (currentImage) {
-              // Now accepts 'add-to-post' as option
-              handleLightboxPublish(option as any, currentImage.src, title || '', description, parentId, collectionIds);
-            }
-          }}
-          originalTitle={images[currentImageIndex]?.title || 'Generated Image'}
-          originalImageId={selectedOriginalImageId || (originalImageId && originalImageId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i) ? originalImageId : undefined)}
-          isPublishing={isPublishing}
-          editingPostId={currentEditingPostId} // Pass prop
-        />
-
-        {/* Save Template Dialog */}
-        <Dialog open={showSaveTemplateDialog} onOpenChange={setShowSaveTemplateDialog}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle><T>Save Prompt Template</T></DialogTitle>
-              <DialogDescription>
-                <T>Give your prompt template a name to save it for later use.</T>
-              </DialogDescription>
-            </DialogHeader>
-            <div className="space-y-4 py-4">
-              <div className="space-y-2">
-                <label className="text-sm font-medium"><T>Template Name</T></label>
-                <Input
-                  value={newTemplateName}
-                  onChange={(e) => setNewTemplateName(e.target.value)}
-                  placeholder={translate("e.g. Cyberpunk Portrait")}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                      confirmSaveTemplate();
-                    }
-                  }}
-                  autoFocus
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="text-sm font-medium text-muted-foreground"><T>Prompt Preview</T></label>
-                <div className="text-sm p-3 bg-muted rounded-md max-h-32 overflow-y-auto">
-                  {lightboxOpen ? lightboxPrompt : prompt}
-                </div>
-              </div>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setShowSaveTemplateDialog(false)}>
-                <T>Cancel</T>
-              </Button>
-              <Button onClick={confirmSaveTemplate} disabled={!newTemplateName.trim()}>
-                <Save className="h-4 w-4 mr-2" />
-                <T>Save Template</T>
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Voice Recording Popup */}
-        <VoiceRecordingPopup
-          ref={voicePopupRef}
-          isOpen={showVoicePopup}
-          onClose={() => setShowVoicePopup(false)}
-          onTranscriptionComplete={handleVoiceTranscription}
-          onGenerateImage={handleVoiceToImage}
-          showToolCalls={true}
-        />
-
-        {/* Edit Quick Actions Dialog */}
-        <Dialog open={showEditActionsDialog} onOpenChange={setShowEditActionsDialog}>
-          <DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
-            <DialogHeader>
-              <DialogTitle><T>Edit Quick Actions</T></DialogTitle>
-              <DialogDescription>
-                <T>Customize the quick actions that appear above your images. Add, edit, or remove actions.</T>
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="space-y-3 py-4">
-              {editingActions.map((action, index) => (
-                <div key={action.id} className="flex gap-2 items-start p-3 bg-muted/50 rounded-lg border">
-                  <Input
-                    placeholder="Icon (emoji)"
-                    value={action.icon}
-                    onChange={(e) => updateQuickAction(action.id, 'icon', e.target.value)}
-                    className="w-16 text-center"
-                    maxLength={2}
-                  />
-                  <Input
-                    placeholder="Name"
-                    value={action.name}
-                    onChange={(e) => updateQuickAction(action.id, 'name', e.target.value)}
-                    className="flex-1"
-                    maxLength={30}
-                  />
-                  <Input
-                    placeholder="Prompt"
-                    value={action.prompt}
-                    onChange={(e) => updateQuickAction(action.id, 'prompt', e.target.value)}
-                    className="flex-[2]"
-                    maxLength={200}
-                  />
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => deleteQuickAction(action.id)}
-                    className="h-9 w-9 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
-                    title="Delete action"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              ))}
-
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={addQuickAction}
-                className="w-full"
-              >
-                <Plus className="h-4 w-4 mr-2" />
-                <T>Add Quick Action</T>
-              </Button>
-            </div>
-
-            <DialogFooter>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => {
-                  setShowEditActionsDialog(false);
-                  setEditingActions([]);
-                }}
-              >
-                <T>Cancel</T>
-              </Button>
-              <Button
-                type="button"
-                onClick={() => {
-                  setEditingActions(DEFAULT_QUICK_ACTIONS);
-                }}
-                variant="secondary"
-              >
-                <T>Reset to Defaults</T>
-              </Button>
-              <Button
-                type="button"
-                onClick={saveEditedActions}
-              >
-                <Save className="w-4 h-4 mr-2" />
-                <T>Save Actions</T>
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-      </div>
-    </WizardProvider >
-  );
-};
-
-export default ImageWizard;
\ No newline at end of file
+import React, { useEffect } from "react";
+import { fetchPostById } from '@/modules/posts/client-posts';
+import { Button } from "@/components/ui/button";
+import { useWizardContext } from "@/hooks/useWizardContext";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "@/components/ui/alert-dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+  Wand2,
+  Save,
+  ArrowLeft,
+  Plus,
+  Trash2
+} from "lucide-react";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/useAuth";
+import { useNavigate } from "react-router-dom";
+import { createImage, editImage } from "@/lib/image-router";
+import PublishDialog from "@/components/PublishDialog";
+
+import { runTools } from "@/lib/openai";
+import { T, translate } from "@/i18n";
+import { DEFAULT_QUICK_ACTIONS, QuickAction as QuickActionType } from "@/constants";
+import { PromptPreset } from "@/components/PresetManager";
+import VoiceRecordingPopup from "@/components/VoiceRecordingPopup";
+import { Workflow } from "@/components/WorkflowManager";
+import { useLog } from "@/contexts/LogContext";
+import LogViewer from "@/components/LogViewer";
+import ImageLightbox from "@/components/ImageLightbox";
+import { uploadInternalVideo } from '@/utils/uploadUtils';
+import { ImageEditor } from "@/components/ImageEditor";
+import EditImageModal from "@/components/EditImageModal";
+import PostPicker from "@/modules/posts/components/PostPicker";
+
+// Import types and handlers
+import { ImageFile, ImageWizardProps } from "./ImageWizard/types";
+import { getUserApiKeys as getUserSecrets } from "@/modules/user/client-user";
+type QuickAction = QuickActionType; // Re-export for compatibility
+import {
+  handleFileUpload,
+  toggleImageSelection as toggleImageSelectionUtil,
+  removeImageRequest,
+  confirmDeleteImage as confirmDeleteImageUtil,
+  setAsSelected as setAsSelectedUtil,
+  handleDownloadImage,
+} from "./ImageWizard/handlers/imageHandlers";
+import {
+  handleOptimizePrompt as handleOptimizePromptUtil,
+  buildFullPrompt,
+  abortGeneration,
+} from "./ImageWizard/handlers/generationHandlers";
+import {
+  publishImage as publishImageUtil,
+  quickPublishAsNew as quickPublishAsNewUtil,
+  publishToGallery as publishToGalleryUtil,
+} from "./ImageWizard/handlers/publishHandlers";
+import {
+  loadFamilyVersions as loadFamilyVersionsUtil,
+  loadAvailableImages as loadAvailableImagesUtil,
+} from "./ImageWizard/handlers/dataHandlers";
+// Settings handlers are now used via useUserSettings hook
+import {
+  handleMicrophone as handleMicrophoneUtil,
+  handleVoiceToImage as handleVoiceToImageUtil,
+} from "./ImageWizard/handlers/voiceHandlers";
+import {
+  handleAgentGeneration as handleAgentGenerationUtil,
+} from "./ImageWizard/handlers/agentHandlers";
+import {
+  generateImageSplit as generateImageSplitUtil,
+} from "./ImageWizard/handlers/promptHandlers";
+import {
+  handleDragEnter,
+  handleDragOver,
+  handleDragLeave,
+  handleDrop,
+} from "./ImageWizard/handlers/dropHandlers";
+import {
+  WizardSidebar,
+  Prompt,
+  ImageGalleryPanel,
+} from "./ImageWizard/components";
+import { PostComposer } from "@/modules/posts/components/PostComposer";
+import { createLogger } from "./ImageWizard/utils/logger";
+import { useImageWizardState } from "./ImageWizard/hooks/useImageWizardState";
+import * as wizardDb from "./ImageWizard/db";
+import {
+  loadPromptTemplates,
+  savePromptTemplates,
+  loadPromptPresets,
+  loadWorkflows,
+  loadQuickActions,
+  saveQuickActions,
+  loadPromptHistory,
+  addToPromptHistory,
+  navigatePromptHistory,
+  savePromptPreset,
+  updatePromptPreset,
+  deletePromptPreset,
+  saveWorkflow,
+  updateWorkflow,
+  deleteWorkflow,
+} from "./ImageWizard/handlers/settingsHandlers";
+import { WizardProvider } from "./ImageWizard/context/WizardContext";
+
+const ImageWizard: React.FC<ImageWizardProps> = ({
+  isOpen,
+  onClose,
+  initialImages = [],
+  onPublish,
+  originalImageId,
+  mode = 'default',
+  initialPostTitle = "",
+  initialPostDescription = "",
+  initialPostSettings,
+  editingPostId = undefined
+}) => {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const { addLog, isLoggerVisible, setLoggerVisible } = useLog();
+
+  // Create logger instance for this component
+  const logger = createLogger(addLog, 'ImageWizard');
+
+  // Centralized state management - flat destructuring
+  const {
+    // Image state
+    images, setImages, availableImages, setAvailableImages, generatedImage, setGeneratedImage,
+    // Generation state
+    isGenerating, setIsGenerating, isAgentMode, setIsAgentMode, isSplitMode, setIsSplitMode,
+    isOptimizingPrompt, setIsOptimizingPrompt, abortControllerRef,
+    // UI state
+    dragIn, setDragIn, loadingImages, setLoadingImages, isPublishing, setIsPublishing,
+    dropZoneRef, dragLeaveTimeoutRef,
+    // Form state
+    prompt, setPrompt, postTitle, setPostTitle, postDescription, setPostDescription,
+    selectedModel, setSelectedModel,
+    // New state for Gemini 3 Pro
+    aspectRatio, setAspectRatio,
+    resolution, setResolution,
+    searchGrounding, setSearchGrounding,
+    imageSearch, setImageSearch,
+    // Dialog state
+    showDeleteConfirmDialog, setShowDeleteConfirmDialog, imageToDelete, setImageToDelete,
+    showSaveTemplateDialog, setShowSaveTemplateDialog, newTemplateName, setNewTemplateName,
+    showTemplateManager, setShowTemplateManager, showEditActionsDialog, setShowEditActionsDialog,
+    showLightboxPublishDialog, setShowLightboxPublishDialog, showVoicePopup, setShowVoicePopup,
+    // Lightbox state
+    lightboxOpen, setLightboxOpen, currentImageIndex, setCurrentImageIndex,
+    lightboxPrompt, setLightboxPrompt, selectedOriginalImageId, setSelectedOriginalImageId,
+    // Settings state
+    promptTemplates, setPromptTemplates, loadingTemplates, setLoadingTemplates,
+    promptPresets, setPromptPresets, selectedPreset, setSelectedPreset,
+    loadingPresets, setLoadingPresets, workflows, setWorkflows,
+    loadingWorkflows, setLoadingWorkflows, quickActions, setQuickActions,
+    editingActions, setEditingActions, loadingActions, setLoadingActions,
+    promptHistory, setPromptHistory, historyIndex, setHistoryIndex,
+    // Voice state
+    isRecording, setIsRecording, isTranscribing, setIsTranscribing,
+    mediaRecorderRef, audioChunksRef, voicePopupRef,
+    // Add editingPostId to destructuring
+    editingPostId: currentEditingPostId,
+  } = useImageWizardState(initialImages, initialPostTitle, initialPostDescription, editingPostId);
+
+  const [settings, setSettings] = React.useState<any>(initialPostSettings || { visibility: 'public' }); // Post settings
+  const [lastError, setLastError] = React.useState<string | null>(null);
+
+  // Auto-retry state for 503 "high demand" errors
+  const retryTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const retryCountdownRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
+  const retryCountRef = React.useRef(0);
+  const isRetryCallRef = React.useRef(false);
+  const [retryInfo, setRetryInfo] = React.useState<{ attempt: number; secondsLeft: number } | null>(null);
+
+  const cancelRetry = React.useCallback(() => {
+    if (retryTimerRef.current) { clearTimeout(retryTimerRef.current); retryTimerRef.current = null; }
+    if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
+    retryCountRef.current = 0;
+    isRetryCallRef.current = false;
+    setRetryInfo(null);
+  }, []);
+
+  const scheduleRetry = React.useCallback((retryFn: () => void, errorMsg: string) => {
+    const MAX_RETRIES = 5;
+    const RETRY_SECS = 120;
+    if (retryCountRef.current >= MAX_RETRIES) {
+      retryCountRef.current = 0;
+      setLastError(`${errorMsg} — gave up after ${MAX_RETRIES} attempts`);
+      return;
+    }
+    retryCountRef.current++;
+    const attempt = retryCountRef.current;
+    let seconds = RETRY_SECS;
+    setRetryInfo({ attempt, secondsLeft: seconds });
+    retryCountdownRef.current = setInterval(() => {
+      seconds--;
+      if (seconds > 0) { setRetryInfo({ attempt, secondsLeft: seconds }); }
+      else if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
+    }, 1000);
+    retryTimerRef.current = setTimeout(() => {
+      if (retryCountdownRef.current) { clearInterval(retryCountdownRef.current); retryCountdownRef.current = null; }
+      retryTimerRef.current = null;
+      setRetryInfo(null);
+      setLastError(null);
+      isRetryCallRef.current = true;
+      retryFn();
+    }, RETRY_SECS * 1000);
+  }, []);
+
+  // Cleanup retry on unmount
+  React.useEffect(() => () => cancelRetry(), [cancelRetry]);
+
+  // Editor and Settings state
+  const [editingImage, setEditingImage] = React.useState<{ url: string; id: string } | null>(null);
+  const [configuringImageId, setConfiguringImageId] = React.useState<{ id: string; title: string; description: string; visible: boolean } | null>(null);
+  const [showPostPicker, setShowPostPicker] = React.useState(false);
+  // const [isPublishing, setIsPublishing] = React.useState(false); // Using hook state or other defined state
+  useEffect(() => {
+    if (user?.id) {
+      loadPromptTemplates(user.id, setPromptTemplates, setLoadingTemplates);
+      loadPromptPresets(user.id, setPromptPresets, setLoadingPresets);
+      loadWorkflows(user.id, setWorkflows, setLoadingWorkflows);
+      loadQuickActions(user.id, setQuickActions, setLoadingActions, DEFAULT_QUICK_ACTIONS);
+      loadPromptHistory(user.id, setPromptHistory);
+
+      // Load saved model selection from user_secrets
+      wizardDb.loadWizardModel(user.id).then(model => {
+        if (model) setSelectedModel(model);
+      });
+    }
+  }, [user?.id]);
+
+  // Persist model selection when changed
+  const modelSaveTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!user?.id) return;
+    // Debounce to avoid saving on initial load
+    if (modelSaveTimeoutRef.current) clearTimeout(modelSaveTimeoutRef.current);
+    modelSaveTimeoutRef.current = setTimeout(() => {
+      wizardDb.saveWizardModel(user.id, selectedModel);
+    }, 500);
+    return () => { if (modelSaveTimeoutRef.current) clearTimeout(modelSaveTimeoutRef.current); };
+  }, [selectedModel, user?.id]);
+
+  // Auto-upload effect for videos that come from share target (or other sources) without upload status
+  React.useEffect(() => {
+    // Find videos that have a file but no upload status (meaning they were just added via prop/state)
+    const pendingVideos = images.filter(img =>
+      img.type === 'video' &&
+      img.file &&
+      !img.uploadStatus
+    );
+
+    if (pendingVideos.length > 0) {
+      console.log('Found pending videos for upload:', pendingVideos.length);
+
+      pendingVideos.forEach(async (video) => {
+        if (!video.file || !user?.id) return;
+
+        // Mark as uploading immediately
+        setImages(prev => prev.map(img =>
+          img.id === video.id ? { ...img, uploadStatus: 'uploading', uploadProgress: 0 } : img
+        ));
+
+        try {
+          // Perform upload
+          await uploadInternalVideo(video.file, user.id, (progress) => {
+            setImages(prev => prev.map(img =>
+              img.id === video.id ? { ...img, uploadProgress: progress } : img
+            ));
+          }).then(data => {
+            setImages(prev => prev.map(img =>
+              img.id === video.id ? {
+                ...img,
+                id: data.dbId || video.id, // Update ID to DB ID
+                realDatabaseId: data.dbId,
+                uploadStatus: 'ready',
+                src: data.thumbnailUrl || video.src || '',
+              } : img
+            ));
+            toast.success(translate('Video uploaded successfully'));
+          });
+        } catch (err) {
+          console.error("Auto-upload video failed", err);
+          setImages(prev => prev.map(img =>
+            img.id === video.id ? { ...img, uploadStatus: 'error' } : img
+          ));
+          toast.error(translate('Failed to upload video'));
+        }
+      });
+    }
+  }, [images, user?.id, setImages]);
+
+  // Drop zone handlers are used directly from imported functions
+
+  // Load initial image from Zustand store (replaces sessionStorage)
+  const { wizardInitialImage } = useWizardContext();
+
+  useEffect(() => {
+    if (wizardInitialImage) {
+      setImages(prev => {
+        // Load family versions for this image first, then add the initial image
+        if (wizardInitialImage.realDatabaseId) {
+          // Check the current selection status from database for this image
+          wizardDb.getImageSelectionStatus(wizardInitialImage.realDatabaseId)
+            .then((isSelected) => {
+              const updatedImageData = { ...wizardInitialImage, selected: isSelected };
+              setImages(currentImages => {
+                // Check if image already exists to avoid duplicates
+                const exists = currentImages.find(img => img.id === updatedImageData.id);
+                if (exists) return currentImages;
+                return [...currentImages, updatedImageData];
+              });
+            });
+          loadFamilyVersions([wizardInitialImage]);
+        } else {
+          // For non-database images, just add as is
+          const exists = prev.find(img => img.id === wizardInitialImage.id);
+          if (!exists) {
+            return [...prev, wizardInitialImage];
+          }
+        }
+        return prev;
+      });
+
+      // Clear wizard image after loading (optional - keep it if you want to persist)
+      // clearWizardImage();
+    }
+  }, [wizardInitialImage]);
+
+  // Load complete family versions when initial images are provided
+  useEffect(() => {
+    if (initialImages.length > 0) {
+      loadFamilyVersions(initialImages);
+    }
+  }, [initialImages]);
+
+  // Load available images from user and others
+  useEffect(() => {
+    loadAvailableImages();
+  }, []);
+
+  // Settings are now loaded in useUserSettings hook
+
+  // Use extracted handlers with local state
+  const loadFamilyVersions = (parentImages: ImageFile[]) =>
+    loadFamilyVersionsUtil(parentImages, setImages, logger);
+
+  const loadAvailableImages = () =>
+    loadAvailableImagesUtil(setAvailableImages, setLoadingImages);
+
+  // Template operations
+  const applyTemplate = (template: string) => {
+    if (lightboxOpen) {
+      setLightboxPrompt(template);
+    } else {
+      setPrompt(template);
+    }
+  };
+
+  const deleteTemplate = async (index: number) => {
+    if (!user?.id) {
+      toast.error(translate('User not authenticated'));
+      return;
+    }
+    const newTemplates = promptTemplates.filter((_, i) => i !== index);
+    await savePromptTemplates(user.id, newTemplates);
+    setPromptTemplates(newTemplates);
+  };
+
+  const executeWorkflow = async (workflow: Workflow) => {
+    if (!user) {
+      toast.error(translate('User not authenticated'));
+      return;
+    }
+    toast.info(`🔄 Executing workflow: ${workflow.name}`);
+    logger.info(`Starting workflow: ${workflow.name} (${workflow.actions.length} actions)`);
+    try {
+      for (let i = 0; i < workflow.actions.length; i++) {
+        const action = workflow.actions[i];
+        toast.info(`⚙️ Step ${i + 1}/${workflow.actions.length}: ${action.label}`);
+        logger.info(`Workflow step ${i + 1}: ${action.label} (${action.type})`);
+
+        switch (action.type) {
+          case 'optimize_prompt':
+            await handleOptimizePrompt();
+            break;
+
+          case 'generate_image':
+            await generateImage();
+            break;
+
+          case 'generate_metadata':
+            // Generate title and description using AI
+            if (prompt.trim()) {
+              const apiKey = await wizardDb.getUserOpenAIKey(user.id);
+
+              const result = await runTools({
+                prompt: `Generate a title and description for this image prompt: "${prompt}"`,
+                preset: 'metadata-only',
+                apiKey,
+              });
+
+              const metadataToolCall = result.toolCalls?.find(
+                tc => 'function' in tc && tc.function?.name === 'generate_image_metadata'
+              );
+
+              if (metadataToolCall && 'function' in metadataToolCall) {
+                const metadata = JSON.parse(metadataToolCall.function.arguments || '{}');
+                if (metadata.title) setPostTitle(metadata.title);
+                if (metadata.description) setPostDescription(metadata.description);
+              }
+            }
+            break;
+
+          case 'quick_publish':
+            await quickPublishAsNew();
+            break;
+
+          /* Removed publish_to_gallery from workflow actions as it's not supported in type */
+
+          case 'download_image':
+            if (images.length > 0) {
+              const lastImage = images[images.length - 1];
+              await handleDownloadImage(lastImage);
+            }
+            break;
+
+          case 'enhance_image':
+            if (images.filter(img => img.selected).length > 0) {
+              setPrompt('Enhance and improve this image with better quality and details');
+              await generateImage();
+            }
+            break;
+
+          case 'apply_style':
+            if (images.filter(img => img.selected).length > 0) {
+              setPrompt('Apply artistic style transformation to this image');
+              await generateImage();
+            }
+            break;
+        }
+
+        // Small delay between actions
+        await new Promise(resolve => setTimeout(resolve, 500));
+      }
+      toast.success(`✅ Workflow "${workflow.name}" completed successfully!`);
+      logger.success(`Workflow "${workflow.name}" completed successfully`);
+    } catch (error: any) {
+      console.error('Error executing workflow:', error);
+      logger.error(`Workflow "${workflow.name}" failed: ${error.message}`);
+      toast.error(`Workflow failed: ${error.message}`);
+    }
+  };
+
+
+  const handleSaveCurrentPromptAsTemplate = () => {
+    const currentPrompt = lightboxOpen ? lightboxPrompt : prompt;
+    if (!currentPrompt.trim()) {
+      toast.error(translate('Please enter a prompt first'));
+      return;
+    }
+    setShowSaveTemplateDialog(true);
+  };
+
+  const confirmSaveTemplate = async () => {
+    if (!newTemplateName.trim()) {
+      toast.error(translate('Please enter a template name'));
+      return;
+    }
+
+    if (!user?.id) {
+      toast.error(translate('User not authenticated'));
+      return;
+    }
+
+    const currentPrompt = lightboxOpen ? lightboxPrompt : prompt;
+    const newTemplates = [...promptTemplates, { name: newTemplateName.trim(), template: currentPrompt }];
+    await savePromptTemplates(user.id, newTemplates);
+    setPromptTemplates(newTemplates);
+    setNewTemplateName("");
+    setShowSaveTemplateDialog(false);
+  };
+
+  const toggleImageSelection = (imageId: string, isMultiSelect = false, fromGallery = false) =>
+    toggleImageSelectionUtil(imageId, isMultiSelect, fromGallery, availableImages, images, setImages);
+
+  const removeImage = (imageId: string) =>
+    removeImageRequest(imageId, setImageToDelete, setShowDeleteConfirmDialog);
+
+  const confirmDeleteImage = () =>
+    confirmDeleteImageUtil(imageToDelete, setImages, setImageToDelete, setShowDeleteConfirmDialog, initialImages, loadFamilyVersions);
+
+  const deleteSelectedImages = () => {
+    const selectedImages = images.filter(img => img.selected);
+    if (selectedImages.length === 0) {
+      toast.error(translate('No images selected'));
+      return;
+    }
+
+    // Show confirmation for bulk delete
+    const count = selectedImages.length;
+    setShowDeleteConfirmDialog(true);
+    setImageToDelete(`bulk:${count}`); // Special marker for bulk delete
+  };
+
+  const confirmBulkDelete = () => {
+    const selectedImages = images.filter(img => img.selected);
+    const selectedIds = selectedImages.map(img => img.id);
+
+    // Remove all selected images
+    setImages(prev => prev.filter(img => !selectedIds.includes(img.id)));
+
+    toast.success(translate(`${selectedImages.length} image(s) deleted`));
+    logger.info(`Deleted ${selectedImages.length} selected images`);
+
+    setShowDeleteConfirmDialog(false);
+    setImageToDelete(null);
+  };
+
+  const setAsSelected = (imageId: string) =>
+    setAsSelectedUtil(imageId, images, setImages, initialImages, loadFamilyVersions);
+
+  const handleMicrophone = () =>
+    handleMicrophoneUtil(
+      isRecording,
+      mediaRecorderRef,
+      setIsRecording,
+      setIsTranscribing,
+      audioChunksRef,
+      lightboxOpen,
+      setLightboxPrompt,
+      setPrompt
+    );
+
+  const handleOptimizePrompt = () =>
+    handleOptimizePromptUtil(
+      lightboxOpen ? lightboxPrompt : prompt,
+      lightboxOpen,
+      setLightboxPrompt,
+      setPrompt,
+      setIsOptimizingPrompt
+    );
+
+  const handleVoiceTranscription = (transcribedText: string) => {
+    setPrompt(transcribedText);
+    toast.success(translate('Voice transcribed successfully!'));
+  };
+
+  const handlePresetSelect = (preset: PromptPreset) => {
+    setSelectedPreset(preset);
+    toast.success(`Preset "${preset.name}" activated as context`);
+  };
+
+  const handlePresetClear = () => {
+    setSelectedPreset(null);
+    toast.info(translate('Preset context cleared'));
+  };
+
+  const handleVoiceToImage = (transcribedText: string) =>
+    handleVoiceToImageUtil(
+      transcribedText,
+      user?.id,
+      selectedPreset,
+      selectedModel,
+      setPrompt,
+      setImages,
+      setPostTitle,
+      setPostDescription,
+      voicePopupRef,
+      logger
+    );
+
+  const handleAgentGeneration = () =>
+    handleAgentGenerationUtil(
+      prompt,
+      user?.id,
+      buildFullPrompt(selectedPreset, prompt),
+      selectedModel,
+      setIsAgentMode,
+      setIsGenerating,
+      setImages,
+      setPostTitle,
+      setPostDescription,
+      logger
+    );
+
+
+  const handlePublishToGallery = async () => {
+    await publishToGalleryUtil({
+      user: user,
+      generatedImage: typeof generatedImage === 'string' ? generatedImage : (generatedImage as any)?.src || null,
+      images: images,
+      lightboxOpen: lightboxOpen,
+      currentImageIndex: currentImageIndex,
+      postTitle: '',
+      postDescription: '',
+      prompt: prompt,
+      isOrgContext: false,
+      orgSlug: null,
+      onPublish: (url) => {
+        // No navigation needed for gallery publish, maybe just stay or go specific place?
+        // For now stay in wizard or close? Implementation plan said "Verify success message" so staying might be fine, but closing is better UX usually.
+        // Let's close.
+        onClose();
+        navigate('/'); // Or to gallery view if possible
+      }
+    }, setIsPublishing);
+  };
+
+  const handleAppendToPost = () => {
+    setShowPostPicker(true);
+  };
+
+  const handlePostSelected = async (postId: string) => {
+    setShowPostPicker(false);
+
+    // Switch to edit mode for this post
+    // This logic mimics CreationWizardPopup's handlePostSelected
+    try {
+      const toastId = toast.loading(translate('Loading post...'));
+
+      // Fetch full post via API (returns FeedPost with pictures)
+      const post = await fetchPostById(postId);
+
+      if (!post) throw new Error('Post not found');
+
+      // Transform existing pictures
+      const existingImages = (post.pictures || [])
+        .sort((a: any, b: any) => ((a.position || 0) - (b.position || 0)))
+        .map((p: any) => ({
+          id: p.id,
+          path: p.id,
+          src: p.image_url,
+          title: p.title,
+          description: p.description || '',
+          selected: false,
+          realDatabaseId: p.id,
+          type: p.type || 'image',
+          isGenerated: false
+        }));
+
+      // Merge current wizard images as new
+      const newImages = images.map(img => ({
+        ...img,
+        selected: true
+      }));
+
+      const combinedImages = [...existingImages, ...newImages];
+
+      setImages(combinedImages);
+      setPostTitle(post.title);
+      setPostDescription(post.description || '');
+
+      navigate('/wizard', {
+        state: {
+          mode: 'post',
+          editingPostId: postId,
+          initialImages: combinedImages,
+          postTitle: post.title,
+          postDescription: post.description,
+          postSettings: post.settings
+        },
+        replace: true
+      });
+
+      toast.dismiss(toastId);
+      toast.success(translate('Switched to post editing mode'));
+
+    } catch (err) {
+      console.error("Error loading post for append:", err);
+      toast.error(translate('Failed to load post'));
+    }
+  };
+
+
+
+  const executeQuickAction = (action: QuickAction) => {
+    const selectedImages = images.filter(img => img.selected);
+    if (selectedImages.length === 0) {
+      toast.error(translate('Please select at least one image for this action'));
+      return;
+    }
+    setPrompt(action.prompt);
+  };
+
+  const openEditActionsDialog = () => {
+    setEditingActions([...quickActions]);
+    setShowEditActionsDialog(true);
+  };
+
+  const addQuickAction = () => {
+    const newAction: QuickAction = {
+      id: `action_${Date.now()}`,
+      name: 'New Action',
+      prompt: '',
+      icon: '⭐'
+    };
+    setEditingActions([...editingActions, newAction]);
+  };
+
+  const updateQuickAction = (id: string, field: keyof QuickAction, value: string) => {
+    setEditingActions(editingActions.map(action =>
+      action.id === id ? { ...action, [field]: value } : action
+    ));
+  };
+
+  const deleteQuickAction = (id: string) => {
+    setEditingActions(editingActions.filter(action => action.id !== id));
+  };
+
+  const saveEditedActions = async () => {
+    // Validate
+    const invalid = editingActions.find(a => !a.name.trim() || !a.prompt.trim());
+    if (invalid) {
+      toast.error(translate('All actions must have a name and prompt'));
+      return;
+    }
+
+    if (!user?.id) {
+      toast.error(translate('User not authenticated'));
+      return;
+    }
+
+    await saveQuickActions(user.id, editingActions);
+    setQuickActions(editingActions);
+    setShowEditActionsDialog(false);
+  };
+
+  const handleLightboxPromptSubmit = async (promptText: string) => {
+    if (!lightboxOpen || currentImageIndex >= images.length) return;
+
+    // Set the prompt and get the current lightbox image for editing
+    setPrompt(promptText);
+
+    const targetImage = images[currentImageIndex];
+    if (targetImage) {
+
+      // Store current lightbox state
+      const wasLightboxOpen = lightboxOpen;
+
+      // Directly pass the target image to avoid state timing issues
+      await generateImageWithSpecificImage(promptText, targetImage);
+      setLightboxPrompt(""); // Clear the lightbox prompt
+
+      // Keep lightbox open if it was open during generation
+      if (wasLightboxOpen && !lightboxOpen) {
+        setLightboxOpen(true);
+      }
+    }
+  };
+
+  const openLightbox = (index: number) => {
+    setCurrentImageIndex(index);
+    setLightboxOpen(true);
+
+    // Set the parent ID for version creation when opening lightbox
+    const currentImage = images[index];
+    let parentId = null;
+
+    if (currentImage) {
+      // If this image has a parentForNewVersions (from version map), use that
+      if (currentImage.parentForNewVersions) {
+        parentId = currentImage.parentForNewVersions;
+      }
+      // If this is the initial image from a database post, use its real ID
+      else if (currentImage.realDatabaseId) {
+        parentId = currentImage.realDatabaseId;
+      }
+      // If this is a saved image (has UUID), use it as parent
+      else if (currentImage.id && currentImage.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)) {
+        parentId = currentImage.id;
+      }
+      // Otherwise, find the first non-generated image in the array
+      else {
+        const originalImage = images.find(img => !img.isGenerated && img.id && img.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
+        parentId = originalImage?.id || null;
+      }
+    }
+
+    setSelectedOriginalImageId(parentId);
+
+    // Pre-populate lightbox prompt with main prompt for quick publish context
+    // Only if lightbox prompt is empty to avoid overwriting user's edits
+    if (!lightboxPrompt.trim() && prompt.trim()) {
+      setLightboxPrompt(prompt);
+    }
+  };
+
+  // Auto-update lightbox when images change
+  useEffect(() => {
+    if (lightboxOpen && currentImageIndex >= images.length && images.length > 0) {
+      // If current index is out of bounds, go to the last image (newest)
+      const newIndex = images.length - 1;
+      setCurrentImageIndex(newIndex);
+    }
+  }, [images.length, lightboxOpen, currentImageIndex]);
+
+  const generateImageWithSpecificImage = async (promptText: string, targetImage: ImageFile) => {
+    if (!isRetryCallRef.current) { cancelRetry(); }
+    isRetryCallRef.current = false;
+    setIsGenerating(true);
+    setLastError(null);
+    try {
+
+      let result: { imageData: ArrayBuffer; text?: string } | null = null;
+
+      // Resolve correct API key for the selected provider
+      let apiKey: string | undefined = undefined;
+      if (user?.id) {
+        const secrets = await getUserSecrets(user.id);
+        if (secrets) {
+          const provider = selectedModel.split('/')[0]?.toLowerCase();
+          switch (provider) {
+            case 'aimlapi': apiKey = secrets.aimlapi_api_key; break;
+            case 'replicate': apiKey = secrets.replicate_api_key; break;
+            case 'bria': apiKey = secrets.bria_api_key; break;
+            default: apiKey = secrets.google_api_key; break;
+          }
+        }
+      }
+
+      // Edit the specific target image
+      if (targetImage.file) {
+        result = await editImage(
+          promptText,
+          [targetImage.file],
+          selectedModel,
+          apiKey,
+          aspectRatio,
+          resolution,
+          searchGrounding,
+          imageSearch
+        );
+      } else {
+        // Convert any image source (data URL or HTTP URL) to File for editing
+        try {
+          const response = await fetch(targetImage.src);
+          const blob = await response.blob();
+          const file = new File([blob], targetImage.title || 'image.png', {
+            type: blob.type || 'image/png'
+          });
+          result = await editImage(
+            promptText,
+            [file],
+            selectedModel,
+            apiKey,
+            aspectRatio,
+            resolution,
+            searchGrounding,
+            imageSearch
+          );
+        } catch (error) {
+          console.error('Error converting image:', error);
+          toast.error(translate('Failed to convert image for editing'));
+          return;
+        }
+      }
+
+      if (result) {
+        // Convert ArrayBuffer to base64 data URL  
+        const uint8Array = new Uint8Array(result.imageData);
+        const blob = new Blob([uint8Array], { type: 'image/png' });
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          const dataUrl = reader.result as string;
+
+          // Add generated image to the images list and auto-select it
+          const newImage: ImageFile = {
+            id: `generated-${Date.now()}`,
+            src: dataUrl,
+            title: promptText.substring(0, 50) + (promptText.length > 50 ? '...' : ''),
+            selected: true,
+            isGenerated: true,
+            aiText: result.text, // Store AI description
+            parentForNewVersions: targetImage.parentForNewVersions || targetImage.realDatabaseId || (targetImage.id && /^[0-9a-f]{8}-/.test(targetImage.id) ? targetImage.id : undefined)
+          };
+          const newIndex = images.length; // Calculate the new index BEFORE updating state
+
+          // Deselect all other images and add the new one as selected
+          setImages(prev => {
+            const updated = [...prev.map(img => ({ ...img, selected: false })), newImage];
+
+            // If lightbox is open, update to show the new image immediately after state update
+            if (lightboxOpen) {
+              // Use setTimeout to ensure React has processed the state update
+              setTimeout(() => {
+                setCurrentImageIndex(newIndex);
+              }, 50); // Reduced timeout
+            }
+
+            return updated;
+          });
+        };
+
+        reader.readAsDataURL(blob);
+      }
+    } catch (error: any) {
+      console.error('Error generating image:', error);
+      const errMsg = error?.message || String(error);
+      // Extract meaningful message from GoogleGenerativeAI errors
+      // Pattern: "[GoogleGenerativeAI Error]: Error fetching from <url>: [503 ] Actual message"
+      const httpMatch = errMsg.match(/\[\d{3}\s*\]\s*(.+)/s);
+      const userMessage = httpMatch ? httpMatch[1].trim() : errMsg.replace(/\[GoogleGenerativeAI Error\][:\s]*/i, '').trim();
+      setLastError(userMessage || 'Failed to generate image');
+      // Auto-retry for "high demand" / rate-limit errors
+      if (userMessage.toLowerCase().includes('later')) {
+        scheduleRetry(() => generateImageWithSpecificImage(promptText, targetImage), userMessage);
+      } else {
+        toast.error(userMessage || translate('Failed to generate image'));
+      }
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const generateImageSplit = async () => {
+    await generateImageSplitUtil(
+      prompt,
+      images,
+      selectedModel,
+      abortControllerRef,
+      setIsGenerating,
+      setImages,
+      async (promptText: string) => {
+        if (user?.id) {
+          await addToPromptHistory(user.id, promptText, setPromptHistory, setHistoryIndex);
+        }
+      },
+      logger
+    );
+  };
+
+  const generateImage = async () => {
+    const fullPrompt = buildFullPrompt(selectedPreset, prompt);
+
+    if (!fullPrompt.trim()) {
+      toast.error(translate('Please enter a prompt'));
+      return;
+    }
+
+    // Add to history before generating
+    if (prompt.trim() && user?.id) {
+      await addToPromptHistory(user.id, prompt.trim(), setPromptHistory, setHistoryIndex);
+    }
+
+    // Create new abort controller
+    abortControllerRef.current = new AbortController();
+
+    // Clear retry state only for manual triggers (not auto-retries)
+    if (!isRetryCallRef.current) { cancelRetry(); }
+    isRetryCallRef.current = false;
+    setLastError(null);
+    setIsGenerating(true);
+    logger.info(`Starting image generation with prompt: "${fullPrompt.substring(0, 50)}..."`);
+    // Create placeholder image with loading state
+    const placeholderId = `placeholder-${Date.now()}`;
+    const placeholderImage: ImageFile = {
+      id: placeholderId,
+      src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', // Transparent pixel — spinner overlay provides visual
+      title: 'Generating...',
+      selected: false,
+      isGenerated: false,
+    };
+    // Remember which images were selected before we deselect for the placeholder
+    const previouslySelectedIds = images.filter(img => img.selected).map(img => img.id);
+    setImages(prev => [...prev.map(img => ({ ...img, selected: false })), placeholderImage]);
+
+    try {
+      // Check if aborted
+      if (abortControllerRef.current.signal.aborted) {
+        // Remove placeholder on abort
+        setImages(prev => prev.filter(img => img.id !== placeholderId));
+        return;
+      }
+
+      // Get API Key – resolve the correct key based on the selected model's provider
+      let apiKey: string | undefined = undefined;
+      if (user?.id) {
+        const secrets = await getUserSecrets(user.id);
+        if (secrets) {
+          const provider = selectedModel.split('/')[0]?.toLowerCase();
+          switch (provider) {
+            case 'aimlapi': apiKey = secrets.aimlapi_api_key; break;
+            case 'replicate': apiKey = secrets.replicate_api_key; break;
+            case 'bria': apiKey = secrets.bria_api_key; break;
+            default: apiKey = secrets.google_api_key; break;
+          }
+        }
+      }
+
+
+      const selectedImages = images.filter(img => img.selected);
+
+      let result: { imageData: ArrayBuffer; text?: string } | null = null;
+
+      if (selectedImages.length > 0) {
+        // Edit existing images - ensure we have File objects for ALL selected images
+        const files = selectedImages
+          .map(img => img.file)
+          .filter((file): file is File => file !== undefined);
+
+        // Check if ALL selected images have File objects
+        if (files.length === selectedImages.length) {
+          // All images have files, use them directly
+          result = await editImage(
+            fullPrompt,
+            files,
+            selectedModel,
+            apiKey,
+            aspectRatio,
+            resolution,
+            searchGrounding,
+            imageSearch
+          );
+        } else {
+          // Some images don't have File objects, convert all from src to ensure consistency
+          const convertedFiles: File[] = [];
+          for (const img of selectedImages) {
+            try {
+              const response = await fetch(img.src);
+              const blob = await response.blob();
+              const file = new File([blob], img.title || 'image.png', {
+                type: blob.type || 'image/png'
+              });
+              convertedFiles.push(file);
+            } catch (error) {
+              console.error('Error converting image:', img.title, error);
+            }
+          }
+
+          if (convertedFiles.length > 0) {
+            result = await editImage(
+              fullPrompt,
+              convertedFiles,
+              selectedModel,
+              apiKey,
+              aspectRatio,
+              resolution,
+              searchGrounding,
+              imageSearch
+            );
+          } else {
+            toast.error(translate('Failed to convert selected images for editing'));
+            return;
+          }
+        }
+      } else {
+        // Generate new image
+        result = await createImage(
+          fullPrompt,
+          selectedModel,
+          apiKey,
+          aspectRatio,
+          resolution,
+          searchGrounding,
+          imageSearch
+        );
+      }
+
+      if (result) {
+        logger.success('Image generated successfully');
+        // Convert ArrayBuffer to base64 data URL  
+        const uint8Array = new Uint8Array(result.imageData);
+        const blob = new Blob([uint8Array], { type: 'image/png' });
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          const dataUrl = reader.result as string;
+          setGeneratedImage(dataUrl);
+
+          // Determine parent ID inheritance from selected image (if any)
+          let inheritedParentId: string | undefined;
+          if (selectedImages.length === 1) {
+            // If selected image is a Real DB image, it becomes the parent.
+            // If it's a generated image that has a parent pointer, we inherit that (sibling/child logic).
+            // However, strictly speaking, if we edit 'A', 'B' is a child of 'A'.
+            // But if 'A' is unsaved, we can't link to it. We fall back to 'A's parent if available.
+            inheritedParentId = selectedImages[0].realDatabaseId || selectedImages[0].parentForNewVersions;
+          }
+
+          // Add generated image to the images list and auto-select it
+          const newImage: ImageFile = {
+            id: `generated-${Date.now()}`,
+            src: dataUrl,
+            title: (selectedPreset ? `[${selectedPreset.name}] ` : '') + prompt.substring(0, 40) + (prompt.length > 40 ? '...' : ''),
+            selected: true,
+            isGenerated: true,
+            aiText: result.text, // Store AI description
+            parentForNewVersions: inheritedParentId // Propagate parent ID
+          };
+          logger.debug(`Added new image: ${newImage.title}`);
+          const newIndex = images.length; // Calculate the new index BEFORE updating state
+
+          // Replace placeholder with actual image
+          setImages(prev => {
+            const withoutPlaceholder = prev.filter(img => img.id !== placeholderId);
+            const updated = [...withoutPlaceholder.map(img => ({ ...img, selected: false })), newImage];
+
+            // If lightbox is open, update to show the new image immediately after state update
+            if (lightboxOpen) {
+              // Use setTimeout to ensure React has processed the state update
+              setTimeout(() => {
+                setCurrentImageIndex(newIndex);
+              }, 50); // Reduced timeout
+            }
+
+            return updated;
+          });
+        };
+
+        reader.readAsDataURL(blob);
+      }
+    } catch (error: any) {
+      console.error('Error generating image:', error);
+      const errMsg = error?.message || String(error);
+      logger.error(`Failed to generate image: ${errMsg}`);
+      // Extract meaningful message from GoogleGenerativeAI errors
+      // Pattern: "[GoogleGenerativeAI Error]: Error fetching from <url>: [503 ] Actual message"
+      const httpMatch = errMsg.match(/\[\d{3}\s*\]\s*(.+)/s);
+      const userMessage = httpMatch ? httpMatch[1].trim() : errMsg.replace(/\[GoogleGenerativeAI Error\][:\s]*/i, '').trim();
+      setLastError(userMessage || 'Failed to generate image');
+      // Auto-retry for "high demand" / rate-limit errors
+      if (userMessage.toLowerCase().includes('later')) {
+        scheduleRetry(() => generateImage(), userMessage);
+      } else {
+        toast.error(userMessage || translate('Failed to generate image'));
+      }
+      // Remove placeholder on error and restore previous selection
+      setImages(prev => prev
+        .filter(img => img.id !== placeholderId)
+        .map(img => ({ ...img, selected: previouslySelectedIds.includes(img.id) }))
+      );
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const publishImage = () =>
+    publishImageUtil(
+      {
+        user,
+        generatedImage,
+        images,
+        lightboxOpen,
+        currentImageIndex,
+        postTitle,
+        prompt,
+        isOrgContext: false,
+        orgSlug: null,
+        onPublish,
+      },
+      setIsPublishing
+    );
+
+  // Quick publish function that uses prompt as description
+  const quickPublishAsNew = () =>
+    quickPublishAsNewUtil(
+      {
+        user,
+        generatedImage,
+        images,
+        lightboxOpen,
+        currentImageIndex,
+        postTitle,
+        prompt,
+        isOrgContext: false,
+        orgSlug: null,
+        onPublish,
+      },
+      setIsPublishing
+    );
+
+  const handleAddToPost = async (imageSrc: string, title: string, description?: string) => {
+    if (!currentEditingPostId) {
+      toast.error("No active post to add to");
+      return;
+    }
+
+    if (!user) {
+      toast.error(translate('User not authenticated'));
+      return;
+    }
+
+    setIsPublishing(true);
+    try {
+      // Fetch the image
+      const response = await fetch(imageSrc);
+      const blob = await response.blob();
+
+      await wizardDb.publishImageToPost({
+        userId: user.id,
+        blob,
+        title: title || prompt, // Fallback to prompt if no title
+        description: description,
+        postId: currentEditingPostId,
+        isOrgContext: false,
+        orgSlug: null,
+        collectionIds: []
+      });
+      // Navigate back success
+      navigate(`/post/${currentEditingPostId}`);
+    } catch (error: any) {
+      console.error('Error adding to post:', error);
+
+      // Reset loading state
+      if (currentImageIndex !== -1) {
+        setImages(prev => {
+          const newImgs = [...prev];
+          // Only reset if it still exists at that index (simple check)
+          if (newImgs[currentImageIndex]) {
+            newImgs[currentImageIndex] = { ...newImgs[currentImageIndex], isAddingToPost: false };
+          }
+          return newImgs;
+        });
+      }
+
+      if (error.code === '23503') {
+        toast.error(translate('Could not add to this post. The post might have been deleted or the link is invalid.'));
+      } else {
+        toast.error(translate('Failed to add image to post'));
+      }
+    }
+  };
+
+  const handleLightboxPublish = async (option: 'overwrite' | 'new' | 'version' | 'add-to-post', imageUrl: string, title: string, description?: string, parentId?: string, collectionIds?: string[]) => {
+    if (!user) {
+      toast.error(translate('User not authenticated'));
+      return;
+    }
+
+    if (currentImageIndex >= images.length) {
+      toast.error(translate('No image selected'));
+      return;
+    }
+
+    const currentImage = images[currentImageIndex];
+    if (!currentImage) {
+      toast.error(translate('No image available to publish'));
+      return;
+    }
+
+    // Handle Add to Post
+    if (option === 'add-to-post' && currentEditingPostId) {
+      await handleAddToPost(currentImage.src, title, description);
+      setShowLightboxPublishDialog(false);
+      return;
+    }
+
+    setIsPublishing(true);
+    try {
+      // Convert image to blob for upload
+      const response = await fetch(currentImage.src);
+      const blob = await response.blob();
+
+      if (option === 'overwrite') {
+        toast.info(translate('Overwrite not supported in wizard, creating new image instead'));
+        option = 'new';
+      }
+
+      if (option === 'new') {
+        await wizardDb.publishImageAsNew({
+          userId: user.id,
+          blob,
+          title,
+          description,
+          isOrgContext: false,
+          orgSlug: null,
+          collectionIds,
+        });
+      } else if (option === 'version' && parentId) {
+        await wizardDb.publishImageAsVersion({
+          userId: user.id,
+          blob,
+          title,
+          description,
+          parentId,
+          isOrgContext: false,
+          orgSlug: null,
+          collectionIds,
+        });
+      } else if (option === 'version' && !parentId) {
+        toast.info(translate('No parent image found, creating as new post instead'));
+        // Recursive call with 'new'
+        // FIX: call self but ensure we don't loop if logic is wrong. 
+        // Here it changes option to 'new', so it should be fine.
+        // We need to re-call handleLightboxPublish logic essentially.
+        // For simplicity, just run the new logic here:
+        await wizardDb.publishImageAsNew({
+          userId: user.id,
+          blob,
+          title,
+          description,
+          isOrgContext: false,
+          orgSlug: null,
+          collectionIds,
+        });
+      }
+
+      setShowLightboxPublishDialog(false);
+      // Only navigate/close if NOT "Add to Post" (which handled navigation)
+      // For standard publish, we usually close wizard or call onPublish prop
+      onPublish?.(currentImage.src, lightboxPrompt);
+    } catch (error) {
+      console.error('Error publishing image:', error);
+      toast.error(translate('Failed to publish image'));
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  const handleEditImage = (index: number) => {
+    const img = images[index];
+    if (img) {
+      setEditingImage({ url: img.src, id: img.realDatabaseId || img.id });
+    }
+  };
+
+  const handleConfigureImage = (index: number) => {
+    const img = images[index];
+    if (img && img.realDatabaseId) {
+      setConfiguringImageId({
+        id: img.realDatabaseId,
+        title: img.title,
+        description: img.aiText || null,
+        visible: true // Default
+      });
+    } else {
+      toast.error(translate("Please save the image first to configure settings"));
+    }
+  };
+
+  // Prepare context value
+  const contextValue = {
+    // User
+    userId: user?.id,
+
+    // Images
+    images,
+    setImages,
+    availableImages,
+    generatedImage,
+
+    // Generation state
+    isGenerating,
+    isAgentMode,
+    isSplitMode,
+    setIsSplitMode,
+    isOptimizingPrompt,
+
+    // Form state
+    prompt,
+    setPrompt,
+    postTitle,
+    setPostTitle,
+    selectedModel,
+    setSelectedModel,
+    aspectRatio,
+    setAspectRatio,
+    resolution,
+    setResolution,
+    searchGrounding,
+    setSearchGrounding,
+
+    // Settings
+    selectedPreset,
+    promptPresets,
+    loadingPresets,
+    workflows,
+    loadingWorkflows,
+    promptTemplates,
+    quickActions,
+
+    // Prompt history
+    promptHistory,
+    historyIndex,
+    setHistoryIndex,
+
+    // Voice
+    isRecording,
+    isTranscribing,
+
+    // UI state
+    isPublishing,
+    dragIn,
+    setDragIn,
+    loadingImages,
+    dragLeaveTimeoutRef,
+
+    // Actions - Image operations
+    toggleImageSelection,
+    openLightbox,
+    setAsSelected,
+    removeImage,
+    deleteSelectedImages,
+
+    // Actions - Generation
+    generateImage,
+    generateImageSplit,
+    handleAgentGeneration,
+    handleOptimizePrompt,
+    handleMicrophone,
+
+    // Actions - Settings
+    handlePresetSelect,
+    handlePresetClear,
+    savePreset: async (preset: Omit<PromptPreset, 'id' | 'createdAt'>) => {
+      if (user?.id) await savePromptPreset(user.id, preset, setPromptPresets);
+    },
+    updatePreset: async (id: string, preset: Omit<PromptPreset, 'id' | 'createdAt'>) => {
+      if (user?.id) await updatePromptPreset(user.id, id, preset, setPromptPresets);
+    },
+    deletePreset: async (id: string) => {
+      if (user?.id) await deletePromptPreset(user.id, id, setPromptPresets);
+    },
+
+    saveWorkflow: async (workflow: Omit<Workflow, 'id' | 'createdAt'>) => {
+      if (user?.id) await saveWorkflow(user.id, workflow, setWorkflows);
+    },
+    updateWorkflow: async (id: string, workflow: Omit<Workflow, 'id' | 'createdAt'>) => {
+      if (user?.id) await updateWorkflow(user.id, id, workflow, setWorkflows);
+    },
+    deleteWorkflow: async (id: string) => {
+      if (user?.id) await deleteWorkflow(user.id, id, setWorkflows);
+    },
+    executeWorkflow,
+
+    applyTemplate,
+    deleteTemplate,
+    handleSaveCurrentPromptAsTemplate,
+
+    executeQuickAction,
+    openEditActionsDialog,
+
+    navigateHistory: (direction: 'up' | 'down') =>
+      navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setPrompt),
+
+    // Actions - Publishing
+    quickPublishAsNew,
+    publishImage,
+
+    // Actions - Misc
+    setShowVoicePopup,
+
+    // Logger
+    logger,
+
+    // Add To Post State
+    currentEditingPostId,
+    handleAddToPost: (imageSrc: string) => handleAddToPost(imageSrc, postTitle || prompt, postDescription)
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <WizardProvider value={contextValue}>
+      {/* Editor Overlay */}
+      {editingImage && (
+        <div className="fixed inset-0 z-[60] bg-background">
+          <ImageEditor
+            imageUrl={editingImage.url}
+            pictureId={editingImage.id}
+            onClose={() => setEditingImage(null)}
+            onSave={(newUrl) => {
+              setImages(prev => prev.map(img =>
+                (img.id === editingImage.id || img.realDatabaseId === editingImage.id)
+                  ? { ...img, src: newUrl, isGenerated: false }
+                  : img
+              ));
+              setEditingImage(null);
+            }}
+          />
+        </div>
+      )}
+
+      {/* Settings Modal */}
+      {configuringImageId && (
+        <EditImageModal
+          open={!!configuringImageId}
+          onOpenChange={(open) => !open && setConfiguringImageId(null)}
+          pictureId={configuringImageId.id}
+          currentTitle={configuringImageId.title}
+          currentDescription={configuringImageId.description}
+          currentVisible={configuringImageId.visible}
+          imageUrl={images.find(i => i.realDatabaseId === configuringImageId.id)?.src}
+          onUpdateSuccess={() => {
+            setConfiguringImageId(null);
+            toast.success(translate("Image settings updated"));
+          }}
+        />
+      )}
+
+      <div className="space-y-4 p-2 md:space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 md:gap-3">
+            <Button variant="ghost" size="sm" onClick={onClose} className="h-10 w-10 md:h-9 md:w-9 p-0 touch-manipulation">
+              <ArrowLeft className="h-5 w-5 md:h-4 md:w-4" />
+            </Button>
+            <div className="flex items-center gap-2">
+              <Wand2 className="h-5 w-5 md:h-6 md:w-6 text-primary" />
+              <h1 className="text-xl md:text-2xl font-bold">
+                {mode === 'post' ? <T>Post Wizard</T> : <T>AI Image Wizard</T>}
+              </h1>
+            </div>
+          </div>
+
+          {/* Unified Lightbox Component */}
+          <ImageLightbox
+            isOpen={lightboxOpen && images.length > 0}
+            onClose={() => setLightboxOpen(false)}
+            imageUrl={images[currentImageIndex]?.src || ''}
+            imageTitle={images[currentImageIndex]?.title || 'Generated Image'}
+            originalImageId={selectedOriginalImageId || undefined}
+            onPromptSubmit={(promptText) => handleLightboxPromptSubmit(promptText)}
+            onPublish={handleLightboxPublish}
+            isGenerating={isGenerating}
+            isPublishing={isPublishing}
+            showPrompt={true}
+            showPublish={images[currentImageIndex]?.isGenerated}
+            generatedImageUrl={undefined}
+            currentIndex={currentImageIndex}
+            totalCount={images.length}
+            onNavigate={(direction) => {
+              const newIndex = direction === 'next' ? currentImageIndex + 1 : currentImageIndex - 1;
+              if (newIndex >= 0 && newIndex < images.length) {
+                setCurrentImageIndex(newIndex);
+              }
+            }}
+            // Wizard features
+            showWizardFeatures={true}
+            promptTemplates={promptTemplates}
+            onApplyTemplate={(template) => setLightboxPrompt(template)}
+            onSaveTemplate={handleSaveCurrentPromptAsTemplate}
+            onDeleteTemplate={deleteTemplate}
+            onOptimizePrompt={handleOptimizePrompt}
+            isOptimizing={isOptimizingPrompt}
+            onMicrophoneToggle={handleMicrophone}
+            isRecording={isRecording}
+            isTranscribing={isTranscribing}
+            showQuickPublish={images[currentImageIndex]?.isGenerated && lightboxPrompt.trim().length > 0}
+            onQuickPublish={quickPublishAsNew}
+            prompt={lightboxPrompt}
+            onPromptChange={setLightboxPrompt}
+            // Prompt history
+            promptHistory={promptHistory}
+            historyIndex={historyIndex}
+            onNavigateHistory={(direction) => navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setLightboxPrompt)}
+            onManualPromptEdit={() => setHistoryIndex(-1)}
+          />
+        </div>
+
+        {/* Logger Panel - Collapsible */}
+        {isLoggerVisible && (
+          <div className="mb-4 md:mb-6">
+            <div className="h-48 md:h-64">
+              <LogViewer onClose={() => setLoggerVisible(false)} />
+            </div>
+          </div>
+        )}
+
+        <div className={mode === 'post' ? "h-[calc(100vh-140px)]" : "grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6"}>
+          {mode === 'post' ? (
+            <PostComposer
+              images={images}
+              setImages={setImages}
+              onRemoveImage={removeImage}
+              onFileUpload={(event) => handleFileUpload(event, setImages, user)}
+              dropZoneRef={dropZoneRef}
+              isDragging={dragIn}
+              onDragEnter={(e) => handleDragEnter(e, dragLeaveTimeoutRef, setDragIn)}
+              onDragOver={(e) => handleDragOver(e, dragIn, setDragIn)}
+              onDragLeave={(e) => handleDragLeave(e, dragLeaveTimeoutRef, setDragIn)}
+              onDrop={(e) => handleDrop(e, dragLeaveTimeoutRef, setDragIn, setImages, user)}
+              postTitle={postTitle}
+              setPostTitle={setPostTitle}
+              postDescription={postDescription}
+              setPostDescription={setPostDescription}
+              isEditing={!!currentEditingPostId}
+              postId={currentEditingPostId}
+              settings={settings}
+              setSettings={setSettings}
+              onPublish={() => {
+                // Auto-inject link into settings if present
+                const externalPage = images.find(img => img.type === 'page-external');
+                const publishSettings = { ...settings };
+
+                if (externalPage && externalPage.path && !publishSettings.link) {
+                  publishSettings.link = externalPage.path;
+                }
+
+                publishImageUtil({
+                  user: user,
+                  generatedImage: typeof generatedImage === 'string' ? generatedImage : (generatedImage as any)?.src || null,
+                  images: images,
+                  lightboxOpen: lightboxOpen,
+                  currentImageIndex: currentImageIndex,
+                  postTitle: postTitle,
+                  postDescription: postDescription,
+                  settings: publishSettings, // Pass enriched settings
+                  prompt: prompt,
+                  isOrgContext: false,
+                  orgSlug: null,
+                  publishAll: mode === 'post',
+                  editingPostId: currentEditingPostId,
+                  onPublish: (url, postId) => {
+                    onClose();
+                    // If we have a postId (passed as 2nd arg for posts), navigate to it
+                    if (postId && (mode === 'post' || currentEditingPostId)) {
+                      navigate(`/post/${postId}`);
+                    } else {
+                      navigate('/');
+                    }
+                  }
+                }, setIsPublishing);
+              }}
+              onPublishToGallery={handlePublishToGallery}
+              onAppendToPost={handleAppendToPost}
+              isPublishing={isPublishing}
+            />
+          ) : (
+            <>
+              {/* Left Panel - Controls */}
+              <WizardSidebar
+                selectedModel={selectedModel}
+                onModelChange={setSelectedModel}
+                onLoadModel={wizardDb.loadWizardModel}
+                onSaveModel={wizardDb.saveWizardModel}
+                aspectRatio={aspectRatio}
+                onAspectRatioChange={setAspectRatio}
+                resolution={resolution}
+                onResolutionChange={setResolution}
+                searchGrounding={searchGrounding}
+                onSearchGroundingChange={setSearchGrounding}
+                imageSearch={imageSearch}
+                onImageSearchChange={setImageSearch}
+                selectedPreset={selectedPreset}
+                presets={promptPresets}
+                loadingPresets={loadingPresets}
+                onPresetSelect={handlePresetSelect}
+                onPresetClear={handlePresetClear}
+                onSavePreset={(preset) => user?.id && savePromptPreset(user.id, preset, setPromptPresets)}
+                onUpdatePreset={(id, preset) => user?.id && updatePromptPreset(user.id, id, preset, setPromptPresets)}
+                onDeletePreset={(id) => user?.id && deletePromptPreset(user.id, id, setPromptPresets)}
+                workflows={workflows}
+                loadingWorkflows={loadingWorkflows}
+                onSaveWorkflow={(workflow) => user?.id && saveWorkflow(user.id, workflow, setWorkflows)}
+                onUpdateWorkflow={(id, workflow) => user?.id && updateWorkflow(user.id, id, workflow, setWorkflows)}
+                onDeleteWorkflow={(id) => user?.id && deleteWorkflow(user.id, id, setWorkflows)}
+                onExecuteWorkflow={executeWorkflow}
+                isGenerating={isGenerating}
+                isAgentMode={isAgentMode}
+                isSplitMode={isSplitMode}
+                prompt={prompt}
+                onGenerate={generateImage}
+                onGenerateSplit={generateImageSplit}
+                onAgentGenerate={handleAgentGeneration}
+                onVoiceGenerate={() => setShowVoicePopup(true)}
+                onAbort={() => { cancelRetry(); abortGeneration(abortControllerRef, setIsGenerating, setIsAgentMode, setImages, logger); }}
+                images={images}
+                generatedImage={generatedImage}
+                postTitle={postTitle}
+                onPostTitleChange={setPostTitle}
+                isPublishing={isPublishing}
+                onQuickPublish={quickPublishAsNew}
+                onPublish={() => setShowLightboxPublishDialog(true)}
+                onPublishToGallery={handlePublishToGallery}
+                onAppendToPost={handleAppendToPost}
+                onAddToPost={() => {
+                  const currentImage = images[images.length - 1]; // Default to most recent for sidebar action
+                  if (currentImage) handleAddToPost(currentImage.src, postTitle || prompt, postDescription)
+                }}
+                editingPostId={currentEditingPostId}
+                lastError={lastError}
+                retryInfo={retryInfo}
+                onDismissError={() => { cancelRetry(); setLastError(null); }}
+              >
+                <Prompt
+                  prompt={prompt}
+                  onPromptChange={setPrompt}
+                  isSplitMode={isSplitMode}
+                  onSplitModeChange={setIsSplitMode}
+                  selectedPreset={selectedPreset}
+                  templates={promptTemplates}
+                  onApplyTemplate={applyTemplate}
+                  onSaveTemplate={handleSaveCurrentPromptAsTemplate}
+                  onDeleteTemplate={deleteTemplate}
+                  onOptimizePrompt={handleOptimizePrompt}
+                  isOptimizing={isOptimizingPrompt}
+                  onMicrophoneToggle={handleMicrophone}
+                  isRecording={isRecording}
+                  isTranscribing={isTranscribing}
+                  promptHistory={promptHistory}
+                  historyIndex={historyIndex}
+                  onNavigateHistory={(direction) => navigatePromptHistory(direction, promptHistory, historyIndex, setHistoryIndex, setPrompt)}
+                  onManualEdit={() => setHistoryIndex(-1)}
+                  isGenerating={isGenerating}
+                  onGenerate={generateImage}
+                  onImagePaste={(image) => setImages(prev => [...prev, image])}
+                />
+              </WizardSidebar>
+
+              {/* Right Panel - Images */}
+              <ImageGalleryPanel
+                images={images}
+                onImageClick={toggleImageSelection}
+                onImageDoubleClick={openLightbox}
+                onFileUpload={(event) => handleFileUpload(event, setImages, user)}
+                onDeleteSelected={deleteSelectedImages}
+                onDownload={handleDownloadImage}
+                onSetAsSelected={setAsSelected}
+                onSaveAsVersion={(img, idx) => {
+                  setCurrentImageIndex(idx);
+                  const currentImage = images[idx];
+                  let parentId = null;
+
+                  if (currentImage.parentForNewVersions) {
+                    parentId = currentImage.parentForNewVersions;
+                  } else if (currentImage.realDatabaseId) {
+                    parentId = currentImage.realDatabaseId;
+                  } else {
+                    const originalImage = images.find(img => !img.isGenerated && img.id && img.id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
+                    parentId = originalImage?.id || null;
+                  }
+
+                  setSelectedOriginalImageId(parentId);
+                  setShowLightboxPublishDialog(true);
+                }}
+                onEdit={handleEditImage}
+                onRemove={removeImage}
+                availableImages={availableImages}
+                loadingImages={loadingImages}
+                onGalleryImageSelect={(imageId, isMultiSelect) => toggleImageSelection(imageId, isMultiSelect, true)}
+                quickActions={quickActions}
+                onExecuteAction={executeQuickAction}
+                onEditActions={openEditActionsDialog}
+                onSettings={handleConfigureImage}
+                isGenerating={isGenerating}
+                dragIn={dragIn}
+                onDragEnter={(e) => handleDragEnter(e, dragLeaveTimeoutRef, setDragIn)}
+                onDragOver={(e) => handleDragOver(e, dragIn, setDragIn)}
+                onDragLeave={(e) => handleDragLeave(e, dragLeaveTimeoutRef, setDragIn)}
+                onDrop={(e) => handleDrop(e, dragLeaveTimeoutRef, setDragIn, setImages, user)}
+                dropZoneRef={dropZoneRef}
+                onAddToPost={(image) => handleAddToPost(image.src, postTitle || prompt, postDescription)}
+                editingPostId={currentEditingPostId}
+              />
+            </>
+          )}
+        </div>
+
+        <Dialog open={showPostPicker} onOpenChange={setShowPostPicker}>
+          <DialogContent className="sm:max-w-[800px] h-[80vh] flex flex-col">
+            <DialogHeader>
+              <DialogTitle><T>Select a Post to Append To</T></DialogTitle>
+              <DialogDescription>
+                <T>Choose one of your existing posts to add these images to.</T>
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex-1 overflow-hidden min-h-0">
+              <PostPicker onSelect={handlePostSelected} />
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        {/* Lightbox Publish Dialog */}
+        {/* Delete Confirmation Dialog */}
+        <AlertDialog open={showDeleteConfirmDialog} onOpenChange={setShowDeleteConfirmDialog}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {imageToDelete?.startsWith('bulk:') ? (
+                  <T>Delete Multiple Images</T>
+                ) : (
+                  <T>Delete Image Version</T>
+                )}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {imageToDelete?.startsWith('bulk:') ? (
+                  <>
+                    <T>Are you sure you want to delete {imageToDelete.split(':')[1]} selected image(s)? This action cannot be undone.</T>
+                  </>
+                ) : (
+                  <T>Are you sure you want to delete this image version? This action cannot be undone and will permanently remove the image from your account.</T>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => setShowDeleteConfirmDialog(false)}>
+                <T>Cancel</T>
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={imageToDelete?.startsWith('bulk:') ? confirmBulkDelete : confirmDeleteImage}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                <T>Delete</T>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        <PublishDialog
+          isOpen={showLightboxPublishDialog}
+          onClose={() => setShowLightboxPublishDialog(false)}
+          onPublish={(option, title, description, parentId, collectionIds) => {
+            const currentImage = images[currentImageIndex];
+            if (currentImage) {
+              // Now accepts 'add-to-post' as option
+              handleLightboxPublish(option as any, currentImage.src, title || '', description, parentId, collectionIds);
+            }
+          }}
+          originalTitle={images[currentImageIndex]?.title || 'Generated Image'}
+          originalImageId={selectedOriginalImageId || (originalImageId && originalImageId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i) ? originalImageId : undefined)}
+          isPublishing={isPublishing}
+          editingPostId={currentEditingPostId} // Pass prop
+        />
+
+        {/* Save Template Dialog */}
+        <Dialog open={showSaveTemplateDialog} onOpenChange={setShowSaveTemplateDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle><T>Save Prompt Template</T></DialogTitle>
+              <DialogDescription>
+                <T>Give your prompt template a name to save it for later use.</T>
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium"><T>Template Name</T></label>
+                <Input
+                  value={newTemplateName}
+                  onChange={(e) => setNewTemplateName(e.target.value)}
+                  placeholder={translate("e.g. Cyberpunk Portrait")}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      confirmSaveTemplate();
+                    }
+                  }}
+                  autoFocus
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-muted-foreground"><T>Prompt Preview</T></label>
+                <div className="text-sm p-3 bg-muted rounded-md max-h-32 overflow-y-auto">
+                  {lightboxOpen ? lightboxPrompt : prompt}
+                </div>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowSaveTemplateDialog(false)}>
+                <T>Cancel</T>
+              </Button>
+              <Button onClick={confirmSaveTemplate} disabled={!newTemplateName.trim()}>
+                <Save className="h-4 w-4 mr-2" />
+                <T>Save Template</T>
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Voice Recording Popup */}
+        <VoiceRecordingPopup
+          ref={voicePopupRef}
+          isOpen={showVoicePopup}
+          onClose={() => setShowVoicePopup(false)}
+          onTranscriptionComplete={handleVoiceTranscription}
+          onGenerateImage={handleVoiceToImage}
+          showToolCalls={true}
+        />
+
+        {/* Edit Quick Actions Dialog */}
+        <Dialog open={showEditActionsDialog} onOpenChange={setShowEditActionsDialog}>
+          <DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle><T>Edit Quick Actions</T></DialogTitle>
+              <DialogDescription>
+                <T>Customize the quick actions that appear above your images. Add, edit, or remove actions.</T>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-3 py-4">
+              {editingActions.map((action, index) => (
+                <div key={action.id} className="flex gap-2 items-start p-3 bg-muted/50 rounded-lg border">
+                  <Input
+                    placeholder="Icon (emoji)"
+                    value={action.icon}
+                    onChange={(e) => updateQuickAction(action.id, 'icon', e.target.value)}
+                    className="w-16 text-center"
+                    maxLength={2}
+                  />
+                  <Input
+                    placeholder="Name"
+                    value={action.name}
+                    onChange={(e) => updateQuickAction(action.id, 'name', e.target.value)}
+                    className="flex-1"
+                    maxLength={30}
+                  />
+                  <Input
+                    placeholder="Prompt"
+                    value={action.prompt}
+                    onChange={(e) => updateQuickAction(action.id, 'prompt', e.target.value)}
+                    className="flex-[2]"
+                    maxLength={200}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => deleteQuickAction(action.id)}
+                    className="h-9 w-9 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
+                    title="Delete action"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={addQuickAction}
+                className="w-full"
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                <T>Add Quick Action</T>
+              </Button>
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  setShowEditActionsDialog(false);
+                  setEditingActions([]);
+                }}
+              >
+                <T>Cancel</T>
+              </Button>
+              <Button
+                type="button"
+                onClick={() => {
+                  setEditingActions(DEFAULT_QUICK_ACTIONS);
+                }}
+                variant="secondary"
+              >
+                <T>Reset to Defaults</T>
+              </Button>
+              <Button
+                type="button"
+                onClick={saveEditedActions}
+              >
+                <Save className="w-4 h-4 mr-2" />
+                <T>Save Actions</T>
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+      </div>
+    </WizardProvider >
+  );
+};
+
+export default ImageWizard;
diff --git a/packages/ui/src/components/ImageWizard/components/index.ts b/packages/ui/src/components/ImageWizard/components/index.ts
index 1bdb8e59..fa05afce 100644
--- a/packages/ui/src/components/ImageWizard/components/index.ts
+++ b/packages/ui/src/components/ImageWizard/components/index.ts
@@ -1,14 +1,14 @@
-// Central exports for ImageWizard UI components
-export { QuickActionsToolbar } from './QuickActionsToolbar';
-export { ImageActionButtons } from './ImageActionButtons';
-export { ModelSelector } from './ModelSelector';
-export { ModelSelectorPanel } from './ModelSelectorPanel';
-export { default as WizardSidebar } from './WizardSidebar';
-export { default as Prompt } from './Prompt';
-export { default as ImageGalleryPanel } from './ImageGalleryPanel';
-
-
-
-
-
-
+// Central exports for ImageWizard UI components
+export { QuickActionsToolbar } from './QuickActionsToolbar';
+export { ImageActionButtons } from './ImageActionButtons';
+export { ModelSelector } from './ModelSelector';
+export { ModelSelectorPanel } from './ModelSelectorPanel';
+export { default as WizardSidebar } from './WizardSidebar';
+export { default as Prompt } from './Prompt';
+export { default as ImageGalleryPanel } from './ImageGalleryPanel';
+
+
+
+
+
+
diff --git a/packages/ui/src/components/ImageWizard/handlers/dataHandlers.ts b/packages/ui/src/components/ImageWizard/handlers/dataHandlers.ts
index 0b9e0fba..9bfc10f7 100644
--- a/packages/ui/src/components/ImageWizard/handlers/dataHandlers.ts
+++ b/packages/ui/src/components/ImageWizard/handlers/dataHandlers.ts
@@ -1,141 +1,141 @@
-import { ImageFile } from '../types';
-import { toast } from 'sonner';
-import { translate } from '@/i18n';
-import { Logger } from '../utils/logger';
-import { fetchPictureById, fetchVersions, fetchRecentPictures } from '@/modules/posts/client-pictures';
-
-/**
- * Data Loading & Saving Handlers
- * - Load family versions
- * - Load available images
- */
-
-export const loadFamilyVersions = async (
-  parentImages: ImageFile[],
-  setImages: React.Dispatch<React.SetStateAction<ImageFile[]>>,
-  logger: Logger
-) => {
-
-  try {
-    // Get all parent IDs and image IDs to find complete families
-    const imageIds = parentImages.map(img => img.realDatabaseId || img.id).filter(id => id && id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
-
-    if (imageIds.length === 0) {
-      return;
-    }
-
-    // For each image, find its complete family tree via API
-    const allFamilyImages = new Set<string>();
-    const allVersionData: any[] = [];
-
-    for (const imageId of imageIds) {
-      // First, get the current image details to check if it has a parent
-      const currentImage = await fetchPictureById(imageId);
-
-      if (!currentImage) {
-        console.error('🔧 [Wizard] Error loading current image:', imageId);
-        continue;
-      }
-
-      // Load all versions in this family via API
-      const familyVersions = await fetchVersions(currentImage as any);
-
-      if (!familyVersions || !Array.isArray(familyVersions)) {
-        console.error('🔧 [Wizard] Error loading family versions for:', imageId);
-        continue;
-      }
-
-      // Add all family members to our set (excluding the initial image)
-      familyVersions.forEach((version: any) => {
-        if (version.id !== imageId) {
-          allFamilyImages.add(version.id);
-          allVersionData.push(version);
-        }
-      });
-    }
-
-    // Map to ImageFile format and update state
-    if (allFamilyImages.size > 0) {
-      // Deduplicate by id
-      const uniqueVersions = new Map<string, any>();
-      allVersionData.forEach(v => uniqueVersions.set(v.id, v));
-      const versions = Array.from(uniqueVersions.values());
-
-      const versionImages: ImageFile[] = versions.map(version => ({
-        id: version.id,
-        src: version.image_url,
-        title: version.title,
-        userId: version.user_id,
-        selected: false, // Default to not selected in UI
-        isPreferred: version.is_selected || false,
-        isGenerated: true,
-        aiText: version.description || undefined
-      }));
-
-      // Add versions to images, but also update existing images with correct selection status
-      setImages(prev => {
-        // Create a map of database selection status
-        const dbSelectionStatus = new Map();
-
-        // Check if this is a singleton family (only one version)
-        const isSingleton = versions.length === 1;
-
-        versions.forEach(version => {
-          // If explicitly selected in DB, OR if it's the only version in the family
-          const isPreferred = version.is_selected || (isSingleton && !version.parent_id);
-          dbSelectionStatus.set(version.id, isPreferred);
-        });
-
-        // Update existing images and add new ones
-        const existingIds = new Set(prev.map(img => img.id));
-        const updatedExisting = prev.map(img => {
-          if (dbSelectionStatus.has(img.id)) {
-            const dbSelected = dbSelectionStatus.get(img.id);
-            return { ...img, isPreferred: dbSelected };
-          }
-          return img;
-        });
-
-        // Add new images
-        const newImages = versionImages.filter(img => !existingIds.has(img.id)).map(img => {
-          if (dbSelectionStatus.has(img.id)) {
-            return { ...img, isPreferred: dbSelectionStatus.get(img.id) };
-          }
-          return img;
-        });
-
-        const finalImages = [...updatedExisting, ...newImages];
-        return finalImages;
-      });
-    }
-  } catch (error) {
-    console.error('🔧 [Wizard] Error loading family versions:', error);
-    toast.error(translate('Failed to load image versions'));
-  }
-};
-
-export const loadAvailableImages = async (
-  setAvailableImages: React.Dispatch<React.SetStateAction<ImageFile[]>>,
-  setLoadingImages: React.Dispatch<React.SetStateAction<boolean>>
-) => {
-  setLoadingImages(true);
-  try {
-    // Load recent pictures via API
-    const pictures = await fetchRecentPictures(50);
-
-    const imageFiles: ImageFile[] = pictures.map((picture: any) => ({
-      id: picture.id,
-      src: picture.image_url,
-      title: picture.title,
-      userId: picture.user_id,
-      selected: false
-    }));
-
-    setAvailableImages(imageFiles);
-  } catch (error) {
-    console.error('Error loading images:', error);
-    toast.error(translate('Failed to load images'));
-  } finally {
-    setLoadingImages(false);
-  }
-};
+import { ImageFile } from '../types';
+import { toast } from 'sonner';
+import { translate } from '@/i18n';
+import { Logger } from '../utils/logger';
+import { fetchPictureById, fetchVersions, fetchRecentPictures } from '@/modules/posts/client-pictures';
+
+/**
+ * Data Loading & Saving Handlers
+ * - Load family versions
+ * - Load available images
+ */
+
+export const loadFamilyVersions = async (
+  parentImages: ImageFile[],
+  setImages: React.Dispatch<React.SetStateAction<ImageFile[]>>,
+  logger: Logger
+) => {
+
+  try {
+    // Get all parent IDs and image IDs to find complete families
+    const imageIds = parentImages.map(img => img.realDatabaseId || img.id).filter(id => id && id.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i));
+
+    if (imageIds.length === 0) {
+      return;
+    }
+
+    // For each image, find its complete family tree via API
+    const allFamilyImages = new Set<string>();
+    const allVersionData: any[] = [];
+
+    for (const imageId of imageIds) {
+      // First, get the current image details to check if it has a parent
+      const currentImage = await fetchPictureById(imageId);
+
+      if (!currentImage) {
+        console.error('🔧 [Wizard] Error loading current image:', imageId);
+        continue;
+      }
+
+      // Load all versions in this family via API
+      const familyVersions = await fetchVersions(currentImage as any);
+
+      if (!familyVersions || !Array.isArray(familyVersions)) {
+        console.error('🔧 [Wizard] Error loading family versions for:', imageId);
+        continue;
+      }
+
+      // Add all family members to our set (excluding the initial image)
+      familyVersions.forEach((version: any) => {
+        if (version.id !== imageId) {
+          allFamilyImages.add(version.id);
+          allVersionData.push(version);
+        }
+      });
+    }
+
+    // Map to ImageFile format and update state
+    if (allFamilyImages.size > 0) {
+      // Deduplicate by id
+      const uniqueVersions = new Map<string, any>();
+      allVersionData.forEach(v => uniqueVersions.set(v.id, v));
+      const versions = Array.from(uniqueVersions.values());
+
+      const versionImages: ImageFile[] = versions.map(version => ({
+        id: version.id,
+        src: version.image_url,
+        title: version.title,
+        userId: version.user_id,
+        selected: false, // Default to not selected in UI
+        isPreferred: version.is_selected || false,
+        isGenerated: true,
+        aiText: version.description || undefined
+      }));
+
+      // Add versions to images, but also update existing images with correct selection status
+      setImages(prev => {
+        // Create a map of database selection status
+        const dbSelectionStatus = new Map();
+
+        // Check if this is a singleton family (only one version)
+        const isSingleton = versions.length === 1;
+
+        versions.forEach(version => {
+          // If explicitly selected in DB, OR if it's the only version in the family
+          const isPreferred = version.is_selected || (isSingleton && !version.parent_id);
+          dbSelectionStatus.set(version.id, isPreferred);
+        });
+
+        // Update existing images and add new ones
+        const existingIds = new Set(prev.map(img => img.id));
+        const updatedExisting = prev.map(img => {
+          if (dbSelectionStatus.has(img.id)) {
+            const dbSelected = dbSelectionStatus.get(img.id);
+            return { ...img, isPreferred: dbSelected };
+          }
+          return img;
+        });
+
+        // Add new images
+        const newImages = versionImages.filter(img => !existingIds.has(img.id)).map(img => {
+          if (dbSelectionStatus.has(img.id)) {
+            return { ...img, isPreferred: dbSelectionStatus.get(img.id) };
+          }
+          return img;
+        });
+
+        const finalImages = [...updatedExisting, ...newImages];
+        return finalImages;
+      });
+    }
+  } catch (error) {
+    console.error('🔧 [Wizard] Error loading family versions:', error);
+    toast.error(translate('Failed to load image versions'));
+  }
+};
+
+export const loadAvailableImages = async (
+  setAvailableImages: React.Dispatch<React.SetStateAction<ImageFile[]>>,
+  setLoadingImages: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  setLoadingImages(true);
+  try {
+    // Load recent pictures via API
+    const pictures = await fetchRecentPictures(50);
+
+    const imageFiles: ImageFile[] = pictures.map((picture: any) => ({
+      id: picture.id,
+      src: picture.image_url,
+      title: picture.title,
+      userId: picture.user_id,
+      selected: false
+    }));
+
+    setAvailableImages(imageFiles);
+  } catch (error) {
+    console.error('Error loading images:', error);
+    toast.error(translate('Failed to load images'));
+  } finally {
+    setLoadingImages(false);
+  }
+};
diff --git a/packages/ui/src/components/MagicWizardButton.tsx b/packages/ui/src/components/MagicWizardButton.tsx
index 1158bf61..22aefafa 100644
--- a/packages/ui/src/components/MagicWizardButton.tsx
+++ b/packages/ui/src/components/MagicWizardButton.tsx
@@ -1,117 +1,117 @@
-import React from "react";
-import { Wand2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useAuth } from "@/hooks/useAuth";
-import { useNavigate } from "react-router-dom";
-import { useWizardContext } from "@/hooks/useWizardContext";
-import { toast } from "sonner";
-import { translate } from "@/i18n";
-
-interface MagicWizardButtonProps {
-  imageUrl: string;
-  imageTitle: string;
-  className?: string;
-  size?: "sm" | "default" | "lg" | "icon";
-  variant?: "default" | "ghost" | "outline";
-  onClick?: (e: React.MouseEvent) => void;
-  editingPostId?: string | null; // Explicitly pass the post ID if known, or null to prevent auto-detection
-  pictureId?: string; // Explicitly pass the picture ID if known
-  children?: React.ReactNode;
-}
-
-const MagicWizardButton: React.FC<MagicWizardButtonProps> = ({
-  imageUrl,
-  imageTitle,
-  className = "",
-  size = "sm",
-  variant = "ghost",
-  onClick,
-  editingPostId: explicitPostId,
-  pictureId: explicitPictureId,
-  children
-}) => {
-  const { user } = useAuth();
-  const navigate = useNavigate();
-  const { setWizardImage } = useWizardContext();
-
-  const handleClick = async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (onClick) {
-      onClick(e);
-      return;
-    }
-
-    if (!user) {
-      toast.error(translate('Please sign in to use the AI wizard'));
-      return;
-    }
-
-    // Get the real picture ID from the URL path if available
-    const urlPath = window.location.pathname;
-
-    // Check if we are in a post context
-    // If explicitPostId is provided (even as null), use it.
-    // If it is undefined, try to infer from URL.
-    let editingPostId: string | null = null;
-
-    if (explicitPostId !== undefined) {
-      editingPostId = explicitPostId;
-    } else {
-      const postMatch = urlPath.match(/\/post\/([a-f0-9-]{36})/);
-      if (postMatch) {
-        editingPostId = postMatch[1];
-      }
-    }
-
-    let realPictureId = explicitPictureId || null;
-
-    // Only try to guess from URL if explicitPictureId is not provided
-    if (!realPictureId) {
-      const pictureIdMatch = urlPath.match(/\/post\/([a-f0-9-]{36})/);
-      realPictureId = pictureIdMatch ? pictureIdMatch[1] : null;
-    }
-
-    const imageData = {
-      id: realPictureId || `external-${Date.now()}`,
-      src: imageUrl,
-      title: imageTitle,
-      selected: true,
-      realDatabaseId: realPictureId // Store the real database ID separately
-    };
-    // Store in Zustand (replaces sessionStorage) with return path
-    setWizardImage(imageData, window.location.pathname);
-    // Navigate to wizard
-    // Note: navigationData is now maintained by Zustand - no manual storage needed!
-    navigate('/wizard', {
-      state: {
-        mode: 'default', // Keep default mode but passing editingPostId allows "Add to Post"
-        editingPostId: editingPostId
-      }
-    });
-  };
-
-  // Don't render if user is not logged in
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <Button
-      size={size}
-      variant={variant}
-      onClick={handleClick}
-      className={`${className?.includes('p-0')
-        ? 'text-foreground hover:text-primary transition-colors'
-        : 'text-foreground hover:text-primary transition-colors'
-        } ${className}`}
-      title={translate("Edit with AI Wizard")}
-    >
-      <Wand2 className={`${size === 'sm' ? 'h-6 w-6' : 'h-5 w-5'} ${className?.includes('p-0') ? '' : 'mr-1'} drop-shadow-sm`} />
-      {children}
-    </Button>
-  );
-};
-
-export default MagicWizardButton;
\ No newline at end of file
+import React from "react";
+import { Wand2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/hooks/useAuth";
+import { useNavigate } from "react-router-dom";
+import { useWizardContext } from "@/hooks/useWizardContext";
+import { toast } from "sonner";
+import { translate } from "@/i18n";
+
+interface MagicWizardButtonProps {
+  imageUrl: string;
+  imageTitle: string;
+  className?: string;
+  size?: "sm" | "default" | "lg" | "icon";
+  variant?: "default" | "ghost" | "outline";
+  onClick?: (e: React.MouseEvent) => void;
+  editingPostId?: string | null; // Explicitly pass the post ID if known, or null to prevent auto-detection
+  pictureId?: string; // Explicitly pass the picture ID if known
+  children?: React.ReactNode;
+}
+
+const MagicWizardButton: React.FC<MagicWizardButtonProps> = ({
+  imageUrl,
+  imageTitle,
+  className = "",
+  size = "sm",
+  variant = "ghost",
+  onClick,
+  editingPostId: explicitPostId,
+  pictureId: explicitPictureId,
+  children
+}) => {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const { setWizardImage } = useWizardContext();
+
+  const handleClick = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (onClick) {
+      onClick(e);
+      return;
+    }
+
+    if (!user) {
+      toast.error(translate('Please sign in to use the AI wizard'));
+      return;
+    }
+
+    // Get the real picture ID from the URL path if available
+    const urlPath = window.location.pathname;
+
+    // Check if we are in a post context
+    // If explicitPostId is provided (even as null), use it.
+    // If it is undefined, try to infer from URL.
+    let editingPostId: string | null = null;
+
+    if (explicitPostId !== undefined) {
+      editingPostId = explicitPostId;
+    } else {
+      const postMatch = urlPath.match(/\/post\/([a-f0-9-]{36})/);
+      if (postMatch) {
+        editingPostId = postMatch[1];
+      }
+    }
+
+    let realPictureId = explicitPictureId || null;
+
+    // Only try to guess from URL if explicitPictureId is not provided
+    if (!realPictureId) {
+      const pictureIdMatch = urlPath.match(/\/post\/([a-f0-9-]{36})/);
+      realPictureId = pictureIdMatch ? pictureIdMatch[1] : null;
+    }
+
+    const imageData = {
+      id: realPictureId || `external-${Date.now()}`,
+      src: imageUrl,
+      title: imageTitle,
+      selected: true,
+      realDatabaseId: realPictureId // Store the real database ID separately
+    };
+    // Store in Zustand (replaces sessionStorage) with return path
+    setWizardImage(imageData, window.location.pathname);
+    // Navigate to wizard
+    // Note: navigationData is now maintained by Zustand - no manual storage needed!
+    navigate('/wizard', {
+      state: {
+        mode: 'default', // Keep default mode but passing editingPostId allows "Add to Post"
+        editingPostId: editingPostId
+      }
+    });
+  };
+
+  // Don't render if user is not logged in
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <Button
+      size={size}
+      variant={variant}
+      onClick={handleClick}
+      className={`${className?.includes('p-0')
+        ? 'text-foreground hover:text-primary transition-colors'
+        : 'text-foreground hover:text-primary transition-colors'
+        } ${className}`}
+      title={translate("Edit with AI Wizard")}
+    >
+      <Wand2 className={`${size === 'sm' ? 'h-6 w-6' : 'h-5 w-5'} ${className?.includes('p-0') ? '' : 'mr-1'} drop-shadow-sm`} />
+      {children}
+    </Button>
+  );
+};
+
+export default MagicWizardButton;
diff --git a/packages/ui/src/components/MarkdownEditor.tsx b/packages/ui/src/components/MarkdownEditor.tsx
index 91b9c59b..f701c0f3 100644
--- a/packages/ui/src/components/MarkdownEditor.tsx
+++ b/packages/ui/src/components/MarkdownEditor.tsx
@@ -1,128 +1,128 @@
-import React, { useRef, useState, useCallback } from 'react';
-import { ImagePickerDialog } from '@/components/widgets/ImagePickerDialog';
-import { fetchPictureById } from '@/modules/posts/client-pictures';
-
-interface MarkdownEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-
-const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
-  value,
-  onChange,
-  placeholder = "Enter description...",
-  className = "",
-  onKeyDown
-}) => {
-  const [activeTab, setActiveTab] = useState<'editor' | 'raw'>('editor');
-  const [imagePickerOpen, setImagePickerOpen] = useState(false);
-  const pendingImageResolveRef = useRef<((url: string) => void) | null>(null);
-
-  // Handler for image selection from picker
-  const handleImageSelect = useCallback(async (pictureId: string) => {
-    try {
-      // Fetch the image URL via API
-      const data = await fetchPictureById(pictureId);
-      if (!data) throw new Error('Picture not found');
-
-      const imageUrl = data.image_url;
-
-      const resolveFunc = pendingImageResolveRef.current;
-
-      if (resolveFunc) {
-        pendingImageResolveRef.current = null;
-        resolveFunc(imageUrl);
-      }
-
-      setImagePickerOpen(false);
-    } catch (error) {
-      if (pendingImageResolveRef.current) {
-        pendingImageResolveRef.current('');
-        pendingImageResolveRef.current = null;
-      }
-      setImagePickerOpen(false);
-    }
-  }, []);
-
-  const handleRawChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange(e.target.value);
-  }, [onChange]);
-
-  return (
-    <>
-      <div className={`border rounded-md bg-background ${className}`}>
-        <div className="flex border-b">
-          <button
-            type="button"
-            onClick={() => setActiveTab('editor')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'editor'
-              ? 'border-primary text-primary'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
-              }`}
-          >
-            Editor
-          </button>
-          <button
-            type="button"
-            onClick={() => setActiveTab('raw')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'raw'
-              ? 'border-primary text-primary'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
-              }`}
-          >
-            Markdown
-          </button>
-        </div>
-        {activeTab === 'editor' && (
-          <React.Suspense fallback={<div className="p-3 text-muted-foreground">Loading editor...</div>}>
-            <div></div>
-          </React.Suspense>
-        )}
-        {activeTab === 'raw' && (
-          <textarea
-            value={value || ''}
-            onChange={handleRawChange}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            className="w-full p-3 bg-transparent border-0 rounded-b-md focus:ring-0 focus:outline-none resize-none font-mono text-sm"
-            style={{ height: '120px', minHeight: '120px' }}
-            aria-label="Raw markdown input"
-            autoFocus
-          />
-        )}
-      </div>
-
-      {/* Image Picker Dialog */}
-      <ImagePickerDialog
-        isOpen={imagePickerOpen}
-        onClose={() => {
-          setImagePickerOpen(false);
-          // Reject the promise if closed without selection
-          if (pendingImageResolveRef.current) {
-            pendingImageResolveRef.current('');
-            pendingImageResolveRef.current = null;
-          }
-        }}
-        onSelect={handleImageSelect}
-        currentValue={null}
-      />
-    </>
-  );
-};
-
-MarkdownEditor.displayName = 'MarkdownEditor';
-
-// Memoize with custom comparison
-export default React.memo(MarkdownEditor, (prevProps, nextProps) => {
-  // Re-render if value, placeholder, className, or onKeyDown change
-  return (
-    prevProps.value === nextProps.value &&
-    prevProps.placeholder === nextProps.placeholder &&
-    prevProps.className === nextProps.className &&
-    prevProps.onKeyDown === nextProps.onKeyDown
-    // onChange is intentionally omitted to prevent unnecessary re-renders
-  );
-});
\ No newline at end of file
+import React, { useRef, useState, useCallback } from 'react';
+import { ImagePickerDialog } from '@/components/widgets/ImagePickerDialog';
+import { fetchPictureById } from '@/modules/posts/client-pictures';
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  value,
+  onChange,
+  placeholder = "Enter description...",
+  className = "",
+  onKeyDown
+}) => {
+  const [activeTab, setActiveTab] = useState<'editor' | 'raw'>('editor');
+  const [imagePickerOpen, setImagePickerOpen] = useState(false);
+  const pendingImageResolveRef = useRef<((url: string) => void) | null>(null);
+
+  // Handler for image selection from picker
+  const handleImageSelect = useCallback(async (pictureId: string) => {
+    try {
+      // Fetch the image URL via API
+      const data = await fetchPictureById(pictureId);
+      if (!data) throw new Error('Picture not found');
+
+      const imageUrl = data.image_url;
+
+      const resolveFunc = pendingImageResolveRef.current;
+
+      if (resolveFunc) {
+        pendingImageResolveRef.current = null;
+        resolveFunc(imageUrl);
+      }
+
+      setImagePickerOpen(false);
+    } catch (error) {
+      if (pendingImageResolveRef.current) {
+        pendingImageResolveRef.current('');
+        pendingImageResolveRef.current = null;
+      }
+      setImagePickerOpen(false);
+    }
+  }, []);
+
+  const handleRawChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(e.target.value);
+  }, [onChange]);
+
+  return (
+    <>
+      <div className={`border rounded-md bg-background ${className}`}>
+        <div className="flex border-b">
+          <button
+            type="button"
+            onClick={() => setActiveTab('editor')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'editor'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              }`}
+          >
+            Editor
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('raw')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'raw'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              }`}
+          >
+            Markdown
+          </button>
+        </div>
+        {activeTab === 'editor' && (
+          <React.Suspense fallback={<div className="p-3 text-muted-foreground">Loading editor...</div>}>
+            <div></div>
+          </React.Suspense>
+        )}
+        {activeTab === 'raw' && (
+          <textarea
+            value={value || ''}
+            onChange={handleRawChange}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            className="w-full p-3 bg-transparent border-0 rounded-b-md focus:ring-0 focus:outline-none resize-none font-mono text-sm"
+            style={{ height: '120px', minHeight: '120px' }}
+            aria-label="Raw markdown input"
+            autoFocus
+          />
+        )}
+      </div>
+
+      {/* Image Picker Dialog */}
+      <ImagePickerDialog
+        isOpen={imagePickerOpen}
+        onClose={() => {
+          setImagePickerOpen(false);
+          // Reject the promise if closed without selection
+          if (pendingImageResolveRef.current) {
+            pendingImageResolveRef.current('');
+            pendingImageResolveRef.current = null;
+          }
+        }}
+        onSelect={handleImageSelect}
+        currentValue={null}
+      />
+    </>
+  );
+};
+
+MarkdownEditor.displayName = 'MarkdownEditor';
+
+// Memoize with custom comparison
+export default React.memo(MarkdownEditor, (prevProps, nextProps) => {
+  // Re-render if value, placeholder, className, or onKeyDown change
+  return (
+    prevProps.value === nextProps.value &&
+    prevProps.placeholder === nextProps.placeholder &&
+    prevProps.className === nextProps.className &&
+    prevProps.onKeyDown === nextProps.onKeyDown
+    // onChange is intentionally omitted to prevent unnecessary re-renders
+  );
+});
diff --git a/packages/ui/src/components/MarkdownEditorEx.tsx b/packages/ui/src/components/MarkdownEditorEx.tsx
index 82d9f8c4..a6145574 100644
--- a/packages/ui/src/components/MarkdownEditorEx.tsx
+++ b/packages/ui/src/components/MarkdownEditorEx.tsx
@@ -1,316 +1,316 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
-import { htmlTableToMarkdown } from '@/lib/htmlTableToMarkdown';
-import { ImagePickerDialog } from '@/components/widgets/ImagePickerDialog';
-import { fetchPictureById } from '@/modules/posts/client-pictures';
-import { toast } from 'sonner';
-import { translate } from '@/i18n';
-
-
-// Lazy load the heavy editor component
-const MDXEditorInternal = React.lazy(() => import('@/components/lazy-editors/MDXEditorInternal'));
-
-// ── Error Boundary for MDXEditor ─────────────────────────────────────────
-
-interface ErrorBoundaryProps {
-  children: React.ReactNode;
-  value: string;
-  onChange: (v: string) => void;
-}
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-class MDXEditorErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = { hasError: false, error: null };
-
-  static getDerivedStateFromError(error: Error) {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error) {
-    console.error('[MDXEditor] Parse error caught by boundary:', error);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div className="p-4 space-y-3">
-          <div className="flex items-center gap-2 p-3 rounded-md bg-destructive/10 border border-destructive/30 text-destructive text-sm">
-            <svg className="h-4 w-4 flex-shrink-0" viewBox="0 0 16 16" fill="currentColor">
-              <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.75a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-1.5 0v-4zM8 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
-            </svg>
-            <span>
-              The editor could not parse this content (likely contains invalid characters like bare <code>&lt;</code>).
-              Edit below or switch to the <strong>Markdown</strong> tab.
-            </span>
-          </div>
-          <textarea
-            value={this.props.value || ''}
-            onChange={(e) => this.props.onChange(e.target.value)}
-            className="w-full min-h-[200px] bg-transparent border rounded-md p-3 font-mono text-sm focus:ring-1 focus:ring-primary focus:outline-none resize-y"
-            aria-label="Raw markdown (fallback)"
-          />
-          <button
-            onClick={() => this.setState({ hasError: false, error: null })}
-            className="px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
-          >
-            Retry editor
-          </button>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-interface MarkdownEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
-  onSelectionChange?: (selectedText: string) => void;
-  onSave?: () => void;
-  editorRef?: React.RefObject<any>;
-}
-
-interface MDXEditorWithImagePickerProps {
-  value: string;
-  onChange: (markdown: string) => void;
-  placeholder: string;
-  onRequestImage: () => Promise<string>;
-  onTextInsert: (text: string) => void;
-  onSelectionChange?: (selectedText: string) => void;
-  isFullscreen: boolean;
-  onToggleFullscreen: () => void;
-  onSave?: () => void;
-  editorRef: React.MutableRefObject<any>;
-}
-
-export function MDXEditorWithImagePicker(props: MDXEditorWithImagePickerProps) {
-  return (
-    <React.Suspense fallback={<div className="p-4 text-center text-muted-foreground">Loading editor...</div>}>
-      <MDXEditorErrorBoundary value={props.value} onChange={props.onChange}>
-        <MDXEditorInternal {...props} />
-      </MDXEditorErrorBoundary>
-    </React.Suspense>
-  );
-}
-
-const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
-  value,
-  onChange,
-  placeholder = "Enter description...",
-  className = "",
-  onKeyDown,
-  onSelectionChange,
-  onSave,
-  editorRef: externalEditorRef
-}) => {
-  const [activeTab, setActiveTab] = useState<'editor' | 'raw'>('editor');
-  const [imagePickerOpen, setImagePickerOpen] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const lastEmittedValue = useRef<string>(value);
-  const internalEditorRef = useRef<any>(null);
-  const editorRef = externalEditorRef || internalEditorRef;
-  const imageResolveRef = useRef<((url: string) => void) | null>(null);
-  const imageRejectRef = useRef<(() => void) | null>(null);
-
-  // Handle external value changes (e.g., from filter panel)
-  useEffect(() => {
-    if (value !== lastEmittedValue.current) {
-      lastEmittedValue.current = value;
-      // Force update the MDXEditor if it exists
-      if (editorRef.current && activeTab === 'editor') {
-        try {
-          editorRef.current.setMarkdown(value);
-        } catch (error) {
-          console.warn('Failed to update MDXEditor:', error);
-          toast.warning(
-            translate('Content may contain characters that the editor cannot display. Switch to the Markdown tab to review.'),
-            { duration: 5000 },
-          );
-        }
-      }
-    }
-  }, [value, activeTab]);
-
-  const handleEditorChange = useCallback((markdown: string) => {
-    // Only call onChange if content actually changed
-    if (markdown !== lastEmittedValue.current) {
-      lastEmittedValue.current = markdown;
-      onChange(markdown);
-    }
-  }, [onChange]);
-
-  const handleTextInsert = useCallback((text: string) => {
-    // Append transcribed text to current markdown
-    const currentMarkdown = lastEmittedValue.current || '';
-    const newMarkdown = currentMarkdown
-      ? `${currentMarkdown}\n\n${text}`
-      : text;
-
-    lastEmittedValue.current = newMarkdown;
-    onChange(newMarkdown);
-
-    // Force update the editor
-    if (editorRef.current) {
-      editorRef.current.setMarkdown(newMarkdown);
-    }
-  }, [onChange]);
-
-  const handleToggleFullscreen = useCallback(() => {
-    setIsFullscreen(prev => !prev);
-  }, []);
-
-  // This function returns a promise that resolves with the image URL
-  const handleRequestImage = useCallback((): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      imageResolveRef.current = resolve;
-      imageRejectRef.current = reject;
-      setImagePickerOpen(true);
-    });
-  }, []);
-
-  const handleImageSelect = useCallback(async (pictureId: string) => {
-    // Immediately clear reject ref so onClose (which fires right after) won't reject the promise
-    imageRejectRef.current = null;
-    try {
-      console.log('[ImagePicker] Selected pictureId:', pictureId);
-      const data = await fetchPictureById(pictureId);
-      console.log('[ImagePicker] Fetched data:', data);
-      if (!data) throw new Error('Picture not found');
-
-      const imageUrl = data.image_url;
-
-      // Resolve the promise with the image URL
-      if (imageResolveRef.current) {
-        imageResolveRef.current(imageUrl);
-        imageResolveRef.current = null;
-      }
-
-      setImagePickerOpen(false);
-    } catch (error) {
-      console.error('[ImagePicker] Error selecting image:', error);
-      // Resolve with empty to avoid unhandled rejection
-      if (imageResolveRef.current) {
-        imageResolveRef.current('');
-        imageResolveRef.current = null;
-      }
-      setImagePickerOpen(false);
-    }
-  }, []);
-
-  const handleRawChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = e.target.value;
-    lastEmittedValue.current = newValue;
-    onChange(newValue);
-  }, [onChange]);
-
-  // ── Clipboard: intercept HTML table paste → markdown table ─────────────
-  const handlePasteCapture = useCallback((e: React.ClipboardEvent) => {
-    console.log('[paste] capture fired', e.clipboardData.types);
-    const html = e.clipboardData?.getData('text/html');
-    if (!html) return;
-
-    const md = htmlTableToMarkdown(html);
-    if (!md) return; // no <table> → fall through to default
-
-    e.preventDefault();
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-
-    // MDXEditor rich tab: use ref API
-    if (editorRef.current?.insertMarkdown) {
-      editorRef.current.insertMarkdown(md);
-    } else {
-      // Raw textarea fallback: append at cursor / end
-      const newValue = lastEmittedValue.current
-        ? `${lastEmittedValue.current}\n\n${md}`
-        : md;
-      lastEmittedValue.current = newValue;
-      onChange(newValue);
-    }
-  }, [editorRef, onChange]);
-
-  return (
-    <>
-      <div onPasteCapture={handlePasteCapture} className={`flex flex-col bg-background ${className} ${isFullscreen ? '' : 'border rounded-md'}`}>
-        <div className="flex border-b flex-shrink-0">
-          <button
-            type="button"
-            onClick={() => setActiveTab('editor')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'editor'
-              ? 'border-primary text-primary'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
-              }`}
-          >
-            Editor
-          </button>
-          <button
-            type="button"
-            onClick={() => setActiveTab('raw')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'raw'
-              ? 'border-primary text-primary'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
-              }`}
-          >
-            Markdown
-          </button>
-        </div>
-
-        {activeTab === 'editor' && (
-          <div className={`mdx-editor-wrapper flex-1 overflow-y-auto ${isFullscreen ? '' : 'min-h-[120px]'}`}>
-            <MDXEditorWithImagePicker
-              value={value}
-              onChange={handleEditorChange}
-              placeholder={placeholder}
-              onRequestImage={handleRequestImage}
-              onTextInsert={handleTextInsert}
-              onSelectionChange={onSelectionChange}
-              isFullscreen={isFullscreen}
-              onToggleFullscreen={handleToggleFullscreen}
-              onSave={onSave}
-              editorRef={editorRef}
-            />
-          </div>
-        )}
-
-        {activeTab === 'raw' && (
-          <textarea
-            value={value || ''}
-            onChange={handleRawChange}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            className={`flex-1 w-full bg-transparent border-0 focus:ring-0 focus:outline-none resize-none font-mono text-sm ${isFullscreen ? '' : 'p-3 rounded-b-md min-h-[120px]'
-              }`}
-            aria-label="Raw markdown input"
-            autoFocus
-          />
-        )}
-      </div>
-
-      {/* Image Picker Dialog */}
-      <ImagePickerDialog
-        isOpen={imagePickerOpen}
-        onClose={() => {
-          setImagePickerOpen(false);
-          // Reject the promise if closed without selection
-          if (imageRejectRef.current) {
-            imageRejectRef.current();
-            imageRejectRef.current = null;
-            imageResolveRef.current = null;
-          }
-        }}
-        onSelect={handleImageSelect}
-        currentValue={null}
-      />
-    </>
-  );
-};
-
-MarkdownEditor.displayName = 'MarkdownEditor';
-
-// Memoize with default shallow comparison
-export default React.memo(MarkdownEditor);
\ No newline at end of file
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { htmlTableToMarkdown } from '@/lib/htmlTableToMarkdown';
+import { ImagePickerDialog } from '@/components/widgets/ImagePickerDialog';
+import { fetchPictureById } from '@/modules/posts/client-pictures';
+import { toast } from 'sonner';
+import { translate } from '@/i18n';
+
+
+// Lazy load the heavy editor component
+const MDXEditorInternal = React.lazy(() => import('@/components/lazy-editors/MDXEditorInternal'));
+
+// ── Error Boundary for MDXEditor ─────────────────────────────────────────
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  value: string;
+  onChange: (v: string) => void;
+}
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class MDXEditorErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error) {
+    console.error('[MDXEditor] Parse error caught by boundary:', error);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="p-4 space-y-3">
+          <div className="flex items-center gap-2 p-3 rounded-md bg-destructive/10 border border-destructive/30 text-destructive text-sm">
+            <svg className="h-4 w-4 flex-shrink-0" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 3.75a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-1.5 0v-4zM8 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
+            </svg>
+            <span>
+              The editor could not parse this content (likely contains invalid characters like bare <code>&lt;</code>).
+              Edit below or switch to the <strong>Markdown</strong> tab.
+            </span>
+          </div>
+          <textarea
+            value={this.props.value || ''}
+            onChange={(e) => this.props.onChange(e.target.value)}
+            className="w-full min-h-[200px] bg-transparent border rounded-md p-3 font-mono text-sm focus:ring-1 focus:ring-primary focus:outline-none resize-y"
+            aria-label="Raw markdown (fallback)"
+          />
+          <button
+            onClick={() => this.setState({ hasError: false, error: null })}
+            className="px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Retry editor
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  onSelectionChange?: (selectedText: string) => void;
+  onSave?: () => void;
+  editorRef?: React.RefObject<any>;
+}
+
+interface MDXEditorWithImagePickerProps {
+  value: string;
+  onChange: (markdown: string) => void;
+  placeholder: string;
+  onRequestImage: () => Promise<string>;
+  onTextInsert: (text: string) => void;
+  onSelectionChange?: (selectedText: string) => void;
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
+  onSave?: () => void;
+  editorRef: React.MutableRefObject<any>;
+}
+
+export function MDXEditorWithImagePicker(props: MDXEditorWithImagePickerProps) {
+  return (
+    <React.Suspense fallback={<div className="p-4 text-center text-muted-foreground">Loading editor...</div>}>
+      <MDXEditorErrorBoundary value={props.value} onChange={props.onChange}>
+        <MDXEditorInternal {...props} />
+      </MDXEditorErrorBoundary>
+    </React.Suspense>
+  );
+}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  value,
+  onChange,
+  placeholder = "Enter description...",
+  className = "",
+  onKeyDown,
+  onSelectionChange,
+  onSave,
+  editorRef: externalEditorRef
+}) => {
+  const [activeTab, setActiveTab] = useState<'editor' | 'raw'>('editor');
+  const [imagePickerOpen, setImagePickerOpen] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const lastEmittedValue = useRef<string>(value);
+  const internalEditorRef = useRef<any>(null);
+  const editorRef = externalEditorRef || internalEditorRef;
+  const imageResolveRef = useRef<((url: string) => void) | null>(null);
+  const imageRejectRef = useRef<(() => void) | null>(null);
+
+  // Handle external value changes (e.g., from filter panel)
+  useEffect(() => {
+    if (value !== lastEmittedValue.current) {
+      lastEmittedValue.current = value;
+      // Force update the MDXEditor if it exists
+      if (editorRef.current && activeTab === 'editor') {
+        try {
+          editorRef.current.setMarkdown(value);
+        } catch (error) {
+          console.warn('Failed to update MDXEditor:', error);
+          toast.warning(
+            translate('Content may contain characters that the editor cannot display. Switch to the Markdown tab to review.'),
+            { duration: 5000 },
+          );
+        }
+      }
+    }
+  }, [value, activeTab]);
+
+  const handleEditorChange = useCallback((markdown: string) => {
+    // Only call onChange if content actually changed
+    if (markdown !== lastEmittedValue.current) {
+      lastEmittedValue.current = markdown;
+      onChange(markdown);
+    }
+  }, [onChange]);
+
+  const handleTextInsert = useCallback((text: string) => {
+    // Append transcribed text to current markdown
+    const currentMarkdown = lastEmittedValue.current || '';
+    const newMarkdown = currentMarkdown
+      ? `${currentMarkdown}\n\n${text}`
+      : text;
+
+    lastEmittedValue.current = newMarkdown;
+    onChange(newMarkdown);
+
+    // Force update the editor
+    if (editorRef.current) {
+      editorRef.current.setMarkdown(newMarkdown);
+    }
+  }, [onChange]);
+
+  const handleToggleFullscreen = useCallback(() => {
+    setIsFullscreen(prev => !prev);
+  }, []);
+
+  // This function returns a promise that resolves with the image URL
+  const handleRequestImage = useCallback((): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      imageResolveRef.current = resolve;
+      imageRejectRef.current = reject;
+      setImagePickerOpen(true);
+    });
+  }, []);
+
+  const handleImageSelect = useCallback(async (pictureId: string) => {
+    // Immediately clear reject ref so onClose (which fires right after) won't reject the promise
+    imageRejectRef.current = null;
+    try {
+      console.log('[ImagePicker] Selected pictureId:', pictureId);
+      const data = await fetchPictureById(pictureId);
+      console.log('[ImagePicker] Fetched data:', data);
+      if (!data) throw new Error('Picture not found');
+
+      const imageUrl = data.image_url;
+
+      // Resolve the promise with the image URL
+      if (imageResolveRef.current) {
+        imageResolveRef.current(imageUrl);
+        imageResolveRef.current = null;
+      }
+
+      setImagePickerOpen(false);
+    } catch (error) {
+      console.error('[ImagePicker] Error selecting image:', error);
+      // Resolve with empty to avoid unhandled rejection
+      if (imageResolveRef.current) {
+        imageResolveRef.current('');
+        imageResolveRef.current = null;
+      }
+      setImagePickerOpen(false);
+    }
+  }, []);
+
+  const handleRawChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    lastEmittedValue.current = newValue;
+    onChange(newValue);
+  }, [onChange]);
+
+  // ── Clipboard: intercept HTML table paste → markdown table ─────────────
+  const handlePasteCapture = useCallback((e: React.ClipboardEvent) => {
+    console.log('[paste] capture fired', e.clipboardData.types);
+    const html = e.clipboardData?.getData('text/html');
+    if (!html) return;
+
+    const md = htmlTableToMarkdown(html);
+    if (!md) return; // no <table> → fall through to default
+
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+
+    // MDXEditor rich tab: use ref API
+    if (editorRef.current?.insertMarkdown) {
+      editorRef.current.insertMarkdown(md);
+    } else {
+      // Raw textarea fallback: append at cursor / end
+      const newValue = lastEmittedValue.current
+        ? `${lastEmittedValue.current}\n\n${md}`
+        : md;
+      lastEmittedValue.current = newValue;
+      onChange(newValue);
+    }
+  }, [editorRef, onChange]);
+
+  return (
+    <>
+      <div onPasteCapture={handlePasteCapture} className={`flex flex-col bg-background ${className} ${isFullscreen ? '' : 'border rounded-md'}`}>
+        <div className="flex border-b flex-shrink-0">
+          <button
+            type="button"
+            onClick={() => setActiveTab('editor')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'editor'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              }`}
+          >
+            Editor
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('raw')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === 'raw'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              }`}
+          >
+            Markdown
+          </button>
+        </div>
+
+        {activeTab === 'editor' && (
+          <div className={`mdx-editor-wrapper flex-1 overflow-y-auto ${isFullscreen ? '' : 'min-h-[120px]'}`}>
+            <MDXEditorWithImagePicker
+              value={value}
+              onChange={handleEditorChange}
+              placeholder={placeholder}
+              onRequestImage={handleRequestImage}
+              onTextInsert={handleTextInsert}
+              onSelectionChange={onSelectionChange}
+              isFullscreen={isFullscreen}
+              onToggleFullscreen={handleToggleFullscreen}
+              onSave={onSave}
+              editorRef={editorRef}
+            />
+          </div>
+        )}
+
+        {activeTab === 'raw' && (
+          <textarea
+            value={value || ''}
+            onChange={handleRawChange}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            className={`flex-1 w-full bg-transparent border-0 focus:ring-0 focus:outline-none resize-none font-mono text-sm ${isFullscreen ? '' : 'p-3 rounded-b-md min-h-[120px]'
+              }`}
+            aria-label="Raw markdown input"
+            autoFocus
+          />
+        )}
+      </div>
+
+      {/* Image Picker Dialog */}
+      <ImagePickerDialog
+        isOpen={imagePickerOpen}
+        onClose={() => {
+          setImagePickerOpen(false);
+          // Reject the promise if closed without selection
+          if (imageRejectRef.current) {
+            imageRejectRef.current();
+            imageRejectRef.current = null;
+            imageResolveRef.current = null;
+          }
+        }}
+        onSelect={handleImageSelect}
+        currentValue={null}
+      />
+    </>
+  );
+};
+
+MarkdownEditor.displayName = 'MarkdownEditor';
+
+// Memoize with default shallow comparison
+export default React.memo(MarkdownEditor);
diff --git a/packages/ui/src/components/MarkdownRenderer.tsx b/packages/ui/src/components/MarkdownRenderer.tsx
index 50d2a088..bf939631 100644
--- a/packages/ui/src/components/MarkdownRenderer.tsx
+++ b/packages/ui/src/components/MarkdownRenderer.tsx
@@ -1,433 +1,433 @@
-import React, { useMemo, useEffect, useRef, useState, Suspense, useCallback } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw';
-import HashtagText from './HashtagText';
-import Prism from 'prismjs';
-import ResponsiveImage from './ResponsiveImage';
-import { useAuth } from '@/hooks/useAuth';
-// Import type from Post module
-import { PostMediaItem } from '@/modules/posts/views/types';
-
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-markup';
-import '../styles/prism-custom-theme.css';
-
-// Lazy load SmartLightbox to avoid circular deps or heavy bundle on initial load
-const SmartLightbox = React.lazy(() => import('@/modules/posts/views/components/SmartLightbox'));
-const GalleryWidget = React.lazy(() => import('./widgets/GalleryWidget'));
-const MermaidWidget = React.lazy(() => import('./widgets/MermaidWidget'));
-
-interface MarkdownRendererProps {
-  content: string;
-  className?: string;
-  variables?: Record<string, any>;
-  baseUrl?: string;
-  onLinkClick?: (href: string, e: React.MouseEvent<HTMLAnchorElement>) => void;
-}
-
-// Helper function to format URL display text (ported from previous implementation)
-const formatUrlDisplay = (url: string): string => {
-  try {
-    // Remove protocol
-    let displayUrl = url.replace(/^https?:\/\//, '');
-
-    // Remove www. if present
-    displayUrl = displayUrl.replace(/^www\./, '');
-
-    // Truncate if too long (keep domain + some path)
-    if (displayUrl.length > 40) {
-      const parts = displayUrl.split('/');
-      const domain = parts[0];
-      const path = parts.slice(1).join('/');
-
-      if (path.length > 20) {
-        displayUrl = `${domain}/${path.substring(0, 15)}...`;
-      } else {
-        displayUrl = `${domain}/${path}`;
-      }
-    }
-
-    return displayUrl;
-  } catch {
-    return url;
-  }
-};
-
-// Helper for slugifying headings
-const slugify = (text: string) => {
-  return text
-    .toLowerCase()
-    .trim()
-    .replace(/[^\w\s-]/g, '')
-    .replace(/[\s_-]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-};
-
-/** Recursively extract plain text from React children (handles nested <a>, <strong>, etc.) */
-const getPlainText = (children: React.ReactNode): string => {
-  if (typeof children === 'string' || typeof children === 'number') return String(children);
-  if (Array.isArray(children)) return children.map(getPlainText).join('');
-  if (React.isValidElement(children)) return getPlainText((children.props as any).children);
-  return '';
-};
-
-import { substitute } from '@/lib/variables';
-
-// Helper to strip YAML frontmatter
-const stripFrontmatter = (text: string) => {
-  return text.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/, '').trimStart();
-};
-
-const MarkdownRenderer = React.memo(({ content, className = "", variables, baseUrl, onLinkClick }: MarkdownRendererProps) => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const { user } = useAuth();
-
-  // Helper to resolve relative URLs
-  const resolveUrl = useCallback((url: string | undefined) => {
-    if (!url) return '';
-    if (!baseUrl) return url;
-    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) return url;
-
-    // Resolve relative path against baseUrl
-    try {
-      // If baseUrl is relative, make it absolute using the API origin so the server can fetch it
-      let absoluteBase = baseUrl;
-      if (baseUrl.startsWith('/')) {
-        const apiOrigin = import.meta.env.VITE_SERVER_IMAGE_API_URL || window.location.origin;
-        // if API url is absolute (http://...), use it as the base. 
-        // fallback to window.location.origin for relative API configs.
-        const originToUse = apiOrigin.startsWith('http') ? apiOrigin : window.location.origin;
-        // Avoid double-prefixing if baseUrl already contains the origin root (e.g. from SSR)
-        if (!baseUrl.startsWith(originToUse)) {
-          absoluteBase = `${originToUse}${baseUrl}`;
-        }
-      }
-
-      // Ensure the base URL resolves to the directory, not the file
-      // URL constructor resolves './file' relative to the path. If path doesn't end in '/',
-      // it strips the last segment. So we DO NOT want to arbitrarily append '/' to a file path.
-      // If absoluteBase is a file path (e.g. '.../document.md'), the URL constructor natively handles:
-      // new URL('./image.jpg', '.../document.md') => '.../image.jpg'
-      return new URL(url, absoluteBase).href;
-    } catch {
-      return url; // Fallback if parsing fails
-    }
-  }, [baseUrl]);
-
-  // Substitute variables in content if provided
-  const finalContent = useMemo(() => {
-    const withoutFrontmatter = stripFrontmatter(content);
-    if (!variables || Object.keys(variables).length === 0) return withoutFrontmatter;
-    return substitute(false, withoutFrontmatter, variables);
-  }, [content, variables]);
-
-  // Lightbox state
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-
-  // Extract all images from content for navigation
-  const allImages = useMemo(() => {
-    const images: { src: string, alt: string }[] = [];
-    const regex = /!\[([^\]]*)\]\(([^)]+)\)/g;
-    let match;
-    // We clone the regex to avoid stateful issues if reuse happens, though local var is fine
-    const localRegex = new RegExp(regex);
-    while ((match = localRegex.exec(finalContent)) !== null) {
-      images.push({
-        alt: match[1],
-        src: match[2]
-      });
-    }
-    return images;
-  }, [finalContent]);
-
-  // Memoize content analysis (keep existing logic for simple hashtag views)
-  const contentAnalysis = useMemo(() => {
-    const hasHashtags = /#[a-zA-Z0-9_]+/.test(finalContent);
-    const hasMarkdownLinks = /\[.*?\]\(.*?\)/.test(finalContent);
-    const hasMarkdownSyntax = /(\*\*|__|##?|###?|####?|#####?|######?|\*|\n\*|\n-|\n\d+\.)/.test(finalContent);
-
-    return {
-      hasHashtags,
-      hasMarkdownLinks,
-      hasMarkdownSyntax
-    };
-  }, [finalContent]);
-
-  // Removed Prism.highlightAllUnder to prevent React NotFoundError during streaming
-  // Highlighting is now handled safely within the `code` component renderer.
-
-  const handleImageClick = (src: string) => {
-    const index = allImages.findIndex(img => img.src === src);
-    if (index !== -1) {
-      setCurrentImageIndex(index);
-      setLightboxOpen(true);
-    }
-  };
-
-  const handleNavigate = (direction: 'prev' | 'next') => {
-    if (direction === 'prev') {
-      setCurrentImageIndex(prev => (prev > 0 ? prev - 1 : prev));
-    } else {
-      setCurrentImageIndex(prev => (prev < allImages.length - 1 ? prev + 1 : prev));
-    }
-  };
-
-  // Mock MediaItem for SmartLightbox
-  const mockMediaItem = useMemo((): PostMediaItem | null => {
-    const selectedImage = allImages[currentImageIndex];
-    if (!selectedImage) return null;
-    const resolvedUrl = resolveUrl(selectedImage.src);
-    return {
-      id: 'md-' + btoa(encodeURIComponent(selectedImage.src)).substring(0, 10), // stable ID based on SRC
-      title: selectedImage.alt || 'Image',
-      description: '',
-      image_url: resolvedUrl,
-      thumbnail_url: resolvedUrl,
-      user_id: user?.id || 'unknown',
-      type: 'image',
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
-      position: 0,
-      likes_count: 0,
-      post_id: null
-    } as any;
-  }, [currentImageIndex, allImages, user, resolveUrl]);
-
-  // Only use HashtagText if content has hashtags but NO markdown syntax at all
-  if (contentAnalysis.hasHashtags && !contentAnalysis.hasMarkdownLinks && !contentAnalysis.hasMarkdownSyntax) {
-    return (
-      <div className={`prose prose-sm max-w-none dark:prose-invert ${className}`}>
-        <HashtagText>{finalContent}</HashtagText>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div
-        ref={containerRef}
-        className={`prose prose-sm max-w-none dark:prose-invert ${className}`}
-      >
-        <ReactMarkdown
-          remarkPlugins={[remarkGfm]}
-          rehypePlugins={[rehypeRaw]}
-          components={{
-            img: ({ node, src, alt, title, ...props }) => {
-              // Basic implementation of ResponsiveImage
-              const resolvedSrc = resolveUrl(src);
-
-              return (
-                <span className="block my-4">
-                  <ResponsiveImage
-                    src={resolvedSrc}
-                    alt={alt || ''}
-                    title={title} // Pass title down if ResponsiveImage supports it or wrap it
-                    className={`cursor-pointer ${props.className || ''}`}
-                    imgClassName="cursor-pointer hover:opacity-95 transition-opacity"
-                    // Default generous sizes for blog post content
-                    sizes="(max-width: 768px) 100vw, 800px"
-                    loading="lazy"
-                    onClick={() => resolvedSrc && handleImageClick(src || '')}
-                  />
-                  {title && <span className="block text-center text-sm text-muted-foreground mt-2 italic">{title}</span>}
-                </span>
-              );
-            },
-            a: ({ node, href, children, ...props }) => {
-              if (!href) return <span {...props}>{children}</span>;
-
-              // Logic to format display text if it matches the URL
-              let childText = '';
-              if (typeof children === 'string') {
-                childText = children;
-              } else if (Array.isArray(children) && children.length > 0 && typeof children[0] === 'string') {
-                // Simple approximation for React children
-                childText = children[0];
-              }
-
-              const isAutoLink = childText === href || childText.replace(/^https?:\/\//, '') === href.replace(/^https?:\/\//, '');
-              const displayContent = isAutoLink ? formatUrlDisplay(href) : children;
-
-              const isRelative = !href.startsWith('http://') && !href.startsWith('https://') && !href.startsWith('mailto:') && !href.startsWith('tel:') && !href.startsWith('data:') && !href.startsWith('#');
-
-              return (
-                <a
-                  href={href}
-                  target={isRelative ? undefined : "_blank"}
-                  rel="noopener noreferrer"
-                  className="text-primary hover:text-primary/80 underline hover:no-underline transition-colors"
-                  onClick={(e) => {
-                    if (onLinkClick) {
-                      onLinkClick(href, e);
-                    }
-                  }}
-                  {...props}
-                >
-                  {displayContent}
-                </a>
-              );
-            },
-            h1: ({ node, children, ...props }) => {
-              const text = getPlainText(children);
-              const id = slugify(text);
-              return <h1 id={id} {...props}>{children}</h1>;
-            },
-            h2: ({ node, children, ...props }) => {
-              const text = getPlainText(children);
-              const id = slugify(text);
-              return <h2 id={id} {...props}>{children}</h2>;
-            },
-            h3: ({ node, children, ...props }) => {
-              const text = getPlainText(children);
-              const id = slugify(text);
-              return <h3 id={id} {...props}>{children}</h3>;
-            },
-            h4: ({ node, children, ...props }) => {
-              const text = getPlainText(children);
-              const id = slugify(text);
-              return <h4 id={id} {...props}>{children}</h4>;
-            },
-            p: ({ node, children, ...props }) => {
-              // Check if the paragraph contains an image
-              // @ts-ignore
-              const hasImage = node?.children?.some((child: any) =>
-                child.type === 'element' && child.tagName === 'img'
-              );
-
-              if (hasImage) {
-                return <div {...props}>{children}</div>;
-              }
-              return <p {...props}>{children}</p>;
-            },
-            table: ({ node, ...props }) => (
-              <div className="overflow-x-auto my-4">
-                <table className="min-w-full border-collapse border border-border" {...props} />
-              </div>
-            ),
-            thead: ({ node, ...props }) => (
-              <thead className="bg-muted/50" {...props} />
-            ),
-            th: ({ node, ...props }) => (
-              <th className="border border-border px-3 py-2 text-left text-sm font-semibold" {...props} />
-            ),
-            td: ({ node, ...props }) => (
-              <td className="border border-border px-3 py-2 text-sm" {...props} />
-            ),
-            // Custom component: ```custom-gallery\nid1,id2,id3\n```
-            code: ({ node, className, children, ...props }) => {
-              if (className === 'language-mermaid') {
-                const chart = String(children).trim();
-                return (
-                  <Suspense fallback={<div className="animate-pulse h-32 bg-muted/20 border border-border/50 rounded-lg flex items-center justify-center my-6 text-sm text-muted-foreground">Loading Mermaid diagram...</div>}>
-                    <MermaidWidget chart={chart} />
-                  </Suspense>
-                );
-              }
-
-              if (className === 'language-custom-gallery') {
-                const ids = String(children).trim().split(/[,\s\n]+/).filter(Boolean);
-                if (ids.length > 0) {
-                  return (
-                    <Suspense fallback={<div className="animate-pulse h-48 bg-muted rounded" />}>
-                      <GalleryWidget pictureIds={ids} thumbnailLayout="grid" imageFit="cover" />
-                    </Suspense>
-                  );
-                }
-              }
-
-              const match = /language-(\w+)/.exec(className || '');
-              const language = match ? match[1] : '';
-
-              if (!match) {
-                // Inline code or unclassified code
-                return <code className={`${className || ''} whitespace-pre-wrap font-mono text-sm bg-muted/30 px-1 py-0.5 rounded`} {...props}>{children}</code>;
-              }
-
-              const text = String(children).replace(/\n$/, '');
-
-              // Handle common language aliases
-              let prismLang = language;
-              if (language === 'ts') prismLang = 'typescript';
-              if (language === 'js') prismLang = 'javascript';
-              if (language === 'sh') prismLang = 'bash';
-              if (language === 'html' || language === 'xml') prismLang = 'markup';
-
-              if (Prism.languages[prismLang]) {
-                try {
-                  const html = Prism.highlight(text, Prism.languages[prismLang], prismLang);
-                  return (
-                    <code
-                      className={`${className} whitespace-pre-wrap font-mono text-sm`}
-                      dangerouslySetInnerHTML={{ __html: html }}
-                      {...props}
-                      // Avoid passing children when using dangerouslySetInnerHTML
-                      children={undefined}
-                    />
-                  );
-                } catch (e) {
-                  console.error('Prism highlight error', e);
-                }
-              }
-
-              // Fallback to unhighlighted 
-              return <code className={`${className || ''} whitespace-pre-wrap font-mono text-sm`} {...props}>{children}</code>;
-            },
-            // Unwrap <pre> for custom components (gallery etc.)
-            pre: ({ node, children, ...props }) => {
-              // Check the actual AST node type to see if it's our custom gallery
-              const firstChild = node?.children?.[0];
-              if (firstChild?.type === 'element' && firstChild?.tagName === 'code') {
-                const isGallery = Array.isArray(firstChild.properties?.className)
-                  && firstChild.properties?.className.includes('language-custom-gallery');
-                const isMermaid = Array.isArray(firstChild.properties?.className)
-                  && firstChild.properties?.className.includes('language-mermaid');
-
-                if (isGallery || isMermaid) {
-                  return <>{children}</>;
-                }
-
-                // Normal code block
-                return <pre className={`${props.className || ''} whitespace-pre-wrap break-words overflow-x-auto p-4 rounded-lg bg-muted/50 border border-border/50 mt-4 mb-4`} {...props}>{children}</pre>;
-              }
-
-              // Fallback
-              return <pre {...props}>{children}</pre>;
-            },
-          }}
-        >
-          {finalContent}
-        </ReactMarkdown>
-      </div>
-
-      {lightboxOpen && mockMediaItem && (
-        <Suspense fallback={null}>
-          <SmartLightbox
-            isOpen={lightboxOpen}
-            onClose={() => setLightboxOpen(false)}
-            mediaItem={mockMediaItem}
-            imageUrl={mockMediaItem.image_url}
-            imageTitle={mockMediaItem.title}
-            user={user}
-            isVideo={false}
-            // Dummy handlers for actions that aren't supported in this context
-            onPublish={async () => { }}
-            onNavigate={handleNavigate}
-            onOpenInWizard={() => { }}
-            currentIndex={currentImageIndex}
-            totalCount={allImages.length}
-          />
-        </Suspense>
-      )}
-    </>
-  );
-});
-
-MarkdownRenderer.displayName = 'MarkdownRenderer';
-
-export default MarkdownRenderer;
\ No newline at end of file
+import React, { useMemo, useEffect, useRef, useState, Suspense, useCallback } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import HashtagText from './HashtagText';
+import Prism from 'prismjs';
+import ResponsiveImage from './ResponsiveImage';
+import { useAuth } from '@/hooks/useAuth';
+// Import type from Post module
+import { PostMediaItem } from '@/modules/posts/views/types';
+
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-markup';
+import '../styles/prism-custom-theme.css';
+
+// Lazy load SmartLightbox to avoid circular deps or heavy bundle on initial load
+const SmartLightbox = React.lazy(() => import('@/modules/posts/views/components/SmartLightbox'));
+const GalleryWidget = React.lazy(() => import('./widgets/GalleryWidget'));
+const MermaidWidget = React.lazy(() => import('./widgets/MermaidWidget'));
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+  variables?: Record<string, any>;
+  baseUrl?: string;
+  onLinkClick?: (href: string, e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+// Helper function to format URL display text (ported from previous implementation)
+const formatUrlDisplay = (url: string): string => {
+  try {
+    // Remove protocol
+    let displayUrl = url.replace(/^https?:\/\//, '');
+
+    // Remove www. if present
+    displayUrl = displayUrl.replace(/^www\./, '');
+
+    // Truncate if too long (keep domain + some path)
+    if (displayUrl.length > 40) {
+      const parts = displayUrl.split('/');
+      const domain = parts[0];
+      const path = parts.slice(1).join('/');
+
+      if (path.length > 20) {
+        displayUrl = `${domain}/${path.substring(0, 15)}...`;
+      } else {
+        displayUrl = `${domain}/${path}`;
+      }
+    }
+
+    return displayUrl;
+  } catch {
+    return url;
+  }
+};
+
+// Helper for slugifying headings
+const slugify = (text: string) => {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+};
+
+/** Recursively extract plain text from React children (handles nested <a>, <strong>, etc.) */
+const getPlainText = (children: React.ReactNode): string => {
+  if (typeof children === 'string' || typeof children === 'number') return String(children);
+  if (Array.isArray(children)) return children.map(getPlainText).join('');
+  if (React.isValidElement(children)) return getPlainText((children.props as any).children);
+  return '';
+};
+
+import { substitute } from '@/lib/variables';
+
+// Helper to strip YAML frontmatter
+const stripFrontmatter = (text: string) => {
+  return text.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/, '').trimStart();
+};
+
+const MarkdownRenderer = React.memo(({ content, className = "", variables, baseUrl, onLinkClick }: MarkdownRendererProps) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const { user } = useAuth();
+
+  // Helper to resolve relative URLs
+  const resolveUrl = useCallback((url: string | undefined) => {
+    if (!url) return '';
+    if (!baseUrl) return url;
+    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) return url;
+
+    // Resolve relative path against baseUrl
+    try {
+      // If baseUrl is relative, make it absolute using the API origin so the server can fetch it
+      let absoluteBase = baseUrl;
+      if (baseUrl.startsWith('/')) {
+        const apiOrigin = import.meta.env.VITE_SERVER_IMAGE_API_URL || window.location.origin;
+        // if API url is absolute (http://...), use it as the base. 
+        // fallback to window.location.origin for relative API configs.
+        const originToUse = apiOrigin.startsWith('http') ? apiOrigin : window.location.origin;
+        // Avoid double-prefixing if baseUrl already contains the origin root (e.g. from SSR)
+        if (!baseUrl.startsWith(originToUse)) {
+          absoluteBase = `${originToUse}${baseUrl}`;
+        }
+      }
+
+      // Ensure the base URL resolves to the directory, not the file
+      // URL constructor resolves './file' relative to the path. If path doesn't end in '/',
+      // it strips the last segment. So we DO NOT want to arbitrarily append '/' to a file path.
+      // If absoluteBase is a file path (e.g. '.../document.md'), the URL constructor natively handles:
+      // new URL('./image.jpg', '.../document.md') => '.../image.jpg'
+      return new URL(url, absoluteBase).href;
+    } catch {
+      return url; // Fallback if parsing fails
+    }
+  }, [baseUrl]);
+
+  // Substitute variables in content if provided
+  const finalContent = useMemo(() => {
+    const withoutFrontmatter = stripFrontmatter(content);
+    if (!variables || Object.keys(variables).length === 0) return withoutFrontmatter;
+    return substitute(false, withoutFrontmatter, variables);
+  }, [content, variables]);
+
+  // Lightbox state
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  // Extract all images from content for navigation
+  const allImages = useMemo(() => {
+    const images: { src: string, alt: string }[] = [];
+    const regex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+    let match;
+    // We clone the regex to avoid stateful issues if reuse happens, though local var is fine
+    const localRegex = new RegExp(regex);
+    while ((match = localRegex.exec(finalContent)) !== null) {
+      images.push({
+        alt: match[1],
+        src: match[2]
+      });
+    }
+    return images;
+  }, [finalContent]);
+
+  // Memoize content analysis (keep existing logic for simple hashtag views)
+  const contentAnalysis = useMemo(() => {
+    const hasHashtags = /#[a-zA-Z0-9_]+/.test(finalContent);
+    const hasMarkdownLinks = /\[.*?\]\(.*?\)/.test(finalContent);
+    const hasMarkdownSyntax = /(\*\*|__|##?|###?|####?|#####?|######?|\*|\n\*|\n-|\n\d+\.)/.test(finalContent);
+
+    return {
+      hasHashtags,
+      hasMarkdownLinks,
+      hasMarkdownSyntax
+    };
+  }, [finalContent]);
+
+  // Removed Prism.highlightAllUnder to prevent React NotFoundError during streaming
+  // Highlighting is now handled safely within the `code` component renderer.
+
+  const handleImageClick = (src: string) => {
+    const index = allImages.findIndex(img => img.src === src);
+    if (index !== -1) {
+      setCurrentImageIndex(index);
+      setLightboxOpen(true);
+    }
+  };
+
+  const handleNavigate = (direction: 'prev' | 'next') => {
+    if (direction === 'prev') {
+      setCurrentImageIndex(prev => (prev > 0 ? prev - 1 : prev));
+    } else {
+      setCurrentImageIndex(prev => (prev < allImages.length - 1 ? prev + 1 : prev));
+    }
+  };
+
+  // Mock MediaItem for SmartLightbox
+  const mockMediaItem = useMemo((): PostMediaItem | null => {
+    const selectedImage = allImages[currentImageIndex];
+    if (!selectedImage) return null;
+    const resolvedUrl = resolveUrl(selectedImage.src);
+    return {
+      id: 'md-' + btoa(encodeURIComponent(selectedImage.src)).substring(0, 10), // stable ID based on SRC
+      title: selectedImage.alt || 'Image',
+      description: '',
+      image_url: resolvedUrl,
+      thumbnail_url: resolvedUrl,
+      user_id: user?.id || 'unknown',
+      type: 'image',
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      position: 0,
+      likes_count: 0,
+      post_id: null
+    } as any;
+  }, [currentImageIndex, allImages, user, resolveUrl]);
+
+  // Only use HashtagText if content has hashtags but NO markdown syntax at all
+  if (contentAnalysis.hasHashtags && !contentAnalysis.hasMarkdownLinks && !contentAnalysis.hasMarkdownSyntax) {
+    return (
+      <div className={`prose prose-sm max-w-none dark:prose-invert ${className}`}>
+        <HashtagText>{finalContent}</HashtagText>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className={`prose prose-sm max-w-none dark:prose-invert ${className}`}
+      >
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
+          components={{
+            img: ({ node, src, alt, title, ...props }) => {
+              // Basic implementation of ResponsiveImage
+              const resolvedSrc = resolveUrl(src);
+
+              return (
+                <span className="block my-4">
+                  <ResponsiveImage
+                    src={resolvedSrc}
+                    alt={alt || ''}
+                    title={title} // Pass title down if ResponsiveImage supports it or wrap it
+                    className={`cursor-pointer ${props.className || ''}`}
+                    imgClassName="cursor-pointer hover:opacity-95 transition-opacity"
+                    // Default generous sizes for blog post content
+                    sizes="(max-width: 768px) 100vw, 800px"
+                    loading="lazy"
+                    onClick={() => resolvedSrc && handleImageClick(src || '')}
+                  />
+                  {title && <span className="block text-center text-sm text-muted-foreground mt-2 italic">{title}</span>}
+                </span>
+              );
+            },
+            a: ({ node, href, children, ...props }) => {
+              if (!href) return <span {...props}>{children}</span>;
+
+              // Logic to format display text if it matches the URL
+              let childText = '';
+              if (typeof children === 'string') {
+                childText = children;
+              } else if (Array.isArray(children) && children.length > 0 && typeof children[0] === 'string') {
+                // Simple approximation for React children
+                childText = children[0];
+              }
+
+              const isAutoLink = childText === href || childText.replace(/^https?:\/\//, '') === href.replace(/^https?:\/\//, '');
+              const displayContent = isAutoLink ? formatUrlDisplay(href) : children;
+
+              const isRelative = !href.startsWith('http://') && !href.startsWith('https://') && !href.startsWith('mailto:') && !href.startsWith('tel:') && !href.startsWith('data:') && !href.startsWith('#');
+
+              return (
+                <a
+                  href={href}
+                  target={isRelative ? undefined : "_blank"}
+                  rel="noopener noreferrer"
+                  className="text-primary hover:text-primary/80 underline hover:no-underline transition-colors"
+                  onClick={(e) => {
+                    if (onLinkClick) {
+                      onLinkClick(href, e);
+                    }
+                  }}
+                  {...props}
+                >
+                  {displayContent}
+                </a>
+              );
+            },
+            h1: ({ node, children, ...props }) => {
+              const text = getPlainText(children);
+              const id = slugify(text);
+              return <h1 id={id} {...props}>{children}</h1>;
+            },
+            h2: ({ node, children, ...props }) => {
+              const text = getPlainText(children);
+              const id = slugify(text);
+              return <h2 id={id} {...props}>{children}</h2>;
+            },
+            h3: ({ node, children, ...props }) => {
+              const text = getPlainText(children);
+              const id = slugify(text);
+              return <h3 id={id} {...props}>{children}</h3>;
+            },
+            h4: ({ node, children, ...props }) => {
+              const text = getPlainText(children);
+              const id = slugify(text);
+              return <h4 id={id} {...props}>{children}</h4>;
+            },
+            p: ({ node, children, ...props }) => {
+              // Check if the paragraph contains an image
+              // @ts-ignore
+              const hasImage = node?.children?.some((child: any) =>
+                child.type === 'element' && child.tagName === 'img'
+              );
+
+              if (hasImage) {
+                return <div {...props}>{children}</div>;
+              }
+              return <p {...props}>{children}</p>;
+            },
+            table: ({ node, ...props }) => (
+              <div className="overflow-x-auto my-4">
+                <table className="min-w-full border-collapse border border-border" {...props} />
+              </div>
+            ),
+            thead: ({ node, ...props }) => (
+              <thead className="bg-muted/50" {...props} />
+            ),
+            th: ({ node, ...props }) => (
+              <th className="border border-border px-3 py-2 text-left text-sm font-semibold" {...props} />
+            ),
+            td: ({ node, ...props }) => (
+              <td className="border border-border px-3 py-2 text-sm" {...props} />
+            ),
+            // Custom component: ```custom-gallery\nid1,id2,id3\n```
+            code: ({ node, className, children, ...props }) => {
+              if (className === 'language-mermaid') {
+                const chart = String(children).trim();
+                return (
+                  <Suspense fallback={<div className="animate-pulse h-32 bg-muted/20 border border-border/50 rounded-lg flex items-center justify-center my-6 text-sm text-muted-foreground">Loading Mermaid diagram...</div>}>
+                    <MermaidWidget chart={chart} />
+                  </Suspense>
+                );
+              }
+
+              if (className === 'language-custom-gallery') {
+                const ids = String(children).trim().split(/[,\s\n]+/).filter(Boolean);
+                if (ids.length > 0) {
+                  return (
+                    <Suspense fallback={<div className="animate-pulse h-48 bg-muted rounded" />}>
+                      <GalleryWidget pictureIds={ids} thumbnailLayout="grid" imageFit="cover" />
+                    </Suspense>
+                  );
+                }
+              }
+
+              const match = /language-(\w+)/.exec(className || '');
+              const language = match ? match[1] : '';
+
+              if (!match) {
+                // Inline code or unclassified code
+                return <code className={`${className || ''} whitespace-pre-wrap font-mono text-sm bg-muted/30 px-1 py-0.5 rounded`} {...props}>{children}</code>;
+              }
+
+              const text = String(children).replace(/\n$/, '');
+
+              // Handle common language aliases
+              let prismLang = language;
+              if (language === 'ts') prismLang = 'typescript';
+              if (language === 'js') prismLang = 'javascript';
+              if (language === 'sh') prismLang = 'bash';
+              if (language === 'html' || language === 'xml') prismLang = 'markup';
+
+              if (Prism.languages[prismLang]) {
+                try {
+                  const html = Prism.highlight(text, Prism.languages[prismLang], prismLang);
+                  return (
+                    <code
+                      className={`${className} whitespace-pre-wrap font-mono text-sm`}
+                      dangerouslySetInnerHTML={{ __html: html }}
+                      {...props}
+                      // Avoid passing children when using dangerouslySetInnerHTML
+                      children={undefined}
+                    />
+                  );
+                } catch (e) {
+                  console.error('Prism highlight error', e);
+                }
+              }
+
+              // Fallback to unhighlighted 
+              return <code className={`${className || ''} whitespace-pre-wrap font-mono text-sm`} {...props}>{children}</code>;
+            },
+            // Unwrap <pre> for custom components (gallery etc.)
+            pre: ({ node, children, ...props }) => {
+              // Check the actual AST node type to see if it's our custom gallery
+              const firstChild = node?.children?.[0];
+              if (firstChild?.type === 'element' && firstChild?.tagName === 'code') {
+                const isGallery = Array.isArray(firstChild.properties?.className)
+                  && firstChild.properties?.className.includes('language-custom-gallery');
+                const isMermaid = Array.isArray(firstChild.properties?.className)
+                  && firstChild.properties?.className.includes('language-mermaid');
+
+                if (isGallery || isMermaid) {
+                  return <>{children}</>;
+                }
+
+                // Normal code block
+                return <pre className={`${props.className || ''} whitespace-pre-wrap break-words overflow-x-auto p-4 rounded-lg bg-muted/50 border border-border/50 mt-4 mb-4`} {...props}>{children}</pre>;
+              }
+
+              // Fallback
+              return <pre {...props}>{children}</pre>;
+            },
+          }}
+        >
+          {finalContent}
+        </ReactMarkdown>
+      </div>
+
+      {lightboxOpen && mockMediaItem && (
+        <Suspense fallback={null}>
+          <SmartLightbox
+            isOpen={lightboxOpen}
+            onClose={() => setLightboxOpen(false)}
+            mediaItem={mockMediaItem}
+            imageUrl={mockMediaItem.image_url}
+            imageTitle={mockMediaItem.title}
+            user={user}
+            isVideo={false}
+            // Dummy handlers for actions that aren't supported in this context
+            onPublish={async () => { }}
+            onNavigate={handleNavigate}
+            onOpenInWizard={() => { }}
+            currentIndex={currentImageIndex}
+            totalCount={allImages.length}
+          />
+        </Suspense>
+      )}
+    </>
+  );
+});
+
+MarkdownRenderer.displayName = 'MarkdownRenderer';
+
+export default MarkdownRenderer;
diff --git a/packages/ui/src/components/OrganizationsList.tsx b/packages/ui/src/components/OrganizationsList.tsx
index c9a9b671..b23b95f4 100644
--- a/packages/ui/src/components/OrganizationsList.tsx
+++ b/packages/ui/src/components/OrganizationsList.tsx
@@ -1,73 +1,73 @@
-import { useQuery } from "@tanstack/react-query";
-import { supabase } from "@/integrations/supabase/client";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Building2 } from "lucide-react";
-import { Link } from "react-router-dom";
-
-const OrganizationsList = () => {
-  const { data: organizations, isLoading } = useQuery({
-    queryKey: ["organizations"],
-    queryFn: async () => {
-      const { data, error } = await supabase
-        .from("organizations")
-        .select("*")
-        .order("created_at", { ascending: false });
-      
-      if (error) throw error;
-      return data;
-    },
-  });
-
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {[1, 2, 3].map((i) => (
-          <Card key={i} className="animate-pulse">
-            <CardHeader>
-              <div className="h-6 bg-muted rounded w-3/4 mb-2" />
-              <div className="h-4 bg-muted rounded w-1/2" />
-            </CardHeader>
-          </Card>
-        ))}
-      </div>
-    );
-  }
-
-  if (!organizations || organizations.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="py-16 px-4">
-      <div className="text-center mb-12">
-        <h2 className="text-4xl font-bold mb-4">
-          <span className="bg-gradient-primary bg-clip-text text-transparent">
-            Organizations
-          </span>
-        </h2>
-        <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
-          Explore creative communities and their collections
-        </p>
-      </div>
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {organizations.map((org) => (
-          <Link key={org.id} to={`/org/${org.slug}`}>
-            <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105 cursor-pointer h-full">
-              <CardHeader>
-                <div className="flex items-center gap-3 mb-2">
-                  <div className="p-2 rounded-lg bg-primary/10">
-                    <Building2 className="w-6 h-6 text-primary" />
-                  </div>
-                </div>
-                <CardTitle className="text-xl">{org.name}</CardTitle>
-                <CardDescription>@{org.slug}</CardDescription>
-              </CardHeader>
-            </Card>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default OrganizationsList;
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Building2 } from "lucide-react";
+import { Link } from "react-router-dom";
+
+const OrganizationsList = () => {
+  const { data: organizations, isLoading } = useQuery({
+    queryKey: ["organizations"],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("organizations")
+        .select("*")
+        .order("created_at", { ascending: false });
+      
+      if (error) throw error;
+      return data;
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {[1, 2, 3].map((i) => (
+          <Card key={i} className="animate-pulse">
+            <CardHeader>
+              <div className="h-6 bg-muted rounded w-3/4 mb-2" />
+              <div className="h-4 bg-muted rounded w-1/2" />
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  if (!organizations || organizations.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="py-16 px-4">
+      <div className="text-center mb-12">
+        <h2 className="text-4xl font-bold mb-4">
+          <span className="bg-gradient-primary bg-clip-text text-transparent">
+            Organizations
+          </span>
+        </h2>
+        <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+          Explore creative communities and their collections
+        </p>
+      </div>
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {organizations.map((org) => (
+          <Link key={org.id} to={`/org/${org.slug}`}>
+            <Card className="hover:shadow-lg transition-all duration-300 hover:scale-105 cursor-pointer h-full">
+              <CardHeader>
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="p-2 rounded-lg bg-primary/10">
+                    <Building2 className="w-6 h-6 text-primary" />
+                  </div>
+                </div>
+                <CardTitle className="text-xl">{org.name}</CardTitle>
+                <CardDescription>@{org.slug}</CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationsList;
diff --git a/packages/ui/src/components/PhotoCard.tsx b/packages/ui/src/components/PhotoCard.tsx
index f9ed912e..eec532b2 100644
--- a/packages/ui/src/components/PhotoCard.tsx
+++ b/packages/ui/src/components/PhotoCard.tsx
@@ -1,618 +1,618 @@
-import { Heart, Download, Share2, User, MessageCircle, Edit3, Trash2, Maximize, Layers, ExternalLink } from "lucide-react";
-import type { CardPreset } from "@/modules/pages/PageCard";
-import { Button } from "@/components/ui/button";
-import { useAuth } from "@/hooks/useAuth";
-import { toast } from "sonner";
-import React, { useState, useEffect } from "react";
-import MarkdownRenderer from "@/components/MarkdownRenderer";
-const EditImageModal = React.lazy(() => import("@/components/EditImageModal"));
-const ImageLightbox = React.lazy(() => import("@/components/ImageLightbox"));
-import MagicWizardButton from "@/components/MagicWizardButton";
-import { downloadImage, generateFilename } from "@/utils/downloadUtils";
-
-
-import { useNavigate } from "react-router-dom";
-import ResponsiveImage from "@/components/ResponsiveImage";
-import { T, translate } from "@/i18n";
-import { isLikelyFilename, formatDate } from "@/utils/textUtils";
-import UserAvatarBlock from "@/components/UserAvatarBlock";
-import { toggleLike, deletePicture, uploadFileToStorage, createPicture, updateStorageFile } from "@/modules/posts/client-pictures";
-
-interface PhotoCardProps {
-  pictureId: string;
-  image: string;
-  title: string;
-  author: string;
-  authorId: string;
-  likes: number;
-  comments: number;
-  isLiked?: boolean;
-  description?: string | null;
-  onClick?: (pictureId: string) => void;
-  onLike?: () => void;
-  onDelete?: () => void;
-  isVid?: boolean;
-  onEdit?: (pictureId: string) => void;
-  createdAt?: string;
-  authorAvatarUrl?: string | null;
-  showContent?: boolean;
-  showHeader?: boolean;
-  overlayMode?: 'hover' | 'always';
-  responsive?: any;
-  variant?: 'grid' | 'feed';
-  apiUrl?: string;
-  versionCount?: number;
-  isExternal?: boolean;
-  imageFit?: 'contain' | 'cover';
-  className?: string; // Allow custom classes from parent
-  preset?: CardPreset;
-  showAuthor?: boolean;
-  showActions?: boolean;
-  showTitle?: boolean;
-  showDescription?: boolean;
-}
-
-const PhotoCard = ({
-  pictureId,
-  image,
-  title,
-  author,
-  authorId,
-  likes,
-  comments,
-  isLiked = false,
-  description,
-  onClick,
-  onLike,
-  onDelete,
-  isVid,
-  onEdit,
-  createdAt,
-  authorAvatarUrl,
-  showContent = true,
-  showHeader = true,
-  overlayMode = 'hover',
-  responsive,
-  variant = 'grid',
-  apiUrl,
-  versionCount,
-  isExternal = false,
-  imageFit = 'contain',
-  className,
-  preset,
-  showAuthor = true,
-  showActions = true,
-  showTitle = true,
-  showDescription = true
-}: PhotoCardProps) => {
-  const { user } = useAuth();
-  const navigate = useNavigate();
-
-  const [localIsLiked, setLocalIsLiked] = useState(isLiked);
-  const [localLikes, setLocalLikes] = useState(likes);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [showLightbox, setShowLightbox] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isPublishing, setIsPublishing] = useState(false);
-
-  const [generatedImageUrl, setGeneratedImageUrl] = useState<string | null>(null);
-
-  const isOwner = user?.id === authorId;
-
-  // Fetch version count for owners only
-  const [localVersionCount, setLocalVersionCount] = useState<number>(versionCount || 0);
-
-  // Sync prop to state if needed, or just use prop. 
-  // If we want to allow local updates (e.g. after adding a version), we can keep state.
-  useEffect(() => {
-    if (versionCount !== undefined) {
-      setLocalVersionCount(versionCount);
-    }
-  }, [versionCount]);
-  const handleLike = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-
-    if (isExternal) return;
-
-    if (!user) {
-      toast.error(translate('Please sign in to like pictures'));
-      return;
-    }
-
-    try {
-      const nowLiked = await toggleLike(user.id, pictureId, localIsLiked);
-      setLocalIsLiked(nowLiked);
-      setLocalLikes(prev => nowLiked ? prev + 1 : prev - 1);
-
-      onLike?.();
-    } catch (error) {
-      console.error('Error toggling like:', error);
-      toast.error(translate('Failed to update like'));
-    }
-  };
-  const handleDelete = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-
-    if (isExternal) return;
-
-    if (!user || !isOwner) {
-      toast.error(translate('You can only delete your own images'));
-      return;
-    }
-
-    if (!confirm(translate('Are you sure you want to delete this image? This action cannot be undone.'))) {
-      return;
-    }
-
-    setIsDeleting(true);
-    try {
-      await deletePicture(pictureId);
-
-      toast.success(translate('Image deleted successfully'));
-      onDelete?.(); // Trigger refresh of the parent component
-    } catch (error) {
-      console.error('Error deleting image:', error);
-      toast.error(translate('Failed to delete image'));
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  const handleDownload = async () => {
-    try {
-      const filename = generateFilename(title);
-      await downloadImage(image, filename);
-      toast.success(translate('Image downloaded successfully'));
-    } catch (error) {
-      console.error('Error downloading image:', error);
-      toast.error(translate('Failed to download image'));
-    }
-  };
-
-  const handleLightboxOpen = () => {
-    setShowLightbox(true);
-  };
-
-
-
-  const handlePromptSubmit = async (prompt: string) => {
-    if (!prompt.trim()) {
-      toast.error(translate('Please enter a prompt'));
-      return;
-    }
-
-    setIsGenerating(true);
-    try {
-      // Convert image URL to File for API
-      const response = await fetch(image);
-      const blob = await response.blob();
-      const file = new File([blob], title || 'image.png', {
-        type: blob.type || 'image/png'
-      });
-
-      const { editImage } = await import("@/image-api");
-      const result = await editImage(prompt, [file]);
-
-      if (result) {
-        // Convert ArrayBuffer to base64 data URL  
-        const uint8Array = new Uint8Array(result.imageData);
-        const imageBlob = new Blob([uint8Array], { type: 'image/png' });
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          const dataUrl = reader.result as string;
-          setGeneratedImageUrl(dataUrl);
-          toast.success(translate('Image generated successfully!'));
-        };
-
-        reader.readAsDataURL(imageBlob);
-      }
-    } catch (error) {
-      console.error('Error generating image:', error);
-      toast.error(translate('Failed to generate image. Please check your Google API key.'));
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handlePublish = async (option: 'overwrite' | 'new', imageUrl: string, newTitle: string, description?: string) => {
-    if (isExternal) {
-      toast.error(translate('Cannot publish external images'));
-      return;
-    }
-
-    if (!user) {
-      toast.error(translate('Please sign in to publish images'));
-      return;
-    }
-
-    setIsPublishing(true);
-    try {
-      // Convert data URL to blob for upload
-      const response = await fetch(imageUrl);
-      const blob = await response.blob();
-
-      if (option === 'overwrite') {
-        // Overwrite the existing image
-        const currentImageUrl = image;
-        if (currentImageUrl.includes('supabase.co/storage/')) {
-          const urlParts = currentImageUrl.split('/');
-          const fileName = urlParts[urlParts.length - 1];
-          const bucketPath = `${authorId}/${fileName}`;
-
-          await updateStorageFile(bucketPath, blob);
-
-          toast.success(translate('Image updated successfully!'));
-        } else {
-          toast.error(translate('Cannot overwrite this image'));
-          return;
-        }
-      } else {
-        // Create new image
-        const publicUrl = await uploadFileToStorage(user.id, blob);
-
-        await createPicture({
-          title: newTitle,
-          description: description || translate('Generated from') + `: ${title}`,
-          image_url: publicUrl,
-          user_id: user.id
-        } as any);
-
-        toast.success(translate('Image published to gallery!'));
-      }
-
-      setShowLightbox(false);
-      setGeneratedImageUrl(null);
-
-      // Trigger refresh if available
-      onLike?.();
-    } catch (error) {
-      console.error('Error publishing image:', error);
-      toast.error(translate('Failed to publish image'));
-    } finally {
-      setIsPublishing(false);
-    }
-  };
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onClick?.(pictureId);
-  };
-
-  const handleCardClick = (e: React.MouseEvent) => {
-    if (isVid) {
-      handleLightboxOpen();
-    } else {
-      handleClick(e);
-    }
-  };
-  // console.log(preset, variant);
-  return (
-    <div
-      data-testid="photo-card"
-      className={`group relative overflow-hidden bg-card border rounded-lg transition-all duration-300 cursor-pointer w-full ${className || ''}`}
-      onClick={handleCardClick}
-    >
-      {/* Image */}
-      <div className={`${variant === 'grid' && !className?.includes('h-full') ? "aspect-square" : ""} ${variant === 'feed' && !className?.includes('h-full') ? "aspect-[16/9]" : ""} ${className?.includes('h-full') ? 'flex-1 min-h-0' : ''} overflow-hidden`}>
-        <ResponsiveImage
-          src={image}
-          alt={title}
-          className={`w-full h-full ${imageFit === 'contain' ? 'bg-black/5' : ''}`}
-          imgClassName={`w-full h-full object-${imageFit} transition-transform duration-300`} /* TESTING: group-hover:scale-105 disabled */
-          sizes={variant === 'grid'
-            ? "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-            : "100vw"
-          }
-          responsiveSizes={variant === 'grid' ? [320, 640, 1024, 1280] : [640, 1024, 1280, 1920]} // 1920 added
-          data={responsive}
-          apiUrl={apiUrl}
-        />
-        {/* Helper Badge for External Images */}
-        {isExternal && (
-          <div className="absolute top-2 left-2 bg-black/60 text-white text-[10px] px-1.5 py-0.5 rounded flex items-center gap-1">
-            <ExternalLink className="w-3 h-3" />
-            External
-          </div>
-        )}
-      </div>
-
-
-      {variant === 'grid' && (title || description) && (
-        <div className="px-2 py-1.5 border-t">
-          {showTitle && title && !isLikelyFilename(title) && (
-            <h3 className="text-sm font-medium truncate">{title}</h3>
-          )}
-          {showDescription && description && (
-            <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{description}</p>
-          )}
-        </div>
-      )}
-
-      {/* TESTING: Entire desktop hover overlay disabled */}
-      {false && showContent && variant === 'grid' && (
-        <div className={`hidden md:block absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent ${overlayMode === 'always' ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity duration-300 pointer-events-none`}>
-          <div className="absolute bottom-0 left-0 right-0 p-4 pointer-events-auto">
-            <div className="flex items-center justify-between mb-2">
-              {showHeader && showAuthor && (
-                <div className="flex items-center space-x-2">
-                  <UserAvatarBlock
-                    userId={authorId}
-                    avatarUrl={authorAvatarUrl}
-                    displayName={author}
-                    hoverStyle={true}
-                    showDate={false}
-                  />
-                </div>
-              )}
-              <div className="flex items-center space-x-1">
-                {showActions && !isExternal && (
-                  <>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={handleLike}
-                      className={`h-8 w-8 p-0 ${localIsLiked ? "text-red-500" : "text-white hover:text-red-500"
-                        }`}
-                    >
-                      <Heart className="h-4 w-4" fill={localIsLiked ? "currentColor" : "none"} />
-                    </Button>
-                    {localLikes > 0 && <span className="text-white text-sm">{localLikes}</span>}
-
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-8 w-8 p-0 text-white hover:text-blue-400 ml-2"
-                    >
-                      <MessageCircle className="h-4 w-4" />
-                    </Button>
-                    <span className="text-white text-sm">{comments}</span>
-                  </>
-                )}
-
-                {isOwner && !isExternal && (
-                  <>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (onEdit) {
-                          onEdit(pictureId);
-                        } else {
-                          setShowEditModal(true);
-                        }
-                      }}
-                      className="h-8 w-8 p-0 text-white hover:text-green-400 ml-2"
-                    >
-                      <Edit3 className="h-4 w-4" />
-                    </Button>
-
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={handleDelete}
-                      disabled={isDeleting}
-                      className="h-8 w-8 p-0 text-white hover:text-red-400 ml-2"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-
-                    {localVersionCount > 1 && (
-                      <div className="flex items-center ml-2 px-2 py-1 bg-white/20 rounded text-white text-xs">
-                        <Layers className="h-3 w-3 mr-1" />
-                        {localVersionCount}
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-
-            {showTitle && !isLikelyFilename(title) && <h3 className="text-white font-medium mb-1">{title}</h3>}
-            {showDescription && description && (
-              <div className="text-white/80 text-sm mb-1 line-clamp-2 overflow-hidden">
-                <MarkdownRenderer content={description} className="prose-invert prose-white" />
-              </div>
-            )}
-
-            {createdAt && (
-              <div className="text-white/60 text-xs mb-2">
-                {formatDate(createdAt)}
-              </div>
-            )}
-
-            {showActions && (
-              <div className="flex items-center space-x-1">
-                <Button
-                  size="sm"
-                  variant="secondary"
-                  className="h-6 px-2 text-xs bg-white/20 hover:bg-white/30 border-0 text-white"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleDownload();
-                  }}
-                >
-                  <Download className="h-3 w-3 mr-1" />
-                  <T>Save</T>
-                </Button>
-                <Button
-                  size="sm"
-                  variant="secondary"
-                  className="h-6 w-6 p-0 bg-white/20 hover:bg-white/30 border-0 text-white"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleLightboxOpen();
-                  }}
-                  title="View in lightbox"
-                >
-                  <Maximize className="h-2.5 w-2.5" />
-                </Button>
-                <Button size="sm" variant="secondary" className="h-6 w-6 p-0 bg-white/20 hover:bg-white/30 border-0 text-white">
-                  <Share2 className="h-2.5 w-2.5" />
-                </Button>
-                {!isExternal && (
-                  <MagicWizardButton
-                    imageUrl={image}
-                    imageTitle={title}
-                    size="sm"
-                    variant="ghost"
-                    className="h-6 px-2 text-xs bg-white/20 hover:bg-white/30 border-0 text-white"
-                  />
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Mobile/Feed Content - always visible below image */}
-      {showContent && (variant === 'feed' || (variant === 'grid' && true)) && (
-        <div className={`${variant === 'grid' ? "md:hidden" : ""} pb-2 space-y-2`}>
-          {/* Row 1: User Avatar (Left) + Actions (Right) */}
-          <div className="flex items-center justify-between px-2 pt-2">
-            {/* User Avatar Block */}
-            {showAuthor && (
-              <UserAvatarBlock
-                userId={authorId}
-                avatarUrl={authorAvatarUrl}
-                displayName={author === 'User' ? undefined : author}
-                className="w-8 h-8"
-                showDate={false}
-              />
-            )}
-
-            {/* Actions */}
-            {showActions && (
-              <div className="flex items-center gap-1">
-                {!isExternal && (
-                  <>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      onClick={handleLike}
-                      className={localIsLiked ? "text-red-500 hover:text-red-600" : ""}
-                    >
-                      <Heart className="h-6 w-6" fill={localIsLiked ? "currentColor" : "none"} />
-                    </Button>
-                    {localLikes > 0 && (
-                      <span className="text-sm font-medium text-foreground mr-1">{localLikes}</span>
-                    )}
-
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="text-foreground"
-                    >
-                      <MessageCircle className="h-6 w-6 -rotate-90" />
-                    </Button>
-                    {comments > 0 && (
-                      <span className="text-sm font-medium text-foreground mr-1">{comments}</span>
-                    )}
-                  </>
-                )}
-
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="text-foreground"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleDownload();
-                  }}
-                >
-                  <Download className="h-6 w-6" />
-                </Button>
-
-                {!isExternal && (
-                  <MagicWizardButton
-                    imageUrl={image}
-                    imageTitle={title}
-                    size="icon"
-                    variant="ghost"
-                    className="text-foreground hover:text-primary"
-                  />
-                )}
-                {isOwner && !isExternal && (
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      if (onEdit) {
-                        onEdit(pictureId);
-                      } else {
-                        setShowEditModal(true);
-                      }
-                    }}
-                    className="text-foreground hover:text-green-400"
-                  >
-                    <Edit3 className="h-6 w-6" />
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* Likes */}
-
-
-          {/* Caption / Description section */}
-          <div className="px-4 space-y-1">
-            {showTitle && (!isLikelyFilename(title) && title) && (
-              <div className="font-semibold text-sm">{title}</div>
-            )}
-
-            {showDescription && description && (
-              <div className="text-sm text-foreground/90 line-clamp-3">
-                <MarkdownRenderer content={description} className="prose-sm dark:prose-invert" />
-              </div>
-            )}
-
-            {createdAt && (
-              <div className="text-xs text-muted-foreground pt-1">
-                {formatDate(createdAt)}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {showEditModal && !isExternal && (
-        <EditImageModal
-          open={showEditModal}
-          onOpenChange={setShowEditModal}
-          pictureId={pictureId}
-          currentTitle={title}
-          currentDescription={description}
-          currentVisible={true} // Default to true until we can properly pass this
-          onUpdateSuccess={() => {
-            setShowEditModal(false);
-            onLike?.(); // Trigger refresh
-          }}
-        />
-      )}
-
-      <ImageLightbox
-        isOpen={showLightbox}
-        onClose={() => {
-          setShowLightbox(false);
-          setGeneratedImageUrl(null);
-        }}
-        imageUrl={generatedImageUrl || image}
-        imageTitle={title}
-        onPromptSubmit={handlePromptSubmit}
-        onPublish={handlePublish}
-        isGenerating={isGenerating}
-        isPublishing={isPublishing}
-        showPrompt={!isExternal}
-        showPublish={!!generatedImageUrl && !isExternal}
-        generatedImageUrl={generatedImageUrl || undefined}
-      />
-    </div>
-  );
-};
-
-export default PhotoCard;
\ No newline at end of file
+import { Heart, Download, Share2, User, MessageCircle, Edit3, Trash2, Maximize, Layers, ExternalLink } from "lucide-react";
+import type { CardPreset } from "@/modules/pages/PageCard";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import React, { useState, useEffect } from "react";
+import MarkdownRenderer from "@/components/MarkdownRenderer";
+const EditImageModal = React.lazy(() => import("@/components/EditImageModal"));
+const ImageLightbox = React.lazy(() => import("@/components/ImageLightbox"));
+import MagicWizardButton from "@/components/MagicWizardButton";
+import { downloadImage, generateFilename } from "@/utils/downloadUtils";
+
+
+import { useNavigate } from "react-router-dom";
+import ResponsiveImage from "@/components/ResponsiveImage";
+import { T, translate } from "@/i18n";
+import { isLikelyFilename, formatDate } from "@/utils/textUtils";
+import UserAvatarBlock from "@/components/UserAvatarBlock";
+import { toggleLike, deletePicture, uploadFileToStorage, createPicture, updateStorageFile } from "@/modules/posts/client-pictures";
+
+interface PhotoCardProps {
+  pictureId: string;
+  image: string;
+  title: string;
+  author: string;
+  authorId: string;
+  likes: number;
+  comments: number;
+  isLiked?: boolean;
+  description?: string | null;
+  onClick?: (pictureId: string) => void;
+  onLike?: () => void;
+  onDelete?: () => void;
+  isVid?: boolean;
+  onEdit?: (pictureId: string) => void;
+  createdAt?: string;
+  authorAvatarUrl?: string | null;
+  showContent?: boolean;
+  showHeader?: boolean;
+  overlayMode?: 'hover' | 'always';
+  responsive?: any;
+  variant?: 'grid' | 'feed';
+  apiUrl?: string;
+  versionCount?: number;
+  isExternal?: boolean;
+  imageFit?: 'contain' | 'cover';
+  className?: string; // Allow custom classes from parent
+  preset?: CardPreset;
+  showAuthor?: boolean;
+  showActions?: boolean;
+  showTitle?: boolean;
+  showDescription?: boolean;
+}
+
+const PhotoCard = ({
+  pictureId,
+  image,
+  title,
+  author,
+  authorId,
+  likes,
+  comments,
+  isLiked = false,
+  description,
+  onClick,
+  onLike,
+  onDelete,
+  isVid,
+  onEdit,
+  createdAt,
+  authorAvatarUrl,
+  showContent = true,
+  showHeader = true,
+  overlayMode = 'hover',
+  responsive,
+  variant = 'grid',
+  apiUrl,
+  versionCount,
+  isExternal = false,
+  imageFit = 'contain',
+  className,
+  preset,
+  showAuthor = true,
+  showActions = true,
+  showTitle = true,
+  showDescription = true
+}: PhotoCardProps) => {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+
+  const [localIsLiked, setLocalIsLiked] = useState(isLiked);
+  const [localLikes, setLocalLikes] = useState(likes);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showLightbox, setShowLightbox] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isPublishing, setIsPublishing] = useState(false);
+
+  const [generatedImageUrl, setGeneratedImageUrl] = useState<string | null>(null);
+
+  const isOwner = user?.id === authorId;
+
+  // Fetch version count for owners only
+  const [localVersionCount, setLocalVersionCount] = useState<number>(versionCount || 0);
+
+  // Sync prop to state if needed, or just use prop. 
+  // If we want to allow local updates (e.g. after adding a version), we can keep state.
+  useEffect(() => {
+    if (versionCount !== undefined) {
+      setLocalVersionCount(versionCount);
+    }
+  }, [versionCount]);
+  const handleLike = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (isExternal) return;
+
+    if (!user) {
+      toast.error(translate('Please sign in to like pictures'));
+      return;
+    }
+
+    try {
+      const nowLiked = await toggleLike(user.id, pictureId, localIsLiked);
+      setLocalIsLiked(nowLiked);
+      setLocalLikes(prev => nowLiked ? prev + 1 : prev - 1);
+
+      onLike?.();
+    } catch (error) {
+      console.error('Error toggling like:', error);
+      toast.error(translate('Failed to update like'));
+    }
+  };
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (isExternal) return;
+
+    if (!user || !isOwner) {
+      toast.error(translate('You can only delete your own images'));
+      return;
+    }
+
+    if (!confirm(translate('Are you sure you want to delete this image? This action cannot be undone.'))) {
+      return;
+    }
+
+    setIsDeleting(true);
+    try {
+      await deletePicture(pictureId);
+
+      toast.success(translate('Image deleted successfully'));
+      onDelete?.(); // Trigger refresh of the parent component
+    } catch (error) {
+      console.error('Error deleting image:', error);
+      toast.error(translate('Failed to delete image'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleDownload = async () => {
+    try {
+      const filename = generateFilename(title);
+      await downloadImage(image, filename);
+      toast.success(translate('Image downloaded successfully'));
+    } catch (error) {
+      console.error('Error downloading image:', error);
+      toast.error(translate('Failed to download image'));
+    }
+  };
+
+  const handleLightboxOpen = () => {
+    setShowLightbox(true);
+  };
+
+
+
+  const handlePromptSubmit = async (prompt: string) => {
+    if (!prompt.trim()) {
+      toast.error(translate('Please enter a prompt'));
+      return;
+    }
+
+    setIsGenerating(true);
+    try {
+      // Convert image URL to File for API
+      const response = await fetch(image);
+      const blob = await response.blob();
+      const file = new File([blob], title || 'image.png', {
+        type: blob.type || 'image/png'
+      });
+
+      const { editImage } = await import("@/image-api");
+      const result = await editImage(prompt, [file]);
+
+      if (result) {
+        // Convert ArrayBuffer to base64 data URL  
+        const uint8Array = new Uint8Array(result.imageData);
+        const imageBlob = new Blob([uint8Array], { type: 'image/png' });
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          const dataUrl = reader.result as string;
+          setGeneratedImageUrl(dataUrl);
+          toast.success(translate('Image generated successfully!'));
+        };
+
+        reader.readAsDataURL(imageBlob);
+      }
+    } catch (error) {
+      console.error('Error generating image:', error);
+      toast.error(translate('Failed to generate image. Please check your Google API key.'));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handlePublish = async (option: 'overwrite' | 'new', imageUrl: string, newTitle: string, description?: string) => {
+    if (isExternal) {
+      toast.error(translate('Cannot publish external images'));
+      return;
+    }
+
+    if (!user) {
+      toast.error(translate('Please sign in to publish images'));
+      return;
+    }
+
+    setIsPublishing(true);
+    try {
+      // Convert data URL to blob for upload
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+
+      if (option === 'overwrite') {
+        // Overwrite the existing image
+        const currentImageUrl = image;
+        if (currentImageUrl.includes('supabase.co/storage/')) {
+          const urlParts = currentImageUrl.split('/');
+          const fileName = urlParts[urlParts.length - 1];
+          const bucketPath = `${authorId}/${fileName}`;
+
+          await updateStorageFile(bucketPath, blob);
+
+          toast.success(translate('Image updated successfully!'));
+        } else {
+          toast.error(translate('Cannot overwrite this image'));
+          return;
+        }
+      } else {
+        // Create new image
+        const publicUrl = await uploadFileToStorage(user.id, blob);
+
+        await createPicture({
+          title: newTitle,
+          description: description || translate('Generated from') + `: ${title}`,
+          image_url: publicUrl,
+          user_id: user.id
+        } as any);
+
+        toast.success(translate('Image published to gallery!'));
+      }
+
+      setShowLightbox(false);
+      setGeneratedImageUrl(null);
+
+      // Trigger refresh if available
+      onLike?.();
+    } catch (error) {
+      console.error('Error publishing image:', error);
+      toast.error(translate('Failed to publish image'));
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick?.(pictureId);
+  };
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if (isVid) {
+      handleLightboxOpen();
+    } else {
+      handleClick(e);
+    }
+  };
+  // console.log(preset, variant);
+  return (
+    <div
+      data-testid="photo-card"
+      className={`group relative overflow-hidden bg-card border rounded-lg transition-all duration-300 cursor-pointer w-full ${className || ''}`}
+      onClick={handleCardClick}
+    >
+      {/* Image */}
+      <div className={`${variant === 'grid' && !className?.includes('h-full') ? "aspect-square" : ""} ${variant === 'feed' && !className?.includes('h-full') ? "aspect-[16/9]" : ""} ${className?.includes('h-full') ? 'flex-1 min-h-0' : ''} overflow-hidden`}>
+        <ResponsiveImage
+          src={image}
+          alt={title}
+          className={`w-full h-full ${imageFit === 'contain' ? 'bg-black/5' : ''}`}
+          imgClassName={`w-full h-full object-${imageFit} transition-transform duration-300`} /* TESTING: group-hover:scale-105 disabled */
+          sizes={variant === 'grid'
+            ? "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+            : "100vw"
+          }
+          responsiveSizes={variant === 'grid' ? [320, 640, 1024, 1280] : [640, 1024, 1280, 1920]} // 1920 added
+          data={responsive}
+          apiUrl={apiUrl}
+        />
+        {/* Helper Badge for External Images */}
+        {isExternal && (
+          <div className="absolute top-2 left-2 bg-black/60 text-white text-[10px] px-1.5 py-0.5 rounded flex items-center gap-1">
+            <ExternalLink className="w-3 h-3" />
+            External
+          </div>
+        )}
+      </div>
+
+
+      {variant === 'grid' && (title || description) && (
+        <div className="px-2 py-1.5 border-t">
+          {showTitle && title && !isLikelyFilename(title) && (
+            <h3 className="text-sm font-medium truncate">{title}</h3>
+          )}
+          {showDescription && description && (
+            <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{description}</p>
+          )}
+        </div>
+      )}
+
+      {/* TESTING: Entire desktop hover overlay disabled */}
+      {false && showContent && variant === 'grid' && (
+        <div className={`hidden md:block absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent ${overlayMode === 'always' ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity duration-300 pointer-events-none`}>
+          <div className="absolute bottom-0 left-0 right-0 p-4 pointer-events-auto">
+            <div className="flex items-center justify-between mb-2">
+              {showHeader && showAuthor && (
+                <div className="flex items-center space-x-2">
+                  <UserAvatarBlock
+                    userId={authorId}
+                    avatarUrl={authorAvatarUrl}
+                    displayName={author}
+                    hoverStyle={true}
+                    showDate={false}
+                  />
+                </div>
+              )}
+              <div className="flex items-center space-x-1">
+                {showActions && !isExternal && (
+                  <>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={handleLike}
+                      className={`h-8 w-8 p-0 ${localIsLiked ? "text-red-500" : "text-white hover:text-red-500"
+                        }`}
+                    >
+                      <Heart className="h-4 w-4" fill={localIsLiked ? "currentColor" : "none"} />
+                    </Button>
+                    {localLikes > 0 && <span className="text-white text-sm">{localLikes}</span>}
+
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-8 w-8 p-0 text-white hover:text-blue-400 ml-2"
+                    >
+                      <MessageCircle className="h-4 w-4" />
+                    </Button>
+                    <span className="text-white text-sm">{comments}</span>
+                  </>
+                )}
+
+                {isOwner && !isExternal && (
+                  <>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (onEdit) {
+                          onEdit(pictureId);
+                        } else {
+                          setShowEditModal(true);
+                        }
+                      }}
+                      className="h-8 w-8 p-0 text-white hover:text-green-400 ml-2"
+                    >
+                      <Edit3 className="h-4 w-4" />
+                    </Button>
+
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={handleDelete}
+                      disabled={isDeleting}
+                      className="h-8 w-8 p-0 text-white hover:text-red-400 ml-2"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+
+                    {localVersionCount > 1 && (
+                      <div className="flex items-center ml-2 px-2 py-1 bg-white/20 rounded text-white text-xs">
+                        <Layers className="h-3 w-3 mr-1" />
+                        {localVersionCount}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+
+            {showTitle && !isLikelyFilename(title) && <h3 className="text-white font-medium mb-1">{title}</h3>}
+            {showDescription && description && (
+              <div className="text-white/80 text-sm mb-1 line-clamp-2 overflow-hidden">
+                <MarkdownRenderer content={description} className="prose-invert prose-white" />
+              </div>
+            )}
+
+            {createdAt && (
+              <div className="text-white/60 text-xs mb-2">
+                {formatDate(createdAt)}
+              </div>
+            )}
+
+            {showActions && (
+              <div className="flex items-center space-x-1">
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  className="h-6 px-2 text-xs bg-white/20 hover:bg-white/30 border-0 text-white"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDownload();
+                  }}
+                >
+                  <Download className="h-3 w-3 mr-1" />
+                  <T>Save</T>
+                </Button>
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  className="h-6 w-6 p-0 bg-white/20 hover:bg-white/30 border-0 text-white"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleLightboxOpen();
+                  }}
+                  title="View in lightbox"
+                >
+                  <Maximize className="h-2.5 w-2.5" />
+                </Button>
+                <Button size="sm" variant="secondary" className="h-6 w-6 p-0 bg-white/20 hover:bg-white/30 border-0 text-white">
+                  <Share2 className="h-2.5 w-2.5" />
+                </Button>
+                {!isExternal && (
+                  <MagicWizardButton
+                    imageUrl={image}
+                    imageTitle={title}
+                    size="sm"
+                    variant="ghost"
+                    className="h-6 px-2 text-xs bg-white/20 hover:bg-white/30 border-0 text-white"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Mobile/Feed Content - always visible below image */}
+      {showContent && (variant === 'feed' || (variant === 'grid' && true)) && (
+        <div className={`${variant === 'grid' ? "md:hidden" : ""} pb-2 space-y-2`}>
+          {/* Row 1: User Avatar (Left) + Actions (Right) */}
+          <div className="flex items-center justify-between px-2 pt-2">
+            {/* User Avatar Block */}
+            {showAuthor && (
+              <UserAvatarBlock
+                userId={authorId}
+                avatarUrl={authorAvatarUrl}
+                displayName={author === 'User' ? undefined : author}
+                className="w-8 h-8"
+                showDate={false}
+              />
+            )}
+
+            {/* Actions */}
+            {showActions && (
+              <div className="flex items-center gap-1">
+                {!isExternal && (
+                  <>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      onClick={handleLike}
+                      className={localIsLiked ? "text-red-500 hover:text-red-600" : ""}
+                    >
+                      <Heart className="h-6 w-6" fill={localIsLiked ? "currentColor" : "none"} />
+                    </Button>
+                    {localLikes > 0 && (
+                      <span className="text-sm font-medium text-foreground mr-1">{localLikes}</span>
+                    )}
+
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="text-foreground"
+                    >
+                      <MessageCircle className="h-6 w-6 -rotate-90" />
+                    </Button>
+                    {comments > 0 && (
+                      <span className="text-sm font-medium text-foreground mr-1">{comments}</span>
+                    )}
+                  </>
+                )}
+
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDownload();
+                  }}
+                >
+                  <Download className="h-6 w-6" />
+                </Button>
+
+                {!isExternal && (
+                  <MagicWizardButton
+                    imageUrl={image}
+                    imageTitle={title}
+                    size="icon"
+                    variant="ghost"
+                    className="text-foreground hover:text-primary"
+                  />
+                )}
+                {isOwner && !isExternal && (
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (onEdit) {
+                        onEdit(pictureId);
+                      } else {
+                        setShowEditModal(true);
+                      }
+                    }}
+                    className="text-foreground hover:text-green-400"
+                  >
+                    <Edit3 className="h-6 w-6" />
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Likes */}
+
+
+          {/* Caption / Description section */}
+          <div className="px-4 space-y-1">
+            {showTitle && (!isLikelyFilename(title) && title) && (
+              <div className="font-semibold text-sm">{title}</div>
+            )}
+
+            {showDescription && description && (
+              <div className="text-sm text-foreground/90 line-clamp-3">
+                <MarkdownRenderer content={description} className="prose-sm dark:prose-invert" />
+              </div>
+            )}
+
+            {createdAt && (
+              <div className="text-xs text-muted-foreground pt-1">
+                {formatDate(createdAt)}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {showEditModal && !isExternal && (
+        <EditImageModal
+          open={showEditModal}
+          onOpenChange={setShowEditModal}
+          pictureId={pictureId}
+          currentTitle={title}
+          currentDescription={description}
+          currentVisible={true} // Default to true until we can properly pass this
+          onUpdateSuccess={() => {
+            setShowEditModal(false);
+            onLike?.(); // Trigger refresh
+          }}
+        />
+      )}
+
+      <ImageLightbox
+        isOpen={showLightbox}
+        onClose={() => {
+          setShowLightbox(false);
+          setGeneratedImageUrl(null);
+        }}
+        imageUrl={generatedImageUrl || image}
+        imageTitle={title}
+        onPromptSubmit={handlePromptSubmit}
+        onPublish={handlePublish}
+        isGenerating={isGenerating}
+        isPublishing={isPublishing}
+        showPrompt={!isExternal}
+        showPublish={!!generatedImageUrl && !isExternal}
+        generatedImageUrl={generatedImageUrl || undefined}
+      />
+    </div>
+  );
+};
+
+export default PhotoCard;
diff --git a/packages/ui/src/components/PhotoGrid.tsx b/packages/ui/src/components/PhotoGrid.tsx
index d25e595e..8b2b84aa 100644
--- a/packages/ui/src/components/PhotoGrid.tsx
+++ b/packages/ui/src/components/PhotoGrid.tsx
@@ -1,642 +1,642 @@
-import { UserProfile } from '@/modules/posts/views/types';
-import MediaCard from "./MediaCard";
-import React, { useEffect, useState, useRef } from "react";
-import { useAuth } from "@/hooks/useAuth";
-import { useNavigate } from "react-router-dom";
-
-import { useOrganization } from "@/contexts/OrganizationContext";
-import { useFeedCache } from "@/contexts/FeedCacheContext";
-import { useLayoutEffect } from "react";
-
-import { useFeedData } from "@/hooks/useFeedData";
-
-import { normalizeMediaType, isVideoType } from "@/lib/mediaRegistry";
-import { UploadCloud, Maximize, FolderTree } from "lucide-react";
-import { toast } from "sonner";
-import { T } from "@/i18n";
-import type { MediaType } from "@/types";
-import type { CardPreset } from "@/modules/pages/PageCard";
-
-export interface MediaItemType {
-  id: string;
-  picture_id?: string;
-  title: string;
-  description: string | null;
-  image_url: string;
-  thumbnail_url: string | null;
-  type: MediaType;
-  meta: any | null;
-  likes_count: number;
-  created_at: string;
-  user_id: string;
-  comments: { count: number }[];
-
-  author?: UserProfile;
-  job?: any;
-  responsive?: any; // Add responsive data
-  versionCount?: number;
-  _searchSource?: string;
-}
-
-import type { FeedSortOption } from '@/hooks/useFeedData';
-import { mapFeedPostsToMediaItems, fetchPostById } from "@/modules/posts/client-posts";
-import { fetchUserMediaLikes } from "@/modules/posts/client-pictures";
-
-
-interface MediaGridProps {
-  customPictures?: MediaItemType[];
-  customLoading?: boolean;
-  navigationSource?: 'home' | 'collection' | 'tag' | 'user' | 'widget' | 'search';
-  navigationSourceId?: string;
-  isOwner?: boolean;
-  onFilesDrop?: (files: File[]) => void;
-  showVideos?: boolean; // Toggle video display (kept for backward compatibility)
-  sortBy?: FeedSortOption;
-  supabaseClient?: any;
-  apiUrl?: string;
-  categorySlugs?: string[];
-  categoryIds?: string[];
-  preset?: CardPreset;
-  contentType?: 'posts' | 'pages' | 'pictures' | 'files';
-  visibilityFilter?: 'invisible' | 'private';
-  center?: boolean;
-  columns?: number | 'auto';
-}
-
-const DEFAULT_PRESET: CardPreset = { showTitle: true, showDescription: true };
-
-const MediaGrid = ({
-  customPictures,
-  customLoading,
-  navigationSource = 'home',
-  navigationSourceId,
-  isOwner = false,
-  onFilesDrop,
-  showVideos = true,
-  sortBy = 'latest',
-  supabaseClient,
-  apiUrl,
-  categorySlugs,
-  categoryIds,
-  preset = DEFAULT_PRESET,
-  contentType,
-  visibilityFilter,
-  center,
-  columns = 'auto'
-}: MediaGridProps) => {
-  const { user } = useAuth();
-  const navigate = useNavigate();
-
-
-
-
-  const { orgSlug, isOrgContext } = useOrganization();
-  // State definitions restored
-  const { getCache, saveCache } = useFeedCache();
-  const [mediaItems, setMediaItems] = useState<MediaItemType[]>([]);
-  const [userLikes, setUserLikes] = useState<Set<string>>(new Set());
-  const [isDragging, setIsDragging] = useState(false);
-  const dragLeaveTimeoutRef = useRef<number | null>(null);
-
-  // 1. Data Fetching
-  const {
-    posts: feedPosts,
-    loading: feedLoading,
-    hasMore,
-    loadMore,
-    isFetchingMore
-  } = useFeedData({
-    source: navigationSource,
-    sourceId: navigationSourceId,
-    isOrgContext,
-    orgSlug,
-    sortBy,
-    categorySlugs,
-    categoryIds,
-    contentType,
-    visibilityFilter,
-    // Disable hook if we have custom pictures
-    enabled: !customPictures,
-    supabaseClient
-  });
-
-  // Derive loading from hook/props instead of syncing via setState
-  const loading = customPictures ? (customLoading || false) : feedLoading;
-
-  // Infinite Scroll Observer
-  const observerTarget = useRef(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      entries => {
-        if (entries[0].isIntersecting && hasMore && !feedLoading && !isFetchingMore) {
-          loadMore();
-        }
-      },
-      { threshold: 1.0 }
-    );
-
-    if (observerTarget.current) {
-      observer.observe(observerTarget.current);
-    }
-
-    return () => {
-      if (observerTarget.current) {
-        observer.unobserve(observerTarget.current);
-      }
-    };
-  }, [hasMore, feedLoading, isFetchingMore, loadMore]);
-
-  // 2. State & Effects
-  useEffect(() => {
-    let finalMedia: MediaItemType[] = [];
-
-    if (customPictures) {
-      finalMedia = customPictures;
-    } else {
-      // Map FeedPost[] -> MediaItemType[]
-      finalMedia = mapFeedPostsToMediaItems(feedPosts as any, sortBy);
-    }
-
-    setMediaItems(finalMedia);
-  }, [feedPosts, customPictures, sortBy]);
-
-  // Scroll Restoration Logic
-  const cacheKey = `${navigationSource}-${navigationSourceId || ''}-${isOrgContext ? 'org' : 'personal'}-${orgSlug || ''}`;
-  const hasRestoredScroll = useRef(false);
-
-  // Restore scroll when mediaItems are populated
-  useLayoutEffect(() => {
-    // Enable restoration if we have items, haven't restored yet, and either it's NOT custom pictures OR it IS a widget with an ID
-    const shouldRestore = mediaItems.length > 0 &&
-      !hasRestoredScroll.current &&
-      (!customPictures || (navigationSource === 'widget' && navigationSourceId));
-
-    if (shouldRestore) {
-      const cached = getCache(cacheKey);
-
-      if (cached && cached.scrollY > 0) {
-        window.scrollTo(0, cached.scrollY);
-      }
-      hasRestoredScroll.current = true;
-    }
-  }, [mediaItems, cacheKey, getCache, customPictures, navigationSource, navigationSourceId]);
-
-  // Reset restored flag when source changes
-  useEffect(() => {
-    hasRestoredScroll.current = false;
-  }, [cacheKey]);
-
-  // Track scroll position
-  const lastScrollY = useRef(window.scrollY);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      lastScrollY.current = window.scrollY;
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  // Save scroll position on unmount or before source change
-  useEffect(() => {
-    return () => {
-      // Save if not custom pictures OR if it is a widget with an ID
-      const shouldSave = !customPictures || (navigationSource === 'widget' && navigationSourceId);
-
-      if (shouldSave) {
-        const cached = getCache(cacheKey); // Get latest data from cache (posts etc)
-        // Use lastScrollY instead of window.scrollY because unmount might happen after a scroll-to-top by router
-
-        if (cached && lastScrollY.current > 0) {
-          saveCache(cacheKey, { ...cached, scrollY: lastScrollY.current });
-        }
-      }
-    };
-  }, [cacheKey, getCache, saveCache, customPictures, navigationSource, navigationSourceId]);
-
-  const fetchMediaFromPicturesTable = async () => {
-    // Manual Refresh Stub if needed - for onDelete/refresh actions
-    // Since the hook data is reactive, we might need a refresh function from the hook
-    // But for now, we can just reload the page or implement refresh in future.
-    window.location.reload();
-  };
-
-  const fetchUserLikes = async () => {
-    if (!user || mediaItems.length === 0) return;
-
-    try {
-      const { pictureLikes } = await fetchUserMediaLikes(user.id);
-
-      // Filter to only displayed items
-      const targetIds = new Set(
-        mediaItems.map(item => item.picture_id || item.id).filter(Boolean)
-      );
-
-      setUserLikes(prev => {
-        const newSet = new Set(prev);
-        pictureLikes.forEach(id => {
-          if (targetIds.has(id)) newSet.add(id);
-        });
-        return newSet;
-      });
-    } catch (error) {
-      console.error('Error fetching user likes:', error);
-    }
-  };
-
-  const handleMediaClick = (mediaId: string, type: MediaType, index: number) => {
-    const item = mediaItems.find(i => i.id === mediaId);
-
-    if (item?.meta?.url) {
-      navigate(item.meta.url);
-      return;
-    }
-
-    if (type === 'page-intern') {
-      if (item && item.meta?.slug) {
-        navigate(`/user/${item.author?.username || item.user_id}/pages/${item.meta.slug}`);
-        return;
-      }
-    }
-
-    navigate(`/post/${mediaId}`);
-  };
-
-  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (dragLeaveTimeoutRef.current) {
-      clearTimeout(dragLeaveTimeoutRef.current);
-    }
-    if (isOwner && onFilesDrop) setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (dragLeaveTimeoutRef.current) {
-      clearTimeout(dragLeaveTimeoutRef.current);
-    }
-    dragLeaveTimeoutRef.current = window.setTimeout(() => {
-      setIsDragging(false);
-    }, 100);
-  };
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-
-    if (!isOwner || !onFilesDrop) return;
-
-    const files = [...e.dataTransfer.files].filter(f => f.type.startsWith('image/'));
-    if (files.length > 0) {
-      onFilesDrop(files);
-    }
-  };
-
-  const handleEditPost = async (postId: string) => {
-    try {
-      const toastId = toast.loading('Loading post for editing...');
-
-      // Fetch full post via API (returns FeedPost with pictures)
-      const post = await fetchPostById(postId);
-
-      if (!post) throw new Error('Post not found');
-
-      if (!post.pictures || post.pictures.length === 0) {
-        throw new Error('No pictures found in post');
-      }
-
-      // Transform pictures for wizard
-      const wizardImages = post.pictures
-        .sort((a: any, b: any) => ((a.position || 0) - (b.position || 0)))
-        .map((p: any) => ({
-          id: p.id,
-          path: p.id,
-          src: p.image_url,
-          title: p.title,
-          description: p.description || '',
-          selected: false,
-          realDatabaseId: p.id
-        }));
-
-      toast.dismiss(toastId);
-
-      navigate('/wizard', {
-        state: {
-          mode: 'post',
-          initialImages: wizardImages,
-          postTitle: post.title,
-          postDescription: post.description,
-          editingPostId: post.id
-        }
-      });
-    } catch (error) {
-      console.error('Error opening post editor:', error);
-      toast.error('Failed to open post editor');
-    }
-  };
-
-
-
-
-  // Group media items by category
-  // - When filtering by category: group by immediate subcategories (show parent + each child)
-  // - When on home feed: don't group (flat list)
-  const isSearchTabAllOrFiles = navigationSource === 'search' && (!contentType || contentType === 'files');
-  const shouldGroupByCategory = !!categorySlugs && categorySlugs.length > 0;
-
-  const getSearchGroup = (item: any): string => {
-      if (item.type === 'page-vfs-folder') return 'Folders';
-      if (item._searchSource === 'picture') return 'Pictures';
-      if (item._searchSource === 'file') {
-         if (item.thumbnail_url || item.cover || (item.pictures && item.pictures.length > 0)) return 'Pictures';
-         return 'Files';
-      }
-      if (item._searchSource === 'page') return 'Pages';
-      if (item._searchSource === 'post') return 'Posts';
-      return 'Posts';
-  };
-
-  const groupedItems = React.useMemo(() => {
-    if (isSearchTabAllOrFiles) {
-        const groups = new Map<string, MediaItemType[]>();
-        mediaItems.forEach(item => {
-            const group = getSearchGroup(item);
-            if (!groups.has(group)) groups.set(group, []);
-            groups.get(group)!.push(item);
-        });
-
-        const orderedGroups = ['Pages', 'Folders', 'Posts', 'Pictures', 'Files'];
-        const sections = [];
-        for (const group of orderedGroups) {
-            if (groups.has(group)) {
-                 sections.push({
-                     key: group,
-                     title: group,
-                     items: groups.get(group)!
-                 });
-            }
-        }
-        
-        if (sections.length > 0) return { sections };
-        return { sections: [{ key: 'all', title: null, items: mediaItems }] };
-    }
-
-    if (!shouldGroupByCategory) {
-      return { sections: [{ key: 'all', title: null, items: mediaItems }] };
-    }
-
-    const grouped = new Map<string, MediaItemType[]>();
-    const parentCategoryItems: MediaItemType[] = [];
-
-    mediaItems.forEach(item => {
-      // Find corresponding feed post to get category_paths
-      const feedPost = feedPosts.find(p => p.id === item.id || p.cover?.id === item.id);
-
-      if (!feedPost?.category_paths || feedPost.category_paths.length === 0) {
-        return;
-      }
-
-      // Check if item has an exact match to the parent category (path length = 1)
-      const hasExactParentMatch = feedPost.category_paths.some((path: any[]) =>
-        path.length === 1 && categorySlugs.includes(path[0].slug)
-      );
-
-      if (hasExactParentMatch) {
-        // Item is directly in the parent category
-        parentCategoryItems.push(item);
-        return;
-      }
-
-      // Otherwise, find the most specific path (longest) that includes the filtered category
-      let mostSpecificPath: any[] | null = null;
-      let categoryIndex = -1;
-
-      for (const path of feedPost.category_paths) {
-        const idx = path.findIndex((cat: any) => categorySlugs.includes(cat.slug));
-        if (idx !== -1) {
-          if (!mostSpecificPath || path.length > mostSpecificPath.length) {
-            mostSpecificPath = path;
-            categoryIndex = idx;
-          }
-        }
-      }
-
-      if (!mostSpecificPath || categoryIndex === -1) return;
-
-      // Item is in a subcategory - use the immediate child category
-      const subcategory = mostSpecificPath[categoryIndex + 1];
-      if (subcategory) {
-        const key = subcategory.slug;
-
-        if (!grouped.has(key)) {
-          grouped.set(key, []);
-        }
-        grouped.get(key)!.push(item);
-      }
-    });
-
-    const sections = [];
-
-    // Add parent category section first (if it has items)
-    if (parentCategoryItems.length > 0) {
-      sections.push({
-        key: categorySlugs[0],
-        title: categorySlugs[0].replace(/-/g, ' '),
-        items: parentCategoryItems
-      });
-    }
-
-    // Add subcategory sections
-    Array.from(grouped.entries()).forEach(([key, items]) => {
-      sections.push({
-        key,
-        title: key.replace(/-/g, ' '),
-        items
-      });
-    });
-
-    // If no sections, return all items in one section
-    if (sections.length === 0) {
-      return { sections: [{ key: 'all', title: null, items: mediaItems }] };
-    }
-
-    return { sections };
-  }, [mediaItems, feedPosts, shouldGroupByCategory, categorySlugs, navigationSource, isSearchTabAllOrFiles]);
-
-  if (loading) {
-    return (
-      <div className="py-8">
-        <div className="text-center text-muted-foreground">
-          Loading media...
-        </div>
-      </div>
-    );
-  }
-
-  const hasItems = mediaItems.length > 0;
-  return (
-    <div className="w-full relative">
-      {hasItems && isOwner && onFilesDrop && navigationSource === 'collection' && (
-        <div
-          className={`my-4 border-2 border-dashed border-muted rounded-lg p-6 text-center text-muted-foreground transition-all ${isDragging ? 'ring-4 ring-primary ring-offset-2 border-solid border-primary bg-primary/5' : ''
-            } `}
-          onDragEnter={handleDragEnter}
-          onDragLeave={handleDragLeave}
-          onDragOver={handleDragOver}
-          onDrop={handleDrop}
-        >
-          <UploadCloud className="mx-auto h-8 w-8 text-muted-foreground" />
-          <p className="mt-2 text-sm">Drag and drop more images here to upload.</p>
-        </div>
-      )}
-
-      {!hasItems ? (
-        isOwner && navigationSource === 'collection' && onFilesDrop ? (
-          <div
-            className="py-8"
-            onDragEnter={handleDragEnter}
-            onDragLeave={handleDragLeave}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-          >
-            <div className={`border-2 border-dashed border-muted rounded-lg p-12 text-center text-muted-foreground transition-all ${isDragging ? 'ring-4 ring-primary ring-offset-2 border-solid border-primary bg-primary/5' : ''
-              } `}>
-              <UploadCloud className="mx-auto h-12 w-12 text-muted-foreground" />
-              <h3 className="mt-4 text-lg font-semibold">This collection is empty</h3>
-              <p className="mt-2">Drag and drop images here to get started.</p>
-            </div>
-          </div>
-        ) : (
-          <div className="py-8">
-            <div className="text-center text-muted-foreground">
-              <p className="text-lg">No media yet!</p>
-              <p>Be the first to share content with the community.</p>
-            </div>
-          </div>
-        )
-      ) : (
-        <>
-          {groupedItems.sections.map((section) => (
-            <div key={section.key} className="mb-8">
-              {section.title && (
-                <h2 className="text-lg font-semibold mb-4 px-4 flex items-center gap-2 capitalize">
-                  <FolderTree className="h-5 w-5" />
-                  <T>{section.title}</T>
-                </h2>
-              )}
-              {(() => {
-                const isAuto = columns === 'auto';
-                const colNum = Number(columns);
-                const gridColsClass = isAuto ? 'grid-cols-[repeat(auto-fit,minmax(250px,380px))] justify-center' :
-                  colNum === 1 ? 'grid-cols-1' :
-                    colNum === 2 ? 'grid-cols-1 md:grid-cols-2' :
-                      colNum === 3 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' :
-                        colNum === 5 ? 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5' :
-                          colNum === 6 ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6' :
-                            'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
-                return (
-                  <div className={`grid ${gridColsClass} gap-4 px-4`}>
-                    {section.items.map((item, index) => {
-                      const itemType = normalizeMediaType(item.type);
-                      const isVideo = isVideoType(itemType);
-                      // For images, convert URL to optimized format
-                      const displayUrl = item.image_url;
-                      if (isVideo) {
-                        return (
-                          <div key={item.id} className="relative group">
-                            <MediaCard
-                              id={item.id}
-                              pictureId={item.picture_id}
-                              url={displayUrl}
-                              thumbnailUrl={item.thumbnail_url}
-                              title={item.title}
-                              // Pass blank/undefined so UserAvatarBlock uses context data
-                              author={undefined as any}
-                              authorAvatarUrl={undefined}
-                              authorId={item.user_id}
-                              likes={item.likes_count || 0}
-                              comments={item.comments[0]?.count || 0}
-                              isLiked={userLikes.has(item.picture_id || item.id)}
-                              description={item.description}
-                              type={itemType}
-                              meta={item.meta}
-                              onClick={() => handleMediaClick(item.id, itemType, index)}
-                              onLike={fetchUserLikes}
-                              onDelete={fetchMediaFromPicturesTable}
-                              onEdit={handleEditPost}
-                              created_at={item.created_at}
-                              job={item.job}
-                              responsive={item.responsive}
-                              apiUrl={apiUrl}
-                              preset={preset}
-                            />
-                            <div className="absolute top-2 right-2 flex items-center justify-center w-8 h-8 bg-black/50 rounded-full opacity-0 transition-opacity"> {/* TESTING: group-hover:opacity-100 disabled */}
-                              <Maximize className="w-4 h-4 text-white" />
-                            </div>
-                          </div>
-                        );
-                      }
-
-                      return (
-                        <MediaCard
-                          key={item.id}
-                          id={item.id}
-                          pictureId={item.picture_id}
-                          url={displayUrl}
-                          thumbnailUrl={item.thumbnail_url}
-                          title={item.title}
-                          author={undefined as any}
-                          authorAvatarUrl={undefined}
-                          authorId={item.user_id}
-                          likes={item.likes_count || 0}
-                          comments={item?.comments?.[0]?.count || 0}
-                          isLiked={userLikes.has(item.picture_id || item.id)}
-                          description={item.description}
-                          type={itemType}
-                          meta={item.meta}
-                          onClick={() => handleMediaClick(item.id, itemType, index)}
-                          onLike={fetchUserLikes}
-                          onDelete={fetchMediaFromPicturesTable}
-                          onEdit={handleEditPost}
-
-                          created_at={item.created_at}
-                          job={item.job}
-                          responsive={item.responsive}
-                          apiUrl={apiUrl}
-                          preset={preset}
-                        />
-                      );
-                    })}
-                  </div>
-                );
-              })()}
-            </div>
-          ))}
-        </>
-      )}
-
-      {/* Loading Indicator / Observer Target */}
-      <div ref={observerTarget} className="h-10 w-full flex items-center justify-center p-4">
-        {isFetchingMore && (
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// Backward compatibility export
-export default MediaGrid;
-
-// Named exports for clarity
-export { MediaGrid };
-export const PhotoGrid = MediaGrid;
\ No newline at end of file
+import { UserProfile } from '@/modules/posts/views/types';
+import MediaCard from "./MediaCard";
+import React, { useEffect, useState, useRef } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useNavigate } from "react-router-dom";
+
+import { useOrganization } from "@/contexts/OrganizationContext";
+import { useFeedCache } from "@/contexts/FeedCacheContext";
+import { useLayoutEffect } from "react";
+
+import { useFeedData } from "@/hooks/useFeedData";
+
+import { normalizeMediaType, isVideoType } from "@/lib/mediaRegistry";
+import { UploadCloud, Maximize, FolderTree } from "lucide-react";
+import { toast } from "sonner";
+import { T } from "@/i18n";
+import type { MediaType } from "@/types";
+import type { CardPreset } from "@/modules/pages/PageCard";
+
+export interface MediaItemType {
+  id: string;
+  picture_id?: string;
+  title: string;
+  description: string | null;
+  image_url: string;
+  thumbnail_url: string | null;
+  type: MediaType;
+  meta: any | null;
+  likes_count: number;
+  created_at: string;
+  user_id: string;
+  comments: { count: number }[];
+
+  author?: UserProfile;
+  job?: any;
+  responsive?: any; // Add responsive data
+  versionCount?: number;
+  _searchSource?: string;
+}
+
+import type { FeedSortOption } from '@/hooks/useFeedData';
+import { mapFeedPostsToMediaItems, fetchPostById } from "@/modules/posts/client-posts";
+import { fetchUserMediaLikes } from "@/modules/posts/client-pictures";
+
+
+interface MediaGridProps {
+  customPictures?: MediaItemType[];
+  customLoading?: boolean;
+  navigationSource?: 'home' | 'collection' | 'tag' | 'user' | 'widget' | 'search';
+  navigationSourceId?: string;
+  isOwner?: boolean;
+  onFilesDrop?: (files: File[]) => void;
+  showVideos?: boolean; // Toggle video display (kept for backward compatibility)
+  sortBy?: FeedSortOption;
+  supabaseClient?: any;
+  apiUrl?: string;
+  categorySlugs?: string[];
+  categoryIds?: string[];
+  preset?: CardPreset;
+  contentType?: 'posts' | 'pages' | 'pictures' | 'files';
+  visibilityFilter?: 'invisible' | 'private';
+  center?: boolean;
+  columns?: number | 'auto';
+}
+
+const DEFAULT_PRESET: CardPreset = { showTitle: true, showDescription: true };
+
+const MediaGrid = ({
+  customPictures,
+  customLoading,
+  navigationSource = 'home',
+  navigationSourceId,
+  isOwner = false,
+  onFilesDrop,
+  showVideos = true,
+  sortBy = 'latest',
+  supabaseClient,
+  apiUrl,
+  categorySlugs,
+  categoryIds,
+  preset = DEFAULT_PRESET,
+  contentType,
+  visibilityFilter,
+  center,
+  columns = 'auto'
+}: MediaGridProps) => {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+
+
+
+
+  const { orgSlug, isOrgContext } = useOrganization();
+  // State definitions restored
+  const { getCache, saveCache } = useFeedCache();
+  const [mediaItems, setMediaItems] = useState<MediaItemType[]>([]);
+  const [userLikes, setUserLikes] = useState<Set<string>>(new Set());
+  const [isDragging, setIsDragging] = useState(false);
+  const dragLeaveTimeoutRef = useRef<number | null>(null);
+
+  // 1. Data Fetching
+  const {
+    posts: feedPosts,
+    loading: feedLoading,
+    hasMore,
+    loadMore,
+    isFetchingMore
+  } = useFeedData({
+    source: navigationSource,
+    sourceId: navigationSourceId,
+    isOrgContext,
+    orgSlug,
+    sortBy,
+    categorySlugs,
+    categoryIds,
+    contentType,
+    visibilityFilter,
+    // Disable hook if we have custom pictures
+    enabled: !customPictures,
+    supabaseClient
+  });
+
+  // Derive loading from hook/props instead of syncing via setState
+  const loading = customPictures ? (customLoading || false) : feedLoading;
+
+  // Infinite Scroll Observer
+  const observerTarget = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0].isIntersecting && hasMore && !feedLoading && !isFetchingMore) {
+          loadMore();
+        }
+      },
+      { threshold: 1.0 }
+    );
+
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current);
+    }
+
+    return () => {
+      if (observerTarget.current) {
+        observer.unobserve(observerTarget.current);
+      }
+    };
+  }, [hasMore, feedLoading, isFetchingMore, loadMore]);
+
+  // 2. State & Effects
+  useEffect(() => {
+    let finalMedia: MediaItemType[] = [];
+
+    if (customPictures) {
+      finalMedia = customPictures;
+    } else {
+      // Map FeedPost[] -> MediaItemType[]
+      finalMedia = mapFeedPostsToMediaItems(feedPosts as any, sortBy);
+    }
+
+    setMediaItems(finalMedia);
+  }, [feedPosts, customPictures, sortBy]);
+
+  // Scroll Restoration Logic
+  const cacheKey = `${navigationSource}-${navigationSourceId || ''}-${isOrgContext ? 'org' : 'personal'}-${orgSlug || ''}`;
+  const hasRestoredScroll = useRef(false);
+
+  // Restore scroll when mediaItems are populated
+  useLayoutEffect(() => {
+    // Enable restoration if we have items, haven't restored yet, and either it's NOT custom pictures OR it IS a widget with an ID
+    const shouldRestore = mediaItems.length > 0 &&
+      !hasRestoredScroll.current &&
+      (!customPictures || (navigationSource === 'widget' && navigationSourceId));
+
+    if (shouldRestore) {
+      const cached = getCache(cacheKey);
+
+      if (cached && cached.scrollY > 0) {
+        window.scrollTo(0, cached.scrollY);
+      }
+      hasRestoredScroll.current = true;
+    }
+  }, [mediaItems, cacheKey, getCache, customPictures, navigationSource, navigationSourceId]);
+
+  // Reset restored flag when source changes
+  useEffect(() => {
+    hasRestoredScroll.current = false;
+  }, [cacheKey]);
+
+  // Track scroll position
+  const lastScrollY = useRef(window.scrollY);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      lastScrollY.current = window.scrollY;
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Save scroll position on unmount or before source change
+  useEffect(() => {
+    return () => {
+      // Save if not custom pictures OR if it is a widget with an ID
+      const shouldSave = !customPictures || (navigationSource === 'widget' && navigationSourceId);
+
+      if (shouldSave) {
+        const cached = getCache(cacheKey); // Get latest data from cache (posts etc)
+        // Use lastScrollY instead of window.scrollY because unmount might happen after a scroll-to-top by router
+
+        if (cached && lastScrollY.current > 0) {
+          saveCache(cacheKey, { ...cached, scrollY: lastScrollY.current });
+        }
+      }
+    };
+  }, [cacheKey, getCache, saveCache, customPictures, navigationSource, navigationSourceId]);
+
+  const fetchMediaFromPicturesTable = async () => {
+    // Manual Refresh Stub if needed - for onDelete/refresh actions
+    // Since the hook data is reactive, we might need a refresh function from the hook
+    // But for now, we can just reload the page or implement refresh in future.
+    window.location.reload();
+  };
+
+  const fetchUserLikes = async () => {
+    if (!user || mediaItems.length === 0) return;
+
+    try {
+      const { pictureLikes } = await fetchUserMediaLikes(user.id);
+
+      // Filter to only displayed items
+      const targetIds = new Set(
+        mediaItems.map(item => item.picture_id || item.id).filter(Boolean)
+      );
+
+      setUserLikes(prev => {
+        const newSet = new Set(prev);
+        pictureLikes.forEach(id => {
+          if (targetIds.has(id)) newSet.add(id);
+        });
+        return newSet;
+      });
+    } catch (error) {
+      console.error('Error fetching user likes:', error);
+    }
+  };
+
+  const handleMediaClick = (mediaId: string, type: MediaType, index: number) => {
+    const item = mediaItems.find(i => i.id === mediaId);
+
+    if (item?.meta?.url) {
+      navigate(item.meta.url);
+      return;
+    }
+
+    if (type === 'page-intern') {
+      if (item && item.meta?.slug) {
+        navigate(`/user/${item.author?.username || item.user_id}/pages/${item.meta.slug}`);
+        return;
+      }
+    }
+
+    navigate(`/post/${mediaId}`);
+  };
+
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (dragLeaveTimeoutRef.current) {
+      clearTimeout(dragLeaveTimeoutRef.current);
+    }
+    if (isOwner && onFilesDrop) setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (dragLeaveTimeoutRef.current) {
+      clearTimeout(dragLeaveTimeoutRef.current);
+    }
+    dragLeaveTimeoutRef.current = window.setTimeout(() => {
+      setIsDragging(false);
+    }, 100);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    if (!isOwner || !onFilesDrop) return;
+
+    const files = [...e.dataTransfer.files].filter(f => f.type.startsWith('image/'));
+    if (files.length > 0) {
+      onFilesDrop(files);
+    }
+  };
+
+  const handleEditPost = async (postId: string) => {
+    try {
+      const toastId = toast.loading('Loading post for editing...');
+
+      // Fetch full post via API (returns FeedPost with pictures)
+      const post = await fetchPostById(postId);
+
+      if (!post) throw new Error('Post not found');
+
+      if (!post.pictures || post.pictures.length === 0) {
+        throw new Error('No pictures found in post');
+      }
+
+      // Transform pictures for wizard
+      const wizardImages = post.pictures
+        .sort((a: any, b: any) => ((a.position || 0) - (b.position || 0)))
+        .map((p: any) => ({
+          id: p.id,
+          path: p.id,
+          src: p.image_url,
+          title: p.title,
+          description: p.description || '',
+          selected: false,
+          realDatabaseId: p.id
+        }));
+
+      toast.dismiss(toastId);
+
+      navigate('/wizard', {
+        state: {
+          mode: 'post',
+          initialImages: wizardImages,
+          postTitle: post.title,
+          postDescription: post.description,
+          editingPostId: post.id
+        }
+      });
+    } catch (error) {
+      console.error('Error opening post editor:', error);
+      toast.error('Failed to open post editor');
+    }
+  };
+
+
+
+
+  // Group media items by category
+  // - When filtering by category: group by immediate subcategories (show parent + each child)
+  // - When on home feed: don't group (flat list)
+  const isSearchTabAllOrFiles = navigationSource === 'search' && (!contentType || contentType === 'files');
+  const shouldGroupByCategory = !!categorySlugs && categorySlugs.length > 0;
+
+  const getSearchGroup = (item: any): string => {
+      if (item.type === 'page-vfs-folder') return 'Folders';
+      if (item._searchSource === 'picture') return 'Pictures';
+      if (item._searchSource === 'file') {
+         if (item.thumbnail_url || item.cover || (item.pictures && item.pictures.length > 0)) return 'Pictures';
+         return 'Files';
+      }
+      if (item._searchSource === 'page') return 'Pages';
+      if (item._searchSource === 'post') return 'Posts';
+      return 'Posts';
+  };
+
+  const groupedItems = React.useMemo(() => {
+    if (isSearchTabAllOrFiles) {
+        const groups = new Map<string, MediaItemType[]>();
+        mediaItems.forEach(item => {
+            const group = getSearchGroup(item);
+            if (!groups.has(group)) groups.set(group, []);
+            groups.get(group)!.push(item);
+        });
+
+        const orderedGroups = ['Pages', 'Folders', 'Posts', 'Pictures', 'Files'];
+        const sections = [];
+        for (const group of orderedGroups) {
+            if (groups.has(group)) {
+                 sections.push({
+                     key: group,
+                     title: group,
+                     items: groups.get(group)!
+                 });
+            }
+        }
+        
+        if (sections.length > 0) return { sections };
+        return { sections: [{ key: 'all', title: null, items: mediaItems }] };
+    }
+
+    if (!shouldGroupByCategory) {
+      return { sections: [{ key: 'all', title: null, items: mediaItems }] };
+    }
+
+    const grouped = new Map<string, MediaItemType[]>();
+    const parentCategoryItems: MediaItemType[] = [];
+
+    mediaItems.forEach(item => {
+      // Find corresponding feed post to get category_paths
+      const feedPost = feedPosts.find(p => p.id === item.id || p.cover?.id === item.id);
+
+      if (!feedPost?.category_paths || feedPost.category_paths.length === 0) {
+        return;
+      }
+
+      // Check if item has an exact match to the parent category (path length = 1)
+      const hasExactParentMatch = feedPost.category_paths.some((path: any[]) =>
+        path.length === 1 && categorySlugs.includes(path[0].slug)
+      );
+
+      if (hasExactParentMatch) {
+        // Item is directly in the parent category
+        parentCategoryItems.push(item);
+        return;
+      }
+
+      // Otherwise, find the most specific path (longest) that includes the filtered category
+      let mostSpecificPath: any[] | null = null;
+      let categoryIndex = -1;
+
+      for (const path of feedPost.category_paths) {
+        const idx = path.findIndex((cat: any) => categorySlugs.includes(cat.slug));
+        if (idx !== -1) {
+          if (!mostSpecificPath || path.length > mostSpecificPath.length) {
+            mostSpecificPath = path;
+            categoryIndex = idx;
+          }
+        }
+      }
+
+      if (!mostSpecificPath || categoryIndex === -1) return;
+
+      // Item is in a subcategory - use the immediate child category
+      const subcategory = mostSpecificPath[categoryIndex + 1];
+      if (subcategory) {
+        const key = subcategory.slug;
+
+        if (!grouped.has(key)) {
+          grouped.set(key, []);
+        }
+        grouped.get(key)!.push(item);
+      }
+    });
+
+    const sections = [];
+
+    // Add parent category section first (if it has items)
+    if (parentCategoryItems.length > 0) {
+      sections.push({
+        key: categorySlugs[0],
+        title: categorySlugs[0].replace(/-/g, ' '),
+        items: parentCategoryItems
+      });
+    }
+
+    // Add subcategory sections
+    Array.from(grouped.entries()).forEach(([key, items]) => {
+      sections.push({
+        key,
+        title: key.replace(/-/g, ' '),
+        items
+      });
+    });
+
+    // If no sections, return all items in one section
+    if (sections.length === 0) {
+      return { sections: [{ key: 'all', title: null, items: mediaItems }] };
+    }
+
+    return { sections };
+  }, [mediaItems, feedPosts, shouldGroupByCategory, categorySlugs, navigationSource, isSearchTabAllOrFiles]);
+
+  if (loading) {
+    return (
+      <div className="py-8">
+        <div className="text-center text-muted-foreground">
+          Loading media...
+        </div>
+      </div>
+    );
+  }
+
+  const hasItems = mediaItems.length > 0;
+  return (
+    <div className="w-full relative">
+      {hasItems && isOwner && onFilesDrop && navigationSource === 'collection' && (
+        <div
+          className={`my-4 border-2 border-dashed border-muted rounded-lg p-6 text-center text-muted-foreground transition-all ${isDragging ? 'ring-4 ring-primary ring-offset-2 border-solid border-primary bg-primary/5' : ''
+            } `}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+        >
+          <UploadCloud className="mx-auto h-8 w-8 text-muted-foreground" />
+          <p className="mt-2 text-sm">Drag and drop more images here to upload.</p>
+        </div>
+      )}
+
+      {!hasItems ? (
+        isOwner && navigationSource === 'collection' && onFilesDrop ? (
+          <div
+            className="py-8"
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+          >
+            <div className={`border-2 border-dashed border-muted rounded-lg p-12 text-center text-muted-foreground transition-all ${isDragging ? 'ring-4 ring-primary ring-offset-2 border-solid border-primary bg-primary/5' : ''
+              } `}>
+              <UploadCloud className="mx-auto h-12 w-12 text-muted-foreground" />
+              <h3 className="mt-4 text-lg font-semibold">This collection is empty</h3>
+              <p className="mt-2">Drag and drop images here to get started.</p>
+            </div>
+          </div>
+        ) : (
+          <div className="py-8">
+            <div className="text-center text-muted-foreground">
+              <p className="text-lg">No media yet!</p>
+              <p>Be the first to share content with the community.</p>
+            </div>
+          </div>
+        )
+      ) : (
+        <>
+          {groupedItems.sections.map((section) => (
+            <div key={section.key} className="mb-8">
+              {section.title && (
+                <h2 className="text-lg font-semibold mb-4 px-4 flex items-center gap-2 capitalize">
+                  <FolderTree className="h-5 w-5" />
+                  <T>{section.title}</T>
+                </h2>
+              )}
+              {(() => {
+                const isAuto = columns === 'auto';
+                const colNum = Number(columns);
+                const gridColsClass = isAuto ? 'grid-cols-[repeat(auto-fit,minmax(250px,380px))] justify-center' :
+                  colNum === 1 ? 'grid-cols-1' :
+                    colNum === 2 ? 'grid-cols-1 md:grid-cols-2' :
+                      colNum === 3 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' :
+                        colNum === 5 ? 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5' :
+                          colNum === 6 ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6' :
+                            'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
+                return (
+                  <div className={`grid ${gridColsClass} gap-4 px-4`}>
+                    {section.items.map((item, index) => {
+                      const itemType = normalizeMediaType(item.type);
+                      const isVideo = isVideoType(itemType);
+                      // For images, convert URL to optimized format
+                      const displayUrl = item.image_url;
+                      if (isVideo) {
+                        return (
+                          <div key={item.id} className="relative group">
+                            <MediaCard
+                              id={item.id}
+                              pictureId={item.picture_id}
+                              url={displayUrl}
+                              thumbnailUrl={item.thumbnail_url}
+                              title={item.title}
+                              // Pass blank/undefined so UserAvatarBlock uses context data
+                              author={undefined as any}
+                              authorAvatarUrl={undefined}
+                              authorId={item.user_id}
+                              likes={item.likes_count || 0}
+                              comments={item.comments[0]?.count || 0}
+                              isLiked={userLikes.has(item.picture_id || item.id)}
+                              description={item.description}
+                              type={itemType}
+                              meta={item.meta}
+                              onClick={() => handleMediaClick(item.id, itemType, index)}
+                              onLike={fetchUserLikes}
+                              onDelete={fetchMediaFromPicturesTable}
+                              onEdit={handleEditPost}
+                              created_at={item.created_at}
+                              job={item.job}
+                              responsive={item.responsive}
+                              apiUrl={apiUrl}
+                              preset={preset}
+                            />
+                            <div className="absolute top-2 right-2 flex items-center justify-center w-8 h-8 bg-black/50 rounded-full opacity-0 transition-opacity"> {/* TESTING: group-hover:opacity-100 disabled */}
+                              <Maximize className="w-4 h-4 text-white" />
+                            </div>
+                          </div>
+                        );
+                      }
+
+                      return (
+                        <MediaCard
+                          key={item.id}
+                          id={item.id}
+                          pictureId={item.picture_id}
+                          url={displayUrl}
+                          thumbnailUrl={item.thumbnail_url}
+                          title={item.title}
+                          author={undefined as any}
+                          authorAvatarUrl={undefined}
+                          authorId={item.user_id}
+                          likes={item.likes_count || 0}
+                          comments={item?.comments?.[0]?.count || 0}
+                          isLiked={userLikes.has(item.picture_id || item.id)}
+                          description={item.description}
+                          type={itemType}
+                          meta={item.meta}
+                          onClick={() => handleMediaClick(item.id, itemType, index)}
+                          onLike={fetchUserLikes}
+                          onDelete={fetchMediaFromPicturesTable}
+                          onEdit={handleEditPost}
+
+                          created_at={item.created_at}
+                          job={item.job}
+                          responsive={item.responsive}
+                          apiUrl={apiUrl}
+                          preset={preset}
+                        />
+                      );
+                    })}
+                  </div>
+                );
+              })()}
+            </div>
+          ))}
+        </>
+      )}
+
+      {/* Loading Indicator / Observer Target */}
+      <div ref={observerTarget} className="h-10 w-full flex items-center justify-center p-4">
+        {isFetchingMore && (
+          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Backward compatibility export
+export default MediaGrid;
+
+// Named exports for clarity
+export { MediaGrid };
+export const PhotoGrid = MediaGrid;
diff --git a/packages/ui/src/components/PromptForm.tsx b/packages/ui/src/components/PromptForm.tsx
index 96703fd5..22fa783b 100644
--- a/packages/ui/src/components/PromptForm.tsx
+++ b/packages/ui/src/components/PromptForm.tsx
@@ -1,533 +1,533 @@
-import React, { useState, useEffect } from 'react';
-import { ImageFile, PromptTemplate } from '../types';
-import { QUICK_ACTIONS } from '../constants';
-import ImageGallery from './ImageGallery';
-import { useDropZone } from '../hooks/useDropZone';
-import TemplateManager from './TemplateManager';
-import { tauriApi } from '../lib/tauriApi';
-import log from '../lib/log';
-import { Eraser, Sparkles, Crop, Palette, Package, FolderOpen, Plus, History, ChevronUp, ChevronDown } from 'lucide-react';
-import { T } from '../i18n';
-
-function arrayBufferToBase64(buffer: number[]) {
-  let binary = '';
-  const bytes = new Uint8Array(buffer);
-  const len = bytes.byteLength;
-  for (let i = 0; i < len; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  return window.btoa(binary);
-}
-
-function getActionIcon(iconName: string) {
-  const iconMap = {
-    'Eraser': Eraser,
-    'Sparkles': Sparkles,
-    'Crop': Crop,
-    'Palette': Palette,
-    'Package': Package
-  };
-  const IconComponent = iconMap[iconName as keyof typeof iconMap];
-  return IconComponent ? <IconComponent size={16} /> : <span>{iconName}</span>;
-}
-
-interface PromptFormProps {
-  prompt: string;
-  setPrompt: (prompt: string) => void;
-  dst: string;
-  setDst: (dst: string) => void;
-  openSaveDialog: () => void;
-  openFilePicker: () => void;
-  files: ImageFile[];
-  getSelectedImages: () => ImageFile[];
-  clearAllFiles: () => void;
-  handleImageSelection: (path: string, isMultiSelect: boolean) => void;
-  removeFile: (path: string) => void;
-  isGenerating: boolean;
-  saveAndClose: () => void;
-  submit: () => void;
-  addImageFromUrl: (url: string) => void;
-  onImageDelete?: (path: string) => void;
-  onImageSaveAs?: (path: string) => void;
-  addFiles: (paths: string[]) => void;
-  currentIndex: number;
-  setCurrentIndex: (index: number) => void;
-  prompts: PromptTemplate[];
-  setPrompts: (prompts: PromptTemplate[]) => void;
-  savePrompts: (prompts: PromptTemplate[]) => void;
-  importPrompts: () => void;
-  exportPrompts: () => void;
-  quickStyles: readonly string[];
-  appendStyle: (style: string) => void;
-  quickActions: typeof QUICK_ACTIONS;
-  executeQuickAction: (action: { name: string; prompt: string; iconName: string }) => Promise<void>;
-  promptHistory: string[];
-  historyIndex: number;
-  navigateHistory: (direction: 'up' | 'down') => void;
-  fileHistory: string[];
-  showFileHistory: boolean;
-  setShowFileHistory: (show: boolean) => void;
-  openFileFromHistory: (filePath: string) => Promise<void>;
-  onFileHistoryCleanup: (validFiles: string[]) => Promise<void>;
-  onLightboxPromptSubmit: (prompt: string, imagePath: string) => Promise<void>;
-  errorMessage?: string | null;
-  setErrorMessage?: (message: string | null) => void;
-}
-
-const PromptForm: React.FC<PromptFormProps> = ({
-  prompt,
-  setPrompt,
-  dst,
-  setDst,
-  openSaveDialog,
-  openFilePicker,
-  files,
-  getSelectedImages,
-  clearAllFiles,
-  handleImageSelection,
-  removeFile,
-  isGenerating,
-  saveAndClose,
-  submit,
-  addImageFromUrl,
-  onImageDelete,
-  onImageSaveAs,
-  addFiles,
-  currentIndex,
-  setCurrentIndex,
-  prompts,
-  setPrompts,
-  savePrompts,
-  importPrompts,
-  exportPrompts,
-  quickStyles,
-  appendStyle,
-  quickActions,
-  executeQuickAction,
-  promptHistory,
-  historyIndex,
-  navigateHistory,
-  fileHistory,
-  showFileHistory,
-  setShowFileHistory,
-  openFileFromHistory,
-  onFileHistoryCleanup,
-  onLightboxPromptSubmit,
-  errorMessage,
-  setErrorMessage,
-}) => {
-  const selectedCount = getSelectedImages().length;
-  const { ref: dropZoneRef, dragIn } = useDropZone({ onDrop: addFiles });
-  const [historyImages, setHistoryImages] = useState<ImageFile[]>([]);
-  const [historyCurrentIndex, setHistoryCurrentIndex] = useState(0);
-
-  // Handle clipboard paste for images
-  const handlePaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
-    try {
-      log.info('📋 Paste event detected, checking for images...');
-      
-      // Try to get images from clipboard using our stubbed API
-      const result = await tauriApi.parseClipboardImages('png', '');
-      
-      if (result?.success && result.paths && result.paths.length > 0) {
-        log.info(`📋 Found ${result.paths.length} image(s) in clipboard`, {
-          paths: result.paths.map(p => p.split(/[/\\]/).pop())
-        });
-        
-        // Add the clipboard images to the files
-        addFiles(result.paths);
-        
-        // Prevent default paste behavior since we handled it
-        e.preventDefault();
-      } else if (result?.error) {
-        log.warn('📋 No images found in clipboard or error occurred', { error: result.error });
-      } else {
-        log.debug('📋 No images in clipboard, allowing normal paste');
-      }
-    } catch (error) {
-      log.error('📋 Failed to parse clipboard', { error: (error as Error).message });
-    }
-  };
-
-  // Load images for file history when modal opens
-  useEffect(() => {
-    if (showFileHistory && fileHistory.length > 0) {
-      const loadHistoryImages = async () => {
-        const imageFiles: ImageFile[] = [];
-        const validFiles: string[] = [];
-        
-        for (const filePath of fileHistory) {
-          try {
-            // First check if file exists, then read it
-            log.debug(`Checking file: ${filePath}`);
-            const buffer = await tauriApi.fs.readFile(filePath);
-            // Use the same conversion method as main app
-            const base64 = arrayBufferToBase64(Array.from(buffer));
-            const ext = filePath.toLowerCase().split('.').pop();
-            const mimeType = ext === 'png' ? 'image/png' : 'image/jpeg';
-            const src = `data:${mimeType};base64,${base64}`;
-            imageFiles.push({ 
-              path: filePath, 
-              src, 
-              isGenerated: true,
-              selected: false 
-            });
-            validFiles.push(filePath);
-          } catch (error) {
-            // File doesn't exist, skip it and log with full path
-            log.warn(`File not found in history: ${filePath}`, {
-              filename: filePath.split(/[/\\]/).pop(),
-              fullPath: filePath,
-              error: (error as Error).message
-            });
-          }
-        }
-        
-        // If some files were invalid, update the fileHistory and store
-        if (validFiles.length !== fileHistory.length) {
-          log.info(`Cleaning up file history: ${fileHistory.length - validFiles.length} invalid files removed`);
-          try {
-            await onFileHistoryCleanup(validFiles);
-            log.info('💾 File history cleaned and saved');
-          } catch (cleanupError) {
-            log.error('Failed to cleanup file history', { error: (cleanupError as Error).message });
-          }
-        }
-        
-        setHistoryImages(imageFiles);
-        setHistoryCurrentIndex(0);
-      };
-      loadHistoryImages();
-    } else if (showFileHistory) {
-      // No file history, show empty state immediately
-      setHistoryImages([]);
-    }
-  }, [showFileHistory, fileHistory]);
-
-  return (
-    <form
-      className="flex flex-col items-center glass-card p-4 sm:p-8 glass-shimmer shadow-2xl"
-      onSubmit={(e) => {
-        e.preventDefault();
-        submit();
-      }}
-    >
-      <div className="w-full space-y-6">
-        {/* Two-column layout: Text Input + Action Buttons */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Left column: Text input area only */}
-          <div>
-            <div className="border-2 border-slate-200 dark:border-white/40 rounded-xl p-3 sm:p-4 focus-within:border-indigo-500 dark:focus-within:border-cyan-400 transition-colors duration-200">
-              <textarea
-                id="prompt-input"
-                value={prompt}
-                onChange={(e) => setPrompt(e.currentTarget.value)}
-                onPaste={handlePaste}
-                placeholder="Describe the image you want to generate or edit... (Ctrl+V to paste images)"
-                className="w-full bg-transparent border-none outline-none min-h-[120px] resize-none text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-300"
-                rows={5}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                    e.preventDefault();
-                    submit();
-                  } else if (e.key === 'ArrowUp' && e.ctrlKey) {
-                    e.preventDefault();
-                    navigateHistory('up');
-                  } else if (e.key === 'ArrowDown' && e.ctrlKey) {
-                    e.preventDefault();
-                    navigateHistory('down');
-                  }
-                }}
-              />
-            </div>
-          </div>
-          
-          
-          {/* Right column: Action buttons (Generate + Styles + Actions) */}
-          <div className="space-y-4">
-            {/* Generate Button + History Navigation */}
-            <div className="flex flex-col sm:flex-row gap-3">
-              <button
-                type="button"
-                onClick={submit}
-                disabled={isGenerating || !prompt.trim()}
-                className="flex-1 glass-button bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white px-6 py-3 rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300"
-              >
-                {isGenerating ? (
-                  <span className="flex items-center justify-center gap-2">
-                    <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                    </svg>
-                    <T>Generating...</T>
-                  </span>
-                ) : (
-                  <>🎨 <T>Generate Image</T></>
-                )}
-              </button>
-              
-              {/* History Navigation */}
-              {promptHistory.length > 0 && (
-                <div className="flex gap-1">
-                  <button
-                    type="button"
-                    onClick={() => navigateHistory('up')}
-                    disabled={isGenerating}
-                    className="glass-button px-3 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50"
-                    title={`Previous prompt (${historyIndex + 1}/${promptHistory.length}) - Ctrl+↑`}
-                  >
-                    <ChevronUp size={16} />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => navigateHistory('down')}
-                    disabled={isGenerating}
-                    className="glass-button px-3 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50"
-                    title={`Next prompt - Ctrl+↓`}
-                  >
-                    <ChevronDown size={16} />
-                  </button>
-                </div>
-              )}
-            </div>
-            {/* Quick Styles - Compact */}
-            <div>
-              <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2"><T>Styles</T></h4>
-              <div className="flex flex-wrap gap-1">
-                {quickStyles.map((style) => (
-                  <button
-                    key={style}
-                    type="button"
-                    onClick={() => appendStyle(style)}
-                    className="text-xs px-2 py-1 rounded bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-white transition-colors duration-200"
-                  >
-                    {style}
-                  </button>
-                ))}
-              </div>
-            </div>
-            
-            {/* Quick Actions - Icons Only */}
-            <div>
-              <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2"><T>Actions</T></h4>
-              <div className="flex flex-wrap gap-1">
-                {quickActions.map((action) => {
-                  const hasSelectedImages = getSelectedImages().length > 0;
-                  const hasAnyImages = files.length > 0;
-                  return (
-                    <button
-                      key={action.name}
-                      type="button"
-                      onClick={() => executeQuickAction(action)}
-                      disabled={isGenerating || !hasSelectedImages}
-                      className={`text-lg px-2 py-2 rounded transition-colors duration-200 ${
-                        !hasAnyImages 
-                          ? 'bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 cursor-not-allowed'
-                          : !hasSelectedImages
-                          ? 'bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 cursor-not-allowed'
-                          : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 text-blue-700 dark:text-blue-300'
-                      } ${isGenerating ? 'opacity-50 cursor-not-allowed' : ''}`}
-                      title={!hasAnyImages ? 'Add an image first' : !hasSelectedImages ? 'Select an image first' : action.name}
-                    >
-                      {getActionIcon(action.iconName)}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <TemplateManager
-          prompts={prompts}
-          currentPrompt={prompt}
-          onSelectPrompt={setPrompt}
-          onSavePrompt={(name, text) => {
-            const newPrompts = [...prompts, { name, text }];
-            setPrompts(newPrompts);
-            savePrompts(newPrompts);
-          }}
-          onImportPrompts={importPrompts}
-          onExportPrompts={exportPrompts}
-        />
-
-        {/* Two-column layout: Destination + Source */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {/* Left: Output destination */}
-          <div className="border border-slate-200/50 dark:border-white/30 rounded-xl p-4 bg-slate-50/30 dark:bg-slate-800/90">
-            <label htmlFor="output-path" className="block text-sm font-semibold text-slate-700 dark:text-white mb-2">
-              <T>Output File Path</T>
-            </label>
-            <div className="flex flex-col sm:flex-row gap-3">
-              <input
-                id="output-path"
-                type="text"
-                value={dst}
-                onChange={(e) => setDst(e.target.value)}
-                placeholder="output.png"
-                className="flex-1 glass-input p-3 sm:p-4 rounded-xl border-2 border-slate-300 dark:border-slate-600 focus:border-indigo-500 dark:focus:border-indigo-400"
-              />
-              <button
-                type="button"
-                onClick={openSaveDialog}
-                className="glass-button font-semibold py-4 px-4 rounded-xl whitespace-nowrap flex items-center gap-2"
-                title="Browse for save location"
-              >
-                <FolderOpen size={16} />
-                <T>Browse</T>
-              </button>
-            </div>
-          </div>
-
-          {/* Right: Source images */}
-          <div 
-            ref={dropZoneRef}
-            className={`p-4 rounded-xl border-2 border-dashed transition-all duration-300 bg-slate-50/30 dark:bg-slate-800/90 ${dragIn ? 'border-blue-500 bg-blue-500/10' : 'border-slate-300/50 dark:border-white/30'}`}
-          >
-          <div className="space-y-3">
-            <button
-              type="button"
-              onClick={openFilePicker}
-              className="w-full glass-button font-semibold py-4 px-6 rounded-xl hover:border-slate-400/60 dark:hover-border-slate-500/60 flex items-center justify-center gap-2 border-2 border-dashed border-slate-300 dark:border-slate-600 hover:border-indigo-400 dark:hover:border-indigo-500 transition-colors"
-            >
-              <FolderOpen size={20} />
-              <T>Select Images (or Drop Here)</T>
-            </button>
-            <div className="flex flex-col sm:flex-row gap-2 justify-center">
-              <button
-                type="button"
-                onClick={() => addImageFromUrl('https://picsum.photos/640/640')}
-                className="glass-button py-2 px-3 rounded-lg"
-                title="Add random image from URL"
-              >
-                <Plus size={16} />
-              </button>
-              <button
-                type="button"
-                onClick={() => setShowFileHistory(true)}
-                disabled={fileHistory.length === 0}
-                className="glass-button py-2 px-3 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
-                title={fileHistory.length > 0 ? `Open from history (${fileHistory.length} files)` : 'No file history yet'}
-              >
-                <History size={16} />
-              </button>
-            </div>
-          </div>
-          </div>
-        </div>
-
-      {files.length > 0 && (
-        <div className="w-full mt-4 sm:mt-6 border border-slate-200/50 dark:border-slate-700/50 rounded-xl p-4 sm:p-6 bg-slate-50/30 dark:bg-slate-800/30">
-          <div className="flex justify-between items-center mb-4">
-            <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300">
-              Images ({files.length})
-              {selectedCount > 0 && (
-                <span className="ml-2 text-blue-600 dark:text-blue-400">
-                  • {selectedCount} selected
-                </span>
-              )}
-            </h3>
-            <button
-              type="button"
-              onClick={clearAllFiles}
-              className="glass-button border-red-400/50 text-red-600 hover:bg-red-500/20 text-sm px-3 py-2 rounded-lg"
-              title="Remove all images"
-            >
-              Clear All
-            </button>
-          </div>
-
-          <div className="border border-slate-200/30 dark:border-slate-700/30 rounded-lg p-4 bg-white/50 dark:bg-slate-900/50">
-            <ImageGallery
-              images={files}
-              onImageSelection={handleImageSelection}
-              onImageRemove={removeFile}
-              onImageSaveAs={onImageSaveAs}
-              showSelection={true}
-              onImageDelete={onImageDelete}
-              currentIndex={currentIndex}
-              setCurrentIndex={setCurrentIndex}
-              onLightboxPromptSubmit={onLightboxPromptSubmit}
-              promptHistory={promptHistory}
-              historyIndex={historyIndex}
-              navigateHistory={navigateHistory}
-              isGenerating={isGenerating}
-              errorMessage={errorMessage}
-              setErrorMessage={setErrorMessage}
-            />
-          </div>
-        </div>
-      )}
-
-      <div className="w-full mt-8 space-y-3">
-        {files.some(file => file.path.startsWith('generated_')) && (
-          <button
-            type="button"
-            onClick={saveAndClose}
-            className="w-full glass-button border-green-400/50 text-green-700 dark:text-green-400 hover:bg-green-500/20 font-semibold py-3 px-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
-            disabled={isGenerating}
-          >
-            <span className="flex items-center justify-center gap-2">
-              💾 Save Last Generated Image and Close
-            </span>
-          </button>
-        )}
-      </div>
-      </div>
-
-      {/* File History Modal */}
-      {showFileHistory && (
-        <div className="fixed inset-0 bg-black/50 z-[9999] flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
-            <div className="flex justify-between items-center p-6 border-b border-slate-200 dark:border-slate-700">
-              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">File History</h3>
-              <button
-                onClick={() => setShowFileHistory(false)}
-                className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 text-2xl"
-              >
-                ×
-              </button>
-            </div>
-            <div className="p-6 overflow-y-auto max-h-[60vh]">
-              {historyImages.length === 0 ? (
-                <div className="text-center text-slate-500 dark:text-slate-400 py-8">
-                  {fileHistory.length === 0 
-                    ? "No file history yet. Generated images will appear here."
-                    : "Loading images from history..."
-                  }
-                </div>
-              ) : (
-                <ImageGallery
-                  images={historyImages}
-                  onImageSelection={(imagePath: string) => {
-                    // Single click selects for preview
-                    setHistoryImages(prev => 
-                      prev.map(img => ({ 
-                        ...img, 
-                        selected: img.path === imagePath 
-                      }))
-                    );
-                  }}
-                  onImageRemove={undefined}
-                  onImageDelete={undefined}
-                  onImageSaveAs={undefined}
-                  showSelection={false}
-                  currentIndex={historyCurrentIndex}
-                  setCurrentIndex={setHistoryCurrentIndex}
-                  onDoubleClick={(imagePath: string) => {
-                    // Double click picks the image and closes modal
-                    openFileFromHistory(imagePath);
-                  }}
-                  errorMessage={errorMessage}
-                  setErrorMessage={setErrorMessage}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </form>
-  );
-};
-
-export default PromptForm;
\ No newline at end of file
+import React, { useState, useEffect } from 'react';
+import { ImageFile, PromptTemplate } from '../types';
+import { QUICK_ACTIONS } from '../constants';
+import ImageGallery from './ImageGallery';
+import { useDropZone } from '../hooks/useDropZone';
+import TemplateManager from './TemplateManager';
+import { tauriApi } from '../lib/tauriApi';
+import log from '../lib/log';
+import { Eraser, Sparkles, Crop, Palette, Package, FolderOpen, Plus, History, ChevronUp, ChevronDown } from 'lucide-react';
+import { T } from '../i18n';
+
+function arrayBufferToBase64(buffer: number[]) {
+  let binary = '';
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return window.btoa(binary);
+}
+
+function getActionIcon(iconName: string) {
+  const iconMap = {
+    'Eraser': Eraser,
+    'Sparkles': Sparkles,
+    'Crop': Crop,
+    'Palette': Palette,
+    'Package': Package
+  };
+  const IconComponent = iconMap[iconName as keyof typeof iconMap];
+  return IconComponent ? <IconComponent size={16} /> : <span>{iconName}</span>;
+}
+
+interface PromptFormProps {
+  prompt: string;
+  setPrompt: (prompt: string) => void;
+  dst: string;
+  setDst: (dst: string) => void;
+  openSaveDialog: () => void;
+  openFilePicker: () => void;
+  files: ImageFile[];
+  getSelectedImages: () => ImageFile[];
+  clearAllFiles: () => void;
+  handleImageSelection: (path: string, isMultiSelect: boolean) => void;
+  removeFile: (path: string) => void;
+  isGenerating: boolean;
+  saveAndClose: () => void;
+  submit: () => void;
+  addImageFromUrl: (url: string) => void;
+  onImageDelete?: (path: string) => void;
+  onImageSaveAs?: (path: string) => void;
+  addFiles: (paths: string[]) => void;
+  currentIndex: number;
+  setCurrentIndex: (index: number) => void;
+  prompts: PromptTemplate[];
+  setPrompts: (prompts: PromptTemplate[]) => void;
+  savePrompts: (prompts: PromptTemplate[]) => void;
+  importPrompts: () => void;
+  exportPrompts: () => void;
+  quickStyles: readonly string[];
+  appendStyle: (style: string) => void;
+  quickActions: typeof QUICK_ACTIONS;
+  executeQuickAction: (action: { name: string; prompt: string; iconName: string }) => Promise<void>;
+  promptHistory: string[];
+  historyIndex: number;
+  navigateHistory: (direction: 'up' | 'down') => void;
+  fileHistory: string[];
+  showFileHistory: boolean;
+  setShowFileHistory: (show: boolean) => void;
+  openFileFromHistory: (filePath: string) => Promise<void>;
+  onFileHistoryCleanup: (validFiles: string[]) => Promise<void>;
+  onLightboxPromptSubmit: (prompt: string, imagePath: string) => Promise<void>;
+  errorMessage?: string | null;
+  setErrorMessage?: (message: string | null) => void;
+}
+
+const PromptForm: React.FC<PromptFormProps> = ({
+  prompt,
+  setPrompt,
+  dst,
+  setDst,
+  openSaveDialog,
+  openFilePicker,
+  files,
+  getSelectedImages,
+  clearAllFiles,
+  handleImageSelection,
+  removeFile,
+  isGenerating,
+  saveAndClose,
+  submit,
+  addImageFromUrl,
+  onImageDelete,
+  onImageSaveAs,
+  addFiles,
+  currentIndex,
+  setCurrentIndex,
+  prompts,
+  setPrompts,
+  savePrompts,
+  importPrompts,
+  exportPrompts,
+  quickStyles,
+  appendStyle,
+  quickActions,
+  executeQuickAction,
+  promptHistory,
+  historyIndex,
+  navigateHistory,
+  fileHistory,
+  showFileHistory,
+  setShowFileHistory,
+  openFileFromHistory,
+  onFileHistoryCleanup,
+  onLightboxPromptSubmit,
+  errorMessage,
+  setErrorMessage,
+}) => {
+  const selectedCount = getSelectedImages().length;
+  const { ref: dropZoneRef, dragIn } = useDropZone({ onDrop: addFiles });
+  const [historyImages, setHistoryImages] = useState<ImageFile[]>([]);
+  const [historyCurrentIndex, setHistoryCurrentIndex] = useState(0);
+
+  // Handle clipboard paste for images
+  const handlePaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    try {
+      log.info('📋 Paste event detected, checking for images...');
+      
+      // Try to get images from clipboard using our stubbed API
+      const result = await tauriApi.parseClipboardImages('png', '');
+      
+      if (result?.success && result.paths && result.paths.length > 0) {
+        log.info(`📋 Found ${result.paths.length} image(s) in clipboard`, {
+          paths: result.paths.map(p => p.split(/[/\\]/).pop())
+        });
+        
+        // Add the clipboard images to the files
+        addFiles(result.paths);
+        
+        // Prevent default paste behavior since we handled it
+        e.preventDefault();
+      } else if (result?.error) {
+        log.warn('📋 No images found in clipboard or error occurred', { error: result.error });
+      } else {
+        log.debug('📋 No images in clipboard, allowing normal paste');
+      }
+    } catch (error) {
+      log.error('📋 Failed to parse clipboard', { error: (error as Error).message });
+    }
+  };
+
+  // Load images for file history when modal opens
+  useEffect(() => {
+    if (showFileHistory && fileHistory.length > 0) {
+      const loadHistoryImages = async () => {
+        const imageFiles: ImageFile[] = [];
+        const validFiles: string[] = [];
+        
+        for (const filePath of fileHistory) {
+          try {
+            // First check if file exists, then read it
+            log.debug(`Checking file: ${filePath}`);
+            const buffer = await tauriApi.fs.readFile(filePath);
+            // Use the same conversion method as main app
+            const base64 = arrayBufferToBase64(Array.from(buffer));
+            const ext = filePath.toLowerCase().split('.').pop();
+            const mimeType = ext === 'png' ? 'image/png' : 'image/jpeg';
+            const src = `data:${mimeType};base64,${base64}`;
+            imageFiles.push({ 
+              path: filePath, 
+              src, 
+              isGenerated: true,
+              selected: false 
+            });
+            validFiles.push(filePath);
+          } catch (error) {
+            // File doesn't exist, skip it and log with full path
+            log.warn(`File not found in history: ${filePath}`, {
+              filename: filePath.split(/[/\\]/).pop(),
+              fullPath: filePath,
+              error: (error as Error).message
+            });
+          }
+        }
+        
+        // If some files were invalid, update the fileHistory and store
+        if (validFiles.length !== fileHistory.length) {
+          log.info(`Cleaning up file history: ${fileHistory.length - validFiles.length} invalid files removed`);
+          try {
+            await onFileHistoryCleanup(validFiles);
+            log.info('💾 File history cleaned and saved');
+          } catch (cleanupError) {
+            log.error('Failed to cleanup file history', { error: (cleanupError as Error).message });
+          }
+        }
+        
+        setHistoryImages(imageFiles);
+        setHistoryCurrentIndex(0);
+      };
+      loadHistoryImages();
+    } else if (showFileHistory) {
+      // No file history, show empty state immediately
+      setHistoryImages([]);
+    }
+  }, [showFileHistory, fileHistory]);
+
+  return (
+    <form
+      className="flex flex-col items-center glass-card p-4 sm:p-8 glass-shimmer shadow-2xl"
+      onSubmit={(e) => {
+        e.preventDefault();
+        submit();
+      }}
+    >
+      <div className="w-full space-y-6">
+        {/* Two-column layout: Text Input + Action Buttons */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Left column: Text input area only */}
+          <div>
+            <div className="border-2 border-slate-200 dark:border-white/40 rounded-xl p-3 sm:p-4 focus-within:border-indigo-500 dark:focus-within:border-cyan-400 transition-colors duration-200">
+              <textarea
+                id="prompt-input"
+                value={prompt}
+                onChange={(e) => setPrompt(e.currentTarget.value)}
+                onPaste={handlePaste}
+                placeholder="Describe the image you want to generate or edit... (Ctrl+V to paste images)"
+                className="w-full bg-transparent border-none outline-none min-h-[120px] resize-none text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-300"
+                rows={5}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                    e.preventDefault();
+                    submit();
+                  } else if (e.key === 'ArrowUp' && e.ctrlKey) {
+                    e.preventDefault();
+                    navigateHistory('up');
+                  } else if (e.key === 'ArrowDown' && e.ctrlKey) {
+                    e.preventDefault();
+                    navigateHistory('down');
+                  }
+                }}
+              />
+            </div>
+          </div>
+          
+          
+          {/* Right column: Action buttons (Generate + Styles + Actions) */}
+          <div className="space-y-4">
+            {/* Generate Button + History Navigation */}
+            <div className="flex flex-col sm:flex-row gap-3">
+              <button
+                type="button"
+                onClick={submit}
+                disabled={isGenerating || !prompt.trim()}
+                className="flex-1 glass-button bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white px-6 py-3 rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300"
+              >
+                {isGenerating ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                    </svg>
+                    <T>Generating...</T>
+                  </span>
+                ) : (
+                  <>🎨 <T>Generate Image</T></>
+                )}
+              </button>
+              
+              {/* History Navigation */}
+              {promptHistory.length > 0 && (
+                <div className="flex gap-1">
+                  <button
+                    type="button"
+                    onClick={() => navigateHistory('up')}
+                    disabled={isGenerating}
+                    className="glass-button px-3 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50"
+                    title={`Previous prompt (${historyIndex + 1}/${promptHistory.length}) - Ctrl+↑`}
+                  >
+                    <ChevronUp size={16} />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => navigateHistory('down')}
+                    disabled={isGenerating}
+                    className="glass-button px-3 py-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50"
+                    title={`Next prompt - Ctrl+↓`}
+                  >
+                    <ChevronDown size={16} />
+                  </button>
+                </div>
+              )}
+            </div>
+            {/* Quick Styles - Compact */}
+            <div>
+              <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2"><T>Styles</T></h4>
+              <div className="flex flex-wrap gap-1">
+                {quickStyles.map((style) => (
+                  <button
+                    key={style}
+                    type="button"
+                    onClick={() => appendStyle(style)}
+                    className="text-xs px-2 py-1 rounded bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-white transition-colors duration-200"
+                  >
+                    {style}
+                  </button>
+                ))}
+              </div>
+            </div>
+            
+            {/* Quick Actions - Icons Only */}
+            <div>
+              <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2"><T>Actions</T></h4>
+              <div className="flex flex-wrap gap-1">
+                {quickActions.map((action) => {
+                  const hasSelectedImages = getSelectedImages().length > 0;
+                  const hasAnyImages = files.length > 0;
+                  return (
+                    <button
+                      key={action.name}
+                      type="button"
+                      onClick={() => executeQuickAction(action)}
+                      disabled={isGenerating || !hasSelectedImages}
+                      className={`text-lg px-2 py-2 rounded transition-colors duration-200 ${
+                        !hasAnyImages 
+                          ? 'bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 cursor-not-allowed'
+                          : !hasSelectedImages
+                          ? 'bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 cursor-not-allowed'
+                          : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 text-blue-700 dark:text-blue-300'
+                      } ${isGenerating ? 'opacity-50 cursor-not-allowed' : ''}`}
+                      title={!hasAnyImages ? 'Add an image first' : !hasSelectedImages ? 'Select an image first' : action.name}
+                    >
+                      {getActionIcon(action.iconName)}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <TemplateManager
+          prompts={prompts}
+          currentPrompt={prompt}
+          onSelectPrompt={setPrompt}
+          onSavePrompt={(name, text) => {
+            const newPrompts = [...prompts, { name, text }];
+            setPrompts(newPrompts);
+            savePrompts(newPrompts);
+          }}
+          onImportPrompts={importPrompts}
+          onExportPrompts={exportPrompts}
+        />
+
+        {/* Two-column layout: Destination + Source */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Left: Output destination */}
+          <div className="border border-slate-200/50 dark:border-white/30 rounded-xl p-4 bg-slate-50/30 dark:bg-slate-800/90">
+            <label htmlFor="output-path" className="block text-sm font-semibold text-slate-700 dark:text-white mb-2">
+              <T>Output File Path</T>
+            </label>
+            <div className="flex flex-col sm:flex-row gap-3">
+              <input
+                id="output-path"
+                type="text"
+                value={dst}
+                onChange={(e) => setDst(e.target.value)}
+                placeholder="output.png"
+                className="flex-1 glass-input p-3 sm:p-4 rounded-xl border-2 border-slate-300 dark:border-slate-600 focus:border-indigo-500 dark:focus:border-indigo-400"
+              />
+              <button
+                type="button"
+                onClick={openSaveDialog}
+                className="glass-button font-semibold py-4 px-4 rounded-xl whitespace-nowrap flex items-center gap-2"
+                title="Browse for save location"
+              >
+                <FolderOpen size={16} />
+                <T>Browse</T>
+              </button>
+            </div>
+          </div>
+
+          {/* Right: Source images */}
+          <div 
+            ref={dropZoneRef}
+            className={`p-4 rounded-xl border-2 border-dashed transition-all duration-300 bg-slate-50/30 dark:bg-slate-800/90 ${dragIn ? 'border-blue-500 bg-blue-500/10' : 'border-slate-300/50 dark:border-white/30'}`}
+          >
+          <div className="space-y-3">
+            <button
+              type="button"
+              onClick={openFilePicker}
+              className="w-full glass-button font-semibold py-4 px-6 rounded-xl hover:border-slate-400/60 dark:hover-border-slate-500/60 flex items-center justify-center gap-2 border-2 border-dashed border-slate-300 dark:border-slate-600 hover:border-indigo-400 dark:hover:border-indigo-500 transition-colors"
+            >
+              <FolderOpen size={20} />
+              <T>Select Images (or Drop Here)</T>
+            </button>
+            <div className="flex flex-col sm:flex-row gap-2 justify-center">
+              <button
+                type="button"
+                onClick={() => addImageFromUrl('https://picsum.photos/640/640')}
+                className="glass-button py-2 px-3 rounded-lg"
+                title="Add random image from URL"
+              >
+                <Plus size={16} />
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowFileHistory(true)}
+                disabled={fileHistory.length === 0}
+                className="glass-button py-2 px-3 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                title={fileHistory.length > 0 ? `Open from history (${fileHistory.length} files)` : 'No file history yet'}
+              >
+                <History size={16} />
+              </button>
+            </div>
+          </div>
+          </div>
+        </div>
+
+      {files.length > 0 && (
+        <div className="w-full mt-4 sm:mt-6 border border-slate-200/50 dark:border-slate-700/50 rounded-xl p-4 sm:p-6 bg-slate-50/30 dark:bg-slate-800/30">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300">
+              Images ({files.length})
+              {selectedCount > 0 && (
+                <span className="ml-2 text-blue-600 dark:text-blue-400">
+                  • {selectedCount} selected
+                </span>
+              )}
+            </h3>
+            <button
+              type="button"
+              onClick={clearAllFiles}
+              className="glass-button border-red-400/50 text-red-600 hover:bg-red-500/20 text-sm px-3 py-2 rounded-lg"
+              title="Remove all images"
+            >
+              Clear All
+            </button>
+          </div>
+
+          <div className="border border-slate-200/30 dark:border-slate-700/30 rounded-lg p-4 bg-white/50 dark:bg-slate-900/50">
+            <ImageGallery
+              images={files}
+              onImageSelection={handleImageSelection}
+              onImageRemove={removeFile}
+              onImageSaveAs={onImageSaveAs}
+              showSelection={true}
+              onImageDelete={onImageDelete}
+              currentIndex={currentIndex}
+              setCurrentIndex={setCurrentIndex}
+              onLightboxPromptSubmit={onLightboxPromptSubmit}
+              promptHistory={promptHistory}
+              historyIndex={historyIndex}
+              navigateHistory={navigateHistory}
+              isGenerating={isGenerating}
+              errorMessage={errorMessage}
+              setErrorMessage={setErrorMessage}
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="w-full mt-8 space-y-3">
+        {files.some(file => file.path.startsWith('generated_')) && (
+          <button
+            type="button"
+            onClick={saveAndClose}
+            className="w-full glass-button border-green-400/50 text-green-700 dark:text-green-400 hover:bg-green-500/20 font-semibold py-3 px-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
+            disabled={isGenerating}
+          >
+            <span className="flex items-center justify-center gap-2">
+              💾 Save Last Generated Image and Close
+            </span>
+          </button>
+        )}
+      </div>
+      </div>
+
+      {/* File History Modal */}
+      {showFileHistory && (
+        <div className="fixed inset-0 bg-black/50 z-[9999] flex items-center justify-center p-4">
+          <div className="bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
+            <div className="flex justify-between items-center p-6 border-b border-slate-200 dark:border-slate-700">
+              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">File History</h3>
+              <button
+                onClick={() => setShowFileHistory(false)}
+                className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 text-2xl"
+              >
+                ×
+              </button>
+            </div>
+            <div className="p-6 overflow-y-auto max-h-[60vh]">
+              {historyImages.length === 0 ? (
+                <div className="text-center text-slate-500 dark:text-slate-400 py-8">
+                  {fileHistory.length === 0 
+                    ? "No file history yet. Generated images will appear here."
+                    : "Loading images from history..."
+                  }
+                </div>
+              ) : (
+                <ImageGallery
+                  images={historyImages}
+                  onImageSelection={(imagePath: string) => {
+                    // Single click selects for preview
+                    setHistoryImages(prev => 
+                      prev.map(img => ({ 
+                        ...img, 
+                        selected: img.path === imagePath 
+                      }))
+                    );
+                  }}
+                  onImageRemove={undefined}
+                  onImageDelete={undefined}
+                  onImageSaveAs={undefined}
+                  showSelection={false}
+                  currentIndex={historyCurrentIndex}
+                  setCurrentIndex={setHistoryCurrentIndex}
+                  onDoubleClick={(imagePath: string) => {
+                    // Double click picks the image and closes modal
+                    openFileFromHistory(imagePath);
+                  }}
+                  errorMessage={errorMessage}
+                  setErrorMessage={setErrorMessage}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default PromptForm;
diff --git a/packages/ui/src/components/PublishDialog.tsx b/packages/ui/src/components/PublishDialog.tsx
index b6ef724e..0bad1bb1 100644
--- a/packages/ui/src/components/PublishDialog.tsx
+++ b/packages/ui/src/components/PublishDialog.tsx
@@ -1,282 +1,282 @@
-import { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Label } from '@/components/ui/label';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Upload, RefreshCw, GitBranch, Bookmark } from 'lucide-react';
-import { supabase } from '@/integrations/supabase/client';
-import { useAuth } from '@/hooks/useAuth';
-
-interface Collection {
-  id: string;
-  name: string;
-  slug: string;
-}
-
-interface PublishDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onPublish: (option: 'overwrite' | 'new' | 'version' | 'add-to-post', title?: string, description?: string, parentId?: string, collectionIds?: string[]) => void;
-  originalTitle: string;
-  originalImageId?: string;
-  isPublishing?: boolean;
-  editingPostId?: string;
-}
-
-export default function PublishDialog({
-  isOpen,
-  onClose,
-  onPublish,
-  originalTitle,
-  originalImageId,
-  isPublishing = false,
-  editingPostId
-}: PublishDialogProps) {
-  const { user } = useAuth();
-  const [publishOption, setPublishOption] = useState<'overwrite' | 'new' | 'version' | 'add-to-post'>('new');
-  const [title, setTitle] = useState(originalTitle);
-  const [description, setDescription] = useState('');
-  const [collections, setCollections] = useState<Collection[]>([]);
-  const [selectedCollections, setSelectedCollections] = useState<string[]>([]);
-  const [loadingCollections, setLoadingCollections] = useState(false);
-
-  // Load user's collections when dialog opens
-  useEffect(() => {
-    if (isOpen && user) {
-      loadCollections();
-      // Default to "add-to-post" if editing a post
-      if (editingPostId) {
-        setPublishOption('add-to-post');
-      } else {
-        setPublishOption('new');
-      }
-    }
-  }, [isOpen, user, editingPostId]);
-
-  const loadCollections = async () => {
-    if (!user) return;
-
-    setLoadingCollections(true);
-    try {
-      const { data, error } = await supabase
-        .from('collections')
-        .select('id, name, slug')
-        .eq('user_id', user.id)
-        .order('name');
-
-      if (error) throw error;
-      setCollections(data || []);
-    } catch (error) {
-      console.error('Error loading collections:', error);
-    } finally {
-      setLoadingCollections(false);
-    }
-  };
-
-  const toggleCollection = (collectionId: string) => {
-    setSelectedCollections(prev =>
-      prev.includes(collectionId)
-        ? prev.filter(id => id !== collectionId)
-        : [...prev, collectionId]
-    );
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onPublish(
-      publishOption,
-      title.trim() || undefined,
-      description.trim() || undefined,
-      originalImageId,
-      selectedCollections.length > 0 ? selectedCollections : undefined
-    );
-  };
-
-  const handleClose = () => {
-    if (!isPublishing) {
-      onClose();
-    }
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 bg-black/50 z-[10000] flex items-center justify-center p-4">
-      <div className="bg-background rounded-xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
-        <div className="p-6">
-          <h2 className="text-xl font-semibold text-foreground mb-4">
-            Publish Generated Image
-          </h2>
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <Label className="text-sm font-medium text-foreground mb-3 block">
-                Publishing Option
-              </Label>
-              <RadioGroup
-                value={publishOption}
-                onValueChange={(value) => setPublishOption(value as 'overwrite' | 'new' | 'version' | 'add-to-post')}
-                className="space-y-3"
-              >
-                <div className="flex items-center space-x-2 p-3 border rounded-lg hover:bg-muted/50 transition-colors">
-                  <RadioGroupItem value="overwrite" id="overwrite" />
-                  <div className="flex-1">
-                    <Label htmlFor="overwrite" className="font-medium cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <RefreshCw className="h-4 w-4" />
-                        Overwrite Original
-                      </div>
-                    </Label>
-                    <p className="text-sm text-muted-foreground mt-1">
-                      Replace the original image with the generated version
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-2 p-3 border rounded-lg hover:bg-muted/50 transition-colors">
-                  <RadioGroupItem value="new" id="new" />
-                  <div className="flex-1">
-                    <Label htmlFor="new" className="font-medium cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <Upload className="h-4 w-4" />
-                        Create New Post
-                      </div>
-                    </Label>
-                    <p className="text-sm text-muted-foreground mt-1">
-                      Save as a new image in your gallery
-                    </p>
-                  </div>
-                </div>
-
-                {originalImageId && (
-                  <div className="flex items-center space-x-2 p-3 border rounded-lg hover:bg-muted/50 transition-colors">
-                    <RadioGroupItem value="version" id="version" />
-                    <div className="flex-1">
-                      <Label htmlFor="version" className="font-medium cursor-pointer">
-                        <div className="flex items-center gap-2">
-                          <GitBranch className="h-4 w-4" />
-                          Save as Version
-                        </div>
-                      </Label>
-                      <p className="text-sm text-muted-foreground mt-1">
-                        Create a new version linked to the original image
-                      </p>
-                    </div>
-                  </div>
-                )}
-              </RadioGroup>
-            </div>
-
-            {(publishOption === 'new' || publishOption === 'version' || publishOption === 'add-to-post') && (
-              <div className="space-y-4 pt-2">
-                <div>
-                  <Label htmlFor="title" className="text-sm font-medium text-foreground">
-                    Title <span className="text-muted-foreground">(optional)</span>
-                  </Label>
-                  <Input
-                    id="title"
-                    value={title}
-                    onChange={(e) => setTitle(e.target.value)}
-                    placeholder="Enter a title..."
-                    className="mt-1"
-                    disabled={isPublishing}
-                  />
-                </div>
-
-                <div>
-                  <Label htmlFor="description" className="text-sm font-medium text-foreground">
-                    Description <span className="text-muted-foreground">(optional)</span>
-                  </Label>
-                  <Textarea
-                    id="description"
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    placeholder="Add a description for your generated image..."
-                    className="mt-1 resize-none"
-                    rows={3}
-                    disabled={isPublishing}
-                  />
-                </div>
-
-                {/* Collections Selection */}
-                {collections.length > 0 && (
-                  <div>
-                    <Label className="text-sm font-medium text-foreground mb-2 flex items-center gap-2">
-                      <Bookmark className="h-4 w-4" />
-                      Add to Collections <span className="text-muted-foreground">(optional)</span>
-                    </Label>
-                    <div className="mt-2 space-y-2 max-h-32 overflow-y-auto border rounded-lg p-3">
-                      {loadingCollections ? (
-                        <div className="text-sm text-muted-foreground text-center py-2">
-                          Loading collections...
-                        </div>
-                      ) : (
-                        collections.map((collection) => (
-                          <div key={collection.id} className="flex items-center space-x-2">
-                            <Checkbox
-                              id={`collection-${collection.id}`}
-                              checked={selectedCollections.includes(collection.id)}
-                              onCheckedChange={() => toggleCollection(collection.id)}
-                              disabled={isPublishing}
-                            />
-                            <label
-                              htmlFor={`collection-${collection.id}`}
-                              className="text-sm cursor-pointer flex-1"
-                            >
-                              {collection.name}
-                            </label>
-                          </div>
-                        ))
-                      )}
-                    </div>
-                    {selectedCollections.length > 0 && (
-                      <p className="text-xs text-muted-foreground mt-2">
-                        Will be added to {selectedCollections.length} collection{selectedCollections.length > 1 ? 's' : ''}
-                      </p>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-
-            <div className="flex gap-3 pt-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleClose}
-                className="flex-1"
-                disabled={isPublishing}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="flex-1"
-                disabled={isPublishing}
-              >
-                {isPublishing ? (
-                  <div className="flex items-center gap-2">
-                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
-                    Publishing...
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2">
-                    {publishOption === 'overwrite' && <RefreshCw className="h-4 w-4" />}
-                    {publishOption === 'new' && <Upload className="h-4 w-4" />}
-                    {publishOption === 'version' && <GitBranch className="h-4 w-4" />}
-                    {publishOption === 'add-to-post' && <Bookmark className="h-4 w-4" />}
-                    {publishOption === 'overwrite' ? 'Overwrite' :
-                      publishOption === 'version' ? 'Save Version' :
-                        publishOption === 'add-to-post' ? 'Add to Post' : 'Publish New'}
-                  </div>
-                )}
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Upload, RefreshCw, GitBranch, Bookmark } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+
+interface Collection {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+interface PublishDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onPublish: (option: 'overwrite' | 'new' | 'version' | 'add-to-post', title?: string, description?: string, parentId?: string, collectionIds?: string[]) => void;
+  originalTitle: string;
+  originalImageId?: string;
+  isPublishing?: boolean;
+  editingPostId?: string;
+}
+
+export default function PublishDialog({
+  isOpen,
+  onClose,
+  onPublish,
+  originalTitle,
+  originalImageId,
+  isPublishing = false,
+  editingPostId
+}: PublishDialogProps) {
+  const { user } = useAuth();
+  const [publishOption, setPublishOption] = useState<'overwrite' | 'new' | 'version' | 'add-to-post'>('new');
+  const [title, setTitle] = useState(originalTitle);
+  const [description, setDescription] = useState('');
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [selectedCollections, setSelectedCollections] = useState<string[]>([]);
+  const [loadingCollections, setLoadingCollections] = useState(false);
+
+  // Load user's collections when dialog opens
+  useEffect(() => {
+    if (isOpen && user) {
+      loadCollections();
+      // Default to "add-to-post" if editing a post
+      if (editingPostId) {
+        setPublishOption('add-to-post');
+      } else {
+        setPublishOption('new');
+      }
+    }
+  }, [isOpen, user, editingPostId]);
+
+  const loadCollections = async () => {
+    if (!user) return;
+
+    setLoadingCollections(true);
+    try {
+      const { data, error } = await supabase
+        .from('collections')
+        .select('id, name, slug')
+        .eq('user_id', user.id)
+        .order('name');
+
+      if (error) throw error;
+      setCollections(data || []);
+    } catch (error) {
+      console.error('Error loading collections:', error);
+    } finally {
+      setLoadingCollections(false);
+    }
+  };
+
+  const toggleCollection = (collectionId: string) => {
+    setSelectedCollections(prev =>
+      prev.includes(collectionId)
+        ? prev.filter(id => id !== collectionId)
+        : [...prev, collectionId]
+    );
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onPublish(
+      publishOption,
+      title.trim() || undefined,
+      description.trim() || undefined,
+      originalImageId,
+      selectedCollections.length > 0 ? selectedCollections : undefined
+    );
+  };
+
+  const handleClose = () => {
+    if (!isPublishing) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 z-[10000] flex items-center justify-center p-4">
+      <div className="bg-background rounded-xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+        <div className="p-6">
+          <h2 className="text-xl font-semibold text-foreground mb-4">
+            Publish Generated Image
+          </h2>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <Label className="text-sm font-medium text-foreground mb-3 block">
+                Publishing Option
+              </Label>
+              <RadioGroup
+                value={publishOption}
+                onValueChange={(value) => setPublishOption(value as 'overwrite' | 'new' | 'version' | 'add-to-post')}
+                className="space-y-3"
+              >
+                <div className="flex items-center space-x-2 p-3 border rounded-lg hover:bg-muted/50 transition-colors">
+                  <RadioGroupItem value="overwrite" id="overwrite" />
+                  <div className="flex-1">
+                    <Label htmlFor="overwrite" className="font-medium cursor-pointer">
+                      <div className="flex items-center gap-2">
+                        <RefreshCw className="h-4 w-4" />
+                        Overwrite Original
+                      </div>
+                    </Label>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      Replace the original image with the generated version
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-2 p-3 border rounded-lg hover:bg-muted/50 transition-colors">
+                  <RadioGroupItem value="new" id="new" />
+                  <div className="flex-1">
+                    <Label htmlFor="new" className="font-medium cursor-pointer">
+                      <div className="flex items-center gap-2">
+                        <Upload className="h-4 w-4" />
+                        Create New Post
+                      </div>
+                    </Label>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      Save as a new image in your gallery
+                    </p>
+                  </div>
+                </div>
+
+                {originalImageId && (
+                  <div className="flex items-center space-x-2 p-3 border rounded-lg hover:bg-muted/50 transition-colors">
+                    <RadioGroupItem value="version" id="version" />
+                    <div className="flex-1">
+                      <Label htmlFor="version" className="font-medium cursor-pointer">
+                        <div className="flex items-center gap-2">
+                          <GitBranch className="h-4 w-4" />
+                          Save as Version
+                        </div>
+                      </Label>
+                      <p className="text-sm text-muted-foreground mt-1">
+                        Create a new version linked to the original image
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </RadioGroup>
+            </div>
+
+            {(publishOption === 'new' || publishOption === 'version' || publishOption === 'add-to-post') && (
+              <div className="space-y-4 pt-2">
+                <div>
+                  <Label htmlFor="title" className="text-sm font-medium text-foreground">
+                    Title <span className="text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input
+                    id="title"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    placeholder="Enter a title..."
+                    className="mt-1"
+                    disabled={isPublishing}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="description" className="text-sm font-medium text-foreground">
+                    Description <span className="text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Textarea
+                    id="description"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="Add a description for your generated image..."
+                    className="mt-1 resize-none"
+                    rows={3}
+                    disabled={isPublishing}
+                  />
+                </div>
+
+                {/* Collections Selection */}
+                {collections.length > 0 && (
+                  <div>
+                    <Label className="text-sm font-medium text-foreground mb-2 flex items-center gap-2">
+                      <Bookmark className="h-4 w-4" />
+                      Add to Collections <span className="text-muted-foreground">(optional)</span>
+                    </Label>
+                    <div className="mt-2 space-y-2 max-h-32 overflow-y-auto border rounded-lg p-3">
+                      {loadingCollections ? (
+                        <div className="text-sm text-muted-foreground text-center py-2">
+                          Loading collections...
+                        </div>
+                      ) : (
+                        collections.map((collection) => (
+                          <div key={collection.id} className="flex items-center space-x-2">
+                            <Checkbox
+                              id={`collection-${collection.id}`}
+                              checked={selectedCollections.includes(collection.id)}
+                              onCheckedChange={() => toggleCollection(collection.id)}
+                              disabled={isPublishing}
+                            />
+                            <label
+                              htmlFor={`collection-${collection.id}`}
+                              className="text-sm cursor-pointer flex-1"
+                            >
+                              {collection.name}
+                            </label>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                    {selectedCollections.length > 0 && (
+                      <p className="text-xs text-muted-foreground mt-2">
+                        Will be added to {selectedCollections.length} collection{selectedCollections.length > 1 ? 's' : ''}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="flex gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleClose}
+                className="flex-1"
+                disabled={isPublishing}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="flex-1"
+                disabled={isPublishing}
+              >
+                {isPublishing ? (
+                  <div className="flex items-center gap-2">
+                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
+                    Publishing...
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    {publishOption === 'overwrite' && <RefreshCw className="h-4 w-4" />}
+                    {publishOption === 'new' && <Upload className="h-4 w-4" />}
+                    {publishOption === 'version' && <GitBranch className="h-4 w-4" />}
+                    {publishOption === 'add-to-post' && <Bookmark className="h-4 w-4" />}
+                    {publishOption === 'overwrite' ? 'Overwrite' :
+                      publishOption === 'version' ? 'Save Version' :
+                        publishOption === 'add-to-post' ? 'Add to Post' : 'Publish New'}
+                  </div>
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/TemplateManager.tsx b/packages/ui/src/components/TemplateManager.tsx
index ff6a6ba6..c98b6bc3 100644
--- a/packages/ui/src/components/TemplateManager.tsx
+++ b/packages/ui/src/components/TemplateManager.tsx
@@ -1,93 +1,93 @@
-import React from 'react';
-import { PromptTemplate } from '../types';
-import { Save, Download, Upload } from 'lucide-react';
-
-interface TemplateManagerProps {
-  prompts: PromptTemplate[];
-  currentPrompt: string;
-  onSelectPrompt: (prompt: string) => void;
-  onSavePrompt: (name: string, text: string) => void;
-  onImportPrompts: () => void;
-  onExportPrompts: () => void;
-}
-
-const TemplateManager: React.FC<TemplateManagerProps> = ({
-  prompts,
-  currentPrompt,
-  onSelectPrompt,
-  onSavePrompt,
-  onImportPrompts,
-  onExportPrompts,
-}) => {
-  const handleSaveTemplate = () => {
-    if (!currentPrompt.trim()) return;
-    
-    const name = prompt('Enter template name:');
-    if (name && name.trim()) {
-      onSavePrompt(name.trim(), currentPrompt);
-    }
-  };
-
-  return (
-    <div className="border border-slate-200/50 dark:border-white/30 rounded-xl p-4 bg-slate-50/30 dark:bg-slate-800/90">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {/* Left: Template Picker */}
-        <div>
-          <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2">Templates</h4>
-          <div className="flex flex-wrap gap-1">
-            {prompts.length === 0 ? (
-              <span className="text-xs text-slate-500 dark:text-slate-200">No templates saved yet</span>
-            ) : (
-              prompts.map((template) => (
-                <button
-                  key={template.name}
-                  type="button"
-                  onClick={() => onSelectPrompt(template.text)}
-                  className="text-xs px-2 py-1 rounded bg-purple-100 hover:bg-purple-200 dark:bg-purple-700 dark:hover:bg-purple-600 text-purple-700 dark:text-white transition-colors duration-200"
-                  title={`Load template: ${template.text.substring(0, 50)}...`}
-                >
-                  {template.name}
-                </button>
-              ))
-            )}
-          </div>
-        </div>
-        
-        {/* Right: Template Management Icons */}
-        <div>
-          <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2">Manage</h4>
-          <div className="flex flex-col sm:flex-row gap-2">
-            <button
-              type="button"
-              onClick={handleSaveTemplate}
-              disabled={!currentPrompt.trim()}
-              className="p-2 rounded bg-green-100 hover:bg-green-200 dark:bg-green-600 dark:hover:bg-green-500 text-green-700 dark:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
-              title="Save current prompt as template"
-            >
-              <Save size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={onImportPrompts}
-              className="p-2 rounded bg-blue-100 hover:bg-blue-200 dark:bg-blue-600 dark:hover:bg-blue-500 text-blue-700 dark:text-white transition-colors duration-200"
-              title="Import templates from file"
-            >
-              <Upload size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={onExportPrompts}
-              disabled={prompts.length === 0}
-              className="p-2 rounded bg-orange-100 hover:bg-orange-200 dark:bg-orange-600 dark:hover:bg-orange-500 text-orange-700 dark:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
-              title="Export templates to file"
-            >
-              <Download size={16} />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TemplateManager;
\ No newline at end of file
+import React from 'react';
+import { PromptTemplate } from '../types';
+import { Save, Download, Upload } from 'lucide-react';
+
+interface TemplateManagerProps {
+  prompts: PromptTemplate[];
+  currentPrompt: string;
+  onSelectPrompt: (prompt: string) => void;
+  onSavePrompt: (name: string, text: string) => void;
+  onImportPrompts: () => void;
+  onExportPrompts: () => void;
+}
+
+const TemplateManager: React.FC<TemplateManagerProps> = ({
+  prompts,
+  currentPrompt,
+  onSelectPrompt,
+  onSavePrompt,
+  onImportPrompts,
+  onExportPrompts,
+}) => {
+  const handleSaveTemplate = () => {
+    if (!currentPrompt.trim()) return;
+    
+    const name = prompt('Enter template name:');
+    if (name && name.trim()) {
+      onSavePrompt(name.trim(), currentPrompt);
+    }
+  };
+
+  return (
+    <div className="border border-slate-200/50 dark:border-white/30 rounded-xl p-4 bg-slate-50/30 dark:bg-slate-800/90">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Left: Template Picker */}
+        <div>
+          <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2">Templates</h4>
+          <div className="flex flex-wrap gap-1">
+            {prompts.length === 0 ? (
+              <span className="text-xs text-slate-500 dark:text-slate-200">No templates saved yet</span>
+            ) : (
+              prompts.map((template) => (
+                <button
+                  key={template.name}
+                  type="button"
+                  onClick={() => onSelectPrompt(template.text)}
+                  className="text-xs px-2 py-1 rounded bg-purple-100 hover:bg-purple-200 dark:bg-purple-700 dark:hover:bg-purple-600 text-purple-700 dark:text-white transition-colors duration-200"
+                  title={`Load template: ${template.text.substring(0, 50)}...`}
+                >
+                  {template.name}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+        
+        {/* Right: Template Management Icons */}
+        <div>
+          <h4 className="text-sm font-semibold text-slate-700 dark:text-white mb-2">Manage</h4>
+          <div className="flex flex-col sm:flex-row gap-2">
+            <button
+              type="button"
+              onClick={handleSaveTemplate}
+              disabled={!currentPrompt.trim()}
+              className="p-2 rounded bg-green-100 hover:bg-green-200 dark:bg-green-600 dark:hover:bg-green-500 text-green-700 dark:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Save current prompt as template"
+            >
+              <Save size={16} />
+            </button>
+            <button
+              type="button"
+              onClick={onImportPrompts}
+              className="p-2 rounded bg-blue-100 hover:bg-blue-200 dark:bg-blue-600 dark:hover:bg-blue-500 text-blue-700 dark:text-white transition-colors duration-200"
+              title="Import templates from file"
+            >
+              <Upload size={16} />
+            </button>
+            <button
+              type="button"
+              onClick={onExportPrompts}
+              disabled={prompts.length === 0}
+              className="p-2 rounded bg-orange-100 hover:bg-orange-200 dark:bg-orange-600 dark:hover:bg-orange-500 text-orange-700 dark:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Export templates to file"
+            >
+              <Download size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TemplateManager;
diff --git a/packages/ui/src/components/ThemeProvider.tsx b/packages/ui/src/components/ThemeProvider.tsx
index 649c2a77..0eaf2b44 100644
--- a/packages/ui/src/components/ThemeProvider.tsx
+++ b/packages/ui/src/components/ThemeProvider.tsx
@@ -1,76 +1,76 @@
-import { createContext, useContext, useEffect, useState } from "react";
-
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
-
-type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-  theme: "system",
-  setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export function ThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "ui-theme",
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  );
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    if (theme === "system") {
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-      const applyTheme = () => {
-        root.classList.remove("light", "dark");
-        root.classList.add(mediaQuery.matches ? "dark" : "light");
-      };
-
-      applyTheme();
-
-      mediaQuery.addEventListener("change", applyTheme);
-      return () => mediaQuery.removeEventListener("change", applyTheme);
-    }
-
-    root.classList.remove("light", "dark");
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined)
-    throw new Error("useTheme must be used within a ThemeProvider");
-
-  return context;
-};
\ No newline at end of file
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    if (theme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+      const applyTheme = () => {
+        root.classList.remove("light", "dark");
+        root.classList.add(mediaQuery.matches ? "dark" : "light");
+      };
+
+      applyTheme();
+
+      mediaQuery.addEventListener("change", applyTheme);
+      return () => mediaQuery.removeEventListener("change", applyTheme);
+    }
+
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};
diff --git a/packages/ui/src/components/ThemeToggle.tsx b/packages/ui/src/components/ThemeToggle.tsx
index 6b9ab5c4..e3f1fd80 100644
--- a/packages/ui/src/components/ThemeToggle.tsx
+++ b/packages/ui/src/components/ThemeToggle.tsx
@@ -1,39 +1,39 @@
-import { Monitor, Moon, Sun } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useTheme } from "@/components/ThemeProvider";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-export function ThemeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="h-9 w-9 px-0">
-          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <Moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Monitor className="mr-2 h-4 w-4" />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
\ No newline at end of file
+import { Monitor, Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/components/ThemeProvider";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-9 w-9 px-0">
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Monitor className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/packages/ui/src/components/TopNavigation.tsx b/packages/ui/src/components/TopNavigation.tsx
index dfc150c4..716faab0 100644
--- a/packages/ui/src/components/TopNavigation.tsx
+++ b/packages/ui/src/components/TopNavigation.tsx
@@ -1,339 +1,339 @@
-import { Link, useLocation } from "react-router-dom";
-import { useAuth } from "@/hooks/useAuth";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Home, User, Upload, LogOut, LogIn, Wand2, Search, Grid3x3, Globe, ListFilter, Shield, Activity, ShoppingCart, Pencil, Settings, MessageSquare } from "lucide-react";
-import { ThemeToggle } from "@/components/ThemeToggle";
-import { useWizardContext } from "@/hooks/useWizardContext";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useNavigate } from "react-router-dom";
-import { useProfiles } from "@/contexts/ProfilesContext";
-import { useState, useRef, useEffect, lazy, Suspense } from "react";
-import { T, getCurrentLang, supportedLanguages, translate, setLanguage } from "@/i18n";
-const CreationWizardPopup = lazy(() => import('./CreationWizardPopup').then(m => ({ default: m.CreationWizardPopup })));
-
-const TopNavigation = () => {
-  const { user, signOut, roles } = useAuth();
-  const { fetchProfile, profiles } = useProfiles();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [searchQuery, setSearchQuery] = useState('');
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const currentLang = getCurrentLang();
-  const { creationWizardOpen, setCreationWizardOpen, wizardInitialImage, creationWizardMode } = useWizardContext();
-
-  // Lazy-load ecommerce cart store to keep the heavy ecommerce bundle out of the initial load
-  const [cartItemCount, setCartItemCount] = useState(0);
-  useEffect(() => {
-    let unsubscribe: (() => void) | undefined;
-    import("@polymech/ecommerce").then(({ useCartStore }) => {
-      // Read initial value
-      setCartItemCount(useCartStore.getState().itemCount);
-      // Subscribe to changes
-      unsubscribe = useCartStore.subscribe((state) => {
-        setCartItemCount(state.itemCount);
-      });
-    }).catch(() => { /* ecommerce not available */ });
-    return () => unsubscribe?.();
-  }, []);
-
-  const authPath = '/auth';
-
-  useEffect(() => {
-    if (user?.id) {
-      fetchProfile(user.id);
-    }
-  }, [user?.id, fetchProfile]);
-
-  const userProfile = user ? profiles[user.id] : null;
-  const username = userProfile?.user_id || user?.id;
-  const isActive = (path: string) => location.pathname === path;
-
-  {/* Profile Grid Button - Direct to profile feed */ }
-  {
-    user && (
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={() => navigate(`/user/${username}`)}
-        className="h-8 w-8 p-0"
-        title={translate("My Profile")}
-      >
-        <Grid3x3 className="h-4 w-4" />
-      </Button>
-    )
-  }
-
-  // ...
-
-  <DropdownMenuItem asChild>
-    <Link to={`/user/${username}`} className="flex items-center">
-      <User className="mr-2 h-4 w-4" />
-      <T>Profile</T>
-    </Link>
-  </DropdownMenuItem>
-
-  const handleLanguageChange = (langCode: string) => {
-    setLanguage(langCode as any);
-  };
-
-  const handleSignOut = async () => {
-    await signOut();
-  };
-
-  const handleWizardOpen = () => {
-    setCreationWizardOpen(true);
-  };
-
-  const handleSearchSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (searchQuery.trim()) {
-      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
-      searchInputRef.current?.blur();
-    }
-  };
-
-  const handleSearchKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setSearchQuery('');
-      searchInputRef.current?.blur();
-    }
-  };
-
-  return (
-    <header className="sticky top-0 z-50 w-full h-14 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 landscape:hidden lg:landscape:block">
-      <div className="flex items-center justify-between px-2 h-full">
-        {/* Logo / Brand */}
-        <Link to="/" className="flex items-center space-x-2">
-          <img src="/iPhone.png" alt="Logo" className="h-8 w-auto object-contain" />
-          <span className="font-bold text-lg hidden sm:inline-block">PolyMech</span>
-        </Link>
-
-        {/* Search Bar - Center */}
-        <div className="flex-1 max-w-md mx-4 hidden sm:block">
-          <form onSubmit={handleSearchSubmit} className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input
-              ref={searchInputRef}
-              type="search"
-              placeholder={translate("Search articles, pictures, files ...")}
-              className="pl-10 pr-4 h-9 w-full bg-muted/50 border-0 focus-visible:ring-1 focus-visible:ring-primary"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              onKeyDown={handleSearchKeyDown}
-            />
-          </form>
-        </div>
-
-        {/* Center Navigation - Desktop only, moved after search */}
-        <nav className="hidden lg:flex items-center space-x-6">
-
-        </nav>
-
-        {/* Right Side Actions */}
-        <div className="flex items-center space-x-2">
-          {/* Support Chat - public */}
-          <Button
-            variant={isActive('/support-chat') ? 'default' : 'ghost'}
-            size="sm"
-            onClick={() => navigate('/support-chat')}
-            className="h-8 w-8 p-0"
-            title={translate("Support Chat")}
-          >
-            <MessageSquare className="h-4 w-4" />
-          </Button>
-
-          {/* Mobile Search Button */}
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => navigate('/search')}
-            className="h-8 w-8 p-0 sm:hidden"
-            title={translate("Search")}
-          >
-            <Search className="h-4 w-4" />
-          </Button>
-
-          {/* Magic Button - AI Image Generator */}
-          {user && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleWizardOpen}
-              className="h-8 w-8 p-0"
-              title={translate("AI Image Generator")}
-            >
-              <Wand2 className="h-4 w-4" />
-            </Button>
-          )}
-
-          {/* Profile Grid Button - Direct to profile feed */}
-          {user && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => navigate(`/user/${user.id}`)}
-              className="h-8 w-8 p-0"
-              title={translate("My Profile")}
-            >
-              <Grid3x3 className="h-4 w-4" />
-            </Button>
-          )}
-
-          {/* Cart Icon with Badge */}
-          {cartItemCount > 0 && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => navigate('/cart')}
-              className="h-8 w-8 p-0 relative"
-              title={translate("Cart")}
-            >
-              <ShoppingCart className="h-4 w-4" />
-              <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
-                {cartItemCount > 9 ? '9+' : cartItemCount}
-              </span>
-            </Button>
-          )}
-
-          {/* Language Selector */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 w-8 p-0"
-                title={translate("Language")}
-              >
-                <Globe className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {supportedLanguages.map((lang) => (
-                <DropdownMenuItem
-                  key={lang.code}
-                  onSelect={() => handleLanguageChange(lang.code)}
-                  className={currentLang === lang.code ? 'bg-accent' : ''}
-                >
-                  {lang.name}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <ThemeToggle />
-
-          {user ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-                  <Avatar className="h-8 w-8">
-                    <AvatarFallback className="bg-gradient-primary text-white">
-                      <User className="h-4 w-4" />
-                    </AvatarFallback>
-                  </Avatar>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56" align="end" forceMount>
-                <div className="flex items-center justify-start gap-2 p-2">
-                  <div className="flex flex-col space-y-1 leading-none">
-                    <p className="font-medium">User {user.id.slice(0, 8)}</p>
-                    <p className="w-[200px] truncate text-sm text-muted-foreground">
-                      {user.email}
-                    </p>
-                  </div>
-                </div>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem asChild>
-                  <Link to={`/user/${user.id}`} className="flex items-center">
-                    <User className="mr-2 h-4 w-4" />
-                    <T>Profile</T>
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link to={`/user/${user.id}/pages/myspace?edit=true`} className="flex items-center">
-                    <Pencil className="mr-2 h-4 w-4" />
-                    <T>Edit Profile Page</T>
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link to="/profile" className="flex items-center">
-                    <Settings className="mr-2 h-4 w-4" />
-                    <T>Settings</T>
-                  </Link>
-                </DropdownMenuItem>
-
-                {roles.includes("admin") && (
-                  <>
-                    <DropdownMenuItem asChild>
-                      <Link to="/admin/users" className="flex items-center">
-                        <Shield className="mr-2 h-4 w-4" />
-                        <T>Admin</T>
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem asChild>
-                      <Link to={`/user/${user.id}/pages/home?edit=true`} className="flex items-center">
-                        <Home className="mr-2 h-4 w-4" />
-                        <T>Edit Home Page</T>
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem asChild>
-                      <Link to={`/playground/i18n`} className="flex items-center">
-                        <Home className="mr-2 h-4 w-4" />
-                        <T>I18n</T>
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem asChild>
-                      <Link to={`/playground/chat`} className="flex items-center">
-                        <Home className="mr-2 h-4 w-4" />
-                        <T>Chat</T>
-                      </Link>
-                    </DropdownMenuItem>
-                  </>
-                )}
-                <DropdownMenuItem asChild>
-                  <Link to="/?upload=true" className="flex items-center">
-                    <Upload className="mr-2 h-4 w-4" />
-                    <T>Upload</T>
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={handleSignOut} className="flex items-center">
-                  <LogOut className="mr-2 h-4 w-4" />
-                  <T>Sign out</T>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : (
-            <Button variant="ghost" size="sm" asChild>
-              <Link to={authPath} className="flex items-center">
-                <LogIn className="mr-2 h-4 w-4" />
-                <T>Sign in</T>
-              </Link>
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {user && creationWizardOpen && (
-        <Suspense fallback={null}>
-          <CreationWizardPopup
-            isOpen={creationWizardOpen}
-            onClose={() => setCreationWizardOpen(false)}
-            preloadedImages={wizardInitialImage ? [wizardInitialImage] : []}
-            initialMode={creationWizardMode}
-          />
-        </Suspense>
-      )}
-    </header>
-  );
-};
-
-export default TopNavigation;
\ No newline at end of file
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "@/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Home, User, Upload, LogOut, LogIn, Wand2, Search, Grid3x3, Globe, ListFilter, Shield, Activity, ShoppingCart, Pencil, Settings, MessageSquare } from "lucide-react";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { useWizardContext } from "@/hooks/useWizardContext";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useNavigate } from "react-router-dom";
+import { useProfiles } from "@/contexts/ProfilesContext";
+import { useState, useRef, useEffect, lazy, Suspense } from "react";
+import { T, getCurrentLang, supportedLanguages, translate, setLanguage } from "@/i18n";
+const CreationWizardPopup = lazy(() => import('./CreationWizardPopup').then(m => ({ default: m.CreationWizardPopup })));
+
+const TopNavigation = () => {
+  const { user, signOut, roles } = useAuth();
+  const { fetchProfile, profiles } = useProfiles();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const currentLang = getCurrentLang();
+  const { creationWizardOpen, setCreationWizardOpen, wizardInitialImage, creationWizardMode } = useWizardContext();
+
+  // Lazy-load ecommerce cart store to keep the heavy ecommerce bundle out of the initial load
+  const [cartItemCount, setCartItemCount] = useState(0);
+  useEffect(() => {
+    let unsubscribe: (() => void) | undefined;
+    import("@polymech/ecommerce").then(({ useCartStore }) => {
+      // Read initial value
+      setCartItemCount(useCartStore.getState().itemCount);
+      // Subscribe to changes
+      unsubscribe = useCartStore.subscribe((state) => {
+        setCartItemCount(state.itemCount);
+      });
+    }).catch(() => { /* ecommerce not available */ });
+    return () => unsubscribe?.();
+  }, []);
+
+  const authPath = '/auth';
+
+  useEffect(() => {
+    if (user?.id) {
+      fetchProfile(user.id);
+    }
+  }, [user?.id, fetchProfile]);
+
+  const userProfile = user ? profiles[user.id] : null;
+  const username = userProfile?.user_id || user?.id;
+  const isActive = (path: string) => location.pathname === path;
+
+  {/* Profile Grid Button - Direct to profile feed */ }
+  {
+    user && (
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => navigate(`/user/${username}`)}
+        className="h-8 w-8 p-0"
+        title={translate("My Profile")}
+      >
+        <Grid3x3 className="h-4 w-4" />
+      </Button>
+    )
+  }
+
+  // ...
+
+  <DropdownMenuItem asChild>
+    <Link to={`/user/${username}`} className="flex items-center">
+      <User className="mr-2 h-4 w-4" />
+      <T>Profile</T>
+    </Link>
+  </DropdownMenuItem>
+
+  const handleLanguageChange = (langCode: string) => {
+    setLanguage(langCode as any);
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+  };
+
+  const handleWizardOpen = () => {
+    setCreationWizardOpen(true);
+  };
+
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
+      searchInputRef.current?.blur();
+    }
+  };
+
+  const handleSearchKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setSearchQuery('');
+      searchInputRef.current?.blur();
+    }
+  };
+
+  return (
+    <header className="sticky top-0 z-50 w-full h-14 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 landscape:hidden lg:landscape:block">
+      <div className="flex items-center justify-between px-2 h-full">
+        {/* Logo / Brand */}
+        <Link to="/" className="flex items-center space-x-2">
+          <img src="/iPhone.png" alt="Logo" className="h-8 w-auto object-contain" />
+          <span className="font-bold text-lg hidden sm:inline-block">PolyMech</span>
+        </Link>
+
+        {/* Search Bar - Center */}
+        <div className="flex-1 max-w-md mx-4 hidden sm:block">
+          <form onSubmit={handleSearchSubmit} className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              ref={searchInputRef}
+              type="search"
+              placeholder={translate("Search articles, pictures, files ...")}
+              className="pl-10 pr-4 h-9 w-full bg-muted/50 border-0 focus-visible:ring-1 focus-visible:ring-primary"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={handleSearchKeyDown}
+            />
+          </form>
+        </div>
+
+        {/* Center Navigation - Desktop only, moved after search */}
+        <nav className="hidden lg:flex items-center space-x-6">
+
+        </nav>
+
+        {/* Right Side Actions */}
+        <div className="flex items-center space-x-2">
+          {/* Support Chat - public */}
+          <Button
+            variant={isActive('/support-chat') ? 'default' : 'ghost'}
+            size="sm"
+            onClick={() => navigate('/support-chat')}
+            className="h-8 w-8 p-0"
+            title={translate("Support Chat")}
+          >
+            <MessageSquare className="h-4 w-4" />
+          </Button>
+
+          {/* Mobile Search Button */}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/search')}
+            className="h-8 w-8 p-0 sm:hidden"
+            title={translate("Search")}
+          >
+            <Search className="h-4 w-4" />
+          </Button>
+
+          {/* Magic Button - AI Image Generator */}
+          {user && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleWizardOpen}
+              className="h-8 w-8 p-0"
+              title={translate("AI Image Generator")}
+            >
+              <Wand2 className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* Profile Grid Button - Direct to profile feed */}
+          {user && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigate(`/user/${user.id}`)}
+              className="h-8 w-8 p-0"
+              title={translate("My Profile")}
+            >
+              <Grid3x3 className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* Cart Icon with Badge */}
+          {cartItemCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigate('/cart')}
+              className="h-8 w-8 p-0 relative"
+              title={translate("Cart")}
+            >
+              <ShoppingCart className="h-4 w-4" />
+              <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
+                {cartItemCount > 9 ? '9+' : cartItemCount}
+              </span>
+            </Button>
+          )}
+
+          {/* Language Selector */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                title={translate("Language")}
+              >
+                <Globe className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {supportedLanguages.map((lang) => (
+                <DropdownMenuItem
+                  key={lang.code}
+                  onSelect={() => handleLanguageChange(lang.code)}
+                  className={currentLang === lang.code ? 'bg-accent' : ''}
+                >
+                  {lang.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <ThemeToggle />
+
+          {user ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+                  <Avatar className="h-8 w-8">
+                    <AvatarFallback className="bg-gradient-primary text-white">
+                      <User className="h-4 w-4" />
+                    </AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56" align="end" forceMount>
+                <div className="flex items-center justify-start gap-2 p-2">
+                  <div className="flex flex-col space-y-1 leading-none">
+                    <p className="font-medium">User {user.id.slice(0, 8)}</p>
+                    <p className="w-[200px] truncate text-sm text-muted-foreground">
+                      {user.email}
+                    </p>
+                  </div>
+                </div>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <Link to={`/user/${user.id}`} className="flex items-center">
+                    <User className="mr-2 h-4 w-4" />
+                    <T>Profile</T>
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link to={`/user/${user.id}/pages/myspace?edit=true`} className="flex items-center">
+                    <Pencil className="mr-2 h-4 w-4" />
+                    <T>Edit Profile Page</T>
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link to="/profile" className="flex items-center">
+                    <Settings className="mr-2 h-4 w-4" />
+                    <T>Settings</T>
+                  </Link>
+                </DropdownMenuItem>
+
+                {roles.includes("admin") && (
+                  <>
+                    <DropdownMenuItem asChild>
+                      <Link to="/admin/users" className="flex items-center">
+                        <Shield className="mr-2 h-4 w-4" />
+                        <T>Admin</T>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link to={`/user/${user.id}/pages/home?edit=true`} className="flex items-center">
+                        <Home className="mr-2 h-4 w-4" />
+                        <T>Edit Home Page</T>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link to={`/playground/i18n`} className="flex items-center">
+                        <Home className="mr-2 h-4 w-4" />
+                        <T>I18n</T>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link to={`/playground/chat`} className="flex items-center">
+                        <Home className="mr-2 h-4 w-4" />
+                        <T>Chat</T>
+                      </Link>
+                    </DropdownMenuItem>
+                  </>
+                )}
+                <DropdownMenuItem asChild>
+                  <Link to="/?upload=true" className="flex items-center">
+                    <Upload className="mr-2 h-4 w-4" />
+                    <T>Upload</T>
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={handleSignOut} className="flex items-center">
+                  <LogOut className="mr-2 h-4 w-4" />
+                  <T>Sign out</T>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <Button variant="ghost" size="sm" asChild>
+              <Link to={authPath} className="flex items-center">
+                <LogIn className="mr-2 h-4 w-4" />
+                <T>Sign in</T>
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {user && creationWizardOpen && (
+        <Suspense fallback={null}>
+          <CreationWizardPopup
+            isOpen={creationWizardOpen}
+            onClose={() => setCreationWizardOpen(false)}
+            preloadedImages={wizardInitialImage ? [wizardInitialImage] : []}
+            initialMode={creationWizardMode}
+          />
+        </Suspense>
+      )}
+    </header>
+  );
+};
+
+export default TopNavigation;
diff --git a/packages/ui/src/components/VersionSelector.tsx b/packages/ui/src/components/VersionSelector.tsx
index 02396397..122ebe3c 100644
--- a/packages/ui/src/components/VersionSelector.tsx
+++ b/packages/ui/src/components/VersionSelector.tsx
@@ -1,337 +1,337 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Check, Image as ImageIcon, Eye, EyeOff, Trash2 } from 'lucide-react';
-import { fetchPictureById, updatePicture, deletePictures, fetchUserPictures } from '@/modules/posts/client-pictures';
-import { useAuth } from '@/hooks/useAuth';
-import { toast } from 'sonner';
-import { T, translate } from '@/i18n';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-
-interface Version {
-  id: string;
-  title: string;
-  image_url: string;
-  is_selected: boolean;
-  created_at: string;
-  parent_id: string | null;
-  visible: boolean;
-  user_id: string; // Added for storage deletion path
-}
-
-interface VersionSelectorProps {
-  currentPictureId: string;
-  onVersionSelect: (selectedVersionId: string) => void;
-}
-
-const VersionSelector: React.FC<VersionSelectorProps> = ({
-  currentPictureId,
-  onVersionSelect
-}) => {
-  const { user } = useAuth();
-  const [versions, setVersions] = useState<Version[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [updating, setUpdating] = useState<string | null>(null);
-  const [toggling, setToggling] = useState<string | null>(null);
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [versionToDelete, setVersionToDelete] = useState<Version | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  useEffect(() => {
-    loadVersions();
-  }, [currentPictureId]);
-
-  const loadVersions = async () => {
-    if (!user || !currentPictureId) return;
-
-    setLoading(true);
-    try {
-      // Get the current picture to determine if it's a parent or child
-      const currentPicture = await fetchPictureById(currentPictureId);
-      if (!currentPicture) throw new Error('Picture not found');
-
-      // Fetch all user pictures and walk the full tree (same as VersionMap)
-      const allPictures = await fetchUserPictures(currentPicture.user_id);
-      if (!allPictures || allPictures.length === 0) {
-        setVersions([]);
-        return;
-      }
-
-      const pictureMap = new Map(allPictures.map((p: any) => [p.id, p]));
-
-      // Walk up to find the true root
-      let trueRootId = currentPicture.id;
-      let current: any = pictureMap.get(currentPicture.id);
-      while (current?.parent_id && pictureMap.has(current.parent_id)) {
-        trueRootId = current.parent_id;
-        current = pictureMap.get(current.parent_id);
-      }
-
-      // Collect all descendants from root
-      const tree: any[] = [];
-      const visited = new Set<string>();
-      const collect = (nodeId: string) => {
-        if (visited.has(nodeId)) return;
-        const node = pictureMap.get(nodeId);
-        if (!node) return;
-        visited.add(nodeId);
-        tree.push(node);
-        allPictures.filter((p: any) => p.parent_id === nodeId).forEach((child: any) => collect(child.id));
-      };
-      collect(trueRootId);
-
-      setVersions(tree || []);
-    } catch (error) {
-      console.error('Error loading versions:', error);
-      toast.error(translate('Failed to load image versions'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleVersionSelect = async (versionId: string) => {
-    if (!user) return;
-
-    setUpdating(versionId);
-    try {
-      const targetVersion = versions.find(v => v.id === versionId);
-      if (!targetVersion) return;
-
-      // Toggle: if already selected, unselect; otherwise select
-      const newSelected = !targetVersion.is_selected;
-
-      await updatePicture(versionId, { is_selected: newSelected } as any);
-
-      // Update local state
-      setVersions(prevVersions =>
-        prevVersions.map(v => ({
-          ...v,
-          is_selected: v.id === versionId ? newSelected : v.is_selected
-        }))
-      );
-
-      toast.success(translate(newSelected ? 'Version selected!' : 'Version unselected!'));
-      onVersionSelect(versionId);
-    } catch (error) {
-      console.error('Error toggling version selection:', error);
-      toast.error(translate('Failed to update version'));
-    } finally {
-      setUpdating(null);
-    }
-  };
-
-  const handleToggleVisibility = async (versionId: string, currentVisibility: boolean) => {
-    if (!user) return;
-
-    setToggling(versionId);
-    try {
-      await updatePicture(versionId, { visible: !currentVisibility } as any);
-
-      // Update local state
-      setVersions(prevVersions =>
-        prevVersions.map(v => ({
-          ...v,
-          visible: v.id === versionId ? !currentVisibility : v.visible
-        }))
-      );
-
-      toast.success(translate(!currentVisibility ? 'Version made visible successfully!' : 'Version hidden successfully!'));
-    } catch (error) {
-      console.error('Error toggling visibility:', error);
-      toast.error(translate('Failed to update visibility'));
-    } finally {
-      setToggling(null);
-    }
-  };
-
-  const handleDeleteClick = (version: Version) => {
-    setVersionToDelete(version);
-    setShowDeleteDialog(true);
-  };
-
-  const confirmDelete = async () => {
-    if (!versionToDelete || !user) return;
-
-    setIsDeleting(true);
-    try {
-      // 1. Find all descendants to delete (cascade)
-      const allUserPictures = await fetchUserPictures(user.id);
-
-      const findDescendants = (parentId: string): any[] => {
-        const descendants: any[] = [];
-        const children = allUserPictures.filter((p: any) => p.parent_id === parentId);
-        children.forEach((child: any) => {
-          descendants.push(child);
-          descendants.push(...findDescendants(child.id));
-        });
-        return descendants;
-      };
-
-      const descendantsToDelete = findDescendants(versionToDelete.id);
-      const allToDelete = [versionToDelete, ...descendantsToDelete];
-      const idsToDelete = allToDelete.map(v => v.id);
-
-      // 2. Batch delete via API (handles storage + db)
-      await deletePictures(idsToDelete);
-
-      // 3. Update local state
-      const deletedIds = new Set(idsToDelete);
-      setVersions(prev => prev.filter(v => !deletedIds.has(v.id)));
-
-      const totalDeleted = allToDelete.length;
-      toast.success(translate(`Deleted ${totalDeleted > 1 ? `${totalDeleted} versions` : 'version'} successfully`));
-
-    } catch (error) {
-      console.error('Error deleting version:', error);
-      toast.error(translate('Failed to delete version'));
-    } finally {
-      setIsDeleting(false);
-      setShowDeleteDialog(false);
-      setVersionToDelete(null);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center p-4">
-        <div className="text-muted-foreground"><T>Loading versions...</T></div>
-      </div>
-    );
-  }
-
-  if (versions.length <= 1) {
-    return (
-      <div className="text-center p-4">
-        <p className="text-muted-foreground"><T>No other versions available for this image.</T></p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2 mb-4">
-        <ImageIcon className="h-5 w-5" />
-        <h3 className="font-semibold"><T>Image Versions</T></h3>
-        <Badge variant="secondary">{versions.length}</Badge>
-      </div>
-
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
-        {versions.map((version) => (
-          <Card
-            key={version.id}
-            className={`cursor-pointer transition-all hover:scale-105 ${version.is_selected ? 'ring-2 ring-primary' : ''
-              }`}
-          >
-            <CardContent className="p-2">
-              <div className="aspect-square relative mb-2 overflow-hidden rounded-md">
-                <img
-                  src={version.image_url}
-                  alt={version.title}
-                  className="w-full h-full object-cover"
-                />
-                {version.is_selected && (
-                  <div className="absolute top-2 right-2 bg-primary text-primary-foreground rounded-full p-1">
-                    <Check className="h-3 w-3" />
-                  </div>
-                )}
-              </div>
-
-              <div className="space-y-1">
-                <p className="text-xs font-medium truncate">{version.title}</p>
-                <p className="text-xs text-muted-foreground">
-                  {new Date(version.created_at).toLocaleDateString()}
-                </p>
-                <div className="flex items-center gap-1">
-                  {version.parent_id === null && (
-                    <Badge variant="outline" className="text-xs"><T>Original</T></Badge>
-                  )}
-                  {!version.visible && (
-                    <Badge variant="secondary" className="text-xs"><T>Hidden</T></Badge>
-                  )}
-                </div>
-              </div>
-
-              <div className="flex gap-1 mt-2">
-                <Button
-                  size="sm"
-                  className="flex-1"
-                  variant={version.is_selected ? "default" : "outline"}
-                  onClick={() => handleVersionSelect(version.id)}
-                  disabled={updating === version.id}
-                >
-                  <T>{updating === version.id ? 'Updating...' :
-                    version.is_selected ? 'Unselect' : 'Select'}</T>
-                </Button>
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => handleToggleVisibility(version.id, version.visible)}
-                  disabled={toggling === version.id}
-                  className="px-2"
-                >
-                  {toggling === version.id ? (
-                    <div className="animate-spin rounded-full h-3 w-3 border border-current border-t-transparent" />
-                  ) : version.visible ? (
-                    <Eye className="h-3 w-3" />
-                  ) : (
-                    <EyeOff className="h-3 w-3" />
-                  )}
-                </Button>
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  className="px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
-                  onClick={() => handleDeleteClick(version)}
-                  disabled={isDeleting || version.id === currentPictureId} // Disable deleting the currently ACTIVE one? Or just handle correctly?
-                  title={translate("Delete version")}
-                >
-                  <Trash2 className="h-3 w-3" />
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle><T>Delete Version</T></AlertDialogTitle>
-            <AlertDialogDescription>
-              <T>Are you sure you want to delete this version?</T> "{versionToDelete?.title}"
-              <br /><br />
-              <span className="text-destructive font-semibold">
-                <T>This action cannot be undone.</T>
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel><T>Cancel</T></AlertDialogCancel>
-            <AlertDialogAction
-              onClick={(e) => {
-                e.preventDefault();
-                confirmDelete();
-              }}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              disabled={isDeleting}
-            >
-              {isDeleting ? <T>Deleting...</T> : <T>Delete</T>}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-};
-
-export default VersionSelector;
\ No newline at end of file
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Check, Image as ImageIcon, Eye, EyeOff, Trash2 } from 'lucide-react';
+import { fetchPictureById, updatePicture, deletePictures, fetchUserPictures } from '@/modules/posts/client-pictures';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from 'sonner';
+import { T, translate } from '@/i18n';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface Version {
+  id: string;
+  title: string;
+  image_url: string;
+  is_selected: boolean;
+  created_at: string;
+  parent_id: string | null;
+  visible: boolean;
+  user_id: string; // Added for storage deletion path
+}
+
+interface VersionSelectorProps {
+  currentPictureId: string;
+  onVersionSelect: (selectedVersionId: string) => void;
+}
+
+const VersionSelector: React.FC<VersionSelectorProps> = ({
+  currentPictureId,
+  onVersionSelect
+}) => {
+  const { user } = useAuth();
+  const [versions, setVersions] = useState<Version[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [updating, setUpdating] = useState<string | null>(null);
+  const [toggling, setToggling] = useState<string | null>(null);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [versionToDelete, setVersionToDelete] = useState<Version | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  useEffect(() => {
+    loadVersions();
+  }, [currentPictureId]);
+
+  const loadVersions = async () => {
+    if (!user || !currentPictureId) return;
+
+    setLoading(true);
+    try {
+      // Get the current picture to determine if it's a parent or child
+      const currentPicture = await fetchPictureById(currentPictureId);
+      if (!currentPicture) throw new Error('Picture not found');
+
+      // Fetch all user pictures and walk the full tree (same as VersionMap)
+      const allPictures = await fetchUserPictures(currentPicture.user_id);
+      if (!allPictures || allPictures.length === 0) {
+        setVersions([]);
+        return;
+      }
+
+      const pictureMap = new Map(allPictures.map((p: any) => [p.id, p]));
+
+      // Walk up to find the true root
+      let trueRootId = currentPicture.id;
+      let current: any = pictureMap.get(currentPicture.id);
+      while (current?.parent_id && pictureMap.has(current.parent_id)) {
+        trueRootId = current.parent_id;
+        current = pictureMap.get(current.parent_id);
+      }
+
+      // Collect all descendants from root
+      const tree: any[] = [];
+      const visited = new Set<string>();
+      const collect = (nodeId: string) => {
+        if (visited.has(nodeId)) return;
+        const node = pictureMap.get(nodeId);
+        if (!node) return;
+        visited.add(nodeId);
+        tree.push(node);
+        allPictures.filter((p: any) => p.parent_id === nodeId).forEach((child: any) => collect(child.id));
+      };
+      collect(trueRootId);
+
+      setVersions(tree || []);
+    } catch (error) {
+      console.error('Error loading versions:', error);
+      toast.error(translate('Failed to load image versions'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVersionSelect = async (versionId: string) => {
+    if (!user) return;
+
+    setUpdating(versionId);
+    try {
+      const targetVersion = versions.find(v => v.id === versionId);
+      if (!targetVersion) return;
+
+      // Toggle: if already selected, unselect; otherwise select
+      const newSelected = !targetVersion.is_selected;
+
+      await updatePicture(versionId, { is_selected: newSelected } as any);
+
+      // Update local state
+      setVersions(prevVersions =>
+        prevVersions.map(v => ({
+          ...v,
+          is_selected: v.id === versionId ? newSelected : v.is_selected
+        }))
+      );
+
+      toast.success(translate(newSelected ? 'Version selected!' : 'Version unselected!'));
+      onVersionSelect(versionId);
+    } catch (error) {
+      console.error('Error toggling version selection:', error);
+      toast.error(translate('Failed to update version'));
+    } finally {
+      setUpdating(null);
+    }
+  };
+
+  const handleToggleVisibility = async (versionId: string, currentVisibility: boolean) => {
+    if (!user) return;
+
+    setToggling(versionId);
+    try {
+      await updatePicture(versionId, { visible: !currentVisibility } as any);
+
+      // Update local state
+      setVersions(prevVersions =>
+        prevVersions.map(v => ({
+          ...v,
+          visible: v.id === versionId ? !currentVisibility : v.visible
+        }))
+      );
+
+      toast.success(translate(!currentVisibility ? 'Version made visible successfully!' : 'Version hidden successfully!'));
+    } catch (error) {
+      console.error('Error toggling visibility:', error);
+      toast.error(translate('Failed to update visibility'));
+    } finally {
+      setToggling(null);
+    }
+  };
+
+  const handleDeleteClick = (version: Version) => {
+    setVersionToDelete(version);
+    setShowDeleteDialog(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!versionToDelete || !user) return;
+
+    setIsDeleting(true);
+    try {
+      // 1. Find all descendants to delete (cascade)
+      const allUserPictures = await fetchUserPictures(user.id);
+
+      const findDescendants = (parentId: string): any[] => {
+        const descendants: any[] = [];
+        const children = allUserPictures.filter((p: any) => p.parent_id === parentId);
+        children.forEach((child: any) => {
+          descendants.push(child);
+          descendants.push(...findDescendants(child.id));
+        });
+        return descendants;
+      };
+
+      const descendantsToDelete = findDescendants(versionToDelete.id);
+      const allToDelete = [versionToDelete, ...descendantsToDelete];
+      const idsToDelete = allToDelete.map(v => v.id);
+
+      // 2. Batch delete via API (handles storage + db)
+      await deletePictures(idsToDelete);
+
+      // 3. Update local state
+      const deletedIds = new Set(idsToDelete);
+      setVersions(prev => prev.filter(v => !deletedIds.has(v.id)));
+
+      const totalDeleted = allToDelete.length;
+      toast.success(translate(`Deleted ${totalDeleted > 1 ? `${totalDeleted} versions` : 'version'} successfully`));
+
+    } catch (error) {
+      console.error('Error deleting version:', error);
+      toast.error(translate('Failed to delete version'));
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteDialog(false);
+      setVersionToDelete(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <div className="text-muted-foreground"><T>Loading versions...</T></div>
+      </div>
+    );
+  }
+
+  if (versions.length <= 1) {
+    return (
+      <div className="text-center p-4">
+        <p className="text-muted-foreground"><T>No other versions available for this image.</T></p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2 mb-4">
+        <ImageIcon className="h-5 w-5" />
+        <h3 className="font-semibold"><T>Image Versions</T></h3>
+        <Badge variant="secondary">{versions.length}</Badge>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+        {versions.map((version) => (
+          <Card
+            key={version.id}
+            className={`cursor-pointer transition-all hover:scale-105 ${version.is_selected ? 'ring-2 ring-primary' : ''
+              }`}
+          >
+            <CardContent className="p-2">
+              <div className="aspect-square relative mb-2 overflow-hidden rounded-md">
+                <img
+                  src={version.image_url}
+                  alt={version.title}
+                  className="w-full h-full object-cover"
+                />
+                {version.is_selected && (
+                  <div className="absolute top-2 right-2 bg-primary text-primary-foreground rounded-full p-1">
+                    <Check className="h-3 w-3" />
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-1">
+                <p className="text-xs font-medium truncate">{version.title}</p>
+                <p className="text-xs text-muted-foreground">
+                  {new Date(version.created_at).toLocaleDateString()}
+                </p>
+                <div className="flex items-center gap-1">
+                  {version.parent_id === null && (
+                    <Badge variant="outline" className="text-xs"><T>Original</T></Badge>
+                  )}
+                  {!version.visible && (
+                    <Badge variant="secondary" className="text-xs"><T>Hidden</T></Badge>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex gap-1 mt-2">
+                <Button
+                  size="sm"
+                  className="flex-1"
+                  variant={version.is_selected ? "default" : "outline"}
+                  onClick={() => handleVersionSelect(version.id)}
+                  disabled={updating === version.id}
+                >
+                  <T>{updating === version.id ? 'Updating...' :
+                    version.is_selected ? 'Unselect' : 'Select'}</T>
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => handleToggleVisibility(version.id, version.visible)}
+                  disabled={toggling === version.id}
+                  className="px-2"
+                >
+                  {toggling === version.id ? (
+                    <div className="animate-spin rounded-full h-3 w-3 border border-current border-t-transparent" />
+                  ) : version.visible ? (
+                    <Eye className="h-3 w-3" />
+                  ) : (
+                    <EyeOff className="h-3 w-3" />
+                  )}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
+                  onClick={() => handleDeleteClick(version)}
+                  disabled={isDeleting || version.id === currentPictureId} // Disable deleting the currently ACTIVE one? Or just handle correctly?
+                  title={translate("Delete version")}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle><T>Delete Version</T></AlertDialogTitle>
+            <AlertDialogDescription>
+              <T>Are you sure you want to delete this version?</T> "{versionToDelete?.title}"
+              <br /><br />
+              <span className="text-destructive font-semibold">
+                <T>This action cannot be undone.</T>
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel><T>Cancel</T></AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(e) => {
+                e.preventDefault();
+                confirmDelete();
+              }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={isDeleting}
+            >
+              {isDeleting ? <T>Deleting...</T> : <T>Delete</T>}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default VersionSelector;
diff --git a/packages/ui/src/components/logging/LogsPage.tsx b/packages/ui/src/components/logging/LogsPage.tsx
index d1c8eb14..432e6146 100644
--- a/packages/ui/src/components/logging/LogsPage.tsx
+++ b/packages/ui/src/components/logging/LogsPage.tsx
@@ -72,4 +72,4 @@ const LogsPage = () => {
   );
 };
 
-export default LogsPage;
\ No newline at end of file
+export default LogsPage;
diff --git a/packages/ui/src/components/tree/components/cursor.tsx b/packages/ui/src/components/tree/components/cursor.tsx
index 658664c1..9d7b62ec 100644
--- a/packages/ui/src/components/tree/components/cursor.tsx
+++ b/packages/ui/src/components/tree/components/cursor.tsx
@@ -1,15 +1,15 @@
-import { useDndContext, useTreeApi } from "../context";
-
-export function Cursor() {
-  const tree = useTreeApi();
-  const state = useDndContext();
-  const cursor = state.cursor;
-  if (!cursor || cursor.type !== "line") return null;
-  const indent = tree.indent;
-  const top =
-    tree.rowHeight * cursor.index +
-    (tree.props.padding ?? tree.props.paddingTop ?? 0);
-  const left = indent * cursor.level;
-  const Cursor = tree.renderCursor;
-  return <Cursor {...{ top, left, indent }} />;
-}
+import { useDndContext, useTreeApi } from "../context";
+
+export function Cursor() {
+  const tree = useTreeApi();
+  const state = useDndContext();
+  const cursor = state.cursor;
+  if (!cursor || cursor.type !== "line") return null;
+  const indent = tree.indent;
+  const top =
+    tree.rowHeight * cursor.index +
+    (tree.props.padding ?? tree.props.paddingTop ?? 0);
+  const left = indent * cursor.level;
+  const Cursor = tree.renderCursor;
+  return <Cursor {...{ top, left, indent }} />;
+}
diff --git a/packages/ui/src/components/tree/components/default-container.tsx b/packages/ui/src/components/tree/components/default-container.tsx
index f92dd5cf..9960fc0a 100644
--- a/packages/ui/src/components/tree/components/default-container.tsx
+++ b/packages/ui/src/components/tree/components/default-container.tsx
@@ -1,239 +1,239 @@
-import { FixedSizeList } from "react-window";
-import { useDataUpdates, useTreeApi } from "../context";
-import { focusNextElement, focusPrevElement } from "../utils";
-import { ListOuterElement } from "./list-outer-element";
-import { ListInnerElement } from "./list-inner-element";
-import { RowContainer } from "./row-container";
-
-let focusSearchTerm = "";
-let timeoutId: any = null;
-
-/**
- * All these keyboard shortcuts seem like they should be configurable.
- * Each operation should be a given a name and separated from
- * the event handler. Future clean up welcome.
- */
-export function DefaultContainer() {
-  useDataUpdates();
-  const tree = useTreeApi();
-  return (
-    <div
-      role="tree"
-      style={{
-        height: tree.height,
-        width: tree.width,
-        minHeight: 0,
-        minWidth: 0,
-      }}
-      onContextMenu={tree.props.onContextMenu}
-      onClick={tree.props.onClick}
-      tabIndex={0}
-      onFocus={(e) => {
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-          tree.onFocus();
-        }
-      }}
-      onBlur={(e) => {
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-          tree.onBlur();
-        }
-      }}
-      onKeyDown={(e) => {
-        if (tree.isEditing) {
-          return;
-        }
-        if (e.key === "Backspace") {
-          if (!tree.props.onDelete) return;
-          const ids = Array.from(tree.selectedIds);
-          if (ids.length > 1) {
-            let nextFocus = tree.mostRecentNode;
-            while (nextFocus && nextFocus.isSelected) {
-              nextFocus = nextFocus.nextSibling;
-            }
-            if (!nextFocus) nextFocus = tree.lastNode;
-            tree.focus(nextFocus, { scroll: false });
-            tree.delete(Array.from(ids));
-          } else {
-            const node = tree.focusedNode;
-            if (node) {
-              const sib = node.nextSibling;
-              const parent = node.parent;
-              tree.focus(sib || parent, { scroll: false });
-              tree.delete(node);
-            }
-          }
-          return;
-        }
-        if (e.key === "Tab" && !e.shiftKey) {
-          e.preventDefault();
-          focusNextElement(e.currentTarget);
-          return;
-        }
-        if (e.key === "Tab" && e.shiftKey) {
-          e.preventDefault();
-          focusPrevElement(e.currentTarget);
-          return;
-        }
-        if (e.key === "ArrowDown") {
-          e.preventDefault();
-          const next = tree.nextNode;
-          if (e.metaKey) {
-            tree.select(tree.focusedNode);
-            tree.activate(tree.focusedNode);
-            return;
-          } else if (!e.shiftKey || tree.props.disableMultiSelection) {
-            tree.focus(next);
-            return;
-          } else {
-            if (!next) return;
-            const current = tree.focusedNode;
-            if (!current) {
-              tree.focus(tree.firstNode);
-            } else if (current.isSelected) {
-              tree.selectContiguous(next);
-            } else {
-              tree.selectMulti(next);
-            }
-            return;
-          }
-        }
-        if (e.key === "ArrowUp") {
-          e.preventDefault();
-          const prev = tree.prevNode;
-          if (!e.shiftKey || tree.props.disableMultiSelection) {
-            tree.focus(prev);
-            return;
-          } else {
-            if (!prev) return;
-            const current = tree.focusedNode;
-            if (!current) {
-              tree.focus(tree.lastNode); // ?
-            } else if (current.isSelected) {
-              tree.selectContiguous(prev);
-            } else {
-              tree.selectMulti(prev);
-            }
-            return;
-          }
-        }
-        if (e.key === "ArrowRight") {
-          const node = tree.focusedNode;
-          if (!node) return;
-          if (node.isInternal && node.isOpen) {
-            tree.focus(tree.nextNode);
-          } else if (node.isInternal) tree.open(node.id);
-          return;
-        }
-        if (e.key === "ArrowLeft") {
-          const node = tree.focusedNode;
-          if (!node || node.isRoot) return;
-          if (node.isInternal && node.isOpen) tree.close(node.id);
-          else if (!node.parent?.isRoot) {
-            tree.focus(node.parent);
-          }
-          return;
-        }
-        if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
-          e.preventDefault();
-          tree.selectAll();
-          return;
-        }
-        if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
-          tree.createLeaf();
-          return;
-        }
-        if (e.key === "A" && !e.metaKey) {
-          if (!tree.props.onCreate) return;
-          tree.createInternal();
-          return;
-        }
-
-        if (e.key === "Home") {
-          // add shift keys
-          e.preventDefault();
-          tree.focus(tree.firstNode);
-          return;
-        }
-        if (e.key === "End") {
-          // add shift keys
-          e.preventDefault();
-          tree.focus(tree.lastNode);
-          return;
-        }
-        if (e.key === "Enter") {
-          const node = tree.focusedNode;
-          if (!node) return;
-          if (!node.isEditable || !tree.props.onRename) return;
-          setTimeout(() => {
-            if (node) tree.edit(node);
-          });
-          return;
-        }
-        if (e.key === " ") {
-          e.preventDefault();
-          const node = tree.focusedNode;
-          if (!node) return;
-          if (node.isLeaf) {
-            node.select();
-            node.activate();
-          } else {
-            node.toggle();
-          }
-          return;
-        }
-        if (e.key === "*") {
-          const node = tree.focusedNode;
-          if (!node) return;
-          tree.openSiblings(node);
-          return;
-        }
-        if (e.key === "PageUp") {
-          e.preventDefault();
-          tree.pageUp();
-          return;
-        }
-        if (e.key === "PageDown") {
-          e.preventDefault();
-          tree.pageDown();
-        }
-
-        // If they type a sequence of characters
-        // collect them. Reset them after a timeout.
-        // Use it to search the tree for a node, then focus it.
-        // Clean this up a bit later
-        clearTimeout(timeoutId);
-        focusSearchTerm += e.key;
-        timeoutId = setTimeout(() => {
-          focusSearchTerm = "";
-        }, 600);
-        const node = tree.visibleNodes.find((n) => {
-          // @ts-ignore
-          const name = n.data.name;
-          if (typeof name === "string") {
-            return name.toLowerCase().startsWith(focusSearchTerm);
-          } else return false;
-        });
-        if (node) tree.focus(node.id);
-      }}
-    >
-      {/* @ts-ignore */}
-      <FixedSizeList
-        className={tree.props.className}
-        outerRef={tree.listEl}
-        itemCount={tree.visibleNodes.length}
-        height={tree.height}
-        width={tree.width}
-        itemSize={tree.rowHeight}
-        overscanCount={tree.overscanCount}
-        itemKey={(index) => tree.visibleNodes[index]?.id || index}
-        outerElementType={ListOuterElement}
-        innerElementType={ListInnerElement}
-        onScroll={tree.props.onScroll}
-        onItemsRendered={tree.onItemsRendered.bind(tree)}
-        ref={tree.list}
-      >
-        {RowContainer}
-      </FixedSizeList>
-    </div>
-  );
-}
+import { FixedSizeList } from "react-window";
+import { useDataUpdates, useTreeApi } from "../context";
+import { focusNextElement, focusPrevElement } from "../utils";
+import { ListOuterElement } from "./list-outer-element";
+import { ListInnerElement } from "./list-inner-element";
+import { RowContainer } from "./row-container";
+
+let focusSearchTerm = "";
+let timeoutId: any = null;
+
+/**
+ * All these keyboard shortcuts seem like they should be configurable.
+ * Each operation should be a given a name and separated from
+ * the event handler. Future clean up welcome.
+ */
+export function DefaultContainer() {
+  useDataUpdates();
+  const tree = useTreeApi();
+  return (
+    <div
+      role="tree"
+      style={{
+        height: tree.height,
+        width: tree.width,
+        minHeight: 0,
+        minWidth: 0,
+      }}
+      onContextMenu={tree.props.onContextMenu}
+      onClick={tree.props.onClick}
+      tabIndex={0}
+      onFocus={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          tree.onFocus();
+        }
+      }}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          tree.onBlur();
+        }
+      }}
+      onKeyDown={(e) => {
+        if (tree.isEditing) {
+          return;
+        }
+        if (e.key === "Backspace") {
+          if (!tree.props.onDelete) return;
+          const ids = Array.from(tree.selectedIds);
+          if (ids.length > 1) {
+            let nextFocus = tree.mostRecentNode;
+            while (nextFocus && nextFocus.isSelected) {
+              nextFocus = nextFocus.nextSibling;
+            }
+            if (!nextFocus) nextFocus = tree.lastNode;
+            tree.focus(nextFocus, { scroll: false });
+            tree.delete(Array.from(ids));
+          } else {
+            const node = tree.focusedNode;
+            if (node) {
+              const sib = node.nextSibling;
+              const parent = node.parent;
+              tree.focus(sib || parent, { scroll: false });
+              tree.delete(node);
+            }
+          }
+          return;
+        }
+        if (e.key === "Tab" && !e.shiftKey) {
+          e.preventDefault();
+          focusNextElement(e.currentTarget);
+          return;
+        }
+        if (e.key === "Tab" && e.shiftKey) {
+          e.preventDefault();
+          focusPrevElement(e.currentTarget);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const next = tree.nextNode;
+          if (e.metaKey) {
+            tree.select(tree.focusedNode);
+            tree.activate(tree.focusedNode);
+            return;
+          } else if (!e.shiftKey || tree.props.disableMultiSelection) {
+            tree.focus(next);
+            return;
+          } else {
+            if (!next) return;
+            const current = tree.focusedNode;
+            if (!current) {
+              tree.focus(tree.firstNode);
+            } else if (current.isSelected) {
+              tree.selectContiguous(next);
+            } else {
+              tree.selectMulti(next);
+            }
+            return;
+          }
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prev = tree.prevNode;
+          if (!e.shiftKey || tree.props.disableMultiSelection) {
+            tree.focus(prev);
+            return;
+          } else {
+            if (!prev) return;
+            const current = tree.focusedNode;
+            if (!current) {
+              tree.focus(tree.lastNode); // ?
+            } else if (current.isSelected) {
+              tree.selectContiguous(prev);
+            } else {
+              tree.selectMulti(prev);
+            }
+            return;
+          }
+        }
+        if (e.key === "ArrowRight") {
+          const node = tree.focusedNode;
+          if (!node) return;
+          if (node.isInternal && node.isOpen) {
+            tree.focus(tree.nextNode);
+          } else if (node.isInternal) tree.open(node.id);
+          return;
+        }
+        if (e.key === "ArrowLeft") {
+          const node = tree.focusedNode;
+          if (!node || node.isRoot) return;
+          if (node.isInternal && node.isOpen) tree.close(node.id);
+          else if (!node.parent?.isRoot) {
+            tree.focus(node.parent);
+          }
+          return;
+        }
+        if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
+          e.preventDefault();
+          tree.selectAll();
+          return;
+        }
+        if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
+          tree.createLeaf();
+          return;
+        }
+        if (e.key === "A" && !e.metaKey) {
+          if (!tree.props.onCreate) return;
+          tree.createInternal();
+          return;
+        }
+
+        if (e.key === "Home") {
+          // add shift keys
+          e.preventDefault();
+          tree.focus(tree.firstNode);
+          return;
+        }
+        if (e.key === "End") {
+          // add shift keys
+          e.preventDefault();
+          tree.focus(tree.lastNode);
+          return;
+        }
+        if (e.key === "Enter") {
+          const node = tree.focusedNode;
+          if (!node) return;
+          if (!node.isEditable || !tree.props.onRename) return;
+          setTimeout(() => {
+            if (node) tree.edit(node);
+          });
+          return;
+        }
+        if (e.key === " ") {
+          e.preventDefault();
+          const node = tree.focusedNode;
+          if (!node) return;
+          if (node.isLeaf) {
+            node.select();
+            node.activate();
+          } else {
+            node.toggle();
+          }
+          return;
+        }
+        if (e.key === "*") {
+          const node = tree.focusedNode;
+          if (!node) return;
+          tree.openSiblings(node);
+          return;
+        }
+        if (e.key === "PageUp") {
+          e.preventDefault();
+          tree.pageUp();
+          return;
+        }
+        if (e.key === "PageDown") {
+          e.preventDefault();
+          tree.pageDown();
+        }
+
+        // If they type a sequence of characters
+        // collect them. Reset them after a timeout.
+        // Use it to search the tree for a node, then focus it.
+        // Clean this up a bit later
+        clearTimeout(timeoutId);
+        focusSearchTerm += e.key;
+        timeoutId = setTimeout(() => {
+          focusSearchTerm = "";
+        }, 600);
+        const node = tree.visibleNodes.find((n) => {
+          // @ts-ignore
+          const name = n.data.name;
+          if (typeof name === "string") {
+            return name.toLowerCase().startsWith(focusSearchTerm);
+          } else return false;
+        });
+        if (node) tree.focus(node.id);
+      }}
+    >
+      {/* @ts-ignore */}
+      <FixedSizeList
+        className={tree.props.className}
+        outerRef={tree.listEl}
+        itemCount={tree.visibleNodes.length}
+        height={tree.height}
+        width={tree.width}
+        itemSize={tree.rowHeight}
+        overscanCount={tree.overscanCount}
+        itemKey={(index) => tree.visibleNodes[index]?.id || index}
+        outerElementType={ListOuterElement}
+        innerElementType={ListInnerElement}
+        onScroll={tree.props.onScroll}
+        onItemsRendered={tree.onItemsRendered.bind(tree)}
+        ref={tree.list}
+      >
+        {RowContainer}
+      </FixedSizeList>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/tree/components/default-cursor.tsx b/packages/ui/src/components/tree/components/default-cursor.tsx
index 00565ea2..8b70ff63 100644
--- a/packages/ui/src/components/tree/components/default-cursor.tsx
+++ b/packages/ui/src/components/tree/components/default-cursor.tsx
@@ -1,42 +1,42 @@
-import React, { CSSProperties } from "react";
-import { CursorProps } from "../types/renderers";
-
-const placeholderStyle = {
-  display: "flex",
-  alignItems: "center",
-  zIndex: 1,
-};
-
-const lineStyle = {
-  flex: 1,
-  height: "2px",
-  background: "#4B91E2",
-  borderRadius: "1px",
-};
-
-const circleStyle = {
-  width: "4px",
-  height: "4px",
-  boxShadow: "0 0 0 3px #4B91E2",
-  borderRadius: "50%",
-};
-
-export const DefaultCursor = React.memo(function DefaultCursor({
-  top,
-  left,
-  indent,
-}: CursorProps) {
-  const style: CSSProperties = {
-    position: "absolute",
-    pointerEvents: "none",
-    top: top - 2 + "px",
-    left: left + "px",
-    right: indent + "px",
-  };
-  return (
-    <div style={{ ...placeholderStyle, ...style }}>
-      <div style={{ ...circleStyle }}></div>
-      <div style={{ ...lineStyle }}></div>
-    </div>
-  );
-});
+import React, { CSSProperties } from "react";
+import { CursorProps } from "../types/renderers";
+
+const placeholderStyle = {
+  display: "flex",
+  alignItems: "center",
+  zIndex: 1,
+};
+
+const lineStyle = {
+  flex: 1,
+  height: "2px",
+  background: "#4B91E2",
+  borderRadius: "1px",
+};
+
+const circleStyle = {
+  width: "4px",
+  height: "4px",
+  boxShadow: "0 0 0 3px #4B91E2",
+  borderRadius: "50%",
+};
+
+export const DefaultCursor = React.memo(function DefaultCursor({
+  top,
+  left,
+  indent,
+}: CursorProps) {
+  const style: CSSProperties = {
+    position: "absolute",
+    pointerEvents: "none",
+    top: top - 2 + "px",
+    left: left + "px",
+    right: indent + "px",
+  };
+  return (
+    <div style={{ ...placeholderStyle, ...style }}>
+      <div style={{ ...circleStyle }}></div>
+      <div style={{ ...lineStyle }}></div>
+    </div>
+  );
+});
diff --git a/packages/ui/src/components/tree/components/default-drag-preview.tsx b/packages/ui/src/components/tree/components/default-drag-preview.tsx
index fb3b28a0..a90f488d 100644
--- a/packages/ui/src/components/tree/components/default-drag-preview.tsx
+++ b/packages/ui/src/components/tree/components/default-drag-preview.tsx
@@ -1,92 +1,92 @@
-import React, { CSSProperties, memo } from "react";
-import { XYCoord } from "react-dnd";
-import { useTreeApi } from "../context";
-import { DragPreviewProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
-
-const layerStyles: CSSProperties = {
-  position: "fixed",
-  pointerEvents: "none",
-  zIndex: 100,
-  left: 0,
-  top: 0,
-  width: "100%",
-  height: "100%",
-};
-
-const getStyle = (offset: XYCoord | null) => {
-  if (!offset) return { display: "none" };
-  const { x, y } = offset;
-  return { transform: `translate(${x}px, ${y}px)` };
-};
-
-const getCountStyle = (offset: XYCoord | null) => {
-  if (!offset) return { display: "none" };
-  const { x, y } = offset;
-  return { transform: `translate(${x + 10}px, ${y + 10}px)` };
-};
-
-export function DefaultDragPreview({
-  offset,
-  mouse,
-  id,
-  dragIds,
-  isDragging,
-}: DragPreviewProps) {
-  return (
-    <Overlay isDragging={isDragging}>
-      <Position offset={offset}>
-        <PreviewNode id={id} dragIds={dragIds} />
-      </Position>
-      <Count mouse={mouse} count={dragIds.length} />
-    </Overlay>
-  );
-}
-
-const Overlay = memo(function Overlay(props: {
-  children: JSX.Element[];
-  isDragging: boolean;
-}) {
-  if (!props.isDragging) return null;
-  return <div style={layerStyles}>{props.children}</div>;
-});
-
-function Position(props: { children: JSX.Element; offset: XYCoord | null }) {
-  return (
-    <div className="row preview" style={getStyle(props.offset)}>
-      {props.children}
-    </div>
-  );
-}
-
-function Count(props: { count: number; mouse: XYCoord | null }) {
-  const { count, mouse } = props;
-  if (count > 1)
-    return (
-      <div className="selected-count" style={getCountStyle(mouse)}>
-        {count}
-      </div>
-    );
-  else return null;
-}
-
-const PreviewNode = memo(function PreviewNode<T>(props: {
-  id: string | null;
-  dragIds: string[];
-}) {
-  const tree = useTreeApi<T>();
-  const node = tree.get(props.id);
-  if (!node) return null;
-  return (
-    <tree.renderNode
-      preview
-      node={node}
-      style={{
-        paddingLeft: node.level * tree.indent,
-        opacity: 0.2,
-        background: "transparent",
-      }}
-      tree={tree}
-    />
-  );
-});
+import React, { CSSProperties, memo } from "react";
+import { XYCoord } from "react-dnd";
+import { useTreeApi } from "../context";
+import { DragPreviewProps } from "../types/renderers";
+import { IdObj } from "../types/utils";
+
+const layerStyles: CSSProperties = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: "100%",
+  height: "100%",
+};
+
+const getStyle = (offset: XYCoord | null) => {
+  if (!offset) return { display: "none" };
+  const { x, y } = offset;
+  return { transform: `translate(${x}px, ${y}px)` };
+};
+
+const getCountStyle = (offset: XYCoord | null) => {
+  if (!offset) return { display: "none" };
+  const { x, y } = offset;
+  return { transform: `translate(${x + 10}px, ${y + 10}px)` };
+};
+
+export function DefaultDragPreview({
+  offset,
+  mouse,
+  id,
+  dragIds,
+  isDragging,
+}: DragPreviewProps) {
+  return (
+    <Overlay isDragging={isDragging}>
+      <Position offset={offset}>
+        <PreviewNode id={id} dragIds={dragIds} />
+      </Position>
+      <Count mouse={mouse} count={dragIds.length} />
+    </Overlay>
+  );
+}
+
+const Overlay = memo(function Overlay(props: {
+  children: JSX.Element[];
+  isDragging: boolean;
+}) {
+  if (!props.isDragging) return null;
+  return <div style={layerStyles}>{props.children}</div>;
+});
+
+function Position(props: { children: JSX.Element; offset: XYCoord | null }) {
+  return (
+    <div className="row preview" style={getStyle(props.offset)}>
+      {props.children}
+    </div>
+  );
+}
+
+function Count(props: { count: number; mouse: XYCoord | null }) {
+  const { count, mouse } = props;
+  if (count > 1)
+    return (
+      <div className="selected-count" style={getCountStyle(mouse)}>
+        {count}
+      </div>
+    );
+  else return null;
+}
+
+const PreviewNode = memo(function PreviewNode<T>(props: {
+  id: string | null;
+  dragIds: string[];
+}) {
+  const tree = useTreeApi<T>();
+  const node = tree.get(props.id);
+  if (!node) return null;
+  return (
+    <tree.renderNode
+      preview
+      node={node}
+      style={{
+        paddingLeft: node.level * tree.indent,
+        opacity: 0.2,
+        background: "transparent",
+      }}
+      tree={tree}
+    />
+  );
+});
diff --git a/packages/ui/src/components/tree/components/default-node.tsx b/packages/ui/src/components/tree/components/default-node.tsx
index 48a40b8c..f14d3ded 100644
--- a/packages/ui/src/components/tree/components/default-node.tsx
+++ b/packages/ui/src/components/tree/components/default-node.tsx
@@ -1,50 +1,50 @@
-import React, { useEffect, useRef } from "react";
-import { NodeRendererProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
-
-export function DefaultNode<T>(props: NodeRendererProps<T>) {
-  return (
-    <div ref={props.dragHandle} style={props.style}>
-      <span
-        onClick={(e) => {
-          e.stopPropagation();
-          props.node.toggle();
-        }}
-      >
-        {props.node.isLeaf ? "🌳" : props.node.isOpen ? "🗁" : "🗀"}
-      </span>{" "}
-      {props.node.isEditing ? <Edit {...props} /> : <Show {...props} />}
-    </div>
-  );
-}
-
-function Show<T>(props: NodeRendererProps<T>) {
-  return (
-    <>
-      {/* @ts-ignore */}
-      <span>{props.node.data.name}</span>
-    </>
-  );
-}
-
-function Edit<T>({ node }: NodeRendererProps<T>) {
-  const input = useRef<any>();
-
-  useEffect(() => {
-    input.current?.focus();
-    input.current?.select();
-  }, []);
-
-  return (
-    <input
-      ref={input}
-      // @ts-ignore
-      defaultValue={node.data.name}
-      onBlur={() => node.reset()}
-      onKeyDown={(e) => {
-        if (e.key === "Escape") node.reset();
-        if (e.key === "Enter") node.submit(input.current?.value || "");
-      }}
-    ></input>
-  );
-}
+import React, { useEffect, useRef } from "react";
+import { NodeRendererProps } from "../types/renderers";
+import { IdObj } from "../types/utils";
+
+export function DefaultNode<T>(props: NodeRendererProps<T>) {
+  return (
+    <div ref={props.dragHandle} style={props.style}>
+      <span
+        onClick={(e) => {
+          e.stopPropagation();
+          props.node.toggle();
+        }}
+      >
+        {props.node.isLeaf ? "🌳" : props.node.isOpen ? "🗁" : "🗀"}
+      </span>{" "}
+      {props.node.isEditing ? <Edit {...props} /> : <Show {...props} />}
+    </div>
+  );
+}
+
+function Show<T>(props: NodeRendererProps<T>) {
+  return (
+    <>
+      {/* @ts-ignore */}
+      <span>{props.node.data.name}</span>
+    </>
+  );
+}
+
+function Edit<T>({ node }: NodeRendererProps<T>) {
+  const input = useRef<any>();
+
+  useEffect(() => {
+    input.current?.focus();
+    input.current?.select();
+  }, []);
+
+  return (
+    <input
+      ref={input}
+      // @ts-ignore
+      defaultValue={node.data.name}
+      onBlur={() => node.reset()}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") node.reset();
+        if (e.key === "Enter") node.submit(input.current?.value || "");
+      }}
+    ></input>
+  );
+}
diff --git a/packages/ui/src/components/tree/components/default-row.tsx b/packages/ui/src/components/tree/components/default-row.tsx
index 9935bf63..4a28dfd7 100644
--- a/packages/ui/src/components/tree/components/default-row.tsx
+++ b/packages/ui/src/components/tree/components/default-row.tsx
@@ -1,21 +1,21 @@
-import React from "react";
-import { RowRendererProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
-
-export function DefaultRow<T>({
-  node,
-  attrs,
-  innerRef,
-  children,
-}: RowRendererProps<T>) {
-  return (
-    <div
-      {...attrs}
-      ref={innerRef}
-      onFocus={(e) => e.stopPropagation()}
-      onClick={node.handleClick}
-    >
-      {children}
-    </div>
-  );
-}
+import React from "react";
+import { RowRendererProps } from "../types/renderers";
+import { IdObj } from "../types/utils";
+
+export function DefaultRow<T>({
+  node,
+  attrs,
+  innerRef,
+  children,
+}: RowRendererProps<T>) {
+  return (
+    <div
+      {...attrs}
+      ref={innerRef}
+      onFocus={(e) => e.stopPropagation()}
+      onClick={node.handleClick}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/tree/components/drag-preview-container.tsx b/packages/ui/src/components/tree/components/drag-preview-container.tsx
index 1c174fed..a652c728 100644
--- a/packages/ui/src/components/tree/components/drag-preview-container.tsx
+++ b/packages/ui/src/components/tree/components/drag-preview-container.tsx
@@ -1,26 +1,26 @@
-import { useDragLayer } from "react-dnd";
-import { useDndContext, useTreeApi } from "../context";
-import { DefaultDragPreview } from "./default-drag-preview";
-
-export function DragPreviewContainer() {
-  const tree = useTreeApi();
-  const { offset, mouse, item, isDragging } = useDragLayer((m) => {
-    return {
-      offset: m.getSourceClientOffset(),
-      mouse: m.getClientOffset(),
-      item: m.getItem(),
-      isDragging: m.isDragging(),
-    };
-  });
-
-  const DragPreview = tree.props.renderDragPreview || DefaultDragPreview;
-  return (
-    <DragPreview
-      offset={offset}
-      mouse={mouse}
-      id={item?.id || null}
-      dragIds={item?.dragIds || []}
-      isDragging={isDragging}
-    />
-  );
-}
+import { useDragLayer } from "react-dnd";
+import { useDndContext, useTreeApi } from "../context";
+import { DefaultDragPreview } from "./default-drag-preview";
+
+export function DragPreviewContainer() {
+  const tree = useTreeApi();
+  const { offset, mouse, item, isDragging } = useDragLayer((m) => {
+    return {
+      offset: m.getSourceClientOffset(),
+      mouse: m.getClientOffset(),
+      item: m.getItem(),
+      isDragging: m.isDragging(),
+    };
+  });
+
+  const DragPreview = tree.props.renderDragPreview || DefaultDragPreview;
+  return (
+    <DragPreview
+      offset={offset}
+      mouse={mouse}
+      id={item?.id || null}
+      dragIds={item?.dragIds || []}
+      isDragging={isDragging}
+    />
+  );
+}
diff --git a/packages/ui/src/components/tree/components/list-inner-element.tsx b/packages/ui/src/components/tree/components/list-inner-element.tsx
index e4ba3b9a..d9cca8d9 100644
--- a/packages/ui/src/components/tree/components/list-inner-element.tsx
+++ b/packages/ui/src/components/tree/components/list-inner-element.tsx
@@ -1,22 +1,22 @@
-import React from "react";
-import { forwardRef } from "react";
-import { useTreeApi } from "../context";
-
-export const ListInnerElement = forwardRef<any, any>(function InnerElement(
-  { style, ...rest },
-  ref
-) {
-  const tree = useTreeApi();
-  const paddingTop = tree.props.padding ?? tree.props.paddingTop ?? 0;
-  const paddingBottom = tree.props.padding ?? tree.props.paddingBottom ?? 0;
-  return (
-    <div
-      ref={ref}
-      style={{
-        ...style,
-        height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,
-      }}
-      {...rest}
-    />
-  );
-});
+import React from "react";
+import { forwardRef } from "react";
+import { useTreeApi } from "../context";
+
+export const ListInnerElement = forwardRef<any, any>(function InnerElement(
+  { style, ...rest },
+  ref
+) {
+  const tree = useTreeApi();
+  const paddingTop = tree.props.padding ?? tree.props.paddingTop ?? 0;
+  const paddingBottom = tree.props.padding ?? tree.props.paddingBottom ?? 0;
+  return (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,
+      }}
+      {...rest}
+    />
+  );
+});
diff --git a/packages/ui/src/components/tree/components/list-outer-element.tsx b/packages/ui/src/components/tree/components/list-outer-element.tsx
index 672419e4..729e2fd7 100644
--- a/packages/ui/src/components/tree/components/list-outer-element.tsx
+++ b/packages/ui/src/components/tree/components/list-outer-element.tsx
@@ -1,42 +1,42 @@
-import { forwardRef } from "react";
-import { useTreeApi } from "../context";
-import { treeBlur } from "../state/focus-slice";
-import { Cursor } from "./cursor";
-
-export const ListOuterElement = forwardRef(function Outer(
-  props: React.HTMLProps<HTMLDivElement>,
-  ref
-) {
-  const { children, ...rest } = props;
-  const tree = useTreeApi();
-  return (
-    <div
-      // @ts-ignore
-      ref={ref}
-      {...rest}
-      onClick={(e) => {
-        if (e.currentTarget === e.target) tree.deselectAll();
-      }}
-    >
-      <DropContainer />
-      {children}
-    </div>
-  );
-});
-
-const DropContainer = () => {
-  const tree = useTreeApi();
-  return (
-    <div
-      style={{
-        height: tree.visibleNodes.length * tree.rowHeight,
-        width: "100%",
-        position: "absolute",
-        left: "0",
-        right: "0",
-      }}
-    >
-      <Cursor />
-    </div>
-  );
-};
+import { forwardRef } from "react";
+import { useTreeApi } from "../context";
+import { treeBlur } from "../state/focus-slice";
+import { Cursor } from "./cursor";
+
+export const ListOuterElement = forwardRef(function Outer(
+  props: React.HTMLProps<HTMLDivElement>,
+  ref
+) {
+  const { children, ...rest } = props;
+  const tree = useTreeApi();
+  return (
+    <div
+      // @ts-ignore
+      ref={ref}
+      {...rest}
+      onClick={(e) => {
+        if (e.currentTarget === e.target) tree.deselectAll();
+      }}
+    >
+      <DropContainer />
+      {children}
+    </div>
+  );
+});
+
+const DropContainer = () => {
+  const tree = useTreeApi();
+  return (
+    <div
+      style={{
+        height: tree.visibleNodes.length * tree.rowHeight,
+        width: "100%",
+        position: "absolute",
+        left: "0",
+        right: "0",
+      }}
+    >
+      <Cursor />
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/tree/components/outer-drop.ts b/packages/ui/src/components/tree/components/outer-drop.ts
index 944d08ca..a35fbd92 100644
--- a/packages/ui/src/components/tree/components/outer-drop.ts
+++ b/packages/ui/src/components/tree/components/outer-drop.ts
@@ -1,7 +1,7 @@
-import { ReactElement } from "react";
-import { useOuterDrop } from "../dnd/outer-drop-hook";
-
-export function OuterDrop(props: { children: ReactElement }) {
-  useOuterDrop();
-  return props.children;
-}
+import { ReactElement } from "react";
+import { useOuterDrop } from "../dnd/outer-drop-hook";
+
+export function OuterDrop(props: { children: ReactElement }) {
+  useOuterDrop();
+  return props.children;
+}
diff --git a/packages/ui/src/components/tree/components/provider.tsx b/packages/ui/src/components/tree/components/provider.tsx
index 0326c82a..6a98ca25 100644
--- a/packages/ui/src/components/tree/components/provider.tsx
+++ b/packages/ui/src/components/tree/components/provider.tsx
@@ -1,98 +1,98 @@
-import {
-  ReactNode,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { FixedSizeList } from "react-window";
-import {
-  DataUpdatesContext,
-  DndContext,
-  NodesContext,
-  TreeApiContext,
-} from "../context";
-import { TreeApi } from "../interfaces/tree-api";
-import { initialState } from "../state/initial";
-import { Actions, rootReducer, RootState } from "../state/root-reducer";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { DndProvider } from "react-dnd";
-import { TreeProps } from "../types/tree-props";
-import { createStore, Store } from "redux";
-import { actions as visibility } from "../state/open-slice";
-
-type Props<T> = {
-  treeProps: TreeProps<T>;
-  imperativeHandle: React.Ref<TreeApi<T> | undefined>;
-  children: ReactNode;
-};
-
-const SERVER_STATE = initialState();
-
-export function TreeProvider<T>({
-  treeProps,
-  imperativeHandle,
-  children,
-}: Props<T>) {
-  const list = useRef<FixedSizeList | null>(null);
-  const listEl = useRef<HTMLDivElement | null>(null);
-  const store = useRef<Store<RootState, Actions>>(
-    // @ts-ignore
-    createStore(rootReducer, initialState(treeProps))
-  );
-  const state = useSyncExternalStore<RootState>(
-    store.current.subscribe,
-    store.current.getState,
-    () => SERVER_STATE
-  );
-
-  /* The tree api object is stable. */
-  const api = useMemo(() => {
-    return new TreeApi<T>(store.current, treeProps, list, listEl);
-  }, []);
-
-  /* Make sure the tree instance stays in sync */
-  const updateCount = useRef(0);
-  useMemo(() => {
-    updateCount.current += 1;
-    api.update(treeProps);
-  }, [...Object.values(treeProps), state.nodes.open]);
-
-  /* Expose the tree api */
-  useImperativeHandle(imperativeHandle, () => api);
-
-  /* Change selection based on props */
-  useEffect(() => {
-    if (api.props.selection) {
-      api.select(api.props.selection, { focus: false });
-    } else {
-      api.deselectAll();
-    }
-  }, [api.props.selection]);
-
-  /* Clear visability for filtered nodes */
-  useEffect(() => {
-    if (!api.props.searchTerm) {
-      store.current.dispatch(visibility.clear(true));
-    }
-  }, [api.props.searchTerm]);
-
-  return (
-    <TreeApiContext.Provider value={api}>
-      <DataUpdatesContext.Provider value={updateCount.current}>
-        <NodesContext.Provider value={state.nodes}>
-          <DndContext.Provider value={state.dnd}>
-            <DndProvider
-              backend={HTML5Backend}
-              options={{ rootElement: api.props.dndRootElement || undefined }}
-              {...(treeProps.dndManager && { manager: treeProps.dndManager })}
-            >
-              {children}
-            </DndProvider>
-          </DndContext.Provider>
-        </NodesContext.Provider>
-      </DataUpdatesContext.Provider>
-    </TreeApiContext.Provider>
-  );
-}
+import {
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { FixedSizeList } from "react-window";
+import {
+  DataUpdatesContext,
+  DndContext,
+  NodesContext,
+  TreeApiContext,
+} from "../context";
+import { TreeApi } from "../interfaces/tree-api";
+import { initialState } from "../state/initial";
+import { Actions, rootReducer, RootState } from "../state/root-reducer";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { DndProvider } from "react-dnd";
+import { TreeProps } from "../types/tree-props";
+import { createStore, Store } from "redux";
+import { actions as visibility } from "../state/open-slice";
+
+type Props<T> = {
+  treeProps: TreeProps<T>;
+  imperativeHandle: React.Ref<TreeApi<T> | undefined>;
+  children: ReactNode;
+};
+
+const SERVER_STATE = initialState();
+
+export function TreeProvider<T>({
+  treeProps,
+  imperativeHandle,
+  children,
+}: Props<T>) {
+  const list = useRef<FixedSizeList | null>(null);
+  const listEl = useRef<HTMLDivElement | null>(null);
+  const store = useRef<Store<RootState, Actions>>(
+    // @ts-ignore
+    createStore(rootReducer, initialState(treeProps))
+  );
+  const state = useSyncExternalStore<RootState>(
+    store.current.subscribe,
+    store.current.getState,
+    () => SERVER_STATE
+  );
+
+  /* The tree api object is stable. */
+  const api = useMemo(() => {
+    return new TreeApi<T>(store.current, treeProps, list, listEl);
+  }, []);
+
+  /* Make sure the tree instance stays in sync */
+  const updateCount = useRef(0);
+  useMemo(() => {
+    updateCount.current += 1;
+    api.update(treeProps);
+  }, [...Object.values(treeProps), state.nodes.open]);
+
+  /* Expose the tree api */
+  useImperativeHandle(imperativeHandle, () => api);
+
+  /* Change selection based on props */
+  useEffect(() => {
+    if (api.props.selection) {
+      api.select(api.props.selection, { focus: false });
+    } else {
+      api.deselectAll();
+    }
+  }, [api.props.selection]);
+
+  /* Clear visability for filtered nodes */
+  useEffect(() => {
+    if (!api.props.searchTerm) {
+      store.current.dispatch(visibility.clear(true));
+    }
+  }, [api.props.searchTerm]);
+
+  return (
+    <TreeApiContext.Provider value={api}>
+      <DataUpdatesContext.Provider value={updateCount.current}>
+        <NodesContext.Provider value={state.nodes}>
+          <DndContext.Provider value={state.dnd}>
+            <DndProvider
+              backend={HTML5Backend}
+              options={{ rootElement: api.props.dndRootElement || undefined }}
+              {...(treeProps.dndManager && { manager: treeProps.dndManager })}
+            >
+              {children}
+            </DndProvider>
+          </DndContext.Provider>
+        </NodesContext.Provider>
+      </DataUpdatesContext.Provider>
+    </TreeApiContext.Provider>
+  );
+}
diff --git a/packages/ui/src/components/tree/components/row-container.tsx b/packages/ui/src/components/tree/components/row-container.tsx
index 1018d409..7b124b04 100644
--- a/packages/ui/src/components/tree/components/row-container.tsx
+++ b/packages/ui/src/components/tree/components/row-container.tsx
@@ -1,83 +1,83 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { useDataUpdates, useNodesContext, useTreeApi } from "../context";
-import { useDragHook } from "../dnd/drag-hook";
-import { useDropHook } from "../dnd/drop-hook";
-import { useFreshNode } from "../hooks/use-fresh-node";
-
-type Props = {
-  style: React.CSSProperties;
-  index: number;
-};
-
-export const RowContainer = React.memo(function RowContainer<T>({
-  index,
-  style,
-}: Props) {
-  /* When will the <Row> will re-render.
-   *
-   * The row component is memo'd so it will only render
-   * when a new instance of the NodeApi class is passed
-   * to it.
-   *
-   * The TreeApi instance is stable. It does not
-   * change when the internal state changes.
-   *
-   * The TreeApi has all the references to the nodes.
-   * We need to clone the nodes when their state
-   * changes. The node class contains no state itself,
-   * It always checks the tree for state. The tree's
-   * state will always be up to date.
-   */
-
-  useDataUpdates(); // Re-render when tree props or visability changes
-  const _ = useNodesContext(); // So that we re-render appropriately
-  const tree = useTreeApi<T>(); // Tree already has the fresh state
-  const node = useFreshNode<T>(index);
-
-  const el = useRef<HTMLDivElement | null>(null);
-  const dragRef = useDragHook<T>(node);
-  const dropRef = useDropHook(el, node);
-  const innerRef = useCallback(
-    (n: any) => {
-      el.current = n;
-      dropRef(n);
-    },
-    [dropRef]
-  );
-
-  const indent = tree.indent * node.level;
-  const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
-  const rowStyle = useMemo(
-    () => ({
-      ...style,
-      top:
-        parseFloat(style.top as string) +
-        (tree.props.padding ?? tree.props.paddingTop ?? 0),
-    }),
-    [style, tree.props.padding, tree.props.paddingTop]
-  );
-  const rowAttrs: React.HTMLAttributes<any> = {
-    role: "treeitem",
-    "aria-level": node.level + 1,
-    "aria-selected": node.isSelected,
-    "aria-expanded": node.isOpen,
-    style: rowStyle,
-    tabIndex: -1,
-    className: tree.props.rowClassName,
-  };
-
-  useEffect(() => {
-    if (!node.isEditing && node.isFocused) {
-      el.current?.focus({ preventScroll: true });
-    }
-  }, [node.isEditing, node.isFocused, el.current]);
-
-  const Node = tree.renderNode;
-  const Row = tree.renderRow;
-
-  return (
-    <Row node={node} innerRef={innerRef} attrs={rowAttrs}>
-      <Node node={node} tree={tree} style={nodeStyle} dragHandle={dragRef} />
-    </Row>
-  );
-});
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useDataUpdates, useNodesContext, useTreeApi } from "../context";
+import { useDragHook } from "../dnd/drag-hook";
+import { useDropHook } from "../dnd/drop-hook";
+import { useFreshNode } from "../hooks/use-fresh-node";
+
+type Props = {
+  style: React.CSSProperties;
+  index: number;
+};
+
+export const RowContainer = React.memo(function RowContainer<T>({
+  index,
+  style,
+}: Props) {
+  /* When will the <Row> will re-render.
+   *
+   * The row component is memo'd so it will only render
+   * when a new instance of the NodeApi class is passed
+   * to it.
+   *
+   * The TreeApi instance is stable. It does not
+   * change when the internal state changes.
+   *
+   * The TreeApi has all the references to the nodes.
+   * We need to clone the nodes when their state
+   * changes. The node class contains no state itself,
+   * It always checks the tree for state. The tree's
+   * state will always be up to date.
+   */
+
+  useDataUpdates(); // Re-render when tree props or visability changes
+  const _ = useNodesContext(); // So that we re-render appropriately
+  const tree = useTreeApi<T>(); // Tree already has the fresh state
+  const node = useFreshNode<T>(index);
+
+  const el = useRef<HTMLDivElement | null>(null);
+  const dragRef = useDragHook<T>(node);
+  const dropRef = useDropHook(el, node);
+  const innerRef = useCallback(
+    (n: any) => {
+      el.current = n;
+      dropRef(n);
+    },
+    [dropRef]
+  );
+
+  const indent = tree.indent * node.level;
+  const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const rowStyle = useMemo(
+    () => ({
+      ...style,
+      top:
+        parseFloat(style.top as string) +
+        (tree.props.padding ?? tree.props.paddingTop ?? 0),
+    }),
+    [style, tree.props.padding, tree.props.paddingTop]
+  );
+  const rowAttrs: React.HTMLAttributes<any> = {
+    role: "treeitem",
+    "aria-level": node.level + 1,
+    "aria-selected": node.isSelected,
+    "aria-expanded": node.isOpen,
+    style: rowStyle,
+    tabIndex: -1,
+    className: tree.props.rowClassName,
+  };
+
+  useEffect(() => {
+    if (!node.isEditing && node.isFocused) {
+      el.current?.focus({ preventScroll: true });
+    }
+  }, [node.isEditing, node.isFocused, el.current]);
+
+  const Node = tree.renderNode;
+  const Row = tree.renderRow;
+
+  return (
+    <Row node={node} innerRef={innerRef} attrs={rowAttrs}>
+      <Node node={node} tree={tree} style={nodeStyle} dragHandle={dragRef} />
+    </Row>
+  );
+});
diff --git a/packages/ui/src/components/tree/components/tree-container.tsx b/packages/ui/src/components/tree/components/tree-container.tsx
index d21bd980..1cf17f8c 100644
--- a/packages/ui/src/components/tree/components/tree-container.tsx
+++ b/packages/ui/src/components/tree/components/tree-container.tsx
@@ -1,13 +1,13 @@
-import React from "react";
-import { useTreeApi } from "../context";
-import { DefaultContainer } from "./default-container";
-
-export function TreeContainer() {
-  const tree = useTreeApi();
-  const Container = tree.props.renderContainer || DefaultContainer;
-  return (
-    <>
-      <Container />
-    </>
-  );
-}
+import React from "react";
+import { useTreeApi } from "../context";
+import { DefaultContainer } from "./default-container";
+
+export function TreeContainer() {
+  const tree = useTreeApi();
+  const Container = tree.props.renderContainer || DefaultContainer;
+  return (
+    <>
+      <Container />
+    </>
+  );
+}
diff --git a/packages/ui/src/components/tree/components/tree.tsx b/packages/ui/src/components/tree/components/tree.tsx
index 82601a7a..4f551909 100644
--- a/packages/ui/src/components/tree/components/tree.tsx
+++ b/packages/ui/src/components/tree/components/tree.tsx
@@ -1,28 +1,28 @@
-import { forwardRef } from "react";
-import { TreeProvider } from "./provider";
-import { TreeApi } from "../interfaces/tree-api";
-import { OuterDrop } from "./outer-drop";
-import { TreeContainer } from "./tree-container";
-import { DragPreviewContainer } from "./drag-preview-container";
-import { TreeProps } from "../types/tree-props";
-import { IdObj } from "../types/utils";
-import { useValidatedProps } from "../hooks/use-validated-props";
-
-function TreeComponent<T>(
-  props: TreeProps<T>,
-  ref: React.Ref<TreeApi<T> | undefined>
-) {
-  const treeProps = useValidatedProps(props);
-  return (
-    <TreeProvider treeProps={treeProps} imperativeHandle={ref}>
-      <OuterDrop>
-        <TreeContainer />
-      </OuterDrop>
-      <DragPreviewContainer />
-    </TreeProvider>
-  );
-}
-
-export const Tree = forwardRef(TreeComponent) as <T>(
-  props: TreeProps<T> & { ref?: React.ForwardedRef<TreeApi<T> | undefined> }
-) => ReturnType<typeof TreeComponent>;
+import { forwardRef } from "react";
+import { TreeProvider } from "./provider";
+import { TreeApi } from "../interfaces/tree-api";
+import { OuterDrop } from "./outer-drop";
+import { TreeContainer } from "./tree-container";
+import { DragPreviewContainer } from "./drag-preview-container";
+import { TreeProps } from "../types/tree-props";
+import { IdObj } from "../types/utils";
+import { useValidatedProps } from "../hooks/use-validated-props";
+
+function TreeComponent<T>(
+  props: TreeProps<T>,
+  ref: React.Ref<TreeApi<T> | undefined>
+) {
+  const treeProps = useValidatedProps(props);
+  return (
+    <TreeProvider treeProps={treeProps} imperativeHandle={ref}>
+      <OuterDrop>
+        <TreeContainer />
+      </OuterDrop>
+      <DragPreviewContainer />
+    </TreeProvider>
+  );
+}
+
+export const Tree = forwardRef(TreeComponent) as <T>(
+  props: TreeProps<T> & { ref?: React.ForwardedRef<TreeApi<T> | undefined> }
+) => ReturnType<typeof TreeComponent>;
diff --git a/packages/ui/src/components/tree/context.ts b/packages/ui/src/components/tree/context.ts
index f0c83f7a..4a5f3e25 100644
--- a/packages/ui/src/components/tree/context.ts
+++ b/packages/ui/src/components/tree/context.ts
@@ -1,36 +1,36 @@
-import React, { createContext, useContext, useMemo } from "react";
-import { TreeApi } from "./interfaces/tree-api";
-import { RootState } from "./state/root-reducer";
-import { IdObj } from "./types/utils";
-
-export const TreeApiContext = createContext<TreeApi<any> | null>(null);
-
-export function useTreeApi<T>() {
-  const value = useContext<TreeApi<T> | null>(
-    TreeApiContext as unknown as React.Context<TreeApi<T> | null>
-  );
-  if (value === null) throw new Error("No Tree Api Provided");
-  return value;
-}
-
-export const NodesContext = createContext<RootState["nodes"] | null>(null);
-
-export function useNodesContext() {
-  const value = useContext(NodesContext);
-  if (value === null) throw new Error("Provide a NodesContext");
-  return value;
-}
-
-export const DndContext = createContext<RootState["dnd"] | null>(null);
-
-export function useDndContext() {
-  const value = useContext(DndContext);
-  if (value === null) throw new Error("Provide a DnDContext");
-  return value;
-}
-
-export const DataUpdatesContext = createContext<number>(0);
-
-export function useDataUpdates() {
-  useContext(DataUpdatesContext);
-}
+import React, { createContext, useContext, useMemo } from "react";
+import { TreeApi } from "./interfaces/tree-api";
+import { RootState } from "./state/root-reducer";
+import { IdObj } from "./types/utils";
+
+export const TreeApiContext = createContext<TreeApi<any> | null>(null);
+
+export function useTreeApi<T>() {
+  const value = useContext<TreeApi<T> | null>(
+    TreeApiContext as unknown as React.Context<TreeApi<T> | null>
+  );
+  if (value === null) throw new Error("No Tree Api Provided");
+  return value;
+}
+
+export const NodesContext = createContext<RootState["nodes"] | null>(null);
+
+export function useNodesContext() {
+  const value = useContext(NodesContext);
+  if (value === null) throw new Error("Provide a NodesContext");
+  return value;
+}
+
+export const DndContext = createContext<RootState["dnd"] | null>(null);
+
+export function useDndContext() {
+  const value = useContext(DndContext);
+  if (value === null) throw new Error("Provide a DnDContext");
+  return value;
+}
+
+export const DataUpdatesContext = createContext<number>(0);
+
+export function useDataUpdates() {
+  useContext(DataUpdatesContext);
+}
diff --git a/packages/ui/src/components/tree/data/create-index.ts b/packages/ui/src/components/tree/data/create-index.ts
index c92ceed8..4e2a4071 100644
--- a/packages/ui/src/components/tree/data/create-index.ts
+++ b/packages/ui/src/components/tree/data/create-index.ts
@@ -1,9 +1,9 @@
-import { NodeApi } from "../interfaces/node-api";
-import { IdObj } from "../types/utils";
-
-export const createIndex = <T>(nodes: NodeApi<T>[]) => {
-  return nodes.reduce<{ [id: string]: number }>((map, node, index) => {
-    map[node.id] = index;
-    return map;
-  }, {});
-};
+import { NodeApi } from "../interfaces/node-api";
+import { IdObj } from "../types/utils";
+
+export const createIndex = <T>(nodes: NodeApi<T>[]) => {
+  return nodes.reduce<{ [id: string]: number }>((map, node, index) => {
+    map[node.id] = index;
+    return map;
+  }, {});
+};
diff --git a/packages/ui/src/components/tree/data/create-list.ts b/packages/ui/src/components/tree/data/create-list.ts
index 5da1fa1c..b9b9a6ed 100644
--- a/packages/ui/src/components/tree/data/create-list.ts
+++ b/packages/ui/src/components/tree/data/create-list.ts
@@ -1,67 +1,67 @@
-import { NodeApi } from "../interfaces/node-api";
-import { TreeApi } from "../interfaces/tree-api";
-import { IdObj } from "../types/utils";
-
-export function createList<T>(tree: TreeApi<T>) {
-  if (tree.isFiltered) {
-    return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
-  } else {
-    return flattenTree(tree.root);
-  }
-}
-
-function flattenTree<T>(root: NodeApi<T>): NodeApi<T>[] {
-  const list: NodeApi<T>[] = [];
-  function collect(node: NodeApi<T>) {
-    if (node.level >= 0) {
-      list.push(node);
-    }
-    if (node.isOpen) {
-      node.children?.forEach(collect);
-    }
-  }
-  collect(root);
-  list.forEach(assignRowIndex);
-  return list;
-}
-
-function flattenAndFilterTree<T>(
-  root: NodeApi<T>,
-  isMatch: (n: NodeApi<T>) => boolean
-): NodeApi<T>[] {
-  const matches: Record<string, boolean> = {};
-  const list: NodeApi<T>[] = [];
-
-  function markMatch(node: NodeApi<T>) {
-    const yes = !node.isRoot && isMatch(node);
-    if (yes) {
-      matches[node.id] = true;
-      let parent = node.parent;
-      while (parent) {
-        matches[parent.id] = true;
-        parent = parent.parent;
-      }
-    }
-    if (node.children) {
-      for (let child of node.children) markMatch(child);
-    }
-  }
-
-  function collect(node: NodeApi<T>) {
-    if (node.level >= 0 && matches[node.id]) {
-      list.push(node);
-    }
-    if (node.isOpen) {
-      node.children?.forEach(collect);
-    }
-  }
-
-  markMatch(root);
-  collect(root);
-  list.forEach(assignRowIndex);
-  return list;
-}
-
-function assignRowIndex(node: NodeApi<any>, index: number) {
-  node.rowIndex = index;
-}
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+import { IdObj } from "../types/utils";
+
+export function createList<T>(tree: TreeApi<T>) {
+  if (tree.isFiltered) {
+    return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
+  } else {
+    return flattenTree(tree.root);
+  }
+}
+
+function flattenTree<T>(root: NodeApi<T>): NodeApi<T>[] {
+  const list: NodeApi<T>[] = [];
+  function collect(node: NodeApi<T>) {
+    if (node.level >= 0) {
+      list.push(node);
+    }
+    if (node.isOpen) {
+      node.children?.forEach(collect);
+    }
+  }
+  collect(root);
+  list.forEach(assignRowIndex);
+  return list;
+}
+
+function flattenAndFilterTree<T>(
+  root: NodeApi<T>,
+  isMatch: (n: NodeApi<T>) => boolean
+): NodeApi<T>[] {
+  const matches: Record<string, boolean> = {};
+  const list: NodeApi<T>[] = [];
+
+  function markMatch(node: NodeApi<T>) {
+    const yes = !node.isRoot && isMatch(node);
+    if (yes) {
+      matches[node.id] = true;
+      let parent = node.parent;
+      while (parent) {
+        matches[parent.id] = true;
+        parent = parent.parent;
+      }
+    }
+    if (node.children) {
+      for (let child of node.children) markMatch(child);
+    }
+  }
+
+  function collect(node: NodeApi<T>) {
+    if (node.level >= 0 && matches[node.id]) {
+      list.push(node);
+    }
+    if (node.isOpen) {
+      node.children?.forEach(collect);
+    }
+  }
+
+  markMatch(root);
+  collect(root);
+  list.forEach(assignRowIndex);
+  return list;
+}
+
+function assignRowIndex(node: NodeApi<any>, index: number) {
+  node.rowIndex = index;
+}
diff --git a/packages/ui/src/components/tree/data/create-root.ts b/packages/ui/src/components/tree/data/create-root.ts
index ca567b3f..8dab857f 100644
--- a/packages/ui/src/components/tree/data/create-root.ts
+++ b/packages/ui/src/components/tree/data/create-root.ts
@@ -1,52 +1,52 @@
-import { IdObj } from "../types/utils";
-import { NodeApi } from "../interfaces/node-api";
-import { TreeApi } from "../interfaces/tree-api";
-
-export const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
-
-export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
-  function visitSelfAndChildren(
-    data: T,
-    level: number,
-    parent: NodeApi<T> | null
-  ) {
-    const id = tree.accessId(data);
-    const node = new NodeApi<T>({
-      tree,
-      data,
-      level,
-      parent,
-      id,
-      children: null,
-      isDraggable: tree.isDraggable(data),
-      rowIndex: null,
-    });
-    const children = tree.accessChildren(data);
-    if (children) {
-      node.children = children.map((child: T) =>
-        visitSelfAndChildren(child, level + 1, node)
-      );
-    }
-    return node;
-  }
-
-  const root = new NodeApi<T>({
-    tree,
-    id: ROOT_ID,
-    // @ts-ignore
-    data: { id: ROOT_ID },
-    level: -1,
-    parent: null,
-    children: null,
-    isDraggable: true,
-    rowIndex: null,
-  });
-
-  const data: readonly T[] = tree.props.data ?? [];
-
-  root.children = data.map((child) => {
-    return visitSelfAndChildren(child, 0, root);
-  });
-
-  return root;
-}
+import { IdObj } from "../types/utils";
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+
+export const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
+
+export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
+  function visitSelfAndChildren(
+    data: T,
+    level: number,
+    parent: NodeApi<T> | null
+  ) {
+    const id = tree.accessId(data);
+    const node = new NodeApi<T>({
+      tree,
+      data,
+      level,
+      parent,
+      id,
+      children: null,
+      isDraggable: tree.isDraggable(data),
+      rowIndex: null,
+    });
+    const children = tree.accessChildren(data);
+    if (children) {
+      node.children = children.map((child: T) =>
+        visitSelfAndChildren(child, level + 1, node)
+      );
+    }
+    return node;
+  }
+
+  const root = new NodeApi<T>({
+    tree,
+    id: ROOT_ID,
+    // @ts-ignore
+    data: { id: ROOT_ID },
+    level: -1,
+    parent: null,
+    children: null,
+    isDraggable: true,
+    rowIndex: null,
+  });
+
+  const data: readonly T[] = tree.props.data ?? [];
+
+  root.children = data.map((child) => {
+    return visitSelfAndChildren(child, 0, root);
+  });
+
+  return root;
+}
diff --git a/packages/ui/src/components/tree/data/make-tree.ts b/packages/ui/src/components/tree/data/make-tree.ts
index dae38d98..6207b796 100644
--- a/packages/ui/src/components/tree/data/make-tree.ts
+++ b/packages/ui/src/components/tree/data/make-tree.ts
@@ -1,37 +1,37 @@
-// A function that turns a string of text into a tree
-// Each line is a node
-// The number of spaces at the beginning indicate the level
-
-export function makeTree(string: string) {
-  const root = { id: "ROOT", name: "ROOT", isOpen: true };
-  let prevNode = root;
-  let prevLevel = -1;
-  let id = 1;
-  string.split("\n").forEach((line) => {
-    const name = line.trimStart();
-    const level = line.length - name.length;
-    const diff = level - prevLevel;
-    const node = { id: (id++).toString(), name, isOpen: false };
-    if (diff === 1) {
-      // First child
-      //@ts-ignore
-      node.parent = prevNode;
-      //@ts-ignore
-      prevNode.children = [node];
-    } else {
-      // Find the parent and go up
-      //@ts-ignore
-      let parent = prevNode.parent;
-      for (let i = diff; i < 0; i++) {
-        parent = parent.parent;
-      }
-      //@ts-ignore
-      node.parent = parent;
-      parent.children.push(node);
-    }
-    prevNode = node;
-    prevLevel = level;
-  });
-
-  return root;
-}
+// A function that turns a string of text into a tree
+// Each line is a node
+// The number of spaces at the beginning indicate the level
+
+export function makeTree(string: string) {
+  const root = { id: "ROOT", name: "ROOT", isOpen: true };
+  let prevNode = root;
+  let prevLevel = -1;
+  let id = 1;
+  string.split("\n").forEach((line) => {
+    const name = line.trimStart();
+    const level = line.length - name.length;
+    const diff = level - prevLevel;
+    const node = { id: (id++).toString(), name, isOpen: false };
+    if (diff === 1) {
+      // First child
+      //@ts-ignore
+      node.parent = prevNode;
+      //@ts-ignore
+      prevNode.children = [node];
+    } else {
+      // Find the parent and go up
+      //@ts-ignore
+      let parent = prevNode.parent;
+      for (let i = diff; i < 0; i++) {
+        parent = parent.parent;
+      }
+      //@ts-ignore
+      node.parent = parent;
+      parent.children.push(node);
+    }
+    prevNode = node;
+    prevLevel = level;
+  });
+
+  return root;
+}
diff --git a/packages/ui/src/components/tree/data/simple-tree.ts b/packages/ui/src/components/tree/data/simple-tree.ts
index 9cf747e7..7180b11e 100644
--- a/packages/ui/src/components/tree/data/simple-tree.ts
+++ b/packages/ui/src/components/tree/data/simple-tree.ts
@@ -1,103 +1,103 @@
-type SimpleData = { id: string; name: string; children?: SimpleData[] };
-
-export class SimpleTree<T extends SimpleData> {
-  root: SimpleNode<T>;
-  constructor(data: T[]) {
-    this.root = createRoot<T>(data);
-  }
-
-  get data() {
-    return this.root.children?.map((node) => node.data) ?? [];
-  }
-
-  create(args: { parentId: string | null; index: number; data: T }) {
-    const parent = args.parentId ? this.find(args.parentId) : this.root;
-    if (!parent) return null;
-    parent.addChild(args.data, args.index);
-  }
-
-  move(args: { id: string; parentId: string | null; index: number }) {
-    const src = this.find(args.id);
-    const parent = args.parentId ? this.find(args.parentId) : this.root;
-    if (!src || !parent) return;
-    parent.addChild(src.data, args.index);
-    src.drop();
-  }
-
-  update(args: { id: string; changes: Partial<T> }) {
-    const node = this.find(args.id);
-    if (node) node.update(args.changes);
-  }
-
-  drop(args: { id: string }) {
-    const node = this.find(args.id);
-    if (node) node.drop();
-  }
-
-  find(id: string, node: SimpleNode<T> = this.root): SimpleNode<T> | null {
-    if (!node) return null;
-    if (node.id === id) return node as SimpleNode<T>;
-    if (node.children) {
-      for (let child of node.children) {
-        const found = this.find(id, child);
-        if (found) return found;
-      }
-      return null;
-    }
-    return null;
-  }
-}
-
-function createRoot<T extends SimpleData>(data: T[]) {
-  const root = new SimpleNode<T>({ id: "ROOT" } as T, null);
-  root.children = data.map((d) => createNode(d as T, root));
-  return root;
-}
-
-function createNode<T extends SimpleData>(data: T, parent: SimpleNode<T>) {
-  const node = new SimpleNode<T>(data, parent);
-  if (data.children)
-    node.children = data.children.map((d) => createNode<T>(d as T, node));
-  return node;
-}
-
-class SimpleNode<T extends SimpleData> {
-  id: string;
-  children?: SimpleNode<T>[];
-  constructor(public data: T, public parent: SimpleNode<T> | null) {
-    this.id = data.id;
-  }
-
-  hasParent(): this is this & { parent: SimpleNode<T> } {
-    return !!this.parent;
-  }
-
-  get childIndex(): number {
-    return this.hasParent() ? this.parent.children!.indexOf(this) : -1;
-  }
-
-  addChild(data: T, index: number) {
-    const node = createNode(data, this);
-    this.children = this.children ?? [];
-    this.children.splice(index, 0, node);
-    this.data.children = this.data.children ?? [];
-    this.data.children.splice(index, 0, data);
-  }
-
-  removeChild(index: number) {
-    this.children?.splice(index, 1);
-    this.data.children?.splice(index, 1);
-  }
-
-  update(changes: Partial<T>) {
-    if (this.hasParent()) {
-      const i = this.childIndex;
-      this.parent.addChild({ ...this.data, ...changes }, i);
-      this.drop();
-    }
-  }
-
-  drop() {
-    if (this.hasParent()) this.parent.removeChild(this.childIndex);
-  }
-}
+type SimpleData = { id: string; name: string; children?: SimpleData[] };
+
+export class SimpleTree<T extends SimpleData> {
+  root: SimpleNode<T>;
+  constructor(data: T[]) {
+    this.root = createRoot<T>(data);
+  }
+
+  get data() {
+    return this.root.children?.map((node) => node.data) ?? [];
+  }
+
+  create(args: { parentId: string | null; index: number; data: T }) {
+    const parent = args.parentId ? this.find(args.parentId) : this.root;
+    if (!parent) return null;
+    parent.addChild(args.data, args.index);
+  }
+
+  move(args: { id: string; parentId: string | null; index: number }) {
+    const src = this.find(args.id);
+    const parent = args.parentId ? this.find(args.parentId) : this.root;
+    if (!src || !parent) return;
+    parent.addChild(src.data, args.index);
+    src.drop();
+  }
+
+  update(args: { id: string; changes: Partial<T> }) {
+    const node = this.find(args.id);
+    if (node) node.update(args.changes);
+  }
+
+  drop(args: { id: string }) {
+    const node = this.find(args.id);
+    if (node) node.drop();
+  }
+
+  find(id: string, node: SimpleNode<T> = this.root): SimpleNode<T> | null {
+    if (!node) return null;
+    if (node.id === id) return node as SimpleNode<T>;
+    if (node.children) {
+      for (let child of node.children) {
+        const found = this.find(id, child);
+        if (found) return found;
+      }
+      return null;
+    }
+    return null;
+  }
+}
+
+function createRoot<T extends SimpleData>(data: T[]) {
+  const root = new SimpleNode<T>({ id: "ROOT" } as T, null);
+  root.children = data.map((d) => createNode(d as T, root));
+  return root;
+}
+
+function createNode<T extends SimpleData>(data: T, parent: SimpleNode<T>) {
+  const node = new SimpleNode<T>(data, parent);
+  if (data.children)
+    node.children = data.children.map((d) => createNode<T>(d as T, node));
+  return node;
+}
+
+class SimpleNode<T extends SimpleData> {
+  id: string;
+  children?: SimpleNode<T>[];
+  constructor(public data: T, public parent: SimpleNode<T> | null) {
+    this.id = data.id;
+  }
+
+  hasParent(): this is this & { parent: SimpleNode<T> } {
+    return !!this.parent;
+  }
+
+  get childIndex(): number {
+    return this.hasParent() ? this.parent.children!.indexOf(this) : -1;
+  }
+
+  addChild(data: T, index: number) {
+    const node = createNode(data, this);
+    this.children = this.children ?? [];
+    this.children.splice(index, 0, node);
+    this.data.children = this.data.children ?? [];
+    this.data.children.splice(index, 0, data);
+  }
+
+  removeChild(index: number) {
+    this.children?.splice(index, 1);
+    this.data.children?.splice(index, 1);
+  }
+
+  update(changes: Partial<T>) {
+    if (this.hasParent()) {
+      const i = this.childIndex;
+      this.parent.addChild({ ...this.data, ...changes }, i);
+      this.drop();
+    }
+  }
+
+  drop() {
+    if (this.hasParent()) this.parent.removeChild(this.childIndex);
+  }
+}
diff --git a/packages/ui/src/components/tree/dnd/compute-drop.ts b/packages/ui/src/components/tree/dnd/compute-drop.ts
index 4f4a69bd..156faa30 100644
--- a/packages/ui/src/components/tree/dnd/compute-drop.ts
+++ b/packages/ui/src/components/tree/dnd/compute-drop.ts
@@ -1,185 +1,185 @@
-import { XYCoord } from "react-dnd";
-import { NodeApi } from "../interfaces/node-api";
-import {
-  bound,
-  indexOf,
-  isClosed,
-  isItem,
-  isOpenWithEmptyChildren,
-} from "../utils";
-import { DropResult } from "./drop-hook";
-
-function measureHover(el: HTMLElement, offset: XYCoord) {
-  const rect = el.getBoundingClientRect();
-  const x = offset.x - Math.round(rect.x);
-  const y = offset.y - Math.round(rect.y);
-  const height = rect.height;
-  const inTopHalf = y < height / 2;
-  const inBottomHalf = !inTopHalf;
-  const pad = height / 4;
-  const inMiddle = y > pad && y < height - pad;
-  const atTop = !inMiddle && inTopHalf;
-  const atBottom = !inMiddle && inBottomHalf;
-  return { x, inTopHalf, inBottomHalf, inMiddle, atTop, atBottom };
-}
-
-type HoverData = ReturnType<typeof measureHover>;
-
-function getNodesAroundCursor(
-  node: NodeApi | null,
-  prev: NodeApi | null,
-  next: NodeApi | null,
-  hover: HoverData
-): [NodeApi | null, NodeApi | null] {
-  if (!node) {
-    // We're hovering over the empty part of the list, not over an item,
-    // Put the cursor below the last item which is "prev"
-    return [prev, null];
-  }
-  if (node.isInternal) {
-    if (hover.atTop) {
-      return [prev, node];
-    } else if (hover.inMiddle) {
-      return [node, node];
-    } else {
-      return [node, next];
-    }
-  } else {
-    if (hover.inTopHalf) {
-      return [prev, node];
-    } else {
-      return [node, next];
-    }
-  }
-}
-
-type Args = {
-  element: HTMLElement;
-  offset: XYCoord;
-  indent: number;
-  node: NodeApi | null;
-  prevNode: NodeApi | null;
-  nextNode: NodeApi | null;
-};
-
-export type ComputedDrop = {
-  drop: DropResult | null;
-  cursor: Cursor | null;
-};
-
-function dropAt(
-  parentId: string | undefined,
-  index: number | null
-): DropResult {
-  return { parentId: parentId || null, index };
-}
-
-function lineCursor(index: number, level: number) {
-  return {
-    type: "line" as "line",
-    index,
-    level,
-  };
-}
-
-function noCursor() {
-  return {
-    type: "none" as "none",
-  };
-}
-
-function highlightCursor(id: string) {
-  return {
-    type: "highlight" as "highlight",
-    id,
-  };
-}
-
-function walkUpFrom(node: NodeApi, level: number) {
-  let drop = node;
-  while (drop.parent && drop.level > level) {
-    drop = drop.parent;
-  }
-  const parentId = drop.parent?.id || null;
-  const index = indexOf(drop) + 1;
-  return { parentId, index };
-}
-
-export type LineCursor = ReturnType<typeof lineCursor>;
-export type NoCursor = ReturnType<typeof noCursor>;
-export type HighlightCursor = ReturnType<typeof highlightCursor>;
-export type Cursor = LineCursor | NoCursor | HighlightCursor;
-
-/**
- * This is the most complex, tricky function in the whole repo.
- */
-export function computeDrop(args: Args): ComputedDrop {
-  const hover = measureHover(args.element, args.offset);
-  const indent = args.indent;
-  const hoverLevel = Math.round(Math.max(0, hover.x - indent) / indent);
-  const { node, nextNode, prevNode } = args;
-  const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
-
-  /* Hovering over the middle of a folder */
-  if (node && node.isInternal && hover.inMiddle) {
-    return {
-      drop: dropAt(node.id, null),
-      cursor: highlightCursor(node.id),
-    };
-  }
-
-  /*
-   * Now we only need to care about the node above the cursor
-   * -----------                            -------
-   */
-
-  /* There is no node above the cursor line */
-  if (!above) {
-    return {
-      drop: dropAt(below?.parent?.id, 0),
-      cursor: lineCursor(0, 0),
-    };
-  }
-
-  /* The node above the cursor line is an item */
-  if (isItem(above)) {
-    const level = bound(hoverLevel, below?.level || 0, above.level);
-    return {
-      drop: walkUpFrom(above, level),
-      cursor: lineCursor(above.rowIndex! + 1, level),
-    };
-  }
-
-  /* The node above the cursor line is a closed folder */
-  if (isClosed(above)) {
-    const level = bound(hoverLevel, below?.level || 0, above.level);
-    return {
-      drop: walkUpFrom(above, level),
-      cursor: lineCursor(above.rowIndex! + 1, level),
-    };
-  }
-
-  /* The node above the cursor line is an open folder with no children */
-  if (isOpenWithEmptyChildren(above)) {
-    const level = bound(hoverLevel, 0, above.level + 1);
-    if (level > above.level) {
-      /* Will be the first child of the empty folder */
-      return {
-        drop: dropAt(above.id, 0),
-        cursor: lineCursor(above.rowIndex! + 1, level),
-      };
-    } else {
-      /* Will be a sibling or grandsibling of the empty folder */
-      return {
-        drop: walkUpFrom(above, level),
-        cursor: lineCursor(above.rowIndex! + 1, level),
-      };
-    }
-  }
-
-  /* The node above the cursor is a an open folder with children */
-  return {
-    drop: dropAt(above?.id, 0),
-    cursor: lineCursor(above.rowIndex! + 1, above.level + 1),
-  };
-}
+import { XYCoord } from "react-dnd";
+import { NodeApi } from "../interfaces/node-api";
+import {
+  bound,
+  indexOf,
+  isClosed,
+  isItem,
+  isOpenWithEmptyChildren,
+} from "../utils";
+import { DropResult } from "./drop-hook";
+
+function measureHover(el: HTMLElement, offset: XYCoord) {
+  const rect = el.getBoundingClientRect();
+  const x = offset.x - Math.round(rect.x);
+  const y = offset.y - Math.round(rect.y);
+  const height = rect.height;
+  const inTopHalf = y < height / 2;
+  const inBottomHalf = !inTopHalf;
+  const pad = height / 4;
+  const inMiddle = y > pad && y < height - pad;
+  const atTop = !inMiddle && inTopHalf;
+  const atBottom = !inMiddle && inBottomHalf;
+  return { x, inTopHalf, inBottomHalf, inMiddle, atTop, atBottom };
+}
+
+type HoverData = ReturnType<typeof measureHover>;
+
+function getNodesAroundCursor(
+  node: NodeApi | null,
+  prev: NodeApi | null,
+  next: NodeApi | null,
+  hover: HoverData
+): [NodeApi | null, NodeApi | null] {
+  if (!node) {
+    // We're hovering over the empty part of the list, not over an item,
+    // Put the cursor below the last item which is "prev"
+    return [prev, null];
+  }
+  if (node.isInternal) {
+    if (hover.atTop) {
+      return [prev, node];
+    } else if (hover.inMiddle) {
+      return [node, node];
+    } else {
+      return [node, next];
+    }
+  } else {
+    if (hover.inTopHalf) {
+      return [prev, node];
+    } else {
+      return [node, next];
+    }
+  }
+}
+
+type Args = {
+  element: HTMLElement;
+  offset: XYCoord;
+  indent: number;
+  node: NodeApi | null;
+  prevNode: NodeApi | null;
+  nextNode: NodeApi | null;
+};
+
+export type ComputedDrop = {
+  drop: DropResult | null;
+  cursor: Cursor | null;
+};
+
+function dropAt(
+  parentId: string | undefined,
+  index: number | null
+): DropResult {
+  return { parentId: parentId || null, index };
+}
+
+function lineCursor(index: number, level: number) {
+  return {
+    type: "line" as "line",
+    index,
+    level,
+  };
+}
+
+function noCursor() {
+  return {
+    type: "none" as "none",
+  };
+}
+
+function highlightCursor(id: string) {
+  return {
+    type: "highlight" as "highlight",
+    id,
+  };
+}
+
+function walkUpFrom(node: NodeApi, level: number) {
+  let drop = node;
+  while (drop.parent && drop.level > level) {
+    drop = drop.parent;
+  }
+  const parentId = drop.parent?.id || null;
+  const index = indexOf(drop) + 1;
+  return { parentId, index };
+}
+
+export type LineCursor = ReturnType<typeof lineCursor>;
+export type NoCursor = ReturnType<typeof noCursor>;
+export type HighlightCursor = ReturnType<typeof highlightCursor>;
+export type Cursor = LineCursor | NoCursor | HighlightCursor;
+
+/**
+ * This is the most complex, tricky function in the whole repo.
+ */
+export function computeDrop(args: Args): ComputedDrop {
+  const hover = measureHover(args.element, args.offset);
+  const indent = args.indent;
+  const hoverLevel = Math.round(Math.max(0, hover.x - indent) / indent);
+  const { node, nextNode, prevNode } = args;
+  const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
+
+  /* Hovering over the middle of a folder */
+  if (node && node.isInternal && hover.inMiddle) {
+    return {
+      drop: dropAt(node.id, null),
+      cursor: highlightCursor(node.id),
+    };
+  }
+
+  /*
+   * Now we only need to care about the node above the cursor
+   * -----------                            -------
+   */
+
+  /* There is no node above the cursor line */
+  if (!above) {
+    return {
+      drop: dropAt(below?.parent?.id, 0),
+      cursor: lineCursor(0, 0),
+    };
+  }
+
+  /* The node above the cursor line is an item */
+  if (isItem(above)) {
+    const level = bound(hoverLevel, below?.level || 0, above.level);
+    return {
+      drop: walkUpFrom(above, level),
+      cursor: lineCursor(above.rowIndex! + 1, level),
+    };
+  }
+
+  /* The node above the cursor line is a closed folder */
+  if (isClosed(above)) {
+    const level = bound(hoverLevel, below?.level || 0, above.level);
+    return {
+      drop: walkUpFrom(above, level),
+      cursor: lineCursor(above.rowIndex! + 1, level),
+    };
+  }
+
+  /* The node above the cursor line is an open folder with no children */
+  if (isOpenWithEmptyChildren(above)) {
+    const level = bound(hoverLevel, 0, above.level + 1);
+    if (level > above.level) {
+      /* Will be the first child of the empty folder */
+      return {
+        drop: dropAt(above.id, 0),
+        cursor: lineCursor(above.rowIndex! + 1, level),
+      };
+    } else {
+      /* Will be a sibling or grandsibling of the empty folder */
+      return {
+        drop: walkUpFrom(above, level),
+        cursor: lineCursor(above.rowIndex! + 1, level),
+      };
+    }
+  }
+
+  /* The node above the cursor is a an open folder with children */
+  return {
+    drop: dropAt(above?.id, 0),
+    cursor: lineCursor(above.rowIndex! + 1, above.level + 1),
+  };
+}
diff --git a/packages/ui/src/components/tree/dnd/drag-hook.ts b/packages/ui/src/components/tree/dnd/drag-hook.ts
index a1a74c04..47e4fa05 100644
--- a/packages/ui/src/components/tree/dnd/drag-hook.ts
+++ b/packages/ui/src/components/tree/dnd/drag-hook.ts
@@ -1,36 +1,36 @@
-import { useEffect } from "react";
-import { ConnectDragSource, useDrag } from "react-dnd";
-import { getEmptyImage } from "react-dnd-html5-backend";
-import { useTreeApi } from "../context";
-import { NodeApi } from "../interfaces/node-api";
-import { DragItem } from "../types/dnd";
-import { DropResult } from "./drop-hook";
-import { actions as dnd } from "../state/dnd-slice";
-
-export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
-  const tree = useTreeApi();
-  const ids = tree.selectedIds;
-  const [_, ref, preview] = useDrag<DragItem, DropResult, void>(
-    () => ({
-      canDrag: () => node.isDraggable,
-      type: "NODE",
-      item: () => {
-        // This is fired once at the begging of a drag operation
-        const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
-        tree.dispatch(dnd.dragStart(node.id, dragIds));
-        return { id: node.id, dragIds };
-      },
-      end: () => {
-        tree.hideCursor();
-        tree.dispatch(dnd.dragEnd());
-      },
-    }),
-    [ids, node],
-  );
-
-  useEffect(() => {
-    preview(getEmptyImage());
-  }, [preview]);
-
-  return ref;
-}
+import { useEffect } from "react";
+import { ConnectDragSource, useDrag } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import { useTreeApi } from "../context";
+import { NodeApi } from "../interfaces/node-api";
+import { DragItem } from "../types/dnd";
+import { DropResult } from "./drop-hook";
+import { actions as dnd } from "../state/dnd-slice";
+
+export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
+  const tree = useTreeApi();
+  const ids = tree.selectedIds;
+  const [_, ref, preview] = useDrag<DragItem, DropResult, void>(
+    () => ({
+      canDrag: () => node.isDraggable,
+      type: "NODE",
+      item: () => {
+        // This is fired once at the begging of a drag operation
+        const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
+        tree.dispatch(dnd.dragStart(node.id, dragIds));
+        return { id: node.id, dragIds };
+      },
+      end: () => {
+        tree.hideCursor();
+        tree.dispatch(dnd.dragEnd());
+      },
+    }),
+    [ids, node],
+  );
+
+  useEffect(() => {
+    preview(getEmptyImage());
+  }, [preview]);
+
+  return ref;
+}
diff --git a/packages/ui/src/components/tree/dnd/drop-hook.ts b/packages/ui/src/components/tree/dnd/drop-hook.ts
index 41614519..ecd2e045 100644
--- a/packages/ui/src/components/tree/dnd/drop-hook.ts
+++ b/packages/ui/src/components/tree/dnd/drop-hook.ts
@@ -1,61 +1,61 @@
-import { RefObject } from "react";
-import { ConnectDropTarget, useDrop } from "react-dnd";
-import { useTreeApi } from "../context";
-import { NodeApi } from "../interfaces/node-api";
-import { DragItem } from "../types/dnd";
-import { computeDrop } from "./compute-drop";
-import { actions as dnd } from "../state/dnd-slice";
-import { safeRun } from "../utils";
-import { ROOT_ID } from "../data/create-root";
-
-export type DropResult = {
-  parentId: string | null;
-  index: number | null;
-};
-
-export function useDropHook(
-  el: RefObject<HTMLElement | null>,
-  node: NodeApi<any>,
-): ConnectDropTarget {
-  const tree = useTreeApi();
-  const [_, dropRef] = useDrop<DragItem, DropResult | null, void>(
-    () => ({
-      accept: "NODE",
-      canDrop: () => tree.canDrop(),
-      hover: (_item, m) => {
-        const offset = m.getClientOffset();
-        if (!el.current || !offset) return;
-        const { cursor, drop } = computeDrop({
-          element: el.current,
-          offset: offset,
-          indent: tree.indent,
-          node: node,
-          prevNode: node.prev,
-          nextNode: node.next,
-        });
-        if (drop) tree.dispatch(dnd.hovering(drop.parentId, drop.index));
-
-        if (m.canDrop()) {
-          if (cursor) tree.showCursor(cursor);
-        } else {
-          tree.hideCursor();
-        }
-      },
-      drop: (_, m) => {
-        if (!m.canDrop()) return null;
-        let { parentId, index, dragIds } = tree.state.dnd;
-        safeRun(tree.props.onMove, {
-          dragIds,
-          parentId: parentId === ROOT_ID ? null : parentId,
-          index: index === null ? 0 : index, // When it's null it was dropped over a folder
-          dragNodes: tree.dragNodes,
-          parentNode: tree.get(parentId),
-        });
-        tree.open(parentId);
-      },
-    }),
-    [node, el.current, tree.props],
-  );
-
-  return dropRef;
-}
+import { RefObject } from "react";
+import { ConnectDropTarget, useDrop } from "react-dnd";
+import { useTreeApi } from "../context";
+import { NodeApi } from "../interfaces/node-api";
+import { DragItem } from "../types/dnd";
+import { computeDrop } from "./compute-drop";
+import { actions as dnd } from "../state/dnd-slice";
+import { safeRun } from "../utils";
+import { ROOT_ID } from "../data/create-root";
+
+export type DropResult = {
+  parentId: string | null;
+  index: number | null;
+};
+
+export function useDropHook(
+  el: RefObject<HTMLElement | null>,
+  node: NodeApi<any>,
+): ConnectDropTarget {
+  const tree = useTreeApi();
+  const [_, dropRef] = useDrop<DragItem, DropResult | null, void>(
+    () => ({
+      accept: "NODE",
+      canDrop: () => tree.canDrop(),
+      hover: (_item, m) => {
+        const offset = m.getClientOffset();
+        if (!el.current || !offset) return;
+        const { cursor, drop } = computeDrop({
+          element: el.current,
+          offset: offset,
+          indent: tree.indent,
+          node: node,
+          prevNode: node.prev,
+          nextNode: node.next,
+        });
+        if (drop) tree.dispatch(dnd.hovering(drop.parentId, drop.index));
+
+        if (m.canDrop()) {
+          if (cursor) tree.showCursor(cursor);
+        } else {
+          tree.hideCursor();
+        }
+      },
+      drop: (_, m) => {
+        if (!m.canDrop()) return null;
+        let { parentId, index, dragIds } = tree.state.dnd;
+        safeRun(tree.props.onMove, {
+          dragIds,
+          parentId: parentId === ROOT_ID ? null : parentId,
+          index: index === null ? 0 : index, // When it's null it was dropped over a folder
+          dragNodes: tree.dragNodes,
+          parentNode: tree.get(parentId),
+        });
+        tree.open(parentId);
+      },
+    }),
+    [node, el.current, tree.props],
+  );
+
+  return dropRef;
+}
diff --git a/packages/ui/src/components/tree/dnd/measure-hover.ts b/packages/ui/src/components/tree/dnd/measure-hover.ts
index 78cd5c9c..8cd0cf3e 100644
--- a/packages/ui/src/components/tree/dnd/measure-hover.ts
+++ b/packages/ui/src/components/tree/dnd/measure-hover.ts
@@ -1,26 +1,26 @@
-import { XYCoord } from "react-dnd";
-import { bound } from "../utils";
-
-export function measureHover(el: HTMLElement, offset: XYCoord, indent: number) {
-  const nextEl = el.nextElementSibling as HTMLElement | null;
-  const prevEl = el.previousElementSibling as HTMLElement | null;
-  const rect = el.getBoundingClientRect();
-  const x = offset.x - Math.round(rect.x);
-  const y = offset.y - Math.round(rect.y);
-  const height = rect.height;
-  const inTopHalf = y < height / 2;
-  const inBottomHalf = !inTopHalf;
-  const pad = height / 4;
-  const inMiddle = y > pad && y < height - pad;
-  const maxLevel = Number(
-    inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0
-  );
-  const minLevel = Number(
-    inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0
-  );
-  const level = bound(Math.floor(x / indent), minLevel, maxLevel);
-
-  return { level, inTopHalf, inBottomHalf, inMiddle };
-}
-
-export type HoverData = ReturnType<typeof measureHover>;
+import { XYCoord } from "react-dnd";
+import { bound } from "../utils";
+
+export function measureHover(el: HTMLElement, offset: XYCoord, indent: number) {
+  const nextEl = el.nextElementSibling as HTMLElement | null;
+  const prevEl = el.previousElementSibling as HTMLElement | null;
+  const rect = el.getBoundingClientRect();
+  const x = offset.x - Math.round(rect.x);
+  const y = offset.y - Math.round(rect.y);
+  const height = rect.height;
+  const inTopHalf = y < height / 2;
+  const inBottomHalf = !inTopHalf;
+  const pad = height / 4;
+  const inMiddle = y > pad && y < height - pad;
+  const maxLevel = Number(
+    inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0
+  );
+  const minLevel = Number(
+    inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0
+  );
+  const level = bound(Math.floor(x / indent), minLevel, maxLevel);
+
+  return { level, inTopHalf, inBottomHalf, inMiddle };
+}
+
+export type HoverData = ReturnType<typeof measureHover>;
diff --git a/packages/ui/src/components/tree/dnd/outer-drop-hook.ts b/packages/ui/src/components/tree/dnd/outer-drop-hook.ts
index b150f1ab..39eb4987 100644
--- a/packages/ui/src/components/tree/dnd/outer-drop-hook.ts
+++ b/packages/ui/src/components/tree/dnd/outer-drop-hook.ts
@@ -1,44 +1,44 @@
-import { useDrop } from "react-dnd";
-import { useTreeApi } from "../context";
-import { DragItem } from "../types/dnd";
-import { computeDrop } from "./compute-drop";
-import { DropResult } from "./drop-hook";
-import { actions as dnd } from "../state/dnd-slice";
-
-export function useOuterDrop() {
-  const tree = useTreeApi();
-
-  // In case we drop an item at the bottom of the list
-  const [, drop] = useDrop<DragItem, DropResult | null, { isOver: boolean }>(
-    () => ({
-      accept: "NODE",
-      canDrop: (_item, m) => {
-        if (!m.isOver({ shallow: true })) return false;
-        return tree.canDrop();
-      },
-      hover: (_item, m) => {
-        if (!m.isOver({ shallow: true })) return;
-        const offset = m.getClientOffset();
-        if (!tree.listEl.current || !offset) return;
-        const { cursor, drop } = computeDrop({
-          element: tree.listEl.current,
-          offset: offset,
-          indent: tree.indent,
-          node: null,
-          prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
-          nextNode: null,
-        });
-        if (drop) tree.dispatch(dnd.hovering(drop.parentId, drop.index));
-
-        if (m.canDrop()) {
-          if (cursor) tree.showCursor(cursor);
-        } else {
-          tree.hideCursor();
-        }
-      },
-    }),
-    [tree]
-  );
-
-  drop(tree.listEl);
-}
+import { useDrop } from "react-dnd";
+import { useTreeApi } from "../context";
+import { DragItem } from "../types/dnd";
+import { computeDrop } from "./compute-drop";
+import { DropResult } from "./drop-hook";
+import { actions as dnd } from "../state/dnd-slice";
+
+export function useOuterDrop() {
+  const tree = useTreeApi();
+
+  // In case we drop an item at the bottom of the list
+  const [, drop] = useDrop<DragItem, DropResult | null, { isOver: boolean }>(
+    () => ({
+      accept: "NODE",
+      canDrop: (_item, m) => {
+        if (!m.isOver({ shallow: true })) return false;
+        return tree.canDrop();
+      },
+      hover: (_item, m) => {
+        if (!m.isOver({ shallow: true })) return;
+        const offset = m.getClientOffset();
+        if (!tree.listEl.current || !offset) return;
+        const { cursor, drop } = computeDrop({
+          element: tree.listEl.current,
+          offset: offset,
+          indent: tree.indent,
+          node: null,
+          prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+          nextNode: null,
+        });
+        if (drop) tree.dispatch(dnd.hovering(drop.parentId, drop.index));
+
+        if (m.canDrop()) {
+          if (cursor) tree.showCursor(cursor);
+        } else {
+          tree.hideCursor();
+        }
+      },
+    }),
+    [tree]
+  );
+
+  drop(tree.listEl);
+}
diff --git a/packages/ui/src/components/tree/hooks/use-fresh-node.ts b/packages/ui/src/components/tree/hooks/use-fresh-node.ts
index 5ac27add..6e8b35c5 100644
--- a/packages/ui/src/components/tree/hooks/use-fresh-node.ts
+++ b/packages/ui/src/components/tree/hooks/use-fresh-node.ts
@@ -1,16 +1,16 @@
-import { useMemo } from "react";
-import { useTreeApi } from "../context";
-import { IdObj } from "../types/utils";
-
-export function useFreshNode<T>(index: number) {
-  const tree = useTreeApi<T>();
-  const original = tree.at(index);
-  if (!original) throw new Error(`Could not find node for index: ${index}`);
-
-  return useMemo(() => {
-    const fresh = original.clone();
-    tree.visibleNodes[index] = fresh; // sneaky
-    return fresh;
-    // Return a fresh instance if the state values change
-  }, [...Object.values(original.state), original]);
-}
+import { useMemo } from "react";
+import { useTreeApi } from "../context";
+import { IdObj } from "../types/utils";
+
+export function useFreshNode<T>(index: number) {
+  const tree = useTreeApi<T>();
+  const original = tree.at(index);
+  if (!original) throw new Error(`Could not find node for index: ${index}`);
+
+  return useMemo(() => {
+    const fresh = original.clone();
+    tree.visibleNodes[index] = fresh; // sneaky
+    return fresh;
+    // Return a fresh instance if the state values change
+  }, [...Object.values(original.state), original]);
+}
diff --git a/packages/ui/src/components/tree/hooks/use-simple-tree.ts b/packages/ui/src/components/tree/hooks/use-simple-tree.ts
index 4848e256..78000e07 100644
--- a/packages/ui/src/components/tree/hooks/use-simple-tree.ts
+++ b/packages/ui/src/components/tree/hooks/use-simple-tree.ts
@@ -1,60 +1,60 @@
-import { useMemo, useState } from "react";
-import { SimpleTree } from "../data/simple-tree";
-import {
-  CreateHandler,
-  DeleteHandler,
-  MoveHandler,
-  RenameHandler,
-} from "../types/handlers";
-import { IdObj } from "../types/utils";
-
-export type SimpleTreeData = {
-  id: string;
-  name: string;
-  children?: SimpleTreeData[];
-};
-
-let nextId = 0;
-
-export function useSimpleTree<T>(initialData: readonly T[]) {
-  const [data, setData] = useState(initialData);
-  const tree = useMemo(
-    () =>
-      new SimpleTree<// @ts-ignore
-      T>(data),
-    [data]
-  );
-
-  const onMove: MoveHandler<T> = (args: {
-    dragIds: string[];
-    parentId: null | string;
-    index: number;
-  }) => {
-    for (const id of args.dragIds) {
-      tree.move({ id, parentId: args.parentId, index: args.index });
-    }
-    setData(tree.data);
-  };
-
-  const onRename: RenameHandler<T> = ({ name, id }) => {
-    tree.update({ id, changes: { name } as any });
-    setData(tree.data);
-  };
-
-  const onCreate: CreateHandler<T> = ({ parentId, index, type }) => {
-    const data = { id: `simple-tree-id-${nextId++}`, name: "" } as any;
-    if (type === "internal") data.children = [];
-    tree.create({ parentId, index, data });
-    setData(tree.data);
-    return data;
-  };
-
-  const onDelete: DeleteHandler<T> = (args: { ids: string[] }) => {
-    args.ids.forEach((id) => tree.drop({ id }));
-    setData(tree.data);
-  };
-
-  const controller = { onMove, onRename, onCreate, onDelete };
-
-  return [data, controller] as const;
-}
+import { useMemo, useState } from "react";
+import { SimpleTree } from "../data/simple-tree";
+import {
+  CreateHandler,
+  DeleteHandler,
+  MoveHandler,
+  RenameHandler,
+} from "../types/handlers";
+import { IdObj } from "../types/utils";
+
+export type SimpleTreeData = {
+  id: string;
+  name: string;
+  children?: SimpleTreeData[];
+};
+
+let nextId = 0;
+
+export function useSimpleTree<T>(initialData: readonly T[]) {
+  const [data, setData] = useState(initialData);
+  const tree = useMemo(
+    () =>
+      new SimpleTree<// @ts-ignore
+      T>(data),
+    [data]
+  );
+
+  const onMove: MoveHandler<T> = (args: {
+    dragIds: string[];
+    parentId: null | string;
+    index: number;
+  }) => {
+    for (const id of args.dragIds) {
+      tree.move({ id, parentId: args.parentId, index: args.index });
+    }
+    setData(tree.data);
+  };
+
+  const onRename: RenameHandler<T> = ({ name, id }) => {
+    tree.update({ id, changes: { name } as any });
+    setData(tree.data);
+  };
+
+  const onCreate: CreateHandler<T> = ({ parentId, index, type }) => {
+    const data = { id: `simple-tree-id-${nextId++}`, name: "" } as any;
+    if (type === "internal") data.children = [];
+    tree.create({ parentId, index, data });
+    setData(tree.data);
+    return data;
+  };
+
+  const onDelete: DeleteHandler<T> = (args: { ids: string[] }) => {
+    args.ids.forEach((id) => tree.drop({ id }));
+    setData(tree.data);
+  };
+
+  const controller = { onMove, onRename, onCreate, onDelete };
+
+  return [data, controller] as const;
+}
diff --git a/packages/ui/src/components/tree/hooks/use-validated-props.ts b/packages/ui/src/components/tree/hooks/use-validated-props.ts
index 1329a090..d8f92935 100644
--- a/packages/ui/src/components/tree/hooks/use-validated-props.ts
+++ b/packages/ui/src/components/tree/hooks/use-validated-props.ts
@@ -1,33 +1,33 @@
-import { TreeProps } from "../types/tree-props";
-import { IdObj } from "../types/utils";
-import { SimpleTreeData, useSimpleTree } from "./use-simple-tree";
-
-export function useValidatedProps<T>(props: TreeProps<T>): TreeProps<T> {
-  if (props.initialData && props.data) {
-    throw new Error(
-      `React Arborist Tree => Provide either a data or initialData prop, but not both.`
-    );
-  }
-  if (
-    props.initialData &&
-    (props.onCreate || props.onDelete || props.onMove || props.onRename)
-  ) {
-    throw new Error(
-      `React Arborist Tree => You passed the initialData prop along with a data handler.
-Use the data prop if you want to provide your own handlers.`
-    );
-  }
-  if (props.initialData) {
-    /**
-     * Let's break the rules of hooks here. If the initialData prop
-     * is provided, we will assume it will not change for the life of
-     * the component.
-     *
-     * We will provide the real data and the handlers to update it.
-     *   */
-    const [data, controller] = useSimpleTree<T>(props.initialData);
-    return { ...props, ...controller, data };
-  } else {
-    return props;
-  }
-}
+import { TreeProps } from "../types/tree-props";
+import { IdObj } from "../types/utils";
+import { SimpleTreeData, useSimpleTree } from "./use-simple-tree";
+
+export function useValidatedProps<T>(props: TreeProps<T>): TreeProps<T> {
+  if (props.initialData && props.data) {
+    throw new Error(
+      `React Arborist Tree => Provide either a data or initialData prop, but not both.`
+    );
+  }
+  if (
+    props.initialData &&
+    (props.onCreate || props.onDelete || props.onMove || props.onRename)
+  ) {
+    throw new Error(
+      `React Arborist Tree => You passed the initialData prop along with a data handler.
+Use the data prop if you want to provide your own handlers.`
+    );
+  }
+  if (props.initialData) {
+    /**
+     * Let's break the rules of hooks here. If the initialData prop
+     * is provided, we will assume it will not change for the life of
+     * the component.
+     *
+     * We will provide the real data and the handlers to update it.
+     *   */
+    const [data, controller] = useSimpleTree<T>(props.initialData);
+    return { ...props, ...controller, data };
+  } else {
+    return props;
+  }
+}
diff --git a/packages/ui/src/components/tree/index.ts b/packages/ui/src/components/tree/index.ts
index 854860fb..42fd8cf3 100644
--- a/packages/ui/src/components/tree/index.ts
+++ b/packages/ui/src/components/tree/index.ts
@@ -1,9 +1,9 @@
-/* The Public Api */
-export { Tree } from "./components/tree";
-export * from "./types/handlers";
-export * from "./types/renderers";
-export * from "./types/state";
-export * from "./interfaces/node-api";
-export * from "./interfaces/tree-api";
-export * from "./data/simple-tree";
-export * from "./hooks/use-simple-tree";
+/* The Public Api */
+export { Tree } from "./components/tree";
+export * from "./types/handlers";
+export * from "./types/renderers";
+export * from "./types/state";
+export * from "./interfaces/node-api";
+export * from "./interfaces/tree-api";
+export * from "./data/simple-tree";
+export * from "./hooks/use-simple-tree";
diff --git a/packages/ui/src/components/tree/interfaces/node-api.ts b/packages/ui/src/components/tree/interfaces/node-api.ts
index 34d71383..08acd616 100644
--- a/packages/ui/src/components/tree/interfaces/node-api.ts
+++ b/packages/ui/src/components/tree/interfaces/node-api.ts
@@ -1,209 +1,209 @@
-import React from "react";
-import { TreeApi } from "./tree-api";
-import { IdObj } from "../types/utils";
-import { ROOT_ID } from "../data/create-root";
-
-type Params<T> = {
-  id: string;
-  data: T;
-  level: number;
-  children: NodeApi<T>[] | null;
-  parent: NodeApi<T> | null;
-  isDraggable: boolean;
-  rowIndex: number | null;
-  tree: TreeApi<T>;
-};
-
-export class NodeApi<T = any> {
-  tree: TreeApi<T>;
-  id: string;
-  data: T;
-  level: number;
-  children: NodeApi<T>[] | null;
-  parent: NodeApi<T> | null;
-  isDraggable: boolean;
-  rowIndex: number | null;
-
-  constructor(params: Params<T>) {
-    this.tree = params.tree;
-    this.id = params.id;
-    this.data = params.data;
-    this.level = params.level;
-    this.children = params.children;
-    this.parent = params.parent;
-    this.isDraggable = params.isDraggable;
-    this.rowIndex = params.rowIndex;
-  }
-
-  get isRoot() {
-    return this.id === ROOT_ID;
-  }
-
-  get isLeaf() {
-    return !Array.isArray(this.children);
-  }
-
-  get isInternal() {
-    return !this.isLeaf;
-  }
-
-  get isOpen() {
-    return this.isLeaf ? false : this.tree.isOpen(this.id);
-  }
-
-  get isClosed() {
-    return this.isLeaf ? false : !this.tree.isOpen(this.id);
-  }
-
-  get isEditable() {
-    return this.tree.isEditable(this.data);
-  }
-
-  get isEditing() {
-    return this.tree.editingId === this.id;
-  }
-
-  get isSelected() {
-    return this.tree.isSelected(this.id);
-  }
-
-  get isOnlySelection() {
-    return this.isSelected && this.tree.hasOneSelection;
-  }
-
-  get isSelectedStart() {
-    return this.isSelected && !this.prev?.isSelected;
-  }
-
-  get isSelectedEnd() {
-    return this.isSelected && !this.next?.isSelected;
-  }
-
-  get isFocused() {
-    return this.tree.isFocused(this.id);
-  }
-
-  get isDragging() {
-    return this.tree.isDragging(this.id);
-  }
-
-  get willReceiveDrop() {
-    return this.tree.willReceiveDrop(this.id);
-  }
-
-  get state() {
-    return {
-      isClosed: this.isClosed,
-      isDragging: this.isDragging,
-      isEditing: this.isEditing,
-      isFocused: this.isFocused,
-      isInternal: this.isInternal,
-      isLeaf: this.isLeaf,
-      isOpen: this.isOpen,
-      isSelected: this.isSelected,
-      isSelectedEnd: this.isSelectedEnd,
-      isSelectedStart: this.isSelectedStart,
-      willReceiveDrop: this.willReceiveDrop,
-    };
-  }
-
-  get childIndex() {
-    if (this.parent && this.parent.children) {
-      return this.parent.children.findIndex((child) => child.id === this.id);
-    } else {
-      return -1;
-    }
-  }
-
-  get next(): NodeApi<T> | null {
-    if (this.rowIndex === null) return null;
-    return this.tree.at(this.rowIndex + 1);
-  }
-
-  get prev(): NodeApi<T> | null {
-    if (this.rowIndex === null) return null;
-    return this.tree.at(this.rowIndex - 1);
-  }
-
-  get nextSibling(): NodeApi<T> | null {
-    const i = this.childIndex;
-    return this.parent?.children![i + 1] ?? null;
-  }
-
-  isAncestorOf(node: NodeApi<T> | null) {
-    if (!node) return false;
-    let ancestor: NodeApi<T> | null = node;
-    while (ancestor) {
-      if (ancestor.id === this.id) return true;
-      ancestor = ancestor.parent;
-    }
-    return false;
-  }
-
-  select() {
-    this.tree.select(this);
-  }
-
-  deselect() {
-    this.tree.deselect(this);
-  }
-
-  selectMulti() {
-    this.tree.selectMulti(this);
-  }
-
-  selectContiguous() {
-    this.tree.selectContiguous(this);
-  }
-
-  activate() {
-    this.tree.activate(this);
-  }
-
-  focus() {
-    this.tree.focus(this);
-  }
-
-  toggle() {
-    this.tree.toggle(this);
-  }
-
-  open() {
-    this.tree.open(this);
-  }
-
-  openParents() {
-    this.tree.openParents(this);
-  }
-
-  close() {
-    this.tree.close(this);
-  }
-
-  submit(value: string) {
-    this.tree.submit(this, value);
-  }
-
-  reset() {
-    this.tree.reset();
-  }
-
-  clone() {
-    return new NodeApi<T>({ ...this });
-  }
-
-  edit() {
-    return this.tree.edit(this);
-  }
-
-  handleClick = (e: React.MouseEvent) => {
-    if (e.metaKey && !this.tree.props.disableMultiSelection) {
-      this.isSelected ? this.deselect() : this.selectMulti();
-    } else if (e.shiftKey && !this.tree.props.disableMultiSelection) {
-      this.selectContiguous();
-    } else {
-      this.select();
-      this.activate();
-    }
-  };
-}
+import React from "react";
+import { TreeApi } from "./tree-api";
+import { IdObj } from "../types/utils";
+import { ROOT_ID } from "../data/create-root";
+
+type Params<T> = {
+  id: string;
+  data: T;
+  level: number;
+  children: NodeApi<T>[] | null;
+  parent: NodeApi<T> | null;
+  isDraggable: boolean;
+  rowIndex: number | null;
+  tree: TreeApi<T>;
+};
+
+export class NodeApi<T = any> {
+  tree: TreeApi<T>;
+  id: string;
+  data: T;
+  level: number;
+  children: NodeApi<T>[] | null;
+  parent: NodeApi<T> | null;
+  isDraggable: boolean;
+  rowIndex: number | null;
+
+  constructor(params: Params<T>) {
+    this.tree = params.tree;
+    this.id = params.id;
+    this.data = params.data;
+    this.level = params.level;
+    this.children = params.children;
+    this.parent = params.parent;
+    this.isDraggable = params.isDraggable;
+    this.rowIndex = params.rowIndex;
+  }
+
+  get isRoot() {
+    return this.id === ROOT_ID;
+  }
+
+  get isLeaf() {
+    return !Array.isArray(this.children);
+  }
+
+  get isInternal() {
+    return !this.isLeaf;
+  }
+
+  get isOpen() {
+    return this.isLeaf ? false : this.tree.isOpen(this.id);
+  }
+
+  get isClosed() {
+    return this.isLeaf ? false : !this.tree.isOpen(this.id);
+  }
+
+  get isEditable() {
+    return this.tree.isEditable(this.data);
+  }
+
+  get isEditing() {
+    return this.tree.editingId === this.id;
+  }
+
+  get isSelected() {
+    return this.tree.isSelected(this.id);
+  }
+
+  get isOnlySelection() {
+    return this.isSelected && this.tree.hasOneSelection;
+  }
+
+  get isSelectedStart() {
+    return this.isSelected && !this.prev?.isSelected;
+  }
+
+  get isSelectedEnd() {
+    return this.isSelected && !this.next?.isSelected;
+  }
+
+  get isFocused() {
+    return this.tree.isFocused(this.id);
+  }
+
+  get isDragging() {
+    return this.tree.isDragging(this.id);
+  }
+
+  get willReceiveDrop() {
+    return this.tree.willReceiveDrop(this.id);
+  }
+
+  get state() {
+    return {
+      isClosed: this.isClosed,
+      isDragging: this.isDragging,
+      isEditing: this.isEditing,
+      isFocused: this.isFocused,
+      isInternal: this.isInternal,
+      isLeaf: this.isLeaf,
+      isOpen: this.isOpen,
+      isSelected: this.isSelected,
+      isSelectedEnd: this.isSelectedEnd,
+      isSelectedStart: this.isSelectedStart,
+      willReceiveDrop: this.willReceiveDrop,
+    };
+  }
+
+  get childIndex() {
+    if (this.parent && this.parent.children) {
+      return this.parent.children.findIndex((child) => child.id === this.id);
+    } else {
+      return -1;
+    }
+  }
+
+  get next(): NodeApi<T> | null {
+    if (this.rowIndex === null) return null;
+    return this.tree.at(this.rowIndex + 1);
+  }
+
+  get prev(): NodeApi<T> | null {
+    if (this.rowIndex === null) return null;
+    return this.tree.at(this.rowIndex - 1);
+  }
+
+  get nextSibling(): NodeApi<T> | null {
+    const i = this.childIndex;
+    return this.parent?.children![i + 1] ?? null;
+  }
+
+  isAncestorOf(node: NodeApi<T> | null) {
+    if (!node) return false;
+    let ancestor: NodeApi<T> | null = node;
+    while (ancestor) {
+      if (ancestor.id === this.id) return true;
+      ancestor = ancestor.parent;
+    }
+    return false;
+  }
+
+  select() {
+    this.tree.select(this);
+  }
+
+  deselect() {
+    this.tree.deselect(this);
+  }
+
+  selectMulti() {
+    this.tree.selectMulti(this);
+  }
+
+  selectContiguous() {
+    this.tree.selectContiguous(this);
+  }
+
+  activate() {
+    this.tree.activate(this);
+  }
+
+  focus() {
+    this.tree.focus(this);
+  }
+
+  toggle() {
+    this.tree.toggle(this);
+  }
+
+  open() {
+    this.tree.open(this);
+  }
+
+  openParents() {
+    this.tree.openParents(this);
+  }
+
+  close() {
+    this.tree.close(this);
+  }
+
+  submit(value: string) {
+    this.tree.submit(this, value);
+  }
+
+  reset() {
+    this.tree.reset();
+  }
+
+  clone() {
+    return new NodeApi<T>({ ...this });
+  }
+
+  edit() {
+    return this.tree.edit(this);
+  }
+
+  handleClick = (e: React.MouseEvent) => {
+    if (e.metaKey && !this.tree.props.disableMultiSelection) {
+      this.isSelected ? this.deselect() : this.selectMulti();
+    } else if (e.shiftKey && !this.tree.props.disableMultiSelection) {
+      this.selectContiguous();
+    } else {
+      this.select();
+      this.activate();
+    }
+  };
+}
diff --git a/packages/ui/src/components/tree/interfaces/tree-api.test.ts b/packages/ui/src/components/tree/interfaces/tree-api.test.ts
index 100a18e0..0defd0d9 100644
--- a/packages/ui/src/components/tree/interfaces/tree-api.test.ts
+++ b/packages/ui/src/components/tree/interfaces/tree-api.test.ts
@@ -1,15 +1,15 @@
-import { createStore } from "redux";
-import { rootReducer } from "../state/root-reducer";
-import { TreeProps } from "../types/tree-props";
-import { TreeApi } from "./tree-api";
-
-function setupApi(props: TreeProps<any>) {
-  const store = createStore(rootReducer);
-  return new TreeApi(store, props, { current: null }, { current: null });
-}
-
-test("tree.canDrop()", () => {
-  expect(setupApi({ disableDrop: true }).canDrop()).toBe(false);
-  expect(setupApi({ disableDrop: () => false }).canDrop()).toBe(true);
-  expect(setupApi({ disableDrop: false }).canDrop()).toBe(true);
-});
+import { createStore } from "redux";
+import { rootReducer } from "../state/root-reducer";
+import { TreeProps } from "../types/tree-props";
+import { TreeApi } from "./tree-api";
+
+function setupApi(props: TreeProps<any>) {
+  const store = createStore(rootReducer);
+  return new TreeApi(store, props, { current: null }, { current: null });
+}
+
+test("tree.canDrop()", () => {
+  expect(setupApi({ disableDrop: true }).canDrop()).toBe(false);
+  expect(setupApi({ disableDrop: () => false }).canDrop()).toBe(true);
+  expect(setupApi({ disableDrop: false }).canDrop()).toBe(true);
+});
diff --git a/packages/ui/src/components/tree/interfaces/tree-api.ts b/packages/ui/src/components/tree/interfaces/tree-api.ts
index cc0d28b6..4c931cdb 100644
--- a/packages/ui/src/components/tree/interfaces/tree-api.ts
+++ b/packages/ui/src/components/tree/interfaces/tree-api.ts
@@ -1,663 +1,663 @@
-import { EditResult } from "../types/handlers";
-import { Identity, IdObj } from "../types/utils";
-import { TreeProps } from "../types/tree-props";
-import { MutableRefObject } from "react";
-import { Align, FixedSizeList, ListOnItemsRenderedProps } from "react-window";
-import * as utils from "../utils";
-import { DefaultCursor } from "../components/default-cursor";
-import { DefaultRow } from "../components/default-row";
-import { DefaultNode } from "../components/default-node";
-import { NodeApi } from "./node-api";
-import { edit } from "../state/edit-slice";
-import { Actions, RootState } from "../state/root-reducer";
-import { focus, treeBlur } from "../state/focus-slice";
-import { createRoot, ROOT_ID } from "../data/create-root";
-import { actions as visibility } from "../state/open-slice";
-import { actions as selection } from "../state/selection-slice";
-import { actions as dnd } from "../state/dnd-slice";
-import { DefaultDragPreview } from "../components/default-drag-preview";
-import { DefaultContainer } from "../components/default-container";
-import { Cursor } from "../dnd/compute-drop";
-import { Store } from "redux";
-import { createList } from "../data/create-list";
-import { createIndex } from "../data/create-index";
-
-const { safeRun, identify, identifyNull } = utils;
-export class TreeApi<T> {
-  static editPromise: null | ((args: EditResult) => void);
-  root: NodeApi<T>;
-  visibleNodes: NodeApi<T>[];
-  visibleStartIndex: number = 0;
-  visibleStopIndex: number = 0;
-  idToIndex: { [id: string]: number };
-
-  constructor(
-    public store: Store<RootState, Actions>,
-    public props: TreeProps<T>,
-    public list: MutableRefObject<FixedSizeList | null>,
-    public listEl: MutableRefObject<HTMLDivElement | null>
-  ) {
-    /* Changes here must also be made in update() */
-    this.root = createRoot<T>(this);
-    this.visibleNodes = createList<T>(this);
-    this.idToIndex = createIndex(this.visibleNodes);
-  }
-
-  /* Changes here must also be made in constructor() */
-  update(props: TreeProps<T>) {
-    this.props = props;
-    this.root = createRoot<T>(this);
-    this.visibleNodes = createList<T>(this);
-    this.idToIndex = createIndex(this.visibleNodes);
-  }
-
-  /* Store helpers */
-
-  dispatch(action: Actions) {
-    return this.store.dispatch(action);
-  }
-
-  get state() {
-    return this.store.getState();
-  }
-
-  get openState() {
-    return this.state.nodes.open.unfiltered;
-  }
-
-  /* Tree Props */
-
-  get width() {
-    return this.props.width ?? 300;
-  }
-
-  get height() {
-    return this.props.height ?? 500;
-  }
-
-  get indent() {
-    return this.props.indent ?? 24;
-  }
-
-  get rowHeight() {
-    return this.props.rowHeight ?? 24;
-  }
-
-  get overscanCount() {
-    return this.props.overscanCount ?? 1;
-  }
-
-  get searchTerm() {
-    return (this.props.searchTerm || "").trim();
-  }
-
-  get matchFn() {
-    const match =
-      this.props.searchMatch ??
-      ((node, term) => {
-        const string = JSON.stringify(
-          Object.values(node.data as { [k: string]: unknown })
-        );
-        return string.toLocaleLowerCase().includes(term.toLocaleLowerCase());
-      });
-    return (node: NodeApi<T>) => match(node, this.searchTerm);
-  }
-
-  accessChildren(data: T) {
-    const get = this.props.childrenAccessor || "children";
-    return utils.access<readonly T[] | undefined>(data, get) ?? null;
-  }
-
-  accessId(data: T) {
-    const get = this.props.idAccessor || "id";
-    const id = utils.access<string>(data, get);
-    if (!id)
-      throw new Error(
-        "Data must contain an 'id' property or props.idAccessor must return a string"
-      );
-    return id;
-  }
-
-  /* Node Access */
-
-  get firstNode() {
-    return this.visibleNodes[0] ?? null;
-  }
-
-  get lastNode() {
-    return this.visibleNodes[this.visibleNodes.length - 1] ?? null;
-  }
-
-  get focusedNode() {
-    return this.get(this.state.nodes.focus.id) ?? null;
-  }
-
-  get mostRecentNode() {
-    return this.get(this.state.nodes.selection.mostRecent) ?? null;
-  }
-
-  get nextNode() {
-    const index = this.indexOf(this.focusedNode);
-    if (index === null) return null;
-    else return this.at(index + 1);
-  }
-
-  get prevNode() {
-    const index = this.indexOf(this.focusedNode);
-    if (index === null) return null;
-    else return this.at(index - 1);
-  }
-
-  get(id: string | null): NodeApi<T> | null {
-    if (!id) return null;
-    if (id in this.idToIndex)
-      return this.visibleNodes[this.idToIndex[id]] || null;
-    else return null;
-  }
-
-  at(index: number): NodeApi<T> | null {
-    return this.visibleNodes[index] || null;
-  }
-
-  nodesBetween(startId: string | null, endId: string | null) {
-    if (startId === null || endId === null) return [];
-    const index1 = this.indexOf(startId) ?? 0;
-    const index2 = this.indexOf(endId);
-    if (index2 === null) return [];
-    const start = Math.min(index1, index2);
-    const end = Math.max(index1, index2);
-    return this.visibleNodes.slice(start, end + 1);
-  }
-
-  indexOf(id: string | null | IdObj) {
-    const key = utils.identifyNull(id);
-    if (!key) return null;
-    return this.idToIndex[key];
-  }
-
-  /* Data Operations */
-
-  get editingId() {
-    return this.state.nodes.edit.id;
-  }
-
-  createInternal() {
-    return this.create({ type: "internal" });
-  }
-
-  createLeaf() {
-    return this.create({ type: "leaf" });
-  }
-
-  async create(
-    opts: {
-      type?: "internal" | "leaf";
-      parentId?: null | string;
-      index?: null | number;
-    } = {}
-  ) {
-    const parentId =
-      opts.parentId === undefined
-        ? utils.getInsertParentId(this)
-        : opts.parentId;
-    const index = opts.index ?? utils.getInsertIndex(this);
-    const type = opts.type ?? "leaf";
-    const data = await safeRun(this.props.onCreate, {
-      type,
-      parentId,
-      index,
-      parentNode: this.get(parentId),
-    });
-    if (data) {
-      this.focus(data);
-      setTimeout(() => {
-        this.edit(data).then(() => {
-          this.select(data);
-          this.activate(data);
-        });
-      });
-    }
-  }
-
-  async delete(node: string | IdObj | null | string[] | IdObj[]) {
-    if (!node) return;
-    const idents = Array.isArray(node) ? node : [node];
-    const ids = idents.map(identify);
-    const nodes = ids.map((id) => this.get(id)!).filter((n) => !!n);
-    await safeRun(this.props.onDelete, { nodes, ids });
-  }
-
-  edit(node: string | IdObj): Promise<EditResult> {
-    const id = identify(node);
-    this.resolveEdit({ cancelled: true });
-    this.scrollTo(id);
-    this.dispatch(edit(id));
-    return new Promise((resolve) => {
-      TreeApi.editPromise = resolve;
-    });
-  }
-
-  async submit(identity: Identity, value: string) {
-    if (!identity) return;
-    const id = identify(identity);
-    await safeRun(this.props.onRename, {
-      id,
-      name: value,
-      node: this.get(id)!,
-    });
-    this.dispatch(edit(null));
-    this.resolveEdit({ cancelled: false, value });
-    setTimeout(() => this.onFocus()); // Return focus to element;
-  }
-
-  reset() {
-    this.dispatch(edit(null));
-    this.resolveEdit({ cancelled: true });
-    setTimeout(() => this.onFocus()); // Return focus to element;
-  }
-
-  activate(id: string | IdObj | null) {
-    const node = this.get(identifyNull(id));
-    if (!node) return;
-    safeRun(this.props.onActivate, node);
-  }
-
-  private resolveEdit(value: EditResult) {
-    const resolve = TreeApi.editPromise;
-    if (resolve) resolve(value);
-    TreeApi.editPromise = null;
-  }
-
-  /* Focus and Selection */
-
-  get selectedIds() {
-    return this.state.nodes.selection.ids;
-  }
-
-  get selectedNodes() {
-    let nodes = [];
-    for (let id of Array.from(this.selectedIds)) {
-      const node = this.get(id);
-      if (node) nodes.push(node);
-    }
-    return nodes;
-  }
-
-  focus(node: Identity, opts: { scroll?: boolean } = {}) {
-    if (!node) return;
-    /* Focus is responsible for scrolling, while selection is
-     * responsible for focus. If selectionFollowsFocus, then
-     * just select it. */
-    if (this.props.selectionFollowsFocus) {
-      this.select(node);
-    } else {
-      this.dispatch(focus(identify(node)));
-      if (opts.scroll !== false) this.scrollTo(node);
-      if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
-    }
-  }
-
-  pageUp() {
-    const start = this.visibleStartIndex;
-    const stop = this.visibleStopIndex;
-    const page = stop - start;
-    let index = this.focusedNode?.rowIndex ?? 0;
-    if (index > start) {
-      index = start;
-    } else {
-      index = Math.max(start - page, 0);
-    }
-    this.focus(this.at(index));
-  }
-
-  pageDown() {
-    const start = this.visibleStartIndex;
-    const stop = this.visibleStopIndex;
-    const page = stop - start;
-    let index = this.focusedNode?.rowIndex ?? 0;
-    if (index < stop) {
-      index = stop;
-    } else {
-      index = Math.min(index + page, this.visibleNodes.length - 1);
-    }
-    this.focus(this.at(index));
-  }
-
-  select(node: Identity, opts: { align?: Align; focus?: boolean } = {}) {
-    if (!node) return;
-    const changeFocus = opts.focus !== false;
-    const id = identify(node);
-    if (changeFocus) this.dispatch(focus(id));
-    this.dispatch(selection.only(id));
-    this.dispatch(selection.anchor(id));
-    this.dispatch(selection.mostRecent(id));
-    this.scrollTo(id, opts.align);
-    if (this.focusedNode && changeFocus) {
-      safeRun(this.props.onFocus, this.focusedNode);
-    }
-    safeRun(this.props.onSelect, this.selectedNodes);
-  }
-
-  deselect(node: Identity) {
-    if (!node) return;
-    const id = identify(node);
-    this.dispatch(selection.remove(id));
-    safeRun(this.props.onSelect, this.selectedNodes);
-  }
-
-  selectMulti(identity: Identity) {
-    const node = this.get(identifyNull(identity));
-    if (!node) return;
-    this.dispatch(focus(node.id));
-    this.dispatch(selection.add(node.id));
-    this.dispatch(selection.anchor(node.id));
-    this.dispatch(selection.mostRecent(node.id));
-    this.scrollTo(node);
-    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
-    safeRun(this.props.onSelect, this.selectedNodes);
-  }
-
-  selectContiguous(identity: Identity) {
-    if (!identity) return;
-    const id = identify(identity);
-    const { anchor, mostRecent } = this.state.nodes.selection;
-    this.dispatch(focus(id));
-    this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
-    this.dispatch(selection.add(this.nodesBetween(anchor, identifyNull(id))));
-    this.dispatch(selection.mostRecent(id));
-    this.scrollTo(id);
-    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
-    safeRun(this.props.onSelect, this.selectedNodes);
-  }
-
-  deselectAll() {
-    this.setSelection({ ids: [], anchor: null, mostRecent: null });
-    safeRun(this.props.onSelect, this.selectedNodes);
-  }
-
-  selectAll() {
-    this.setSelection({
-      ids: Object.keys(this.idToIndex),
-      anchor: this.firstNode,
-      mostRecent: this.lastNode,
-    });
-    this.dispatch(focus(this.lastNode?.id));
-    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
-    safeRun(this.props.onSelect, this.selectedNodes);
-  }
-
-  setSelection(args: {
-    ids: (IdObj | string)[] | null;
-    anchor: IdObj | string | null;
-    mostRecent: IdObj | string | null;
-  }) {
-    const ids = new Set(args.ids?.map(identify));
-    const anchor = identifyNull(args.anchor);
-    const mostRecent = identifyNull(args.mostRecent);
-    this.dispatch(selection.set({ ids, anchor, mostRecent }));
-    safeRun(this.props.onSelect, this.selectedNodes);
-  }
-
-  /* Drag and Drop */
-
-  get cursorParentId() {
-    const { cursor } = this.state.dnd;
-    switch (cursor.type) {
-      case "highlight":
-        return cursor.id;
-      default:
-        return null;
-    }
-  }
-
-  get cursorOverFolder() {
-    return this.state.dnd.cursor.type === "highlight";
-  }
-
-  get dragNodes() {
-    return this.state.dnd.dragIds
-      .map((id) => this.get(id))
-      .filter((n) => !!n) as NodeApi<T>[];
-  }
-
-  get dragNode() {
-    return this.get(this.state.nodes.drag.id);
-  }
-
-  get dragDestinationParent() {
-    return this.get(this.state.nodes.drag.destinationParentId);
-  }
-
-  get dragDestinationIndex() {
-    return this.state.nodes.drag.destinationIndex;
-  }
-
-  canDrop() {
-    if (this.isFiltered) return false;
-    const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
-    const dragNodes = this.dragNodes;
-    const isDisabled = this.props.disableDrop;
-
-    for (const drag of dragNodes) {
-      if (!drag) return false;
-      if (!parentNode) return false;
-      if (drag.isInternal && utils.isDescendant(parentNode, drag)) return false;
-    }
-
-    // Allow the user to insert their own logic
-    if (typeof isDisabled == "function") {
-      return !isDisabled({
-        parentNode,
-        dragNodes: this.dragNodes,
-        index: this.state.dnd.index || 0,
-      });
-    } else if (typeof isDisabled == "string") {
-      // @ts-ignore
-      return !parentNode.data[isDisabled];
-    } else if (typeof isDisabled === "boolean") {
-      return !isDisabled;
-    } else {
-      return true;
-    }
-  }
-
-  hideCursor() {
-    this.dispatch(dnd.cursor({ type: "none" }));
-  }
-
-  showCursor(cursor: Cursor) {
-    this.dispatch(dnd.cursor(cursor));
-  }
-
-  /* Visibility */
-
-  open(identity: Identity) {
-    const id = identifyNull(identity);
-    if (!id) return;
-    if (this.isOpen(id)) return;
-    this.dispatch(visibility.open(id, this.isFiltered));
-    safeRun(this.props.onToggle, id);
-  }
-
-  close(identity: Identity) {
-    const id = identifyNull(identity);
-    if (!id) return;
-    if (!this.isOpen(id)) return;
-    this.dispatch(visibility.close(id, this.isFiltered));
-    safeRun(this.props.onToggle, id);
-  }
-
-  toggle(identity: Identity) {
-    const id = identifyNull(identity);
-    if (!id) return;
-    return this.isOpen(id) ? this.close(id) : this.open(id);
-  }
-
-  openParents(identity: Identity) {
-    const id = identifyNull(identity);
-    if (!id) return;
-    const node = utils.dfs(this.root, id);
-    let parent = node?.parent;
-
-    while (parent) {
-      this.open(parent.id);
-      parent = parent.parent;
-    }
-  }
-
-  openSiblings(node: NodeApi<T>) {
-    const parent = node.parent;
-    if (!parent) {
-      this.toggle(node.id);
-    } else if (parent.children) {
-      const isOpen = node.isOpen;
-      for (let sibling of parent.children) {
-        if (sibling.isInternal) {
-          isOpen ? this.close(sibling.id) : this.open(sibling.id);
-        }
-      }
-      this.scrollTo(this.focusedNode);
-    }
-  }
-
-  openAll() {
-    utils.walk(this.root, (node) => {
-      if (node.isInternal) node.open();
-    });
-  }
-
-  closeAll() {
-    utils.walk(this.root, (node) => {
-      if (node.isInternal) node.close();
-    });
-  }
-
-  /* Scrolling */
-
-  scrollTo(identity: Identity, align: Align = "smart") {
-    if (!identity) return;
-    const id = identify(identity);
-    this.openParents(id);
-    return utils
-      .waitFor(() => id in this.idToIndex)
-      .then(() => {
-        const index = this.idToIndex[id];
-        if (index === undefined) return;
-        this.list.current?.scrollToItem(index, align);
-      })
-      .catch(() => {
-        // Id: ${id} never appeared in the list.
-      });
-  }
-
-  /* State Checks */
-
-  get isEditing() {
-    return this.state.nodes.edit.id !== null;
-  }
-
-  get isFiltered() {
-    return !!this.props.searchTerm?.trim();
-  }
-
-  get hasFocus() {
-    return this.state.nodes.focus.treeFocused;
-  }
-
-  get hasNoSelection() {
-    return this.state.nodes.selection.ids.size === 0;
-  }
-
-  get hasOneSelection() {
-    return this.state.nodes.selection.ids.size === 1;
-  }
-
-  get hasMultipleSelections() {
-    return this.state.nodes.selection.ids.size > 1;
-  }
-
-  isSelected(id?: string) {
-    if (!id) return false;
-    return this.state.nodes.selection.ids.has(id);
-  }
-
-  isOpen(id?: string) {
-    if (!id) return false;
-    if (id === ROOT_ID) return true;
-    const def = this.props.openByDefault ?? true;
-    if (this.isFiltered) {
-      return this.state.nodes.open.filtered[id] ?? true; // Filtered folders are always opened by default
-    } else {
-      return this.state.nodes.open.unfiltered[id] ?? def;
-    }
-  }
-
-  isEditable(data: T) {
-    const check = this.props.disableEdit || (() => false);
-    return !utils.access(data, check);
-  }
-
-  isDraggable(data: T) {
-    const check = this.props.disableDrag || (() => false);
-    return !utils.access(data, check);
-  }
-
-  isDragging(node: string | IdObj | null) {
-    const id = identifyNull(node);
-    if (!id) return false;
-    return this.state.nodes.drag.id === id;
-  }
-
-  isFocused(id: string) {
-    return this.hasFocus && this.state.nodes.focus.id === id;
-  }
-
-  isMatch(node: NodeApi<T>) {
-    return this.matchFn(node);
-  }
-
-  willReceiveDrop(node: string | IdObj | null) {
-    const id = identifyNull(node);
-    if (!id) return false;
-    const { destinationParentId, destinationIndex } = this.state.nodes.drag;
-    return id === destinationParentId && destinationIndex === null;
-  }
-
-  /* Tree Event Handlers */
-
-  onFocus() {
-    const node = this.focusedNode || this.firstNode;
-    if (node) this.dispatch(focus(node.id));
-  }
-
-  onBlur() {
-    this.dispatch(treeBlur());
-  }
-
-  onItemsRendered(args: ListOnItemsRenderedProps) {
-    this.visibleStartIndex = args.visibleStartIndex;
-    this.visibleStopIndex = args.visibleStopIndex;
-  }
-
-  /* Get Renderers */
-
-  get renderContainer() {
-    return this.props.renderContainer || DefaultContainer;
-  }
-
-  get renderRow() {
-    return this.props.renderRow || DefaultRow;
-  }
-
-  get renderNode() {
-    return this.props.children || DefaultNode;
-  }
-
-  get renderDragPreview() {
-    return this.props.renderDragPreview || DefaultDragPreview;
-  }
-
-  get renderCursor() {
-    return this.props.renderCursor || DefaultCursor;
-  }
-}
+import { EditResult } from "../types/handlers";
+import { Identity, IdObj } from "../types/utils";
+import { TreeProps } from "../types/tree-props";
+import { MutableRefObject } from "react";
+import { Align, FixedSizeList, ListOnItemsRenderedProps } from "react-window";
+import * as utils from "../utils";
+import { DefaultCursor } from "../components/default-cursor";
+import { DefaultRow } from "../components/default-row";
+import { DefaultNode } from "../components/default-node";
+import { NodeApi } from "./node-api";
+import { edit } from "../state/edit-slice";
+import { Actions, RootState } from "../state/root-reducer";
+import { focus, treeBlur } from "../state/focus-slice";
+import { createRoot, ROOT_ID } from "../data/create-root";
+import { actions as visibility } from "../state/open-slice";
+import { actions as selection } from "../state/selection-slice";
+import { actions as dnd } from "../state/dnd-slice";
+import { DefaultDragPreview } from "../components/default-drag-preview";
+import { DefaultContainer } from "../components/default-container";
+import { Cursor } from "../dnd/compute-drop";
+import { Store } from "redux";
+import { createList } from "../data/create-list";
+import { createIndex } from "../data/create-index";
+
+const { safeRun, identify, identifyNull } = utils;
+export class TreeApi<T> {
+  static editPromise: null | ((args: EditResult) => void);
+  root: NodeApi<T>;
+  visibleNodes: NodeApi<T>[];
+  visibleStartIndex: number = 0;
+  visibleStopIndex: number = 0;
+  idToIndex: { [id: string]: number };
+
+  constructor(
+    public store: Store<RootState, Actions>,
+    public props: TreeProps<T>,
+    public list: MutableRefObject<FixedSizeList | null>,
+    public listEl: MutableRefObject<HTMLDivElement | null>
+  ) {
+    /* Changes here must also be made in update() */
+    this.root = createRoot<T>(this);
+    this.visibleNodes = createList<T>(this);
+    this.idToIndex = createIndex(this.visibleNodes);
+  }
+
+  /* Changes here must also be made in constructor() */
+  update(props: TreeProps<T>) {
+    this.props = props;
+    this.root = createRoot<T>(this);
+    this.visibleNodes = createList<T>(this);
+    this.idToIndex = createIndex(this.visibleNodes);
+  }
+
+  /* Store helpers */
+
+  dispatch(action: Actions) {
+    return this.store.dispatch(action);
+  }
+
+  get state() {
+    return this.store.getState();
+  }
+
+  get openState() {
+    return this.state.nodes.open.unfiltered;
+  }
+
+  /* Tree Props */
+
+  get width() {
+    return this.props.width ?? 300;
+  }
+
+  get height() {
+    return this.props.height ?? 500;
+  }
+
+  get indent() {
+    return this.props.indent ?? 24;
+  }
+
+  get rowHeight() {
+    return this.props.rowHeight ?? 24;
+  }
+
+  get overscanCount() {
+    return this.props.overscanCount ?? 1;
+  }
+
+  get searchTerm() {
+    return (this.props.searchTerm || "").trim();
+  }
+
+  get matchFn() {
+    const match =
+      this.props.searchMatch ??
+      ((node, term) => {
+        const string = JSON.stringify(
+          Object.values(node.data as { [k: string]: unknown })
+        );
+        return string.toLocaleLowerCase().includes(term.toLocaleLowerCase());
+      });
+    return (node: NodeApi<T>) => match(node, this.searchTerm);
+  }
+
+  accessChildren(data: T) {
+    const get = this.props.childrenAccessor || "children";
+    return utils.access<readonly T[] | undefined>(data, get) ?? null;
+  }
+
+  accessId(data: T) {
+    const get = this.props.idAccessor || "id";
+    const id = utils.access<string>(data, get);
+    if (!id)
+      throw new Error(
+        "Data must contain an 'id' property or props.idAccessor must return a string"
+      );
+    return id;
+  }
+
+  /* Node Access */
+
+  get firstNode() {
+    return this.visibleNodes[0] ?? null;
+  }
+
+  get lastNode() {
+    return this.visibleNodes[this.visibleNodes.length - 1] ?? null;
+  }
+
+  get focusedNode() {
+    return this.get(this.state.nodes.focus.id) ?? null;
+  }
+
+  get mostRecentNode() {
+    return this.get(this.state.nodes.selection.mostRecent) ?? null;
+  }
+
+  get nextNode() {
+    const index = this.indexOf(this.focusedNode);
+    if (index === null) return null;
+    else return this.at(index + 1);
+  }
+
+  get prevNode() {
+    const index = this.indexOf(this.focusedNode);
+    if (index === null) return null;
+    else return this.at(index - 1);
+  }
+
+  get(id: string | null): NodeApi<T> | null {
+    if (!id) return null;
+    if (id in this.idToIndex)
+      return this.visibleNodes[this.idToIndex[id]] || null;
+    else return null;
+  }
+
+  at(index: number): NodeApi<T> | null {
+    return this.visibleNodes[index] || null;
+  }
+
+  nodesBetween(startId: string | null, endId: string | null) {
+    if (startId === null || endId === null) return [];
+    const index1 = this.indexOf(startId) ?? 0;
+    const index2 = this.indexOf(endId);
+    if (index2 === null) return [];
+    const start = Math.min(index1, index2);
+    const end = Math.max(index1, index2);
+    return this.visibleNodes.slice(start, end + 1);
+  }
+
+  indexOf(id: string | null | IdObj) {
+    const key = utils.identifyNull(id);
+    if (!key) return null;
+    return this.idToIndex[key];
+  }
+
+  /* Data Operations */
+
+  get editingId() {
+    return this.state.nodes.edit.id;
+  }
+
+  createInternal() {
+    return this.create({ type: "internal" });
+  }
+
+  createLeaf() {
+    return this.create({ type: "leaf" });
+  }
+
+  async create(
+    opts: {
+      type?: "internal" | "leaf";
+      parentId?: null | string;
+      index?: null | number;
+    } = {}
+  ) {
+    const parentId =
+      opts.parentId === undefined
+        ? utils.getInsertParentId(this)
+        : opts.parentId;
+    const index = opts.index ?? utils.getInsertIndex(this);
+    const type = opts.type ?? "leaf";
+    const data = await safeRun(this.props.onCreate, {
+      type,
+      parentId,
+      index,
+      parentNode: this.get(parentId),
+    });
+    if (data) {
+      this.focus(data);
+      setTimeout(() => {
+        this.edit(data).then(() => {
+          this.select(data);
+          this.activate(data);
+        });
+      });
+    }
+  }
+
+  async delete(node: string | IdObj | null | string[] | IdObj[]) {
+    if (!node) return;
+    const idents = Array.isArray(node) ? node : [node];
+    const ids = idents.map(identify);
+    const nodes = ids.map((id) => this.get(id)!).filter((n) => !!n);
+    await safeRun(this.props.onDelete, { nodes, ids });
+  }
+
+  edit(node: string | IdObj): Promise<EditResult> {
+    const id = identify(node);
+    this.resolveEdit({ cancelled: true });
+    this.scrollTo(id);
+    this.dispatch(edit(id));
+    return new Promise((resolve) => {
+      TreeApi.editPromise = resolve;
+    });
+  }
+
+  async submit(identity: Identity, value: string) {
+    if (!identity) return;
+    const id = identify(identity);
+    await safeRun(this.props.onRename, {
+      id,
+      name: value,
+      node: this.get(id)!,
+    });
+    this.dispatch(edit(null));
+    this.resolveEdit({ cancelled: false, value });
+    setTimeout(() => this.onFocus()); // Return focus to element;
+  }
+
+  reset() {
+    this.dispatch(edit(null));
+    this.resolveEdit({ cancelled: true });
+    setTimeout(() => this.onFocus()); // Return focus to element;
+  }
+
+  activate(id: string | IdObj | null) {
+    const node = this.get(identifyNull(id));
+    if (!node) return;
+    safeRun(this.props.onActivate, node);
+  }
+
+  private resolveEdit(value: EditResult) {
+    const resolve = TreeApi.editPromise;
+    if (resolve) resolve(value);
+    TreeApi.editPromise = null;
+  }
+
+  /* Focus and Selection */
+
+  get selectedIds() {
+    return this.state.nodes.selection.ids;
+  }
+
+  get selectedNodes() {
+    let nodes = [];
+    for (let id of Array.from(this.selectedIds)) {
+      const node = this.get(id);
+      if (node) nodes.push(node);
+    }
+    return nodes;
+  }
+
+  focus(node: Identity, opts: { scroll?: boolean } = {}) {
+    if (!node) return;
+    /* Focus is responsible for scrolling, while selection is
+     * responsible for focus. If selectionFollowsFocus, then
+     * just select it. */
+    if (this.props.selectionFollowsFocus) {
+      this.select(node);
+    } else {
+      this.dispatch(focus(identify(node)));
+      if (opts.scroll !== false) this.scrollTo(node);
+      if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
+    }
+  }
+
+  pageUp() {
+    const start = this.visibleStartIndex;
+    const stop = this.visibleStopIndex;
+    const page = stop - start;
+    let index = this.focusedNode?.rowIndex ?? 0;
+    if (index > start) {
+      index = start;
+    } else {
+      index = Math.max(start - page, 0);
+    }
+    this.focus(this.at(index));
+  }
+
+  pageDown() {
+    const start = this.visibleStartIndex;
+    const stop = this.visibleStopIndex;
+    const page = stop - start;
+    let index = this.focusedNode?.rowIndex ?? 0;
+    if (index < stop) {
+      index = stop;
+    } else {
+      index = Math.min(index + page, this.visibleNodes.length - 1);
+    }
+    this.focus(this.at(index));
+  }
+
+  select(node: Identity, opts: { align?: Align; focus?: boolean } = {}) {
+    if (!node) return;
+    const changeFocus = opts.focus !== false;
+    const id = identify(node);
+    if (changeFocus) this.dispatch(focus(id));
+    this.dispatch(selection.only(id));
+    this.dispatch(selection.anchor(id));
+    this.dispatch(selection.mostRecent(id));
+    this.scrollTo(id, opts.align);
+    if (this.focusedNode && changeFocus) {
+      safeRun(this.props.onFocus, this.focusedNode);
+    }
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
+  deselect(node: Identity) {
+    if (!node) return;
+    const id = identify(node);
+    this.dispatch(selection.remove(id));
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
+  selectMulti(identity: Identity) {
+    const node = this.get(identifyNull(identity));
+    if (!node) return;
+    this.dispatch(focus(node.id));
+    this.dispatch(selection.add(node.id));
+    this.dispatch(selection.anchor(node.id));
+    this.dispatch(selection.mostRecent(node.id));
+    this.scrollTo(node);
+    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
+  selectContiguous(identity: Identity) {
+    if (!identity) return;
+    const id = identify(identity);
+    const { anchor, mostRecent } = this.state.nodes.selection;
+    this.dispatch(focus(id));
+    this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
+    this.dispatch(selection.add(this.nodesBetween(anchor, identifyNull(id))));
+    this.dispatch(selection.mostRecent(id));
+    this.scrollTo(id);
+    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
+  deselectAll() {
+    this.setSelection({ ids: [], anchor: null, mostRecent: null });
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
+  selectAll() {
+    this.setSelection({
+      ids: Object.keys(this.idToIndex),
+      anchor: this.firstNode,
+      mostRecent: this.lastNode,
+    });
+    this.dispatch(focus(this.lastNode?.id));
+    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
+  setSelection(args: {
+    ids: (IdObj | string)[] | null;
+    anchor: IdObj | string | null;
+    mostRecent: IdObj | string | null;
+  }) {
+    const ids = new Set(args.ids?.map(identify));
+    const anchor = identifyNull(args.anchor);
+    const mostRecent = identifyNull(args.mostRecent);
+    this.dispatch(selection.set({ ids, anchor, mostRecent }));
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
+  /* Drag and Drop */
+
+  get cursorParentId() {
+    const { cursor } = this.state.dnd;
+    switch (cursor.type) {
+      case "highlight":
+        return cursor.id;
+      default:
+        return null;
+    }
+  }
+
+  get cursorOverFolder() {
+    return this.state.dnd.cursor.type === "highlight";
+  }
+
+  get dragNodes() {
+    return this.state.dnd.dragIds
+      .map((id) => this.get(id))
+      .filter((n) => !!n) as NodeApi<T>[];
+  }
+
+  get dragNode() {
+    return this.get(this.state.nodes.drag.id);
+  }
+
+  get dragDestinationParent() {
+    return this.get(this.state.nodes.drag.destinationParentId);
+  }
+
+  get dragDestinationIndex() {
+    return this.state.nodes.drag.destinationIndex;
+  }
+
+  canDrop() {
+    if (this.isFiltered) return false;
+    const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
+    const dragNodes = this.dragNodes;
+    const isDisabled = this.props.disableDrop;
+
+    for (const drag of dragNodes) {
+      if (!drag) return false;
+      if (!parentNode) return false;
+      if (drag.isInternal && utils.isDescendant(parentNode, drag)) return false;
+    }
+
+    // Allow the user to insert their own logic
+    if (typeof isDisabled == "function") {
+      return !isDisabled({
+        parentNode,
+        dragNodes: this.dragNodes,
+        index: this.state.dnd.index || 0,
+      });
+    } else if (typeof isDisabled == "string") {
+      // @ts-ignore
+      return !parentNode.data[isDisabled];
+    } else if (typeof isDisabled === "boolean") {
+      return !isDisabled;
+    } else {
+      return true;
+    }
+  }
+
+  hideCursor() {
+    this.dispatch(dnd.cursor({ type: "none" }));
+  }
+
+  showCursor(cursor: Cursor) {
+    this.dispatch(dnd.cursor(cursor));
+  }
+
+  /* Visibility */
+
+  open(identity: Identity) {
+    const id = identifyNull(identity);
+    if (!id) return;
+    if (this.isOpen(id)) return;
+    this.dispatch(visibility.open(id, this.isFiltered));
+    safeRun(this.props.onToggle, id);
+  }
+
+  close(identity: Identity) {
+    const id = identifyNull(identity);
+    if (!id) return;
+    if (!this.isOpen(id)) return;
+    this.dispatch(visibility.close(id, this.isFiltered));
+    safeRun(this.props.onToggle, id);
+  }
+
+  toggle(identity: Identity) {
+    const id = identifyNull(identity);
+    if (!id) return;
+    return this.isOpen(id) ? this.close(id) : this.open(id);
+  }
+
+  openParents(identity: Identity) {
+    const id = identifyNull(identity);
+    if (!id) return;
+    const node = utils.dfs(this.root, id);
+    let parent = node?.parent;
+
+    while (parent) {
+      this.open(parent.id);
+      parent = parent.parent;
+    }
+  }
+
+  openSiblings(node: NodeApi<T>) {
+    const parent = node.parent;
+    if (!parent) {
+      this.toggle(node.id);
+    } else if (parent.children) {
+      const isOpen = node.isOpen;
+      for (let sibling of parent.children) {
+        if (sibling.isInternal) {
+          isOpen ? this.close(sibling.id) : this.open(sibling.id);
+        }
+      }
+      this.scrollTo(this.focusedNode);
+    }
+  }
+
+  openAll() {
+    utils.walk(this.root, (node) => {
+      if (node.isInternal) node.open();
+    });
+  }
+
+  closeAll() {
+    utils.walk(this.root, (node) => {
+      if (node.isInternal) node.close();
+    });
+  }
+
+  /* Scrolling */
+
+  scrollTo(identity: Identity, align: Align = "smart") {
+    if (!identity) return;
+    const id = identify(identity);
+    this.openParents(id);
+    return utils
+      .waitFor(() => id in this.idToIndex)
+      .then(() => {
+        const index = this.idToIndex[id];
+        if (index === undefined) return;
+        this.list.current?.scrollToItem(index, align);
+      })
+      .catch(() => {
+        // Id: ${id} never appeared in the list.
+      });
+  }
+
+  /* State Checks */
+
+  get isEditing() {
+    return this.state.nodes.edit.id !== null;
+  }
+
+  get isFiltered() {
+    return !!this.props.searchTerm?.trim();
+  }
+
+  get hasFocus() {
+    return this.state.nodes.focus.treeFocused;
+  }
+
+  get hasNoSelection() {
+    return this.state.nodes.selection.ids.size === 0;
+  }
+
+  get hasOneSelection() {
+    return this.state.nodes.selection.ids.size === 1;
+  }
+
+  get hasMultipleSelections() {
+    return this.state.nodes.selection.ids.size > 1;
+  }
+
+  isSelected(id?: string) {
+    if (!id) return false;
+    return this.state.nodes.selection.ids.has(id);
+  }
+
+  isOpen(id?: string) {
+    if (!id) return false;
+    if (id === ROOT_ID) return true;
+    const def = this.props.openByDefault ?? true;
+    if (this.isFiltered) {
+      return this.state.nodes.open.filtered[id] ?? true; // Filtered folders are always opened by default
+    } else {
+      return this.state.nodes.open.unfiltered[id] ?? def;
+    }
+  }
+
+  isEditable(data: T) {
+    const check = this.props.disableEdit || (() => false);
+    return !utils.access(data, check);
+  }
+
+  isDraggable(data: T) {
+    const check = this.props.disableDrag || (() => false);
+    return !utils.access(data, check);
+  }
+
+  isDragging(node: string | IdObj | null) {
+    const id = identifyNull(node);
+    if (!id) return false;
+    return this.state.nodes.drag.id === id;
+  }
+
+  isFocused(id: string) {
+    return this.hasFocus && this.state.nodes.focus.id === id;
+  }
+
+  isMatch(node: NodeApi<T>) {
+    return this.matchFn(node);
+  }
+
+  willReceiveDrop(node: string | IdObj | null) {
+    const id = identifyNull(node);
+    if (!id) return false;
+    const { destinationParentId, destinationIndex } = this.state.nodes.drag;
+    return id === destinationParentId && destinationIndex === null;
+  }
+
+  /* Tree Event Handlers */
+
+  onFocus() {
+    const node = this.focusedNode || this.firstNode;
+    if (node) this.dispatch(focus(node.id));
+  }
+
+  onBlur() {
+    this.dispatch(treeBlur());
+  }
+
+  onItemsRendered(args: ListOnItemsRenderedProps) {
+    this.visibleStartIndex = args.visibleStartIndex;
+    this.visibleStopIndex = args.visibleStopIndex;
+  }
+
+  /* Get Renderers */
+
+  get renderContainer() {
+    return this.props.renderContainer || DefaultContainer;
+  }
+
+  get renderRow() {
+    return this.props.renderRow || DefaultRow;
+  }
+
+  get renderNode() {
+    return this.props.children || DefaultNode;
+  }
+
+  get renderDragPreview() {
+    return this.props.renderDragPreview || DefaultDragPreview;
+  }
+
+  get renderCursor() {
+    return this.props.renderCursor || DefaultCursor;
+  }
+}
diff --git a/packages/ui/src/components/tree/state/dnd-slice.ts b/packages/ui/src/components/tree/state/dnd-slice.ts
index afe0fb71..f2583718 100644
--- a/packages/ui/src/components/tree/state/dnd-slice.ts
+++ b/packages/ui/src/components/tree/state/dnd-slice.ts
@@ -1,47 +1,47 @@
-import { Cursor } from "../dnd/compute-drop";
-import { ActionTypes } from "../types/utils";
-import { initialState } from "./initial";
-
-/* Types */
-export type DndState = {
-  dragId: null | string;
-  cursor: Cursor;
-  dragIds: string[];
-  parentId: null | string;
-  index: number | null;
-};
-
-/* Actions */
-export const actions = {
-  cursor(cursor: Cursor) {
-    return { type: "DND_CURSOR" as const, cursor };
-  },
-  dragStart(id: string, dragIds: string[]) {
-    return { type: "DND_DRAG_START" as const, id, dragIds };
-  },
-  dragEnd() {
-    return { type: "DND_DRAG_END" as const };
-  },
-  hovering(parentId: string | null, index: number | null) {
-    return { type: "DND_HOVERING" as const, parentId, index };
-  },
-};
-
-/* Reducer */
-export function reducer(
-  state: DndState = initialState()["dnd"],
-  action: ActionTypes<typeof actions>
-): DndState {
-  switch (action.type) {
-    case "DND_CURSOR":
-      return { ...state, cursor: action.cursor };
-    case "DND_DRAG_START":
-      return { ...state, dragId: action.id, dragIds: action.dragIds };
-    case "DND_DRAG_END":
-      return initialState()["dnd"];
-    case "DND_HOVERING":
-      return { ...state, parentId: action.parentId, index: action.index };
-    default:
-      return state;
-  }
-}
+import { Cursor } from "../dnd/compute-drop";
+import { ActionTypes } from "../types/utils";
+import { initialState } from "./initial";
+
+/* Types */
+export type DndState = {
+  dragId: null | string;
+  cursor: Cursor;
+  dragIds: string[];
+  parentId: null | string;
+  index: number | null;
+};
+
+/* Actions */
+export const actions = {
+  cursor(cursor: Cursor) {
+    return { type: "DND_CURSOR" as const, cursor };
+  },
+  dragStart(id: string, dragIds: string[]) {
+    return { type: "DND_DRAG_START" as const, id, dragIds };
+  },
+  dragEnd() {
+    return { type: "DND_DRAG_END" as const };
+  },
+  hovering(parentId: string | null, index: number | null) {
+    return { type: "DND_HOVERING" as const, parentId, index };
+  },
+};
+
+/* Reducer */
+export function reducer(
+  state: DndState = initialState()["dnd"],
+  action: ActionTypes<typeof actions>
+): DndState {
+  switch (action.type) {
+    case "DND_CURSOR":
+      return { ...state, cursor: action.cursor };
+    case "DND_DRAG_START":
+      return { ...state, dragId: action.id, dragIds: action.dragIds };
+    case "DND_DRAG_END":
+      return initialState()["dnd"];
+    case "DND_HOVERING":
+      return { ...state, parentId: action.parentId, index: action.index };
+    default:
+      return state;
+  }
+}
diff --git a/packages/ui/src/components/tree/state/drag-slice.ts b/packages/ui/src/components/tree/state/drag-slice.ts
index 517adc6e..e835ffb6 100644
--- a/packages/ui/src/components/tree/state/drag-slice.ts
+++ b/packages/ui/src/components/tree/state/drag-slice.ts
@@ -1,47 +1,47 @@
-import { ActionTypes } from "../types/utils";
-import { actions as dnd } from "./dnd-slice";
-import { initialState } from "./initial";
-
-/* Types */
-
-export type DragSlice = {
-  id: string | null;
-  selectedIds: string[];
-  destinationParentId: string | null;
-  destinationIndex: number | null;
-};
-
-/* Reducer */
-
-export function reducer(
-  state: DragSlice = initialState().nodes.drag,
-  action: ActionTypes<typeof dnd>
-): DragSlice {
-  switch (action.type) {
-    case "DND_DRAG_START":
-      return { ...state, id: action.id, selectedIds: action.dragIds };
-    case "DND_DRAG_END":
-      return {
-        ...state,
-        id: null,
-        destinationParentId: null,
-        destinationIndex: null,
-        selectedIds: [],
-      };
-    case "DND_HOVERING":
-      if (
-        action.parentId !== state.destinationParentId ||
-        action.index != state.destinationIndex
-      ) {
-        return {
-          ...state,
-          destinationParentId: action.parentId,
-          destinationIndex: action.index,
-        };
-      } else {
-        return state;
-      }
-    default:
-      return state;
-  }
-}
+import { ActionTypes } from "../types/utils";
+import { actions as dnd } from "./dnd-slice";
+import { initialState } from "./initial";
+
+/* Types */
+
+export type DragSlice = {
+  id: string | null;
+  selectedIds: string[];
+  destinationParentId: string | null;
+  destinationIndex: number | null;
+};
+
+/* Reducer */
+
+export function reducer(
+  state: DragSlice = initialState().nodes.drag,
+  action: ActionTypes<typeof dnd>
+): DragSlice {
+  switch (action.type) {
+    case "DND_DRAG_START":
+      return { ...state, id: action.id, selectedIds: action.dragIds };
+    case "DND_DRAG_END":
+      return {
+        ...state,
+        id: null,
+        destinationParentId: null,
+        destinationIndex: null,
+        selectedIds: [],
+      };
+    case "DND_HOVERING":
+      if (
+        action.parentId !== state.destinationParentId ||
+        action.index != state.destinationIndex
+      ) {
+        return {
+          ...state,
+          destinationParentId: action.parentId,
+          destinationIndex: action.index,
+        };
+      } else {
+        return state;
+      }
+    default:
+      return state;
+  }
+}
diff --git a/packages/ui/src/components/tree/state/edit-slice.ts b/packages/ui/src/components/tree/state/edit-slice.ts
index 9820de29..dbec72d5 100644
--- a/packages/ui/src/components/tree/state/edit-slice.ts
+++ b/packages/ui/src/components/tree/state/edit-slice.ts
@@ -1,19 +1,19 @@
-/* Types */
-export type EditState = { id: string | null };
-
-/* Actions */
-export function edit(id: string | null) {
-  return { type: "EDIT" as const, id };
-}
-
-/* Reducer */
-export function reducer(
-  state: EditState = { id: null },
-  action: ReturnType<typeof edit>
-) {
-  if (action.type === "EDIT") {
-    return { ...state, id: action.id };
-  } else {
-    return state;
-  }
-}
+/* Types */
+export type EditState = { id: string | null };
+
+/* Actions */
+export function edit(id: string | null) {
+  return { type: "EDIT" as const, id };
+}
+
+/* Reducer */
+export function reducer(
+  state: EditState = { id: null },
+  action: ReturnType<typeof edit>
+) {
+  if (action.type === "EDIT") {
+    return { ...state, id: action.id };
+  } else {
+    return state;
+  }
+}
diff --git a/packages/ui/src/components/tree/state/focus-slice.ts b/packages/ui/src/components/tree/state/focus-slice.ts
index de513035..11a19c9f 100644
--- a/packages/ui/src/components/tree/state/focus-slice.ts
+++ b/packages/ui/src/components/tree/state/focus-slice.ts
@@ -1,28 +1,28 @@
-/* Types */
-
-export type FocusState = { id: string | null; treeFocused: boolean };
-
-/* Actions */
-
-export function focus(id: string | null) {
-  return { type: "FOCUS" as const, id };
-}
-
-export function treeBlur() {
-  return { type: "TREE_BLUR" } as const;
-}
-
-/* Reducer */
-
-export function reducer(
-  state: FocusState = { id: null, treeFocused: false },
-  action: ReturnType<typeof focus> | ReturnType<typeof treeBlur>
-) {
-  if (action.type === "FOCUS") {
-    return { ...state, id: action.id, treeFocused: true };
-  } else if (action.type === "TREE_BLUR") {
-    return { ...state, treeFocused: false };
-  } else {
-    return state;
-  }
-}
+/* Types */
+
+export type FocusState = { id: string | null; treeFocused: boolean };
+
+/* Actions */
+
+export function focus(id: string | null) {
+  return { type: "FOCUS" as const, id };
+}
+
+export function treeBlur() {
+  return { type: "TREE_BLUR" } as const;
+}
+
+/* Reducer */
+
+export function reducer(
+  state: FocusState = { id: null, treeFocused: false },
+  action: ReturnType<typeof focus> | ReturnType<typeof treeBlur>
+) {
+  if (action.type === "FOCUS") {
+    return { ...state, id: action.id, treeFocused: true };
+  } else if (action.type === "TREE_BLUR") {
+    return { ...state, treeFocused: false };
+  } else {
+    return state;
+  }
+}
diff --git a/packages/ui/src/components/tree/state/initial.ts b/packages/ui/src/components/tree/state/initial.ts
index 7a2e0276..9a17d1da 100644
--- a/packages/ui/src/components/tree/state/initial.ts
+++ b/packages/ui/src/components/tree/state/initial.ts
@@ -1,25 +1,25 @@
-import { TreeProps } from "../types/tree-props";
-import { RootState } from "./root-reducer";
-
-export const initialState = (props?: TreeProps<any>): RootState => ({
-  nodes: {
-    // Changes together
-    open: { filtered: {}, unfiltered: props?.initialOpenState ?? {} },
-    focus: { id: null, treeFocused: false },
-    edit: { id: null },
-    drag: {
-      id: null,
-      selectedIds: [],
-      destinationParentId: null,
-      destinationIndex: null,
-    },
-    selection: { ids: new Set(), anchor: null, mostRecent: null },
-  },
-  dnd: {
-    cursor: { type: "none" },
-    dragId: null,
-    dragIds: [],
-    parentId: null,
-    index: -1,
-  },
-});
+import { TreeProps } from "../types/tree-props";
+import { RootState } from "./root-reducer";
+
+export const initialState = (props?: TreeProps<any>): RootState => ({
+  nodes: {
+    // Changes together
+    open: { filtered: {}, unfiltered: props?.initialOpenState ?? {} },
+    focus: { id: null, treeFocused: false },
+    edit: { id: null },
+    drag: {
+      id: null,
+      selectedIds: [],
+      destinationParentId: null,
+      destinationIndex: null,
+    },
+    selection: { ids: new Set(), anchor: null, mostRecent: null },
+  },
+  dnd: {
+    cursor: { type: "none" },
+    dragId: null,
+    dragIds: [],
+    parentId: null,
+    index: -1,
+  },
+});
diff --git a/packages/ui/src/components/tree/state/open-slice.ts b/packages/ui/src/components/tree/state/open-slice.ts
index def75e56..dc98a65f 100644
--- a/packages/ui/src/components/tree/state/open-slice.ts
+++ b/packages/ui/src/components/tree/state/open-slice.ts
@@ -1,53 +1,53 @@
-import { ActionTypes } from "../types/utils";
-
-/* Types */
-export type OpenMap = { [id: string]: boolean };
-export type OpenSlice = { unfiltered: OpenMap; filtered: OpenMap };
-
-/* Actions */
-export const actions = {
-  open(id: string, filtered: boolean) {
-    return { type: "VISIBILITY_OPEN" as const, id, filtered };
-  },
-  close(id: string, filtered: boolean) {
-    return { type: "VISIBILITY_CLOSE" as const, id, filtered };
-  },
-  toggle(id: string, filtered: boolean) {
-    return { type: "VISIBILITY_TOGGLE" as const, id, filtered };
-  },
-  clear(filtered: boolean) {
-    return { type: "VISIBILITY_CLEAR" as const, filtered };
-  },
-};
-
-/* Reducer */
-
-function openMapReducer(
-  state: OpenMap = {},
-  action: ActionTypes<typeof actions>
-) {
-  if (action.type === "VISIBILITY_OPEN") {
-    return { ...state, [action.id]: true };
-  } else if (action.type === "VISIBILITY_CLOSE") {
-    return { ...state, [action.id]: false };
-  } else if (action.type === "VISIBILITY_TOGGLE") {
-    const prev = state[action.id];
-    return { ...state, [action.id]: !prev };
-  } else if (action.type === "VISIBILITY_CLEAR") {
-    return {};
-  } else {
-    return state;
-  }
-}
-
-export function reducer(
-  state: OpenSlice = { filtered: {}, unfiltered: {} },
-  action: ActionTypes<typeof actions>
-): OpenSlice {
-  if (!action.type.startsWith("VISIBILITY")) return state;
-  if (action.filtered) {
-    return { ...state, filtered: openMapReducer(state.filtered, action) };
-  } else {
-    return { ...state, unfiltered: openMapReducer(state.unfiltered, action) };
-  }
-}
+import { ActionTypes } from "../types/utils";
+
+/* Types */
+export type OpenMap = { [id: string]: boolean };
+export type OpenSlice = { unfiltered: OpenMap; filtered: OpenMap };
+
+/* Actions */
+export const actions = {
+  open(id: string, filtered: boolean) {
+    return { type: "VISIBILITY_OPEN" as const, id, filtered };
+  },
+  close(id: string, filtered: boolean) {
+    return { type: "VISIBILITY_CLOSE" as const, id, filtered };
+  },
+  toggle(id: string, filtered: boolean) {
+    return { type: "VISIBILITY_TOGGLE" as const, id, filtered };
+  },
+  clear(filtered: boolean) {
+    return { type: "VISIBILITY_CLEAR" as const, filtered };
+  },
+};
+
+/* Reducer */
+
+function openMapReducer(
+  state: OpenMap = {},
+  action: ActionTypes<typeof actions>
+) {
+  if (action.type === "VISIBILITY_OPEN") {
+    return { ...state, [action.id]: true };
+  } else if (action.type === "VISIBILITY_CLOSE") {
+    return { ...state, [action.id]: false };
+  } else if (action.type === "VISIBILITY_TOGGLE") {
+    const prev = state[action.id];
+    return { ...state, [action.id]: !prev };
+  } else if (action.type === "VISIBILITY_CLEAR") {
+    return {};
+  } else {
+    return state;
+  }
+}
+
+export function reducer(
+  state: OpenSlice = { filtered: {}, unfiltered: {} },
+  action: ActionTypes<typeof actions>
+): OpenSlice {
+  if (!action.type.startsWith("VISIBILITY")) return state;
+  if (action.filtered) {
+    return { ...state, filtered: openMapReducer(state.filtered, action) };
+  } else {
+    return { ...state, unfiltered: openMapReducer(state.unfiltered, action) };
+  }
+}
diff --git a/packages/ui/src/components/tree/state/root-reducer.ts b/packages/ui/src/components/tree/state/root-reducer.ts
index 637262cd..0ea06328 100644
--- a/packages/ui/src/components/tree/state/root-reducer.ts
+++ b/packages/ui/src/components/tree/state/root-reducer.ts
@@ -1,21 +1,21 @@
-import { ActionFromReducer, combineReducers } from "redux";
-import { reducer as focus } from "./focus-slice";
-import { reducer as edit } from "./edit-slice";
-import { reducer as dnd } from "./dnd-slice";
-import { reducer as selection } from "./selection-slice";
-import { reducer as open } from "./open-slice";
-import { reducer as drag } from "./drag-slice";
-
-export const rootReducer = combineReducers({
-  nodes: combineReducers({
-    focus,
-    edit,
-    open,
-    selection,
-    drag,
-  }),
-  dnd,
-});
-
-export type RootState = ReturnType<typeof rootReducer>;
-export type Actions = ActionFromReducer<typeof rootReducer>;
+import { ActionFromReducer, combineReducers } from "redux";
+import { reducer as focus } from "./focus-slice";
+import { reducer as edit } from "./edit-slice";
+import { reducer as dnd } from "./dnd-slice";
+import { reducer as selection } from "./selection-slice";
+import { reducer as open } from "./open-slice";
+import { reducer as drag } from "./drag-slice";
+
+export const rootReducer = combineReducers({
+  nodes: combineReducers({
+    focus,
+    edit,
+    open,
+    selection,
+    drag,
+  }),
+  dnd,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type Actions = ActionFromReducer<typeof rootReducer>;
diff --git a/packages/ui/src/components/tree/state/selection-slice.ts b/packages/ui/src/components/tree/state/selection-slice.ts
index 62e2493b..8b25a772 100644
--- a/packages/ui/src/components/tree/state/selection-slice.ts
+++ b/packages/ui/src/components/tree/state/selection-slice.ts
@@ -1,84 +1,84 @@
-import { ActionTypes, IdObj } from "../types/utils";
-import { identify } from "../utils";
-import { initialState } from "./initial";
-
-/* Types */
-export type SelectionState = {
-  ids: Set<string>;
-  anchor: string | null;
-  mostRecent: string | null;
-};
-
-/* Actions */
-export const actions = {
-  clear: () => ({ type: "SELECTION_CLEAR" as const }),
-
-  only: (id: string | IdObj) => ({
-    type: "SELECTION_ONLY" as const,
-    id: identify(id),
-  }),
-
-  add: (id: string | string[] | IdObj | IdObj[]) => ({
-    type: "SELECTION_ADD" as const,
-    ids: (Array.isArray(id) ? id : [id]).map(identify),
-  }),
-
-  remove: (id: string | string[] | IdObj | IdObj[]) => ({
-    type: "SELECTION_REMOVE" as const,
-    ids: (Array.isArray(id) ? id : [id]).map(identify),
-  }),
-
-  set: (args: {
-    ids: Set<string>;
-    anchor: string | null;
-    mostRecent: string | null;
-  }) => ({
-    type: "SELECTION_SET" as const,
-    ...args,
-  }),
-
-  mostRecent: (id: string | null | IdObj) => ({
-    type: "SELECTION_MOST_RECENT" as const,
-    id: id === null ? null : identify(id),
-  }),
-
-  anchor: (id: string | null | IdObj) => ({
-    type: "SELECTION_ANCHOR" as const,
-    id: id === null ? null : identify(id),
-  }),
-};
-
-/* Reducer */
-export function reducer(
-  state: SelectionState = initialState()["nodes"]["selection"],
-  action: ActionTypes<typeof actions>
-): SelectionState {
-  const ids = state.ids;
-  switch (action.type) {
-    case "SELECTION_CLEAR":
-      return { ...state, ids: new Set() };
-    case "SELECTION_ONLY":
-      return { ...state, ids: new Set([action.id]) };
-    case "SELECTION_ADD":
-      if (action.ids.length === 0) return state;
-      action.ids.forEach((id) => ids.add(id));
-      return { ...state, ids: new Set(ids) };
-    case "SELECTION_REMOVE":
-      if (action.ids.length === 0) return state;
-      action.ids.forEach((id) => ids.delete(id));
-      return { ...state, ids: new Set(ids) };
-    case "SELECTION_SET":
-      return {
-        ...state,
-        ids: action.ids,
-        mostRecent: action.mostRecent,
-        anchor: action.anchor,
-      };
-    case "SELECTION_MOST_RECENT":
-      return { ...state, mostRecent: action.id };
-    case "SELECTION_ANCHOR":
-      return { ...state, anchor: action.id };
-    default:
-      return state;
-  }
-}
+import { ActionTypes, IdObj } from "../types/utils";
+import { identify } from "../utils";
+import { initialState } from "./initial";
+
+/* Types */
+export type SelectionState = {
+  ids: Set<string>;
+  anchor: string | null;
+  mostRecent: string | null;
+};
+
+/* Actions */
+export const actions = {
+  clear: () => ({ type: "SELECTION_CLEAR" as const }),
+
+  only: (id: string | IdObj) => ({
+    type: "SELECTION_ONLY" as const,
+    id: identify(id),
+  }),
+
+  add: (id: string | string[] | IdObj | IdObj[]) => ({
+    type: "SELECTION_ADD" as const,
+    ids: (Array.isArray(id) ? id : [id]).map(identify),
+  }),
+
+  remove: (id: string | string[] | IdObj | IdObj[]) => ({
+    type: "SELECTION_REMOVE" as const,
+    ids: (Array.isArray(id) ? id : [id]).map(identify),
+  }),
+
+  set: (args: {
+    ids: Set<string>;
+    anchor: string | null;
+    mostRecent: string | null;
+  }) => ({
+    type: "SELECTION_SET" as const,
+    ...args,
+  }),
+
+  mostRecent: (id: string | null | IdObj) => ({
+    type: "SELECTION_MOST_RECENT" as const,
+    id: id === null ? null : identify(id),
+  }),
+
+  anchor: (id: string | null | IdObj) => ({
+    type: "SELECTION_ANCHOR" as const,
+    id: id === null ? null : identify(id),
+  }),
+};
+
+/* Reducer */
+export function reducer(
+  state: SelectionState = initialState()["nodes"]["selection"],
+  action: ActionTypes<typeof actions>
+): SelectionState {
+  const ids = state.ids;
+  switch (action.type) {
+    case "SELECTION_CLEAR":
+      return { ...state, ids: new Set() };
+    case "SELECTION_ONLY":
+      return { ...state, ids: new Set([action.id]) };
+    case "SELECTION_ADD":
+      if (action.ids.length === 0) return state;
+      action.ids.forEach((id) => ids.add(id));
+      return { ...state, ids: new Set(ids) };
+    case "SELECTION_REMOVE":
+      if (action.ids.length === 0) return state;
+      action.ids.forEach((id) => ids.delete(id));
+      return { ...state, ids: new Set(ids) };
+    case "SELECTION_SET":
+      return {
+        ...state,
+        ids: action.ids,
+        mostRecent: action.mostRecent,
+        anchor: action.anchor,
+      };
+    case "SELECTION_MOST_RECENT":
+      return { ...state, mostRecent: action.id };
+    case "SELECTION_ANCHOR":
+      return { ...state, anchor: action.id };
+    default:
+      return state;
+  }
+}
diff --git a/packages/ui/src/components/tree/types/dnd.ts b/packages/ui/src/components/tree/types/dnd.ts
index fef31f45..6a455b7f 100644
--- a/packages/ui/src/components/tree/types/dnd.ts
+++ b/packages/ui/src/components/tree/types/dnd.ts
@@ -1,9 +1,9 @@
-export type CursorLocation = {
-  index: number | null;
-  level: number | null;
-  parentId: string | null;
-};
-
-export type DragItem = {
-  id: string;
-};
+export type CursorLocation = {
+  index: number | null;
+  level: number | null;
+  parentId: string | null;
+};
+
+export type DragItem = {
+  id: string;
+};
diff --git a/packages/ui/src/components/tree/types/handlers.ts b/packages/ui/src/components/tree/types/handlers.ts
index 2e3636fb..ba7135cb 100644
--- a/packages/ui/src/components/tree/types/handlers.ts
+++ b/packages/ui/src/components/tree/types/handlers.ts
@@ -1,32 +1,32 @@
-import { NodeApi } from "../interfaces/node-api";
-import { IdObj } from "./utils";
-
-export type CreateHandler<T> = (args: {
-  parentId: string | null;
-  parentNode: NodeApi<T> | null;
-  index: number;
-  type: "internal" | "leaf";
-}) => (IdObj | null) | Promise<IdObj | null>;
-
-export type MoveHandler<T> = (args: {
-  dragIds: string[];
-  dragNodes: NodeApi<T>[];
-  parentId: string | null;
-  parentNode: NodeApi<T> | null;
-  index: number;
-}) => void | Promise<void>;
-
-export type RenameHandler<T> = (args: {
-  id: string;
-  name: string;
-  node: NodeApi<T>;
-}) => void | Promise<void>;
-
-export type DeleteHandler<T> = (args: {
-  ids: string[];
-  nodes: NodeApi<T>[];
-}) => void | Promise<void>;
-
-export type EditResult =
-  | { cancelled: true }
-  | { cancelled: false; value: string };
+import { NodeApi } from "../interfaces/node-api";
+import { IdObj } from "./utils";
+
+export type CreateHandler<T> = (args: {
+  parentId: string | null;
+  parentNode: NodeApi<T> | null;
+  index: number;
+  type: "internal" | "leaf";
+}) => (IdObj | null) | Promise<IdObj | null>;
+
+export type MoveHandler<T> = (args: {
+  dragIds: string[];
+  dragNodes: NodeApi<T>[];
+  parentId: string | null;
+  parentNode: NodeApi<T> | null;
+  index: number;
+}) => void | Promise<void>;
+
+export type RenameHandler<T> = (args: {
+  id: string;
+  name: string;
+  node: NodeApi<T>;
+}) => void | Promise<void>;
+
+export type DeleteHandler<T> = (args: {
+  ids: string[];
+  nodes: NodeApi<T>[];
+}) => void | Promise<void>;
+
+export type EditResult =
+  | { cancelled: true }
+  | { cancelled: false; value: string };
diff --git a/packages/ui/src/components/tree/types/renderers.ts b/packages/ui/src/components/tree/types/renderers.ts
index 356ad576..192dd99d 100644
--- a/packages/ui/src/components/tree/types/renderers.ts
+++ b/packages/ui/src/components/tree/types/renderers.ts
@@ -1,34 +1,34 @@
-import { CSSProperties, HTMLAttributes, ReactElement } from "react";
-import { IdObj } from "./utils";
-import { NodeApi } from "../interfaces/node-api";
-import { TreeApi } from "../interfaces/tree-api";
-import { XYCoord } from "react-dnd";
-
-export type NodeRendererProps<T> = {
-  style: CSSProperties;
-  node: NodeApi<T>;
-  tree: TreeApi<T>;
-  dragHandle?: (el: HTMLDivElement | null) => void;
-  preview?: boolean;
-};
-
-export type RowRendererProps<T> = {
-  node: NodeApi<T>;
-  innerRef: (el: HTMLDivElement | null) => void;
-  attrs: HTMLAttributes<any>;
-  children: ReactElement;
-};
-
-export type DragPreviewProps = {
-  offset: XYCoord | null;
-  mouse: XYCoord | null;
-  id: string | null;
-  dragIds: string[];
-  isDragging: boolean;
-};
-
-export type CursorProps = {
-  top: number;
-  left: number;
-  indent: number;
-};
+import { CSSProperties, HTMLAttributes, ReactElement } from "react";
+import { IdObj } from "./utils";
+import { NodeApi } from "../interfaces/node-api";
+import { TreeApi } from "../interfaces/tree-api";
+import { XYCoord } from "react-dnd";
+
+export type NodeRendererProps<T> = {
+  style: CSSProperties;
+  node: NodeApi<T>;
+  tree: TreeApi<T>;
+  dragHandle?: (el: HTMLDivElement | null) => void;
+  preview?: boolean;
+};
+
+export type RowRendererProps<T> = {
+  node: NodeApi<T>;
+  innerRef: (el: HTMLDivElement | null) => void;
+  attrs: HTMLAttributes<any>;
+  children: ReactElement;
+};
+
+export type DragPreviewProps = {
+  offset: XYCoord | null;
+  mouse: XYCoord | null;
+  id: string | null;
+  dragIds: string[];
+  isDragging: boolean;
+};
+
+export type CursorProps = {
+  top: number;
+  left: number;
+  indent: number;
+};
diff --git a/packages/ui/src/components/tree/types/state.ts b/packages/ui/src/components/tree/types/state.ts
index 14fa221b..4b2c44bd 100644
--- a/packages/ui/src/components/tree/types/state.ts
+++ b/packages/ui/src/components/tree/types/state.ts
@@ -1,3 +1,3 @@
-import { NodeApi } from "../interfaces/node-api";
-
-export type NodeState = typeof NodeApi.prototype["state"];
+import { NodeApi } from "../interfaces/node-api";
+
+export type NodeState = typeof NodeApi.prototype["state"];
diff --git a/packages/ui/src/components/tree/types/tree-props.ts b/packages/ui/src/components/tree/types/tree-props.ts
index 440bcc40..d1cade53 100644
--- a/packages/ui/src/components/tree/types/tree-props.ts
+++ b/packages/ui/src/components/tree/types/tree-props.ts
@@ -1,80 +1,80 @@
-import { BoolFunc } from "./utils";
-import * as handlers from "./handlers";
-import * as renderers from "./renderers";
-import { ElementType, MouseEventHandler } from "react";
-import { ListOnScrollProps } from "react-window";
-import { NodeApi } from "../interfaces/node-api";
-import { OpenMap } from "../state/open-slice";
-import { useDragDropManager } from "react-dnd";
-
-export interface TreeProps<T> {
-  /* Data Options */
-  data?: readonly T[];
-  initialData?: readonly T[];
-
-  /* Data Handlers */
-  onCreate?: handlers.CreateHandler<T>;
-  onMove?: handlers.MoveHandler<T>;
-  onRename?: handlers.RenameHandler<T>;
-  onDelete?: handlers.DeleteHandler<T>;
-
-  /* Renderers*/
-  children?: ElementType<renderers.NodeRendererProps<T>>;
-  renderRow?: ElementType<renderers.RowRendererProps<T>>;
-  renderDragPreview?: ElementType<renderers.DragPreviewProps>;
-  renderCursor?: ElementType<renderers.CursorProps>;
-  renderContainer?: ElementType<{}>;
-
-  /* Sizes */
-  rowHeight?: number;
-  overscanCount?: number;
-  width?: number | string;
-  height?: number;
-  indent?: number;
-  paddingTop?: number;
-  paddingBottom?: number;
-  padding?: number;
-
-  /* Config */
-  childrenAccessor?: string | ((d: T) => readonly T[] | null);
-  idAccessor?: string | ((d: T) => string);
-  openByDefault?: boolean;
-  selectionFollowsFocus?: boolean;
-  disableMultiSelection?: boolean;
-  disableEdit?: string | boolean | BoolFunc<T>;
-  disableDrag?: string | boolean | BoolFunc<T>;
-  disableDrop?:
-    | string
-    | boolean
-    | ((args: {
-        parentNode: NodeApi<T>;
-        dragNodes: NodeApi<T>[];
-        index: number;
-      }) => boolean);
-
-  /* Event Handlers */
-  onActivate?: (node: NodeApi<T>) => void;
-  onSelect?: (nodes: NodeApi<T>[]) => void;
-  onScroll?: (props: ListOnScrollProps) => void;
-  onToggle?: (id: string) => void;
-  onFocus?: (node: NodeApi<T>) => void;
-
-  /* Selection */
-  selection?: string;
-
-  /* Open State */
-  initialOpenState?: OpenMap;
-
-  /* Search */
-  searchTerm?: string;
-  searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
-
-  /* Extra */
-  className?: string | undefined;
-  rowClassName?: string | undefined;
-
-  dndRootElement?: globalThis.Node | null;
-  onClick?: MouseEventHandler;
-  onContextMenu?: MouseEventHandler;
-  dndManager?: ReturnType<typeof useDragDropManager>;
-}
+import { BoolFunc } from "./utils";
+import * as handlers from "./handlers";
+import * as renderers from "./renderers";
+import { ElementType, MouseEventHandler } from "react";
+import { ListOnScrollProps } from "react-window";
+import { NodeApi } from "../interfaces/node-api";
+import { OpenMap } from "../state/open-slice";
+import { useDragDropManager } from "react-dnd";
+
+export interface TreeProps<T> {
+  /* Data Options */
+  data?: readonly T[];
+  initialData?: readonly T[];
+
+  /* Data Handlers */
+  onCreate?: handlers.CreateHandler<T>;
+  onMove?: handlers.MoveHandler<T>;
+  onRename?: handlers.RenameHandler<T>;
+  onDelete?: handlers.DeleteHandler<T>;
+
+  /* Renderers*/
+  children?: ElementType<renderers.NodeRendererProps<T>>;
+  renderRow?: ElementType<renderers.RowRendererProps<T>>;
+  renderDragPreview?: ElementType<renderers.DragPreviewProps>;
+  renderCursor?: ElementType<renderers.CursorProps>;
+  renderContainer?: ElementType<{}>;
+
+  /* Sizes */
+  rowHeight?: number;
+  overscanCount?: number;
+  width?: number | string;
+  height?: number;
+  indent?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  padding?: number;
+
+  /* Config */
+  childrenAccessor?: string | ((d: T) => readonly T[] | null);
+  idAccessor?: string | ((d: T) => string);
+  openByDefault?: boolean;
+  selectionFollowsFocus?: boolean;
+  disableMultiSelection?: boolean;
+  disableEdit?: string | boolean | BoolFunc<T>;
+  disableDrag?: string | boolean | BoolFunc<T>;
+  disableDrop?:
+    | string
+    | boolean
+    | ((args: {
+        parentNode: NodeApi<T>;
+        dragNodes: NodeApi<T>[];
+        index: number;
+      }) => boolean);
+
+  /* Event Handlers */
+  onActivate?: (node: NodeApi<T>) => void;
+  onSelect?: (nodes: NodeApi<T>[]) => void;
+  onScroll?: (props: ListOnScrollProps) => void;
+  onToggle?: (id: string) => void;
+  onFocus?: (node: NodeApi<T>) => void;
+
+  /* Selection */
+  selection?: string;
+
+  /* Open State */
+  initialOpenState?: OpenMap;
+
+  /* Search */
+  searchTerm?: string;
+  searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
+
+  /* Extra */
+  className?: string | undefined;
+  rowClassName?: string | undefined;
+
+  dndRootElement?: globalThis.Node | null;
+  onClick?: MouseEventHandler;
+  onContextMenu?: MouseEventHandler;
+  dndManager?: ReturnType<typeof useDragDropManager>;
+}
diff --git a/packages/ui/src/components/tree/types/utils.ts b/packages/ui/src/components/tree/types/utils.ts
index 10c64185..4f516cc1 100644
--- a/packages/ui/src/components/tree/types/utils.ts
+++ b/packages/ui/src/components/tree/types/utils.ts
@@ -1,18 +1,18 @@
-import { AnyAction } from "redux";
-import { NodeApi } from "../interfaces/node-api";
-
-export interface IdObj {
-  id: string;
-}
-
-export type Identity = string | IdObj | null;
-
-export type BoolFunc<T> = (data: T) => boolean;
-
-export type ActionTypes<
-  Actions extends { [name: string]: (...args: any[]) => AnyAction }
-> = ReturnType<Actions[keyof Actions]>;
-
-export type SelectOptions = { multi?: boolean; contiguous?: boolean };
-
-export type NodesById<T> = { [id: string]: NodeApi<T> };
+import { AnyAction } from "redux";
+import { NodeApi } from "../interfaces/node-api";
+
+export interface IdObj {
+  id: string;
+}
+
+export type Identity = string | IdObj | null;
+
+export type BoolFunc<T> = (data: T) => boolean;
+
+export type ActionTypes<
+  Actions extends { [name: string]: (...args: any[]) => AnyAction }
+> = ReturnType<Actions[keyof Actions]>;
+
+export type SelectOptions = { multi?: boolean; contiguous?: boolean };
+
+export type NodesById<T> = { [id: string]: NodeApi<T> };
diff --git a/packages/ui/src/components/tree/utils.ts b/packages/ui/src/components/tree/utils.ts
index 4d69307c..4ca78a59 100644
--- a/packages/ui/src/components/tree/utils.ts
+++ b/packages/ui/src/components/tree/utils.ts
@@ -1,182 +1,182 @@
-import { NodeApi } from "./interfaces/node-api";
-import { TreeApi } from "./interfaces/tree-api";
-import { IdObj } from "./types/utils";
-
-export function bound(n: number, min: number, max: number) {
-  return Math.max(Math.min(n, max), min);
-}
-
-export function isItem(node: NodeApi<any> | null) {
-  return node && node.isLeaf;
-}
-
-export function isClosed(node: NodeApi<any> | null) {
-  return node && node.isInternal && !node.isOpen;
-}
-
-export function isOpenWithEmptyChildren(node: NodeApi<any> | null) {
-  return node && node.isOpen && !node.children?.length;
-}
-
-/**
- * Is first param a descendant of the second param
- */
-export const isDescendant = (a: NodeApi<any>, b: NodeApi<any>) => {
-  let n: NodeApi<any> | null = a;
-  while (n) {
-    if (n.id === b.id) return true;
-    n = n.parent;
-  }
-  return false;
-};
-
-export const indexOf = (node: NodeApi<any>) => {
-  if (!node.parent) throw Error("Node does not have a parent");
-  return node.parent.children!.findIndex((c) => c.id === node.id);
-};
-
-export function noop() {}
-
-export function dfs(node: NodeApi<any>, id: string): NodeApi<any> | null {
-  if (!node) return null;
-  if (node.id === id) return node;
-  if (node.children) {
-    for (let child of node.children) {
-      const result = dfs(child, id);
-      if (result) return result;
-    }
-  }
-  return null;
-}
-
-export function walk(
-  node: NodeApi<any>,
-  fn: (node: NodeApi<any>) => void
-): void {
-  fn(node);
-  if (node.children) {
-    for (let child of node.children) {
-      walk(child, fn);
-    }
-  }
-}
-
-export function focusNextElement(target: HTMLElement) {
-  const elements = getFocusable(target);
-
-  let next: HTMLElement;
-  for (let i = 0; i < elements.length; ++i) {
-    const item = elements[i];
-    if (item === target) {
-      next = nextItem(elements, i);
-      break;
-    }
-  }
-
-  // @ts-ignore ??
-  next?.focus();
-}
-
-export function focusPrevElement(target: HTMLElement) {
-  const elements = getFocusable(target);
-  let next: HTMLElement;
-  for (let i = 0; i < elements.length; ++i) {
-    const item = elements[i];
-    if (item === target) {
-      next = prevItem(elements, i);
-      break;
-    }
-  }
-  // @ts-ignore
-  next?.focus();
-}
-
-function nextItem(list: HTMLElement[], index: number) {
-  if (index + 1 < list.length) {
-    return list[index + 1] as HTMLElement;
-  } else {
-    return list[0] as HTMLElement;
-  }
-}
-
-function prevItem(list: HTMLElement[], index: number) {
-  if (index - 1 >= 0) {
-    return list[index - 1];
-  } else {
-    return list[list.length - 1];
-  }
-}
-
-function getFocusable(target: HTMLElement) {
-  return Array.from(
-    document.querySelectorAll(
-      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
-    )
-  ).filter((e) => e === target || !target.contains(e)) as HTMLElement[];
-}
-
-export function access<T = boolean>(
-  obj: any,
-  accessor: string | boolean | Function
-): T {
-  if (typeof accessor === "boolean") return accessor as unknown as T;
-  if (typeof accessor === "string") return obj[accessor] as T;
-  return accessor(obj) as T;
-}
-
-export function identifyNull(obj: string | IdObj | null) {
-  if (obj === null) return null;
-  else return identify(obj);
-}
-
-export function identify(obj: string | IdObj) {
-  return typeof obj === "string" ? obj : obj.id;
-}
-
-export function mergeRefs(...refs: any) {
-  return (instance: any) => {
-    refs.forEach((ref: any) => {
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref != null) {
-        ref.current = instance;
-      }
-    });
-  };
-}
-
-export function safeRun<T extends (...args: any[]) => any>(
-  fn: T | undefined,
-  ...args: Parameters<T>
-) {
-  if (fn) return fn(...args);
-}
-
-export function waitFor(fn: () => boolean) {
-  return new Promise<void>((resolve, reject) => {
-    let tries = 0;
-    function check() {
-      tries += 1;
-      if (tries === 100) reject();
-      if (fn()) resolve();
-      else setTimeout(check, 10);
-    }
-    check();
-  });
-}
-
-export function getInsertIndex(tree: TreeApi<any>) {
-  const focus = tree.focusedNode;
-  if (!focus) return tree.root.children?.length ?? 0;
-  if (focus.isOpen) return 0;
-  if (focus.parent) return focus.childIndex + 1;
-  return 0;
-}
-
-export function getInsertParentId(tree: TreeApi<any>) {
-  const focus = tree.focusedNode;
-  if (!focus) return null;
-  if (focus.isOpen) return focus.id;
-  if (focus.parent && !focus.parent.isRoot) return focus.parent.id;
-  return null;
-}
+import { NodeApi } from "./interfaces/node-api";
+import { TreeApi } from "./interfaces/tree-api";
+import { IdObj } from "./types/utils";
+
+export function bound(n: number, min: number, max: number) {
+  return Math.max(Math.min(n, max), min);
+}
+
+export function isItem(node: NodeApi<any> | null) {
+  return node && node.isLeaf;
+}
+
+export function isClosed(node: NodeApi<any> | null) {
+  return node && node.isInternal && !node.isOpen;
+}
+
+export function isOpenWithEmptyChildren(node: NodeApi<any> | null) {
+  return node && node.isOpen && !node.children?.length;
+}
+
+/**
+ * Is first param a descendant of the second param
+ */
+export const isDescendant = (a: NodeApi<any>, b: NodeApi<any>) => {
+  let n: NodeApi<any> | null = a;
+  while (n) {
+    if (n.id === b.id) return true;
+    n = n.parent;
+  }
+  return false;
+};
+
+export const indexOf = (node: NodeApi<any>) => {
+  if (!node.parent) throw Error("Node does not have a parent");
+  return node.parent.children!.findIndex((c) => c.id === node.id);
+};
+
+export function noop() {}
+
+export function dfs(node: NodeApi<any>, id: string): NodeApi<any> | null {
+  if (!node) return null;
+  if (node.id === id) return node;
+  if (node.children) {
+    for (let child of node.children) {
+      const result = dfs(child, id);
+      if (result) return result;
+    }
+  }
+  return null;
+}
+
+export function walk(
+  node: NodeApi<any>,
+  fn: (node: NodeApi<any>) => void
+): void {
+  fn(node);
+  if (node.children) {
+    for (let child of node.children) {
+      walk(child, fn);
+    }
+  }
+}
+
+export function focusNextElement(target: HTMLElement) {
+  const elements = getFocusable(target);
+
+  let next: HTMLElement;
+  for (let i = 0; i < elements.length; ++i) {
+    const item = elements[i];
+    if (item === target) {
+      next = nextItem(elements, i);
+      break;
+    }
+  }
+
+  // @ts-ignore ??
+  next?.focus();
+}
+
+export function focusPrevElement(target: HTMLElement) {
+  const elements = getFocusable(target);
+  let next: HTMLElement;
+  for (let i = 0; i < elements.length; ++i) {
+    const item = elements[i];
+    if (item === target) {
+      next = prevItem(elements, i);
+      break;
+    }
+  }
+  // @ts-ignore
+  next?.focus();
+}
+
+function nextItem(list: HTMLElement[], index: number) {
+  if (index + 1 < list.length) {
+    return list[index + 1] as HTMLElement;
+  } else {
+    return list[0] as HTMLElement;
+  }
+}
+
+function prevItem(list: HTMLElement[], index: number) {
+  if (index - 1 >= 0) {
+    return list[index - 1];
+  } else {
+    return list[list.length - 1];
+  }
+}
+
+function getFocusable(target: HTMLElement) {
+  return Array.from(
+    document.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
+    )
+  ).filter((e) => e === target || !target.contains(e)) as HTMLElement[];
+}
+
+export function access<T = boolean>(
+  obj: any,
+  accessor: string | boolean | Function
+): T {
+  if (typeof accessor === "boolean") return accessor as unknown as T;
+  if (typeof accessor === "string") return obj[accessor] as T;
+  return accessor(obj) as T;
+}
+
+export function identifyNull(obj: string | IdObj | null) {
+  if (obj === null) return null;
+  else return identify(obj);
+}
+
+export function identify(obj: string | IdObj) {
+  return typeof obj === "string" ? obj : obj.id;
+}
+
+export function mergeRefs(...refs: any) {
+  return (instance: any) => {
+    refs.forEach((ref: any) => {
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref != null) {
+        ref.current = instance;
+      }
+    });
+  };
+}
+
+export function safeRun<T extends (...args: any[]) => any>(
+  fn: T | undefined,
+  ...args: Parameters<T>
+) {
+  if (fn) return fn(...args);
+}
+
+export function waitFor(fn: () => boolean) {
+  return new Promise<void>((resolve, reject) => {
+    let tries = 0;
+    function check() {
+      tries += 1;
+      if (tries === 100) reject();
+      if (fn()) resolve();
+      else setTimeout(check, 10);
+    }
+    check();
+  });
+}
+
+export function getInsertIndex(tree: TreeApi<any>) {
+  const focus = tree.focusedNode;
+  if (!focus) return tree.root.children?.length ?? 0;
+  if (focus.isOpen) return 0;
+  if (focus.parent) return focus.childIndex + 1;
+  return 0;
+}
+
+export function getInsertParentId(tree: TreeApi<any>) {
+  const focus = tree.focusedNode;
+  if (!focus) return null;
+  if (focus.isOpen) return focus.id;
+  if (focus.parent && !focus.parent.isRoot) return focus.parent.id;
+  return null;
+}
diff --git a/packages/ui/src/components/ui/accordion.tsx b/packages/ui/src/components/ui/accordion.tsx
index 1e7878ce..2d0bf5c9 100644
--- a/packages/ui/src/components/ui/accordion.tsx
+++ b/packages/ui/src/components/ui/accordion.tsx
@@ -1,52 +1,52 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/ui/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
index 6dfbfb49..e5548462 100644
--- a/packages/ui/src/components/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -1,104 +1,104 @@
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/packages/ui/src/components/ui/alert.tsx b/packages/ui/src/components/ui/alert.tsx
index 2efc3c8b..b1614629 100644
--- a/packages/ui/src/components/ui/alert.tsx
+++ b/packages/ui/src/components/ui/alert.tsx
@@ -1,43 +1,43 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
-  ),
-);
-AlertTitle.displayName = "AlertTitle";
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-  ),
-);
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertTitle, AlertDescription };
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/ui/src/components/ui/aspect-ratio.tsx b/packages/ui/src/components/ui/aspect-ratio.tsx
index c9e6f4bf..d6c6d044 100644
--- a/packages/ui/src/components/ui/aspect-ratio.tsx
+++ b/packages/ui/src/components/ui/aspect-ratio.tsx
@@ -1,5 +1,5 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
diff --git a/packages/ui/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx
index 68d21bbf..75142cf7 100644
--- a/packages/ui/src/components/ui/avatar.tsx
+++ b/packages/ui/src/components/ui/avatar.tsx
@@ -1,38 +1,38 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/lib/utils";
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx
index f608e5e0..aeb7a3e8 100644
--- a/packages/ui/src/components/ui/badge.tsx
+++ b/packages/ui/src/components/ui/badge.tsx
@@ -1,34 +1,34 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-  ({ className, variant, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
-    )
-  }
-)
-Badge.displayName = "Badge"
-
-export { Badge, badgeVariants };
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
+    )
+  }
+)
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants };
diff --git a/packages/ui/src/components/ui/breadcrumb.tsx b/packages/ui/src/components/ui/breadcrumb.tsx
index ca91ff53..254170ae 100644
--- a/packages/ui/src/components/ui/breadcrumb.tsx
+++ b/packages/ui/src/components/ui/breadcrumb.tsx
@@ -1,90 +1,90 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb";
-
-const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
-  ({ className, ...props }, ref) => (
-    <ol
-      ref={ref}
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-BreadcrumbList.displayName = "BreadcrumbList";
-
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
-  ({ className, ...props }, ref) => (
-    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
-  ),
-);
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
-  ({ className, ...props }, ref) => (
-    <span
-      ref={ref}
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("font-normal text-foreground", className)}
-      {...props}
-    />
-  ),
-);
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
-    {children ?? <ChevronRight />}
-  </li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 151fe690..89ea4df8 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -1,47 +1,47 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-2",
-        lg: "h-11 rounded-md px-4",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-2",
+        lg: "h-11 rounded-md px-4",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx
index 900a69e4..9a43cc33 100644
--- a/packages/ui/src/components/ui/calendar.tsx
+++ b/packages/ui/src/components/ui/calendar.tsx
@@ -1,54 +1,54 @@
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  );
-}
-Calendar.displayName = "Calendar";
-
-export { Calendar };
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
index fd6f80a5..776c5ca3 100644
--- a/packages/ui/src/components/ui/card.tsx
+++ b/packages/ui/src/components/ui/card.tsx
@@ -1,43 +1,43 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("rounded-lg dark:bg-slate-800/50 text-card-foreground shadow-sm", className)} {...props} />
-));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-  ),
-);
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
-  ),
-);
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-  ),
-);
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
-);
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-  ),
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg dark:bg-slate-800/50 text-card-foreground shadow-sm", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/packages/ui/src/components/ui/carousel.tsx b/packages/ui/src/components/ui/carousel.tsx
index 3aa0f31f..cc82cf5e 100644
--- a/packages/ui/src/components/ui/carousel.tsx
+++ b/packages/ui/src/components/ui/carousel.tsx
@@ -1,224 +1,224 @@
-import * as React from "react";
-import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
-  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins,
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return;
-      }
-
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext],
-    );
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return;
-      }
-
-      setApi(api);
-    }, [api, setApi]);
-
-    React.useEffect(() => {
-      if (!api) {
-        return;
-      }
-
-      onSelect(api);
-      api.on("reInit", onSelect);
-      api.on("select", onSelect);
-
-      return () => {
-        api?.off("select", onSelect);
-      };
-    }, [api, onSelect]);
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
-);
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel();
-
-    return (
-      <div ref={carouselRef} className="overflow-hidden">
-        <div
-          ref={ref}
-          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
-          {...props}
-        />
-      </div>
-    );
-  },
-);
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useCarousel();
-
-    return (
-      <div
-        ref={ref}
-        role="group"
-        aria-roledescription="slide"
-        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        {...props}
-      >
-        <ArrowLeft className="h-4 w-4" />
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    );
-  },
-);
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        {...props}
-      >
-        <ArrowRight className="h-4 w-4" />
-        <span className="sr-only">Next slide</span>
-      </Button>
-    );
-  },
-);
-CarouselNext.displayName = "CarouselNext";
-
-export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
diff --git a/packages/ui/src/components/ui/chart.tsx b/packages/ui/src/components/ui/chart.tsx
index 08d40d90..50e71996 100644
--- a/packages/ui/src/components/ui/chart.tsx
+++ b/packages/ui/src/components/ui/chart.tsx
@@ -1,303 +1,303 @@
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "@/lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-
-  return context;
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-});
-ChartContainer.displayName = "Chart";
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean;
-      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string;
-      labelKey?: string;
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref,
-  ) => {
-    const { config } = useChart();
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null;
-      }
-
-      const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label;
-
-      if (labelFormatter) {
-        return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
-      }
-
-      if (!value) {
-        return null;
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
-
-    if (!active || !payload?.length) {
-      return null;
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className,
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center",
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-                            "h-2.5 w-2.5": indicator === "dot",
-                            "w-1": indicator === "line",
-                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                          })}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center",
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
-                      </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  },
-);
-ChartTooltipContent.displayName = "ChartTooltip";
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean;
-      nameKey?: string;
-    }
->(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
-  const { config } = useChart();
-
-  if (!payload?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={ref}
-      className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}
-    >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-        return (
-          <div
-            key={item.value}
-            className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
-                  backgroundColor: item.color,
-                }}
-              />
-            )}
-            {itemConfig?.label}
-          </div>
-        );
-      })}
-    </div>
-  );
-});
-ChartLegendContent.displayName = "ChartLegend";
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
-  }
-
-  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
-}
-
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx
index 759a41ce..0610ac14 100644
--- a/packages/ui/src/components/ui/checkbox.tsx
+++ b/packages/ui/src/components/ui/checkbox.tsx
@@ -1,26 +1,26 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/packages/ui/src/components/ui/collapsible-section.tsx b/packages/ui/src/components/ui/collapsible-section.tsx
index 0910fe2e..a24d04c9 100644
--- a/packages/ui/src/components/ui/collapsible-section.tsx
+++ b/packages/ui/src/components/ui/collapsible-section.tsx
@@ -1,164 +1,164 @@
-import React, { useState, type ReactNode, useEffect } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardHeader, CardContent } from '@/components/ui/card';
-
-interface CollapsibleSectionProps {
-  title: ReactNode;
-  children: ReactNode;
-  initiallyOpen?: boolean;
-  storageKey?: string; // New prop for localStorage key
-  className?: string;
-  headerClassName?: string;
-  headerContent?: ReactNode;
-  titleClassName?: string;
-  buttonClassName?: string;
-  contentClassName?: string;
-  asCard?: boolean; // New prop to decide if it should render as a Card
-  onStateChange?: (isOpen: boolean) => void; // New prop for state change callback
-  id?: string;
-  minimal?: boolean; // New prop for minimal styling
-  renderHeader?: (
-    toggle: () => void,
-    isOpen: boolean
-  ) => React.ReactNode;
-}
-
-const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
-  title,
-  children,
-  initiallyOpen = true,
-  storageKey,
-  className = '',
-  headerClassName,
-  headerContent,
-  titleClassName,
-  buttonClassName = '', // Made button smaller
-  contentClassName,
-  asCard = false, // Default to not rendering as a card
-  onStateChange, // Destructure new prop
-  id,
-  minimal = false,
-  renderHeader
-}) => {
-  const [isOpen, setIsOpen] = useState(() => {
-    if (storageKey) {
-      try {
-        const storedState = localStorage.getItem(storageKey);
-        if (storedState !== null) {
-          return JSON.parse(storedState) as boolean;
-        }
-      } catch (error) {
-        console.error(`Error reading CollapsibleSection state from localStorage for key "${storageKey}":`, error);
-      }
-    }
-    return initiallyOpen;
-  });
-
-  useEffect(() => {
-    if (storageKey) {
-      try {
-        localStorage.setItem(storageKey, JSON.stringify(isOpen));
-        if (onStateChange) { // Call onStateChange when state is synced from localStorage
-          onStateChange(isOpen);
-        }
-      } catch (error) {
-        console.error(`Error writing CollapsibleSection state to localStorage for key "${storageKey}":`, error);
-      }
-    }
-  }, [isOpen, storageKey, onStateChange]);
-
-  const toggleOpen = () => {
-    const newState = !isOpen;
-    setIsOpen(newState);
-    if (onStateChange) { // Call onStateChange when toggling
-      onStateChange(newState);
-    }
-  };
-
-  // Apply minimal styling if enabled
-  const finalHeaderClassName = headerClassName || (minimal 
-    ? 'flex justify-between items-center px-3 py-2 cursor-pointer border-b border-border'
-    : 'flex justify-between items-center p-3 md:p-4 cursor-pointer border-b border-border'
-  );
-  
-  const finalTitleClassName = titleClassName || (minimal
-    ? 'text-sm font-semibold'
-    : 'text-md md:text-lg font-semibold'
-  );
-  
-  const finalContentClassName = contentClassName || (minimal
-    ? 'p-3'
-    : 'p-3 md:p-4'
-  );
-  
-  const finalContainerClassName = minimal
-    ? `rounded-lg border border-border bg-card ${className}`
-    : `rounded-lg shadow-none md:shadow-md border border-border bg-card ${className}`;
-
-  const chevronSize = minimal ? "h-4 w-4" : "h-5 w-5";
-  
-  const header = renderHeader ? (
-    renderHeader(toggleOpen, isOpen)
-  ) : (
-    <div className={finalHeaderClassName} onClick={toggleOpen}>
-      <div className={finalTitleClassName}>{title}</div>
-      <div className="flex items-center gap-2">
-        {headerContent}
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={(e) => {
-            e.stopPropagation();
-            toggleOpen();
-          }}
-          className={`${buttonClassName} ${minimal ? 'h-6 w-6' : 'h-8 w-8'}`}
-        >
-          {isOpen ? (
-            <ChevronUp className={chevronSize} />
-          ) : (
-            <ChevronDown className={chevronSize} />
-          )}
-        </Button>
-      </div>
-    </div>
-  );
-
-
-  if (asCard) {
-    const cardClassName = minimal 
-      ? `${className}` 
-      : `shadow-none md:shadow-md ${className}`;
-    return (
-      <Card className={cardClassName} id={id}>
-        <CardHeader className={`cursor-pointer ${finalHeaderClassName}`} onClick={toggleOpen}>
-          <div className="flex justify-between items-center w-full">
-            <div className={finalTitleClassName}>{title}</div>
-            <div className="flex items-center gap-2">
-              {headerContent}
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                onClick={(e) => { e.stopPropagation(); toggleOpen(); }} 
-                className={`${buttonClassName} ${minimal ? 'h-6 w-6' : 'h-8 w-8'}`}
-              >
-                {isOpen ? <ChevronUp className={chevronSize} /> : <ChevronDown className={chevronSize} />}
-              </Button>
-            </div>
-          </div>
-        </CardHeader>
-        {isOpen && <CardContent className={finalContentClassName}>{children}</CardContent>}
-      </Card>
-    );
-  }
-
-  return (
-    <div className={finalContainerClassName} id={id}>
-      {header}
-      {isOpen && <div className={finalContentClassName}>{children}</div>}
-    </div>
-  );
-};
-
-export default CollapsibleSection;
-
+import React, { useState, type ReactNode, useEffect } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardContent } from '@/components/ui/card';
+
+interface CollapsibleSectionProps {
+  title: ReactNode;
+  children: ReactNode;
+  initiallyOpen?: boolean;
+  storageKey?: string; // New prop for localStorage key
+  className?: string;
+  headerClassName?: string;
+  headerContent?: ReactNode;
+  titleClassName?: string;
+  buttonClassName?: string;
+  contentClassName?: string;
+  asCard?: boolean; // New prop to decide if it should render as a Card
+  onStateChange?: (isOpen: boolean) => void; // New prop for state change callback
+  id?: string;
+  minimal?: boolean; // New prop for minimal styling
+  renderHeader?: (
+    toggle: () => void,
+    isOpen: boolean
+  ) => React.ReactNode;
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  children,
+  initiallyOpen = true,
+  storageKey,
+  className = '',
+  headerClassName,
+  headerContent,
+  titleClassName,
+  buttonClassName = '', // Made button smaller
+  contentClassName,
+  asCard = false, // Default to not rendering as a card
+  onStateChange, // Destructure new prop
+  id,
+  minimal = false,
+  renderHeader
+}) => {
+  const [isOpen, setIsOpen] = useState(() => {
+    if (storageKey) {
+      try {
+        const storedState = localStorage.getItem(storageKey);
+        if (storedState !== null) {
+          return JSON.parse(storedState) as boolean;
+        }
+      } catch (error) {
+        console.error(`Error reading CollapsibleSection state from localStorage for key "${storageKey}":`, error);
+      }
+    }
+    return initiallyOpen;
+  });
+
+  useEffect(() => {
+    if (storageKey) {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(isOpen));
+        if (onStateChange) { // Call onStateChange when state is synced from localStorage
+          onStateChange(isOpen);
+        }
+      } catch (error) {
+        console.error(`Error writing CollapsibleSection state to localStorage for key "${storageKey}":`, error);
+      }
+    }
+  }, [isOpen, storageKey, onStateChange]);
+
+  const toggleOpen = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    if (onStateChange) { // Call onStateChange when toggling
+      onStateChange(newState);
+    }
+  };
+
+  // Apply minimal styling if enabled
+  const finalHeaderClassName = headerClassName || (minimal 
+    ? 'flex justify-between items-center px-3 py-2 cursor-pointer border-b border-border'
+    : 'flex justify-between items-center p-3 md:p-4 cursor-pointer border-b border-border'
+  );
+  
+  const finalTitleClassName = titleClassName || (minimal
+    ? 'text-sm font-semibold'
+    : 'text-md md:text-lg font-semibold'
+  );
+  
+  const finalContentClassName = contentClassName || (minimal
+    ? 'p-3'
+    : 'p-3 md:p-4'
+  );
+  
+  const finalContainerClassName = minimal
+    ? `rounded-lg border border-border bg-card ${className}`
+    : `rounded-lg shadow-none md:shadow-md border border-border bg-card ${className}`;
+
+  const chevronSize = minimal ? "h-4 w-4" : "h-5 w-5";
+  
+  const header = renderHeader ? (
+    renderHeader(toggleOpen, isOpen)
+  ) : (
+    <div className={finalHeaderClassName} onClick={toggleOpen}>
+      <div className={finalTitleClassName}>{title}</div>
+      <div className="flex items-center gap-2">
+        {headerContent}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleOpen();
+          }}
+          className={`${buttonClassName} ${minimal ? 'h-6 w-6' : 'h-8 w-8'}`}
+        >
+          {isOpen ? (
+            <ChevronUp className={chevronSize} />
+          ) : (
+            <ChevronDown className={chevronSize} />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+
+
+  if (asCard) {
+    const cardClassName = minimal 
+      ? `${className}` 
+      : `shadow-none md:shadow-md ${className}`;
+    return (
+      <Card className={cardClassName} id={id}>
+        <CardHeader className={`cursor-pointer ${finalHeaderClassName}`} onClick={toggleOpen}>
+          <div className="flex justify-between items-center w-full">
+            <div className={finalTitleClassName}>{title}</div>
+            <div className="flex items-center gap-2">
+              {headerContent}
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                onClick={(e) => { e.stopPropagation(); toggleOpen(); }} 
+                className={`${buttonClassName} ${minimal ? 'h-6 w-6' : 'h-8 w-8'}`}
+              >
+                {isOpen ? <ChevronUp className={chevronSize} /> : <ChevronDown className={chevronSize} />}
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        {isOpen && <CardContent className={finalContentClassName}>{children}</CardContent>}
+      </Card>
+    );
+  }
+
+  return (
+    <div className={finalContainerClassName} id={id}>
+      {header}
+      {isOpen && <div className={finalContentClassName}>{children}</div>}
+    </div>
+  );
+};
+
+export default CollapsibleSection;
+
diff --git a/packages/ui/src/components/ui/collapsible.tsx b/packages/ui/src/components/ui/collapsible.tsx
index 5c28cbcc..1ceb2cac 100644
--- a/packages/ui/src/components/ui/collapsible.tsx
+++ b/packages/ui/src/components/ui/collapsible.tsx
@@ -1,9 +1,9 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-const Collapsible = CollapsiblePrimitive.Root;
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
index 68d53786..85284c68 100644
--- a/packages/ui/src/components/ui/command.tsx
+++ b/packages/ui/src/components/ui/command.tsx
@@ -1,132 +1,132 @@
-import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/packages/ui/src/components/ui/context-menu.tsx b/packages/ui/src/components/ui/context-menu.tsx
index b5d9db06..11098d79 100644
--- a/packages/ui/src/components/ui/context-menu.tsx
+++ b/packages/ui/src/components/ui/context-menu.tsx
@@ -1,178 +1,178 @@
-import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const ContextMenu = ContextMenuPrimitive.Root;
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
-const ContextMenuGroup = ContextMenuPrimitive.Group;
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
-const ContextMenuSub = ContextMenuPrimitive.Sub;
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
-    {...props}
-  />
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
-};
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-};
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index 8249e2f0..8adee2cd 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -1,95 +1,95 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/packages/ui/src/components/ui/drawer.tsx b/packages/ui/src/components/ui/drawer.tsx
index a2a435de..05c37eaf 100644
--- a/packages/ui/src/components/ui/drawer.tsx
+++ b/packages/ui/src/components/ui/drawer.tsx
@@ -1,87 +1,87 @@
-import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-
-import { cn } from "@/lib/utils";
-
-const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
-);
-Drawer.displayName = "Drawer";
-
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = DrawerPrimitive.Portal;
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80", className)} {...props} />
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className,
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-));
-DrawerContent.displayName = "DrawerContent";
-
-const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
-);
-DrawerHeader.displayName = "DrawerHeader";
-
-const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
-);
-DrawerFooter.displayName = "DrawerFooter";
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-};
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80", className)} {...props} />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index ddabcfdd..80ac796a 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -1,179 +1,179 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/packages/ui/src/components/ui/form.tsx b/packages/ui/src/components/ui/form.tsx
index 439029fc..d502b0ba 100644
--- a/packages/ui/src/components/ui/form.tsx
+++ b/packages/ui/src/components/ui/form.tsx
@@ -1,129 +1,129 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
-
-import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
-  ({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-    return (
-      <Slot
-        ref={ref}
-        id={formItemId}
-        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-        aria-invalid={!!error}
-        {...props}
-      />
-    );
-  },
-);
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
-
-    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />;
-  },
-);
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children;
-
-    if (!body) {
-      return null;
-    }
-
-    return (
-      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
-        {body}
-      </p>
-    );
-  },
-);
-FormMessage.displayName = "FormMessage";
-
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    );
+  },
+);
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />;
+  },
+);
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
+        {body}
+      </p>
+    );
+  },
+);
+FormMessage.displayName = "FormMessage";
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
diff --git a/packages/ui/src/components/ui/hover-card.tsx b/packages/ui/src/components/ui/hover-card.tsx
index 6ee6892d..3e8520b6 100644
--- a/packages/ui/src/components/ui/hover-card.tsx
+++ b/packages/ui/src/components/ui/hover-card.tsx
@@ -1,27 +1,27 @@
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-
-import { cn } from "@/lib/utils";
-
-const HoverCard = HoverCardPrimitive.Root;
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/packages/ui/src/components/ui/input-otp.tsx b/packages/ui/src/components/ui/input-otp.tsx
index 0e3fa02c..876a31a6 100644
--- a/packages/ui/src/components/ui/input-otp.tsx
+++ b/packages/ui/src/components/ui/input-otp.tsx
@@ -1,61 +1,61 @@
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Dot } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
-  ({ className, containerClassName, ...props }, ref) => (
-    <OTPInput
-      ref={ref}
-      containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
-      className={cn("disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  ),
-);
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center", className)} {...props} />,
-);
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-const InputOTPSeparator = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
-  ({ ...props }, ref) => (
-    <div ref={ref} role="separator" {...props}>
-      <Dot />
-    </div>
-  ),
-);
-InputOTPSeparator.displayName = "InputOTPSeparator";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
+  ({ className, containerClassName, ...props }, ref) => (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  ),
+);
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center", className)} {...props} />,
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ ...props }, ref) => (
+    <div ref={ref} role="separator" {...props}>
+      <Dot />
+    </div>
+  ),
+);
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
index 09700f60..16b69798 100644
--- a/packages/ui/src/components/ui/input.tsx
+++ b/packages/ui/src/components/ui/input.tsx
@@ -1,22 +1,22 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/packages/ui/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx
index 80e30eec..5c2e3a73 100644
--- a/packages/ui/src/components/ui/label.tsx
+++ b/packages/ui/src/components/ui/label.tsx
@@ -1,17 +1,17 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/packages/ui/src/components/ui/menubar.tsx b/packages/ui/src/components/ui/menubar.tsx
index 15687e4c..01e7f16f 100644
--- a/packages/ui/src/components/ui/menubar.tsx
+++ b/packages/ui/src/components/ui/menubar.tsx
@@ -1,207 +1,207 @@
-import * as React from "react";
-import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const MenubarMenu = MenubarPrimitive.Menu;
-
-const MenubarGroup = MenubarPrimitive.Group;
-
-const MenubarPortal = MenubarPrimitive.Portal;
-
-const MenubarSub = MenubarPrimitive.Sub;
-
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className)}
-    {...props}
-  />
-));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-  <MenubarPrimitive.Portal>
-    <MenubarPrimitive.Content
-      ref={ref}
-      align={align}
-      alignOffset={alignOffset}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </MenubarPrimitive.Portal>
-));
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
-));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-
-const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
-};
-MenubarShortcut.displayname = "MenubarShortcut";
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-};
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className)}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};
diff --git a/packages/ui/src/components/ui/navigation-menu.tsx b/packages/ui/src/components/ui/navigation-menu.tsx
index c9fcd7ad..e1032344 100644
--- a/packages/ui/src/components/ui/navigation-menu.tsx
+++ b/packages/ui/src/components/ui/navigation-menu.tsx
@@ -1,120 +1,120 @@
-import * as React from "react";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
-    {...props}
-  />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item;
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
-);
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
-      className,
-    )}
-    {...props}
-  />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className,
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-};
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};
diff --git a/packages/ui/src/components/ui/pagination.tsx b/packages/ui/src/components/ui/pagination.tsx
index 31ae1be1..395831d0 100644
--- a/packages/ui/src/components/ui/pagination.tsx
+++ b/packages/ui/src/components/ui/pagination.tsx
@@ -1,81 +1,81 @@
-import * as React from "react";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { ButtonProps, buttonVariants } from "@/components/ui/button";
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-);
-Pagination.displayName = "Pagination";
-
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
-  ),
-);
-PaginationContent.displayName = "PaginationContent";
-
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-));
-PaginationItem.displayName = "PaginationItem";
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">;
-
-const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className,
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = "PaginationLink";
-
-const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-);
-PaginationNext.displayName = "PaginationNext";
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-};
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  ),
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index 59dd5252..eabb0780 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -1,29 +1,29 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/packages/ui/src/components/ui/progress.tsx b/packages/ui/src/components/ui/progress.tsx
index f9f131e9..434e981b 100644
--- a/packages/ui/src/components/ui/progress.tsx
+++ b/packages/ui/src/components/ui/progress.tsx
@@ -1,23 +1,23 @@
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-import { cn } from "@/lib/utils";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/packages/ui/src/components/ui/radio-group.tsx b/packages/ui/src/components/ui/radio-group.tsx
index 5d32e58a..6792d6d8 100644
--- a/packages/ui/src/components/ui/radio-group.tsx
+++ b/packages/ui/src/components/ui/radio-group.tsx
@@ -1,36 +1,36 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/packages/ui/src/components/ui/resizable.tsx b/packages/ui/src/components/ui/resizable.tsx
index 4a1bd8c8..7747ed98 100644
--- a/packages/ui/src/components/ui/resizable.tsx
+++ b/packages/ui/src/components/ui/resizable.tsx
@@ -1,37 +1,37 @@
-import { GripVertical } from "lucide-react";
-import * as ResizablePrimitive from "react-resizable-panels";
-
-import { cn } from "@/lib/utils";
-
-const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
-    {...props}
-  />
-);
-
-const ResizablePanel = ResizablePrimitive.Panel;
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className,
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-);
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
index 8d29b27e..69d7f50f 100644
--- a/packages/ui/src/components/ui/scroll-area.tsx
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -1,38 +1,38 @@
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
-import { cn } from "@/lib/utils";
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index 6f252546..2b59de4c 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -1,143 +1,143 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/packages/ui/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
index e20c3f4c..b9341885 100644
--- a/packages/ui/src/components/ui/separator.tsx
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -1,20 +1,20 @@
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-
-import { cn } from "@/lib/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
-    {...props}
-  />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/packages/ui/src/components/ui/sheet.tsx b/packages/ui/src/components/ui/sheet.tsx
index c414714b..2f96f20b 100644
--- a/packages/ui/src/components/ui/sheet.tsx
+++ b/packages/ui/src/components/ui/sheet.tsx
@@ -1,107 +1,107 @@
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-);
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
-  ({ side = "right", className, children, ...props }, ref) => (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-        {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  ),
-);
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-};
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
diff --git a/packages/ui/src/components/ui/sidebar.tsx b/packages/ui/src/components/ui/sidebar.tsx
index 1a65d3e3..b7d96263 100644
--- a/packages/ui/src/components/ui/sidebar.tsx
+++ b/packages/ui/src/components/ui/sidebar.tsx
@@ -1,637 +1,637 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
-
-import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-
-const SIDEBAR_COOKIE_NAME = "sidebar:state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-
-type SidebarContext = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContext | null>(null);
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  }
-
-  return context;
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-  }
->(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
-  const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React.useState(false);
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen);
-  const open = openProp ?? _open;
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value;
-      if (setOpenProp) {
-        setOpenProp(openState);
-      } else {
-        _setOpen(openState);
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-    },
-    [setOpenProp, open],
-  );
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-  }, [isMobile, setOpen, setOpenMobile]);
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        toggleSidebar();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggleSidebar]);
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed";
-
-  const contextValue = React.useMemo<SidebarContext>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-  );
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className)}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  );
-});
-SidebarProvider.displayName = "SidebarProvider";
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-  }
->(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-  if (collapsible === "none") {
-    return (
-      <div
-        className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-mobile="true"
-          className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    );
-  }
-
-  return (
-    <div
-      ref={ref}
-      className="group peer hidden text-sidebar-foreground md:block"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        className={cn(
-          "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
-        )}
-      />
-      <div
-        className={cn(
-          "fixed top-14 bottom-0 z-10 hidden h-[calc(100vh-3.5rem)] w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className,
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-});
-Sidebar.displayName = "Sidebar";
-
-const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
-  ({ className, onClick, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
-
-    return (
-      <Button
-        ref={ref}
-        data-sidebar="trigger"
-        variant="ghost"
-        size="icon"
-        className={cn("h-7 w-7", className)}
-        onClick={(event) => {
-          onClick?.(event);
-          toggleSidebar();
-        }}
-        {...props}
-      >
-        <PanelLeft />
-        <span className="sr-only">Toggle Sidebar</span>
-      </Button>
-    );
-  },
-);
-SidebarTrigger.displayName = "SidebarTrigger";
-
-const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
-  ({ className, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
-
-    return (
-      <button
-        ref={ref}
-        data-sidebar="rail"
-        aria-label="Toggle Sidebar"
-        tabIndex={-1}
-        onClick={toggleSidebar}
-        title="Toggle Sidebar"
-        className={cn(
-          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex",
-          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarRail.displayName = "SidebarRail";
-
-const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInset.displayName = "SidebarInset";
-
-const SidebarInput = React.forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <Input
-        ref={ref}
-        data-sidebar="input"
-        className={cn(
-          "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarInput.displayName = "SidebarInput";
-
-const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
-  return <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
-});
-SidebarHeader.displayName = "SidebarHeader";
-
-const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
-  return <div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
-});
-SidebarFooter.displayName = "SidebarFooter";
-
-const SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <Separator
-        ref={ref}
-        data-sidebar="separator"
-        className={cn("mx-2 w-auto bg-sidebar-border", className)}
-        {...props}
-      />
-    );
-  },
-);
-SidebarSeparator.displayName = "SidebarSeparator";
-
-const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarContent.displayName = "SidebarContent";
-
-const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarGroup.displayName = "SidebarGroup";
-
-const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "div";
-
-    return (
-      <Comp
-        ref={ref}
-        data-sidebar="group-label"
-        className={cn(
-          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-          "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-
-const SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { asChild?: boolean }>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-
-    return (
-      <Comp
-        ref={ref}
-        data-sidebar="group-action"
-        className={cn(
-          "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-          // Increases the hit area of the button on mobile.
-          "after:absolute after:-inset-2 after:md:hidden",
-          "group-data-[collapsible=icon]:hidden",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-SidebarGroupAction.displayName = "SidebarGroupAction";
-
-const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} data-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />
-  ),
-);
-SidebarGroupContent.displayName = "SidebarGroupContent";
-
-const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (
-  <ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />
-));
-SidebarMenu.displayName = "SidebarMenu";
-
-const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
-  <li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />
-));
-SidebarMenuItem.displayName = "SidebarMenuItem";
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-  const { isMobile, state } = useSidebar();
-
-  const button = (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-
-  if (!tooltip) {
-    return button;
-  }
-
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    };
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
-    </Tooltip>
-  );
-});
-SidebarMenuButton.displayName = "SidebarMenuButton";
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-
-const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-sidebar="menu-badge"
-      className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-SidebarMenuBadge.displayName = "SidebarMenuBadge";
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean;
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
-      <Skeleton
-        className="h-4 max-w-[--skeleton-width] flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-
-const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul
-      ref={ref}
-      data-sidebar="menu-sub"
-      className={cn(
-        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-SidebarMenuSub.displayName = "SidebarMenuSub";
-
-const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ ...props }, ref) => (
-  <li ref={ref} {...props} />
-));
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
-    isActive?: boolean;
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-};
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContext>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className)}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+});
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-mobile="true"
+          className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+        )}
+      />
+      <div
+        className={cn(
+          "fixed top-14 bottom-0 z-10 hidden h-[calc(100vh-3.5rem)] w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
+  ({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <Button
+        ref={ref}
+        data-sidebar="trigger"
+        variant="ghost"
+        size="icon"
+        className={cn("h-7 w-7", className)}
+        onClick={(event) => {
+          onClick?.(event);
+          toggleSidebar();
+        }}
+        {...props}
+      >
+        <PanelLeft />
+        <span className="sr-only">Toggle Sidebar</span>
+      </Button>
+    );
+  },
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex",
+          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        data-sidebar="input"
+        className={cn(
+          "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return <div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Separator
+        ref={ref}
+        data-sidebar="separator"
+        className={cn("mx-2 w-auto bg-sidebar-border", className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-label"
+        className={cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { asChild?: boolean }>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-action"
+        className={cn(
+          "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          // Increases the hit area of the button on mobile.
+          "after:absolute after:-inset-2 after:md:hidden",
+          "group-data-[collapsible=icon]:hidden",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />
+  ),
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (
+  <ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
+    </Tooltip>
+  );
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ ...props }, ref) => (
+  <li ref={ref} {...props} />
+));
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/packages/ui/src/components/ui/skeleton.tsx b/packages/ui/src/components/ui/skeleton.tsx
index 6690a131..edb46c0e 100644
--- a/packages/ui/src/components/ui/skeleton.tsx
+++ b/packages/ui/src/components/ui/skeleton.tsx
@@ -1,7 +1,7 @@
-import { cn } from "@/lib/utils";
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
-}
-
-export { Skeleton };
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+}
+
+export { Skeleton };
diff --git a/packages/ui/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx
index 360d681b..847b13ef 100644
--- a/packages/ui/src/components/ui/slider.tsx
+++ b/packages/ui/src/components/ui/slider.tsx
@@ -1,23 +1,23 @@
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-
-import { cn } from "@/lib/utils";
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn("relative flex w-full touch-none select-none items-center", className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/packages/ui/src/components/ui/sonner.tsx b/packages/ui/src/components/ui/sonner.tsx
index b7f198b5..9c644072 100644
--- a/packages/ui/src/components/ui/sonner.tsx
+++ b/packages/ui/src/components/ui/sonner.tsx
@@ -1,27 +1,27 @@
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, toast } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster, toast };
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, toast } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
index a76b7612..1520d236 100644
--- a/packages/ui/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -1,27 +1,27 @@
-import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-
-import { cn } from "@/lib/utils";
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/packages/ui/src/components/ui/table.tsx b/packages/ui/src/components/ui/table.tsx
index 991cdbf3..6f477d23 100644
--- a/packages/ui/src/components/ui/table.tsx
+++ b/packages/ui/src/components/ui/table.tsx
@@ -1,72 +1,72 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
-  ),
-);
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
-);
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-  ),
-);
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
-  ),
-);
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", className)}
-      {...props}
-    />
-  ),
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <th
-      ref={ref}
-      className={cn(
-        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
-  ),
-);
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-  ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
-  ),
-);
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  ),
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+  ),
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", className)}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  ),
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/ui/src/components/ui/tabs.tsx b/packages/ui/src/components/ui/tabs.tsx
index ba20fbb1..980db346 100644
--- a/packages/ui/src/components/ui/tabs.tsx
+++ b/packages/ui/src/components/ui/tabs.tsx
@@ -1,53 +1,53 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "@/lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
index 4a5643e8..6059e673 100644
--- a/packages/ui/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -1,21 +1,21 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Textarea.displayName = "Textarea";
-
-export { Textarea };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/packages/ui/src/components/ui/toast.tsx b/packages/ui/src/components/ui/toast.tsx
index 0699548f..64f708c4 100644
--- a/packages/ui/src/components/ui/toast.tsx
+++ b/packages/ui/src/components/ui/toast.tsx
@@ -1,111 +1,111 @@
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/packages/ui/src/components/ui/toaster.tsx b/packages/ui/src/components/ui/toaster.tsx
index 2cba1c82..be458b9d 100644
--- a/packages/ui/src/components/ui/toaster.tsx
+++ b/packages/ui/src/components/ui/toaster.tsx
@@ -1,24 +1,24 @@
-import { useToast } from "@/hooks/use-toast";
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}
+import { useToast } from "@/hooks/use-toast";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/packages/ui/src/components/ui/toggle-group.tsx b/packages/ui/src/components/ui/toggle-group.tsx
index 8deae16f..932b901d 100644
--- a/packages/ui/src/components/ui/toggle-group.tsx
+++ b/packages/ui/src/components/ui/toggle-group.tsx
@@ -1,49 +1,49 @@
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/ui/toggle";
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: "default",
-  variant: "default",
-});
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props}>
-    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/ui/src/components/ui/toggle.tsx b/packages/ui/src/components/ui/toggle.tsx
index de5dfc5a..145f2a4a 100644
--- a/packages/ui/src/components/ui/toggle.tsx
+++ b/packages/ui/src/components/ui/toggle.tsx
@@ -1,37 +1,37 @@
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
index 2dece61d..66ac647e 100644
--- a/packages/ui/src/components/ui/tooltip.tsx
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -1,28 +1,28 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/ui/src/components/ui/use-toast.ts b/packages/ui/src/components/ui/use-toast.ts
index b0aef21b..cb4bc560 100644
--- a/packages/ui/src/components/ui/use-toast.ts
+++ b/packages/ui/src/components/ui/use-toast.ts
@@ -1,3 +1,3 @@
-import { useToast, toast } from "@/hooks/use-toast";
-
-export { useToast, toast };
+import { useToast, toast } from "@/hooks/use-toast";
+
+export { useToast, toast };
diff --git a/packages/ui/src/components/widgets/GalleryWidget.tsx b/packages/ui/src/components/widgets/GalleryWidget.tsx
index 0adcd909..d2de445e 100644
--- a/packages/ui/src/components/widgets/GalleryWidget.tsx
+++ b/packages/ui/src/components/widgets/GalleryWidget.tsx
@@ -1,21 +1,21 @@
-import React, { lazy, Suspense } from 'react';
-import GalleryWidgetView from './GalleryWidgetView';
-import type { GalleryWidgetProps } from './GalleryWidgetTypes';
-
-const GalleryWidgetEdit = lazy(() => import('./GalleryWidgetEdit'));
-
-export type { GalleryWidgetProps } from './GalleryWidgetTypes';
-
-const GalleryWidgetComponent: React.FC<GalleryWidgetProps> = (props) => {
-    if (!props.isEditMode) {
-        return <GalleryWidgetView {...props} />;
-    }
-
-    return (
-        <Suspense fallback={<GalleryWidgetView {...props} />}>
-            <GalleryWidgetEdit {...props} />
-        </Suspense>
-    );
-};
-
-export default GalleryWidgetComponent;
+import React, { lazy, Suspense } from 'react';
+import GalleryWidgetView from './GalleryWidgetView';
+import type { GalleryWidgetProps } from './GalleryWidgetTypes';
+
+const GalleryWidgetEdit = lazy(() => import('./GalleryWidgetEdit'));
+
+export type { GalleryWidgetProps } from './GalleryWidgetTypes';
+
+const GalleryWidgetComponent: React.FC<GalleryWidgetProps> = (props) => {
+    if (!props.isEditMode) {
+        return <GalleryWidgetView {...props} />;
+    }
+
+    return (
+        <Suspense fallback={<GalleryWidgetView {...props} />}>
+            <GalleryWidgetEdit {...props} />
+        </Suspense>
+    );
+};
+
+export default GalleryWidgetComponent;
diff --git a/packages/ui/src/components/widgets/GalleryWidgetEdit.tsx b/packages/ui/src/components/widgets/GalleryWidgetEdit.tsx
index 3069482f..4d31aeff 100644
--- a/packages/ui/src/components/widgets/GalleryWidgetEdit.tsx
+++ b/packages/ui/src/components/widgets/GalleryWidgetEdit.tsx
@@ -1,575 +1,575 @@
-import React, { useState, useEffect, useCallback, useRef, Suspense, lazy } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Gallery } from '@/modules/posts/views/renderers/components/Gallery';
-import { ImagePickerDialog } from '@/components/widgets/ImagePickerDialog';
-import { T, translate } from '@/i18n';
-import { ImageIcon, Plus, Settings, Upload, Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { useAuth } from '@/hooks/useAuth';
-import { PostMediaItem } from '@/modules/posts/views/types';
-import { isVideoType, normalizeMediaType, detectMediaType } from '@/lib/mediaRegistry';
-import { uploadImage } from '@/lib/uploadUtils';
-import { toast } from 'sonner';
-import { fetchMediaItemsByIds, createPicture, fetchUserPictures } from '@/modules/posts/client-pictures';
-import { useDragDrop } from '@/contexts/DragDropContext';
-import type { GalleryWidgetProps } from './GalleryWidgetTypes';
-
-const SmartLightbox = lazy(() => import('@/modules/posts/views/components/SmartLightbox'));
-
-const GalleryWidgetEdit: React.FC<GalleryWidgetProps> = ({
-    pictureIds: propPictureIds = [],
-    thumbnailLayout = 'strip',
-    imageFit = 'cover',
-    thumbnailsPosition = 'bottom',
-    thumbnailsOrientation = 'horizontal',
-    zoomEnabled = false,
-    showVersions = false,
-    showTitle = false,
-    showDescription = false,
-    autoPlayVideos = false,
-    thumbnailsClassName = '',
-    onPropsChange,
-    isEditMode = false,
-    id
-}) => {
-    const { user } = useAuth();
-    const navigate = useNavigate();
-    const { setLocalZoneActive, resetDragState } = useDragDrop();
-
-    // Normalize pictureIds to always be an array
-    const normalizePictureIds = (ids: any): string[] => {
-        if (!ids) return [];
-        if (Array.isArray(ids)) return ids;
-        if (typeof ids === 'string') return [ids];
-        return [];
-    };
-
-    const [pictureIds, setPictureIds] = useState<string[]>(normalizePictureIds(propPictureIds));
-    const [mediaItems, setMediaItems] = useState<PostMediaItem[]>([]);
-    const [selectedItem, setSelectedItem] = useState<PostMediaItem | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [showPicker, setShowPicker] = useState(false);
-    const [lightboxOpen, setLightboxOpen] = useState(false);
-
-    const [isDragging, setIsDragging] = useState(false);
-    const [isUploading, setIsUploading] = useState(false);
-    const preLightboxFocusRef = useRef<HTMLElement | null>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    // Keyboard: Space/Enter to open lightbox, arrows to navigate
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            const el = document.activeElement;
-            const isInput = el && (
-                el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ||
-                el.getAttribute('contenteditable') === 'true' ||
-                el.getAttribute('role') === 'textbox'
-            );
-            if (isInput || lightboxOpen || !containerRef.current?.contains(el)) return;
-
-            if (e.key === ' ' || e.key === 'Enter') {
-                e.preventDefault();
-                preLightboxFocusRef.current = document.activeElement as HTMLElement;
-                setLightboxOpen(true);
-            } else if (e.key === 'ArrowLeft' && selectedItem && mediaItems.length > 1) {
-                e.preventDefault();
-                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
-                if (idx > 0) setSelectedItem(mediaItems[idx - 1]);
-            } else if (e.key === 'ArrowRight' && selectedItem && mediaItems.length > 1) {
-                e.preventDefault();
-                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
-                if (idx < mediaItems.length - 1) setSelectedItem(mediaItems[idx + 1]);
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [lightboxOpen, selectedItem, mediaItems]);
-
-    // Sync local state with props
-    useEffect(() => {
-        const normalizedProps = normalizePictureIds(propPictureIds);
-        if (JSON.stringify(normalizedProps) !== JSON.stringify(pictureIds)) {
-            setPictureIds(normalizedProps);
-        }
-    }, [propPictureIds]);
-
-    useEffect(() => {
-        if (pictureIds && pictureIds.length > 0) {
-            fetchMediaItems();
-        } else {
-            setMediaItems([]);
-            setSelectedItem(null);
-        }
-    }, [pictureIds]);
-
-    const fetchMediaItems = async () => {
-        if (!pictureIds || pictureIds.length === 0) return;
-
-        setLoading(true);
-        try {
-            const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-            const dbIds = pictureIds.filter(id => uuidRegex.test(id));
-            const vfsIds = pictureIds.filter(id => !uuidRegex.test(id));
-
-            let dbItems: any[] = [];
-            if (dbIds.length > 0) {
-                dbItems = await fetchMediaItemsByIds(dbIds, { maintainOrder: false });
-            }
-
-            const vfsItems = vfsIds.map(url => {
-                const mediaType = detectMediaType(url);
-                return {
-                    id: url,
-                    title: url.split('/').pop() || 'File',
-                    description: null,
-                    image_url: url,
-                    thumbnail_url: url,
-                    user_id: user?.id || 'anon',
-                    type: mediaType,
-                    mediaType: mediaType,
-                    meta: {},
-                    created_at: new Date().toISOString(),
-                    updated_at: new Date().toISOString(),
-                };
-            });
-
-            const allFetchedItems = [...dbItems, ...vfsItems];
-            const orderedItems = pictureIds.map(id => allFetchedItems.find(item => item.id === id)).filter(Boolean);
-
-            const postMediaItems = orderedItems.map((item: any, index: number) => ({
-                ...item,
-                post_id: '',
-                position: index,
-                visible: true,
-                is_selected: false,
-                comments: [{ count: 0 }]
-            })) as any[];
-
-            const parentIds = new Set<string>();
-            const itemIds = new Set(postMediaItems.map((i: any) => i.id));
-            postMediaItems.forEach((item: any) => {
-                if (item.parent_id) parentIds.add(item.parent_id);
-            });
-
-            const userIds = [...new Set(postMediaItems.map((i: any) => i.user_id))];
-            let allSiblings: any[] = [];
-            if (showVersions && parentIds.size > 0 && userIds.length > 0) {
-                try {
-                    const userPics = await fetchUserPictures(userIds[0]);
-                    if (userPics && userPics.length > 0) {
-                        const picMap = new Map(userPics.map((p: any) => [p.id, p]));
-
-                        for (const item of postMediaItems) {
-                            let rootId = item.id;
-                            let cur: any = picMap.get(item.id);
-                            while (cur?.parent_id && picMap.has(cur.parent_id)) {
-                                rootId = cur.parent_id;
-                                cur = picMap.get(rootId);
-                            }
-
-                            const visited = new Set<string>();
-                            const collect = (nodeId: string) => {
-                                if (visited.has(nodeId)) return;
-                                const node = picMap.get(nodeId);
-                                if (!node) return;
-                                visited.add(nodeId);
-                                if (!itemIds.has(nodeId)) {
-                                    allSiblings.push(node);
-                                    itemIds.add(nodeId);
-                                }
-                                userPics.filter((p: any) => p.parent_id === nodeId).forEach((child: any) => collect(child.id));
-                            };
-                            collect(rootId);
-                        }
-                    }
-                } catch (err) {
-                    console.warn('Error fetching version siblings:', err);
-                }
-            }
-
-            const siblingMediaItems = allSiblings.map((sib: any, i: number) => ({
-                ...sib,
-                image_url: sib.image_url || '',
-                thumbnail_url: sib.thumbnail_url || null,
-                mediaType: sib.type || sib.mediaType || 'supabase-image',
-                post_id: '',
-                position: postMediaItems.length + i,
-                visible: true,
-                is_selected: sib.is_selected || false,
-                comments: [{ count: 0 }],
-                created_at: sib.created_at || new Date().toISOString(),
-                updated_at: sib.updated_at || new Date().toISOString(),
-                likes_count: 0,
-                tags: sib.tags || null,
-                flags: sib.flags || null,
-                organization_id: sib.organization_id || null,
-                parent_id: sib.parent_id || null,
-            })) as any[];
-
-            const allItems = [...postMediaItems, ...siblingMediaItems];
-            setMediaItems(allItems);
-
-            if (postMediaItems.length > 0 && !selectedItem) {
-                setSelectedItem(postMediaItems[0]);
-            }
-        } catch (error) {
-            console.error('Error fetching gallery media:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handlePicturesSelected = (selectedPictureIds: string[]) => {
-        setPictureIds(selectedPictureIds);
-        if (onPropsChange) {
-            onPropsChange({ pictureIds: selectedPictureIds });
-        }
-        setShowPicker(false);
-    };
-
-    const handleMediaSelect = (item: PostMediaItem) => {
-        setSelectedItem(item);
-
-        if (!pictureIds.includes(item.id) && (item as any).parent_id) {
-            const rootId = findTrueRoot(item);
-            const oldId = pictureIds.find(pid => {
-                const pidItem = mediaItems.find(m => m.id === pid);
-                return pidItem && findTrueRoot(pidItem) === rootId;
-            });
-            if (oldId) {
-                const newIds = pictureIds.map(id => id === oldId ? item.id : id);
-                setPictureIds(newIds);
-                if (onPropsChange) {
-                    onPropsChange({ pictureIds: newIds });
-                }
-            }
-        }
-    };
-
-    const findTrueRoot = (item: PostMediaItem): string => {
-        const itemMap = new Map(mediaItems.map(m => [m.id, m]));
-        let currentId = item.id;
-        let current: PostMediaItem | undefined = item;
-        while ((current as any)?.parent_id && itemMap.has((current as any).parent_id)) {
-            currentId = (current as any).parent_id;
-            current = itemMap.get(currentId);
-        }
-        return currentId;
-    };
-
-    const handleExpand = (item: PostMediaItem) => {
-        setSelectedItem(item);
-        setLightboxOpen(true);
-    };
-
-    const handlePublish = async (option: 'overwrite' | 'new' | 'version', imageUrl: string, newTitle: string, description?: string, parentId?: string, collectionIds?: string[]) => {
-        console.log('Publish:', { option, imageUrl, newTitle, description, parentId, collectionIds });
-    };
-
-    const handleNavigateLightbox = (direction: 'prev' | 'next') => {
-        if (!selectedItem) return;
-        const currentIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
-        const newIndex = direction === 'next'
-            ? (currentIndex + 1) % mediaItems.length
-            : (currentIndex - 1 + mediaItems.length) % mediaItems.length;
-        setSelectedItem(mediaItems[newIndex]);
-    };
-
-    const handleOpenInWizard = () => {
-        console.log('Open in wizard:', selectedItem);
-    };
-
-    const handleEditPicture = (item: PostMediaItem) => {
-        navigate(`/post/${item.id}`);
-    };
-
-    const handleReorder = (newItems: PostMediaItem[]) => {
-        const newIds = newItems.map(item => item.id);
-        setMediaItems(newItems);
-        handlePicturesSelected(newIds);
-    };
-
-    // Drag and Drop Handlers
-    const handleDragEnter = useCallback((e: React.DragEvent) => {
-        if (!isEditMode) return;
-        e.preventDefault();
-
-        if (e.dataTransfer.types.includes('Files')) {
-            setIsDragging(true);
-            setLocalZoneActive(true);
-        }
-    }, [isEditMode, setLocalZoneActive]);
-
-    const handleDragLeave = useCallback((e: React.DragEvent) => {
-        if (!isEditMode) return;
-        e.preventDefault();
-
-        if (e.currentTarget.contains(e.relatedTarget as Node)) {
-            return;
-        }
-        setIsDragging(false);
-        setLocalZoneActive(false);
-    }, [isEditMode, setLocalZoneActive]);
-
-    const handleDragOver = useCallback((e: React.DragEvent) => {
-        if (!isEditMode) return;
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'copy';
-    }, [isEditMode]);
-
-    const handleDrop = useCallback(async (e: React.DragEvent) => {
-        if (!isEditMode) return;
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-        resetDragState();
-
-        const files = Array.from(e.dataTransfer.files);
-        const imageFiles = files.filter(f => f.type.startsWith('image/'));
-
-        if (imageFiles.length === 0) {
-            if (files.length > 0) {
-                toast.error(translate('Please drop image files'));
-            }
-            return;
-        }
-
-        await processDroppedImages(imageFiles);
-    }, [isEditMode, pictureIds]);
-
-    const processDroppedImages = async (files: File[]) => {
-        setIsUploading(true);
-        try {
-            if (!user) {
-                toast.error(translate('You must be logged in to upload images'));
-                return;
-            }
-
-            const newPictureIds: string[] = [];
-            let successfulUploads = 0;
-
-            for (const file of files) {
-                try {
-                    const { publicUrl, meta } = await uploadImage(file, user.id);
-
-                    const pictureData = await createPicture({
-                        user_id: user.id,
-                        title: file.name.split('.')[0] || 'Uploaded Image',
-                        description: null,
-                        image_url: publicUrl,
-                        type: 'supabase-image',
-                        meta: meta || {},
-                    } as any);
-
-                    if (pictureData) {
-                        newPictureIds.push(pictureData.id);
-                        successfulUploads++;
-                    }
-                } catch (err) {
-                    console.error(`Failed to upload ${file.name}:`, err);
-                }
-            }
-
-            if (newPictureIds.length > 0) {
-                const updatedIds = [...(pictureIds || []), ...newPictureIds];
-                handlePicturesSelected(updatedIds);
-                toast.success(translate(`Uploaded ${successfulUploads} images`));
-            } else {
-                toast.error(translate('Failed to upload images'));
-            }
-
-        } catch (error) {
-            console.error('Error processing dropped images:', error);
-            toast.error(translate('Error processing uploads'));
-        } finally {
-            setIsUploading(false);
-        }
-    };
-
-    // Empty state
-    if (!pictureIds || pictureIds.length === 0) {
-        return (
-            <div
-                className={`flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed relative transition-all duration-200 ${isDragging ? 'ring-4 ring-primary ring-inset rounded-lg scale-[0.99]' : ''}`}
-                onDragEnter={handleDragEnter}
-                onDragLeave={handleDragLeave}
-                onDragOver={handleDragOver}
-                onDrop={handleDrop}
-            >
-                <ImageIcon className="w-16 h-16 text-muted-foreground mb-4" />
-                <p className="text-muted-foreground mb-4">
-                    <T>No pictures selected</T>
-                </p>
-                <>
-                    <Button onClick={() => setShowPicker(true)} variant="outline">
-                        <Plus className="w-4 h-4 mr-2" />
-                        <T>Select Pictures</T>
-                    </Button>
-                    <p className="text-xs text-muted-foreground mt-4">
-                        <T>or drag and drop images here</T>
-                    </p>
-                </>
-                {showPicker && (
-                    <ImagePickerDialog
-                        isOpen={showPicker}
-                        onClose={() => setShowPicker(false)}
-                        onMultiSelect={handlePicturesSelected}
-                        multiple={true}
-                        currentValues={pictureIds}
-                    />
-                )}
-
-                {/* Drop Overlay for Empty State */}
-                {isDragging && (
-                    <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50 border-2 border-dashed border-primary pointer-events-none">
-                        <div className="bg-primary/10 p-6 rounded-full mb-4">
-                            <Upload className="h-10 w-10 text-primary animate-bounce" />
-                        </div>
-                        <p className="text-lg font-semibold text-primary">
-                            <T>Drop images to add</T>
-                        </p>
-                    </div>
-                )}
-                {/* Uploading Overlay */}
-                {isUploading && (
-                    <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50">
-                        <Loader2 className="h-10 w-10 text-primary animate-spin mb-4" />
-                        <p className="text-lg font-semibold text-foreground">
-                            <T>Uploading images...</T>
-                        </p>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    // Loading state
-    if (loading && !isUploading) {
-        return (
-            <div className="flex items-center justify-center h-full min-h-[400px]">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-            </div>
-        );
-    }
-
-    // Fallback
-    if (!selectedItem || mediaItems.length === 0) {
-        return (
-            <div className="flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed">
-                <p className="text-muted-foreground">
-                    <T>Loading gallery items...</T>
-                </p>
-            </div>
-        );
-    }
-
-    return (
-        <div
-            ref={containerRef}
-            tabIndex={0}
-            className={`relative w-full aspect-video flex flex-col transition-all duration-200 focus:outline-none ${isDragging ? 'ring-4 ring-primary ring-inset rounded-lg scale-[0.99]' : 'dark:bg-slate-800/50 lg:rounded-lg p-2 md:p-6'}`}
-            onDragEnter={handleDragEnter}
-            onDragLeave={handleDragLeave}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-        >
-            {/* Edit Mode Controls */}
-            <div className="absolute top-2 right-2 z-50">
-                <Button
-                    onClick={() => setShowPicker(true)}
-                    variant="secondary"
-                    size="sm"
-                    className="shadow-lg"
-                >
-                    <Settings className="w-4 h-4 mr-2" />
-                    <T>Configure</T>
-                </Button>
-            </div>
-
-            {/* Gallery Component - needs to fill container */}
-            <div className="flex-1 w-full min-h-[500px]">
-                <Gallery
-                    mediaItems={mediaItems}
-                    selectedItem={selectedItem}
-                    onMediaSelect={handleMediaSelect}
-                    onExpand={handleExpand}
-                    isOwner={!!user}
-                    showDesktopLayout={true}
-                    thumbnailLayout={thumbnailLayout}
-                    imageFit={imageFit}
-                    thumbnailsPosition={thumbnailsPosition}
-                    thumbnailsOrientation={thumbnailsOrientation}
-                    zoomEnabled={zoomEnabled}
-                    showTitle={showTitle}
-                    showDescription={showDescription}
-                    thumbnailsClassName={thumbnailsClassName}
-                    autoPlayVideos={autoPlayVideos}
-                    className="h-full w-full [&_.hidden]:!block"
-                    isEditMode={isEditMode}
-                    localMediaItems={mediaItems}
-                    setLocalMediaItems={handleReorder}
-                    onEditPicture={handleEditPicture}
-                />
-            </div>
-
-            {/* Drop Overlay */}
-            {isDragging && (
-                <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50 border-2 border-dashed border-primary pointer-events-none">
-                    <div className="bg-primary/10 p-6 rounded-full mb-4">
-                        <Upload className="h-10 w-10 text-primary animate-bounce" />
-                    </div>
-                    <p className="text-lg font-semibold text-primary">
-                        <T>Drop images to add</T>
-                    </p>
-                </div>
-            )}
-
-            {/* Uploading Overlay */}
-            {isUploading && (
-                <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50">
-                    <Loader2 className="h-10 w-10 text-primary animate-spin mb-4" />
-                    <p className="text-lg font-semibold text-foreground">
-                        <T>Uploading images...</T>
-                    </p>
-                </div>
-            )}
-
-            {/* Image Picker Dialog */}
-            {showPicker && (
-                <ImagePickerDialog
-                    isOpen={showPicker}
-                    onClose={() => setShowPicker(false)}
-                    onMultiSelect={handlePicturesSelected}
-                    multiple={true}
-                    currentValues={pictureIds}
-                />
-            )}
-
-            {/* Smart Lightbox */}
-            {selectedItem && lightboxOpen && (
-                <Suspense fallback={null}>
-                    <SmartLightbox
-                        isOpen={lightboxOpen}
-                        onClose={() => {
-                            setLightboxOpen(false);
-                            requestAnimationFrame(() => {
-                                preLightboxFocusRef.current?.focus();
-                                preLightboxFocusRef.current = null;
-                            });
-                        }}
-                        mediaItem={selectedItem}
-                        user={user}
-                        isVideo={isVideoType(normalizeMediaType(selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url)))}
-                        onPublish={handlePublish}
-                        onNavigate={handleNavigateLightbox}
-                        onOpenInWizard={handleOpenInWizard}
-                        currentIndex={mediaItems.findIndex(item => item.id === selectedItem.id)}
-                        totalCount={mediaItems.length}
-                    />
-                </Suspense>
-            )}
-        </div>
-    );
-};
-
-export default GalleryWidgetEdit;
+import React, { useState, useEffect, useCallback, useRef, Suspense, lazy } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Gallery } from '@/modules/posts/views/renderers/components/Gallery';
+import { ImagePickerDialog } from '@/components/widgets/ImagePickerDialog';
+import { T, translate } from '@/i18n';
+import { ImageIcon, Plus, Settings, Upload, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useAuth } from '@/hooks/useAuth';
+import { PostMediaItem } from '@/modules/posts/views/types';
+import { isVideoType, normalizeMediaType, detectMediaType } from '@/lib/mediaRegistry';
+import { uploadImage } from '@/lib/uploadUtils';
+import { toast } from 'sonner';
+import { fetchMediaItemsByIds, createPicture, fetchUserPictures } from '@/modules/posts/client-pictures';
+import { useDragDrop } from '@/contexts/DragDropContext';
+import type { GalleryWidgetProps } from './GalleryWidgetTypes';
+
+const SmartLightbox = lazy(() => import('@/modules/posts/views/components/SmartLightbox'));
+
+const GalleryWidgetEdit: React.FC<GalleryWidgetProps> = ({
+    pictureIds: propPictureIds = [],
+    thumbnailLayout = 'strip',
+    imageFit = 'cover',
+    thumbnailsPosition = 'bottom',
+    thumbnailsOrientation = 'horizontal',
+    zoomEnabled = false,
+    showVersions = false,
+    showTitle = false,
+    showDescription = false,
+    autoPlayVideos = false,
+    thumbnailsClassName = '',
+    onPropsChange,
+    isEditMode = false,
+    id
+}) => {
+    const { user } = useAuth();
+    const navigate = useNavigate();
+    const { setLocalZoneActive, resetDragState } = useDragDrop();
+
+    // Normalize pictureIds to always be an array
+    const normalizePictureIds = (ids: any): string[] => {
+        if (!ids) return [];
+        if (Array.isArray(ids)) return ids;
+        if (typeof ids === 'string') return [ids];
+        return [];
+    };
+
+    const [pictureIds, setPictureIds] = useState<string[]>(normalizePictureIds(propPictureIds));
+    const [mediaItems, setMediaItems] = useState<PostMediaItem[]>([]);
+    const [selectedItem, setSelectedItem] = useState<PostMediaItem | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [showPicker, setShowPicker] = useState(false);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+
+    const [isDragging, setIsDragging] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const preLightboxFocusRef = useRef<HTMLElement | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Keyboard: Space/Enter to open lightbox, arrows to navigate
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            const el = document.activeElement;
+            const isInput = el && (
+                el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ||
+                el.getAttribute('contenteditable') === 'true' ||
+                el.getAttribute('role') === 'textbox'
+            );
+            if (isInput || lightboxOpen || !containerRef.current?.contains(el)) return;
+
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                preLightboxFocusRef.current = document.activeElement as HTMLElement;
+                setLightboxOpen(true);
+            } else if (e.key === 'ArrowLeft' && selectedItem && mediaItems.length > 1) {
+                e.preventDefault();
+                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
+                if (idx > 0) setSelectedItem(mediaItems[idx - 1]);
+            } else if (e.key === 'ArrowRight' && selectedItem && mediaItems.length > 1) {
+                e.preventDefault();
+                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
+                if (idx < mediaItems.length - 1) setSelectedItem(mediaItems[idx + 1]);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [lightboxOpen, selectedItem, mediaItems]);
+
+    // Sync local state with props
+    useEffect(() => {
+        const normalizedProps = normalizePictureIds(propPictureIds);
+        if (JSON.stringify(normalizedProps) !== JSON.stringify(pictureIds)) {
+            setPictureIds(normalizedProps);
+        }
+    }, [propPictureIds]);
+
+    useEffect(() => {
+        if (pictureIds && pictureIds.length > 0) {
+            fetchMediaItems();
+        } else {
+            setMediaItems([]);
+            setSelectedItem(null);
+        }
+    }, [pictureIds]);
+
+    const fetchMediaItems = async () => {
+        if (!pictureIds || pictureIds.length === 0) return;
+
+        setLoading(true);
+        try {
+            const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+            const dbIds = pictureIds.filter(id => uuidRegex.test(id));
+            const vfsIds = pictureIds.filter(id => !uuidRegex.test(id));
+
+            let dbItems: any[] = [];
+            if (dbIds.length > 0) {
+                dbItems = await fetchMediaItemsByIds(dbIds, { maintainOrder: false });
+            }
+
+            const vfsItems = vfsIds.map(url => {
+                const mediaType = detectMediaType(url);
+                return {
+                    id: url,
+                    title: url.split('/').pop() || 'File',
+                    description: null,
+                    image_url: url,
+                    thumbnail_url: url,
+                    user_id: user?.id || 'anon',
+                    type: mediaType,
+                    mediaType: mediaType,
+                    meta: {},
+                    created_at: new Date().toISOString(),
+                    updated_at: new Date().toISOString(),
+                };
+            });
+
+            const allFetchedItems = [...dbItems, ...vfsItems];
+            const orderedItems = pictureIds.map(id => allFetchedItems.find(item => item.id === id)).filter(Boolean);
+
+            const postMediaItems = orderedItems.map((item: any, index: number) => ({
+                ...item,
+                post_id: '',
+                position: index,
+                visible: true,
+                is_selected: false,
+                comments: [{ count: 0 }]
+            })) as any[];
+
+            const parentIds = new Set<string>();
+            const itemIds = new Set(postMediaItems.map((i: any) => i.id));
+            postMediaItems.forEach((item: any) => {
+                if (item.parent_id) parentIds.add(item.parent_id);
+            });
+
+            const userIds = [...new Set(postMediaItems.map((i: any) => i.user_id))];
+            let allSiblings: any[] = [];
+            if (showVersions && parentIds.size > 0 && userIds.length > 0) {
+                try {
+                    const userPics = await fetchUserPictures(userIds[0]);
+                    if (userPics && userPics.length > 0) {
+                        const picMap = new Map(userPics.map((p: any) => [p.id, p]));
+
+                        for (const item of postMediaItems) {
+                            let rootId = item.id;
+                            let cur: any = picMap.get(item.id);
+                            while (cur?.parent_id && picMap.has(cur.parent_id)) {
+                                rootId = cur.parent_id;
+                                cur = picMap.get(rootId);
+                            }
+
+                            const visited = new Set<string>();
+                            const collect = (nodeId: string) => {
+                                if (visited.has(nodeId)) return;
+                                const node = picMap.get(nodeId);
+                                if (!node) return;
+                                visited.add(nodeId);
+                                if (!itemIds.has(nodeId)) {
+                                    allSiblings.push(node);
+                                    itemIds.add(nodeId);
+                                }
+                                userPics.filter((p: any) => p.parent_id === nodeId).forEach((child: any) => collect(child.id));
+                            };
+                            collect(rootId);
+                        }
+                    }
+                } catch (err) {
+                    console.warn('Error fetching version siblings:', err);
+                }
+            }
+
+            const siblingMediaItems = allSiblings.map((sib: any, i: number) => ({
+                ...sib,
+                image_url: sib.image_url || '',
+                thumbnail_url: sib.thumbnail_url || null,
+                mediaType: sib.type || sib.mediaType || 'supabase-image',
+                post_id: '',
+                position: postMediaItems.length + i,
+                visible: true,
+                is_selected: sib.is_selected || false,
+                comments: [{ count: 0 }],
+                created_at: sib.created_at || new Date().toISOString(),
+                updated_at: sib.updated_at || new Date().toISOString(),
+                likes_count: 0,
+                tags: sib.tags || null,
+                flags: sib.flags || null,
+                organization_id: sib.organization_id || null,
+                parent_id: sib.parent_id || null,
+            })) as any[];
+
+            const allItems = [...postMediaItems, ...siblingMediaItems];
+            setMediaItems(allItems);
+
+            if (postMediaItems.length > 0 && !selectedItem) {
+                setSelectedItem(postMediaItems[0]);
+            }
+        } catch (error) {
+            console.error('Error fetching gallery media:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handlePicturesSelected = (selectedPictureIds: string[]) => {
+        setPictureIds(selectedPictureIds);
+        if (onPropsChange) {
+            onPropsChange({ pictureIds: selectedPictureIds });
+        }
+        setShowPicker(false);
+    };
+
+    const handleMediaSelect = (item: PostMediaItem) => {
+        setSelectedItem(item);
+
+        if (!pictureIds.includes(item.id) && (item as any).parent_id) {
+            const rootId = findTrueRoot(item);
+            const oldId = pictureIds.find(pid => {
+                const pidItem = mediaItems.find(m => m.id === pid);
+                return pidItem && findTrueRoot(pidItem) === rootId;
+            });
+            if (oldId) {
+                const newIds = pictureIds.map(id => id === oldId ? item.id : id);
+                setPictureIds(newIds);
+                if (onPropsChange) {
+                    onPropsChange({ pictureIds: newIds });
+                }
+            }
+        }
+    };
+
+    const findTrueRoot = (item: PostMediaItem): string => {
+        const itemMap = new Map(mediaItems.map(m => [m.id, m]));
+        let currentId = item.id;
+        let current: PostMediaItem | undefined = item;
+        while ((current as any)?.parent_id && itemMap.has((current as any).parent_id)) {
+            currentId = (current as any).parent_id;
+            current = itemMap.get(currentId);
+        }
+        return currentId;
+    };
+
+    const handleExpand = (item: PostMediaItem) => {
+        setSelectedItem(item);
+        setLightboxOpen(true);
+    };
+
+    const handlePublish = async (option: 'overwrite' | 'new' | 'version', imageUrl: string, newTitle: string, description?: string, parentId?: string, collectionIds?: string[]) => {
+        console.log('Publish:', { option, imageUrl, newTitle, description, parentId, collectionIds });
+    };
+
+    const handleNavigateLightbox = (direction: 'prev' | 'next') => {
+        if (!selectedItem) return;
+        const currentIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
+        const newIndex = direction === 'next'
+            ? (currentIndex + 1) % mediaItems.length
+            : (currentIndex - 1 + mediaItems.length) % mediaItems.length;
+        setSelectedItem(mediaItems[newIndex]);
+    };
+
+    const handleOpenInWizard = () => {
+        console.log('Open in wizard:', selectedItem);
+    };
+
+    const handleEditPicture = (item: PostMediaItem) => {
+        navigate(`/post/${item.id}`);
+    };
+
+    const handleReorder = (newItems: PostMediaItem[]) => {
+        const newIds = newItems.map(item => item.id);
+        setMediaItems(newItems);
+        handlePicturesSelected(newIds);
+    };
+
+    // Drag and Drop Handlers
+    const handleDragEnter = useCallback((e: React.DragEvent) => {
+        if (!isEditMode) return;
+        e.preventDefault();
+
+        if (e.dataTransfer.types.includes('Files')) {
+            setIsDragging(true);
+            setLocalZoneActive(true);
+        }
+    }, [isEditMode, setLocalZoneActive]);
+
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+        if (!isEditMode) return;
+        e.preventDefault();
+
+        if (e.currentTarget.contains(e.relatedTarget as Node)) {
+            return;
+        }
+        setIsDragging(false);
+        setLocalZoneActive(false);
+    }, [isEditMode, setLocalZoneActive]);
+
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+        if (!isEditMode) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    }, [isEditMode]);
+
+    const handleDrop = useCallback(async (e: React.DragEvent) => {
+        if (!isEditMode) return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        resetDragState();
+
+        const files = Array.from(e.dataTransfer.files);
+        const imageFiles = files.filter(f => f.type.startsWith('image/'));
+
+        if (imageFiles.length === 0) {
+            if (files.length > 0) {
+                toast.error(translate('Please drop image files'));
+            }
+            return;
+        }
+
+        await processDroppedImages(imageFiles);
+    }, [isEditMode, pictureIds]);
+
+    const processDroppedImages = async (files: File[]) => {
+        setIsUploading(true);
+        try {
+            if (!user) {
+                toast.error(translate('You must be logged in to upload images'));
+                return;
+            }
+
+            const newPictureIds: string[] = [];
+            let successfulUploads = 0;
+
+            for (const file of files) {
+                try {
+                    const { publicUrl, meta } = await uploadImage(file, user.id);
+
+                    const pictureData = await createPicture({
+                        user_id: user.id,
+                        title: file.name.split('.')[0] || 'Uploaded Image',
+                        description: null,
+                        image_url: publicUrl,
+                        type: 'supabase-image',
+                        meta: meta || {},
+                    } as any);
+
+                    if (pictureData) {
+                        newPictureIds.push(pictureData.id);
+                        successfulUploads++;
+                    }
+                } catch (err) {
+                    console.error(`Failed to upload ${file.name}:`, err);
+                }
+            }
+
+            if (newPictureIds.length > 0) {
+                const updatedIds = [...(pictureIds || []), ...newPictureIds];
+                handlePicturesSelected(updatedIds);
+                toast.success(translate(`Uploaded ${successfulUploads} images`));
+            } else {
+                toast.error(translate('Failed to upload images'));
+            }
+
+        } catch (error) {
+            console.error('Error processing dropped images:', error);
+            toast.error(translate('Error processing uploads'));
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    // Empty state
+    if (!pictureIds || pictureIds.length === 0) {
+        return (
+            <div
+                className={`flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed relative transition-all duration-200 ${isDragging ? 'ring-4 ring-primary ring-inset rounded-lg scale-[0.99]' : ''}`}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+            >
+                <ImageIcon className="w-16 h-16 text-muted-foreground mb-4" />
+                <p className="text-muted-foreground mb-4">
+                    <T>No pictures selected</T>
+                </p>
+                <>
+                    <Button onClick={() => setShowPicker(true)} variant="outline">
+                        <Plus className="w-4 h-4 mr-2" />
+                        <T>Select Pictures</T>
+                    </Button>
+                    <p className="text-xs text-muted-foreground mt-4">
+                        <T>or drag and drop images here</T>
+                    </p>
+                </>
+                {showPicker && (
+                    <ImagePickerDialog
+                        isOpen={showPicker}
+                        onClose={() => setShowPicker(false)}
+                        onMultiSelect={handlePicturesSelected}
+                        multiple={true}
+                        currentValues={pictureIds}
+                    />
+                )}
+
+                {/* Drop Overlay for Empty State */}
+                {isDragging && (
+                    <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50 border-2 border-dashed border-primary pointer-events-none">
+                        <div className="bg-primary/10 p-6 rounded-full mb-4">
+                            <Upload className="h-10 w-10 text-primary animate-bounce" />
+                        </div>
+                        <p className="text-lg font-semibold text-primary">
+                            <T>Drop images to add</T>
+                        </p>
+                    </div>
+                )}
+                {/* Uploading Overlay */}
+                {isUploading && (
+                    <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50">
+                        <Loader2 className="h-10 w-10 text-primary animate-spin mb-4" />
+                        <p className="text-lg font-semibold text-foreground">
+                            <T>Uploading images...</T>
+                        </p>
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Loading state
+    if (loading && !isUploading) {
+        return (
+            <div className="flex items-center justify-center h-full min-h-[400px]">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    // Fallback
+    if (!selectedItem || mediaItems.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed">
+                <p className="text-muted-foreground">
+                    <T>Loading gallery items...</T>
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            ref={containerRef}
+            tabIndex={0}
+            className={`relative w-full aspect-video flex flex-col transition-all duration-200 focus:outline-none ${isDragging ? 'ring-4 ring-primary ring-inset rounded-lg scale-[0.99]' : 'dark:bg-slate-800/50 lg:rounded-lg p-2 md:p-6'}`}
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+        >
+            {/* Edit Mode Controls */}
+            <div className="absolute top-2 right-2 z-50">
+                <Button
+                    onClick={() => setShowPicker(true)}
+                    variant="secondary"
+                    size="sm"
+                    className="shadow-lg"
+                >
+                    <Settings className="w-4 h-4 mr-2" />
+                    <T>Configure</T>
+                </Button>
+            </div>
+
+            {/* Gallery Component - needs to fill container */}
+            <div className="flex-1 w-full min-h-[500px]">
+                <Gallery
+                    mediaItems={mediaItems}
+                    selectedItem={selectedItem}
+                    onMediaSelect={handleMediaSelect}
+                    onExpand={handleExpand}
+                    isOwner={!!user}
+                    showDesktopLayout={true}
+                    thumbnailLayout={thumbnailLayout}
+                    imageFit={imageFit}
+                    thumbnailsPosition={thumbnailsPosition}
+                    thumbnailsOrientation={thumbnailsOrientation}
+                    zoomEnabled={zoomEnabled}
+                    showTitle={showTitle}
+                    showDescription={showDescription}
+                    thumbnailsClassName={thumbnailsClassName}
+                    autoPlayVideos={autoPlayVideos}
+                    className="h-full w-full [&_.hidden]:!block"
+                    isEditMode={isEditMode}
+                    localMediaItems={mediaItems}
+                    setLocalMediaItems={handleReorder}
+                    onEditPicture={handleEditPicture}
+                />
+            </div>
+
+            {/* Drop Overlay */}
+            {isDragging && (
+                <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50 border-2 border-dashed border-primary pointer-events-none">
+                    <div className="bg-primary/10 p-6 rounded-full mb-4">
+                        <Upload className="h-10 w-10 text-primary animate-bounce" />
+                    </div>
+                    <p className="text-lg font-semibold text-primary">
+                        <T>Drop images to add</T>
+                    </p>
+                </div>
+            )}
+
+            {/* Uploading Overlay */}
+            {isUploading && (
+                <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center rounded-lg z-50">
+                    <Loader2 className="h-10 w-10 text-primary animate-spin mb-4" />
+                    <p className="text-lg font-semibold text-foreground">
+                        <T>Uploading images...</T>
+                    </p>
+                </div>
+            )}
+
+            {/* Image Picker Dialog */}
+            {showPicker && (
+                <ImagePickerDialog
+                    isOpen={showPicker}
+                    onClose={() => setShowPicker(false)}
+                    onMultiSelect={handlePicturesSelected}
+                    multiple={true}
+                    currentValues={pictureIds}
+                />
+            )}
+
+            {/* Smart Lightbox */}
+            {selectedItem && lightboxOpen && (
+                <Suspense fallback={null}>
+                    <SmartLightbox
+                        isOpen={lightboxOpen}
+                        onClose={() => {
+                            setLightboxOpen(false);
+                            requestAnimationFrame(() => {
+                                preLightboxFocusRef.current?.focus();
+                                preLightboxFocusRef.current = null;
+                            });
+                        }}
+                        mediaItem={selectedItem}
+                        user={user}
+                        isVideo={isVideoType(normalizeMediaType(selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url)))}
+                        onPublish={handlePublish}
+                        onNavigate={handleNavigateLightbox}
+                        onOpenInWizard={handleOpenInWizard}
+                        currentIndex={mediaItems.findIndex(item => item.id === selectedItem.id)}
+                        totalCount={mediaItems.length}
+                    />
+                </Suspense>
+            )}
+        </div>
+    );
+};
+
+export default GalleryWidgetEdit;
diff --git a/packages/ui/src/components/widgets/GalleryWidgetTypes.ts b/packages/ui/src/components/widgets/GalleryWidgetTypes.ts
index 7efe88b0..18cc6963 100644
--- a/packages/ui/src/components/widgets/GalleryWidgetTypes.ts
+++ b/packages/ui/src/components/widgets/GalleryWidgetTypes.ts
@@ -1,10 +1,10 @@
-import type { GalleryWidgetProps as GalleryWidgetSchemaProps } from '@polymech/shared';
-
-/**
- * Full component props = schema-inferred data props + runtime props.
- */
-export interface GalleryWidgetProps extends GalleryWidgetSchemaProps {
-    onPropsChange?: (props: Record<string, any>) => void;
-    isEditMode?: boolean;
-    id?: string;
-}
+import type { GalleryWidgetProps as GalleryWidgetSchemaProps } from '@polymech/shared';
+
+/**
+ * Full component props = schema-inferred data props + runtime props.
+ */
+export interface GalleryWidgetProps extends GalleryWidgetSchemaProps {
+    onPropsChange?: (props: Record<string, any>) => void;
+    isEditMode?: boolean;
+    id?: string;
+}
diff --git a/packages/ui/src/components/widgets/GalleryWidgetView.tsx b/packages/ui/src/components/widgets/GalleryWidgetView.tsx
index 9c58704b..e54f3914 100644
--- a/packages/ui/src/components/widgets/GalleryWidgetView.tsx
+++ b/packages/ui/src/components/widgets/GalleryWidgetView.tsx
@@ -1,313 +1,313 @@
-import React, { useState, useEffect, useRef, Suspense, lazy } from 'react';
-import { Gallery } from '@/modules/posts/views/renderers/components/Gallery';
-import { ImageIcon } from 'lucide-react';
-import { T } from '@/i18n';
-import { useAuth } from '@/hooks/useAuth';
-import { PostMediaItem } from '@/modules/posts/views/types';
-import { isVideoType, normalizeMediaType, detectMediaType } from '@/lib/mediaRegistry';
-import { fetchMediaItemsByIds, fetchUserPictures } from '@/modules/posts/client-pictures';
-import type { GalleryWidgetProps } from './GalleryWidgetTypes';
-
-const SmartLightbox = lazy(() => import('@/modules/posts/views/components/SmartLightbox'));
-
-const GalleryWidgetView: React.FC<GalleryWidgetProps> = ({
-    pictureIds: propPictureIds = [],
-    thumbnailLayout = 'strip',
-    imageFit = 'cover',
-    thumbnailsPosition = 'bottom',
-    thumbnailsOrientation = 'horizontal',
-    zoomEnabled = false,
-    showVersions = false,
-    showTitle = false,
-    showDescription = false,
-    autoPlayVideos = false,
-    thumbnailsClassName = '',
-}) => {
-    const { user } = useAuth();
-
-    const normalizePictureIds = (ids: any): string[] => {
-        if (!ids) return [];
-        if (Array.isArray(ids)) return ids;
-        if (typeof ids === 'string') return [ids];
-        return [];
-    };
-
-    const [pictureIds] = useState<string[]>(normalizePictureIds(propPictureIds));
-    const [mediaItems, setMediaItems] = useState<PostMediaItem[]>([]);
-    const [selectedItem, setSelectedItem] = useState<PostMediaItem | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [lightboxOpen, setLightboxOpen] = useState(false);
-    const preLightboxFocusRef = useRef<HTMLElement | null>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    // Keyboard: Space/Enter to open lightbox, arrows to navigate
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            const el = document.activeElement;
-            const isInput = el && (
-                el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ||
-                el.getAttribute('contenteditable') === 'true' ||
-                el.getAttribute('role') === 'textbox'
-            );
-            if (isInput || lightboxOpen || !containerRef.current?.contains(el)) return;
-
-            if (e.key === ' ' || e.key === 'Enter') {
-                e.preventDefault();
-                preLightboxFocusRef.current = document.activeElement as HTMLElement;
-                setLightboxOpen(true);
-            } else if (e.key === 'ArrowLeft' && selectedItem && mediaItems.length > 1) {
-                e.preventDefault();
-                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
-                if (idx > 0) setSelectedItem(mediaItems[idx - 1]);
-            } else if (e.key === 'ArrowRight' && selectedItem && mediaItems.length > 1) {
-                e.preventDefault();
-                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
-                if (idx < mediaItems.length - 1) setSelectedItem(mediaItems[idx + 1]);
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [lightboxOpen, selectedItem, mediaItems]);
-
-    useEffect(() => {
-        if (pictureIds && pictureIds.length > 0) {
-            fetchMediaItems();
-        } else {
-            setMediaItems([]);
-            setSelectedItem(null);
-        }
-    }, [pictureIds]);
-
-    const fetchMediaItems = async () => {
-        if (!pictureIds || pictureIds.length === 0) return;
-
-        setLoading(true);
-        try {
-            const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-            const dbIds = pictureIds.filter(id => uuidRegex.test(id));
-            const vfsIds = pictureIds.filter(id => !uuidRegex.test(id));
-
-            let dbItems: any[] = [];
-            if (dbIds.length > 0) {
-                dbItems = await fetchMediaItemsByIds(dbIds, { maintainOrder: false });
-            }
-
-            const vfsItems = vfsIds.map(url => {
-                const mediaType = detectMediaType(url);
-                return {
-                    id: url,
-                    title: url.split('/').pop() || 'File',
-                    description: null,
-                    image_url: url,
-                    thumbnail_url: url,
-                    user_id: user?.id || 'anon',
-                    type: mediaType,
-                    mediaType: mediaType,
-                    meta: {},
-                    created_at: new Date().toISOString(),
-                    updated_at: new Date().toISOString(),
-                };
-            });
-
-            const allFetchedItems = [...dbItems, ...vfsItems];
-            const orderedItems = pictureIds.map(id => allFetchedItems.find(item => item.id === id)).filter(Boolean);
-
-            const postMediaItems = orderedItems.map((item: any, index: number) => ({
-                ...item,
-                post_id: '',
-                position: index,
-                visible: true,
-                is_selected: false,
-                comments: [{ count: 0 }]
-            })) as any[];
-
-            // Fetch version siblings
-            const parentIds = new Set<string>();
-            const itemIds = new Set(postMediaItems.map((i: any) => i.id));
-            postMediaItems.forEach((item: any) => {
-                if (item.parent_id) parentIds.add(item.parent_id);
-            });
-
-            const userIds = [...new Set(postMediaItems.map((i: any) => i.user_id))];
-            let allSiblings: any[] = [];
-            if (showVersions && parentIds.size > 0 && userIds.length > 0) {
-                try {
-                    const userPics = await fetchUserPictures(userIds[0]);
-                    if (userPics && userPics.length > 0) {
-                        const picMap = new Map(userPics.map((p: any) => [p.id, p]));
-
-                        for (const item of postMediaItems) {
-                            let rootId = item.id;
-                            let cur: any = picMap.get(item.id);
-                            while (cur?.parent_id && picMap.has(cur.parent_id)) {
-                                rootId = cur.parent_id;
-                                cur = picMap.get(rootId);
-                            }
-
-                            const visited = new Set<string>();
-                            const collect = (nodeId: string) => {
-                                if (visited.has(nodeId)) return;
-                                const node = picMap.get(nodeId);
-                                if (!node) return;
-                                visited.add(nodeId);
-                                if (!itemIds.has(nodeId)) {
-                                    allSiblings.push(node);
-                                    itemIds.add(nodeId);
-                                }
-                                userPics.filter((p: any) => p.parent_id === nodeId).forEach((child: any) => collect(child.id));
-                            };
-                            collect(rootId);
-                        }
-                    }
-                } catch (err) {
-                    console.warn('Error fetching version siblings:', err);
-                }
-            }
-
-            const siblingMediaItems = allSiblings.map((sib: any, i: number) => ({
-                ...sib,
-                image_url: sib.image_url || '',
-                thumbnail_url: sib.thumbnail_url || null,
-                mediaType: sib.type || sib.mediaType || 'supabase-image',
-                post_id: '',
-                position: postMediaItems.length + i,
-                visible: true,
-                is_selected: sib.is_selected || false,
-                comments: [{ count: 0 }],
-                created_at: sib.created_at || new Date().toISOString(),
-                updated_at: sib.updated_at || new Date().toISOString(),
-                likes_count: 0,
-                tags: sib.tags || null,
-                flags: sib.flags || null,
-                organization_id: sib.organization_id || null,
-                parent_id: sib.parent_id || null,
-            })) as any[];
-
-            const allItems = [...postMediaItems, ...siblingMediaItems];
-            setMediaItems(allItems);
-
-            if (postMediaItems.length > 0 && !selectedItem) {
-                setSelectedItem(postMediaItems[0]);
-            }
-        } catch (error) {
-            console.error('Error fetching gallery media:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleMediaSelect = (item: PostMediaItem) => {
-        setSelectedItem(item);
-    };
-
-    const handleExpand = (item: PostMediaItem) => {
-        setSelectedItem(item);
-        setLightboxOpen(true);
-    };
-
-    const handlePublish = async (option: 'overwrite' | 'new' | 'version', imageUrl: string, newTitle: string, description?: string, parentId?: string, collectionIds?: string[]) => {
-        console.log('Publish:', { option, imageUrl, newTitle, description, parentId, collectionIds });
-    };
-
-    const handleNavigateLightbox = (direction: 'prev' | 'next') => {
-        if (!selectedItem) return;
-        const currentIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
-        const newIndex = direction === 'next'
-            ? (currentIndex + 1) % mediaItems.length
-            : (currentIndex - 1 + mediaItems.length) % mediaItems.length;
-        setSelectedItem(mediaItems[newIndex]);
-    };
-
-    const handleOpenInWizard = () => {
-        console.log('Open in wizard:', selectedItem);
-    };
-
-    // Empty state
-    if (!pictureIds || pictureIds.length === 0) {
-        return (
-            <div className="flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed">
-                <ImageIcon className="w-16 h-16 text-muted-foreground mb-4" />
-                <p className="text-muted-foreground mb-4">
-                    <T>No pictures selected</T>
-                </p>
-            </div>
-        );
-    }
-
-    // Loading state
-    if (loading) {
-        return (
-            <div className="flex items-center justify-center h-full min-h-[400px]">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-            </div>
-        );
-    }
-
-    // Fallback
-    if (!selectedItem || mediaItems.length === 0) {
-        return (
-            <div className="flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed">
-                <p className="text-muted-foreground">
-                    <T>Loading gallery items...</T>
-                </p>
-            </div>
-        );
-    }
-
-    return (
-        <div
-            ref={containerRef}
-            tabIndex={0}
-            className="relative w-full aspect-video flex flex-col focus:outline-none dark:bg-slate-800/50 lg:rounded-lg p-2 md:p-6"
-        >
-            {/* Gallery Component */}
-            <div className="flex-1 w-full min-h-[500px]">
-                <Gallery
-                    mediaItems={mediaItems}
-                    selectedItem={selectedItem}
-                    onMediaSelect={handleMediaSelect}
-                    onExpand={handleExpand}
-                    isOwner={!!user}
-                    showDesktopLayout={true}
-                    thumbnailLayout={thumbnailLayout}
-                    imageFit={imageFit}
-                    thumbnailsPosition={thumbnailsPosition}
-                    thumbnailsOrientation={thumbnailsOrientation}
-                    zoomEnabled={zoomEnabled}
-                    showTitle={showTitle}
-                    showDescription={showDescription}
-                    thumbnailsClassName={thumbnailsClassName}
-                    autoPlayVideos={autoPlayVideos}
-                    className="h-full w-full [&_.hidden]:!block"
-                    isEditMode={false}
-                />
-            </div>
-
-            {/* Smart Lightbox */}
-            {selectedItem && lightboxOpen && (
-                <Suspense fallback={null}>
-                    <SmartLightbox
-                        isOpen={lightboxOpen}
-                        onClose={() => {
-                            setLightboxOpen(false);
-                            requestAnimationFrame(() => {
-                                preLightboxFocusRef.current?.focus();
-                                preLightboxFocusRef.current = null;
-                            });
-                        }}
-                        mediaItem={selectedItem}
-                        user={user}
-                        isVideo={isVideoType(normalizeMediaType(selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url)))}
-                        onPublish={handlePublish}
-                        onNavigate={handleNavigateLightbox}
-                        onOpenInWizard={handleOpenInWizard}
-                        currentIndex={mediaItems.findIndex(item => item.id === selectedItem.id)}
-                        totalCount={mediaItems.length}
-                    />
-                </Suspense>
-            )}
-        </div>
-    );
-};
-
-export default GalleryWidgetView;
+import React, { useState, useEffect, useRef, Suspense, lazy } from 'react';
+import { Gallery } from '@/modules/posts/views/renderers/components/Gallery';
+import { ImageIcon } from 'lucide-react';
+import { T } from '@/i18n';
+import { useAuth } from '@/hooks/useAuth';
+import { PostMediaItem } from '@/modules/posts/views/types';
+import { isVideoType, normalizeMediaType, detectMediaType } from '@/lib/mediaRegistry';
+import { fetchMediaItemsByIds, fetchUserPictures } from '@/modules/posts/client-pictures';
+import type { GalleryWidgetProps } from './GalleryWidgetTypes';
+
+const SmartLightbox = lazy(() => import('@/modules/posts/views/components/SmartLightbox'));
+
+const GalleryWidgetView: React.FC<GalleryWidgetProps> = ({
+    pictureIds: propPictureIds = [],
+    thumbnailLayout = 'strip',
+    imageFit = 'cover',
+    thumbnailsPosition = 'bottom',
+    thumbnailsOrientation = 'horizontal',
+    zoomEnabled = false,
+    showVersions = false,
+    showTitle = false,
+    showDescription = false,
+    autoPlayVideos = false,
+    thumbnailsClassName = '',
+}) => {
+    const { user } = useAuth();
+
+    const normalizePictureIds = (ids: any): string[] => {
+        if (!ids) return [];
+        if (Array.isArray(ids)) return ids;
+        if (typeof ids === 'string') return [ids];
+        return [];
+    };
+
+    const [pictureIds] = useState<string[]>(normalizePictureIds(propPictureIds));
+    const [mediaItems, setMediaItems] = useState<PostMediaItem[]>([]);
+    const [selectedItem, setSelectedItem] = useState<PostMediaItem | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const preLightboxFocusRef = useRef<HTMLElement | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Keyboard: Space/Enter to open lightbox, arrows to navigate
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            const el = document.activeElement;
+            const isInput = el && (
+                el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ||
+                el.getAttribute('contenteditable') === 'true' ||
+                el.getAttribute('role') === 'textbox'
+            );
+            if (isInput || lightboxOpen || !containerRef.current?.contains(el)) return;
+
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                preLightboxFocusRef.current = document.activeElement as HTMLElement;
+                setLightboxOpen(true);
+            } else if (e.key === 'ArrowLeft' && selectedItem && mediaItems.length > 1) {
+                e.preventDefault();
+                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
+                if (idx > 0) setSelectedItem(mediaItems[idx - 1]);
+            } else if (e.key === 'ArrowRight' && selectedItem && mediaItems.length > 1) {
+                e.preventDefault();
+                const idx = mediaItems.findIndex(i => i.id === selectedItem.id);
+                if (idx < mediaItems.length - 1) setSelectedItem(mediaItems[idx + 1]);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [lightboxOpen, selectedItem, mediaItems]);
+
+    useEffect(() => {
+        if (pictureIds && pictureIds.length > 0) {
+            fetchMediaItems();
+        } else {
+            setMediaItems([]);
+            setSelectedItem(null);
+        }
+    }, [pictureIds]);
+
+    const fetchMediaItems = async () => {
+        if (!pictureIds || pictureIds.length === 0) return;
+
+        setLoading(true);
+        try {
+            const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+            const dbIds = pictureIds.filter(id => uuidRegex.test(id));
+            const vfsIds = pictureIds.filter(id => !uuidRegex.test(id));
+
+            let dbItems: any[] = [];
+            if (dbIds.length > 0) {
+                dbItems = await fetchMediaItemsByIds(dbIds, { maintainOrder: false });
+            }
+
+            const vfsItems = vfsIds.map(url => {
+                const mediaType = detectMediaType(url);
+                return {
+                    id: url,
+                    title: url.split('/').pop() || 'File',
+                    description: null,
+                    image_url: url,
+                    thumbnail_url: url,
+                    user_id: user?.id || 'anon',
+                    type: mediaType,
+                    mediaType: mediaType,
+                    meta: {},
+                    created_at: new Date().toISOString(),
+                    updated_at: new Date().toISOString(),
+                };
+            });
+
+            const allFetchedItems = [...dbItems, ...vfsItems];
+            const orderedItems = pictureIds.map(id => allFetchedItems.find(item => item.id === id)).filter(Boolean);
+
+            const postMediaItems = orderedItems.map((item: any, index: number) => ({
+                ...item,
+                post_id: '',
+                position: index,
+                visible: true,
+                is_selected: false,
+                comments: [{ count: 0 }]
+            })) as any[];
+
+            // Fetch version siblings
+            const parentIds = new Set<string>();
+            const itemIds = new Set(postMediaItems.map((i: any) => i.id));
+            postMediaItems.forEach((item: any) => {
+                if (item.parent_id) parentIds.add(item.parent_id);
+            });
+
+            const userIds = [...new Set(postMediaItems.map((i: any) => i.user_id))];
+            let allSiblings: any[] = [];
+            if (showVersions && parentIds.size > 0 && userIds.length > 0) {
+                try {
+                    const userPics = await fetchUserPictures(userIds[0]);
+                    if (userPics && userPics.length > 0) {
+                        const picMap = new Map(userPics.map((p: any) => [p.id, p]));
+
+                        for (const item of postMediaItems) {
+                            let rootId = item.id;
+                            let cur: any = picMap.get(item.id);
+                            while (cur?.parent_id && picMap.has(cur.parent_id)) {
+                                rootId = cur.parent_id;
+                                cur = picMap.get(rootId);
+                            }
+
+                            const visited = new Set<string>();
+                            const collect = (nodeId: string) => {
+                                if (visited.has(nodeId)) return;
+                                const node = picMap.get(nodeId);
+                                if (!node) return;
+                                visited.add(nodeId);
+                                if (!itemIds.has(nodeId)) {
+                                    allSiblings.push(node);
+                                    itemIds.add(nodeId);
+                                }
+                                userPics.filter((p: any) => p.parent_id === nodeId).forEach((child: any) => collect(child.id));
+                            };
+                            collect(rootId);
+                        }
+                    }
+                } catch (err) {
+                    console.warn('Error fetching version siblings:', err);
+                }
+            }
+
+            const siblingMediaItems = allSiblings.map((sib: any, i: number) => ({
+                ...sib,
+                image_url: sib.image_url || '',
+                thumbnail_url: sib.thumbnail_url || null,
+                mediaType: sib.type || sib.mediaType || 'supabase-image',
+                post_id: '',
+                position: postMediaItems.length + i,
+                visible: true,
+                is_selected: sib.is_selected || false,
+                comments: [{ count: 0 }],
+                created_at: sib.created_at || new Date().toISOString(),
+                updated_at: sib.updated_at || new Date().toISOString(),
+                likes_count: 0,
+                tags: sib.tags || null,
+                flags: sib.flags || null,
+                organization_id: sib.organization_id || null,
+                parent_id: sib.parent_id || null,
+            })) as any[];
+
+            const allItems = [...postMediaItems, ...siblingMediaItems];
+            setMediaItems(allItems);
+
+            if (postMediaItems.length > 0 && !selectedItem) {
+                setSelectedItem(postMediaItems[0]);
+            }
+        } catch (error) {
+            console.error('Error fetching gallery media:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleMediaSelect = (item: PostMediaItem) => {
+        setSelectedItem(item);
+    };
+
+    const handleExpand = (item: PostMediaItem) => {
+        setSelectedItem(item);
+        setLightboxOpen(true);
+    };
+
+    const handlePublish = async (option: 'overwrite' | 'new' | 'version', imageUrl: string, newTitle: string, description?: string, parentId?: string, collectionIds?: string[]) => {
+        console.log('Publish:', { option, imageUrl, newTitle, description, parentId, collectionIds });
+    };
+
+    const handleNavigateLightbox = (direction: 'prev' | 'next') => {
+        if (!selectedItem) return;
+        const currentIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
+        const newIndex = direction === 'next'
+            ? (currentIndex + 1) % mediaItems.length
+            : (currentIndex - 1 + mediaItems.length) % mediaItems.length;
+        setSelectedItem(mediaItems[newIndex]);
+    };
+
+    const handleOpenInWizard = () => {
+        console.log('Open in wizard:', selectedItem);
+    };
+
+    // Empty state
+    if (!pictureIds || pictureIds.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed">
+                <ImageIcon className="w-16 h-16 text-muted-foreground mb-4" />
+                <p className="text-muted-foreground mb-4">
+                    <T>No pictures selected</T>
+                </p>
+            </div>
+        );
+    }
+
+    // Loading state
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-full min-h-[400px]">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    // Fallback
+    if (!selectedItem || mediaItems.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full min-h-[400px] bg-muted/30 border-1 border-dashed">
+                <p className="text-muted-foreground">
+                    <T>Loading gallery items...</T>
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            ref={containerRef}
+            tabIndex={0}
+            className="relative w-full aspect-video flex flex-col focus:outline-none dark:bg-slate-800/50 lg:rounded-lg p-2 md:p-6"
+        >
+            {/* Gallery Component */}
+            <div className="flex-1 w-full min-h-[500px]">
+                <Gallery
+                    mediaItems={mediaItems}
+                    selectedItem={selectedItem}
+                    onMediaSelect={handleMediaSelect}
+                    onExpand={handleExpand}
+                    isOwner={!!user}
+                    showDesktopLayout={true}
+                    thumbnailLayout={thumbnailLayout}
+                    imageFit={imageFit}
+                    thumbnailsPosition={thumbnailsPosition}
+                    thumbnailsOrientation={thumbnailsOrientation}
+                    zoomEnabled={zoomEnabled}
+                    showTitle={showTitle}
+                    showDescription={showDescription}
+                    thumbnailsClassName={thumbnailsClassName}
+                    autoPlayVideos={autoPlayVideos}
+                    className="h-full w-full [&_.hidden]:!block"
+                    isEditMode={false}
+                />
+            </div>
+
+            {/* Smart Lightbox */}
+            {selectedItem && lightboxOpen && (
+                <Suspense fallback={null}>
+                    <SmartLightbox
+                        isOpen={lightboxOpen}
+                        onClose={() => {
+                            setLightboxOpen(false);
+                            requestAnimationFrame(() => {
+                                preLightboxFocusRef.current?.focus();
+                                preLightboxFocusRef.current = null;
+                            });
+                        }}
+                        mediaItem={selectedItem}
+                        user={user}
+                        isVideo={isVideoType(normalizeMediaType(selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url)))}
+                        onPublish={handlePublish}
+                        onNavigate={handleNavigateLightbox}
+                        onOpenInWizard={handleOpenInWizard}
+                        currentIndex={mediaItems.findIndex(item => item.id === selectedItem.id)}
+                        totalCount={mediaItems.length}
+                    />
+                </Suspense>
+            )}
+        </div>
+    );
+};
+
+export default GalleryWidgetView;
diff --git a/packages/ui/src/components/widgets/MarkdownTextWidget.tsx b/packages/ui/src/components/widgets/MarkdownTextWidget.tsx
index f9292217..6fb52e53 100644
--- a/packages/ui/src/components/widgets/MarkdownTextWidget.tsx
+++ b/packages/ui/src/components/widgets/MarkdownTextWidget.tsx
@@ -138,4 +138,4 @@ const MarkdownTextWidget: React.FC<MarkdownTextWidgetProps> = ({
   );
 };
 
-export default MarkdownTextWidget;
\ No newline at end of file
+export default MarkdownTextWidget;
diff --git a/packages/ui/src/components/widgets/MenuWidget.tsx b/packages/ui/src/components/widgets/MenuWidget.tsx
index b9a48437..2d92e01b 100644
--- a/packages/ui/src/components/widgets/MenuWidget.tsx
+++ b/packages/ui/src/components/widgets/MenuWidget.tsx
@@ -1,69 +1,69 @@
-import React, { lazy, Suspense } from 'react';
-import MenuWidgetView from './MenuWidgetView';
-
-// Re-export types so existing consumers keep working
-export type { MenuItemData, MenuWidgetViewProps } from './MenuWidgetView';
-export type { MenuWidgetEditProps } from './MenuWidgetEdit';
-
-// Lazy-load the heavy edit component (dnd-kit, PagePicker, CategoryManager, FileBrowser, etc.)
-const MenuWidgetEdit = lazy(() => import('./MenuWidgetEdit'));
-
-export interface MenuWidgetProps {
-    items?: any[];
-    orientation?: 'horizontal' | 'vertical';
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    align?: 'left' | 'center' | 'right';
-    variant?: 'plain' | 'bar' | 'glass' | 'pill' | 'underline';
-    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    bg?: 'none' | 'custom' | 'muted' | 'dark' | 'primary' | 'accent'
-        | 'gradient-primary' | 'gradient-dark' | 'gradient-ocean'
-        | 'gradient-sunset' | 'gradient-forest' | 'gradient-brand';
-    bgFrom?: string;
-    bgTo?: string;
-    isEditMode?: boolean;
-    onPropsChange?: (props: Record<string, any>) => void;
-    [key: string]: any;
-}
-
-const MenuWidget: React.FC<MenuWidgetProps> = (props) => {
-    if (!props.isEditMode) {
-        return (
-            <MenuWidgetView
-                items={props.items}
-                orientation={props.orientation}
-                size={props.size}
-                align={props.align}
-                variant={props.variant}
-                padding={props.padding}
-                margin={props.margin}
-                bg={props.bg}
-                bgFrom={props.bgFrom}
-                bgTo={props.bgTo}
-            />
-        );
-    }
-
-    return (
-        <Suspense
-            fallback={
-                <MenuWidgetView
-                    items={props.items}
-                    orientation={props.orientation}
-                    size={props.size}
-                    align={props.align}
-                    variant={props.variant}
-                    padding={props.padding}
-                    margin={props.margin}
-                    bg={props.bg}
-                    bgFrom={props.bgFrom}
-                    bgTo={props.bgTo}
-                />
-            }
-        >
-            <MenuWidgetEdit {...props} />
-        </Suspense>
-    );
-};
-
-export default MenuWidget;
+import React, { lazy, Suspense } from 'react';
+import MenuWidgetView from './MenuWidgetView';
+
+// Re-export types so existing consumers keep working
+export type { MenuItemData, MenuWidgetViewProps } from './MenuWidgetView';
+export type { MenuWidgetEditProps } from './MenuWidgetEdit';
+
+// Lazy-load the heavy edit component (dnd-kit, PagePicker, CategoryManager, FileBrowser, etc.)
+const MenuWidgetEdit = lazy(() => import('./MenuWidgetEdit'));
+
+export interface MenuWidgetProps {
+    items?: any[];
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    align?: 'left' | 'center' | 'right';
+    variant?: 'plain' | 'bar' | 'glass' | 'pill' | 'underline';
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    bg?: 'none' | 'custom' | 'muted' | 'dark' | 'primary' | 'accent'
+        | 'gradient-primary' | 'gradient-dark' | 'gradient-ocean'
+        | 'gradient-sunset' | 'gradient-forest' | 'gradient-brand';
+    bgFrom?: string;
+    bgTo?: string;
+    isEditMode?: boolean;
+    onPropsChange?: (props: Record<string, any>) => void;
+    [key: string]: any;
+}
+
+const MenuWidget: React.FC<MenuWidgetProps> = (props) => {
+    if (!props.isEditMode) {
+        return (
+            <MenuWidgetView
+                items={props.items}
+                orientation={props.orientation}
+                size={props.size}
+                align={props.align}
+                variant={props.variant}
+                padding={props.padding}
+                margin={props.margin}
+                bg={props.bg}
+                bgFrom={props.bgFrom}
+                bgTo={props.bgTo}
+            />
+        );
+    }
+
+    return (
+        <Suspense
+            fallback={
+                <MenuWidgetView
+                    items={props.items}
+                    orientation={props.orientation}
+                    size={props.size}
+                    align={props.align}
+                    variant={props.variant}
+                    padding={props.padding}
+                    margin={props.margin}
+                    bg={props.bg}
+                    bgFrom={props.bgFrom}
+                    bgTo={props.bgTo}
+                />
+            }
+        >
+            <MenuWidgetEdit {...props} />
+        </Suspense>
+    );
+};
+
+export default MenuWidget;
diff --git a/packages/ui/src/components/widgets/MenuWidgetEdit.tsx b/packages/ui/src/components/widgets/MenuWidgetEdit.tsx
index edad1398..5ec75f8e 100644
--- a/packages/ui/src/components/widgets/MenuWidgetEdit.tsx
+++ b/packages/ui/src/components/widgets/MenuWidgetEdit.tsx
@@ -1,411 +1,411 @@
-import React, { useState, useCallback } from 'react';
-import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragEndEvent } from '@dnd-kit/core';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { cn } from '@/lib/utils';
-import { T, translate } from '@/i18n';
-import {
-    Plus,
-    Trash2,
-    GripVertical,
-    FileText,
-    FolderTree,
-    FolderOpen,
-    Link as LinkIcon,
-    Menu as MenuIcon,
-    Pencil,
-} from 'lucide-react';
-import { PagePickerDialog } from '@/modules/pages/PagePickerDialog';
-import { CategoryManager } from '@/components/widgets/CategoryManager';
-import { FileBrowserWidget } from '@/modules/storage/FileBrowserWidget';
-import type { INode } from '@/modules/storage/types';
-import type { MenuItemData } from './MenuWidgetView';
-import { typeIcon } from './MenuWidgetView';
-
-// ─── Types ────────────────────────────────────────────────────
-
-export interface MenuWidgetEditProps {
-    items?: MenuItemData[];
-    orientation?: 'horizontal' | 'vertical';
-    isEditMode?: boolean;
-    onPropsChange?: (props: Record<string, any>) => void;
-    [key: string]: any;
-}
-
-// ─── Helpers ──────────────────────────────────────────────────
-
-const generateId = () => Math.random().toString(36).substring(2, 9);
-
-const typeBadge = (type: MenuItemData['type']) => {
-    const colors: Record<string, string> = {
-        custom: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-        page: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
-        category: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
-        file: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
-    };
-    return (
-        <span className={cn('inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium', colors[type] || colors.custom)}>
-            {typeIcon(type)}
-            {type}
-        </span>
-    );
-};
-
-// ─── Sortable Item ────────────────────────────────────────────
-
-const SortableMenuItem = ({
-    item,
-    onRemove,
-    onUpdate,
-    onRePick,
-}: {
-    item: MenuItemData;
-    onRemove: (id: string) => void;
-    onUpdate: (id: string, updates: Partial<MenuItemData>) => void;
-    onRePick?: (item: MenuItemData) => void;
-}) => {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-    } = useSortable({ id: item.id });
-
-    const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-    };
-
-    return (
-        <div ref={setNodeRef} style={style} className="flex items-center gap-2 p-2 bg-muted/30 rounded-md border border-border/50 mb-1.5">
-            <button {...attributes} {...listeners} className="cursor-grab hover:text-foreground text-muted-foreground shrink-0">
-                <GripVertical className="h-4 w-4" />
-            </button>
-
-            {typeBadge(item.type)}
-
-            <Input
-                value={item.label}
-                onChange={(e) => onUpdate(item.id, { label: e.target.value })}
-                className="h-7 text-sm flex-1 min-w-0"
-                placeholder={translate("Label")}
-            />
-
-            {item.type === 'custom' && (
-                <Input
-                    value={item.href || ''}
-                    onChange={(e) => onUpdate(item.id, { href: e.target.value })}
-                    className="h-7 text-xs w-36 text-muted-foreground"
-                    placeholder="https://..."
-                />
-            )}
-
-            {item.type !== 'custom' && onRePick && (
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => onRePick(item)}
-                    className="h-7 w-7 p-0 text-muted-foreground hover:text-primary shrink-0"
-                    title={translate('Change source')}
-                >
-                    <Pencil className="h-3.5 w-3.5" />
-                </Button>
-            )}
-
-            {item.type === 'category' && (
-                <label
-                    className="flex items-center gap-1 text-[10px] text-muted-foreground cursor-pointer select-none shrink-0"
-                    title={translate('Show subcategories')}
-                >
-                    <input
-                        type="checkbox"
-                        checked={!!item.showChildren}
-                        onChange={(e) => onUpdate(item.id, { showChildren: e.target.checked })}
-                        className="h-3 w-3 rounded"
-                    />
-                    <T>Subs</T>
-                </label>
-            )}
-
-            <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => onRemove(item.id)}
-                className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive shrink-0"
-            >
-                <Trash2 className="h-3.5 w-3.5" />
-            </Button>
-        </div>
-    );
-};
-
-// ─── Edit Component ───────────────────────────────────────────
-
-const MenuWidgetEdit: React.FC<MenuWidgetEditProps> = ({
-    items = [],
-    onPropsChange,
-}) => {
-    const [showPagePicker, setShowPagePicker] = useState(false);
-    const [showCategoryPicker, setShowCategoryPicker] = useState(false);
-    const [showFilePicker, setShowFilePicker] = useState(false);
-    const [filePickerMount, setFilePickerMount] = useState('home');
-    const [filePickerPath, setFilePickerPath] = useState('/');
-    const [editingItemId, setEditingItemId] = useState<string | null>(null);
-    const [selectedFileNode, setSelectedFileNode] = useState<INode | null>(null);
-
-    const sensors = useSensors(
-        useSensor(PointerSensor),
-        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-    );
-
-    // ── Mutation helpers ──
-
-    const updateItems = useCallback((newItems: MenuItemData[]) => {
-        onPropsChange?.({ items: newItems });
-        console.log(newItems);
-    }, [onPropsChange]);
-
-    const handleDragEnd = useCallback((event: DragEndEvent) => {
-        const { active, over } = event;
-        if (over && active.id !== over.id) {
-            const oldIndex = items.findIndex(i => i.id === active.id);
-            const newIndex = items.findIndex(i => i.id === over.id);
-            updateItems(arrayMove(items, oldIndex, newIndex));
-        }
-    }, [items, updateItems]);
-
-    const handleAddCustom = useCallback(() => {
-        const newItem: MenuItemData = {
-            id: generateId(),
-            label: 'New Link',
-            type: 'custom',
-            href: '',
-        };
-        updateItems([...items, newItem]);
-    }, [items, updateItems]);
-
-    const handleUpdate = useCallback((id: string, updates: Partial<MenuItemData>) => {
-        updateItems(items.map(i => i.id === id ? { ...i, ...updates } : i));
-    }, [items, updateItems]);
-
-    const handleRemove = useCallback((id: string) => {
-        updateItems(items.filter(i => i.id !== id));
-    }, [items, updateItems]);
-
-    const handleRePick = useCallback((item: MenuItemData) => {
-        setEditingItemId(item.id);
-        if (item.type === 'page') setShowPagePicker(true);
-        else if (item.type === 'category') setShowCategoryPicker(true);
-        else if (item.type === 'file') setShowFilePicker(true);
-    }, []);
-
-    const handlePageSelect = useCallback((page: any | null) => {
-        if (!page) return;
-        console.log(page);
-        const updates = {
-            label: page.title || 'Page',
-            type: 'page' as const,
-            targetPageId: page.id,
-            targetPageSlug: page.slug,
-            targetPageOwner: page.user_id || page.owner,
-        };
-        if (editingItemId) {
-            handleUpdate(editingItemId, updates);
-            setEditingItemId(null);
-        } else {
-            updateItems([...items, { id: generateId(), ...updates }]);
-        }
-    }, [items, updateItems, editingItemId, handleUpdate]);
-
-    const handleCategoryPick = useCallback((categoryIds: string[], allCategories?: any[]) => {
-        const catMap = new Map((allCategories || []).map(c => [c.id, c]));
-        if (editingItemId) {
-            const catId = categoryIds[0];
-            const cat = catMap.get(catId);
-            handleUpdate(editingItemId, {
-                label: cat?.name || 'Category',
-                type: 'category' as const,
-                categoryId: catId,
-                categorySlug: cat?.slug || catId,
-            });
-            setEditingItemId(null);
-        } else {
-            const existing = new Set(items.filter(i => i.type === 'category').map(i => i.categoryId));
-            const newOnes = categoryIds.filter(id => !existing.has(id));
-            if (newOnes.length === 0) return;
-            const additions: MenuItemData[] = newOnes.map(id => {
-                const cat = catMap.get(id);
-                return {
-                    id: generateId(),
-                    label: cat?.name || 'Category',
-                    type: 'category' as const,
-                    categoryId: id,
-                    categorySlug: cat?.slug || id,
-                };
-            });
-            updateItems([...items, ...additions]);
-        }
-    }, [items, updateItems, editingItemId, handleUpdate]);
-
-    const handleFileConfirm = useCallback(() => {
-        if (!selectedFileNode) return;
-        const nodeName = selectedFileNode.name || selectedFileNode.path.split('/').pop() || selectedFileNode.path;
-        const updates = {
-            label: nodeName,
-            type: 'file' as const,
-            fileMount: filePickerMount,
-            filePath: selectedFileNode.path,
-            openInNewTab: true,
-        };
-        if (editingItemId) {
-            handleUpdate(editingItemId, updates);
-            setEditingItemId(null);
-        } else {
-            updateItems([...items, { id: generateId(), ...updates }]);
-        }
-        setSelectedFileNode(null);
-        setShowFilePicker(false);
-    }, [items, updateItems, filePickerMount, selectedFileNode, editingItemId, handleUpdate]);
-
-    return (
-        <div className="p-3 pb-20 space-y-3">
-            {/* Header */}
-            <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-                    <MenuIcon className="h-4 w-4" />
-                    <T>Menu</T>
-                    <span className="text-xs">({items.length})</span>
-                </div>
-
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline" size="sm" className="h-7 text-xs">
-                            <Plus className="h-3 w-3 mr-1" />
-                            <T>Add Link</T>
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={handleAddCustom}>
-                            <LinkIcon className="mr-2 h-4 w-4" />
-                            <T>Custom Link</T>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => setShowPagePicker(true)}>
-                            <FileText className="mr-2 h-4 w-4" />
-                            <T>Internal Page</T>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => setShowCategoryPicker(true)}>
-                            <FolderTree className="mr-2 h-4 w-4" />
-                            <T>Category</T>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => setShowFilePicker(true)}>
-                            <FolderOpen className="mr-2 h-4 w-4" />
-                            <T>File / Folder</T>
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </div>
-
-            {/* Sortable Items */}
-            {items.length === 0 ? (
-                <div className="text-center py-8 text-muted-foreground text-sm border border-dashed rounded-md">
-                    <MenuIcon className="h-8 w-8 mx-auto mb-2 opacity-30" />
-                    <T>No menu items yet. Click "Add Link" to get started.</T>
-                </div>
-            ) : (
-                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-                    <SortableContext items={items.map(i => i.id)} strategy={verticalListSortingStrategy}>
-                        {items.map(item => (
-                            <SortableMenuItem
-                                key={item.id}
-                                item={item}
-                                onRemove={handleRemove}
-                                onUpdate={handleUpdate}
-                                onRePick={handleRePick}
-                            />
-                        ))}
-                    </SortableContext>
-                </DndContext>
-            )}
-
-            {/* Page Picker Dialog */}
-            <PagePickerDialog
-                isOpen={showPagePicker}
-                onClose={() => setShowPagePicker(false)}
-                onSelect={handlePageSelect}
-            />
-
-            {/* Category Picker Dialog */}
-            <CategoryManager
-                isOpen={showCategoryPicker}
-                onClose={() => setShowCategoryPicker(false)}
-                mode="pick"
-                filterByType="pages"
-                onPick={handleCategoryPick}
-                selectedCategoryIds={items.filter(i => i.type === 'category').map(i => i.categoryId!).filter(Boolean)}
-            />
-
-            {/* File Picker Dialog */}
-            <Dialog open={showFilePicker} onOpenChange={(open) => { if (!open) { setShowFilePicker(false); setSelectedFileNode(null); } }}>
-                <DialogContent className="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
-                    <DialogHeader>
-                        <DialogTitle><T>Select File or Folder</T></DialogTitle>
-                        <DialogDescription>
-                            <T>Pick a file or folder to add as a menu link (opens in new tab)</T>
-                        </DialogDescription>
-                    </DialogHeader>
-                    <div className="flex-1 min-h-0 overflow-hidden" style={{ height: 400 }}>
-                        <FileBrowserWidget
-                            mount={filePickerMount}
-                            path={filePickerPath}
-                            mode="simple"
-                            viewMode="list"
-                            showToolbar={true}
-                            canChangeMount={true}
-                            allowFileViewer={false}
-                            allowLightbox={false}
-                            allowDownload={false}
-                            jail={false}
-                            minHeight="400px"
-                            showStatusBar={false}
-                            glob="*.*"
-                            sortBy="name"
-                            onSelectNode={(node: INode | null) => setSelectedFileNode(node)}
-                            onMountChange={(m: string) => {
-                                setFilePickerMount(m);
-                                setFilePickerPath('/');
-                                setSelectedFileNode(null);
-                            }}
-                            onPathChange={(p: string) => setFilePickerPath(p)}
-                        />
-                    </div>
-                    {selectedFileNode && (
-                        <div className="px-3 py-2 bg-muted/50 rounded-md text-sm flex items-center gap-2">
-                            <FolderOpen className="h-4 w-4 text-muted-foreground shrink-0" />
-                            <span className="truncate">{selectedFileNode.name || selectedFileNode.path}</span>
-                        </div>
-                    )}
-                    <div className="flex justify-end gap-2 pt-3 border-t">
-                        <Button variant="outline" onClick={() => { setShowFilePicker(false); setSelectedFileNode(null); }} type="button">
-                            <T>Cancel</T>
-                        </Button>
-                        <Button onClick={handleFileConfirm} disabled={!selectedFileNode} type="button">
-                            <T>Select</T>
-                        </Button>
-                    </div>
-                </DialogContent>
-            </Dialog>
-        </div>
-    );
-};
-
-export default MenuWidgetEdit;
+import React, { useState, useCallback } from 'react';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragEndEvent } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import { T, translate } from '@/i18n';
+import {
+    Plus,
+    Trash2,
+    GripVertical,
+    FileText,
+    FolderTree,
+    FolderOpen,
+    Link as LinkIcon,
+    Menu as MenuIcon,
+    Pencil,
+} from 'lucide-react';
+import { PagePickerDialog } from '@/modules/pages/PagePickerDialog';
+import { CategoryManager } from '@/components/widgets/CategoryManager';
+import { FileBrowserWidget } from '@/modules/storage/FileBrowserWidget';
+import type { INode } from '@/modules/storage/types';
+import type { MenuItemData } from './MenuWidgetView';
+import { typeIcon } from './MenuWidgetView';
+
+// ─── Types ────────────────────────────────────────────────────
+
+export interface MenuWidgetEditProps {
+    items?: MenuItemData[];
+    orientation?: 'horizontal' | 'vertical';
+    isEditMode?: boolean;
+    onPropsChange?: (props: Record<string, any>) => void;
+    [key: string]: any;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────
+
+const generateId = () => Math.random().toString(36).substring(2, 9);
+
+const typeBadge = (type: MenuItemData['type']) => {
+    const colors: Record<string, string> = {
+        custom: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+        page: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
+        category: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
+        file: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
+    };
+    return (
+        <span className={cn('inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium', colors[type] || colors.custom)}>
+            {typeIcon(type)}
+            {type}
+        </span>
+    );
+};
+
+// ─── Sortable Item ────────────────────────────────────────────
+
+const SortableMenuItem = ({
+    item,
+    onRemove,
+    onUpdate,
+    onRePick,
+}: {
+    item: MenuItemData;
+    onRemove: (id: string) => void;
+    onUpdate: (id: string, updates: Partial<MenuItemData>) => void;
+    onRePick?: (item: MenuItemData) => void;
+}) => {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({ id: item.id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} className="flex items-center gap-2 p-2 bg-muted/30 rounded-md border border-border/50 mb-1.5">
+            <button {...attributes} {...listeners} className="cursor-grab hover:text-foreground text-muted-foreground shrink-0">
+                <GripVertical className="h-4 w-4" />
+            </button>
+
+            {typeBadge(item.type)}
+
+            <Input
+                value={item.label}
+                onChange={(e) => onUpdate(item.id, { label: e.target.value })}
+                className="h-7 text-sm flex-1 min-w-0"
+                placeholder={translate("Label")}
+            />
+
+            {item.type === 'custom' && (
+                <Input
+                    value={item.href || ''}
+                    onChange={(e) => onUpdate(item.id, { href: e.target.value })}
+                    className="h-7 text-xs w-36 text-muted-foreground"
+                    placeholder="https://..."
+                />
+            )}
+
+            {item.type !== 'custom' && onRePick && (
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onRePick(item)}
+                    className="h-7 w-7 p-0 text-muted-foreground hover:text-primary shrink-0"
+                    title={translate('Change source')}
+                >
+                    <Pencil className="h-3.5 w-3.5" />
+                </Button>
+            )}
+
+            {item.type === 'category' && (
+                <label
+                    className="flex items-center gap-1 text-[10px] text-muted-foreground cursor-pointer select-none shrink-0"
+                    title={translate('Show subcategories')}
+                >
+                    <input
+                        type="checkbox"
+                        checked={!!item.showChildren}
+                        onChange={(e) => onUpdate(item.id, { showChildren: e.target.checked })}
+                        className="h-3 w-3 rounded"
+                    />
+                    <T>Subs</T>
+                </label>
+            )}
+
+            <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onRemove(item.id)}
+                className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive shrink-0"
+            >
+                <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+        </div>
+    );
+};
+
+// ─── Edit Component ───────────────────────────────────────────
+
+const MenuWidgetEdit: React.FC<MenuWidgetEditProps> = ({
+    items = [],
+    onPropsChange,
+}) => {
+    const [showPagePicker, setShowPagePicker] = useState(false);
+    const [showCategoryPicker, setShowCategoryPicker] = useState(false);
+    const [showFilePicker, setShowFilePicker] = useState(false);
+    const [filePickerMount, setFilePickerMount] = useState('home');
+    const [filePickerPath, setFilePickerPath] = useState('/');
+    const [editingItemId, setEditingItemId] = useState<string | null>(null);
+    const [selectedFileNode, setSelectedFileNode] = useState<INode | null>(null);
+
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    );
+
+    // ── Mutation helpers ──
+
+    const updateItems = useCallback((newItems: MenuItemData[]) => {
+        onPropsChange?.({ items: newItems });
+        console.log(newItems);
+    }, [onPropsChange]);
+
+    const handleDragEnd = useCallback((event: DragEndEvent) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = items.findIndex(i => i.id === active.id);
+            const newIndex = items.findIndex(i => i.id === over.id);
+            updateItems(arrayMove(items, oldIndex, newIndex));
+        }
+    }, [items, updateItems]);
+
+    const handleAddCustom = useCallback(() => {
+        const newItem: MenuItemData = {
+            id: generateId(),
+            label: 'New Link',
+            type: 'custom',
+            href: '',
+        };
+        updateItems([...items, newItem]);
+    }, [items, updateItems]);
+
+    const handleUpdate = useCallback((id: string, updates: Partial<MenuItemData>) => {
+        updateItems(items.map(i => i.id === id ? { ...i, ...updates } : i));
+    }, [items, updateItems]);
+
+    const handleRemove = useCallback((id: string) => {
+        updateItems(items.filter(i => i.id !== id));
+    }, [items, updateItems]);
+
+    const handleRePick = useCallback((item: MenuItemData) => {
+        setEditingItemId(item.id);
+        if (item.type === 'page') setShowPagePicker(true);
+        else if (item.type === 'category') setShowCategoryPicker(true);
+        else if (item.type === 'file') setShowFilePicker(true);
+    }, []);
+
+    const handlePageSelect = useCallback((page: any | null) => {
+        if (!page) return;
+        console.log(page);
+        const updates = {
+            label: page.title || 'Page',
+            type: 'page' as const,
+            targetPageId: page.id,
+            targetPageSlug: page.slug,
+            targetPageOwner: page.user_id || page.owner,
+        };
+        if (editingItemId) {
+            handleUpdate(editingItemId, updates);
+            setEditingItemId(null);
+        } else {
+            updateItems([...items, { id: generateId(), ...updates }]);
+        }
+    }, [items, updateItems, editingItemId, handleUpdate]);
+
+    const handleCategoryPick = useCallback((categoryIds: string[], allCategories?: any[]) => {
+        const catMap = new Map((allCategories || []).map(c => [c.id, c]));
+        if (editingItemId) {
+            const catId = categoryIds[0];
+            const cat = catMap.get(catId);
+            handleUpdate(editingItemId, {
+                label: cat?.name || 'Category',
+                type: 'category' as const,
+                categoryId: catId,
+                categorySlug: cat?.slug || catId,
+            });
+            setEditingItemId(null);
+        } else {
+            const existing = new Set(items.filter(i => i.type === 'category').map(i => i.categoryId));
+            const newOnes = categoryIds.filter(id => !existing.has(id));
+            if (newOnes.length === 0) return;
+            const additions: MenuItemData[] = newOnes.map(id => {
+                const cat = catMap.get(id);
+                return {
+                    id: generateId(),
+                    label: cat?.name || 'Category',
+                    type: 'category' as const,
+                    categoryId: id,
+                    categorySlug: cat?.slug || id,
+                };
+            });
+            updateItems([...items, ...additions]);
+        }
+    }, [items, updateItems, editingItemId, handleUpdate]);
+
+    const handleFileConfirm = useCallback(() => {
+        if (!selectedFileNode) return;
+        const nodeName = selectedFileNode.name || selectedFileNode.path.split('/').pop() || selectedFileNode.path;
+        const updates = {
+            label: nodeName,
+            type: 'file' as const,
+            fileMount: filePickerMount,
+            filePath: selectedFileNode.path,
+            openInNewTab: true,
+        };
+        if (editingItemId) {
+            handleUpdate(editingItemId, updates);
+            setEditingItemId(null);
+        } else {
+            updateItems([...items, { id: generateId(), ...updates }]);
+        }
+        setSelectedFileNode(null);
+        setShowFilePicker(false);
+    }, [items, updateItems, filePickerMount, selectedFileNode, editingItemId, handleUpdate]);
+
+    return (
+        <div className="p-3 pb-20 space-y-3">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                    <MenuIcon className="h-4 w-4" />
+                    <T>Menu</T>
+                    <span className="text-xs">({items.length})</span>
+                </div>
+
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size="sm" className="h-7 text-xs">
+                            <Plus className="h-3 w-3 mr-1" />
+                            <T>Add Link</T>
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={handleAddCustom}>
+                            <LinkIcon className="mr-2 h-4 w-4" />
+                            <T>Custom Link</T>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setShowPagePicker(true)}>
+                            <FileText className="mr-2 h-4 w-4" />
+                            <T>Internal Page</T>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setShowCategoryPicker(true)}>
+                            <FolderTree className="mr-2 h-4 w-4" />
+                            <T>Category</T>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setShowFilePicker(true)}>
+                            <FolderOpen className="mr-2 h-4 w-4" />
+                            <T>File / Folder</T>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+
+            {/* Sortable Items */}
+            {items.length === 0 ? (
+                <div className="text-center py-8 text-muted-foreground text-sm border border-dashed rounded-md">
+                    <MenuIcon className="h-8 w-8 mx-auto mb-2 opacity-30" />
+                    <T>No menu items yet. Click "Add Link" to get started.</T>
+                </div>
+            ) : (
+                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                    <SortableContext items={items.map(i => i.id)} strategy={verticalListSortingStrategy}>
+                        {items.map(item => (
+                            <SortableMenuItem
+                                key={item.id}
+                                item={item}
+                                onRemove={handleRemove}
+                                onUpdate={handleUpdate}
+                                onRePick={handleRePick}
+                            />
+                        ))}
+                    </SortableContext>
+                </DndContext>
+            )}
+
+            {/* Page Picker Dialog */}
+            <PagePickerDialog
+                isOpen={showPagePicker}
+                onClose={() => setShowPagePicker(false)}
+                onSelect={handlePageSelect}
+            />
+
+            {/* Category Picker Dialog */}
+            <CategoryManager
+                isOpen={showCategoryPicker}
+                onClose={() => setShowCategoryPicker(false)}
+                mode="pick"
+                filterByType="pages"
+                onPick={handleCategoryPick}
+                selectedCategoryIds={items.filter(i => i.type === 'category').map(i => i.categoryId!).filter(Boolean)}
+            />
+
+            {/* File Picker Dialog */}
+            <Dialog open={showFilePicker} onOpenChange={(open) => { if (!open) { setShowFilePicker(false); setSelectedFileNode(null); } }}>
+                <DialogContent className="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
+                    <DialogHeader>
+                        <DialogTitle><T>Select File or Folder</T></DialogTitle>
+                        <DialogDescription>
+                            <T>Pick a file or folder to add as a menu link (opens in new tab)</T>
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="flex-1 min-h-0 overflow-hidden" style={{ height: 400 }}>
+                        <FileBrowserWidget
+                            mount={filePickerMount}
+                            path={filePickerPath}
+                            mode="simple"
+                            viewMode="list"
+                            showToolbar={true}
+                            canChangeMount={true}
+                            allowFileViewer={false}
+                            allowLightbox={false}
+                            allowDownload={false}
+                            jail={false}
+                            minHeight="400px"
+                            showStatusBar={false}
+                            glob="*.*"
+                            sortBy="name"
+                            onSelectNode={(node: INode | null) => setSelectedFileNode(node)}
+                            onMountChange={(m: string) => {
+                                setFilePickerMount(m);
+                                setFilePickerPath('/');
+                                setSelectedFileNode(null);
+                            }}
+                            onPathChange={(p: string) => setFilePickerPath(p)}
+                        />
+                    </div>
+                    {selectedFileNode && (
+                        <div className="px-3 py-2 bg-muted/50 rounded-md text-sm flex items-center gap-2">
+                            <FolderOpen className="h-4 w-4 text-muted-foreground shrink-0" />
+                            <span className="truncate">{selectedFileNode.name || selectedFileNode.path}</span>
+                        </div>
+                    )}
+                    <div className="flex justify-end gap-2 pt-3 border-t">
+                        <Button variant="outline" onClick={() => { setShowFilePicker(false); setSelectedFileNode(null); }} type="button">
+                            <T>Cancel</T>
+                        </Button>
+                        <Button onClick={handleFileConfirm} disabled={!selectedFileNode} type="button">
+                            <T>Select</T>
+                        </Button>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+};
+
+export default MenuWidgetEdit;
diff --git a/packages/ui/src/components/widgets/MenuWidgetView.tsx b/packages/ui/src/components/widgets/MenuWidgetView.tsx
index 2b16d066..0d30a290 100644
--- a/packages/ui/src/components/widgets/MenuWidgetView.tsx
+++ b/packages/ui/src/components/widgets/MenuWidgetView.tsx
@@ -1,475 +1,475 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { Link } from 'react-router-dom';
-import { Button } from '@/components/ui/button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { cn } from '@/lib/utils';
-import { T } from '@/i18n';
-import {
-    ExternalLink,
-    FileText,
-    FolderTree,
-    FolderOpen,
-    Link as LinkIcon,
-    Menu as MenuIcon,
-    ChevronDown,
-} from 'lucide-react';
-import { useAuth } from '@/hooks/useAuth';
-import { fetchCategories, type Category } from '@/modules/categories/client-categories';
-
-// ─── Types (shared with Edit) ─────────────────────────────────
-
-export interface MenuItemData {
-    id: string;
-    label: string;
-    type: 'custom' | 'page' | 'category' | 'file';
-    fileMount?: string;
-    filePath?: string;
-    href?: string;
-    targetPageId?: string;
-    targetPageSlug?: string;
-    targetPageOwner?: string;
-    categoryId?: string;
-    categorySlug?: string;
-    showChildren?: boolean;
-    openInNewTab?: boolean;
-}
-
-export type MenuWidgetSize = 'sm' | 'md' | 'lg' | 'xl';
-export type MenuWidgetAlign = 'left' | 'center' | 'right';
-export type MenuWidgetVariant = 'plain' | 'bar' | 'glass' | 'pill' | 'underline';
-export type MenuWidgetSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type MenuWidgetBg = 'none' | 'custom' | 'muted' | 'dark' | 'primary' | 'accent'
-    | 'gradient-primary' | 'gradient-dark' | 'gradient-ocean'
-    | 'gradient-sunset' | 'gradient-forest' | 'gradient-brand';
-
-export interface MenuWidgetViewProps {
-    items?: MenuItemData[];
-    orientation?: 'horizontal' | 'vertical';
-    size?: MenuWidgetSize;
-    align?: MenuWidgetAlign;
-    variant?: MenuWidgetVariant;
-    padding?: MenuWidgetSpacing;
-    margin?: MenuWidgetSpacing;
-    bg?: MenuWidgetBg;
-    bgFrom?: string;
-    bgTo?: string;
-    [key: string]: any;
-}
-
-// ─── Helpers ──────────────────────────────────────────────────
-
-export const resolveHref = (item: MenuItemData, ownerUserId?: string): string => {
-    switch (item.type) {
-        case 'page':
-            if (item.targetPageSlug) {
-                const owner = item.targetPageOwner || ownerUserId || '';
-                return `/user/${owner}/pages/${item.targetPageSlug}`;
-            }
-            return '#';
-        case 'category':
-            return item.categorySlug ? `/categories/${item.categorySlug}` : '#';
-        case 'file': {
-            if (item.fileMount && item.filePath) {
-                const cleanPath = item.filePath.replace(/^\/+/, '');
-                // Check if it's a file (has extension) vs folder
-                const lastSegment = cleanPath.split('/').pop() || '';
-                const isFile = lastSegment.includes('.');
-                if (isFile) {
-                    // Files: /app/filebrowser/{mount}/{dir}?file={filename}
-                    const dir = cleanPath.substring(0, cleanPath.lastIndexOf('/'));
-                    const basePath = dir
-                        ? `/app/filebrowser/${item.fileMount}/${dir}`
-                        : `/app/filebrowser/${item.fileMount}`;
-                    return `${basePath}?file=${encodeURIComponent(lastSegment)}`;
-                }
-                // Folders: /app/filebrowser/{mount}/{path}
-                return cleanPath
-                    ? `/app/filebrowser/${item.fileMount}/${cleanPath}`
-                    : `/app/filebrowser/${item.fileMount}`;
-            }
-            return item.href || '#';
-        }
-        case 'custom':
-        default:
-            return item.href || '#';
-    }
-};
-
-export const typeIcon = (type: MenuItemData['type']) => {
-    switch (type) {
-        case 'page': return <FileText className="h-3 w-3" />;
-        case 'category': return <FolderTree className="h-3 w-3" />;
-        case 'file': return <FolderOpen className="h-3 w-3" />;
-        default: return <LinkIcon className="h-3 w-3" />;
-    }
-};
-
-// ─── Category Children Sub-Menu (Desktop) ─────────────────────
-
-const CategoryWithChildren: React.FC<{
-    item: MenuItemData;
-    linkClasses: string;
-}> = ({ item, linkClasses }) => {
-    const [children, setChildren] = useState<Category[]>([]);
-    const [loaded, setLoaded] = useState(false);
-    const [open, setOpen] = useState(false);
-    const triggerRef = React.useRef<HTMLButtonElement>(null);
-    const panelRef = React.useRef<HTMLDivElement>(null);
-    const closeTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    // Fetch eagerly on mount (cached/deduped)
-    useEffect(() => {
-        if (loaded || !item.categorySlug) return;
-        fetchCategories({ parentSlug: item.categorySlug })
-            .then(cats => { setChildren(cats); setLoaded(true); })
-            .catch(() => setLoaded(true));
-    }, [loaded, item.categorySlug]);
-
-    // Click-outside to close
-    useEffect(() => {
-        if (!open) return;
-        const handler = (e: MouseEvent) => {
-            const t = e.target as Node;
-            if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
-            setOpen(false);
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, [open]);
-
-    const parentHref = resolveHref(item);
-
-    const handleEnter = () => {
-        if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
-        setOpen(true);
-    };
-    const handleLeave = () => {
-        closeTimer.current = setTimeout(() => setOpen(false), 200);
-    };
-
-    // Compute dropdown position from trigger rect
-    const rect = triggerRef.current?.getBoundingClientRect();
-    const portalStyle: React.CSSProperties = rect ? {
-        position: 'fixed',
-        top: rect.bottom + 4,
-        left: rect.left,
-        zIndex: 9999,
-    } : { display: 'none' };
-
-    return (
-        <div className="relative" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
-            <button
-                ref={triggerRef}
-                type="button"
-                onClick={() => setOpen(o => !o)}
-                className={cn(linkClasses, "inline-flex items-center gap-1")}
-            >
-                <T>{item.label}</T>
-                <ChevronDown className={cn("h-3 w-3 opacity-40 transition-transform", open && "rotate-180")} />
-            </button>
-
-            {open && ReactDOM.createPortal(
-                <div
-                    ref={panelRef}
-                    style={portalStyle}
-                    className="min-w-[180px] py-1 bg-popover border rounded-md shadow-md animate-in fade-in-0 zoom-in-95"
-                    onMouseEnter={handleEnter}
-                    onMouseLeave={handleLeave}
-                >
-                    {/* Parent category link */}
-                    <Link
-                        to={parentHref}
-                        className="block px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors border-b border-border/50 mb-1"
-                    >
-                        <T>{item.label}</T>
-                    </Link>
-                    {!loaded ? (
-                        <div className="px-3 py-2 text-xs text-muted-foreground">…</div>
-                    ) : children.length === 0 ? (
-                        <div className="px-3 py-2 text-xs text-muted-foreground"><T>No subcategories</T></div>
-                    ) : (
-                        children.map(child => (
-                            <Link
-                                key={child.id}
-                                to={`/categories/${child.slug}`}
-                                className="block px-3 py-1.5 text-sm hover:bg-muted transition-colors"
-                            >
-                                <T>{child.name}</T>
-                            </Link>
-                        ))
-                    )}
-                </div>,
-                document.body
-            )}
-        </div>
-    );
-};
-
-// ─── View Component ───────────────────────────────────────────
-
-const sizeClasses: Record<MenuWidgetSize, { link: string; icon: string }> = {
-    sm: { link: 'text-xs px-2 py-1', icon: 'h-2.5 w-2.5' },
-    md: { link: 'text-sm px-3 py-1.5', icon: 'h-3 w-3' },
-    lg: { link: 'text-base px-4 py-2', icon: 'h-4 w-4' },
-    xl: { link: 'text-lg px-5 py-2.5', icon: 'h-5 w-5' },
-};
-
-const paddingClasses: Record<MenuWidgetSpacing, string> = {
-    none: '', xs: 'p-1', sm: 'p-2', md: 'p-3', lg: 'p-4', xl: 'p-6',
-};
-const marginClasses: Record<MenuWidgetSpacing, string> = {
-    none: '', xs: 'm-1', sm: 'm-2', md: 'm-3', lg: 'm-4', xl: 'm-6',
-};
-
-const bgClasses: Record<MenuWidgetBg, string> = {
-    none: '',
-    custom: '', // handled via inline style
-    muted: 'bg-muted text-muted-foreground',
-    dark: 'bg-zinc-900 dark:bg-zinc-950 text-zinc-100',
-    primary: 'bg-primary text-primary-foreground',
-    accent: 'bg-accent text-accent-foreground',
-    'gradient-primary': 'bg-gradient-to-r from-primary/80 to-primary/40 text-primary-foreground',
-    'gradient-dark': 'bg-gradient-to-r from-zinc-900 to-zinc-700 dark:from-zinc-800 dark:to-zinc-600 text-zinc-100',
-    'gradient-ocean': 'bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-700 dark:to-cyan-600 text-white',
-    'gradient-sunset': 'bg-gradient-to-r from-orange-500 to-pink-500 dark:from-orange-600 dark:to-pink-600 text-white',
-    'gradient-forest': 'bg-gradient-to-r from-emerald-600 to-teal-500 dark:from-emerald-700 dark:to-teal-600 text-white',
-    'gradient-brand': 'bg-gradient-to-r from-amber-400 to-orange-500 dark:from-amber-500 dark:to-orange-600 text-zinc-900',
-};
-
-const alignClasses: Record<MenuWidgetAlign, string> = {
-    left: 'justify-start',
-    center: 'justify-center',
-    right: 'justify-end',
-};
-
-const variantNavClasses: Record<MenuWidgetVariant, string> = {
-    plain: '',
-    bar: 'bg-muted/60 rounded-lg px-2 py-1',
-    glass: 'bg-background/40 backdrop-blur-md border border-border/30 rounded-lg px-2 py-1 shadow-sm',
-    pill: 'gap-2',
-    underline: 'border-b border-border/50 rounded-none pb-0.5',
-};
-
-const variantLinkClasses: Record<MenuWidgetVariant, string> = {
-    plain: 'hover:bg-muted/50 rounded-md',
-    bar: 'hover:bg-background/60 rounded-md',
-    glass: 'hover:bg-white/10 rounded-md',
-    pill: 'bg-muted/40 hover:bg-muted rounded-full',
-    underline: 'rounded-none border-b-2 border-transparent hover:border-primary hover:bg-transparent',
-};
-
-const MenuWidgetView: React.FC<MenuWidgetViewProps> = ({
-    items = [],
-    orientation = 'horizontal',
-    size = 'md',
-    align = 'left',
-    variant = 'plain',
-    padding = 'none',
-    margin = 'none',
-    bg = 'none',
-    bgFrom = '#3b82f6',
-    bgTo = '#8b5cf6',
-}) => {
-    const { user } = useAuth();
-
-    if (items.length === 0) return null;
-
-    const ownerUserId = user?.id;
-    const sz = sizeClasses[size] || sizeClasses.md;
-    const vLink = variantLinkClasses[variant] || variantLinkClasses.plain;
-
-    const hasBg = bg !== 'none';
-    const linkClasses = cn(
-        "font-medium transition-colors whitespace-nowrap",
-        hasBg ? "text-inherit hover:opacity-80" : "text-foreground/80 hover:text-primary",
-        sz.link,
-        vLink
-    );
-
-    const renderLink = (item: MenuItemData) => {
-        // Category with showChildren → render sub-menu component
-        if (item.type === 'category' && item.showChildren) {
-            return <CategoryWithChildren key={item.id} item={item} linkClasses={linkClasses} />;
-        }
-
-        const href = resolveHref(item, ownerUserId);
-        const isExternal = item.type === 'custom' && href.startsWith('http');
-        const isFileLink = item.type === 'file';
-
-        if (isExternal || isFileLink || item.openInNewTab) {
-            return (
-                <a
-                    key={item.id}
-                    href={href}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={cn(linkClasses, "inline-flex items-center gap-1")}
-                >
-                    <T>{item.label}</T>
-                    <ExternalLink className="h-3 w-3 opacity-50" />
-                </a>
-            );
-        }
-
-        return (
-            <Link key={item.id} to={href} className={linkClasses}>
-                <T>{item.label}</T>
-            </Link>
-        );
-    };
-
-    // Mobile: render category children as DropdownMenuSub
-    const renderMobileItem = (item: MenuItemData) => {
-        if (item.type === 'category' && item.showChildren) {
-            return <MobileCategorySubMenu key={item.id} item={item} ownerUserId={ownerUserId} />;
-        }
-
-        const href = resolveHref(item, ownerUserId);
-        const isExternal = item.type === 'custom' && href.startsWith('http');
-        const isFileLink = item.type === 'file';
-
-        if (isExternal || isFileLink || item.openInNewTab) {
-            return (
-                <DropdownMenuItem key={item.id} asChild>
-                    <a href={href} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
-                        {typeIcon(item.type)}
-                        <T>{item.label}</T>
-                        <ExternalLink className="h-3 w-3 ml-auto opacity-50" />
-                    </a>
-                </DropdownMenuItem>
-            );
-        }
-
-        return (
-            <DropdownMenuItem key={item.id} asChild>
-                <Link to={href} className="flex items-center gap-2">
-                    {typeIcon(item.type)}
-                    <T>{item.label}</T>
-                </Link>
-            </DropdownMenuItem>
-        );
-    };
-
-    return (
-        <div
-            className={cn(
-                bg !== 'none' && bg !== 'custom' && (bgClasses[bg] || ''),
-                bg === 'custom' && 'text-white',
-                variantNavClasses[variant] || '',
-                paddingClasses[padding] || '',
-                marginClasses[margin] || '',
-                bg !== 'none' && 'rounded-md'
-            )}
-            style={bg === 'custom' ? {
-                background: `linear-gradient(to right, ${bgFrom}, ${bgTo})`,
-            } : undefined}
-        >
-            {/* Desktop: horizontal/vertical nav */}
-            <nav
-                className={cn(
-                    "hidden md:flex items-center gap-1 flex-wrap",
-                    orientation === 'vertical' && "md:flex-col md:items-start",
-                    orientation === 'horizontal' && (alignClasses[align] || alignClasses.left),
-                )}
-            >
-                {items.map(renderLink)}
-            </nav>
-
-            {/* Mobile: dropdown */}
-            <div className="md:hidden">
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant={hasBg ? "ghost" : "outline"} size="sm" className={cn(
-                            "w-full justify-between",
-                            hasBg && "text-inherit border-current/20 hover:bg-white/20"
-                        )}>
-                            <span className="flex items-center gap-2">
-                                <MenuIcon className="h-4 w-4" />
-                                <T>Menu</T>
-                            </span>
-                            <ChevronDown className="h-4 w-4 opacity-50" />
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
-                        {items.map(renderMobileItem)}
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </div>
-        </div>
-    );
-};
-
-// ─── Mobile Category Sub-Menu ─────────────────────────────────
-
-const MobileCategorySubMenu: React.FC<{
-    item: MenuItemData;
-    ownerUserId?: string;
-}> = ({ item }) => {
-    const [children, setChildren] = useState<Category[]>([]);
-    const [loaded, setLoaded] = useState(false);
-    const [expanded, setExpanded] = useState(false);
-
-    useEffect(() => {
-        if (loaded || !item.categorySlug) return;
-        fetchCategories({ parentSlug: item.categorySlug })
-            .then(cats => { setChildren(cats); setLoaded(true); })
-            .catch(() => setLoaded(true));
-    }, [loaded, item.categorySlug]);
-
-    const parentHref = resolveHref(item);
-
-    if (loaded && children.length === 0) {
-        return (
-            <DropdownMenuItem asChild>
-                <Link to={parentHref} className="flex items-center gap-2">
-                    {typeIcon(item.type)}
-                    <T>{item.label}</T>
-                </Link>
-            </DropdownMenuItem>
-        );
-    }
-
-    return (
-        <>
-            {/* Toggle row — prevent dropdown close */}
-            <DropdownMenuItem
-                onSelect={(e) => { e.preventDefault(); setExpanded(o => !o); }}
-                className="flex items-center gap-2 cursor-pointer"
-            >
-                {typeIcon(item.type)}
-                <span className="flex-1"><T>{item.label}</T></span>
-                <ChevronDown className={cn(
-                    "h-3 w-3 opacity-50 transition-transform",
-                    expanded && "rotate-180"
-                )} />
-            </DropdownMenuItem>
-
-            {/* Expanded children inline */}
-            {expanded && (
-                <div className="pl-4 border-l-2 border-border/50 ml-3 my-0.5">
-                    <DropdownMenuItem asChild>
-                        <Link to={parentHref} className="flex items-center gap-2 font-medium text-xs">
-                            <FolderTree className="h-3 w-3" />
-                            <T>{item.label}</T>
-                        </Link>
-                    </DropdownMenuItem>
-                    {children.map(child => (
-                        <DropdownMenuItem key={child.id} asChild>
-                            <Link to={`/categories/${child.slug}`} className="flex items-center gap-2 text-xs">
-                                <T>{child.name}</T>
-                            </Link>
-                        </DropdownMenuItem>
-                    ))}
-                </div>
-            )}
-        </>
-    );
-};
-
-export default MenuWidgetView;
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { T } from '@/i18n';
+import {
+    ExternalLink,
+    FileText,
+    FolderTree,
+    FolderOpen,
+    Link as LinkIcon,
+    Menu as MenuIcon,
+    ChevronDown,
+} from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { fetchCategories, type Category } from '@/modules/categories/client-categories';
+
+// ─── Types (shared with Edit) ─────────────────────────────────
+
+export interface MenuItemData {
+    id: string;
+    label: string;
+    type: 'custom' | 'page' | 'category' | 'file';
+    fileMount?: string;
+    filePath?: string;
+    href?: string;
+    targetPageId?: string;
+    targetPageSlug?: string;
+    targetPageOwner?: string;
+    categoryId?: string;
+    categorySlug?: string;
+    showChildren?: boolean;
+    openInNewTab?: boolean;
+}
+
+export type MenuWidgetSize = 'sm' | 'md' | 'lg' | 'xl';
+export type MenuWidgetAlign = 'left' | 'center' | 'right';
+export type MenuWidgetVariant = 'plain' | 'bar' | 'glass' | 'pill' | 'underline';
+export type MenuWidgetSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type MenuWidgetBg = 'none' | 'custom' | 'muted' | 'dark' | 'primary' | 'accent'
+    | 'gradient-primary' | 'gradient-dark' | 'gradient-ocean'
+    | 'gradient-sunset' | 'gradient-forest' | 'gradient-brand';
+
+export interface MenuWidgetViewProps {
+    items?: MenuItemData[];
+    orientation?: 'horizontal' | 'vertical';
+    size?: MenuWidgetSize;
+    align?: MenuWidgetAlign;
+    variant?: MenuWidgetVariant;
+    padding?: MenuWidgetSpacing;
+    margin?: MenuWidgetSpacing;
+    bg?: MenuWidgetBg;
+    bgFrom?: string;
+    bgTo?: string;
+    [key: string]: any;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────
+
+export const resolveHref = (item: MenuItemData, ownerUserId?: string): string => {
+    switch (item.type) {
+        case 'page':
+            if (item.targetPageSlug) {
+                const owner = item.targetPageOwner || ownerUserId || '';
+                return `/user/${owner}/pages/${item.targetPageSlug}`;
+            }
+            return '#';
+        case 'category':
+            return item.categorySlug ? `/categories/${item.categorySlug}` : '#';
+        case 'file': {
+            if (item.fileMount && item.filePath) {
+                const cleanPath = item.filePath.replace(/^\/+/, '');
+                // Check if it's a file (has extension) vs folder
+                const lastSegment = cleanPath.split('/').pop() || '';
+                const isFile = lastSegment.includes('.');
+                if (isFile) {
+                    // Files: /app/filebrowser/{mount}/{dir}?file={filename}
+                    const dir = cleanPath.substring(0, cleanPath.lastIndexOf('/'));
+                    const basePath = dir
+                        ? `/app/filebrowser/${item.fileMount}/${dir}`
+                        : `/app/filebrowser/${item.fileMount}`;
+                    return `${basePath}?file=${encodeURIComponent(lastSegment)}`;
+                }
+                // Folders: /app/filebrowser/{mount}/{path}
+                return cleanPath
+                    ? `/app/filebrowser/${item.fileMount}/${cleanPath}`
+                    : `/app/filebrowser/${item.fileMount}`;
+            }
+            return item.href || '#';
+        }
+        case 'custom':
+        default:
+            return item.href || '#';
+    }
+};
+
+export const typeIcon = (type: MenuItemData['type']) => {
+    switch (type) {
+        case 'page': return <FileText className="h-3 w-3" />;
+        case 'category': return <FolderTree className="h-3 w-3" />;
+        case 'file': return <FolderOpen className="h-3 w-3" />;
+        default: return <LinkIcon className="h-3 w-3" />;
+    }
+};
+
+// ─── Category Children Sub-Menu (Desktop) ─────────────────────
+
+const CategoryWithChildren: React.FC<{
+    item: MenuItemData;
+    linkClasses: string;
+}> = ({ item, linkClasses }) => {
+    const [children, setChildren] = useState<Category[]>([]);
+    const [loaded, setLoaded] = useState(false);
+    const [open, setOpen] = useState(false);
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+    const panelRef = React.useRef<HTMLDivElement>(null);
+    const closeTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Fetch eagerly on mount (cached/deduped)
+    useEffect(() => {
+        if (loaded || !item.categorySlug) return;
+        fetchCategories({ parentSlug: item.categorySlug })
+            .then(cats => { setChildren(cats); setLoaded(true); })
+            .catch(() => setLoaded(true));
+    }, [loaded, item.categorySlug]);
+
+    // Click-outside to close
+    useEffect(() => {
+        if (!open) return;
+        const handler = (e: MouseEvent) => {
+            const t = e.target as Node;
+            if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
+            setOpen(false);
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [open]);
+
+    const parentHref = resolveHref(item);
+
+    const handleEnter = () => {
+        if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
+        setOpen(true);
+    };
+    const handleLeave = () => {
+        closeTimer.current = setTimeout(() => setOpen(false), 200);
+    };
+
+    // Compute dropdown position from trigger rect
+    const rect = triggerRef.current?.getBoundingClientRect();
+    const portalStyle: React.CSSProperties = rect ? {
+        position: 'fixed',
+        top: rect.bottom + 4,
+        left: rect.left,
+        zIndex: 9999,
+    } : { display: 'none' };
+
+    return (
+        <div className="relative" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
+            <button
+                ref={triggerRef}
+                type="button"
+                onClick={() => setOpen(o => !o)}
+                className={cn(linkClasses, "inline-flex items-center gap-1")}
+            >
+                <T>{item.label}</T>
+                <ChevronDown className={cn("h-3 w-3 opacity-40 transition-transform", open && "rotate-180")} />
+            </button>
+
+            {open && ReactDOM.createPortal(
+                <div
+                    ref={panelRef}
+                    style={portalStyle}
+                    className="min-w-[180px] py-1 bg-popover border rounded-md shadow-md animate-in fade-in-0 zoom-in-95"
+                    onMouseEnter={handleEnter}
+                    onMouseLeave={handleLeave}
+                >
+                    {/* Parent category link */}
+                    <Link
+                        to={parentHref}
+                        className="block px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors border-b border-border/50 mb-1"
+                    >
+                        <T>{item.label}</T>
+                    </Link>
+                    {!loaded ? (
+                        <div className="px-3 py-2 text-xs text-muted-foreground">…</div>
+                    ) : children.length === 0 ? (
+                        <div className="px-3 py-2 text-xs text-muted-foreground"><T>No subcategories</T></div>
+                    ) : (
+                        children.map(child => (
+                            <Link
+                                key={child.id}
+                                to={`/categories/${child.slug}`}
+                                className="block px-3 py-1.5 text-sm hover:bg-muted transition-colors"
+                            >
+                                <T>{child.name}</T>
+                            </Link>
+                        ))
+                    )}
+                </div>,
+                document.body
+            )}
+        </div>
+    );
+};
+
+// ─── View Component ───────────────────────────────────────────
+
+const sizeClasses: Record<MenuWidgetSize, { link: string; icon: string }> = {
+    sm: { link: 'text-xs px-2 py-1', icon: 'h-2.5 w-2.5' },
+    md: { link: 'text-sm px-3 py-1.5', icon: 'h-3 w-3' },
+    lg: { link: 'text-base px-4 py-2', icon: 'h-4 w-4' },
+    xl: { link: 'text-lg px-5 py-2.5', icon: 'h-5 w-5' },
+};
+
+const paddingClasses: Record<MenuWidgetSpacing, string> = {
+    none: '', xs: 'p-1', sm: 'p-2', md: 'p-3', lg: 'p-4', xl: 'p-6',
+};
+const marginClasses: Record<MenuWidgetSpacing, string> = {
+    none: '', xs: 'm-1', sm: 'm-2', md: 'm-3', lg: 'm-4', xl: 'm-6',
+};
+
+const bgClasses: Record<MenuWidgetBg, string> = {
+    none: '',
+    custom: '', // handled via inline style
+    muted: 'bg-muted text-muted-foreground',
+    dark: 'bg-zinc-900 dark:bg-zinc-950 text-zinc-100',
+    primary: 'bg-primary text-primary-foreground',
+    accent: 'bg-accent text-accent-foreground',
+    'gradient-primary': 'bg-gradient-to-r from-primary/80 to-primary/40 text-primary-foreground',
+    'gradient-dark': 'bg-gradient-to-r from-zinc-900 to-zinc-700 dark:from-zinc-800 dark:to-zinc-600 text-zinc-100',
+    'gradient-ocean': 'bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-700 dark:to-cyan-600 text-white',
+    'gradient-sunset': 'bg-gradient-to-r from-orange-500 to-pink-500 dark:from-orange-600 dark:to-pink-600 text-white',
+    'gradient-forest': 'bg-gradient-to-r from-emerald-600 to-teal-500 dark:from-emerald-700 dark:to-teal-600 text-white',
+    'gradient-brand': 'bg-gradient-to-r from-amber-400 to-orange-500 dark:from-amber-500 dark:to-orange-600 text-zinc-900',
+};
+
+const alignClasses: Record<MenuWidgetAlign, string> = {
+    left: 'justify-start',
+    center: 'justify-center',
+    right: 'justify-end',
+};
+
+const variantNavClasses: Record<MenuWidgetVariant, string> = {
+    plain: '',
+    bar: 'bg-muted/60 rounded-lg px-2 py-1',
+    glass: 'bg-background/40 backdrop-blur-md border border-border/30 rounded-lg px-2 py-1 shadow-sm',
+    pill: 'gap-2',
+    underline: 'border-b border-border/50 rounded-none pb-0.5',
+};
+
+const variantLinkClasses: Record<MenuWidgetVariant, string> = {
+    plain: 'hover:bg-muted/50 rounded-md',
+    bar: 'hover:bg-background/60 rounded-md',
+    glass: 'hover:bg-white/10 rounded-md',
+    pill: 'bg-muted/40 hover:bg-muted rounded-full',
+    underline: 'rounded-none border-b-2 border-transparent hover:border-primary hover:bg-transparent',
+};
+
+const MenuWidgetView: React.FC<MenuWidgetViewProps> = ({
+    items = [],
+    orientation = 'horizontal',
+    size = 'md',
+    align = 'left',
+    variant = 'plain',
+    padding = 'none',
+    margin = 'none',
+    bg = 'none',
+    bgFrom = '#3b82f6',
+    bgTo = '#8b5cf6',
+}) => {
+    const { user } = useAuth();
+
+    if (items.length === 0) return null;
+
+    const ownerUserId = user?.id;
+    const sz = sizeClasses[size] || sizeClasses.md;
+    const vLink = variantLinkClasses[variant] || variantLinkClasses.plain;
+
+    const hasBg = bg !== 'none';
+    const linkClasses = cn(
+        "font-medium transition-colors whitespace-nowrap",
+        hasBg ? "text-inherit hover:opacity-80" : "text-foreground/80 hover:text-primary",
+        sz.link,
+        vLink
+    );
+
+    const renderLink = (item: MenuItemData) => {
+        // Category with showChildren → render sub-menu component
+        if (item.type === 'category' && item.showChildren) {
+            return <CategoryWithChildren key={item.id} item={item} linkClasses={linkClasses} />;
+        }
+
+        const href = resolveHref(item, ownerUserId);
+        const isExternal = item.type === 'custom' && href.startsWith('http');
+        const isFileLink = item.type === 'file';
+
+        if (isExternal || isFileLink || item.openInNewTab) {
+            return (
+                <a
+                    key={item.id}
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={cn(linkClasses, "inline-flex items-center gap-1")}
+                >
+                    <T>{item.label}</T>
+                    <ExternalLink className="h-3 w-3 opacity-50" />
+                </a>
+            );
+        }
+
+        return (
+            <Link key={item.id} to={href} className={linkClasses}>
+                <T>{item.label}</T>
+            </Link>
+        );
+    };
+
+    // Mobile: render category children as DropdownMenuSub
+    const renderMobileItem = (item: MenuItemData) => {
+        if (item.type === 'category' && item.showChildren) {
+            return <MobileCategorySubMenu key={item.id} item={item} ownerUserId={ownerUserId} />;
+        }
+
+        const href = resolveHref(item, ownerUserId);
+        const isExternal = item.type === 'custom' && href.startsWith('http');
+        const isFileLink = item.type === 'file';
+
+        if (isExternal || isFileLink || item.openInNewTab) {
+            return (
+                <DropdownMenuItem key={item.id} asChild>
+                    <a href={href} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+                        {typeIcon(item.type)}
+                        <T>{item.label}</T>
+                        <ExternalLink className="h-3 w-3 ml-auto opacity-50" />
+                    </a>
+                </DropdownMenuItem>
+            );
+        }
+
+        return (
+            <DropdownMenuItem key={item.id} asChild>
+                <Link to={href} className="flex items-center gap-2">
+                    {typeIcon(item.type)}
+                    <T>{item.label}</T>
+                </Link>
+            </DropdownMenuItem>
+        );
+    };
+
+    return (
+        <div
+            className={cn(
+                bg !== 'none' && bg !== 'custom' && (bgClasses[bg] || ''),
+                bg === 'custom' && 'text-white',
+                variantNavClasses[variant] || '',
+                paddingClasses[padding] || '',
+                marginClasses[margin] || '',
+                bg !== 'none' && 'rounded-md'
+            )}
+            style={bg === 'custom' ? {
+                background: `linear-gradient(to right, ${bgFrom}, ${bgTo})`,
+            } : undefined}
+        >
+            {/* Desktop: horizontal/vertical nav */}
+            <nav
+                className={cn(
+                    "hidden md:flex items-center gap-1 flex-wrap",
+                    orientation === 'vertical' && "md:flex-col md:items-start",
+                    orientation === 'horizontal' && (alignClasses[align] || alignClasses.left),
+                )}
+            >
+                {items.map(renderLink)}
+            </nav>
+
+            {/* Mobile: dropdown */}
+            <div className="md:hidden">
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant={hasBg ? "ghost" : "outline"} size="sm" className={cn(
+                            "w-full justify-between",
+                            hasBg && "text-inherit border-current/20 hover:bg-white/20"
+                        )}>
+                            <span className="flex items-center gap-2">
+                                <MenuIcon className="h-4 w-4" />
+                                <T>Menu</T>
+                            </span>
+                            <ChevronDown className="h-4 w-4 opacity-50" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
+                        {items.map(renderMobileItem)}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </div>
+    );
+};
+
+// ─── Mobile Category Sub-Menu ─────────────────────────────────
+
+const MobileCategorySubMenu: React.FC<{
+    item: MenuItemData;
+    ownerUserId?: string;
+}> = ({ item }) => {
+    const [children, setChildren] = useState<Category[]>([]);
+    const [loaded, setLoaded] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+
+    useEffect(() => {
+        if (loaded || !item.categorySlug) return;
+        fetchCategories({ parentSlug: item.categorySlug })
+            .then(cats => { setChildren(cats); setLoaded(true); })
+            .catch(() => setLoaded(true));
+    }, [loaded, item.categorySlug]);
+
+    const parentHref = resolveHref(item);
+
+    if (loaded && children.length === 0) {
+        return (
+            <DropdownMenuItem asChild>
+                <Link to={parentHref} className="flex items-center gap-2">
+                    {typeIcon(item.type)}
+                    <T>{item.label}</T>
+                </Link>
+            </DropdownMenuItem>
+        );
+    }
+
+    return (
+        <>
+            {/* Toggle row — prevent dropdown close */}
+            <DropdownMenuItem
+                onSelect={(e) => { e.preventDefault(); setExpanded(o => !o); }}
+                className="flex items-center gap-2 cursor-pointer"
+            >
+                {typeIcon(item.type)}
+                <span className="flex-1"><T>{item.label}</T></span>
+                <ChevronDown className={cn(
+                    "h-3 w-3 opacity-50 transition-transform",
+                    expanded && "rotate-180"
+                )} />
+            </DropdownMenuItem>
+
+            {/* Expanded children inline */}
+            {expanded && (
+                <div className="pl-4 border-l-2 border-border/50 ml-3 my-0.5">
+                    <DropdownMenuItem asChild>
+                        <Link to={parentHref} className="flex items-center gap-2 font-medium text-xs">
+                            <FolderTree className="h-3 w-3" />
+                            <T>{item.label}</T>
+                        </Link>
+                    </DropdownMenuItem>
+                    {children.map(child => (
+                        <DropdownMenuItem key={child.id} asChild>
+                            <Link to={`/categories/${child.slug}`} className="flex items-center gap-2 text-xs">
+                                <T>{child.name}</T>
+                            </Link>
+                        </DropdownMenuItem>
+                    ))}
+                </div>
+            )}
+        </>
+    );
+};
+
+export default MenuWidgetView;
diff --git a/packages/ui/src/contexts/OrganizationContext.tsx b/packages/ui/src/contexts/OrganizationContext.tsx
index 69e09aff..cd785eee 100644
--- a/packages/ui/src/contexts/OrganizationContext.tsx
+++ b/packages/ui/src/contexts/OrganizationContext.tsx
@@ -1,36 +1,36 @@
-import { createContext, useContext, ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
-
-interface OrganizationContextType {
-  orgSlug: string | null;
-  isOrgContext: boolean;
-}
-
-const OrganizationContext = createContext<OrganizationContextType>({
-  orgSlug: null,
-  isOrgContext: false,
-});
-
-export const useOrganization = () => {
-  const context = useContext(OrganizationContext);
-  return context;
-};
-
-export const OrganizationProvider = ({ children }: { children: ReactNode }) => {
-  const location = useLocation();
-  
-  // Parse orgSlug from pathname like /org/:orgSlug/...
-  const orgSlugMatch = location.pathname.match(/^\/org\/([^\/]+)/);
-  const orgSlug = orgSlugMatch ? orgSlugMatch[1] : null;
-  
-  return (
-    <OrganizationContext.Provider
-      value={{
-        orgSlug,
-        isOrgContext: !!orgSlug,
-      }}
-    >
-      {children}
-    </OrganizationContext.Provider>
-  );
-};
+import { createContext, useContext, ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
+
+interface OrganizationContextType {
+  orgSlug: string | null;
+  isOrgContext: boolean;
+}
+
+const OrganizationContext = createContext<OrganizationContextType>({
+  orgSlug: null,
+  isOrgContext: false,
+});
+
+export const useOrganization = () => {
+  const context = useContext(OrganizationContext);
+  return context;
+};
+
+export const OrganizationProvider = ({ children }: { children: ReactNode }) => {
+  const location = useLocation();
+  
+  // Parse orgSlug from pathname like /org/:orgSlug/...
+  const orgSlugMatch = location.pathname.match(/^\/org\/([^\/]+)/);
+  const orgSlug = orgSlugMatch ? orgSlugMatch[1] : null;
+  
+  return (
+    <OrganizationContext.Provider
+      value={{
+        orgSlug,
+        isOrgContext: !!orgSlug,
+      }}
+    >
+      {children}
+    </OrganizationContext.Provider>
+  );
+};
diff --git a/packages/ui/src/contexts/WS_Socket.tsx b/packages/ui/src/contexts/WS_Socket.tsx
index 1548b1a2..b8193975 100644
--- a/packages/ui/src/contexts/WS_Socket.tsx
+++ b/packages/ui/src/contexts/WS_Socket.tsx
@@ -1,230 +1,230 @@
-import React, { createContext, useContext, useEffect, useState, useCallback, useRef, ReactNode } from 'react';
-import logger from '@/Logger';
-
-// Lazy-loaded modbusService reference
-type ModbusServiceType = typeof import('@/services/modbusService').default;
-
-const getModbusService = async (): Promise<ModbusServiceType> => {
-  const mod = await import('@/services/modbusService');
-  return mod.default;
-};
-
-export type WsStatus = 'DISCONNECTED' | 'CONNECTING' | 'CONNECTED' | 'ERROR' | 'RECONNECTING';
-
-interface WebSocketContextType {
-  isConnected: boolean;
-  isConnecting: boolean;
-  wsStatus: WsStatus;
-  apiUrl: string;
-  setApiUrl: (url: string) => void;
-  connectToServer: (url?: string) => Promise<boolean>;
-  disconnectFromServer: () => void;
-  abortConnectionAttempt: () => void;
-  addListener: (handler: (msg: any) => void) => void;
-  removeListener: (handler: (msg: any) => void) => void;
-  sendCommand: (command: string, payload?: object) => void;
-}
-
-const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined);
-
-export const useWebSocket = () => {
-  const context = useContext(WebSocketContext);
-  if (context === undefined) {
-    throw new Error('useWebSocket must be used within a WebSocketProvider');
-  }
-  return context;
-};
-
-interface WebSocketProviderProps {
-  children: ReactNode;
-  url?: string;
-}
-
-export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ children, url: initialUrl = '' }) => {
-  const [apiUrl, setApiUrl] = useState<string>(initialUrl);
-  const [isConnected, setIsConnected] = useState<boolean>(false);
-  const [isConnecting, setConnecting] = useState<boolean>(false);
-  const [wsStatus, setWsStatus] = useState<WsStatus>('DISCONNECTED');
-  const [connectionAborted, setConnectionAborted] = useState<boolean>(false);
-  const modbusRef = useRef<ModbusServiceType | null>(null);
-
-  const ensureModbus = useCallback(async () => {
-    if (!modbusRef.current) {
-      modbusRef.current = await getModbusService();
-    }
-    return modbusRef.current;
-  }, []);
-
-  const handleWsStatusChange = useCallback((status: WsStatus) => {
-    setWsStatus(status);
-    setIsConnected(status === 'CONNECTED');
-
-    if (status === 'CONNECTED') {
-      setConnecting(false);
-    } else {
-      if (status === 'ERROR') {
-        setConnecting(false);
-      } else if (status === 'RECONNECTING') {
-        setConnecting(true);
-      } else if (status === 'DISCONNECTED') {
-        setConnecting(false);
-      }
-    }
-  }, []);
-
-  const disconnectWebSocket = useCallback(async (intentional: boolean = true) => {
-    const svc = await ensureModbus();
-    svc.disconnect(intentional);
-  }, [ensureModbus]);
-
-  const connectWebSocket = useCallback(async (urlToConnect: string): Promise<boolean> => {
-    if (!urlToConnect) {
-      logger.error('API URL not set');
-      return false;
-    }
-    let wsUrl: string;
-    try {
-      const url = new URL(urlToConnect);
-      if (url.protocol === 'http:') {
-        url.protocol = 'ws:';
-      } else if (url.protocol === 'https:') {
-        url.protocol = 'wss:';
-      }
-
-      if (!url.pathname.endsWith('/ws')) {
-        url.pathname = url.pathname.replace(/\/+$/, '') + '/ws';
-      }
-
-      wsUrl = url.toString();
-    } catch (error) {
-      logger.logError(error, 'Invalid API URL');
-      return false;
-    }
-
-    try {
-      const svc = await ensureModbus();
-      const newConnectionEstablished = await svc.connect(
-        wsUrl,
-        handleWsStatusChange,
-      );
-      return newConnectionEstablished;
-    } catch (error) {
-      logger.logError(error, '[ModbusContext] modbusService.connect() failed');
-      return false;
-    }
-  }, [handleWsStatusChange, ensureModbus]);
-
-  const abortConnectionAttempt = useCallback(() => {
-    setConnectionAborted(true);
-    setConnecting(false);
-    disconnectWebSocket(true);
-  }, [disconnectWebSocket]);
-
-  const connectToServer = useCallback(async (urlToUse?: string): Promise<boolean> => {
-    const targetUrl = urlToUse || apiUrl;
-
-    if (urlToUse && urlToUse !== apiUrl) {
-      setApiUrl(targetUrl);
-    }
-
-    setConnectionAborted(false);
-    setConnecting(true);
-    try {
-      const didConnect = await connectWebSocket(targetUrl);
-
-      if (didConnect) {
-
-      } else {
-        const svc = await ensureModbus();
-        if (svc.getConnectionStatus() === 'CONNECTED') {
-
-        } else {
-
-        }
-      }
-
-      const svc = modbusRef.current!;
-      const isNowConnected = svc.getConnectionStatus() === 'CONNECTED';
-      setConnecting(false);
-      return isNowConnected;
-
-    } catch (error: any) {
-      logger.logError(error, '[ModbusContext] Error in connectToServer');
-      setIsConnected(false);
-      setConnecting(false);
-      return false;
-    }
-  }, [apiUrl, connectWebSocket, ensureModbus]);
-
-  const disconnectFromServer = useCallback((): void => {
-    setConnectionAborted(true);
-    setIsConnected(false);
-    disconnectWebSocket(true);
-  }, [disconnectWebSocket]);
-
-  // Initial connection effect
-  useEffect(() => {
-    if (initialUrl && !isConnected && !isConnecting && !connectionAborted) {
-      connectToServer(initialUrl);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialUrl]);
-
-  const listeners = useRef<Array<(msg: any) => void>>([]);
-
-  const addListener = useCallback((handler: (msg: any) => void) => {
-    if (!listeners.current.includes(handler)) {
-      listeners.current.push(handler);
-    }
-  }, []);
-
-  const removeListener = useCallback((handler: (msg: any) => void) => {
-    listeners.current = listeners.current.filter(l => l !== handler);
-  }, []);
-
-  // Sync contextual generic handlers with ModbusService underlying instance
-  useEffect(() => {
-    let unsubscribeStats: (() => void) | undefined;
-
-    // We register a wildcard type or just specific types directly against modbusService
-    // Because AdminPage listens for `sys-stats`, we map it here:
-    // This is slightly opinionated, but `modbusService` expects string typing.
-    ensureModbus().then(svc => {
-      unsubscribeStats = svc.addMessageHandler('sys-stats', (data: any) => {
-        // AdminPage expects the whole message (with type), so reconstruct it:
-        const msg = { type: 'sys-stats', stats: data?.stats || data, pings: data?.pings };
-        listeners.current.forEach(l => l(msg));
-      });
-    });
-
-    return () => {
-      if (unsubscribeStats) unsubscribeStats();
-    };
-  }, [ensureModbus]);
-
-  const sendCommand = useCallback((command: string, payload: object = {}) => {
-    ensureModbus().then(svc => {
-      svc.sendCommand(command, payload).catch(() => { /* fire-and-forget */ });
-    });
-  }, [ensureModbus]);
-
-  return (
-    <WebSocketContext.Provider
-      value={{
-        isConnected,
-        isConnecting,
-        wsStatus,
-        apiUrl,
-        setApiUrl,
-        connectToServer,
-        disconnectFromServer,
-        abortConnectionAttempt,
-        addListener,
-        removeListener,
-        sendCommand,
-      }}
-    >
-      {children}
-    </WebSocketContext.Provider>
-  );
-};
\ No newline at end of file
+import React, { createContext, useContext, useEffect, useState, useCallback, useRef, ReactNode } from 'react';
+import logger from '@/Logger';
+
+// Lazy-loaded modbusService reference
+type ModbusServiceType = typeof import('@/services/modbusService').default;
+
+const getModbusService = async (): Promise<ModbusServiceType> => {
+  const mod = await import('@/services/modbusService');
+  return mod.default;
+};
+
+export type WsStatus = 'DISCONNECTED' | 'CONNECTING' | 'CONNECTED' | 'ERROR' | 'RECONNECTING';
+
+interface WebSocketContextType {
+  isConnected: boolean;
+  isConnecting: boolean;
+  wsStatus: WsStatus;
+  apiUrl: string;
+  setApiUrl: (url: string) => void;
+  connectToServer: (url?: string) => Promise<boolean>;
+  disconnectFromServer: () => void;
+  abortConnectionAttempt: () => void;
+  addListener: (handler: (msg: any) => void) => void;
+  removeListener: (handler: (msg: any) => void) => void;
+  sendCommand: (command: string, payload?: object) => void;
+}
+
+const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined);
+
+export const useWebSocket = () => {
+  const context = useContext(WebSocketContext);
+  if (context === undefined) {
+    throw new Error('useWebSocket must be used within a WebSocketProvider');
+  }
+  return context;
+};
+
+interface WebSocketProviderProps {
+  children: ReactNode;
+  url?: string;
+}
+
+export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ children, url: initialUrl = '' }) => {
+  const [apiUrl, setApiUrl] = useState<string>(initialUrl);
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [isConnecting, setConnecting] = useState<boolean>(false);
+  const [wsStatus, setWsStatus] = useState<WsStatus>('DISCONNECTED');
+  const [connectionAborted, setConnectionAborted] = useState<boolean>(false);
+  const modbusRef = useRef<ModbusServiceType | null>(null);
+
+  const ensureModbus = useCallback(async () => {
+    if (!modbusRef.current) {
+      modbusRef.current = await getModbusService();
+    }
+    return modbusRef.current;
+  }, []);
+
+  const handleWsStatusChange = useCallback((status: WsStatus) => {
+    setWsStatus(status);
+    setIsConnected(status === 'CONNECTED');
+
+    if (status === 'CONNECTED') {
+      setConnecting(false);
+    } else {
+      if (status === 'ERROR') {
+        setConnecting(false);
+      } else if (status === 'RECONNECTING') {
+        setConnecting(true);
+      } else if (status === 'DISCONNECTED') {
+        setConnecting(false);
+      }
+    }
+  }, []);
+
+  const disconnectWebSocket = useCallback(async (intentional: boolean = true) => {
+    const svc = await ensureModbus();
+    svc.disconnect(intentional);
+  }, [ensureModbus]);
+
+  const connectWebSocket = useCallback(async (urlToConnect: string): Promise<boolean> => {
+    if (!urlToConnect) {
+      logger.error('API URL not set');
+      return false;
+    }
+    let wsUrl: string;
+    try {
+      const url = new URL(urlToConnect);
+      if (url.protocol === 'http:') {
+        url.protocol = 'ws:';
+      } else if (url.protocol === 'https:') {
+        url.protocol = 'wss:';
+      }
+
+      if (!url.pathname.endsWith('/ws')) {
+        url.pathname = url.pathname.replace(/\/+$/, '') + '/ws';
+      }
+
+      wsUrl = url.toString();
+    } catch (error) {
+      logger.logError(error, 'Invalid API URL');
+      return false;
+    }
+
+    try {
+      const svc = await ensureModbus();
+      const newConnectionEstablished = await svc.connect(
+        wsUrl,
+        handleWsStatusChange,
+      );
+      return newConnectionEstablished;
+    } catch (error) {
+      logger.logError(error, '[ModbusContext] modbusService.connect() failed');
+      return false;
+    }
+  }, [handleWsStatusChange, ensureModbus]);
+
+  const abortConnectionAttempt = useCallback(() => {
+    setConnectionAborted(true);
+    setConnecting(false);
+    disconnectWebSocket(true);
+  }, [disconnectWebSocket]);
+
+  const connectToServer = useCallback(async (urlToUse?: string): Promise<boolean> => {
+    const targetUrl = urlToUse || apiUrl;
+
+    if (urlToUse && urlToUse !== apiUrl) {
+      setApiUrl(targetUrl);
+    }
+
+    setConnectionAborted(false);
+    setConnecting(true);
+    try {
+      const didConnect = await connectWebSocket(targetUrl);
+
+      if (didConnect) {
+
+      } else {
+        const svc = await ensureModbus();
+        if (svc.getConnectionStatus() === 'CONNECTED') {
+
+        } else {
+
+        }
+      }
+
+      const svc = modbusRef.current!;
+      const isNowConnected = svc.getConnectionStatus() === 'CONNECTED';
+      setConnecting(false);
+      return isNowConnected;
+
+    } catch (error: any) {
+      logger.logError(error, '[ModbusContext] Error in connectToServer');
+      setIsConnected(false);
+      setConnecting(false);
+      return false;
+    }
+  }, [apiUrl, connectWebSocket, ensureModbus]);
+
+  const disconnectFromServer = useCallback((): void => {
+    setConnectionAborted(true);
+    setIsConnected(false);
+    disconnectWebSocket(true);
+  }, [disconnectWebSocket]);
+
+  // Initial connection effect
+  useEffect(() => {
+    if (initialUrl && !isConnected && !isConnecting && !connectionAborted) {
+      connectToServer(initialUrl);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialUrl]);
+
+  const listeners = useRef<Array<(msg: any) => void>>([]);
+
+  const addListener = useCallback((handler: (msg: any) => void) => {
+    if (!listeners.current.includes(handler)) {
+      listeners.current.push(handler);
+    }
+  }, []);
+
+  const removeListener = useCallback((handler: (msg: any) => void) => {
+    listeners.current = listeners.current.filter(l => l !== handler);
+  }, []);
+
+  // Sync contextual generic handlers with ModbusService underlying instance
+  useEffect(() => {
+    let unsubscribeStats: (() => void) | undefined;
+
+    // We register a wildcard type or just specific types directly against modbusService
+    // Because AdminPage listens for `sys-stats`, we map it here:
+    // This is slightly opinionated, but `modbusService` expects string typing.
+    ensureModbus().then(svc => {
+      unsubscribeStats = svc.addMessageHandler('sys-stats', (data: any) => {
+        // AdminPage expects the whole message (with type), so reconstruct it:
+        const msg = { type: 'sys-stats', stats: data?.stats || data, pings: data?.pings };
+        listeners.current.forEach(l => l(msg));
+      });
+    });
+
+    return () => {
+      if (unsubscribeStats) unsubscribeStats();
+    };
+  }, [ensureModbus]);
+
+  const sendCommand = useCallback((command: string, payload: object = {}) => {
+    ensureModbus().then(svc => {
+      svc.sendCommand(command, payload).catch(() => { /* fire-and-forget */ });
+    });
+  }, [ensureModbus]);
+
+  return (
+    <WebSocketContext.Provider
+      value={{
+        isConnected,
+        isConnecting,
+        wsStatus,
+        apiUrl,
+        setApiUrl,
+        connectToServer,
+        disconnectFromServer,
+        abortConnectionAttempt,
+        addListener,
+        removeListener,
+        sendCommand,
+      }}
+    >
+      {children}
+    </WebSocketContext.Provider>
+  );
+};
diff --git a/packages/ui/src/hooks/use-mobile.tsx b/packages/ui/src/hooks/use-mobile.tsx
index e342c004..8fbe14c5 100644
--- a/packages/ui/src/hooks/use-mobile.tsx
+++ b/packages/ui/src/hooks/use-mobile.tsx
@@ -1,21 +1,21 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : undefined
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : undefined
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/packages/ui/src/hooks/use-toast.ts b/packages/ui/src/hooks/use-toast.ts
index ca1316d6..a5245aab 100644
--- a/packages/ui/src/hooks/use-toast.ts
+++ b/packages/ui/src/hooks/use-toast.ts
@@ -1,186 +1,186 @@
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      };
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
-}
-
-export { useToast, toast };
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/packages/ui/src/hooks/useAuth.tsx b/packages/ui/src/hooks/useAuth.tsx
index 6b88f78b..f0811c79 100644
--- a/packages/ui/src/hooks/useAuth.tsx
+++ b/packages/ui/src/hooks/useAuth.tsx
@@ -1,310 +1,310 @@
-import { createContext, useContext, useEffect, useState, useRef } from 'react';
-import { User, Session } from '@supabase/supabase-js';
-import { supabase } from '@/integrations/supabase/client';
-import { useToast } from '@/hooks/use-toast';
-import { fetchUserRoles, notifyServerLogout } from '@/modules/user/client-user';
-
-interface AuthContextType {
-  user: User | null;
-  session: Session | null;
-  roles: string[];
-  loading: boolean;
-  signUp: (email: string, password: string, username: string, displayName: string) => Promise<{ data: any; error: any }>;
-  signIn: (email: string, password: string) => Promise<{ error: any }>;
-  signInWithGithub: () => Promise<{ error: any }>;
-  signInWithGoogle: () => Promise<{ error: any }>;
-  resetPassword: (email: string) => Promise<{ error: any }>;
-  signOut: () => Promise<void>;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [session, setSession] = useState<Session | null>(null);
-  const [roles, setRoles] = useState<string[]>([]);
-  const [loading, setLoading] = useState(true);
-  const loadingRef = useRef(true); // Track loading state for timeouts/callbacks without closure staleness
-  const { toast } = useToast();
-
-  useEffect(() => {
-    loadingRef.current = loading;
-  }, [loading]);
-
-  useEffect(() => {
-    let mounted = true;
-    let cleanup: (() => void) | undefined;
-
-    // Simplified and robust auth initialization
-    const initAuth = async () => {
-      const startTime = Date.now();
-      const MIN_LOADING_TIME = 500;
-
-      // 1. Setup listener *before* checking session to catch any immediate events
-      const { data: { subscription } } = supabase.auth.onAuthStateChange(
-        async (event, session) => {
-          if (mounted) {
-            setSession(session);
-            setUser(session?.user ?? null);
-
-            if (session?.user) {
-              // OPTIMIZATION: Check for cached roles to unblock UI immediately
-              const cachedRoles = localStorage.getItem(`polymech-roles-${session.user.id}`);
-              if (cachedRoles) {
-                try {
-                  const parsedRoles = JSON.parse(cachedRoles);
-                  if (mounted) setRoles(parsedRoles);
-                  // If we have cached roles, we can stop loading immediately (after min time)
-                  // We will still fetch fresh roles in background
-                  if (loadingRef.current) {
-                    const elapsed = Date.now() - startTime;
-                    if (elapsed < MIN_LOADING_TIME) {
-                      await new Promise(r => setTimeout(r, MIN_LOADING_TIME - elapsed));
-                    }
-                    if (mounted) setLoading(false);
-                  }
-                } catch (e) {
-                  console.warn('Failed to parse cached roles', e);
-                }
-              }
-
-              // Fetch fresh roles independently
-              fetchUserRoles(session.user.id).then(roles => {
-                if (!mounted) return;
-
-                // Update cache
-                localStorage.setItem(`polymech-roles-${session.user.id}`, JSON.stringify(roles));
-
-                // Compare with current roles to avoid unnecessary re-renders if possible?
-                // For now just set them. React handles strict equality checks on state setters usually, 
-                // but arrays are new references. 
-                // Let's just set it.
-                if (mounted) setRoles(roles);
-
-                // If we were still loading (no cache), stop loading now
-                if (loadingRef.current) {
-                  if (mounted) setLoading(false);
-                }
-              }).catch(err => {
-                console.error('Error fetching user roles:', err);
-                // If we were still loading and failed, we should stop loading (roles=[], guest?)
-                if (loadingRef.current && !cachedRoles) {
-                  if (mounted) setLoading(false);
-                }
-              });
-
-            } else {
-              if (mounted) {
-                setRoles([]);
-                if (loadingRef.current) setLoading(false);
-              }
-            }
-          }
-        }
-      );
-
-      // 2. Trigger initial check, but don't block narrowly on it
-      // The onAuthStateChange often fires INITIAL_SESSION immediately.
-
-      const safetyTimeout = setTimeout(() => {
-        if (mounted && loadingRef.current) {
-          console.warn('Auth initialization safety timeout (5s) - forcing app load');
-          setLoading(false);
-        }
-      }, 5000);
-
-      try {
-        const { error } = await supabase.auth.getSession();
-        if (error) throw error;
-      } catch (err) {
-        console.error("getSession failed or timed out", err);
-        // If this fails, the safety timeout or event listener (with null session) should handle it
-      }
-
-      return () => {
-        clearTimeout(safetyTimeout);
-        subscription.unsubscribe();
-      };
-    };
-
-    initAuth().then(c => { cleanup = c; });
-
-    return () => {
-      mounted = false;
-      if (cleanup) cleanup();
-    };
-  }, []);
-
-  const signUp = async (email: string, password: string, username: string, displayName: string) => {
-    const redirectUrl = `${window.location.origin}/`;
-
-    const { data, error } = await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: redirectUrl,
-        data: {
-          username,
-          display_name: displayName
-        }
-      }
-    });
-
-    if (error) {
-      toast({
-        title: "Sign up failed",
-        description: error.message,
-        variant: "destructive",
-      });
-    } else {
-      toast({
-        title: "Check your email",
-        description: "Please check your email to confirm your account.",
-      });
-    }
-
-    return { data, error };
-  };
-
-  const signIn = async (email: string, password: string) => {
-    const { error } = await supabase.auth.signInWithPassword({
-      email,
-      password,
-    });
-
-    if (error) {
-      toast({
-        title: "Sign in failed",
-        description: error.message,
-        variant: "destructive",
-      });
-    }
-
-    return { error };
-  };
-
-  const signInWithGithub = async () => {
-    const { error } = await supabase.auth.signInWithOAuth({
-      provider: 'github',
-      options: {
-        redirectTo: `${window.location.origin}/`
-      }
-    });
-
-    if (error) {
-      toast({
-        title: "Sign in failed",
-        description: error.message,
-        variant: "destructive",
-      });
-    }
-
-    return { error };
-  };
-
-  const signInWithGoogle = async () => {
-    const redirectTo = `${window.location.origin}/`;
-    const { error } = await supabase.auth.signInWithOAuth({
-      provider: 'google',
-      options: {
-        redirectTo
-      }
-    });
-
-    if (error) {
-      toast({
-        title: "Sign in failed",
-        description: error.message,
-        variant: "destructive",
-      });
-    }
-
-    return { error };
-  };
-
-  const resetPassword = async (email: string) => {
-    const baseUrl = import.meta.env.VITE_REDIRECT_URL || window.location.origin;
-    const { error } = await supabase.auth.resetPasswordForEmail(email, {
-      redirectTo: `${baseUrl}/auth/update-password`,
-    });
-
-    if (error) {
-      toast({
-        title: 'Reset failed',
-        description: error.message,
-        variant: 'destructive',
-      });
-    } else {
-      toast({
-        title: 'Check your email',
-        description: 'A password reset link has been sent to your email.',
-      });
-    }
-
-    return { error };
-  };
-
-  const signOut = async () => {
-    // 1. Grab current token before signing out (we need it to notify the server)
-    let token: string | null = null;
-    try {
-      const { data } = await supabase.auth.getSession();
-      token = data?.session?.access_token ?? null;
-    } catch { /* ignore — we'll still clean up */ }
-
-    // 2. Notify server to flush its auth cache (fire-and-forget, don't block on errors)
-    if (token) {
-      notifyServerLogout(token);
-    }
-
-    // 3. Attempt Supabase signOut (may fail with 503 if auth service is down)
-    try {
-      await supabase.auth.signOut();
-    } catch (err) {
-      console.warn('Supabase signOut failed (forcing local cleanup):', err);
-    }
-
-    // 4. Force-clear localStorage auth token regardless of Supabase response
-    // The key format is: sb-<project-ref>-auth-token
-    for (const key of Object.keys(localStorage)) {
-      if (key.startsWith('sb-') && key.endsWith('-auth-token')) {
-        localStorage.removeItem(key);
-      }
-    }
-
-    // 5. Clear cached roles
-    if (user?.id) {
-      localStorage.removeItem(`polymech-roles-${user.id}`);
-    }
-
-    // 6. Reset React state — user is now logged out
-    setUser(null);
-    setSession(null);
-    setRoles([]);
-  };
-
-  return (
-    <AuthContext.Provider value={{
-      user,
-      session,
-      roles,
-      loading,
-      signUp,
-      signIn,
-      signInWithGithub,
-      signInWithGoogle,
-      resetPassword,
-      signOut,
-    }}>
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-};
\ No newline at end of file
+import { createContext, useContext, useEffect, useState, useRef } from 'react';
+import { User, Session } from '@supabase/supabase-js';
+import { supabase } from '@/integrations/supabase/client';
+import { useToast } from '@/hooks/use-toast';
+import { fetchUserRoles, notifyServerLogout } from '@/modules/user/client-user';
+
+interface AuthContextType {
+  user: User | null;
+  session: Session | null;
+  roles: string[];
+  loading: boolean;
+  signUp: (email: string, password: string, username: string, displayName: string) => Promise<{ data: any; error: any }>;
+  signIn: (email: string, password: string) => Promise<{ error: any }>;
+  signInWithGithub: () => Promise<{ error: any }>;
+  signInWithGoogle: () => Promise<{ error: any }>;
+  resetPassword: (email: string) => Promise<{ error: any }>;
+  signOut: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [roles, setRoles] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const loadingRef = useRef(true); // Track loading state for timeouts/callbacks without closure staleness
+  const { toast } = useToast();
+
+  useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+
+  useEffect(() => {
+    let mounted = true;
+    let cleanup: (() => void) | undefined;
+
+    // Simplified and robust auth initialization
+    const initAuth = async () => {
+      const startTime = Date.now();
+      const MIN_LOADING_TIME = 500;
+
+      // 1. Setup listener *before* checking session to catch any immediate events
+      const { data: { subscription } } = supabase.auth.onAuthStateChange(
+        async (event, session) => {
+          if (mounted) {
+            setSession(session);
+            setUser(session?.user ?? null);
+
+            if (session?.user) {
+              // OPTIMIZATION: Check for cached roles to unblock UI immediately
+              const cachedRoles = localStorage.getItem(`polymech-roles-${session.user.id}`);
+              if (cachedRoles) {
+                try {
+                  const parsedRoles = JSON.parse(cachedRoles);
+                  if (mounted) setRoles(parsedRoles);
+                  // If we have cached roles, we can stop loading immediately (after min time)
+                  // We will still fetch fresh roles in background
+                  if (loadingRef.current) {
+                    const elapsed = Date.now() - startTime;
+                    if (elapsed < MIN_LOADING_TIME) {
+                      await new Promise(r => setTimeout(r, MIN_LOADING_TIME - elapsed));
+                    }
+                    if (mounted) setLoading(false);
+                  }
+                } catch (e) {
+                  console.warn('Failed to parse cached roles', e);
+                }
+              }
+
+              // Fetch fresh roles independently
+              fetchUserRoles(session.user.id).then(roles => {
+                if (!mounted) return;
+
+                // Update cache
+                localStorage.setItem(`polymech-roles-${session.user.id}`, JSON.stringify(roles));
+
+                // Compare with current roles to avoid unnecessary re-renders if possible?
+                // For now just set them. React handles strict equality checks on state setters usually, 
+                // but arrays are new references. 
+                // Let's just set it.
+                if (mounted) setRoles(roles);
+
+                // If we were still loading (no cache), stop loading now
+                if (loadingRef.current) {
+                  if (mounted) setLoading(false);
+                }
+              }).catch(err => {
+                console.error('Error fetching user roles:', err);
+                // If we were still loading and failed, we should stop loading (roles=[], guest?)
+                if (loadingRef.current && !cachedRoles) {
+                  if (mounted) setLoading(false);
+                }
+              });
+
+            } else {
+              if (mounted) {
+                setRoles([]);
+                if (loadingRef.current) setLoading(false);
+              }
+            }
+          }
+        }
+      );
+
+      // 2. Trigger initial check, but don't block narrowly on it
+      // The onAuthStateChange often fires INITIAL_SESSION immediately.
+
+      const safetyTimeout = setTimeout(() => {
+        if (mounted && loadingRef.current) {
+          console.warn('Auth initialization safety timeout (5s) - forcing app load');
+          setLoading(false);
+        }
+      }, 5000);
+
+      try {
+        const { error } = await supabase.auth.getSession();
+        if (error) throw error;
+      } catch (err) {
+        console.error("getSession failed or timed out", err);
+        // If this fails, the safety timeout or event listener (with null session) should handle it
+      }
+
+      return () => {
+        clearTimeout(safetyTimeout);
+        subscription.unsubscribe();
+      };
+    };
+
+    initAuth().then(c => { cleanup = c; });
+
+    return () => {
+      mounted = false;
+      if (cleanup) cleanup();
+    };
+  }, []);
+
+  const signUp = async (email: string, password: string, username: string, displayName: string) => {
+    const redirectUrl = `${window.location.origin}/`;
+
+    const { data, error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        emailRedirectTo: redirectUrl,
+        data: {
+          username,
+          display_name: displayName
+        }
+      }
+    });
+
+    if (error) {
+      toast({
+        title: "Sign up failed",
+        description: error.message,
+        variant: "destructive",
+      });
+    } else {
+      toast({
+        title: "Check your email",
+        description: "Please check your email to confirm your account.",
+      });
+    }
+
+    return { data, error };
+  };
+
+  const signIn = async (email: string, password: string) => {
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (error) {
+      toast({
+        title: "Sign in failed",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+
+    return { error };
+  };
+
+  const signInWithGithub = async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'github',
+      options: {
+        redirectTo: `${window.location.origin}/`
+      }
+    });
+
+    if (error) {
+      toast({
+        title: "Sign in failed",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+
+    return { error };
+  };
+
+  const signInWithGoogle = async () => {
+    const redirectTo = `${window.location.origin}/`;
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo
+      }
+    });
+
+    if (error) {
+      toast({
+        title: "Sign in failed",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+
+    return { error };
+  };
+
+  const resetPassword = async (email: string) => {
+    const baseUrl = import.meta.env.VITE_REDIRECT_URL || window.location.origin;
+    const { error } = await supabase.auth.resetPasswordForEmail(email, {
+      redirectTo: `${baseUrl}/auth/update-password`,
+    });
+
+    if (error) {
+      toast({
+        title: 'Reset failed',
+        description: error.message,
+        variant: 'destructive',
+      });
+    } else {
+      toast({
+        title: 'Check your email',
+        description: 'A password reset link has been sent to your email.',
+      });
+    }
+
+    return { error };
+  };
+
+  const signOut = async () => {
+    // 1. Grab current token before signing out (we need it to notify the server)
+    let token: string | null = null;
+    try {
+      const { data } = await supabase.auth.getSession();
+      token = data?.session?.access_token ?? null;
+    } catch { /* ignore — we'll still clean up */ }
+
+    // 2. Notify server to flush its auth cache (fire-and-forget, don't block on errors)
+    if (token) {
+      notifyServerLogout(token);
+    }
+
+    // 3. Attempt Supabase signOut (may fail with 503 if auth service is down)
+    try {
+      await supabase.auth.signOut();
+    } catch (err) {
+      console.warn('Supabase signOut failed (forcing local cleanup):', err);
+    }
+
+    // 4. Force-clear localStorage auth token regardless of Supabase response
+    // The key format is: sb-<project-ref>-auth-token
+    for (const key of Object.keys(localStorage)) {
+      if (key.startsWith('sb-') && key.endsWith('-auth-token')) {
+        localStorage.removeItem(key);
+      }
+    }
+
+    // 5. Clear cached roles
+    if (user?.id) {
+      localStorage.removeItem(`polymech-roles-${user.id}`);
+    }
+
+    // 6. Reset React state — user is now logged out
+    setUser(null);
+    setSession(null);
+    setRoles([]);
+  };
+
+  return (
+    <AuthContext.Provider value={{
+      user,
+      session,
+      roles,
+      loading,
+      signUp,
+      signIn,
+      signInWithGithub,
+      signInWithGoogle,
+      resetPassword,
+      signOut,
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
diff --git a/packages/ui/src/hooks/useDropZone.ts b/packages/ui/src/hooks/useDropZone.ts
index 53e24382..e3344ad2 100644
--- a/packages/ui/src/hooks/useDropZone.ts
+++ b/packages/ui/src/hooks/useDropZone.ts
@@ -1,86 +1,86 @@
-import { useEffect, useRef, useState } from "react";
-
-const useDropZone = ({ onDrop }: { onDrop: (paths: string[]) => void }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [dragIn, setDragIn] = useState(false);
-  const dragCounterRef = useRef(0);
-
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-
-    const handleDragEnter = (e: DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      dragCounterRef.current += 1;
-      if (dragCounterRef.current === 1) {
-        setDragIn(true);
-      }
-    };
-
-    const handleDragOver = (e: DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-
-    const handleDragLeave = (e: DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      dragCounterRef.current -= 1;
-      if (dragCounterRef.current <= 0) {
-        dragCounterRef.current = 0;
-        setDragIn(false);
-      }
-    };
-
-    const handleDrop = (e: DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      dragCounterRef.current = 0;
-      setDragIn(false);
-
-      const files = Array.from(e.dataTransfer?.files || []);
-      if (files.length > 0) {
-        onDrop(files.map(file => file.name));
-      }
-    };
-
-    // Also handle document-level events to reset state when dragging outside
-    const handleDocumentDragLeave = (e: DragEvent) => {
-      if (!element.contains(e.target as Node)) {
-        dragCounterRef.current = 0;
-        setDragIn(false);
-      }
-    };
-
-    const handleDocumentDrop = () => {
-      dragCounterRef.current = 0;
-      setDragIn(false);
-    };
-
-    element.addEventListener('dragenter', handleDragEnter);
-    element.addEventListener('dragover', handleDragOver);
-    element.addEventListener('dragleave', handleDragLeave);
-    element.addEventListener('drop', handleDrop);
-
-    // Document-level listeners to handle edge cases
-    document.addEventListener('dragleave', handleDocumentDragLeave);
-    document.addEventListener('drop', handleDocumentDrop);
-
-    return () => {
-      element.removeEventListener('dragenter', handleDragEnter);
-      element.removeEventListener('dragover', handleDragOver);
-      element.removeEventListener('dragleave', handleDragLeave);
-      element.removeEventListener('drop', handleDrop);
-      document.removeEventListener('dragleave', handleDocumentDragLeave);
-      document.removeEventListener('drop', handleDocumentDrop);
-    };
-  }, [onDrop]);
-
-  return { ref, dragIn };
-};
-
-export { useDropZone };
\ No newline at end of file
+import { useEffect, useRef, useState } from "react";
+
+const useDropZone = ({ onDrop }: { onDrop: (paths: string[]) => void }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [dragIn, setDragIn] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleDragEnter = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      dragCounterRef.current += 1;
+      if (dragCounterRef.current === 1) {
+        setDragIn(true);
+      }
+    };
+
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      dragCounterRef.current -= 1;
+      if (dragCounterRef.current <= 0) {
+        dragCounterRef.current = 0;
+        setDragIn(false);
+      }
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      dragCounterRef.current = 0;
+      setDragIn(false);
+
+      const files = Array.from(e.dataTransfer?.files || []);
+      if (files.length > 0) {
+        onDrop(files.map(file => file.name));
+      }
+    };
+
+    // Also handle document-level events to reset state when dragging outside
+    const handleDocumentDragLeave = (e: DragEvent) => {
+      if (!element.contains(e.target as Node)) {
+        dragCounterRef.current = 0;
+        setDragIn(false);
+      }
+    };
+
+    const handleDocumentDrop = () => {
+      dragCounterRef.current = 0;
+      setDragIn(false);
+    };
+
+    element.addEventListener('dragenter', handleDragEnter);
+    element.addEventListener('dragover', handleDragOver);
+    element.addEventListener('dragleave', handleDragLeave);
+    element.addEventListener('drop', handleDrop);
+
+    // Document-level listeners to handle edge cases
+    document.addEventListener('dragleave', handleDocumentDragLeave);
+    document.addEventListener('drop', handleDocumentDrop);
+
+    return () => {
+      element.removeEventListener('dragenter', handleDragEnter);
+      element.removeEventListener('dragover', handleDragOver);
+      element.removeEventListener('dragleave', handleDragLeave);
+      element.removeEventListener('drop', handleDrop);
+      document.removeEventListener('dragleave', handleDocumentDragLeave);
+      document.removeEventListener('drop', handleDocumentDrop);
+    };
+  }, [onDrop]);
+
+  return { ref, dragIn };
+};
+
+export { useDropZone };
diff --git a/packages/ui/src/hooks/useFeedData.ts b/packages/ui/src/hooks/useFeedData.ts
index 73cd85e0..09f1f386 100644
--- a/packages/ui/src/hooks/useFeedData.ts
+++ b/packages/ui/src/hooks/useFeedData.ts
@@ -1,324 +1,324 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { FEED_API_ENDPOINT, FEED_PAGE_SIZE } from '@/constants';
-import { useProfiles } from '@/contexts/ProfilesContext';
-import { useFeedCache } from '@/contexts/FeedCacheContext';
-import { augmentFeedPosts, FeedPost } from '@/modules/posts/client-posts';
-import { searchContent, searchContentStream } from '@/modules/search/client-search';
-import { getCurrentLang } from '@/i18n';
-import { fetchWithDeduplication } from '@/lib/db';
-import { fetchFeed } from '@/modules/feed/client-feed';
-
-const { supabase } = await import('@/integrations/supabase/client');
-
-export type FeedSortOption = 'latest' | 'top';
-
-interface UseFeedDataProps {
-    source?: 'home' | 'collection' | 'tag' | 'user' | 'widget' | 'search';
-    sourceId?: string;
-    isOrgContext?: boolean;
-    orgSlug?: string;
-    enabled?: boolean;
-    sortBy?: FeedSortOption;
-    supabaseClient?: any;
-    categoryIds?: string[];
-    categorySlugs?: string[];
-    contentType?: 'posts' | 'pages' | 'pictures' | 'files';
-    visibilityFilter?: 'invisible' | 'private';
-}
-
-export const useFeedData = ({
-    source = 'home',
-    sourceId,
-    isOrgContext,
-    orgSlug,
-    enabled = true,
-    sortBy = 'latest',
-    supabaseClient,
-    categoryIds,
-    categorySlugs,
-    contentType,
-    visibilityFilter
-}: UseFeedDataProps) => {
-    const { getCache, saveCache } = useFeedCache();
-    const categoryKey = categoryIds ? `-catIds${categoryIds.join(',')}` : '';
-    const slugKey = categorySlugs ? `-catSlugs${categorySlugs.join(',')}` : '';
-    const contentTypeKey = contentType ? `-ct${contentType}` : '';
-    const visibilityKey = visibilityFilter ? `-vis${visibilityFilter}` : '';
-    const cacheKey = `${source}-${sourceId || ''}-${isOrgContext ? 'org' : 'personal'}-${orgSlug || ''}-${sortBy}${categoryKey}${slugKey}${contentTypeKey}${visibilityKey}`;
-
-    // Initialize from cache if available
-    const [posts, setPosts] = useState<FeedPost[]>(() => {
-        const cached = getCache(cacheKey);
-        return cached ? cached.posts : [];
-    });
-    const [page, setPage] = useState(() => {
-        const cached = getCache(cacheKey);
-        return cached ? cached.page : 0;
-    });
-    const [hasMore, setHasMore] = useState(() => {
-        const cached = getCache(cacheKey);
-        return cached !== null ? cached.hasMore : true;
-    });
-    const [loading, setLoading] = useState(() => {
-        const cached = getCache(cacheKey);
-        return cached ? false : true;
-    });
-
-    const [isFetchingMore, setIsFetchingMore] = useState(false);
-    const [error, setError] = useState<Error | null>(null);
-    const { fetchProfiles } = useProfiles();
-
-    // Keep track of active stream for search
-    const streamRef = useRef<(() => void) | null>(null);
-
-    // Track if we mounted with cache to avoid double fetch
-    const mountedWithCache = useRef(!!getCache(cacheKey));
-
-    // Reset pagination when source changes (if not cached)
-    useEffect(() => {
-        const cached = getCache(cacheKey);
-        if (cached) {
-            setPosts(cached.posts);
-            setPage(cached.page);
-            setHasMore(cached.hasMore);
-            setLoading(false);
-            mountedWithCache.current = true;
-        } else {
-            setPosts([]);
-            setPage(0);
-            setHasMore(true);
-            setLoading(true);
-            mountedWithCache.current = false;
-        }
-    }, [source, sourceId, isOrgContext, orgSlug, cacheKey, getCache]);
-
-    // Update Cache whenever state changes
-    useEffect(() => {
-        if (!loading && posts.length > 0) {
-            const currentCache = getCache(cacheKey);
-            saveCache(cacheKey, {
-                posts,
-                page,
-                hasMore,
-                scrollY: currentCache?.scrollY || 0
-            });
-        }
-    }, [posts, page, hasMore, loading, cacheKey, saveCache, getCache]);
-
-    const loadFeed = useCallback(async (currentPage: number, isLoadMore: boolean) => {
-        if (!enabled) {
-            setLoading(false);
-            return;
-        }
-        if (isLoadMore) {
-            setIsFetchingMore(true);
-        } else {
-            setLoading(true);
-        }
-        setError(null);
-        let fetchedPosts: any[] = [];
-        try {
-            // 0. Search source — use streaming API
-            if (source === 'search' && sourceId) {
-                const client = supabaseClient || supabase;
-                const { data: { session } } = await client.auth.getSession();
-
-                // Close any existing stream
-                if (streamRef.current) {
-                    streamRef.current();
-                    streamRef.current = null;
-                }
-
-                // First clear existing posts if it's a new search
-                if (!isLoadMore) {
-                    setPosts([]);
-                }
-
-                setHasMore(false); // Search returns all results, no pagination
-
-                await new Promise<void>((resolve, reject) => {
-                    let firstChunkReceived = false;
-                    let currentStreamedPosts: any[] = [];
-
-                    streamRef.current = searchContentStream({
-                        q: sourceId,
-                        limit: 50,
-                        type: contentType ? contentType as any : undefined,
-                        token: session?.access_token || undefined,
-                        visibilityFilter: visibilityFilter || undefined
-                    }, (hits) => {
-                        currentStreamedPosts = [...currentStreamedPosts, ...hits];
-
-                        // Process and update state
-                        const augmentedPosts = augmentFeedPosts(currentStreamedPosts);
-                        const postsWithUpdatedCovers = updatePostCovers(augmentedPosts, sortBy);
-                        setPosts(sortFeedPosts(postsWithUpdatedCovers, sortBy));
-
-                        // Fetch profiles for new hits
-                        const userIds = Array.from(new Set(hits.map((p: any) => p.user_id)));
-                        if (userIds.length > 0) {
-                            fetchProfiles(userIds as string[]);
-                        }
-
-                        // Resolve promise on first chunk so loading spinner hides
-                        if (!firstChunkReceived) {
-                            firstChunkReceived = true;
-                            resolve();
-                        }
-                    }, (err) => {
-                        console.error('Stream failed:', err);
-                        if (!firstChunkReceived) reject(err);
-                    }, () => {
-                        setHasMore(false);
-                        if (!firstChunkReceived) resolve(); // Resolve even if empty
-                    });
-                });
-                return; // Early return as search updates state directly
-            } else {
-                const hasFilters = (categoryIds && categoryIds.length > 0) || (categorySlugs && categorySlugs.length > 0) || contentType || visibilityFilter;
-
-                if (source === 'home' && !sourceId && !hasFilters && currentPage === 0 && window.__INITIAL_STATE__?.feed) {
-                    fetchedPosts = window.__INITIAL_STATE__.feed;
-                    window.__INITIAL_STATE__.feed = undefined;
-                } else {
-                    // 2. API Fetch (Universal)
-                    const dedupKey = `feed-${cacheKey}-p${currentPage}`;
-
-                    fetchedPosts = await fetchWithDeduplication(
-                        dedupKey,
-                        () => fetchFeed({
-                            source: source,
-                            sourceId: sourceId,
-                            page: currentPage,
-                            limit: FEED_PAGE_SIZE,
-                            sortBy: sortBy,
-                            categoryIds: categoryIds,
-                            categorySlugs: categorySlugs,
-                            contentType: contentType,
-                            visibilityFilter: visibilityFilter,
-                            lang: getCurrentLang()
-                        })
-                    );
-                }
-
-                if (fetchedPosts.length < FEED_PAGE_SIZE) {
-                    setHasMore(false);
-                } else {
-                    setHasMore(true);
-                }
-            } // end else (non-search)
-
-            // Augment posts (ensure cover, author profiles etc are set)
-            const augmentedPosts = augmentFeedPosts(fetchedPosts);
-
-            // Update cover based on sort mode
-            const postsWithUpdatedCovers = updatePostCovers(augmentedPosts, sortBy);
-
-            // Apply client-side sorting
-            setPosts(prev => {
-                const combined = isLoadMore ? [...prev, ...postsWithUpdatedCovers] : postsWithUpdatedCovers;
-                // Re-sort the entire combined list to maintain correct order across pages
-                return sortFeedPosts(combined, sortBy);
-            });
-
-            // Fetch profiles via context for any users in the feed
-            const userIds = Array.from(new Set(augmentedPosts.map((p: any) => p.user_id)));
-            if (userIds.length > 0) {
-                await fetchProfiles(userIds as string[]);
-            }
-
-        } catch (err) {
-            setError(err instanceof Error ? err : new Error('Unknown error fetching feed'));
-        } finally {
-            setLoading(false);
-            setIsFetchingMore(false);
-        }
-    }, [source, sourceId, isOrgContext, orgSlug, enabled, fetchProfiles, sortBy, supabaseClient, categoryIds, categorySlugs, contentType, visibilityFilter]);
-
-    // Initial Load
-    useEffect(() => {
-        // If we initialized from cache, don't fetch page 0 again immediately.
-        if (mountedWithCache.current) {
-            mountedWithCache.current = false;
-            return;
-        }
-        loadFeed(0, false);
-    }, [loadFeed]);
-
-    const loadMore = useCallback(() => {
-        if (!hasMore || isFetchingMore || loading) return;
-        const nextPage = page + 1;
-        setPage(nextPage);
-        loadFeed(nextPage, true);
-    }, [hasMore, isFetchingMore, loading, page, loadFeed]);
-
-    // Cleanup stream on unmount
-    useEffect(() => {
-        return () => {
-            if (streamRef.current) {
-                streamRef.current();
-                streamRef.current = null;
-            }
-        };
-    }, []);
-
-    return { posts, loading, error, hasMore, loadMore, isFetchingMore };
-};
-
-// Helper function to update post covers based on sort mode
-const updatePostCovers = (posts: FeedPost[], sortBy: FeedSortOption): FeedPost[] => {
-    return posts.map(post => {
-        if (!post.pictures || post.pictures.length === 0) {
-            return post;
-        }
-
-        const validPics = post.pictures.filter((p: any) => p.visible !== false);
-        if (validPics.length === 0) {
-            return post;
-        }
-
-        let newCover;
-        if (sortBy === 'latest') {
-            // For "Latest" mode: prefer is_selected, then first by position
-            const selected = validPics.find((p: any) => p.is_selected);
-            const sortedByPosition = [...validPics].sort((a, b) => (a.position || 0) - (b.position || 0));
-            newCover = selected || sortedByPosition[0];
-        } else {
-            // For "Top" or default: Use first by position
-            const sortedByPosition = [...validPics].sort((a, b) => (a.position || 0) - (b.position || 0));
-            newCover = sortedByPosition[0];
-        }
-
-        return {
-            ...post,
-            cover: newCover
-        };
-    });
-};
-
-// Helper function to sort feed posts
-const sortFeedPosts = (posts: FeedPost[], sortBy: FeedSortOption): FeedPost[] => {
-    const sorted = [...posts];
-
-    if (sortBy === 'top') {
-        // Sort by likes_count descending, then by created_at descending as tiebreaker
-        sorted.sort((a, b) => {
-            const likesA = a.likes_count || 0;
-            const likesB = b.likes_count || 0;
-
-            if (likesB !== likesA) {
-                return likesB - likesA;
-            }
-
-            // Tiebreaker: most recent first
-            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-        });
-    } else {
-        // 'latest' - Sort by post creation date (most recent first)
-        sorted.sort((a, b) => {
-            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-        });
-    }
-
-    return sorted;
-};
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { FEED_API_ENDPOINT, FEED_PAGE_SIZE } from '@/constants';
+import { useProfiles } from '@/contexts/ProfilesContext';
+import { useFeedCache } from '@/contexts/FeedCacheContext';
+import { augmentFeedPosts, FeedPost } from '@/modules/posts/client-posts';
+import { searchContent, searchContentStream } from '@/modules/search/client-search';
+import { getCurrentLang } from '@/i18n';
+import { fetchWithDeduplication } from '@/lib/db';
+import { fetchFeed } from '@/modules/feed/client-feed';
+
+const { supabase } = await import('@/integrations/supabase/client');
+
+export type FeedSortOption = 'latest' | 'top';
+
+interface UseFeedDataProps {
+    source?: 'home' | 'collection' | 'tag' | 'user' | 'widget' | 'search';
+    sourceId?: string;
+    isOrgContext?: boolean;
+    orgSlug?: string;
+    enabled?: boolean;
+    sortBy?: FeedSortOption;
+    supabaseClient?: any;
+    categoryIds?: string[];
+    categorySlugs?: string[];
+    contentType?: 'posts' | 'pages' | 'pictures' | 'files';
+    visibilityFilter?: 'invisible' | 'private';
+}
+
+export const useFeedData = ({
+    source = 'home',
+    sourceId,
+    isOrgContext,
+    orgSlug,
+    enabled = true,
+    sortBy = 'latest',
+    supabaseClient,
+    categoryIds,
+    categorySlugs,
+    contentType,
+    visibilityFilter
+}: UseFeedDataProps) => {
+    const { getCache, saveCache } = useFeedCache();
+    const categoryKey = categoryIds ? `-catIds${categoryIds.join(',')}` : '';
+    const slugKey = categorySlugs ? `-catSlugs${categorySlugs.join(',')}` : '';
+    const contentTypeKey = contentType ? `-ct${contentType}` : '';
+    const visibilityKey = visibilityFilter ? `-vis${visibilityFilter}` : '';
+    const cacheKey = `${source}-${sourceId || ''}-${isOrgContext ? 'org' : 'personal'}-${orgSlug || ''}-${sortBy}${categoryKey}${slugKey}${contentTypeKey}${visibilityKey}`;
+
+    // Initialize from cache if available
+    const [posts, setPosts] = useState<FeedPost[]>(() => {
+        const cached = getCache(cacheKey);
+        return cached ? cached.posts : [];
+    });
+    const [page, setPage] = useState(() => {
+        const cached = getCache(cacheKey);
+        return cached ? cached.page : 0;
+    });
+    const [hasMore, setHasMore] = useState(() => {
+        const cached = getCache(cacheKey);
+        return cached !== null ? cached.hasMore : true;
+    });
+    const [loading, setLoading] = useState(() => {
+        const cached = getCache(cacheKey);
+        return cached ? false : true;
+    });
+
+    const [isFetchingMore, setIsFetchingMore] = useState(false);
+    const [error, setError] = useState<Error | null>(null);
+    const { fetchProfiles } = useProfiles();
+
+    // Keep track of active stream for search
+    const streamRef = useRef<(() => void) | null>(null);
+
+    // Track if we mounted with cache to avoid double fetch
+    const mountedWithCache = useRef(!!getCache(cacheKey));
+
+    // Reset pagination when source changes (if not cached)
+    useEffect(() => {
+        const cached = getCache(cacheKey);
+        if (cached) {
+            setPosts(cached.posts);
+            setPage(cached.page);
+            setHasMore(cached.hasMore);
+            setLoading(false);
+            mountedWithCache.current = true;
+        } else {
+            setPosts([]);
+            setPage(0);
+            setHasMore(true);
+            setLoading(true);
+            mountedWithCache.current = false;
+        }
+    }, [source, sourceId, isOrgContext, orgSlug, cacheKey, getCache]);
+
+    // Update Cache whenever state changes
+    useEffect(() => {
+        if (!loading && posts.length > 0) {
+            const currentCache = getCache(cacheKey);
+            saveCache(cacheKey, {
+                posts,
+                page,
+                hasMore,
+                scrollY: currentCache?.scrollY || 0
+            });
+        }
+    }, [posts, page, hasMore, loading, cacheKey, saveCache, getCache]);
+
+    const loadFeed = useCallback(async (currentPage: number, isLoadMore: boolean) => {
+        if (!enabled) {
+            setLoading(false);
+            return;
+        }
+        if (isLoadMore) {
+            setIsFetchingMore(true);
+        } else {
+            setLoading(true);
+        }
+        setError(null);
+        let fetchedPosts: any[] = [];
+        try {
+            // 0. Search source — use streaming API
+            if (source === 'search' && sourceId) {
+                const client = supabaseClient || supabase;
+                const { data: { session } } = await client.auth.getSession();
+
+                // Close any existing stream
+                if (streamRef.current) {
+                    streamRef.current();
+                    streamRef.current = null;
+                }
+
+                // First clear existing posts if it's a new search
+                if (!isLoadMore) {
+                    setPosts([]);
+                }
+
+                setHasMore(false); // Search returns all results, no pagination
+
+                await new Promise<void>((resolve, reject) => {
+                    let firstChunkReceived = false;
+                    let currentStreamedPosts: any[] = [];
+
+                    streamRef.current = searchContentStream({
+                        q: sourceId,
+                        limit: 50,
+                        type: contentType ? contentType as any : undefined,
+                        token: session?.access_token || undefined,
+                        visibilityFilter: visibilityFilter || undefined
+                    }, (hits) => {
+                        currentStreamedPosts = [...currentStreamedPosts, ...hits];
+
+                        // Process and update state
+                        const augmentedPosts = augmentFeedPosts(currentStreamedPosts);
+                        const postsWithUpdatedCovers = updatePostCovers(augmentedPosts, sortBy);
+                        setPosts(sortFeedPosts(postsWithUpdatedCovers, sortBy));
+
+                        // Fetch profiles for new hits
+                        const userIds = Array.from(new Set(hits.map((p: any) => p.user_id)));
+                        if (userIds.length > 0) {
+                            fetchProfiles(userIds as string[]);
+                        }
+
+                        // Resolve promise on first chunk so loading spinner hides
+                        if (!firstChunkReceived) {
+                            firstChunkReceived = true;
+                            resolve();
+                        }
+                    }, (err) => {
+                        console.error('Stream failed:', err);
+                        if (!firstChunkReceived) reject(err);
+                    }, () => {
+                        setHasMore(false);
+                        if (!firstChunkReceived) resolve(); // Resolve even if empty
+                    });
+                });
+                return; // Early return as search updates state directly
+            } else {
+                const hasFilters = (categoryIds && categoryIds.length > 0) || (categorySlugs && categorySlugs.length > 0) || contentType || visibilityFilter;
+
+                if (source === 'home' && !sourceId && !hasFilters && currentPage === 0 && window.__INITIAL_STATE__?.feed) {
+                    fetchedPosts = window.__INITIAL_STATE__.feed;
+                    window.__INITIAL_STATE__.feed = undefined;
+                } else {
+                    // 2. API Fetch (Universal)
+                    const dedupKey = `feed-${cacheKey}-p${currentPage}`;
+
+                    fetchedPosts = await fetchWithDeduplication(
+                        dedupKey,
+                        () => fetchFeed({
+                            source: source,
+                            sourceId: sourceId,
+                            page: currentPage,
+                            limit: FEED_PAGE_SIZE,
+                            sortBy: sortBy,
+                            categoryIds: categoryIds,
+                            categorySlugs: categorySlugs,
+                            contentType: contentType,
+                            visibilityFilter: visibilityFilter,
+                            lang: getCurrentLang()
+                        })
+                    );
+                }
+
+                if (fetchedPosts.length < FEED_PAGE_SIZE) {
+                    setHasMore(false);
+                } else {
+                    setHasMore(true);
+                }
+            } // end else (non-search)
+
+            // Augment posts (ensure cover, author profiles etc are set)
+            const augmentedPosts = augmentFeedPosts(fetchedPosts);
+
+            // Update cover based on sort mode
+            const postsWithUpdatedCovers = updatePostCovers(augmentedPosts, sortBy);
+
+            // Apply client-side sorting
+            setPosts(prev => {
+                const combined = isLoadMore ? [...prev, ...postsWithUpdatedCovers] : postsWithUpdatedCovers;
+                // Re-sort the entire combined list to maintain correct order across pages
+                return sortFeedPosts(combined, sortBy);
+            });
+
+            // Fetch profiles via context for any users in the feed
+            const userIds = Array.from(new Set(augmentedPosts.map((p: any) => p.user_id)));
+            if (userIds.length > 0) {
+                await fetchProfiles(userIds as string[]);
+            }
+
+        } catch (err) {
+            setError(err instanceof Error ? err : new Error('Unknown error fetching feed'));
+        } finally {
+            setLoading(false);
+            setIsFetchingMore(false);
+        }
+    }, [source, sourceId, isOrgContext, orgSlug, enabled, fetchProfiles, sortBy, supabaseClient, categoryIds, categorySlugs, contentType, visibilityFilter]);
+
+    // Initial Load
+    useEffect(() => {
+        // If we initialized from cache, don't fetch page 0 again immediately.
+        if (mountedWithCache.current) {
+            mountedWithCache.current = false;
+            return;
+        }
+        loadFeed(0, false);
+    }, [loadFeed]);
+
+    const loadMore = useCallback(() => {
+        if (!hasMore || isFetchingMore || loading) return;
+        const nextPage = page + 1;
+        setPage(nextPage);
+        loadFeed(nextPage, true);
+    }, [hasMore, isFetchingMore, loading, page, loadFeed]);
+
+    // Cleanup stream on unmount
+    useEffect(() => {
+        return () => {
+            if (streamRef.current) {
+                streamRef.current();
+                streamRef.current = null;
+            }
+        };
+    }, []);
+
+    return { posts, loading, error, hasMore, loadMore, isFetchingMore };
+};
+
+// Helper function to update post covers based on sort mode
+const updatePostCovers = (posts: FeedPost[], sortBy: FeedSortOption): FeedPost[] => {
+    return posts.map(post => {
+        if (!post.pictures || post.pictures.length === 0) {
+            return post;
+        }
+
+        const validPics = post.pictures.filter((p: any) => p.visible !== false);
+        if (validPics.length === 0) {
+            return post;
+        }
+
+        let newCover;
+        if (sortBy === 'latest') {
+            // For "Latest" mode: prefer is_selected, then first by position
+            const selected = validPics.find((p: any) => p.is_selected);
+            const sortedByPosition = [...validPics].sort((a, b) => (a.position || 0) - (b.position || 0));
+            newCover = selected || sortedByPosition[0];
+        } else {
+            // For "Top" or default: Use first by position
+            const sortedByPosition = [...validPics].sort((a, b) => (a.position || 0) - (b.position || 0));
+            newCover = sortedByPosition[0];
+        }
+
+        return {
+            ...post,
+            cover: newCover
+        };
+    });
+};
+
+// Helper function to sort feed posts
+const sortFeedPosts = (posts: FeedPost[], sortBy: FeedSortOption): FeedPost[] => {
+    const sorted = [...posts];
+
+    if (sortBy === 'top') {
+        // Sort by likes_count descending, then by created_at descending as tiebreaker
+        sorted.sort((a, b) => {
+            const likesA = a.likes_count || 0;
+            const likesB = b.likes_count || 0;
+
+            if (likesB !== likesA) {
+                return likesB - likesA;
+            }
+
+            // Tiebreaker: most recent first
+            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        });
+    } else {
+        // 'latest' - Sort by post creation date (most recent first)
+        sorted.sort((a, b) => {
+            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        });
+    }
+
+    return sorted;
+};
diff --git a/packages/ui/src/hooks/useNativeVoiceInput.ts b/packages/ui/src/hooks/useNativeVoiceInput.ts
index bc383f13..33b02b29 100644
--- a/packages/ui/src/hooks/useNativeVoiceInput.ts
+++ b/packages/ui/src/hooks/useNativeVoiceInput.ts
@@ -1,69 +1,69 @@
-import { useState, useRef } from 'react';
-import { toast } from 'sonner';
-import { translate } from '@/i18n';
-import { encodeWav } from '@/lib/audioUtils';
-
-export interface NativeAudioResult {
-  base64Wav: string;
-  durationMs: number;
-}
-
-export const useNativeVoiceInput = (onRecordingComplete: (audio: NativeAudioResult) => void) => {
-  const [isRecording, setIsRecording] = useState(false);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const audioChunksRef = useRef<Blob[]>([]);
-  const startTimeRef = useRef<number>(0);
-
-  const handleMicrophoneToggle = async () => {
-    if (isRecording) {
-      if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-        mediaRecorderRef.current.stop();
-      }
-      setIsRecording(false);
-    } else {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        const mediaRecorder = new MediaRecorder(stream);
-        mediaRecorderRef.current = mediaRecorder;
-        audioChunksRef.current = [];
-
-        mediaRecorder.ondataavailable = (event) => {
-          if (event.data.size > 0) {
-            audioChunksRef.current.push(event.data);
-          }
-        };
-
-        mediaRecorder.onstart = () => {
-          startTimeRef.current = Date.now();
-        };
-
-        mediaRecorder.onstop = async () => {
-          const durationMs = Date.now() - startTimeRef.current;
-          const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
-          
-          try {
-            const base64Wav = await encodeWav(audioBlob);
-            onRecordingComplete({ base64Wav, durationMs });
-          } catch (error) {
-            console.error('Error encoding audio to WAV:', error);
-            toast.error(translate('Failed to encode audio.'));
-          }
-
-          // Stop all audio tracks
-          stream.getTracks().forEach(track => track.stop());
-        };
-
-        mediaRecorder.start();
-        setIsRecording(true);
-      } catch (error) {
-        console.error('Error accessing microphone:', error);
-        toast.error(translate('Could not access microphone.'));
-      }
-    }
-  };
-
-  return {
-    isRecording,
-    handleMicrophoneToggle,
-  };
-};
+import { useState, useRef } from 'react';
+import { toast } from 'sonner';
+import { translate } from '@/i18n';
+import { encodeWav } from '@/lib/audioUtils';
+
+export interface NativeAudioResult {
+  base64Wav: string;
+  durationMs: number;
+}
+
+export const useNativeVoiceInput = (onRecordingComplete: (audio: NativeAudioResult) => void) => {
+  const [isRecording, setIsRecording] = useState(false);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const startTimeRef = useRef<number>(0);
+
+  const handleMicrophoneToggle = async () => {
+    if (isRecording) {
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
+        mediaRecorderRef.current.stop();
+      }
+      setIsRecording(false);
+    } else {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mediaRecorder = new MediaRecorder(stream);
+        mediaRecorderRef.current = mediaRecorder;
+        audioChunksRef.current = [];
+
+        mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            audioChunksRef.current.push(event.data);
+          }
+        };
+
+        mediaRecorder.onstart = () => {
+          startTimeRef.current = Date.now();
+        };
+
+        mediaRecorder.onstop = async () => {
+          const durationMs = Date.now() - startTimeRef.current;
+          const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
+          
+          try {
+            const base64Wav = await encodeWav(audioBlob);
+            onRecordingComplete({ base64Wav, durationMs });
+          } catch (error) {
+            console.error('Error encoding audio to WAV:', error);
+            toast.error(translate('Failed to encode audio.'));
+          }
+
+          // Stop all audio tracks
+          stream.getTracks().forEach(track => track.stop());
+        };
+
+        mediaRecorder.start();
+        setIsRecording(true);
+      } catch (error) {
+        console.error('Error accessing microphone:', error);
+        toast.error(translate('Could not access microphone.'));
+      }
+    }
+  };
+
+  return {
+    isRecording,
+    handleMicrophoneToggle,
+  };
+};
diff --git a/packages/ui/src/hooks/useScrollRestoration.ts b/packages/ui/src/hooks/useScrollRestoration.ts
index 392228c8..0825a72f 100644
--- a/packages/ui/src/hooks/useScrollRestoration.ts
+++ b/packages/ui/src/hooks/useScrollRestoration.ts
@@ -1,119 +1,119 @@
-import { useEffect, useRef } from 'react';
-
-/**
- * In-memory scroll position cache for SPA navigation.
- * Survives across component mounts within the same session.
- */
-const scrollCache = new Map<string, number>();
-
-// Disable browser's built-in scroll restoration — we manage it ourselves.
-if ('scrollRestoration' in history) {
-  history.scrollRestoration = 'manual';
-}
-
-/**
- * Track whether the last navigation was a popstate (back/forward)
- * vs. a pushState/replaceState (forward click).
- */
-let lastNavWasPopstate = false;
-window.addEventListener('popstate', () => { lastNavWasPopstate = true; });
-
-// Patch pushState/replaceState to clear the flag
-const origPush = history.pushState.bind(history);
-const origReplace = history.replaceState.bind(history);
-history.pushState = (...args) => { lastNavWasPopstate = false; return origPush(...args); };
-history.replaceState = (...args) => { lastNavWasPopstate = false; return origReplace(...args); };
-
-/** Retry scrollTo until the document is tall enough or we give up. */
-function scrollToWithRetry(target: number, maxAttempts = 20, interval = 100) {
-  let attempts = 0;
-  const tryScroll = () => {
-    window.scrollTo(0, target);
-    attempts++;
-    if (Math.abs(window.scrollY - target) > 50 && attempts < maxAttempts) {
-      setTimeout(tryScroll, interval);
-    }
-  };
-  requestAnimationFrame(tryScroll);
-}
-
-/**
- * Save/restore **window** scroll position keyed by a route-derived string.
- * - Forward navigation (link click) → always scroll to top
- * - Back/forward navigation (popstate) → restore cached position
- */
-export function useScrollRestoration(key: string) {
-  const prevKeyRef = useRef<string>(key);
-  const scrollYRef = useRef(0);
-
-  // ── Handle key change (navigation) ──────────────────────────────────
-  useEffect(() => {
-    if (prevKeyRef.current !== key) {
-      // Save outgoing page
-      scrollCache.set(prevKeyRef.current, scrollYRef.current);
-      prevKeyRef.current = key;
-
-      // Hash navigation → let browser handle anchor scroll
-      if (window.location.hash) {
-        return;
-      }
-
-      if (lastNavWasPopstate) {
-        const cached = scrollCache.get(key);
-        if (cached != null && cached > 0) {
-          scrollToWithRetry(cached);
-        } else {
-          window.scrollTo(0, 0);
-        }
-      } else {
-        // Forward nav → always top (retry to fight lazy content shifts)
-        scrollToWithRetry(0);
-      }
-    }
-  }, [key]);
-
-  // ── Track window scroll (debounced) ─────────────────────────────────
-  useEffect(() => {
-    let raf = 0;
-    const onScroll = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(() => {
-        scrollYRef.current = window.scrollY;
-      });
-    };
-    window.addEventListener('scroll', onScroll, { passive: true });
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener('scroll', onScroll);
-    };
-  }, [key]);
-
-  // ── Handle initial mount ─────────────────────────────────────────────
-  useEffect(() => {
-    // If URL has a hash, let the browser handle anchor scroll natively
-    if (window.location.hash) {
-      return;
-    }
-
-    if (lastNavWasPopstate) {
-      const cached = scrollCache.get(key);
-      if (cached != null && cached > 0) {
-        scrollToWithRetry(cached);
-      } else {
-        window.scrollTo(0, 0);
-      }
-    } else {
-      // Forward nav mount → scroll to top (retry to fight lazy content)
-      scrollToWithRetry(0);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // ── Save on unmount ─────────────────────────────────────────────────
-  useEffect(() => {
-    return () => {
-      scrollCache.set(key, scrollYRef.current);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key]);
-}
+import { useEffect, useRef } from 'react';
+
+/**
+ * In-memory scroll position cache for SPA navigation.
+ * Survives across component mounts within the same session.
+ */
+const scrollCache = new Map<string, number>();
+
+// Disable browser's built-in scroll restoration — we manage it ourselves.
+if ('scrollRestoration' in history) {
+  history.scrollRestoration = 'manual';
+}
+
+/**
+ * Track whether the last navigation was a popstate (back/forward)
+ * vs. a pushState/replaceState (forward click).
+ */
+let lastNavWasPopstate = false;
+window.addEventListener('popstate', () => { lastNavWasPopstate = true; });
+
+// Patch pushState/replaceState to clear the flag
+const origPush = history.pushState.bind(history);
+const origReplace = history.replaceState.bind(history);
+history.pushState = (...args) => { lastNavWasPopstate = false; return origPush(...args); };
+history.replaceState = (...args) => { lastNavWasPopstate = false; return origReplace(...args); };
+
+/** Retry scrollTo until the document is tall enough or we give up. */
+function scrollToWithRetry(target: number, maxAttempts = 20, interval = 100) {
+  let attempts = 0;
+  const tryScroll = () => {
+    window.scrollTo(0, target);
+    attempts++;
+    if (Math.abs(window.scrollY - target) > 50 && attempts < maxAttempts) {
+      setTimeout(tryScroll, interval);
+    }
+  };
+  requestAnimationFrame(tryScroll);
+}
+
+/**
+ * Save/restore **window** scroll position keyed by a route-derived string.
+ * - Forward navigation (link click) → always scroll to top
+ * - Back/forward navigation (popstate) → restore cached position
+ */
+export function useScrollRestoration(key: string) {
+  const prevKeyRef = useRef<string>(key);
+  const scrollYRef = useRef(0);
+
+  // ── Handle key change (navigation) ──────────────────────────────────
+  useEffect(() => {
+    if (prevKeyRef.current !== key) {
+      // Save outgoing page
+      scrollCache.set(prevKeyRef.current, scrollYRef.current);
+      prevKeyRef.current = key;
+
+      // Hash navigation → let browser handle anchor scroll
+      if (window.location.hash) {
+        return;
+      }
+
+      if (lastNavWasPopstate) {
+        const cached = scrollCache.get(key);
+        if (cached != null && cached > 0) {
+          scrollToWithRetry(cached);
+        } else {
+          window.scrollTo(0, 0);
+        }
+      } else {
+        // Forward nav → always top (retry to fight lazy content shifts)
+        scrollToWithRetry(0);
+      }
+    }
+  }, [key]);
+
+  // ── Track window scroll (debounced) ─────────────────────────────────
+  useEffect(() => {
+    let raf = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        scrollYRef.current = window.scrollY;
+      });
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, [key]);
+
+  // ── Handle initial mount ─────────────────────────────────────────────
+  useEffect(() => {
+    // If URL has a hash, let the browser handle anchor scroll natively
+    if (window.location.hash) {
+      return;
+    }
+
+    if (lastNavWasPopstate) {
+      const cached = scrollCache.get(key);
+      if (cached != null && cached > 0) {
+        scrollToWithRetry(cached);
+      } else {
+        window.scrollTo(0, 0);
+      }
+    } else {
+      // Forward nav mount → scroll to top (retry to fight lazy content)
+      scrollToWithRetry(0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── Save on unmount ─────────────────────────────────────────────────
+  useEffect(() => {
+    return () => {
+      scrollCache.set(key, scrollYRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+}
diff --git a/packages/ui/src/integrations/supabase/client.ts b/packages/ui/src/integrations/supabase/client.ts
index 1da5bd6e..63fd8e5b 100644
--- a/packages/ui/src/integrations/supabase/client.ts
+++ b/packages/ui/src/integrations/supabase/client.ts
@@ -1,17 +1,17 @@
-// This file is automatically generated. Do not edit it directly.
-import { createClient } from '@supabase/supabase-js';
-import type { Database } from './types';
-
-const SUPABASE_URL = "https://ytoadlpbdguriiccjnip.supabase.co";
-const SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl0b2FkbHBiZGd1cmlpY2NqbmlwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTg5NjU5OTAsImV4cCI6MjA3NDU0MTk5MH0.mXt594NQ2QsJQ_F-HqsSlBsLQ5EUB4iFxXtPE7zyaX8";
-
-// Import the supabase client like this:
-// import { supabase } from "@/integrations/supabase/client";
-
-export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, {
-  auth: {
-    storage: localStorage,
-    persistSession: true,
-    autoRefreshToken: true,
-  }
-});
\ No newline at end of file
+// This file is automatically generated. Do not edit it directly.
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from './types';
+
+const SUPABASE_URL = "https://ytoadlpbdguriiccjnip.supabase.co";
+const SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl0b2FkbHBiZGd1cmlpY2NqbmlwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTg5NjU5OTAsImV4cCI6MjA3NDU0MTk5MH0.mXt594NQ2QsJQ_F-HqsSlBsLQ5EUB4iFxXtPE7zyaX8";
+
+// Import the supabase client like this:
+// import { supabase } from "@/integrations/supabase/client";
+
+export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, {
+  auth: {
+    storage: localStorage,
+    persistSession: true,
+    autoRefreshToken: true,
+  }
+});
diff --git a/packages/ui/src/integrations/supabase/types.ts b/packages/ui/src/integrations/supabase/types.ts
index fb72e7ff..6b772858 100644
--- a/packages/ui/src/integrations/supabase/types.ts
+++ b/packages/ui/src/integrations/supabase/types.ts
@@ -1,2366 +1,2366 @@
-export type Json =
-  | string
-  | number
-  | boolean
-  | null
-  | { [key: string]: Json | undefined }
-  | Json[]
-
-export type Database = {
-  // Allows to automatically instantiate createClient with right options
-  // instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
-  __InternalSupabase: {
-    PostgrestVersion: "13.0.5"
-  }
-  graphql_public: {
-    Tables: {
-      [_ in never]: never
-    }
-    Views: {
-      [_ in never]: never
-    }
-    Functions: {
-      graphql: {
-        Args: {
-          extensions?: Json
-          operationName?: string
-          query?: string
-          variables?: Json
-        }
-        Returns: Json
-      }
-    }
-    Enums: {
-      [_ in never]: never
-    }
-    CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-  public: {
-    Tables: {
-      campaigns: {
-        Row: {
-          completed_at: string | null
-          created_at: string
-          group_ids: string[]
-          id: string
-          lang: string | null
-          meta: Json
-          name: string
-          owner_id: string
-          page_id: string | null
-          page_slug: string | null
-          scheduled_at: string | null
-          started_at: string | null
-          stats: Json
-          status: string
-          subject: string | null
-          tracking_id: string | null
-          updated_at: string
-          vars: Json
-        }
-        Insert: {
-          completed_at?: string | null
-          created_at?: string
-          group_ids?: string[]
-          id?: string
-          lang?: string | null
-          meta?: Json
-          name: string
-          owner_id: string
-          page_id?: string | null
-          page_slug?: string | null
-          scheduled_at?: string | null
-          started_at?: string | null
-          stats?: Json
-          status?: string
-          subject?: string | null
-          tracking_id?: string | null
-          updated_at?: string
-          vars?: Json
-        }
-        Update: {
-          completed_at?: string | null
-          created_at?: string
-          group_ids?: string[]
-          id?: string
-          lang?: string | null
-          meta?: Json
-          name?: string
-          owner_id?: string
-          page_id?: string | null
-          page_slug?: string | null
-          scheduled_at?: string | null
-          started_at?: string | null
-          stats?: Json
-          status?: string
-          subject?: string | null
-          tracking_id?: string | null
-          updated_at?: string
-          vars?: Json
-        }
-        Relationships: []
-      }
-      categories: {
-        Row: {
-          created_at: string
-          description: string | null
-          id: string
-          meta: Json | null
-          name: string
-          owner_id: string | null
-          slug: string
-          updated_at: string
-          visibility: Database["public"]["Enums"]["category_visibility"]
-        }
-        Insert: {
-          created_at?: string
-          description?: string | null
-          id?: string
-          meta?: Json | null
-          name: string
-          owner_id?: string | null
-          slug: string
-          updated_at?: string
-          visibility?: Database["public"]["Enums"]["category_visibility"]
-        }
-        Update: {
-          created_at?: string
-          description?: string | null
-          id?: string
-          meta?: Json | null
-          name?: string
-          owner_id?: string | null
-          slug?: string
-          updated_at?: string
-          visibility?: Database["public"]["Enums"]["category_visibility"]
-        }
-        Relationships: []
-      }
-      category_relations: {
-        Row: {
-          child_category_id: string
-          created_at: string
-          parent_category_id: string
-          relation_type: Database["public"]["Enums"]["category_relation_type"]
-        }
-        Insert: {
-          child_category_id: string
-          created_at?: string
-          parent_category_id: string
-          relation_type: Database["public"]["Enums"]["category_relation_type"]
-        }
-        Update: {
-          child_category_id?: string
-          created_at?: string
-          parent_category_id?: string
-          relation_type?: Database["public"]["Enums"]["category_relation_type"]
-        }
-        Relationships: [
-          {
-            foreignKeyName: "category_relations_child_category_id_fkey"
-            columns: ["child_category_id"]
-            isOneToOne: false
-            referencedRelation: "categories"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "category_relations_parent_category_id_fkey"
-            columns: ["parent_category_id"]
-            isOneToOne: false
-            referencedRelation: "categories"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      collection_pictures: {
-        Row: {
-          added_at: string
-          collection_id: string
-          id: string
-          picture_id: string
-        }
-        Insert: {
-          added_at?: string
-          collection_id: string
-          id?: string
-          picture_id: string
-        }
-        Update: {
-          added_at?: string
-          collection_id?: string
-          id?: string
-          picture_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "collection_pictures_collection_id_fkey"
-            columns: ["collection_id"]
-            isOneToOne: false
-            referencedRelation: "collections"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "collection_pictures_picture_id_fkey"
-            columns: ["picture_id"]
-            isOneToOne: false
-            referencedRelation: "pictures"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      collection_posts: {
-        Row: {
-          collection_id: string
-          created_at: string
-          id: string
-          post_id: string
-        }
-        Insert: {
-          collection_id: string
-          created_at?: string
-          id?: string
-          post_id: string
-        }
-        Update: {
-          collection_id?: string
-          created_at?: string
-          id?: string
-          post_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "collection_posts_collection_id_fkey"
-            columns: ["collection_id"]
-            isOneToOne: false
-            referencedRelation: "collections"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "collection_posts_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      collections: {
-        Row: {
-          content: Json | null
-          created_at: string
-          description: string | null
-          id: string
-          is_public: boolean
-          layout: Json | null
-          name: string
-          slug: string
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          content?: Json | null
-          created_at?: string
-          description?: string | null
-          id?: string
-          is_public?: boolean
-          layout?: Json | null
-          name: string
-          slug: string
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          content?: Json | null
-          created_at?: string
-          description?: string | null
-          id?: string
-          is_public?: boolean
-          layout?: Json | null
-          name?: string
-          slug?: string
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: []
-      }
-      comment_likes: {
-        Row: {
-          comment_id: string
-          created_at: string
-          id: string
-          user_id: string
-        }
-        Insert: {
-          comment_id: string
-          created_at?: string
-          id?: string
-          user_id: string
-        }
-        Update: {
-          comment_id?: string
-          created_at?: string
-          id?: string
-          user_id?: string
-        }
-        Relationships: []
-      }
-      comments: {
-        Row: {
-          content: string
-          created_at: string
-          id: string
-          likes_count: number | null
-          parent_comment_id: string | null
-          picture_id: string
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          content: string
-          created_at?: string
-          id?: string
-          likes_count?: number | null
-          parent_comment_id?: string | null
-          picture_id: string
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          content?: string
-          created_at?: string
-          id?: string
-          likes_count?: number | null
-          parent_comment_id?: string | null
-          picture_id?: string
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "comments_parent_fk"
-            columns: ["parent_comment_id"]
-            isOneToOne: false
-            referencedRelation: "comments"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      contact_group_members: {
-        Row: {
-          added_at: string
-          contact_id: string
-          group_id: string
-        }
-        Insert: {
-          added_at?: string
-          contact_id: string
-          group_id: string
-        }
-        Update: {
-          added_at?: string
-          contact_id?: string
-          group_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "contact_group_members_contact_id_fkey"
-            columns: ["contact_id"]
-            isOneToOne: false
-            referencedRelation: "contacts"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "contact_group_members_group_id_fkey"
-            columns: ["group_id"]
-            isOneToOne: false
-            referencedRelation: "contact_groups"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      contact_groups: {
-        Row: {
-          created_at: string
-          description: string | null
-          id: string
-          meta: Json
-          name: string
-          owner_id: string
-          updated_at: string
-        }
-        Insert: {
-          created_at?: string
-          description?: string | null
-          id?: string
-          meta?: Json
-          name: string
-          owner_id: string
-          updated_at?: string
-        }
-        Update: {
-          created_at?: string
-          description?: string | null
-          id?: string
-          meta?: Json
-          name?: string
-          owner_id?: string
-          updated_at?: string
-        }
-        Relationships: []
-      }
-      contacts: {
-        Row: {
-          address: Json
-          created_at: string
-          emails: Json
-          first_name: string | null
-          id: string
-          language: string | null
-          last_name: string | null
-          log: Json
-          meta: Json
-          name: string | null
-          notes: string | null
-          organization: string | null
-          owner_id: string
-          phone: string | null
-          source: string | null
-          status: string
-          tags: string[] | null
-          title: string | null
-          updated_at: string
-        }
-        Insert: {
-          address?: Json
-          created_at?: string
-          emails?: Json
-          first_name?: string | null
-          id?: string
-          language?: string | null
-          last_name?: string | null
-          log?: Json
-          meta?: Json
-          name?: string | null
-          notes?: string | null
-          organization?: string | null
-          owner_id: string
-          phone?: string | null
-          source?: string | null
-          status?: string
-          tags?: string[] | null
-          title?: string | null
-          updated_at?: string
-        }
-        Update: {
-          address?: Json
-          created_at?: string
-          emails?: Json
-          first_name?: string | null
-          id?: string
-          language?: string | null
-          last_name?: string | null
-          log?: Json
-          meta?: Json
-          name?: string | null
-          notes?: string | null
-          organization?: string | null
-          owner_id?: string
-          phone?: string | null
-          source?: string | null
-          status?: string
-          tags?: string[] | null
-          title?: string | null
-          updated_at?: string
-        }
-        Relationships: []
-      }
-      context_definitions: {
-        Row: {
-          created_at: string | null
-          default_filters: Json
-          default_templates: Json
-          description: string | null
-          display_name: string
-          icon: string | null
-          id: string
-          is_active: boolean | null
-          name: string
-          updated_at: string | null
-        }
-        Insert: {
-          created_at?: string | null
-          default_filters?: Json
-          default_templates?: Json
-          description?: string | null
-          display_name: string
-          icon?: string | null
-          id?: string
-          is_active?: boolean | null
-          name: string
-          updated_at?: string | null
-        }
-        Update: {
-          created_at?: string | null
-          default_filters?: Json
-          default_templates?: Json
-          description?: string | null
-          display_name?: string
-          icon?: string | null
-          id?: string
-          is_active?: boolean | null
-          name?: string
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
-      filter_usage_logs: {
-        Row: {
-          context: string
-          created_at: string | null
-          error_message: string | null
-          filters_applied: string[] | null
-          id: string
-          input_length: number
-          model: string
-          output_length: number
-          processing_time_ms: number
-          provider: string
-          success: boolean
-          template_id: string | null
-          user_id: string | null
-        }
-        Insert: {
-          context: string
-          created_at?: string | null
-          error_message?: string | null
-          filters_applied?: string[] | null
-          id?: string
-          input_length: number
-          model: string
-          output_length: number
-          processing_time_ms: number
-          provider: string
-          success: boolean
-          template_id?: string | null
-          user_id?: string | null
-        }
-        Update: {
-          context?: string
-          created_at?: string | null
-          error_message?: string | null
-          filters_applied?: string[] | null
-          id?: string
-          input_length?: number
-          model?: string
-          output_length?: number
-          processing_time_ms?: number
-          provider?: string
-          success?: boolean
-          template_id?: string | null
-          user_id?: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "filter_usage_logs_template_id_fkey"
-            columns: ["template_id"]
-            isOneToOne: false
-            referencedRelation: "user_templates"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      grid_area_places: {
-        Row: {
-          created_at: string
-          grid_area_id: string
-          id: string
-          place_id: string
-          rank: number | null
-        }
-        Insert: {
-          created_at?: string
-          grid_area_id: string
-          id?: string
-          place_id: string
-          rank?: number | null
-        }
-        Update: {
-          created_at?: string
-          grid_area_id?: string
-          id?: string
-          place_id?: string
-          rank?: number | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "grid_area_places_grid_area_id_fkey"
-            columns: ["grid_area_id"]
-            isOneToOne: false
-            referencedRelation: "grid_areas"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "grid_area_places_place_id_fkey"
-            columns: ["place_id"]
-            isOneToOne: false
-            referencedRelation: "places"
-            referencedColumns: ["place_id"]
-          },
-        ]
-      }
-      grid_areas: {
-        Row: {
-          area_sqkm: number | null
-          bbox: Json | null
-          center: Json | null
-          created_at: string
-          geometry: Json | null
-          gid: string
-          id: string
-          level: number
-          max_dist_km: number | null
-          meta: Json | null
-          name: string
-          region: string
-          stats: Json | null
-          updated_at: string
-          user_id: string | null
-        }
-        Insert: {
-          area_sqkm?: number | null
-          bbox?: Json | null
-          center?: Json | null
-          created_at?: string
-          geometry?: Json | null
-          gid: string
-          id?: string
-          level: number
-          max_dist_km?: number | null
-          meta?: Json | null
-          name: string
-          region: string
-          stats?: Json | null
-          updated_at?: string
-          user_id?: string | null
-        }
-        Update: {
-          area_sqkm?: number | null
-          bbox?: Json | null
-          center?: Json | null
-          created_at?: string
-          geometry?: Json | null
-          gid?: string
-          id?: string
-          level?: number
-          max_dist_km?: number | null
-          meta?: Json | null
-          name?: string
-          region?: string
-          stats?: Json | null
-          updated_at?: string
-          user_id?: string | null
-        }
-        Relationships: []
-      }
-      grid_search_runs: {
-        Row: {
-          created_at: string
-          id: string
-          request: Json
-          result: Json
-          run_id: string
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          created_at?: string
-          id: string
-          request: Json
-          result: Json
-          run_id: string
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          request?: Json
-          result?: Json
-          run_id?: string
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: []
-      }
-      i18n_glossaries: {
-        Row: {
-          creation_time: string | null
-          entry_count: number | null
-          glossary_id: string
-          hash: string | null
-          local_created_at: string | null
-          local_updated_at: string | null
-          name: string
-          ready: boolean | null
-          source_lang: string
-          target_lang: string
-        }
-        Insert: {
-          creation_time?: string | null
-          entry_count?: number | null
-          glossary_id: string
-          hash?: string | null
-          local_created_at?: string | null
-          local_updated_at?: string | null
-          name: string
-          ready?: boolean | null
-          source_lang: string
-          target_lang: string
-        }
-        Update: {
-          creation_time?: string | null
-          entry_count?: number | null
-          glossary_id?: string
-          hash?: string | null
-          local_created_at?: string | null
-          local_updated_at?: string | null
-          name?: string
-          ready?: boolean | null
-          source_lang?: string
-          target_lang?: string
-        }
-        Relationships: []
-      }
-      i18n_glossary_terms: {
-        Row: {
-          created_at: string | null
-          id: string
-          source_lang: string
-          target_lang: string
-          term: string
-          translation: string
-          updated_at: string | null
-        }
-        Insert: {
-          created_at?: string | null
-          id?: string
-          source_lang: string
-          target_lang: string
-          term: string
-          translation: string
-          updated_at?: string | null
-        }
-        Update: {
-          created_at?: string | null
-          id?: string
-          source_lang?: string
-          target_lang?: string
-          term?: string
-          translation?: string
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
-      i18n_translations: {
-        Row: {
-          created_at: string | null
-          dst_lang: string
-          dst_text: string
-          id: string
-          meta: Json | null
-          src_lang: string
-          src_text: string
-          updated_at: string | null
-        }
-        Insert: {
-          created_at?: string | null
-          dst_lang: string
-          dst_text: string
-          id?: string
-          meta?: Json | null
-          src_lang: string
-          src_text: string
-          updated_at?: string | null
-        }
-        Update: {
-          created_at?: string | null
-          dst_lang?: string
-          dst_text?: string
-          id?: string
-          meta?: Json | null
-          src_lang?: string
-          src_text?: string
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
-      layouts: {
-        Row: {
-          created_at: string
-          id: string
-          is_predefined: boolean | null
-          layout_json: Json
-          meta: Json | null
-          name: string
-          owner_id: string
-          type: string | null
-          updated_at: string
-          visibility: Database["public"]["Enums"]["layout_visibility"]
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          is_predefined?: boolean | null
-          layout_json: Json
-          meta?: Json | null
-          name: string
-          owner_id: string
-          type?: string | null
-          updated_at?: string
-          visibility?: Database["public"]["Enums"]["layout_visibility"]
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          is_predefined?: boolean | null
-          layout_json?: Json
-          meta?: Json | null
-          name?: string
-          owner_id?: string
-          type?: string | null
-          updated_at?: string
-          visibility?: Database["public"]["Enums"]["layout_visibility"]
-        }
-        Relationships: []
-      }
-      likes: {
-        Row: {
-          created_at: string
-          id: string
-          picture_id: string
-          user_id: string
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          picture_id: string
-          user_id: string
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          picture_id?: string
-          user_id?: string
-        }
-        Relationships: []
-      }
-      marketing_emails: {
-        Row: {
-          campaign: string | null
-          created_at: string
-          email: string
-          error_message: string | null
-          from_address: string | null
-          id: string
-          lang: string | null
-          last_retry_at: string | null
-          meta: Json | null
-          name: string | null
-          page_slug: string
-          retry_count: number
-          sender_id: string | null
-          sent_at: string | null
-          status: string
-          subject: string | null
-          tracking_id: string | null
-          unsubscribe_token: string
-          unsubscribed: boolean
-          unsubscribed_at: string | null
-          updated_at: string
-        }
-        Insert: {
-          campaign?: string | null
-          created_at?: string
-          email: string
-          error_message?: string | null
-          from_address?: string | null
-          id?: string
-          lang?: string | null
-          last_retry_at?: string | null
-          meta?: Json | null
-          name?: string | null
-          page_slug: string
-          retry_count?: number
-          sender_id?: string | null
-          sent_at?: string | null
-          status?: string
-          subject?: string | null
-          tracking_id?: string | null
-          unsubscribe_token?: string
-          unsubscribed?: boolean
-          unsubscribed_at?: string | null
-          updated_at?: string
-        }
-        Update: {
-          campaign?: string | null
-          created_at?: string
-          email?: string
-          error_message?: string | null
-          from_address?: string | null
-          id?: string
-          lang?: string | null
-          last_retry_at?: string | null
-          meta?: Json | null
-          name?: string | null
-          page_slug?: string
-          retry_count?: number
-          sender_id?: string | null
-          sent_at?: string | null
-          status?: string
-          subject?: string | null
-          tracking_id?: string | null
-          unsubscribe_token?: string
-          unsubscribed?: boolean
-          unsubscribed_at?: string | null
-          updated_at?: string
-        }
-        Relationships: []
-      }
-      organizations: {
-        Row: {
-          created_at: string
-          id: string
-          name: string
-          slug: string
-          updated_at: string
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          name: string
-          slug: string
-          updated_at?: string
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          name?: string
-          slug?: string
-          updated_at?: string
-        }
-        Relationships: []
-      }
-      page_collaborators: {
-        Row: {
-          created_at: string
-          id: string
-          page_id: string
-          role: Database["public"]["Enums"]["collaborator_role"]
-          user_id: string
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          page_id: string
-          role?: Database["public"]["Enums"]["collaborator_role"]
-          user_id: string
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          page_id?: string
-          role?: Database["public"]["Enums"]["collaborator_role"]
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "page_collaborators_page_id_fkey"
-            columns: ["page_id"]
-            isOneToOne: false
-            referencedRelation: "pages"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      pages: {
-        Row: {
-          content: Json | null
-          created_at: string
-          id: string
-          is_public: boolean
-          is_version_of: string | null
-          meta: Json | null
-          owner: string
-          parent: string | null
-          slug: string
-          tags: string[] | null
-          title: string
-          type: string | null
-          updated_at: string
-          visible: boolean
-        }
-        Insert: {
-          content?: Json | null
-          created_at?: string
-          id?: string
-          is_public?: boolean
-          is_version_of?: string | null
-          meta?: Json | null
-          owner: string
-          parent?: string | null
-          slug: string
-          tags?: string[] | null
-          title: string
-          type?: string | null
-          updated_at?: string
-          visible?: boolean
-        }
-        Update: {
-          content?: Json | null
-          created_at?: string
-          id?: string
-          is_public?: boolean
-          is_version_of?: string | null
-          meta?: Json | null
-          owner?: string
-          parent?: string | null
-          slug?: string
-          tags?: string[] | null
-          title?: string
-          type?: string | null
-          updated_at?: string
-          visible?: boolean
-        }
-        Relationships: [
-          {
-            foreignKeyName: "pages_is_version_of_fkey"
-            columns: ["is_version_of"]
-            isOneToOne: false
-            referencedRelation: "pages"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "pages_parent_fkey"
-            columns: ["parent"]
-            isOneToOne: false
-            referencedRelation: "pages"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      pictures: {
-        Row: {
-          created_at: string
-          description: string | null
-          flags: string[] | null
-          id: string
-          image_url: string
-          is_selected: boolean
-          likes_count: number | null
-          meta: Json | null
-          organization_id: string | null
-          parent_id: string | null
-          position: number | null
-          post_id: string | null
-          tags: string[] | null
-          thumbnail_url: string | null
-          title: string
-          type: string | null
-          updated_at: string
-          user_id: string
-          visible: boolean
-        }
-        Insert: {
-          created_at?: string
-          description?: string | null
-          flags?: string[] | null
-          id?: string
-          image_url: string
-          is_selected?: boolean
-          likes_count?: number | null
-          meta?: Json | null
-          organization_id?: string | null
-          parent_id?: string | null
-          position?: number | null
-          post_id?: string | null
-          tags?: string[] | null
-          thumbnail_url?: string | null
-          title: string
-          type?: string | null
-          updated_at?: string
-          user_id: string
-          visible?: boolean
-        }
-        Update: {
-          created_at?: string
-          description?: string | null
-          flags?: string[] | null
-          id?: string
-          image_url?: string
-          is_selected?: boolean
-          likes_count?: number | null
-          meta?: Json | null
-          organization_id?: string | null
-          parent_id?: string | null
-          position?: number | null
-          post_id?: string | null
-          tags?: string[] | null
-          thumbnail_url?: string | null
-          title?: string
-          type?: string | null
-          updated_at?: string
-          user_id?: string
-          visible?: boolean
-        }
-        Relationships: [
-          {
-            foreignKeyName: "pictures_organization_id_fkey"
-            columns: ["organization_id"]
-            isOneToOne: false
-            referencedRelation: "organizations"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "pictures_parent_id_fkey"
-            columns: ["parent_id"]
-            isOneToOne: false
-            referencedRelation: "pictures"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "pictures_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      place_searches: {
-        Row: {
-          created_at: string
-          id: string
-          input_hash: string
-          input_params: Json
-          result_place_ids: string[]
-          user_id: string | null
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          input_hash: string
-          input_params: Json
-          result_place_ids: string[]
-          user_id?: string | null
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          input_hash?: string
-          input_params?: Json
-          result_place_ids?: string[]
-          user_id?: string | null
-        }
-        Relationships: []
-      }
-      places: {
-        Row: {
-          address: string | null
-          city: string | null
-          contacts: Json | null
-          continent: string | null
-          country: string | null
-          created_at: string
-          description: string | null
-          gps_coordinates: Json | null
-          media: Json | null
-          meta: Json | null
-          operating_hours: Json | null
-          phone: string | null
-          place_id: string
-          raw_data: Json | null
-          thumbnail: string | null
-          title: string | null
-          types: string[] | null
-          updated_at: string
-          user_id: string | null
-          website: string | null
-        }
-        Insert: {
-          address?: string | null
-          city?: string | null
-          contacts?: Json | null
-          continent?: string | null
-          country?: string | null
-          created_at?: string
-          description?: string | null
-          gps_coordinates?: Json | null
-          media?: Json | null
-          meta?: Json | null
-          operating_hours?: Json | null
-          phone?: string | null
-          place_id: string
-          raw_data?: Json | null
-          thumbnail?: string | null
-          title?: string | null
-          types?: string[] | null
-          updated_at?: string
-          user_id?: string | null
-          website?: string | null
-        }
-        Update: {
-          address?: string | null
-          city?: string | null
-          contacts?: Json | null
-          continent?: string | null
-          country?: string | null
-          created_at?: string
-          description?: string | null
-          gps_coordinates?: Json | null
-          media?: Json | null
-          meta?: Json | null
-          operating_hours?: Json | null
-          phone?: string | null
-          place_id?: string
-          raw_data?: Json | null
-          thumbnail?: string | null
-          title?: string | null
-          types?: string[] | null
-          updated_at?: string
-          user_id?: string | null
-          website?: string | null
-        }
-        Relationships: []
-      }
-      posts: {
-        Row: {
-          created_at: string | null
-          description: string | null
-          id: string
-          meta: Json | null
-          settings: Json | null
-          title: string
-          updated_at: string | null
-          user_id: string
-        }
-        Insert: {
-          created_at?: string | null
-          description?: string | null
-          id?: string
-          meta?: Json | null
-          settings?: Json | null
-          title: string
-          updated_at?: string | null
-          user_id: string
-        }
-        Update: {
-          created_at?: string | null
-          description?: string | null
-          id?: string
-          meta?: Json | null
-          settings?: Json | null
-          title?: string
-          updated_at?: string | null
-          user_id?: string
-        }
-        Relationships: []
-      }
-      profiles: {
-        Row: {
-          aimlapi_api_key: string | null
-          avatar_url: string | null
-          bio: string | null
-          bria_api_key: string | null
-          created_at: string
-          display_name: string | null
-          google_api_key: string | null
-          huggingface_api_key: string | null
-          id: string
-          openai_api_key: string | null
-          pages: Json | null
-          replicate_api_key: string | null
-          settings: Json | null
-          updated_at: string
-          user_id: string
-          username: string | null
-        }
-        Insert: {
-          aimlapi_api_key?: string | null
-          avatar_url?: string | null
-          bio?: string | null
-          bria_api_key?: string | null
-          created_at?: string
-          display_name?: string | null
-          google_api_key?: string | null
-          huggingface_api_key?: string | null
-          id?: string
-          openai_api_key?: string | null
-          pages?: Json | null
-          replicate_api_key?: string | null
-          settings?: Json | null
-          updated_at?: string
-          user_id: string
-          username?: string | null
-        }
-        Update: {
-          aimlapi_api_key?: string | null
-          avatar_url?: string | null
-          bio?: string | null
-          bria_api_key?: string | null
-          created_at?: string
-          display_name?: string | null
-          google_api_key?: string | null
-          huggingface_api_key?: string | null
-          id?: string
-          openai_api_key?: string | null
-          pages?: Json | null
-          replicate_api_key?: string | null
-          settings?: Json | null
-          updated_at?: string
-          user_id?: string
-          username?: string | null
-        }
-        Relationships: []
-      }
-      provider_configs: {
-        Row: {
-          base_url: string
-          created_at: string | null
-          display_name: string
-          id: string
-          is_active: boolean | null
-          models: Json
-          name: string
-          rate_limits: Json | null
-          settings: Json | null
-          updated_at: string | null
-          user_id: string | null
-        }
-        Insert: {
-          base_url: string
-          created_at?: string | null
-          display_name: string
-          id?: string
-          is_active?: boolean | null
-          models?: Json
-          name: string
-          rate_limits?: Json | null
-          settings?: Json | null
-          updated_at?: string | null
-          user_id?: string | null
-        }
-        Update: {
-          base_url?: string
-          created_at?: string | null
-          display_name?: string
-          id?: string
-          is_active?: boolean | null
-          models?: Json
-          name?: string
-          rate_limits?: Json | null
-          settings?: Json | null
-          updated_at?: string | null
-          user_id?: string | null
-        }
-        Relationships: []
-      }
-      resource_acl: {
-        Row: {
-          created_at: string | null
-          group_name: string | null
-          id: string
-          log: Json | null
-          meta: Json | null
-          path: string | null
-          permissions: string[]
-          resource_id: string
-          resource_owner_id: string | null
-          resource_type: string
-          updated_at: string | null
-          user_id: string | null
-        }
-        Insert: {
-          created_at?: string | null
-          group_name?: string | null
-          id?: string
-          log?: Json | null
-          meta?: Json | null
-          path?: string | null
-          permissions?: string[]
-          resource_id: string
-          resource_owner_id?: string | null
-          resource_type: string
-          updated_at?: string | null
-          user_id?: string | null
-        }
-        Update: {
-          created_at?: string | null
-          group_name?: string | null
-          id?: string
-          log?: Json | null
-          meta?: Json | null
-          path?: string | null
-          permissions?: string[]
-          resource_id?: string
-          resource_owner_id?: string | null
-          resource_type?: string
-          updated_at?: string | null
-          user_id?: string | null
-        }
-        Relationships: []
-      }
-      role_permissions: {
-        Row: {
-          created_at: string
-          id: string
-          permission: Database["public"]["Enums"]["app_permission"]
-          role: Database["public"]["Enums"]["app_role"]
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          permission: Database["public"]["Enums"]["app_permission"]
-          role: Database["public"]["Enums"]["app_role"]
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          permission?: Database["public"]["Enums"]["app_permission"]
-          role?: Database["public"]["Enums"]["app_role"]
-        }
-        Relationships: []
-      }
-      searches: {
-        Row: {
-          created_at: string
-          id: string
-          input_hash: string
-          input_params: Json
-          result_place_ids: string[]
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          input_hash: string
-          input_params: Json
-          result_place_ids: string[]
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          input_hash?: string
-          input_params?: Json
-          result_place_ids?: string[]
-        }
-        Relationships: []
-      }
-      transactions: {
-        Row: {
-          buyer_email: string | null
-          buyer_ip: unknown
-          buyer_name: string | null
-          buyer_profile: Json
-          created_at: string
-          currency: string
-          external_checkout_id: string | null
-          external_order_id: string | null
-          id: string
-          metadata: Json
-          note: string | null
-          payment_provider: string | null
-          product_info: Json
-          shipping_info: Json
-          status: string
-          total_amount: number
-          updated_at: string
-          user_id: string
-          vendor_info: Json
-        }
-        Insert: {
-          buyer_email?: string | null
-          buyer_ip?: unknown
-          buyer_name?: string | null
-          buyer_profile?: Json
-          created_at?: string
-          currency?: string
-          external_checkout_id?: string | null
-          external_order_id?: string | null
-          id?: string
-          metadata?: Json
-          note?: string | null
-          payment_provider?: string | null
-          product_info?: Json
-          shipping_info?: Json
-          status?: string
-          total_amount?: number
-          updated_at?: string
-          user_id: string
-          vendor_info?: Json
-        }
-        Update: {
-          buyer_email?: string | null
-          buyer_ip?: unknown
-          buyer_name?: string | null
-          buyer_profile?: Json
-          created_at?: string
-          currency?: string
-          external_checkout_id?: string | null
-          external_order_id?: string | null
-          id?: string
-          metadata?: Json
-          note?: string | null
-          payment_provider?: string | null
-          product_info?: Json
-          shipping_info?: Json
-          status?: string
-          total_amount?: number
-          updated_at?: string
-          user_id?: string
-          vendor_info?: Json
-        }
-        Relationships: []
-      }
-      type_casts: {
-        Row: {
-          cast_kind: Database["public"]["Enums"]["cast_kind"]
-          description: string | null
-          from_type_id: string
-          to_type_id: string
-        }
-        Insert: {
-          cast_kind: Database["public"]["Enums"]["cast_kind"]
-          description?: string | null
-          from_type_id: string
-          to_type_id: string
-        }
-        Update: {
-          cast_kind?: Database["public"]["Enums"]["cast_kind"]
-          description?: string | null
-          from_type_id?: string
-          to_type_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "type_casts_from_type_id_fkey"
-            columns: ["from_type_id"]
-            isOneToOne: false
-            referencedRelation: "types"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "type_casts_to_type_id_fkey"
-            columns: ["to_type_id"]
-            isOneToOne: false
-            referencedRelation: "types"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      type_enum_values: {
-        Row: {
-          id: string
-          label: string
-          order: number
-          type_id: string
-          value: string
-        }
-        Insert: {
-          id?: string
-          label: string
-          order?: number
-          type_id: string
-          value: string
-        }
-        Update: {
-          id?: string
-          label?: string
-          order?: number
-          type_id?: string
-          value?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "type_enum_values_type_id_fkey"
-            columns: ["type_id"]
-            isOneToOne: false
-            referencedRelation: "types"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      type_flag_values: {
-        Row: {
-          bit: number
-          id: string
-          name: string
-          type_id: string
-        }
-        Insert: {
-          bit: number
-          id?: string
-          name: string
-          type_id: string
-        }
-        Update: {
-          bit?: number
-          id?: string
-          name?: string
-          type_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "type_flag_values_type_id_fkey"
-            columns: ["type_id"]
-            isOneToOne: false
-            referencedRelation: "types"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      type_structure_fields: {
-        Row: {
-          default_value: Json | null
-          field_name: string
-          field_type_id: string
-          id: string
-          order: number
-          required: boolean
-          structure_type_id: string
-        }
-        Insert: {
-          default_value?: Json | null
-          field_name: string
-          field_type_id: string
-          id?: string
-          order?: number
-          required?: boolean
-          structure_type_id: string
-        }
-        Update: {
-          default_value?: Json | null
-          field_name?: string
-          field_type_id?: string
-          id?: string
-          order?: number
-          required?: boolean
-          structure_type_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "type_structure_fields_field_type_id_fkey"
-            columns: ["field_type_id"]
-            isOneToOne: false
-            referencedRelation: "types"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "type_structure_fields_structure_type_id_fkey"
-            columns: ["structure_type_id"]
-            isOneToOne: false
-            referencedRelation: "types"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      types: {
-        Row: {
-          created_at: string
-          description: string | null
-          id: string
-          json_schema: Json | null
-          kind: Database["public"]["Enums"]["type_kind"]
-          meta: Json | null
-          name: string
-          owner_id: string | null
-          parent_type_id: string | null
-          settings: Json | null
-          updated_at: string
-          visibility: Database["public"]["Enums"]["type_visibility"]
-        }
-        Insert: {
-          created_at?: string
-          description?: string | null
-          id?: string
-          json_schema?: Json | null
-          kind: Database["public"]["Enums"]["type_kind"]
-          meta?: Json | null
-          name: string
-          owner_id?: string | null
-          parent_type_id?: string | null
-          settings?: Json | null
-          updated_at?: string
-          visibility?: Database["public"]["Enums"]["type_visibility"]
-        }
-        Update: {
-          created_at?: string
-          description?: string | null
-          id?: string
-          json_schema?: Json | null
-          kind?: Database["public"]["Enums"]["type_kind"]
-          meta?: Json | null
-          name?: string
-          owner_id?: string | null
-          parent_type_id?: string | null
-          settings?: Json | null
-          updated_at?: string
-          visibility?: Database["public"]["Enums"]["type_visibility"]
-        }
-        Relationships: [
-          {
-            foreignKeyName: "types_parent_type_id_fkey"
-            columns: ["parent_type_id"]
-            isOneToOne: false
-            referencedRelation: "types"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      user_filter_configs: {
-        Row: {
-          context: string
-          created_at: string | null
-          custom_filters: Json | null
-          default_templates: string[] | null
-          id: string
-          is_default: boolean | null
-          model: string
-          provider: string
-          updated_at: string | null
-          user_id: string | null
-          variables: Json | null
-        }
-        Insert: {
-          context: string
-          created_at?: string | null
-          custom_filters?: Json | null
-          default_templates?: string[] | null
-          id?: string
-          is_default?: boolean | null
-          model?: string
-          provider?: string
-          updated_at?: string | null
-          user_id?: string | null
-          variables?: Json | null
-        }
-        Update: {
-          context?: string
-          created_at?: string | null
-          custom_filters?: Json | null
-          default_templates?: string[] | null
-          id?: string
-          is_default?: boolean | null
-          model?: string
-          provider?: string
-          updated_at?: string | null
-          user_id?: string | null
-          variables?: Json | null
-        }
-        Relationships: []
-      }
-      user_organizations: {
-        Row: {
-          created_at: string
-          id: string
-          organization_id: string
-          role: string
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          organization_id: string
-          role?: string
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          organization_id?: string
-          role?: string
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "user_organizations_organization_id_fkey"
-            columns: ["organization_id"]
-            isOneToOne: false
-            referencedRelation: "organizations"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      user_roles: {
-        Row: {
-          created_at: string
-          id: string
-          organization_id: string | null
-          role: Database["public"]["Enums"]["app_role"]
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          created_at?: string
-          id?: string
-          organization_id?: string | null
-          role: Database["public"]["Enums"]["app_role"]
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          created_at?: string
-          id?: string
-          organization_id?: string | null
-          role?: Database["public"]["Enums"]["app_role"]
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "user_roles_user_id_fkey"
-            columns: ["user_id"]
-            isOneToOne: false
-            referencedRelation: "profiles"
-            referencedColumns: ["user_id"]
-          },
-        ]
-      }
-      user_secrets: {
-        Row: {
-          aimlapi_api_key: string | null
-          bria_api_key: string | null
-          created_at: string
-          google_api_key: string | null
-          huggingface_api_key: string | null
-          is_admin: boolean | null
-          openai_api_key: string | null
-          replicate_api_key: string | null
-          settings: Json | null
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          aimlapi_api_key?: string | null
-          bria_api_key?: string | null
-          created_at?: string
-          google_api_key?: string | null
-          huggingface_api_key?: string | null
-          is_admin?: boolean | null
-          openai_api_key?: string | null
-          replicate_api_key?: string | null
-          settings?: Json | null
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          aimlapi_api_key?: string | null
-          bria_api_key?: string | null
-          created_at?: string
-          google_api_key?: string | null
-          huggingface_api_key?: string | null
-          is_admin?: boolean | null
-          openai_api_key?: string | null
-          replicate_api_key?: string | null
-          settings?: Json | null
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: []
-      }
-      user_templates: {
-        Row: {
-          context: string
-          created_at: string | null
-          description: string | null
-          filters: string[] | null
-          format: string | null
-          id: string
-          is_public: boolean | null
-          model: string
-          name: string
-          prompt: string
-          provider: string
-          updated_at: string | null
-          usage_count: number | null
-          user_id: string | null
-        }
-        Insert: {
-          context: string
-          created_at?: string | null
-          description?: string | null
-          filters?: string[] | null
-          format?: string | null
-          id?: string
-          is_public?: boolean | null
-          model?: string
-          name: string
-          prompt: string
-          provider?: string
-          updated_at?: string | null
-          usage_count?: number | null
-          user_id?: string | null
-        }
-        Update: {
-          context?: string
-          created_at?: string | null
-          description?: string | null
-          filters?: string[] | null
-          format?: string | null
-          id?: string
-          is_public?: boolean | null
-          model?: string
-          name?: string
-          prompt?: string
-          provider?: string
-          updated_at?: string | null
-          usage_count?: number | null
-          user_id?: string | null
-        }
-        Relationships: []
-      }
-      vfs_document_chunks: {
-        Row: {
-          chunk_index: number
-          content: string
-          created_at: string | null
-          embedding: string | null
-          id: string
-          vfs_id: string
-        }
-        Insert: {
-          chunk_index: number
-          content: string
-          created_at?: string | null
-          embedding?: string | null
-          id?: string
-          vfs_id: string
-        }
-        Update: {
-          chunk_index?: number
-          content?: string
-          created_at?: string | null
-          embedding?: string | null
-          id?: string
-          vfs_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "vfs_document_chunks_vfs_id_fkey"
-            columns: ["vfs_id"]
-            isOneToOne: false
-            referencedRelation: "vfs_index"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      vfs_index: {
-        Row: {
-          content: string | null
-          fts: unknown
-          id: string
-          is_vectorized: boolean | null
-          mime: string | null
-          mount: string
-          mtime: string | null
-          name: string
-          path: string
-          size: number | null
-          type: string
-        }
-        Insert: {
-          content?: string | null
-          fts?: unknown
-          id?: string
-          is_vectorized?: boolean | null
-          mime?: string | null
-          mount: string
-          mtime?: string | null
-          name: string
-          path: string
-          size?: number | null
-          type: string
-        }
-        Update: {
-          content?: string | null
-          fts?: unknown
-          id?: string
-          is_vectorized?: boolean | null
-          mime?: string | null
-          mount?: string
-          mtime?: string | null
-          name?: string
-          path?: string
-          size?: number | null
-          type?: string
-        }
-        Relationships: []
-      }
-      widget_translations: {
-        Row: {
-          created_at: string | null
-          entity_id: string | null
-          entity_type: string | null
-          id: string
-          meta: Json | null
-          prop_path: string | null
-          source_lang: string
-          source_text: string | null
-          source_version: number | null
-          status: Database["public"]["Enums"]["translation_status"] | null
-          target_lang: string
-          translated_text: string | null
-          updated_at: string | null
-          widget_id: string | null
-        }
-        Insert: {
-          created_at?: string | null
-          entity_id?: string | null
-          entity_type?: string | null
-          id?: string
-          meta?: Json | null
-          prop_path?: string | null
-          source_lang: string
-          source_text?: string | null
-          source_version?: number | null
-          status?: Database["public"]["Enums"]["translation_status"] | null
-          target_lang: string
-          translated_text?: string | null
-          updated_at?: string | null
-          widget_id?: string | null
-        }
-        Update: {
-          created_at?: string | null
-          entity_id?: string | null
-          entity_type?: string | null
-          id?: string
-          meta?: Json | null
-          prop_path?: string | null
-          source_lang?: string
-          source_text?: string | null
-          source_version?: number | null
-          status?: Database["public"]["Enums"]["translation_status"] | null
-          target_lang?: string
-          translated_text?: string | null
-          updated_at?: string | null
-          widget_id?: string | null
-        }
-        Relationships: []
-      }
-      wizard_sessions: {
-        Row: {
-          created_at: string
-          generated_image_url: string | null
-          id: string
-          input_images: string[] | null
-          prompt: string
-          status: string
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          created_at?: string
-          generated_image_url?: string | null
-          id?: string
-          input_images?: string[] | null
-          prompt?: string
-          status?: string
-          updated_at?: string
-          user_id: string
-        }
-        Update: {
-          created_at?: string
-          generated_image_url?: string | null
-          id?: string
-          input_images?: string[] | null
-          prompt?: string
-          status?: string
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: []
-      }
-    }
-    Views: {
-      marketing_unsubscribed: {
-        Row: {
-          email: string | null
-        }
-        Relationships: []
-      }
-    }
-    Functions: {
-      authorize: {
-        Args: {
-          _role: Database["public"]["Enums"]["app_role"]
-          _user_id: string
-        }
-        Returns: boolean
-      }
-      has_permission: {
-        Args: {
-          _permission: Database["public"]["Enums"]["app_permission"]
-          _user_id: string
-        }
-        Returns: boolean
-      }
-      is_page_collaborator: { Args: { _page_id: string }; Returns: boolean }
-      is_page_owner: { Args: { _page_id: string }; Returns: boolean }
-      pages_search_text: {
-        Args: { rec: Database["public"]["Tables"]["pages"]["Row"] }
-        Returns: unknown
-      }
-      pictures_search_text: {
-        Args: { rec: Database["public"]["Tables"]["pictures"]["Row"] }
-        Returns: unknown
-      }
-      posts_search_text: {
-        Args: { rec: Database["public"]["Tables"]["posts"]["Row"] }
-        Returns: unknown
-      }
-      search_pages: {
-        Args: { result_limit?: number; search_query: string }
-        Returns: {
-          created_at: string
-          id: string
-          meta: Json
-          owner: string
-          rank: number
-          slug: string
-          tags: string[]
-          title: string
-          type: string
-          updated_at: string
-        }[]
-      }
-      search_pictures: {
-        Args: { result_limit?: number; search_query: string }
-        Returns: {
-          created_at: string
-          description: string
-          id: string
-          image_url: string
-          rank: number
-          tags: string[]
-          thumbnail_url: string
-          title: string
-          type: string
-          user_id: string
-        }[]
-      }
-      search_posts: {
-        Args: { result_limit?: number; search_query: string }
-        Returns: {
-          created_at: string
-          description: string
-          id: string
-          rank: number
-          title: string
-          type: string
-          user_id: string
-        }[]
-      }
-    }
-    Enums: {
-      app_permission:
-        | "pictures.read"
-        | "pictures.create"
-        | "pictures.update"
-        | "pictures.delete"
-        | "collections.read"
-        | "collections.create"
-        | "collections.update"
-        | "collections.delete"
-        | "comments.read"
-        | "comments.create"
-        | "comments.update"
-        | "comments.delete"
-        | "organization.manage"
-      app_role: "owner" | "admin" | "member" | "viewer"
-      cast_kind: "implicit" | "explicit" | "lossy"
-      category_relation_type:
-        | "generalization"
-        | "material_usage"
-        | "domain"
-        | "process_step"
-        | "standard"
-        | "other"
-      category_visibility: "public" | "unlisted" | "private"
-      collaborator_role: "viewer" | "editor" | "owner"
-      layout_visibility: "public" | "private" | "listed" | "custom"
-      translation_status: "draft" | "machine" | "reviewed" | "published"
-      type_kind:
-        | "primitive"
-        | "enum"
-        | "flags"
-        | "structure"
-        | "alias"
-        | "field"
-      type_visibility: "public" | "private" | "custom"
-    }
-    CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-}
-
-type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
-
-type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
-
-export type Tables<
-  DefaultSchemaTableNameOrOptions extends
-    | keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
-    | { schema: keyof DatabaseWithoutInternals },
-  TableName extends DefaultSchemaTableNameOrOptions extends {
-    schema: keyof DatabaseWithoutInternals
-  }
-    ? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
-        DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
-    : never = never,
-> = DefaultSchemaTableNameOrOptions extends {
-  schema: keyof DatabaseWithoutInternals
-}
-  ? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
-      DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
-      Row: infer R
-    }
-    ? R
-    : never
-  : DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
-        DefaultSchema["Views"])
-    ? (DefaultSchema["Tables"] &
-        DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
-        Row: infer R
-      }
-      ? R
-      : never
-    : never
-
-export type TablesInsert<
-  DefaultSchemaTableNameOrOptions extends
-    | keyof DefaultSchema["Tables"]
-    | { schema: keyof DatabaseWithoutInternals },
-  TableName extends DefaultSchemaTableNameOrOptions extends {
-    schema: keyof DatabaseWithoutInternals
-  }
-    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
-> = DefaultSchemaTableNameOrOptions extends {
-  schema: keyof DatabaseWithoutInternals
-}
-  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Insert: infer I
-    }
-    ? I
-    : never
-  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
-    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
-        Insert: infer I
-      }
-      ? I
-      : never
-    : never
-
-export type TablesUpdate<
-  DefaultSchemaTableNameOrOptions extends
-    | keyof DefaultSchema["Tables"]
-    | { schema: keyof DatabaseWithoutInternals },
-  TableName extends DefaultSchemaTableNameOrOptions extends {
-    schema: keyof DatabaseWithoutInternals
-  }
-    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
-> = DefaultSchemaTableNameOrOptions extends {
-  schema: keyof DatabaseWithoutInternals
-}
-  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Update: infer U
-    }
-    ? U
-    : never
-  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
-    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
-        Update: infer U
-      }
-      ? U
-      : never
-    : never
-
-export type Enums<
-  DefaultSchemaEnumNameOrOptions extends
-    | keyof DefaultSchema["Enums"]
-    | { schema: keyof DatabaseWithoutInternals },
-  EnumName extends DefaultSchemaEnumNameOrOptions extends {
-    schema: keyof DatabaseWithoutInternals
-  }
-    ? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
-    : never = never,
-> = DefaultSchemaEnumNameOrOptions extends {
-  schema: keyof DatabaseWithoutInternals
-}
-  ? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
-  : DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
-    ? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
-    : never
-
-export type CompositeTypes<
-  PublicCompositeTypeNameOrOptions extends
-    | keyof DefaultSchema["CompositeTypes"]
-    | { schema: keyof DatabaseWithoutInternals },
-  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
-    schema: keyof DatabaseWithoutInternals
-  }
-    ? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
-    : never = never,
-> = PublicCompositeTypeNameOrOptions extends {
-  schema: keyof DatabaseWithoutInternals
-}
-  ? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
-  : PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
-    ? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
-    : never
-
-export const Constants = {
-  graphql_public: {
-    Enums: {},
-  },
-  public: {
-    Enums: {
-      app_permission: [
-        "pictures.read",
-        "pictures.create",
-        "pictures.update",
-        "pictures.delete",
-        "collections.read",
-        "collections.create",
-        "collections.update",
-        "collections.delete",
-        "comments.read",
-        "comments.create",
-        "comments.update",
-        "comments.delete",
-        "organization.manage",
-      ],
-      app_role: ["owner", "admin", "member", "viewer"],
-      cast_kind: ["implicit", "explicit", "lossy"],
-      category_relation_type: [
-        "generalization",
-        "material_usage",
-        "domain",
-        "process_step",
-        "standard",
-        "other",
-      ],
-      category_visibility: ["public", "unlisted", "private"],
-      collaborator_role: ["viewer", "editor", "owner"],
-      layout_visibility: ["public", "private", "listed", "custom"],
-      translation_status: ["draft", "machine", "reviewed", "published"],
-      type_kind: ["primitive", "enum", "flags", "structure", "alias", "field"],
-      type_visibility: ["public", "private", "custom"],
-    },
-  },
-} as const
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export type Database = {
+  // Allows to automatically instantiate createClient with right options
+  // instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
+  __InternalSupabase: {
+    PostgrestVersion: "13.0.5"
+  }
+  graphql_public: {
+    Tables: {
+      [_ in never]: never
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      graphql: {
+        Args: {
+          extensions?: Json
+          operationName?: string
+          query?: string
+          variables?: Json
+        }
+        Returns: Json
+      }
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+  public: {
+    Tables: {
+      campaigns: {
+        Row: {
+          completed_at: string | null
+          created_at: string
+          group_ids: string[]
+          id: string
+          lang: string | null
+          meta: Json
+          name: string
+          owner_id: string
+          page_id: string | null
+          page_slug: string | null
+          scheduled_at: string | null
+          started_at: string | null
+          stats: Json
+          status: string
+          subject: string | null
+          tracking_id: string | null
+          updated_at: string
+          vars: Json
+        }
+        Insert: {
+          completed_at?: string | null
+          created_at?: string
+          group_ids?: string[]
+          id?: string
+          lang?: string | null
+          meta?: Json
+          name: string
+          owner_id: string
+          page_id?: string | null
+          page_slug?: string | null
+          scheduled_at?: string | null
+          started_at?: string | null
+          stats?: Json
+          status?: string
+          subject?: string | null
+          tracking_id?: string | null
+          updated_at?: string
+          vars?: Json
+        }
+        Update: {
+          completed_at?: string | null
+          created_at?: string
+          group_ids?: string[]
+          id?: string
+          lang?: string | null
+          meta?: Json
+          name?: string
+          owner_id?: string
+          page_id?: string | null
+          page_slug?: string | null
+          scheduled_at?: string | null
+          started_at?: string | null
+          stats?: Json
+          status?: string
+          subject?: string | null
+          tracking_id?: string | null
+          updated_at?: string
+          vars?: Json
+        }
+        Relationships: []
+      }
+      categories: {
+        Row: {
+          created_at: string
+          description: string | null
+          id: string
+          meta: Json | null
+          name: string
+          owner_id: string | null
+          slug: string
+          updated_at: string
+          visibility: Database["public"]["Enums"]["category_visibility"]
+        }
+        Insert: {
+          created_at?: string
+          description?: string | null
+          id?: string
+          meta?: Json | null
+          name: string
+          owner_id?: string | null
+          slug: string
+          updated_at?: string
+          visibility?: Database["public"]["Enums"]["category_visibility"]
+        }
+        Update: {
+          created_at?: string
+          description?: string | null
+          id?: string
+          meta?: Json | null
+          name?: string
+          owner_id?: string | null
+          slug?: string
+          updated_at?: string
+          visibility?: Database["public"]["Enums"]["category_visibility"]
+        }
+        Relationships: []
+      }
+      category_relations: {
+        Row: {
+          child_category_id: string
+          created_at: string
+          parent_category_id: string
+          relation_type: Database["public"]["Enums"]["category_relation_type"]
+        }
+        Insert: {
+          child_category_id: string
+          created_at?: string
+          parent_category_id: string
+          relation_type: Database["public"]["Enums"]["category_relation_type"]
+        }
+        Update: {
+          child_category_id?: string
+          created_at?: string
+          parent_category_id?: string
+          relation_type?: Database["public"]["Enums"]["category_relation_type"]
+        }
+        Relationships: [
+          {
+            foreignKeyName: "category_relations_child_category_id_fkey"
+            columns: ["child_category_id"]
+            isOneToOne: false
+            referencedRelation: "categories"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "category_relations_parent_category_id_fkey"
+            columns: ["parent_category_id"]
+            isOneToOne: false
+            referencedRelation: "categories"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      collection_pictures: {
+        Row: {
+          added_at: string
+          collection_id: string
+          id: string
+          picture_id: string
+        }
+        Insert: {
+          added_at?: string
+          collection_id: string
+          id?: string
+          picture_id: string
+        }
+        Update: {
+          added_at?: string
+          collection_id?: string
+          id?: string
+          picture_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "collection_pictures_collection_id_fkey"
+            columns: ["collection_id"]
+            isOneToOne: false
+            referencedRelation: "collections"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "collection_pictures_picture_id_fkey"
+            columns: ["picture_id"]
+            isOneToOne: false
+            referencedRelation: "pictures"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      collection_posts: {
+        Row: {
+          collection_id: string
+          created_at: string
+          id: string
+          post_id: string
+        }
+        Insert: {
+          collection_id: string
+          created_at?: string
+          id?: string
+          post_id: string
+        }
+        Update: {
+          collection_id?: string
+          created_at?: string
+          id?: string
+          post_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "collection_posts_collection_id_fkey"
+            columns: ["collection_id"]
+            isOneToOne: false
+            referencedRelation: "collections"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "collection_posts_post_id_fkey"
+            columns: ["post_id"]
+            isOneToOne: false
+            referencedRelation: "posts"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      collections: {
+        Row: {
+          content: Json | null
+          created_at: string
+          description: string | null
+          id: string
+          is_public: boolean
+          layout: Json | null
+          name: string
+          slug: string
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          content?: Json | null
+          created_at?: string
+          description?: string | null
+          id?: string
+          is_public?: boolean
+          layout?: Json | null
+          name: string
+          slug: string
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          content?: Json | null
+          created_at?: string
+          description?: string | null
+          id?: string
+          is_public?: boolean
+          layout?: Json | null
+          name?: string
+          slug?: string
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+      comment_likes: {
+        Row: {
+          comment_id: string
+          created_at: string
+          id: string
+          user_id: string
+        }
+        Insert: {
+          comment_id: string
+          created_at?: string
+          id?: string
+          user_id: string
+        }
+        Update: {
+          comment_id?: string
+          created_at?: string
+          id?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+      comments: {
+        Row: {
+          content: string
+          created_at: string
+          id: string
+          likes_count: number | null
+          parent_comment_id: string | null
+          picture_id: string
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          content: string
+          created_at?: string
+          id?: string
+          likes_count?: number | null
+          parent_comment_id?: string | null
+          picture_id: string
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          content?: string
+          created_at?: string
+          id?: string
+          likes_count?: number | null
+          parent_comment_id?: string | null
+          picture_id?: string
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "comments_parent_fk"
+            columns: ["parent_comment_id"]
+            isOneToOne: false
+            referencedRelation: "comments"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      contact_group_members: {
+        Row: {
+          added_at: string
+          contact_id: string
+          group_id: string
+        }
+        Insert: {
+          added_at?: string
+          contact_id: string
+          group_id: string
+        }
+        Update: {
+          added_at?: string
+          contact_id?: string
+          group_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "contact_group_members_contact_id_fkey"
+            columns: ["contact_id"]
+            isOneToOne: false
+            referencedRelation: "contacts"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "contact_group_members_group_id_fkey"
+            columns: ["group_id"]
+            isOneToOne: false
+            referencedRelation: "contact_groups"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      contact_groups: {
+        Row: {
+          created_at: string
+          description: string | null
+          id: string
+          meta: Json
+          name: string
+          owner_id: string
+          updated_at: string
+        }
+        Insert: {
+          created_at?: string
+          description?: string | null
+          id?: string
+          meta?: Json
+          name: string
+          owner_id: string
+          updated_at?: string
+        }
+        Update: {
+          created_at?: string
+          description?: string | null
+          id?: string
+          meta?: Json
+          name?: string
+          owner_id?: string
+          updated_at?: string
+        }
+        Relationships: []
+      }
+      contacts: {
+        Row: {
+          address: Json
+          created_at: string
+          emails: Json
+          first_name: string | null
+          id: string
+          language: string | null
+          last_name: string | null
+          log: Json
+          meta: Json
+          name: string | null
+          notes: string | null
+          organization: string | null
+          owner_id: string
+          phone: string | null
+          source: string | null
+          status: string
+          tags: string[] | null
+          title: string | null
+          updated_at: string
+        }
+        Insert: {
+          address?: Json
+          created_at?: string
+          emails?: Json
+          first_name?: string | null
+          id?: string
+          language?: string | null
+          last_name?: string | null
+          log?: Json
+          meta?: Json
+          name?: string | null
+          notes?: string | null
+          organization?: string | null
+          owner_id: string
+          phone?: string | null
+          source?: string | null
+          status?: string
+          tags?: string[] | null
+          title?: string | null
+          updated_at?: string
+        }
+        Update: {
+          address?: Json
+          created_at?: string
+          emails?: Json
+          first_name?: string | null
+          id?: string
+          language?: string | null
+          last_name?: string | null
+          log?: Json
+          meta?: Json
+          name?: string | null
+          notes?: string | null
+          organization?: string | null
+          owner_id?: string
+          phone?: string | null
+          source?: string | null
+          status?: string
+          tags?: string[] | null
+          title?: string | null
+          updated_at?: string
+        }
+        Relationships: []
+      }
+      context_definitions: {
+        Row: {
+          created_at: string | null
+          default_filters: Json
+          default_templates: Json
+          description: string | null
+          display_name: string
+          icon: string | null
+          id: string
+          is_active: boolean | null
+          name: string
+          updated_at: string | null
+        }
+        Insert: {
+          created_at?: string | null
+          default_filters?: Json
+          default_templates?: Json
+          description?: string | null
+          display_name: string
+          icon?: string | null
+          id?: string
+          is_active?: boolean | null
+          name: string
+          updated_at?: string | null
+        }
+        Update: {
+          created_at?: string | null
+          default_filters?: Json
+          default_templates?: Json
+          description?: string | null
+          display_name?: string
+          icon?: string | null
+          id?: string
+          is_active?: boolean | null
+          name?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
+      filter_usage_logs: {
+        Row: {
+          context: string
+          created_at: string | null
+          error_message: string | null
+          filters_applied: string[] | null
+          id: string
+          input_length: number
+          model: string
+          output_length: number
+          processing_time_ms: number
+          provider: string
+          success: boolean
+          template_id: string | null
+          user_id: string | null
+        }
+        Insert: {
+          context: string
+          created_at?: string | null
+          error_message?: string | null
+          filters_applied?: string[] | null
+          id?: string
+          input_length: number
+          model: string
+          output_length: number
+          processing_time_ms: number
+          provider: string
+          success: boolean
+          template_id?: string | null
+          user_id?: string | null
+        }
+        Update: {
+          context?: string
+          created_at?: string | null
+          error_message?: string | null
+          filters_applied?: string[] | null
+          id?: string
+          input_length?: number
+          model?: string
+          output_length?: number
+          processing_time_ms?: number
+          provider?: string
+          success?: boolean
+          template_id?: string | null
+          user_id?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "filter_usage_logs_template_id_fkey"
+            columns: ["template_id"]
+            isOneToOne: false
+            referencedRelation: "user_templates"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      grid_area_places: {
+        Row: {
+          created_at: string
+          grid_area_id: string
+          id: string
+          place_id: string
+          rank: number | null
+        }
+        Insert: {
+          created_at?: string
+          grid_area_id: string
+          id?: string
+          place_id: string
+          rank?: number | null
+        }
+        Update: {
+          created_at?: string
+          grid_area_id?: string
+          id?: string
+          place_id?: string
+          rank?: number | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "grid_area_places_grid_area_id_fkey"
+            columns: ["grid_area_id"]
+            isOneToOne: false
+            referencedRelation: "grid_areas"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "grid_area_places_place_id_fkey"
+            columns: ["place_id"]
+            isOneToOne: false
+            referencedRelation: "places"
+            referencedColumns: ["place_id"]
+          },
+        ]
+      }
+      grid_areas: {
+        Row: {
+          area_sqkm: number | null
+          bbox: Json | null
+          center: Json | null
+          created_at: string
+          geometry: Json | null
+          gid: string
+          id: string
+          level: number
+          max_dist_km: number | null
+          meta: Json | null
+          name: string
+          region: string
+          stats: Json | null
+          updated_at: string
+          user_id: string | null
+        }
+        Insert: {
+          area_sqkm?: number | null
+          bbox?: Json | null
+          center?: Json | null
+          created_at?: string
+          geometry?: Json | null
+          gid: string
+          id?: string
+          level: number
+          max_dist_km?: number | null
+          meta?: Json | null
+          name: string
+          region: string
+          stats?: Json | null
+          updated_at?: string
+          user_id?: string | null
+        }
+        Update: {
+          area_sqkm?: number | null
+          bbox?: Json | null
+          center?: Json | null
+          created_at?: string
+          geometry?: Json | null
+          gid?: string
+          id?: string
+          level?: number
+          max_dist_km?: number | null
+          meta?: Json | null
+          name?: string
+          region?: string
+          stats?: Json | null
+          updated_at?: string
+          user_id?: string | null
+        }
+        Relationships: []
+      }
+      grid_search_runs: {
+        Row: {
+          created_at: string
+          id: string
+          request: Json
+          result: Json
+          run_id: string
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          id: string
+          request: Json
+          result: Json
+          run_id: string
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          request?: Json
+          result?: Json
+          run_id?: string
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+      i18n_glossaries: {
+        Row: {
+          creation_time: string | null
+          entry_count: number | null
+          glossary_id: string
+          hash: string | null
+          local_created_at: string | null
+          local_updated_at: string | null
+          name: string
+          ready: boolean | null
+          source_lang: string
+          target_lang: string
+        }
+        Insert: {
+          creation_time?: string | null
+          entry_count?: number | null
+          glossary_id: string
+          hash?: string | null
+          local_created_at?: string | null
+          local_updated_at?: string | null
+          name: string
+          ready?: boolean | null
+          source_lang: string
+          target_lang: string
+        }
+        Update: {
+          creation_time?: string | null
+          entry_count?: number | null
+          glossary_id?: string
+          hash?: string | null
+          local_created_at?: string | null
+          local_updated_at?: string | null
+          name?: string
+          ready?: boolean | null
+          source_lang?: string
+          target_lang?: string
+        }
+        Relationships: []
+      }
+      i18n_glossary_terms: {
+        Row: {
+          created_at: string | null
+          id: string
+          source_lang: string
+          target_lang: string
+          term: string
+          translation: string
+          updated_at: string | null
+        }
+        Insert: {
+          created_at?: string | null
+          id?: string
+          source_lang: string
+          target_lang: string
+          term: string
+          translation: string
+          updated_at?: string | null
+        }
+        Update: {
+          created_at?: string | null
+          id?: string
+          source_lang?: string
+          target_lang?: string
+          term?: string
+          translation?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
+      i18n_translations: {
+        Row: {
+          created_at: string | null
+          dst_lang: string
+          dst_text: string
+          id: string
+          meta: Json | null
+          src_lang: string
+          src_text: string
+          updated_at: string | null
+        }
+        Insert: {
+          created_at?: string | null
+          dst_lang: string
+          dst_text: string
+          id?: string
+          meta?: Json | null
+          src_lang: string
+          src_text: string
+          updated_at?: string | null
+        }
+        Update: {
+          created_at?: string | null
+          dst_lang?: string
+          dst_text?: string
+          id?: string
+          meta?: Json | null
+          src_lang?: string
+          src_text?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
+      layouts: {
+        Row: {
+          created_at: string
+          id: string
+          is_predefined: boolean | null
+          layout_json: Json
+          meta: Json | null
+          name: string
+          owner_id: string
+          type: string | null
+          updated_at: string
+          visibility: Database["public"]["Enums"]["layout_visibility"]
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          is_predefined?: boolean | null
+          layout_json: Json
+          meta?: Json | null
+          name: string
+          owner_id: string
+          type?: string | null
+          updated_at?: string
+          visibility?: Database["public"]["Enums"]["layout_visibility"]
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          is_predefined?: boolean | null
+          layout_json?: Json
+          meta?: Json | null
+          name?: string
+          owner_id?: string
+          type?: string | null
+          updated_at?: string
+          visibility?: Database["public"]["Enums"]["layout_visibility"]
+        }
+        Relationships: []
+      }
+      likes: {
+        Row: {
+          created_at: string
+          id: string
+          picture_id: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          picture_id: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          picture_id?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+      marketing_emails: {
+        Row: {
+          campaign: string | null
+          created_at: string
+          email: string
+          error_message: string | null
+          from_address: string | null
+          id: string
+          lang: string | null
+          last_retry_at: string | null
+          meta: Json | null
+          name: string | null
+          page_slug: string
+          retry_count: number
+          sender_id: string | null
+          sent_at: string | null
+          status: string
+          subject: string | null
+          tracking_id: string | null
+          unsubscribe_token: string
+          unsubscribed: boolean
+          unsubscribed_at: string | null
+          updated_at: string
+        }
+        Insert: {
+          campaign?: string | null
+          created_at?: string
+          email: string
+          error_message?: string | null
+          from_address?: string | null
+          id?: string
+          lang?: string | null
+          last_retry_at?: string | null
+          meta?: Json | null
+          name?: string | null
+          page_slug: string
+          retry_count?: number
+          sender_id?: string | null
+          sent_at?: string | null
+          status?: string
+          subject?: string | null
+          tracking_id?: string | null
+          unsubscribe_token?: string
+          unsubscribed?: boolean
+          unsubscribed_at?: string | null
+          updated_at?: string
+        }
+        Update: {
+          campaign?: string | null
+          created_at?: string
+          email?: string
+          error_message?: string | null
+          from_address?: string | null
+          id?: string
+          lang?: string | null
+          last_retry_at?: string | null
+          meta?: Json | null
+          name?: string | null
+          page_slug?: string
+          retry_count?: number
+          sender_id?: string | null
+          sent_at?: string | null
+          status?: string
+          subject?: string | null
+          tracking_id?: string | null
+          unsubscribe_token?: string
+          unsubscribed?: boolean
+          unsubscribed_at?: string | null
+          updated_at?: string
+        }
+        Relationships: []
+      }
+      organizations: {
+        Row: {
+          created_at: string
+          id: string
+          name: string
+          slug: string
+          updated_at: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          name: string
+          slug: string
+          updated_at?: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          name?: string
+          slug?: string
+          updated_at?: string
+        }
+        Relationships: []
+      }
+      page_collaborators: {
+        Row: {
+          created_at: string
+          id: string
+          page_id: string
+          role: Database["public"]["Enums"]["collaborator_role"]
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          page_id: string
+          role?: Database["public"]["Enums"]["collaborator_role"]
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          page_id?: string
+          role?: Database["public"]["Enums"]["collaborator_role"]
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "page_collaborators_page_id_fkey"
+            columns: ["page_id"]
+            isOneToOne: false
+            referencedRelation: "pages"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      pages: {
+        Row: {
+          content: Json | null
+          created_at: string
+          id: string
+          is_public: boolean
+          is_version_of: string | null
+          meta: Json | null
+          owner: string
+          parent: string | null
+          slug: string
+          tags: string[] | null
+          title: string
+          type: string | null
+          updated_at: string
+          visible: boolean
+        }
+        Insert: {
+          content?: Json | null
+          created_at?: string
+          id?: string
+          is_public?: boolean
+          is_version_of?: string | null
+          meta?: Json | null
+          owner: string
+          parent?: string | null
+          slug: string
+          tags?: string[] | null
+          title: string
+          type?: string | null
+          updated_at?: string
+          visible?: boolean
+        }
+        Update: {
+          content?: Json | null
+          created_at?: string
+          id?: string
+          is_public?: boolean
+          is_version_of?: string | null
+          meta?: Json | null
+          owner?: string
+          parent?: string | null
+          slug?: string
+          tags?: string[] | null
+          title?: string
+          type?: string | null
+          updated_at?: string
+          visible?: boolean
+        }
+        Relationships: [
+          {
+            foreignKeyName: "pages_is_version_of_fkey"
+            columns: ["is_version_of"]
+            isOneToOne: false
+            referencedRelation: "pages"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "pages_parent_fkey"
+            columns: ["parent"]
+            isOneToOne: false
+            referencedRelation: "pages"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      pictures: {
+        Row: {
+          created_at: string
+          description: string | null
+          flags: string[] | null
+          id: string
+          image_url: string
+          is_selected: boolean
+          likes_count: number | null
+          meta: Json | null
+          organization_id: string | null
+          parent_id: string | null
+          position: number | null
+          post_id: string | null
+          tags: string[] | null
+          thumbnail_url: string | null
+          title: string
+          type: string | null
+          updated_at: string
+          user_id: string
+          visible: boolean
+        }
+        Insert: {
+          created_at?: string
+          description?: string | null
+          flags?: string[] | null
+          id?: string
+          image_url: string
+          is_selected?: boolean
+          likes_count?: number | null
+          meta?: Json | null
+          organization_id?: string | null
+          parent_id?: string | null
+          position?: number | null
+          post_id?: string | null
+          tags?: string[] | null
+          thumbnail_url?: string | null
+          title: string
+          type?: string | null
+          updated_at?: string
+          user_id: string
+          visible?: boolean
+        }
+        Update: {
+          created_at?: string
+          description?: string | null
+          flags?: string[] | null
+          id?: string
+          image_url?: string
+          is_selected?: boolean
+          likes_count?: number | null
+          meta?: Json | null
+          organization_id?: string | null
+          parent_id?: string | null
+          position?: number | null
+          post_id?: string | null
+          tags?: string[] | null
+          thumbnail_url?: string | null
+          title?: string
+          type?: string | null
+          updated_at?: string
+          user_id?: string
+          visible?: boolean
+        }
+        Relationships: [
+          {
+            foreignKeyName: "pictures_organization_id_fkey"
+            columns: ["organization_id"]
+            isOneToOne: false
+            referencedRelation: "organizations"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "pictures_parent_id_fkey"
+            columns: ["parent_id"]
+            isOneToOne: false
+            referencedRelation: "pictures"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "pictures_post_id_fkey"
+            columns: ["post_id"]
+            isOneToOne: false
+            referencedRelation: "posts"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      place_searches: {
+        Row: {
+          created_at: string
+          id: string
+          input_hash: string
+          input_params: Json
+          result_place_ids: string[]
+          user_id: string | null
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          input_hash: string
+          input_params: Json
+          result_place_ids: string[]
+          user_id?: string | null
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          input_hash?: string
+          input_params?: Json
+          result_place_ids?: string[]
+          user_id?: string | null
+        }
+        Relationships: []
+      }
+      places: {
+        Row: {
+          address: string | null
+          city: string | null
+          contacts: Json | null
+          continent: string | null
+          country: string | null
+          created_at: string
+          description: string | null
+          gps_coordinates: Json | null
+          media: Json | null
+          meta: Json | null
+          operating_hours: Json | null
+          phone: string | null
+          place_id: string
+          raw_data: Json | null
+          thumbnail: string | null
+          title: string | null
+          types: string[] | null
+          updated_at: string
+          user_id: string | null
+          website: string | null
+        }
+        Insert: {
+          address?: string | null
+          city?: string | null
+          contacts?: Json | null
+          continent?: string | null
+          country?: string | null
+          created_at?: string
+          description?: string | null
+          gps_coordinates?: Json | null
+          media?: Json | null
+          meta?: Json | null
+          operating_hours?: Json | null
+          phone?: string | null
+          place_id: string
+          raw_data?: Json | null
+          thumbnail?: string | null
+          title?: string | null
+          types?: string[] | null
+          updated_at?: string
+          user_id?: string | null
+          website?: string | null
+        }
+        Update: {
+          address?: string | null
+          city?: string | null
+          contacts?: Json | null
+          continent?: string | null
+          country?: string | null
+          created_at?: string
+          description?: string | null
+          gps_coordinates?: Json | null
+          media?: Json | null
+          meta?: Json | null
+          operating_hours?: Json | null
+          phone?: string | null
+          place_id?: string
+          raw_data?: Json | null
+          thumbnail?: string | null
+          title?: string | null
+          types?: string[] | null
+          updated_at?: string
+          user_id?: string | null
+          website?: string | null
+        }
+        Relationships: []
+      }
+      posts: {
+        Row: {
+          created_at: string | null
+          description: string | null
+          id: string
+          meta: Json | null
+          settings: Json | null
+          title: string
+          updated_at: string | null
+          user_id: string
+        }
+        Insert: {
+          created_at?: string | null
+          description?: string | null
+          id?: string
+          meta?: Json | null
+          settings?: Json | null
+          title: string
+          updated_at?: string | null
+          user_id: string
+        }
+        Update: {
+          created_at?: string | null
+          description?: string | null
+          id?: string
+          meta?: Json | null
+          settings?: Json | null
+          title?: string
+          updated_at?: string | null
+          user_id?: string
+        }
+        Relationships: []
+      }
+      profiles: {
+        Row: {
+          aimlapi_api_key: string | null
+          avatar_url: string | null
+          bio: string | null
+          bria_api_key: string | null
+          created_at: string
+          display_name: string | null
+          google_api_key: string | null
+          huggingface_api_key: string | null
+          id: string
+          openai_api_key: string | null
+          pages: Json | null
+          replicate_api_key: string | null
+          settings: Json | null
+          updated_at: string
+          user_id: string
+          username: string | null
+        }
+        Insert: {
+          aimlapi_api_key?: string | null
+          avatar_url?: string | null
+          bio?: string | null
+          bria_api_key?: string | null
+          created_at?: string
+          display_name?: string | null
+          google_api_key?: string | null
+          huggingface_api_key?: string | null
+          id?: string
+          openai_api_key?: string | null
+          pages?: Json | null
+          replicate_api_key?: string | null
+          settings?: Json | null
+          updated_at?: string
+          user_id: string
+          username?: string | null
+        }
+        Update: {
+          aimlapi_api_key?: string | null
+          avatar_url?: string | null
+          bio?: string | null
+          bria_api_key?: string | null
+          created_at?: string
+          display_name?: string | null
+          google_api_key?: string | null
+          huggingface_api_key?: string | null
+          id?: string
+          openai_api_key?: string | null
+          pages?: Json | null
+          replicate_api_key?: string | null
+          settings?: Json | null
+          updated_at?: string
+          user_id?: string
+          username?: string | null
+        }
+        Relationships: []
+      }
+      provider_configs: {
+        Row: {
+          base_url: string
+          created_at: string | null
+          display_name: string
+          id: string
+          is_active: boolean | null
+          models: Json
+          name: string
+          rate_limits: Json | null
+          settings: Json | null
+          updated_at: string | null
+          user_id: string | null
+        }
+        Insert: {
+          base_url: string
+          created_at?: string | null
+          display_name: string
+          id?: string
+          is_active?: boolean | null
+          models?: Json
+          name: string
+          rate_limits?: Json | null
+          settings?: Json | null
+          updated_at?: string | null
+          user_id?: string | null
+        }
+        Update: {
+          base_url?: string
+          created_at?: string | null
+          display_name?: string
+          id?: string
+          is_active?: boolean | null
+          models?: Json
+          name?: string
+          rate_limits?: Json | null
+          settings?: Json | null
+          updated_at?: string | null
+          user_id?: string | null
+        }
+        Relationships: []
+      }
+      resource_acl: {
+        Row: {
+          created_at: string | null
+          group_name: string | null
+          id: string
+          log: Json | null
+          meta: Json | null
+          path: string | null
+          permissions: string[]
+          resource_id: string
+          resource_owner_id: string | null
+          resource_type: string
+          updated_at: string | null
+          user_id: string | null
+        }
+        Insert: {
+          created_at?: string | null
+          group_name?: string | null
+          id?: string
+          log?: Json | null
+          meta?: Json | null
+          path?: string | null
+          permissions?: string[]
+          resource_id: string
+          resource_owner_id?: string | null
+          resource_type: string
+          updated_at?: string | null
+          user_id?: string | null
+        }
+        Update: {
+          created_at?: string | null
+          group_name?: string | null
+          id?: string
+          log?: Json | null
+          meta?: Json | null
+          path?: string | null
+          permissions?: string[]
+          resource_id?: string
+          resource_owner_id?: string | null
+          resource_type?: string
+          updated_at?: string | null
+          user_id?: string | null
+        }
+        Relationships: []
+      }
+      role_permissions: {
+        Row: {
+          created_at: string
+          id: string
+          permission: Database["public"]["Enums"]["app_permission"]
+          role: Database["public"]["Enums"]["app_role"]
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          permission: Database["public"]["Enums"]["app_permission"]
+          role: Database["public"]["Enums"]["app_role"]
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          permission?: Database["public"]["Enums"]["app_permission"]
+          role?: Database["public"]["Enums"]["app_role"]
+        }
+        Relationships: []
+      }
+      searches: {
+        Row: {
+          created_at: string
+          id: string
+          input_hash: string
+          input_params: Json
+          result_place_ids: string[]
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          input_hash: string
+          input_params: Json
+          result_place_ids: string[]
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          input_hash?: string
+          input_params?: Json
+          result_place_ids?: string[]
+        }
+        Relationships: []
+      }
+      transactions: {
+        Row: {
+          buyer_email: string | null
+          buyer_ip: unknown
+          buyer_name: string | null
+          buyer_profile: Json
+          created_at: string
+          currency: string
+          external_checkout_id: string | null
+          external_order_id: string | null
+          id: string
+          metadata: Json
+          note: string | null
+          payment_provider: string | null
+          product_info: Json
+          shipping_info: Json
+          status: string
+          total_amount: number
+          updated_at: string
+          user_id: string
+          vendor_info: Json
+        }
+        Insert: {
+          buyer_email?: string | null
+          buyer_ip?: unknown
+          buyer_name?: string | null
+          buyer_profile?: Json
+          created_at?: string
+          currency?: string
+          external_checkout_id?: string | null
+          external_order_id?: string | null
+          id?: string
+          metadata?: Json
+          note?: string | null
+          payment_provider?: string | null
+          product_info?: Json
+          shipping_info?: Json
+          status?: string
+          total_amount?: number
+          updated_at?: string
+          user_id: string
+          vendor_info?: Json
+        }
+        Update: {
+          buyer_email?: string | null
+          buyer_ip?: unknown
+          buyer_name?: string | null
+          buyer_profile?: Json
+          created_at?: string
+          currency?: string
+          external_checkout_id?: string | null
+          external_order_id?: string | null
+          id?: string
+          metadata?: Json
+          note?: string | null
+          payment_provider?: string | null
+          product_info?: Json
+          shipping_info?: Json
+          status?: string
+          total_amount?: number
+          updated_at?: string
+          user_id?: string
+          vendor_info?: Json
+        }
+        Relationships: []
+      }
+      type_casts: {
+        Row: {
+          cast_kind: Database["public"]["Enums"]["cast_kind"]
+          description: string | null
+          from_type_id: string
+          to_type_id: string
+        }
+        Insert: {
+          cast_kind: Database["public"]["Enums"]["cast_kind"]
+          description?: string | null
+          from_type_id: string
+          to_type_id: string
+        }
+        Update: {
+          cast_kind?: Database["public"]["Enums"]["cast_kind"]
+          description?: string | null
+          from_type_id?: string
+          to_type_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "type_casts_from_type_id_fkey"
+            columns: ["from_type_id"]
+            isOneToOne: false
+            referencedRelation: "types"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "type_casts_to_type_id_fkey"
+            columns: ["to_type_id"]
+            isOneToOne: false
+            referencedRelation: "types"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      type_enum_values: {
+        Row: {
+          id: string
+          label: string
+          order: number
+          type_id: string
+          value: string
+        }
+        Insert: {
+          id?: string
+          label: string
+          order?: number
+          type_id: string
+          value: string
+        }
+        Update: {
+          id?: string
+          label?: string
+          order?: number
+          type_id?: string
+          value?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "type_enum_values_type_id_fkey"
+            columns: ["type_id"]
+            isOneToOne: false
+            referencedRelation: "types"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      type_flag_values: {
+        Row: {
+          bit: number
+          id: string
+          name: string
+          type_id: string
+        }
+        Insert: {
+          bit: number
+          id?: string
+          name: string
+          type_id: string
+        }
+        Update: {
+          bit?: number
+          id?: string
+          name?: string
+          type_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "type_flag_values_type_id_fkey"
+            columns: ["type_id"]
+            isOneToOne: false
+            referencedRelation: "types"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      type_structure_fields: {
+        Row: {
+          default_value: Json | null
+          field_name: string
+          field_type_id: string
+          id: string
+          order: number
+          required: boolean
+          structure_type_id: string
+        }
+        Insert: {
+          default_value?: Json | null
+          field_name: string
+          field_type_id: string
+          id?: string
+          order?: number
+          required?: boolean
+          structure_type_id: string
+        }
+        Update: {
+          default_value?: Json | null
+          field_name?: string
+          field_type_id?: string
+          id?: string
+          order?: number
+          required?: boolean
+          structure_type_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "type_structure_fields_field_type_id_fkey"
+            columns: ["field_type_id"]
+            isOneToOne: false
+            referencedRelation: "types"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "type_structure_fields_structure_type_id_fkey"
+            columns: ["structure_type_id"]
+            isOneToOne: false
+            referencedRelation: "types"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      types: {
+        Row: {
+          created_at: string
+          description: string | null
+          id: string
+          json_schema: Json | null
+          kind: Database["public"]["Enums"]["type_kind"]
+          meta: Json | null
+          name: string
+          owner_id: string | null
+          parent_type_id: string | null
+          settings: Json | null
+          updated_at: string
+          visibility: Database["public"]["Enums"]["type_visibility"]
+        }
+        Insert: {
+          created_at?: string
+          description?: string | null
+          id?: string
+          json_schema?: Json | null
+          kind: Database["public"]["Enums"]["type_kind"]
+          meta?: Json | null
+          name: string
+          owner_id?: string | null
+          parent_type_id?: string | null
+          settings?: Json | null
+          updated_at?: string
+          visibility?: Database["public"]["Enums"]["type_visibility"]
+        }
+        Update: {
+          created_at?: string
+          description?: string | null
+          id?: string
+          json_schema?: Json | null
+          kind?: Database["public"]["Enums"]["type_kind"]
+          meta?: Json | null
+          name?: string
+          owner_id?: string | null
+          parent_type_id?: string | null
+          settings?: Json | null
+          updated_at?: string
+          visibility?: Database["public"]["Enums"]["type_visibility"]
+        }
+        Relationships: [
+          {
+            foreignKeyName: "types_parent_type_id_fkey"
+            columns: ["parent_type_id"]
+            isOneToOne: false
+            referencedRelation: "types"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      user_filter_configs: {
+        Row: {
+          context: string
+          created_at: string | null
+          custom_filters: Json | null
+          default_templates: string[] | null
+          id: string
+          is_default: boolean | null
+          model: string
+          provider: string
+          updated_at: string | null
+          user_id: string | null
+          variables: Json | null
+        }
+        Insert: {
+          context: string
+          created_at?: string | null
+          custom_filters?: Json | null
+          default_templates?: string[] | null
+          id?: string
+          is_default?: boolean | null
+          model?: string
+          provider?: string
+          updated_at?: string | null
+          user_id?: string | null
+          variables?: Json | null
+        }
+        Update: {
+          context?: string
+          created_at?: string | null
+          custom_filters?: Json | null
+          default_templates?: string[] | null
+          id?: string
+          is_default?: boolean | null
+          model?: string
+          provider?: string
+          updated_at?: string | null
+          user_id?: string | null
+          variables?: Json | null
+        }
+        Relationships: []
+      }
+      user_organizations: {
+        Row: {
+          created_at: string
+          id: string
+          organization_id: string
+          role: string
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          organization_id: string
+          role?: string
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          organization_id?: string
+          role?: string
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "user_organizations_organization_id_fkey"
+            columns: ["organization_id"]
+            isOneToOne: false
+            referencedRelation: "organizations"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      user_roles: {
+        Row: {
+          created_at: string
+          id: string
+          organization_id: string | null
+          role: Database["public"]["Enums"]["app_role"]
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          organization_id?: string | null
+          role: Database["public"]["Enums"]["app_role"]
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          organization_id?: string | null
+          role?: Database["public"]["Enums"]["app_role"]
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "user_roles_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "profiles"
+            referencedColumns: ["user_id"]
+          },
+        ]
+      }
+      user_secrets: {
+        Row: {
+          aimlapi_api_key: string | null
+          bria_api_key: string | null
+          created_at: string
+          google_api_key: string | null
+          huggingface_api_key: string | null
+          is_admin: boolean | null
+          openai_api_key: string | null
+          replicate_api_key: string | null
+          settings: Json | null
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          aimlapi_api_key?: string | null
+          bria_api_key?: string | null
+          created_at?: string
+          google_api_key?: string | null
+          huggingface_api_key?: string | null
+          is_admin?: boolean | null
+          openai_api_key?: string | null
+          replicate_api_key?: string | null
+          settings?: Json | null
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          aimlapi_api_key?: string | null
+          bria_api_key?: string | null
+          created_at?: string
+          google_api_key?: string | null
+          huggingface_api_key?: string | null
+          is_admin?: boolean | null
+          openai_api_key?: string | null
+          replicate_api_key?: string | null
+          settings?: Json | null
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+      user_templates: {
+        Row: {
+          context: string
+          created_at: string | null
+          description: string | null
+          filters: string[] | null
+          format: string | null
+          id: string
+          is_public: boolean | null
+          model: string
+          name: string
+          prompt: string
+          provider: string
+          updated_at: string | null
+          usage_count: number | null
+          user_id: string | null
+        }
+        Insert: {
+          context: string
+          created_at?: string | null
+          description?: string | null
+          filters?: string[] | null
+          format?: string | null
+          id?: string
+          is_public?: boolean | null
+          model?: string
+          name: string
+          prompt: string
+          provider?: string
+          updated_at?: string | null
+          usage_count?: number | null
+          user_id?: string | null
+        }
+        Update: {
+          context?: string
+          created_at?: string | null
+          description?: string | null
+          filters?: string[] | null
+          format?: string | null
+          id?: string
+          is_public?: boolean | null
+          model?: string
+          name?: string
+          prompt?: string
+          provider?: string
+          updated_at?: string | null
+          usage_count?: number | null
+          user_id?: string | null
+        }
+        Relationships: []
+      }
+      vfs_document_chunks: {
+        Row: {
+          chunk_index: number
+          content: string
+          created_at: string | null
+          embedding: string | null
+          id: string
+          vfs_id: string
+        }
+        Insert: {
+          chunk_index: number
+          content: string
+          created_at?: string | null
+          embedding?: string | null
+          id?: string
+          vfs_id: string
+        }
+        Update: {
+          chunk_index?: number
+          content?: string
+          created_at?: string | null
+          embedding?: string | null
+          id?: string
+          vfs_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "vfs_document_chunks_vfs_id_fkey"
+            columns: ["vfs_id"]
+            isOneToOne: false
+            referencedRelation: "vfs_index"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      vfs_index: {
+        Row: {
+          content: string | null
+          fts: unknown
+          id: string
+          is_vectorized: boolean | null
+          mime: string | null
+          mount: string
+          mtime: string | null
+          name: string
+          path: string
+          size: number | null
+          type: string
+        }
+        Insert: {
+          content?: string | null
+          fts?: unknown
+          id?: string
+          is_vectorized?: boolean | null
+          mime?: string | null
+          mount: string
+          mtime?: string | null
+          name: string
+          path: string
+          size?: number | null
+          type: string
+        }
+        Update: {
+          content?: string | null
+          fts?: unknown
+          id?: string
+          is_vectorized?: boolean | null
+          mime?: string | null
+          mount?: string
+          mtime?: string | null
+          name?: string
+          path?: string
+          size?: number | null
+          type?: string
+        }
+        Relationships: []
+      }
+      widget_translations: {
+        Row: {
+          created_at: string | null
+          entity_id: string | null
+          entity_type: string | null
+          id: string
+          meta: Json | null
+          prop_path: string | null
+          source_lang: string
+          source_text: string | null
+          source_version: number | null
+          status: Database["public"]["Enums"]["translation_status"] | null
+          target_lang: string
+          translated_text: string | null
+          updated_at: string | null
+          widget_id: string | null
+        }
+        Insert: {
+          created_at?: string | null
+          entity_id?: string | null
+          entity_type?: string | null
+          id?: string
+          meta?: Json | null
+          prop_path?: string | null
+          source_lang: string
+          source_text?: string | null
+          source_version?: number | null
+          status?: Database["public"]["Enums"]["translation_status"] | null
+          target_lang: string
+          translated_text?: string | null
+          updated_at?: string | null
+          widget_id?: string | null
+        }
+        Update: {
+          created_at?: string | null
+          entity_id?: string | null
+          entity_type?: string | null
+          id?: string
+          meta?: Json | null
+          prop_path?: string | null
+          source_lang?: string
+          source_text?: string | null
+          source_version?: number | null
+          status?: Database["public"]["Enums"]["translation_status"] | null
+          target_lang?: string
+          translated_text?: string | null
+          updated_at?: string | null
+          widget_id?: string | null
+        }
+        Relationships: []
+      }
+      wizard_sessions: {
+        Row: {
+          created_at: string
+          generated_image_url: string | null
+          id: string
+          input_images: string[] | null
+          prompt: string
+          status: string
+          updated_at: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          generated_image_url?: string | null
+          id?: string
+          input_images?: string[] | null
+          prompt?: string
+          status?: string
+          updated_at?: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          generated_image_url?: string | null
+          id?: string
+          input_images?: string[] | null
+          prompt?: string
+          status?: string
+          updated_at?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+    }
+    Views: {
+      marketing_unsubscribed: {
+        Row: {
+          email: string | null
+        }
+        Relationships: []
+      }
+    }
+    Functions: {
+      authorize: {
+        Args: {
+          _role: Database["public"]["Enums"]["app_role"]
+          _user_id: string
+        }
+        Returns: boolean
+      }
+      has_permission: {
+        Args: {
+          _permission: Database["public"]["Enums"]["app_permission"]
+          _user_id: string
+        }
+        Returns: boolean
+      }
+      is_page_collaborator: { Args: { _page_id: string }; Returns: boolean }
+      is_page_owner: { Args: { _page_id: string }; Returns: boolean }
+      pages_search_text: {
+        Args: { rec: Database["public"]["Tables"]["pages"]["Row"] }
+        Returns: unknown
+      }
+      pictures_search_text: {
+        Args: { rec: Database["public"]["Tables"]["pictures"]["Row"] }
+        Returns: unknown
+      }
+      posts_search_text: {
+        Args: { rec: Database["public"]["Tables"]["posts"]["Row"] }
+        Returns: unknown
+      }
+      search_pages: {
+        Args: { result_limit?: number; search_query: string }
+        Returns: {
+          created_at: string
+          id: string
+          meta: Json
+          owner: string
+          rank: number
+          slug: string
+          tags: string[]
+          title: string
+          type: string
+          updated_at: string
+        }[]
+      }
+      search_pictures: {
+        Args: { result_limit?: number; search_query: string }
+        Returns: {
+          created_at: string
+          description: string
+          id: string
+          image_url: string
+          rank: number
+          tags: string[]
+          thumbnail_url: string
+          title: string
+          type: string
+          user_id: string
+        }[]
+      }
+      search_posts: {
+        Args: { result_limit?: number; search_query: string }
+        Returns: {
+          created_at: string
+          description: string
+          id: string
+          rank: number
+          title: string
+          type: string
+          user_id: string
+        }[]
+      }
+    }
+    Enums: {
+      app_permission:
+        | "pictures.read"
+        | "pictures.create"
+        | "pictures.update"
+        | "pictures.delete"
+        | "collections.read"
+        | "collections.create"
+        | "collections.update"
+        | "collections.delete"
+        | "comments.read"
+        | "comments.create"
+        | "comments.update"
+        | "comments.delete"
+        | "organization.manage"
+      app_role: "owner" | "admin" | "member" | "viewer"
+      cast_kind: "implicit" | "explicit" | "lossy"
+      category_relation_type:
+        | "generalization"
+        | "material_usage"
+        | "domain"
+        | "process_step"
+        | "standard"
+        | "other"
+      category_visibility: "public" | "unlisted" | "private"
+      collaborator_role: "viewer" | "editor" | "owner"
+      layout_visibility: "public" | "private" | "listed" | "custom"
+      translation_status: "draft" | "machine" | "reviewed" | "published"
+      type_kind:
+        | "primitive"
+        | "enum"
+        | "flags"
+        | "structure"
+        | "alias"
+        | "field"
+      type_visibility: "public" | "private" | "custom"
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+
+type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
+
+type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
+
+export type Tables<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+        DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+      DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])
+    ? (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+
+export type TablesInsert<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+
+export type TablesUpdate<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+
+export type Enums<
+  DefaultSchemaEnumNameOrOptions extends
+    | keyof DefaultSchema["Enums"]
+    | { schema: keyof DatabaseWithoutInternals },
+  EnumName extends DefaultSchemaEnumNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
+    : never = never,
+> = DefaultSchemaEnumNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
+    ? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
+    : never
+
+export type CompositeTypes<
+  PublicCompositeTypeNameOrOptions extends
+    | keyof DefaultSchema["CompositeTypes"]
+    | { schema: keyof DatabaseWithoutInternals },
+  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
+    : never = never,
+> = PublicCompositeTypeNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
+  : PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
+    ? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
+    : never
+
+export const Constants = {
+  graphql_public: {
+    Enums: {},
+  },
+  public: {
+    Enums: {
+      app_permission: [
+        "pictures.read",
+        "pictures.create",
+        "pictures.update",
+        "pictures.delete",
+        "collections.read",
+        "collections.create",
+        "collections.update",
+        "collections.delete",
+        "comments.read",
+        "comments.create",
+        "comments.update",
+        "comments.delete",
+        "organization.manage",
+      ],
+      app_role: ["owner", "admin", "member", "viewer"],
+      cast_kind: ["implicit", "explicit", "lossy"],
+      category_relation_type: [
+        "generalization",
+        "material_usage",
+        "domain",
+        "process_step",
+        "standard",
+        "other",
+      ],
+      category_visibility: ["public", "unlisted", "private"],
+      collaborator_role: ["viewer", "editor", "owner"],
+      layout_visibility: ["public", "private", "listed", "custom"],
+      translation_status: ["draft", "machine", "reviewed", "published"],
+      type_kind: ["primitive", "enum", "flags", "structure", "alias", "field"],
+      type_visibility: ["public", "private", "custom"],
+    },
+  },
+} as const
diff --git a/packages/ui/src/lib/audioUtils.ts b/packages/ui/src/lib/audioUtils.ts
index 235f5e75..6e035562 100644
--- a/packages/ui/src/lib/audioUtils.ts
+++ b/packages/ui/src/lib/audioUtils.ts
@@ -1,68 +1,68 @@
-export const encodeWav = (blob: Blob): Promise<string> => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = async () => {
-      try {
-        const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
-        const arrayBuffer = reader.result as ArrayBuffer;
-        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-
-        const numOfChannels = audioBuffer.numberOfChannels;
-        const sampleRate = audioBuffer.sampleRate;
-        const length = audioBuffer.length * numOfChannels * 2;
-        const buffer = new ArrayBuffer(44 + length);
-        const view = new DataView(buffer);
-
-        // RIFF chunk descriptor
-        writeString(view, 0, 'RIFF');
-        view.setUint32(4, 36 + length, true);
-        writeString(view, 8, 'WAVE');
-
-        // fmt sub-chunk
-        writeString(view, 12, 'fmt ');
-        view.setUint32(16, 16, true);
-        view.setUint16(20, 1, true); // PCM format
-        view.setUint16(22, numOfChannels, true);
-        view.setUint32(24, sampleRate, true);
-        view.setUint32(28, sampleRate * numOfChannels * 2, true);
-        view.setUint16(32, numOfChannels * 2, true);
-        view.setUint16(34, 16, true); // 16-bit
-
-        // data sub-chunk
-        writeString(view, 36, 'data');
-        view.setUint32(40, length, true);
-
-        // write PCM samples
-        let offset = 44;
-        for (let i = 0; i < audioBuffer.length; i++) {
-          for (let channel = 0; channel < numOfChannels; channel++) {
-            let sample = audioBuffer.getChannelData(channel)[i];
-            sample = Math.max(-1, Math.min(1, sample));
-            sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
-            view.setInt16(offset, sample, true);
-            offset += 2;
-          }
-        }
-
-        const wavBlob = new Blob([view], { type: 'audio/wav' });
-        const wavReader = new FileReader();
-        wavReader.onload = () => {
-          const result = wavReader.result as string;
-          resolve(result.split(',')[1]); // return base64 part
-        };
-        wavReader.onerror = reject;
-        wavReader.readAsDataURL(wavBlob);
-      } catch (err) {
-        reject(err);
-      }
-    };
-    reader.onerror = reject;
-    reader.readAsArrayBuffer(blob);
-  });
-};
-
-function writeString(view: DataView, offset: number, string: string) {
-  for (let i = 0; i < string.length; i++) {
-    view.setUint8(offset + i, string.charCodeAt(i));
-  }
-}
+export const encodeWav = (blob: Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = async () => {
+      try {
+        const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+        const arrayBuffer = reader.result as ArrayBuffer;
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+        const numOfChannels = audioBuffer.numberOfChannels;
+        const sampleRate = audioBuffer.sampleRate;
+        const length = audioBuffer.length * numOfChannels * 2;
+        const buffer = new ArrayBuffer(44 + length);
+        const view = new DataView(buffer);
+
+        // RIFF chunk descriptor
+        writeString(view, 0, 'RIFF');
+        view.setUint32(4, 36 + length, true);
+        writeString(view, 8, 'WAVE');
+
+        // fmt sub-chunk
+        writeString(view, 12, 'fmt ');
+        view.setUint32(16, 16, true);
+        view.setUint16(20, 1, true); // PCM format
+        view.setUint16(22, numOfChannels, true);
+        view.setUint32(24, sampleRate, true);
+        view.setUint32(28, sampleRate * numOfChannels * 2, true);
+        view.setUint16(32, numOfChannels * 2, true);
+        view.setUint16(34, 16, true); // 16-bit
+
+        // data sub-chunk
+        writeString(view, 36, 'data');
+        view.setUint32(40, length, true);
+
+        // write PCM samples
+        let offset = 44;
+        for (let i = 0; i < audioBuffer.length; i++) {
+          for (let channel = 0; channel < numOfChannels; channel++) {
+            let sample = audioBuffer.getChannelData(channel)[i];
+            sample = Math.max(-1, Math.min(1, sample));
+            sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
+            view.setInt16(offset, sample, true);
+            offset += 2;
+          }
+        }
+
+        const wavBlob = new Blob([view], { type: 'audio/wav' });
+        const wavReader = new FileReader();
+        wavReader.onload = () => {
+          const result = wavReader.result as string;
+          resolve(result.split(',')[1]); // return base64 part
+        };
+        wavReader.onerror = reject;
+        wavReader.readAsDataURL(wavBlob);
+      } catch (err) {
+        reject(err);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(blob);
+  });
+};
+
+function writeString(view: DataView, offset: number, string: string) {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
diff --git a/packages/ui/src/lib/log.ts b/packages/ui/src/lib/log.ts
index 406d3c1f..a835dcdf 100644
--- a/packages/ui/src/lib/log.ts
+++ b/packages/ui/src/lib/log.ts
@@ -1,79 +1,79 @@
-// Logger system - stubbed for now
-// This could be enhanced to show logs in a dev panel or send to a logging service
-
-export interface LogEntry {
-  timestamp: Date;
-  level: 'debug' | 'info' | 'warn' | 'error';
-  message: string;
-  data?: any;
-}
-
-class Logger {
-  private logs: LogEntry[] = [];
-  private maxLogs = 1000; // Keep last 1000 logs
-
-  private addLog(level: LogEntry['level'], message: string, data?: any) {
-    const entry: LogEntry = {
-      timestamp: new Date(),
-      level,
-      message,
-      data
-    };
-
-    this.logs.push(entry);
-    
-    // Keep only the last maxLogs entries
-    if (this.logs.length > this.maxLogs) {
-      this.logs.shift();
-    }
-
-    // For now, just console.log with prefixes
-    const prefix = {
-      debug: '🐛',
-      info: 'ℹ️',
-      warn: '⚠️',
-      error: '❌'
-    }[level];
-
-    if (data) {
-      console[level](`${prefix} ${message}`, data);
-    } else {
-      console[level](`${prefix} ${message}`);
-    }
-  }
-
-  debug(message: string, data?: any) {
-    this.addLog('debug', message, data);
-  }
-
-  info(message: string, data?: any) {
-    this.addLog('info', message, data);
-  }
-
-  warn(message: string, data?: any) {
-    this.addLog('warn', message, data);
-  }
-
-  error(message: string, data?: any) {
-    this.addLog('error', message, data);
-  }
-
-  // Get all logs (for dev panel)
-  getLogs(): LogEntry[] {
-    return [...this.logs];
-  }
-
-  // Clear all logs
-  clearLogs() {
-    this.logs = [];
-    console.clear();
-  }
-
-  // Export logs as JSON
-  exportLogs(): string {
-    return JSON.stringify(this.logs, null, 2);
-  }
-}
-
-const log = new Logger();
-export default log;
+// Logger system - stubbed for now
+// This could be enhanced to show logs in a dev panel or send to a logging service
+
+export interface LogEntry {
+  timestamp: Date;
+  level: 'debug' | 'info' | 'warn' | 'error';
+  message: string;
+  data?: any;
+}
+
+class Logger {
+  private logs: LogEntry[] = [];
+  private maxLogs = 1000; // Keep last 1000 logs
+
+  private addLog(level: LogEntry['level'], message: string, data?: any) {
+    const entry: LogEntry = {
+      timestamp: new Date(),
+      level,
+      message,
+      data
+    };
+
+    this.logs.push(entry);
+    
+    // Keep only the last maxLogs entries
+    if (this.logs.length > this.maxLogs) {
+      this.logs.shift();
+    }
+
+    // For now, just console.log with prefixes
+    const prefix = {
+      debug: '🐛',
+      info: 'ℹ️',
+      warn: '⚠️',
+      error: '❌'
+    }[level];
+
+    if (data) {
+      console[level](`${prefix} ${message}`, data);
+    } else {
+      console[level](`${prefix} ${message}`);
+    }
+  }
+
+  debug(message: string, data?: any) {
+    this.addLog('debug', message, data);
+  }
+
+  info(message: string, data?: any) {
+    this.addLog('info', message, data);
+  }
+
+  warn(message: string, data?: any) {
+    this.addLog('warn', message, data);
+  }
+
+  error(message: string, data?: any) {
+    this.addLog('error', message, data);
+  }
+
+  // Get all logs (for dev panel)
+  getLogs(): LogEntry[] {
+    return [...this.logs];
+  }
+
+  // Clear all logs
+  clearLogs() {
+    this.logs = [];
+    console.clear();
+  }
+
+  // Export logs as JSON
+  exportLogs(): string {
+    return JSON.stringify(this.logs, null, 2);
+  }
+}
+
+const log = new Logger();
+export default log;
diff --git a/packages/ui/src/lib/openai.ts b/packages/ui/src/lib/openai.ts
index c42a1785..45dc8de3 100644
--- a/packages/ui/src/lib/openai.ts
+++ b/packages/ui/src/lib/openai.ts
@@ -1,1453 +1,1453 @@
-/**
- * OpenAI Integration with Tool Presets
- * 
- * PRESET QUICK REFERENCE:
- * ----------------------
- * Agent/Voice Agent: 'smart-generation' (optimize → generate → metadata, NO publish)
- * Workflows:         'metadata-only' for metadata step
- * Auto workflows:    'auto-publish' (includes publish tool)
- * 
- * See PRESET_TOOLS mapping below for tool combinations.
- */
-import OpenAI from 'openai';
-import { supabase } from "@/integrations/supabase/client";
-import { z } from 'zod';
-import { zodToJsonSchema } from 'zod-to-json-schema';
-import { RunnableToolFunctionWithParse } from 'openai/lib/RunnableFunction';
-import { JSONSchema } from 'openai/lib/jsonschema';
-import { createImage as createImageRouter, editImage as editImageRouter } from '@/lib/image-router';
-import { generateTextWithImagesTool } from '@/lib/markdownImageTools';
-import { createPageTool } from '@/lib/pageTools';
-import { createWidgetsTool } from '@/lib/tools-layout';
-import { encodeWav } from '@/lib/audioUtils';
-
-type LogFunction = (level: string, message: string, data?: any) => void;
-
-// Simple logger for user feedback
-const consoleLogger = {
-  debug: (message: string, data?: any) => console.debug(`[OPENAI-DEBUG] ${message}`, data),
-  info: (message: string, data?: any) => console.info(`[OPENAI-INFO] ${message}`, data),
-  warn: (message: string, data?: any) => console.warn(`[OPENAI-WARN] ${message}`, data),
-  error: (message: string, data?: any) => console.error(`[OPENAI-ERROR] ${message}`, data),
-};
-
-/**
- * SIMPLE TOOL PRESET MAPPING
- * 
- * This mapping defines common tool combinations:
- * - generate-only:      [generate]
- * - generate-metadata:  [generate, metadata]
- * - generate-publish:   [generate, metadata, publish]
- * - metadata-only:      [metadata]
- * - optimize-generate:  [optimize, generate, metadata]
- * 
- * Use these to avoid calling unwanted tools (e.g., publish when user wants manual control)
- */
-export type PresetType =
-  | 'generate-only'        // Just generate image
-  | 'generate-metadata'    // Generate + metadata
-  | 'generate-publish'     // Generate + metadata + publish
-  | 'metadata-only'        // Only metadata
-  | 'optimize-generate'    // Optimize + generate + metadata
-  | 'layout-generator';    // Generate widget layout fragments
-
-const PRESET_TOOLS: Record<PresetType, (apiKey?: string) => RunnableToolFunctionWithParse<any>[]> = {
-  'generate-only': (apiKey) => [
-    generateImageTool(apiKey)
-  ],
-  'generate-metadata': (apiKey) => [
-    generateImageTool(apiKey),
-    generateImageMetadataTool(apiKey)
-  ],
-  'generate-publish': (apiKey) => [
-    generateImageTool(apiKey),
-    generateImageMetadataTool(apiKey),
-    publishImageTool()
-  ],
-  'metadata-only': (apiKey) => [
-    generateImageMetadataTool(apiKey)
-  ],
-  'optimize-generate': (apiKey) => [
-    optimizePromptTool(apiKey),
-    generateImageTool(apiKey),
-    generateImageMetadataTool(apiKey)
-  ],
-  'layout-generator': () => [
-    createWidgetsTool(),
-  ],
-};
-
-// Get user's session token for proxy authentication
-const getAuthToken = async (): Promise<string | null> => {
-  try {
-    const { data: { session } } = await supabase.auth.getSession();
-    if (!session?.access_token) {
-      consoleLogger.error('No authenticated session found');
-      return null;
-    }
-    return session.access_token;
-  } catch (error) {
-    consoleLogger.error('Error getting auth token:', error);
-    return null;
-  }
-};
-
-
-// Create OpenAI client
-export const createOpenAIClient = async (apiKey?: string): Promise<OpenAI | null> => {
-  // We use the Supabase session token as the "apiKey" for the proxy
-  // If a legacy OpenAI key (sk-...) is passed, we ignore it and use the session token
-  let token = apiKey;
-
-  if (!token || token.startsWith('sk-')) {
-    if (token?.startsWith('sk-')) {
-      consoleLogger.warn('Legacy OpenAI key detected and ignored. Using Supabase session token for proxy.');
-    }
-    token = (await getAuthToken()) || undefined;
-  }
-
-  if (!token) {
-    consoleLogger.error('No authentication token found. Please sign in.');
-    return null;
-  }
-
-  try {
-    console.log('[createOpenAIClient] apiKey arg:', apiKey ? apiKey.substring(0, 10) + '...' : 'undefined');
-    console.log('[createOpenAIClient] resolved token:', token ? token.substring(0, 10) + '...' : 'null');
-    return new OpenAI({
-      apiKey: token, // This is sent as Bearer token to our proxy
-      baseURL: `${import.meta.env.VITE_SERVER_IMAGE_API_URL}/api/openai/v1`,
-      dangerouslyAllowBrowser: true // Required for client-side usage
-    });
-  } catch (error) {
-    consoleLogger.error('Error creating OpenAI client:', error);
-    return null;
-  }
-};
-
-// Helper function to check if OpenAI is available (non-throwing)
-export const isOpenAIAvailable = async (apiKey?: string): Promise<boolean> => {
-  try {
-    const client = await createOpenAIClient(apiKey);
-    return client !== null;
-  } catch (error) {
-    consoleLogger.debug('OpenAI not available:', error);
-    return false;
-  }
-};
-
-// Safe wrapper for OpenAI operations that handles missing API key gracefully
-export const withOpenAI = async <T>(
-  operation: (client: OpenAI) => Promise<T>,
-  fallback?: T,
-  apiKey?: string
-): Promise<T | null> => {
-  try {
-    const client = await createOpenAIClient(apiKey);
-    if (!client) {
-      consoleLogger.warn('OpenAI client not available, using fallback or returning null');
-      return fallback ?? null;
-    }
-
-    return await operation(client);
-  } catch (error) {
-    consoleLogger.error('OpenAI operation failed:', error);
-    return fallback ?? null;
-  }
-};
-
-// Simple text completion function
-export const generateText = async (
-  input: string,
-  model: string = "gpt-5",
-  apiKey?: string,
-
-  signal?: AbortSignal,
-  onChunk?: (chunk: string) => void,
-  webSearch?: boolean
-): Promise<string | null> => {
-  return withOpenAI(async (client) => {
-    try {
-      // If web search is enabled, we MUST use the responses API
-      if (webSearch) {
-        consoleLogger.info('Using web_search with responses API', { model });
-
-        const response = await (client as any).responses?.create({
-          model,
-          tools: [{ type: "web_search" }],
-          input,
-        });
-
-        // Parse response.output array structure
-        if (response?.output && Array.isArray(response.output)) {
-          const messageItem = response.output.find((item: any) => item.type === 'message');
-
-          if (messageItem?.content && Array.isArray(messageItem.content)) {
-            const textItem = messageItem.content.find((c: any) => c.type === 'output_text');
-
-            if (textItem?.text) {
-              consoleLogger.info('Successfully generated text with web search', {
-                inputLength: input.length,
-                outputLength: textItem.text.length,
-                model
-              });
-              return textItem.text;
-            }
-          }
-        }
-
-        consoleLogger.warn('Web search response had no valid text content', { response });
-      }
-
-      // Streaming implementation
-      if (onChunk) {
-        const stream = await client.chat.completions.create({
-          model,
-          messages: [{ role: "user", content: input }],
-          stream: true,
-        }, { signal });
-
-        let fullContent = '';
-        for await (const chunk of stream) {
-          const delta = chunk.choices[0]?.delta?.content || '';
-          if (delta) {
-            fullContent += delta;
-            onChunk(delta);
-          }
-        }
-
-        consoleLogger.info('Successfully streamed text response', {
-          inputLength: input.length,
-          outputLength: fullContent.length,
-          model
-        });
-
-        return fullContent;
-      }
-
-      // Non-streaming implementation
-      const response = await client.chat.completions.create({
-        model,
-        messages: [{ role: "user", content: input }]
-      }, {
-        signal, // Pass abort signal to OpenAI client
-      });
-
-      const content = response.choices[0]?.message?.content;
-      if (!content) {
-        consoleLogger.warn('No content returned from OpenAI');
-        return null;
-      }
-
-      consoleLogger.info('Successfully generated text response', {
-        inputLength: input.length,
-        outputLength: content.length,
-        model,
-        content
-      });
-
-      return content;
-    } catch (error: any) {
-      // Handle abort error specifically
-      if (error.name === 'AbortError' || error.message?.includes('aborted')) {
-        consoleLogger.info('Text generation aborted by user');
-        return null;
-      }
-
-      consoleLogger.error('OpenAI text generation failed:', {
-        error: error.message,
-        model,
-        inputPreview: input.substring(0, 100) + '...'
-      });
-      throw error;
-    }
-  }, null, apiKey);
-};
-
-// Alternative function using the responses API (if available)
-export const generateResponse = async (
-  input: string,
-  model: string = "gpt-4o-mini",
-  apiKey?: string
-): Promise<string | null> => {
-  return withOpenAI(async (client) => {
-    try {
-      // Note: The responses API might not be available in all OpenAI versions
-      // This is a placeholder for the API structure you mentioned
-      const response = await (client as any).responses?.create({
-        model,
-        input,
-      });
-
-      if (!response) {
-        consoleLogger.warn('Responses API not available, falling back to chat completions');
-        return generateText(input, model, apiKey);
-      }
-
-      consoleLogger.info('Successfully generated response', {
-        inputLength: input.length,
-        model
-      });
-
-      return response;
-    } catch (error: any) {
-      consoleLogger.error('OpenAI responses API failed, falling back to chat completions:', error.message);
-      // Fallback to standard chat completions
-      return generateText(input, model, apiKey);
-    }
-  }, null, apiKey);
-};
-
-// Helper to convert File to base64 (browser-compatible)
-const fileToBase64 = (file: File): Promise<string> => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-      const result = reader.result as string;
-      // Remove data URL prefix to get just the base64 string
-      const base64 = result.split(',')[1];
-      resolve(base64);
-    };
-    reader.onerror = error => reject(error);
-  });
-};
-
-// Get MIME type from file
-const getImageMimeType = (file: File): string => {
-  return file.type || 'image/jpeg';
-};
-
-// Image analysis function for generating descriptions and titles
-export const analyzeImages = async (
-  imageFiles: File[],
-  prompt: string = "Analyze this image and provide a detailed description and suggest a creative title.",
-  model: string = "gpt-4o-mini",
-  apiKey?: string
-): Promise<{ description: string; title: string } | null> => {
-  return withOpenAI(async (client) => {
-    try {
-      if (imageFiles.length === 0) {
-        consoleLogger.warn('No images provided for analysis');
-        return null;
-      }
-
-      // Convert all images to base64
-      const imageContents = await Promise.all(
-        imageFiles.map(async (file) => {
-          const base64 = await fileToBase64(file);
-          const mimeType = getImageMimeType(file);
-          return {
-            type: "input_image" as const,
-            image_url: `data:${mimeType};base64,${base64}`,
-          };
-        })
-      );
-
-      // Create the content array with text prompt and images
-      const content = [
-        { type: "input_text" as const, text: prompt },
-        ...imageContents
-      ];
-
-      // Use responses API for image analysis
-      const response = await (client as any).responses?.create({
-        model,
-        input: [
-          {
-            role: "user",
-            content,
-          },
-        ],
-      });
-
-      if (!response?.output_text) {
-        consoleLogger.warn('No output text returned from OpenAI image analysis');
-        return null;
-      }
-
-      const outputText = response.output_text;
-
-      // Try to parse description and title from the response
-      // This assumes the AI will format it properly, but we'll add some parsing logic
-      const lines = outputText.split('\n').filter(line => line.trim());
-
-      let description = outputText;
-      let title = `Analysis of ${imageFiles.length} image${imageFiles.length > 1 ? 's' : ''}`;
-      let titleLineIndex = -1;
-
-      // Simple parsing - look for title patterns
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        const lowerLine = line.toLowerCase();
-        if (lowerLine.includes('title:') || lowerLine.includes('suggested title:')) {
-          title = line.replace(/^.*title:\s*/i, '').trim();
-          titleLineIndex = i;
-          break;
-        }
-      }
-
-      // Remove title line from description
-      if (titleLineIndex >= 0) {
-        const descriptionLines = lines.filter((_, index) => index !== titleLineIndex);
-        description = descriptionLines.join('\n').trim();
-      }
-
-      consoleLogger.info('Successfully analyzed images', {
-        imageCount: imageFiles.length,
-        descriptionLength: description.length,
-        title: title.substring(0, 50) + '...',
-        model
-      });
-
-      return { description, title };
-
-    } catch (error: any) {
-      consoleLogger.error('OpenAI image analysis failed:', {
-        error: error.message,
-        model,
-        imageCount: imageFiles.length,
-        promptPreview: prompt.substring(0, 100) + '...'
-      });
-
-      // Fallback to chat completions if responses API fails
-      try {
-        consoleLogger.info('Falling back to chat completions for image analysis');
-
-        const imageContents = await Promise.all(
-          imageFiles.map(async (file) => {
-            const base64 = await fileToBase64(file);
-            const mimeType = getImageMimeType(file);
-            return {
-              type: "image_url" as const,
-              image_url: {
-                url: `data:${mimeType};base64,${base64}`,
-              },
-            };
-          })
-        );
-
-        const response = await client.chat.completions.create({
-          model: "gpt-4-vision-preview", // Use vision model for fallback
-          messages: [
-            {
-              role: "user",
-              content: [
-                { type: "text", text: prompt },
-                ...imageContents
-              ],
-            },
-          ]
-        });
-
-        const content = response.choices[0]?.message?.content;
-        if (!content) {
-          consoleLogger.warn('No content returned from fallback image analysis');
-          return null;
-        }
-
-        // Parse the fallback response
-        const lines = content.split('\n').filter(line => line.trim());
-        let description = content;
-        let title = `Analysis of ${imageFiles.length} image${imageFiles.length > 1 ? 's' : ''}`;
-        let titleLineIndex = -1;
-
-        for (let i = 0; i < lines.length; i++) {
-          const line = lines[i];
-          const lowerLine = line.toLowerCase();
-          if (lowerLine.includes('title:') || lowerLine.includes('suggested title:')) {
-            title = line.replace(/^.*title:\s*/i, '').trim();
-            titleLineIndex = i;
-            break;
-          }
-        }
-
-        // Remove title line from description
-        if (titleLineIndex >= 0) {
-          const descriptionLines = lines.filter((_, index) => index !== titleLineIndex);
-          description = descriptionLines.join('\n').trim();
-        }
-
-        return { description, title };
-
-      } catch (fallbackError: any) {
-        consoleLogger.error('Fallback image analysis also failed:', fallbackError.message);
-        throw error; // Throw original error
-      }
-    }
-  }, null, apiKey);
-};
-
-// Simplified function for wizard integration (disabled for now)
-export const generateImageMetadata = async (
-  imageFiles: File[],
-  apiKey?: string
-): Promise<{ description: string; title: string } | null> => {
-  // This function is disabled for now as mentioned in requirements
-  consoleLogger.info('Image metadata generation is currently disabled');
-  return null;
-
-  // When enabled, uncomment this:
-  // return analyzeImages(
-  //   imageFiles,
-  //   "Analyze these images and provide: 1) A detailed description of what you see, and 2) A creative, engaging title. Format your response with 'Title: [your title]' on the first line, followed by the description.",
-  //   "gpt-4.1-mini",
-  //   apiKey
-  // );
-};
-
-// Audio transcription function using OpenRouter Multimodal Chat Completions
-export const transcribeAudio = async (
-  audioFile: File,
-  model: string = "google/gemini-2.5-flash",
-  apiKey?: string
-): Promise<string | null> => {
-  try {
-    consoleLogger.info('Starting audio transcription via OpenRouter', {
-      fileName: audioFile.name,
-      fileSize: audioFile.size,
-      fileType: audioFile.type,
-      model
-    });
-
-    // Get auth token for proxy
-    let token = apiKey;
-    if (!token || token.startsWith('sk-')) {
-      token = (await getAuthToken()) || undefined;
-    }
-
-    if (!token) {
-      consoleLogger.error('No authentication token found. Please sign in.');
-      return null;
-    }
-
-    // Convert audio file to base64
-    const base64Audio = await encodeWav(audioFile);
-
-    const baseUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
-    
-    // Use the OpenRouter proxy endpoint
-    const response = await fetch(`${baseUrl}/api/openrouter/v1/chat/completions`, {
-      method: "POST",
-      headers: {
-        "Authorization": `Bearer ${token}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: model,
-        messages: [
-          {
-            role: "user",
-            content: [
-              {
-                type: "text",
-                text: "Please transcribe this audio file exactly as spoken, without any additional commentary.",
-              },
-              {
-                type: "input_audio",
-                input_audio: {
-                  data: base64Audio,
-                  format: "wav",
-                },
-              },
-            ],
-          },
-        ],
-      }),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      throw new Error(`OpenRouter API error: ${data.error?.message || response.statusText}`);
-    }
-
-    const transcribedText = data.choices?.[0]?.message?.content;
-
-    if (!transcribedText) {
-      consoleLogger.warn('No text returned from audio transcription');
-      return null;
-    }
-
-    consoleLogger.info('Successfully transcribed audio', {
-      textLength: transcribedText.length,
-      textPreview: transcribedText.substring(0, 100) + '...',
-      model
-    });
-
-    return transcribedText;
-  } catch (error: any) {
-    consoleLogger.error('OpenRouter audio transcription failed:', {
-      error: error.message,
-      fileName: audioFile.name,
-      model
-    });
-    throw error;
-  }
-};
-
-// Optimize prompt for image generation
-export const optimizePrompt = async (
-  userPrompt: string,
-  model: string = "gpt-5",
-  apiKey?: string
-): Promise<string | null> => {
-  return withOpenAI(async (client) => {
-    try {
-      consoleLogger.info('Starting prompt optimization', {
-        originalPromptLength: userPrompt.length,
-        originalPromptPreview: userPrompt.substring(0, 100) + '...',
-        model
-      });
-
-      const systemPrompt = `You are an expert at writing prompts for AI image generation models. Your task is to optimize user prompts to produce better, more detailed, and more visually striking images.
-
-Guidelines for optimization:
-- Add specific visual details (lighting, composition, style, mood, colors)
-- Include technical photography/art terms when relevant (e.g., "bokeh", "golden hour", "rule of thirds")
-- Specify artistic styles if not mentioned (e.g., "cinematic", "photorealistic", "digital art")
-- Add quality enhancers (e.g., "highly detailed", "4k", "masterpiece")
-- Keep the core intent of the user's prompt
-- Make it concise but descriptive (aim for 1-3 sentences)
-- Return ONLY the optimized prompt, no explanations or additional text
-
-Example:
-User: "a cat sitting on a chair"
-Optimized: "A fluffy tabby cat sitting gracefully on a vintage wooden chair, soft natural lighting from a nearby window creating gentle shadows, photorealistic style, highly detailed fur texture, warm color palette, shallow depth of field"`;
-
-      const response = await client.chat.completions.create({
-        model,
-        messages: [
-          { role: "system", content: systemPrompt },
-          { role: "user", content: userPrompt }
-        ]
-      });
-
-      const optimizedPrompt = response.choices[0]?.message?.content?.trim();
-
-      if (!optimizedPrompt) {
-        consoleLogger.warn('No optimized prompt returned from OpenAI');
-        return null;
-      }
-
-      consoleLogger.info('Successfully optimized prompt', {
-        originalLength: userPrompt.length,
-        optimizedLength: optimizedPrompt.length,
-        optimizedPreview: optimizedPrompt.substring(0, 100) + '...',
-        model
-      });
-
-      return optimizedPrompt;
-    } catch (error: any) {
-      consoleLogger.error('OpenAI prompt optimization failed:', {
-        error: error.message,
-        promptPreview: userPrompt.substring(0, 100) + '...',
-        model
-      });
-      throw error;
-    }
-  }, null, apiKey);
-};
-
-// Generate HTML snippet with Tailwind CSS
-export const generateHtmlSnippet = async (
-  userPrompt: string,
-  contextVariables: Record<string, any> = {},
-  pageContext: any = null,
-  apiKey?: string
-): Promise<string | null> => {
-  return withOpenAI(async (client) => {
-    try {
-      consoleLogger.info('Starting HTML snippet generation', {
-        promptLength: userPrompt.length,
-        hasContext: Object.keys(contextVariables).length > 0,
-        hasPageContext: !!pageContext
-      });
-
-      const variableList = Object.keys(contextVariables).map(k => `\${${k}}`).join(', ');
-
-      const contextPrompt = Object.keys(contextVariables).length > 0
-        ? `\nAvailable Variables: You can use these variables in your HTML: ${variableList}. Use the syntax \${variableName} to insert them.`
-        : '';
-
-      const pageContextPrompt = pageContext
-        ? `\nPage Context (JSON): Use this to understand the surrounding page structure/data if relevant:\n\`\`\`json\n${JSON.stringify(pageContext, null, 2).slice(0, 5000)}\n\`\`\``
-        : '';
-
-      const systemPrompt = `You are an expert Tailwind CSS and HTML developer.
-Your task is to generate or modify a standalone HTML snippet based on the user's request.
-
-Rules:
-1. Return ONLY the HTML code. Do NOT wrap it in markdown code blocks (\`\`\`html ... \`\`\`\`).
-2. Do NOT include any explanations, comments, or conversational text.
-3. Use Tailwind CSS classes for styling.
-4. The HTML should be a document fragment (e.g., a <div>, <section>, or <article>), NOT a full <html> document.
-5. Make the design modern, clean, and responsive.${contextPrompt}${pageContextPrompt}
-6. If icons are needed, use valid inline <svg> elements with Tailwind classes. Do NOT use React component names (like <LucideIcon />) as they will not render.
-7. Ensure strict accessibility compliance (aria-labels, roles).`;
-
-      console.log('System prompt:', systemPrompt);
-      console.log('User prompt:', userPrompt);
-
-      const response = await client.chat.completions.create({
-        model: "gpt-4o", // Stronger model for code generation
-        messages: [
-          { role: "system", content: systemPrompt },
-          { role: "user", content: userPrompt }
-        ]
-      });
-
-
-
-      let content = response.choices[0]?.message?.content?.trim();
-
-      if (!content) {
-        consoleLogger.warn('No HTML returned from OpenAI');
-        return null;
-      }
-
-      // Cleanup if the model ignored the "no markdown" rule
-      content = content.replace(/^```html\s*/i, '').replace(/^```\s*/, '').replace(/\s*```$/, '');
-
-      return content;
-    } catch (error: any) {
-      consoleLogger.error('OpenAI HTML generation failed:', error);
-      throw error;
-    }
-  }, null, apiKey);
-};
-
-/**
- * Helper function to create Zod-validated OpenAI tools
- * Based on ref/tools/index.ts
- */
-export const zodFunction = <T extends object>({
-  function: fn,
-  schema,
-  description = '',
-  name,
-}: {
-  function: (args: T) => Promise<object>;
-  schema: z.ZodSchema<T>;
-  description?: string;
-  name?: string;
-}): RunnableToolFunctionWithParse<T> => {
-  return {
-    type: 'function',
-    function: {
-      function: fn,
-      name: name ?? fn.name,
-      description: description,
-      parameters: zodToJsonSchema(schema, { target: 'openAi' }) as JSONSchema,
-      parse(input: string): T {
-        const obj = JSON.parse(input);
-        return schema.parse(obj);
-      },
-    },
-  };
-};
-
-// ====================================================================
-// TOOL DEFINITIONS
-// ====================================================================
-
-/**
- * Tool: Generate Image
- * Creates a new image from a text prompt using the specified AI model
- */
-export const generateImageTool = (apiKey?: string) =>
-  zodFunction({
-    name: 'generate_image',
-    description: 'Generate one or more images from a text prompt using AI image generation models. Supports multiple providers (Google, Replicate, Bria, AIML API). Can generate multiple images if count is specified.',
-    schema: z.object({
-      prompt: z.string().describe('The text prompt describing the image to generate'),
-      count: z.number().optional().describe('Number of images to generate (1-4). Default: 1'),
-      model: z.string().optional().describe('Model string in format "provider/model-name". Default: "google/gemini-3-pro-image-preview"'),
-    }),
-    function: async (args) => {
-      try {
-        const count = Math.min(Math.max(args.count || 1, 1), 4); // Clamp between 1-4
-        consoleLogger.info('Tool::GenerateImage called', {
-          prompt: args.prompt,
-          model: args.model,
-          count
-        });
-
-        // Image Router will fetch the appropriate provider API key from user profile
-        // Don't pass OpenAI API key to image generation
-        const results = [];
-
-        // Generate multiple images if count > 1
-        for (let i = 0; i < count; i++) {
-          const result = await createImageRouter(
-            args.prompt,
-            args.model || 'google/gemini-3-pro-image-preview',
-            undefined // Let Image Router fetch the correct provider API key
-          );
-
-          if (!result) {
-            consoleLogger.warn(`Image ${i + 1}/${count} generation failed`);
-            continue;
-          }
-
-          // Convert ArrayBuffer to blob URL
-          const uint8Array = new Uint8Array(result.imageData);
-          const blob = new Blob([uint8Array], { type: 'image/png' });
-          const imageUrl = URL.createObjectURL(blob);
-
-          results.push({
-            imageUrl,
-            text: result.text,
-          });
-        }
-
-        if (results.length === 0) {
-          return { success: false, error: 'Failed to generate any images' };
-        }
-
-        return {
-          success: true,
-          images: results,
-          count: results.length,
-          message: `${results.length} image${results.length > 1 ? 's' : ''} generated successfully`,
-        };
-      } catch (error: any) {
-        consoleLogger.error('Tool::GenerateImage failed', error);
-        return { success: false, error: error.message };
-      }
-    },
-  });
-
-/**
- * Tool: Transcribe Audio
- * Converts speech/audio to text using OpenAI Whisper
- */
-export const transcribeAudioTool = (apiKey?: string) =>
-  zodFunction({
-    name: 'transcribe_audio',
-    description: 'Transcribe audio or speech to text using OpenAI Whisper model. Accepts audio files in various formats.',
-    schema: z.object({
-      audioFile: z.any().describe('The audio file to transcribe (File object)'),
-      model: z.string().optional().describe('Whisper model to use. Default: "whisper-1"'),
-    }),
-    function: async (args) => {
-      try {
-        consoleLogger.info('Tool::TranscribeAudio called', { model: args.model });
-
-        const text = await transcribeAudio(args.audioFile, args.model, apiKey);
-
-        if (!text) {
-          return { success: false, error: 'Failed to transcribe audio' };
-        }
-
-        return {
-          success: true,
-          text,
-          message: 'Audio transcribed successfully',
-        };
-      } catch (error: any) {
-        consoleLogger.error('Tool::TranscribeAudio failed', error);
-        return { success: false, error: error.message };
-      }
-    },
-  });
-
-/**
- * Tool: Optimize Prompt
- * Enhances a user's prompt to produce better image generation results
- */
-export const optimizePromptTool = (apiKey?: string) =>
-  zodFunction({
-    name: 'optimize_prompt',
-    description: 'Optimize and enhance a text prompt for better image generation results. Adds specific visual details, technical terms, and quality enhancers.',
-    schema: z.object({
-      prompt: z.string().describe('The original user prompt to optimize'),
-      model: z.string().optional().describe('GPT model to use for optimization. Default: "gpt-4o-mini"'),
-    }),
-    function: async (args) => {
-      try {
-        consoleLogger.info('Tool::OptimizePrompt called', { promptLength: args.prompt.length });
-
-        const optimized = await optimizePrompt(args.prompt, args.model, apiKey);
-
-        if (!optimized) {
-          return { success: false, error: 'Failed to optimize prompt' };
-        }
-
-        return {
-          success: true,
-          originalPrompt: args.prompt,
-          optimizedPrompt: optimized,
-          message: 'Prompt optimized successfully',
-        };
-      } catch (error: any) {
-        consoleLogger.error('Tool::OptimizePrompt failed', error);
-        return { success: false, error: error.message };
-      }
-    },
-  });
-
-/**
- * Tool: Generate Text
- * Generates text completion using GPT models
- */
-export const generateTextTool = (apiKey?: string) =>
-  zodFunction({
-    name: 'generate_text',
-    description: 'Generate text completion using OpenAI GPT models. Useful for creating descriptions, titles, or any text content.',
-    schema: z.object({
-      input: z.string().describe('The input text or prompt'),
-      model: z.string().optional().describe('GPT model to use. Default: "gpt-4o-mini"'),
-    }),
-    function: async (args) => {
-      try {
-        consoleLogger.info('Tool::GenerateText called', { inputLength: args.input.length });
-
-        const text = await generateText(args.input, args.model, apiKey);
-
-        if (!text) {
-          return { success: false, error: 'Failed to generate text' };
-        }
-
-        return {
-          success: true,
-          text,
-          message: 'Text generated successfully',
-        };
-      } catch (error: any) {
-        consoleLogger.error('Tool::GenerateText failed', error);
-        return { success: false, error: error.message };
-      }
-    },
-  });
-
-/**
- * Tool: Generate Image Metadata
- * Generates title and description for an image based on the prompt or image content
- */
-export const generateImageMetadataTool = (apiKey?: string) =>
-  zodFunction({
-    name: 'generate_image_metadata',
-    description: 'Generate a creative title and detailed description for an image based on the prompt or image concept. Returns both title and description.',
-    schema: z.object({
-      prompt: z.string().describe('The image prompt or concept to generate metadata for'),
-      style: z.string().optional().describe('Optional style hint for the metadata (e.g., "creative", "professional", "poetic")'),
-    }),
-    function: async (args) => {
-      try {
-        consoleLogger.info('Tool::GenerateImageMetadata called', { promptLength: args.prompt.length });
-
-        const style = args.style || 'creative';
-        const metadataPrompt = `Based on this image concept: "${args.prompt}"
-
-Generate a ${style} title and description for this image.
-
-Requirements:
-- Title: Short, catchy, and descriptive (5-8 words max)
-- Description: Engaging description that captures the essence (2-3 sentences)
-
-Format your response EXACTLY as:
-Title: [your title here]
-Description: [your description here]`;
-
-        const response = await generateText(metadataPrompt, 'gpt-4o-mini', apiKey);
-
-        if (!response) {
-          return { success: false, error: 'Failed to generate metadata' };
-        }
-
-        // Parse title and description from response
-        const titleMatch = response.match(/Title:\s*(.+?)(?:\n|$)/i);
-        const descMatch = response.match(/Description:\s*(.+?)$/is);
-
-        const title = titleMatch ? titleMatch[1].trim() : `Generated: ${args.prompt.substring(0, 50)}`;
-        const description = descMatch ? descMatch[1].trim() : args.prompt;
-
-        consoleLogger.info('Successfully generated image metadata', {
-          titleLength: title.length,
-          descriptionLength: description.length,
-        });
-
-        return {
-          success: true,
-          title,
-          description,
-          message: 'Image metadata generated successfully',
-        };
-      } catch (error: any) {
-        consoleLogger.error('Tool::GenerateImageMetadata failed', error);
-        return { success: false, error: error.message };
-      }
-    },
-  });
-
-/**
- * Tool: Publish Image to Gallery
- * Publishes a generated image to the user's gallery with title and description
- */
-export const publishImageTool = () =>
-  zodFunction({
-    name: 'publish_image',
-    description: 'Publish a generated image to the gallery with title, description, and optional tags. This saves the image permanently to the user\'s account.',
-    schema: z.object({
-      imageUrl: z.string().describe('The URL or blob URL of the image to publish'),
-      title: z.string().describe('The title for the image'),
-      description: z.string().optional().describe('Optional description for the image'),
-      tags: z.array(z.string()).optional().describe('Optional array of tags for the image'),
-      prompt: z.string().optional().describe('The prompt used to generate the image'),
-    }),
-    function: async (args) => {
-      try {
-        consoleLogger.info('Tool::PublishImage called', { title: args.title });
-
-        // Note: This is a placeholder. The actual publishing logic needs to be
-        // implemented in the component that calls runTools, as it requires
-        // access to Supabase client, user context, and File handling.
-        // The tool returns the data needed for publishing.
-
-        return {
-          success: true,
-          publishData: {
-            imageUrl: args.imageUrl,
-            title: args.title,
-            description: args.description || '',
-            tags: args.tags || [],
-            prompt: args.prompt || '',
-          },
-          message: 'Image ready to publish. Please confirm publication in the UI.',
-          requiresConfirmation: true,
-        };
-      } catch (error: any) {
-        consoleLogger.error('Tool::PublishImage failed', error);
-        return { success: false, error: error.message };
-      }
-    },
-  });
-
-// ====================================================================
-// TOOL PRESETS
-// ====================================================================
-
-export interface ToolPreset {
-  name: string;
-  description: string;
-  model: string;
-  tools: RunnableToolFunctionWithParse<any>[];
-  systemPrompt?: string;
-}
-
-
-/**
- * Create a simple custom preset using the preset type mapping
- */
-export const createSimplePreset = (
-  type: PresetType,
-  systemPrompt: string,
-  apiKey?: string
-): ToolPreset => ({
-  name: `Custom ${type}`,
-  description: type,
-  model: 'openai/gpt-5.2',
-  tools: PRESET_TOOLS[type](apiKey),
-  systemPrompt,
-});
-
-/**
- * Create tool presets with API key
- */
-export const createToolPresets = (apiKey?: string, userId?: string, addLog?: LogFunction): Record<string, ToolPreset> => ({
-  'image-wizard': {
-    name: 'Image Generation Wizard',
-    description: 'Optimize → generate → metadata',
-    model: 'openai/gpt-5.2',
-    tools: PRESET_TOOLS['optimize-generate'](apiKey),
-    systemPrompt: `You are an AI image generation assistant. Your role is to:
-1. Optimize prompts for better results
-2. Generate images using optimized prompts
-3. Create metadata (title + description)
-
-Execute these steps automatically. Do NOT publish - user handles publishing.`,
-  },
-
-  'speech-to-image': {
-    name: 'Speech to Image',
-    description: 'Complete workflow: transcribe audio → optimize prompt → generate image',
-    model: 'openai/gpt-5.2',
-    tools: [
-      transcribeAudioTool(apiKey),
-      optimizePromptTool(apiKey),
-      generateImageTool(apiKey),
-    ],
-    systemPrompt: `You are an AI assistant that converts speech to images. Your workflow:
-1. Transcribe audio input to text (using transcribe_audio tool)
-2. Optimize the transcribed text as an image prompt (using optimize_prompt tool)
-3. Generate an image from the optimized prompt (using generate_image tool)
-4. Provide clear feedback at each step
-
-Execute all steps automatically when given audio input.`,
-  },
-
-  'text-to-image': {
-    name: 'Text to Image',
-    description: 'Optimize → generate → metadata',
-    model: 'openai/gpt-5.2',
-    tools: PRESET_TOOLS['optimize-generate'](apiKey),
-    systemPrompt: `You are a text-to-image generation assistant. 
-- Optimize prompts and generate images
-- Create metadata automatically
-- Do NOT publish - user handles that`,
-  },
-
-
-  'smart-generation': {
-    name: 'Smart Generation',
-    description: 'Optimize → generate → metadata (no publish)',
-    model: 'openai/gpt-5.2',
-    tools: PRESET_TOOLS['optimize-generate'](apiKey),
-    systemPrompt: `You are an intelligent image generation assistant.
-
-Workflow: Optimize prompt → Generate image → Create metadata
-
-Execute automatically. Do NOT publish - user handles publishing.
-Keep responses brief.`,
-  },
-
-  'auto-publish': {
-    name: 'Auto-Publish Workflow',
-    description: 'Optimize → generate → metadata → publish (full automation)',
-    model: 'openai/gpt-5.2',
-    tools: PRESET_TOOLS['generate-publish'](apiKey),
-    systemPrompt: `You are an auto-publishing assistant.
-
-Workflow: Optimize → Generate → Metadata → Publish
-
-Execute all steps automatically. Always include metadata.`,
-  },
-
-  'metadata-generator': {
-    name: 'Metadata Generator',
-    description: 'Generate title and description for image concepts or existing images',
-    model: 'openai/gpt-5.2',
-    tools: [
-      generateImageMetadataTool(apiKey),
-    ],
-    systemPrompt: `You are a creative metadata generator for images.
-Your job is to create engaging titles and descriptions that capture the essence of the image.
-
-For titles: Make them short, catchy, and memorable (5-8 words)
-For descriptions: Create 2-3 sentences that are engaging and descriptive
-
-Be creative and match the style of the image concept.`,
-  },
-
-  'metadata-only': {
-    name: 'Metadata Only',
-    description: 'Only generate title and description',
-    model: 'openai/gpt-5.2',
-    tools: PRESET_TOOLS['metadata-only'](apiKey),
-    systemPrompt: `Generate title and description for the prompt.
-Title: 5-8 words. Description: 2-3 sentences.`,
-  },
-  'page-generator': {
-    name: 'Page Generator',
-    description: 'Generate a complete page with text, images, and metadata from a single voice command.',
-    model: 'openai/gpt-5.2',
-    tools: [
-      generateTextWithImagesTool(userId || 'anonymous-user', addLog),
-      createPageTool(userId || 'anonymous-user', addLog),
-    ],
-    systemPrompt: `You are an AI assistant that creates well-structured pages with text and images. Your only task is to use the 'generate_text_with_images' tool to create rich, comprehensive markdown content based on the user's request. Include at least one relevant image unless otherwise specified.`,
-  },
-  'page-generator-text-only': {
-    name: 'Page Generator (Text Only)',
-    description: 'Generate a complete page with text from a single command, without images.',
-    model: 'openai/gpt-5.2',
-    tools: [
-      createPageTool(userId || 'anonymous-user', addLog),
-    ],
-    systemPrompt: `You are an AI assistant that writes well-structured, comprehensive markdown documents. Based on the user's request, generate the full text content for a page, then call the 'create_page' tool with that content and a suitable title and tags. Your final response must be only the 'create_page' tool call.`,
-  },
-  'layout-generator': {
-    name: 'Layout Generator',
-    description: 'Generate widget layout fragments (containers + widgets) from a text description.',
-    model: 'openai/gpt-5.2',
-    tools: [
-      createWidgetsTool(addLog),
-    ],
-    systemPrompt: `You are a layout generation assistant for a widget-based page editor. When the user describes a layout, call the create_widgets tool with the correct containers and widgets. Follow the widget schema exactly. Use appropriate columns, widget types, and props. Be creative with HTML widgets when no specific widget type fits. Always return valid JSON.`,
-  }
-});
-
-// ====================================================================
-// RUN TOOLS - Main Orchestration Function
-// ====================================================================
-
-export interface RunToolsOptions {
-  prompt: string;
-  preset?: string | ToolPreset;
-  apiKey?: string;
-  onMessage?: (message: any) => void;
-  onToolCall?: (toolCall: any) => void;
-  onContent?: (content: string) => void;
-  model?: string;
-  /** Provider name (e.g. 'openai', 'openrouter'). Determines which proxy base URL to use. */
-  provider?: string;
-  maxIterations?: number;
-  userId?: string;
-  images?: string[];
-  toolsEnabled?: boolean;
-  webSearchEnabled?: boolean;
-  pageToolsEnabled?: boolean;
-  imageToolsEnabled?: boolean;
-  vfsToolsEnabled?: boolean;
-  addLog?: LogFunction;
-}
-
-export interface RunToolsResult {
-  success: boolean;
-  content?: string;
-  messages: any[];
-  toolCalls: any[];
-  error?: string;
-}
-
-/**
- * Run OpenAI with tools - main orchestration function
- * Based on ref/run-tools.ts
- * 
- * @example
- * // Use preset
- * const result = await runTools({
- *   prompt: "Create a beautiful sunset over mountains",
- *   preset: "image-wizard"
- * });
- * 
- * @example
- * // Custom tools
- * const result = await runTools({
- *   prompt: "Generate an image of a cat",
- *   preset: {
- *     name: "custom",
- *     model: "gpt-4o-mini",
- *     tools: [generateImageTool()],
- *     systemPrompt: "You are a helpful assistant"
- *   }
- * });
- */
-export const runTools = async (options: RunToolsOptions): Promise<RunToolsResult> => {
-  const {
-    prompt,
-    preset,
-    apiKey,
-    onMessage,
-    onToolCall,
-    onContent,
-    maxIterations = 10,
-    userId,
-    images,
-    addLog,
-  } = options;
-
-  const logger = addLog ? {
-    debug: (m: string, d?: any) => addLog('debug', `[OPENAI] ${m}`, d),
-    info: (m: string, d?: any) => addLog('info', `[OPENAI] ${m}`, d),
-    warn: (m: string, d?: any) => addLog('warn', `[OPENAI] ${m}`, d),
-    error: (m: string, d?: any) => addLog('error', `[OPENAI] ${m}`, d),
-  } : consoleLogger;
-
-
-  const messages: any[] = [];
-  const toolCalls: any[] = [];
-
-  try {
-    // Get preset configuration (needed for model fallback)
-    const presets = createToolPresets(apiKey, userId, addLog);
-    const presetConfig: ToolPreset =
-      typeof preset === 'string'
-        ? presets[preset] || { ...presets['image-wizard'] }
-        : preset ? { ...preset } : { ...presets['image-wizard'] };
-    // Clone tools array to avoid modifying shared preset object
-    presetConfig.tools = [...presetConfig.tools];
-
-    // Determine effective provider — auto-detect OpenRouter from model format (contains '/')
-    const effectiveModel = options.model || presetConfig.model;
-    const effectiveProvider = options.provider
-      || (effectiveModel.includes('/') ? 'openrouter' : 'openai');
-
-    // Create client — route through the correct proxy based on provider
-    let client: OpenAI | null = null;
-
-    if (effectiveProvider === 'openrouter') {
-      // OpenRouter models (e.g. 'google/gemini-2.5-pro') need the OpenRouter proxy
-      let token: string | undefined = undefined;
-      try {
-        const { data } = await supabase.auth.getSession();
-        token = data?.session?.access_token;
-      } catch { }
-      if (!token) {
-        return {
-          success: false,
-          messages,
-          toolCalls,
-          error: 'No authentication token available for OpenRouter',
-        };
-      }
-      client = new OpenAI({
-        apiKey: token,
-        baseURL: `${import.meta.env.VITE_SERVER_IMAGE_API_URL}/api/openrouter/v1`,
-        dangerouslyAllowBrowser: true,
-      });
-    } else {
-      // Default: OpenAI proxy
-      client = await createOpenAIClient(apiKey);
-    }
-
-    if (!client) {
-      return {
-        success: false,
-        messages,
-        toolCalls,
-        error: 'Failed to create AI client - no API key available',
-      };
-    }
-
-
-
-    // Inject extra tools based on options
-    if (options.webSearchEnabled) {
-      const { webSearchTool, markdownScraperTool } = await import('@/modules/ai/searchTools');
-      presetConfig.tools.push(webSearchTool(logger.info));
-      presetConfig.tools.push(markdownScraperTool(logger.info));
-      logger.info('Injected Web Search and Markdown Scraper tools');
-    }
-    
-    // Determine effective provider — auto-detect OpenRouter from model format (contains '/')
-    // Note: If we use openrouter, we might need to add special tools, but for function calling we just pass them.
-
-    logger.info('Using preset', {
-      name: presetConfig.name,
-      model: presetConfig.model,
-      toolCount: presetConfig.tools.length,
-      toolsEnabled: options.toolsEnabled,
-      webSearchEnabled: options.webSearchEnabled,
-      pageToolsEnabled: options.pageToolsEnabled,
-      vfsToolsEnabled: options.vfsToolsEnabled
-    });
-
-    // Build messages
-    const initialMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [];
-
-    if (presetConfig.systemPrompt) {
-      initialMessages.push({
-        role: 'system',
-        content: presetConfig.systemPrompt,
-      });
-    }
-
-    // Handle multimodal input if images are provided
-    if (images && images.length > 0) {
-      logger.info('Adding images to request', { count: images.length });
-
-      const content: any[] = [
-        { type: "text", text: prompt }
-      ];
-
-      images.forEach(url => {
-        content.push({
-          type: "image_url",
-          image_url: {
-            url,
-            detail: "auto"
-          }
-        });
-      });
-
-      initialMessages.push({
-        role: 'user',
-        content: content,
-      });
-    } else {
-      initialMessages.push({
-        role: 'user',
-        content: prompt,
-      });
-    }
-
-    // Run tools
-    const runner = client.chat.completions
-      .runTools({
-        model: options.model || presetConfig.model,
-        messages: initialMessages,
-        tools: presetConfig.tools
-      });
-
-    logger.info('RunTools started', {
-      prompt: prompt.substring(0, 100),
-      preset: typeof preset === 'string' ? preset : 'custom',
-      model: options.model || presetConfig.model,
-      toolCount: presetConfig.tools.length,
-      initialMessages
-    });
-
-    await runner.done();
-
-    const finalMessages = runner.messages;
-    const finalContent = await runner.finalContent();
-
-    // Manually reconstruct tool calls with their output from the message history
-    // This is more reliable than depending on the runner's final state.
-    const completedToolCalls = finalMessages
-      .filter((msg): msg is OpenAI.Chat.Completions.ChatCompletionMessage & { tool_calls: OpenAI.Chat.Completions.ChatCompletionMessageToolCall[] } => msg.role === 'assistant' && !!msg.tool_calls)
-      .flatMap(msg => msg.tool_calls);
-
-    for (const toolCall of completedToolCalls) {
-      const toolOutputMessage = finalMessages.find(
-        (msg): msg is OpenAI.Chat.Completions.ChatCompletionMessage => msg.role === 'tool' && msg.tool_call_id === toolCall.id
-      );
-      if (toolOutputMessage && 'function' in toolCall && toolCall.function) {
-        (toolCall.function as any).output = toolOutputMessage.content;
-      }
-    }
-
-    logger.info('RunTools completed', {
-      messageCount: finalMessages.length,
-      toolCallCount: completedToolCalls.length,
-      completedToolCalls,
-      finalMessages: finalMessages,
-      finalContent: finalContent,
-    });
-
-    // The SDK should handle parsing, but as a safeguard, parse stringified outputs.
-    for (const toolCall of completedToolCalls) {
-      if ('function' in toolCall && toolCall.function && 'output' in toolCall.function && typeof toolCall.function.output === 'string') {
-        try {
-          // Attempt to parse the output, but don't fail if it's just a raw string.
-          const parsedOutput = JSON.parse(toolCall.function.output);
-          (toolCall.function as any).output = parsedOutput;
-        } catch (e) {
-          logger.debug('Tool output was a non-JSON string.', { output: toolCall.function.output });
-        }
-      }
-    }
-
-    return {
-      success: true,
-      content: finalContent ?? undefined,
-      messages: finalMessages,
-      toolCalls: completedToolCalls,
-    };
-  } catch (error: any) {
-
-    logger.error('RunTools failed', {
-      error: error.message,
-      prompt: prompt.substring(0, 100),
-    });
-
-    return {
-      success: false,
-      messages,
-      toolCalls,
-      error: error.message || 'Unknown error occurred',
-    };
-  }
-};
+/**
+ * OpenAI Integration with Tool Presets
+ * 
+ * PRESET QUICK REFERENCE:
+ * ----------------------
+ * Agent/Voice Agent: 'smart-generation' (optimize → generate → metadata, NO publish)
+ * Workflows:         'metadata-only' for metadata step
+ * Auto workflows:    'auto-publish' (includes publish tool)
+ * 
+ * See PRESET_TOOLS mapping below for tool combinations.
+ */
+import OpenAI from 'openai';
+import { supabase } from "@/integrations/supabase/client";
+import { z } from 'zod';
+import { zodToJsonSchema } from 'zod-to-json-schema';
+import { RunnableToolFunctionWithParse } from 'openai/lib/RunnableFunction';
+import { JSONSchema } from 'openai/lib/jsonschema';
+import { createImage as createImageRouter, editImage as editImageRouter } from '@/lib/image-router';
+import { generateTextWithImagesTool } from '@/lib/markdownImageTools';
+import { createPageTool } from '@/lib/pageTools';
+import { createWidgetsTool } from '@/lib/tools-layout';
+import { encodeWav } from '@/lib/audioUtils';
+
+type LogFunction = (level: string, message: string, data?: any) => void;
+
+// Simple logger for user feedback
+const consoleLogger = {
+  debug: (message: string, data?: any) => console.debug(`[OPENAI-DEBUG] ${message}`, data),
+  info: (message: string, data?: any) => console.info(`[OPENAI-INFO] ${message}`, data),
+  warn: (message: string, data?: any) => console.warn(`[OPENAI-WARN] ${message}`, data),
+  error: (message: string, data?: any) => console.error(`[OPENAI-ERROR] ${message}`, data),
+};
+
+/**
+ * SIMPLE TOOL PRESET MAPPING
+ * 
+ * This mapping defines common tool combinations:
+ * - generate-only:      [generate]
+ * - generate-metadata:  [generate, metadata]
+ * - generate-publish:   [generate, metadata, publish]
+ * - metadata-only:      [metadata]
+ * - optimize-generate:  [optimize, generate, metadata]
+ * 
+ * Use these to avoid calling unwanted tools (e.g., publish when user wants manual control)
+ */
+export type PresetType =
+  | 'generate-only'        // Just generate image
+  | 'generate-metadata'    // Generate + metadata
+  | 'generate-publish'     // Generate + metadata + publish
+  | 'metadata-only'        // Only metadata
+  | 'optimize-generate'    // Optimize + generate + metadata
+  | 'layout-generator';    // Generate widget layout fragments
+
+const PRESET_TOOLS: Record<PresetType, (apiKey?: string) => RunnableToolFunctionWithParse<any>[]> = {
+  'generate-only': (apiKey) => [
+    generateImageTool(apiKey)
+  ],
+  'generate-metadata': (apiKey) => [
+    generateImageTool(apiKey),
+    generateImageMetadataTool(apiKey)
+  ],
+  'generate-publish': (apiKey) => [
+    generateImageTool(apiKey),
+    generateImageMetadataTool(apiKey),
+    publishImageTool()
+  ],
+  'metadata-only': (apiKey) => [
+    generateImageMetadataTool(apiKey)
+  ],
+  'optimize-generate': (apiKey) => [
+    optimizePromptTool(apiKey),
+    generateImageTool(apiKey),
+    generateImageMetadataTool(apiKey)
+  ],
+  'layout-generator': () => [
+    createWidgetsTool(),
+  ],
+};
+
+// Get user's session token for proxy authentication
+const getAuthToken = async (): Promise<string | null> => {
+  try {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (!session?.access_token) {
+      consoleLogger.error('No authenticated session found');
+      return null;
+    }
+    return session.access_token;
+  } catch (error) {
+    consoleLogger.error('Error getting auth token:', error);
+    return null;
+  }
+};
+
+
+// Create OpenAI client
+export const createOpenAIClient = async (apiKey?: string): Promise<OpenAI | null> => {
+  // We use the Supabase session token as the "apiKey" for the proxy
+  // If a legacy OpenAI key (sk-...) is passed, we ignore it and use the session token
+  let token = apiKey;
+
+  if (!token || token.startsWith('sk-')) {
+    if (token?.startsWith('sk-')) {
+      consoleLogger.warn('Legacy OpenAI key detected and ignored. Using Supabase session token for proxy.');
+    }
+    token = (await getAuthToken()) || undefined;
+  }
+
+  if (!token) {
+    consoleLogger.error('No authentication token found. Please sign in.');
+    return null;
+  }
+
+  try {
+    console.log('[createOpenAIClient] apiKey arg:', apiKey ? apiKey.substring(0, 10) + '...' : 'undefined');
+    console.log('[createOpenAIClient] resolved token:', token ? token.substring(0, 10) + '...' : 'null');
+    return new OpenAI({
+      apiKey: token, // This is sent as Bearer token to our proxy
+      baseURL: `${import.meta.env.VITE_SERVER_IMAGE_API_URL}/api/openai/v1`,
+      dangerouslyAllowBrowser: true // Required for client-side usage
+    });
+  } catch (error) {
+    consoleLogger.error('Error creating OpenAI client:', error);
+    return null;
+  }
+};
+
+// Helper function to check if OpenAI is available (non-throwing)
+export const isOpenAIAvailable = async (apiKey?: string): Promise<boolean> => {
+  try {
+    const client = await createOpenAIClient(apiKey);
+    return client !== null;
+  } catch (error) {
+    consoleLogger.debug('OpenAI not available:', error);
+    return false;
+  }
+};
+
+// Safe wrapper for OpenAI operations that handles missing API key gracefully
+export const withOpenAI = async <T>(
+  operation: (client: OpenAI) => Promise<T>,
+  fallback?: T,
+  apiKey?: string
+): Promise<T | null> => {
+  try {
+    const client = await createOpenAIClient(apiKey);
+    if (!client) {
+      consoleLogger.warn('OpenAI client not available, using fallback or returning null');
+      return fallback ?? null;
+    }
+
+    return await operation(client);
+  } catch (error) {
+    consoleLogger.error('OpenAI operation failed:', error);
+    return fallback ?? null;
+  }
+};
+
+// Simple text completion function
+export const generateText = async (
+  input: string,
+  model: string = "gpt-5",
+  apiKey?: string,
+
+  signal?: AbortSignal,
+  onChunk?: (chunk: string) => void,
+  webSearch?: boolean
+): Promise<string | null> => {
+  return withOpenAI(async (client) => {
+    try {
+      // If web search is enabled, we MUST use the responses API
+      if (webSearch) {
+        consoleLogger.info('Using web_search with responses API', { model });
+
+        const response = await (client as any).responses?.create({
+          model,
+          tools: [{ type: "web_search" }],
+          input,
+        });
+
+        // Parse response.output array structure
+        if (response?.output && Array.isArray(response.output)) {
+          const messageItem = response.output.find((item: any) => item.type === 'message');
+
+          if (messageItem?.content && Array.isArray(messageItem.content)) {
+            const textItem = messageItem.content.find((c: any) => c.type === 'output_text');
+
+            if (textItem?.text) {
+              consoleLogger.info('Successfully generated text with web search', {
+                inputLength: input.length,
+                outputLength: textItem.text.length,
+                model
+              });
+              return textItem.text;
+            }
+          }
+        }
+
+        consoleLogger.warn('Web search response had no valid text content', { response });
+      }
+
+      // Streaming implementation
+      if (onChunk) {
+        const stream = await client.chat.completions.create({
+          model,
+          messages: [{ role: "user", content: input }],
+          stream: true,
+        }, { signal });
+
+        let fullContent = '';
+        for await (const chunk of stream) {
+          const delta = chunk.choices[0]?.delta?.content || '';
+          if (delta) {
+            fullContent += delta;
+            onChunk(delta);
+          }
+        }
+
+        consoleLogger.info('Successfully streamed text response', {
+          inputLength: input.length,
+          outputLength: fullContent.length,
+          model
+        });
+
+        return fullContent;
+      }
+
+      // Non-streaming implementation
+      const response = await client.chat.completions.create({
+        model,
+        messages: [{ role: "user", content: input }]
+      }, {
+        signal, // Pass abort signal to OpenAI client
+      });
+
+      const content = response.choices[0]?.message?.content;
+      if (!content) {
+        consoleLogger.warn('No content returned from OpenAI');
+        return null;
+      }
+
+      consoleLogger.info('Successfully generated text response', {
+        inputLength: input.length,
+        outputLength: content.length,
+        model,
+        content
+      });
+
+      return content;
+    } catch (error: any) {
+      // Handle abort error specifically
+      if (error.name === 'AbortError' || error.message?.includes('aborted')) {
+        consoleLogger.info('Text generation aborted by user');
+        return null;
+      }
+
+      consoleLogger.error('OpenAI text generation failed:', {
+        error: error.message,
+        model,
+        inputPreview: input.substring(0, 100) + '...'
+      });
+      throw error;
+    }
+  }, null, apiKey);
+};
+
+// Alternative function using the responses API (if available)
+export const generateResponse = async (
+  input: string,
+  model: string = "gpt-4o-mini",
+  apiKey?: string
+): Promise<string | null> => {
+  return withOpenAI(async (client) => {
+    try {
+      // Note: The responses API might not be available in all OpenAI versions
+      // This is a placeholder for the API structure you mentioned
+      const response = await (client as any).responses?.create({
+        model,
+        input,
+      });
+
+      if (!response) {
+        consoleLogger.warn('Responses API not available, falling back to chat completions');
+        return generateText(input, model, apiKey);
+      }
+
+      consoleLogger.info('Successfully generated response', {
+        inputLength: input.length,
+        model
+      });
+
+      return response;
+    } catch (error: any) {
+      consoleLogger.error('OpenAI responses API failed, falling back to chat completions:', error.message);
+      // Fallback to standard chat completions
+      return generateText(input, model, apiKey);
+    }
+  }, null, apiKey);
+};
+
+// Helper to convert File to base64 (browser-compatible)
+const fileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      const result = reader.result as string;
+      // Remove data URL prefix to get just the base64 string
+      const base64 = result.split(',')[1];
+      resolve(base64);
+    };
+    reader.onerror = error => reject(error);
+  });
+};
+
+// Get MIME type from file
+const getImageMimeType = (file: File): string => {
+  return file.type || 'image/jpeg';
+};
+
+// Image analysis function for generating descriptions and titles
+export const analyzeImages = async (
+  imageFiles: File[],
+  prompt: string = "Analyze this image and provide a detailed description and suggest a creative title.",
+  model: string = "gpt-4o-mini",
+  apiKey?: string
+): Promise<{ description: string; title: string } | null> => {
+  return withOpenAI(async (client) => {
+    try {
+      if (imageFiles.length === 0) {
+        consoleLogger.warn('No images provided for analysis');
+        return null;
+      }
+
+      // Convert all images to base64
+      const imageContents = await Promise.all(
+        imageFiles.map(async (file) => {
+          const base64 = await fileToBase64(file);
+          const mimeType = getImageMimeType(file);
+          return {
+            type: "input_image" as const,
+            image_url: `data:${mimeType};base64,${base64}`,
+          };
+        })
+      );
+
+      // Create the content array with text prompt and images
+      const content = [
+        { type: "input_text" as const, text: prompt },
+        ...imageContents
+      ];
+
+      // Use responses API for image analysis
+      const response = await (client as any).responses?.create({
+        model,
+        input: [
+          {
+            role: "user",
+            content,
+          },
+        ],
+      });
+
+      if (!response?.output_text) {
+        consoleLogger.warn('No output text returned from OpenAI image analysis');
+        return null;
+      }
+
+      const outputText = response.output_text;
+
+      // Try to parse description and title from the response
+      // This assumes the AI will format it properly, but we'll add some parsing logic
+      const lines = outputText.split('\n').filter(line => line.trim());
+
+      let description = outputText;
+      let title = `Analysis of ${imageFiles.length} image${imageFiles.length > 1 ? 's' : ''}`;
+      let titleLineIndex = -1;
+
+      // Simple parsing - look for title patterns
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const lowerLine = line.toLowerCase();
+        if (lowerLine.includes('title:') || lowerLine.includes('suggested title:')) {
+          title = line.replace(/^.*title:\s*/i, '').trim();
+          titleLineIndex = i;
+          break;
+        }
+      }
+
+      // Remove title line from description
+      if (titleLineIndex >= 0) {
+        const descriptionLines = lines.filter((_, index) => index !== titleLineIndex);
+        description = descriptionLines.join('\n').trim();
+      }
+
+      consoleLogger.info('Successfully analyzed images', {
+        imageCount: imageFiles.length,
+        descriptionLength: description.length,
+        title: title.substring(0, 50) + '...',
+        model
+      });
+
+      return { description, title };
+
+    } catch (error: any) {
+      consoleLogger.error('OpenAI image analysis failed:', {
+        error: error.message,
+        model,
+        imageCount: imageFiles.length,
+        promptPreview: prompt.substring(0, 100) + '...'
+      });
+
+      // Fallback to chat completions if responses API fails
+      try {
+        consoleLogger.info('Falling back to chat completions for image analysis');
+
+        const imageContents = await Promise.all(
+          imageFiles.map(async (file) => {
+            const base64 = await fileToBase64(file);
+            const mimeType = getImageMimeType(file);
+            return {
+              type: "image_url" as const,
+              image_url: {
+                url: `data:${mimeType};base64,${base64}`,
+              },
+            };
+          })
+        );
+
+        const response = await client.chat.completions.create({
+          model: "gpt-4-vision-preview", // Use vision model for fallback
+          messages: [
+            {
+              role: "user",
+              content: [
+                { type: "text", text: prompt },
+                ...imageContents
+              ],
+            },
+          ]
+        });
+
+        const content = response.choices[0]?.message?.content;
+        if (!content) {
+          consoleLogger.warn('No content returned from fallback image analysis');
+          return null;
+        }
+
+        // Parse the fallback response
+        const lines = content.split('\n').filter(line => line.trim());
+        let description = content;
+        let title = `Analysis of ${imageFiles.length} image${imageFiles.length > 1 ? 's' : ''}`;
+        let titleLineIndex = -1;
+
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines[i];
+          const lowerLine = line.toLowerCase();
+          if (lowerLine.includes('title:') || lowerLine.includes('suggested title:')) {
+            title = line.replace(/^.*title:\s*/i, '').trim();
+            titleLineIndex = i;
+            break;
+          }
+        }
+
+        // Remove title line from description
+        if (titleLineIndex >= 0) {
+          const descriptionLines = lines.filter((_, index) => index !== titleLineIndex);
+          description = descriptionLines.join('\n').trim();
+        }
+
+        return { description, title };
+
+      } catch (fallbackError: any) {
+        consoleLogger.error('Fallback image analysis also failed:', fallbackError.message);
+        throw error; // Throw original error
+      }
+    }
+  }, null, apiKey);
+};
+
+// Simplified function for wizard integration (disabled for now)
+export const generateImageMetadata = async (
+  imageFiles: File[],
+  apiKey?: string
+): Promise<{ description: string; title: string } | null> => {
+  // This function is disabled for now as mentioned in requirements
+  consoleLogger.info('Image metadata generation is currently disabled');
+  return null;
+
+  // When enabled, uncomment this:
+  // return analyzeImages(
+  //   imageFiles,
+  //   "Analyze these images and provide: 1) A detailed description of what you see, and 2) A creative, engaging title. Format your response with 'Title: [your title]' on the first line, followed by the description.",
+  //   "gpt-4.1-mini",
+  //   apiKey
+  // );
+};
+
+// Audio transcription function using OpenRouter Multimodal Chat Completions
+export const transcribeAudio = async (
+  audioFile: File,
+  model: string = "google/gemini-2.5-flash",
+  apiKey?: string
+): Promise<string | null> => {
+  try {
+    consoleLogger.info('Starting audio transcription via OpenRouter', {
+      fileName: audioFile.name,
+      fileSize: audioFile.size,
+      fileType: audioFile.type,
+      model
+    });
+
+    // Get auth token for proxy
+    let token = apiKey;
+    if (!token || token.startsWith('sk-')) {
+      token = (await getAuthToken()) || undefined;
+    }
+
+    if (!token) {
+      consoleLogger.error('No authentication token found. Please sign in.');
+      return null;
+    }
+
+    // Convert audio file to base64
+    const base64Audio = await encodeWav(audioFile);
+
+    const baseUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
+    
+    // Use the OpenRouter proxy endpoint
+    const response = await fetch(`${baseUrl}/api/openrouter/v1/chat/completions`, {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model: model,
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "Please transcribe this audio file exactly as spoken, without any additional commentary.",
+              },
+              {
+                type: "input_audio",
+                input_audio: {
+                  data: base64Audio,
+                  format: "wav",
+                },
+              },
+            ],
+          },
+        ],
+      }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(`OpenRouter API error: ${data.error?.message || response.statusText}`);
+    }
+
+    const transcribedText = data.choices?.[0]?.message?.content;
+
+    if (!transcribedText) {
+      consoleLogger.warn('No text returned from audio transcription');
+      return null;
+    }
+
+    consoleLogger.info('Successfully transcribed audio', {
+      textLength: transcribedText.length,
+      textPreview: transcribedText.substring(0, 100) + '...',
+      model
+    });
+
+    return transcribedText;
+  } catch (error: any) {
+    consoleLogger.error('OpenRouter audio transcription failed:', {
+      error: error.message,
+      fileName: audioFile.name,
+      model
+    });
+    throw error;
+  }
+};
+
+// Optimize prompt for image generation
+export const optimizePrompt = async (
+  userPrompt: string,
+  model: string = "gpt-5",
+  apiKey?: string
+): Promise<string | null> => {
+  return withOpenAI(async (client) => {
+    try {
+      consoleLogger.info('Starting prompt optimization', {
+        originalPromptLength: userPrompt.length,
+        originalPromptPreview: userPrompt.substring(0, 100) + '...',
+        model
+      });
+
+      const systemPrompt = `You are an expert at writing prompts for AI image generation models. Your task is to optimize user prompts to produce better, more detailed, and more visually striking images.
+
+Guidelines for optimization:
+- Add specific visual details (lighting, composition, style, mood, colors)
+- Include technical photography/art terms when relevant (e.g., "bokeh", "golden hour", "rule of thirds")
+- Specify artistic styles if not mentioned (e.g., "cinematic", "photorealistic", "digital art")
+- Add quality enhancers (e.g., "highly detailed", "4k", "masterpiece")
+- Keep the core intent of the user's prompt
+- Make it concise but descriptive (aim for 1-3 sentences)
+- Return ONLY the optimized prompt, no explanations or additional text
+
+Example:
+User: "a cat sitting on a chair"
+Optimized: "A fluffy tabby cat sitting gracefully on a vintage wooden chair, soft natural lighting from a nearby window creating gentle shadows, photorealistic style, highly detailed fur texture, warm color palette, shallow depth of field"`;
+
+      const response = await client.chat.completions.create({
+        model,
+        messages: [
+          { role: "system", content: systemPrompt },
+          { role: "user", content: userPrompt }
+        ]
+      });
+
+      const optimizedPrompt = response.choices[0]?.message?.content?.trim();
+
+      if (!optimizedPrompt) {
+        consoleLogger.warn('No optimized prompt returned from OpenAI');
+        return null;
+      }
+
+      consoleLogger.info('Successfully optimized prompt', {
+        originalLength: userPrompt.length,
+        optimizedLength: optimizedPrompt.length,
+        optimizedPreview: optimizedPrompt.substring(0, 100) + '...',
+        model
+      });
+
+      return optimizedPrompt;
+    } catch (error: any) {
+      consoleLogger.error('OpenAI prompt optimization failed:', {
+        error: error.message,
+        promptPreview: userPrompt.substring(0, 100) + '...',
+        model
+      });
+      throw error;
+    }
+  }, null, apiKey);
+};
+
+// Generate HTML snippet with Tailwind CSS
+export const generateHtmlSnippet = async (
+  userPrompt: string,
+  contextVariables: Record<string, any> = {},
+  pageContext: any = null,
+  apiKey?: string
+): Promise<string | null> => {
+  return withOpenAI(async (client) => {
+    try {
+      consoleLogger.info('Starting HTML snippet generation', {
+        promptLength: userPrompt.length,
+        hasContext: Object.keys(contextVariables).length > 0,
+        hasPageContext: !!pageContext
+      });
+
+      const variableList = Object.keys(contextVariables).map(k => `\${${k}}`).join(', ');
+
+      const contextPrompt = Object.keys(contextVariables).length > 0
+        ? `\nAvailable Variables: You can use these variables in your HTML: ${variableList}. Use the syntax \${variableName} to insert them.`
+        : '';
+
+      const pageContextPrompt = pageContext
+        ? `\nPage Context (JSON): Use this to understand the surrounding page structure/data if relevant:\n\`\`\`json\n${JSON.stringify(pageContext, null, 2).slice(0, 5000)}\n\`\`\``
+        : '';
+
+      const systemPrompt = `You are an expert Tailwind CSS and HTML developer.
+Your task is to generate or modify a standalone HTML snippet based on the user's request.
+
+Rules:
+1. Return ONLY the HTML code. Do NOT wrap it in markdown code blocks (\`\`\`html ... \`\`\`\`).
+2. Do NOT include any explanations, comments, or conversational text.
+3. Use Tailwind CSS classes for styling.
+4. The HTML should be a document fragment (e.g., a <div>, <section>, or <article>), NOT a full <html> document.
+5. Make the design modern, clean, and responsive.${contextPrompt}${pageContextPrompt}
+6. If icons are needed, use valid inline <svg> elements with Tailwind classes. Do NOT use React component names (like <LucideIcon />) as they will not render.
+7. Ensure strict accessibility compliance (aria-labels, roles).`;
+
+      console.log('System prompt:', systemPrompt);
+      console.log('User prompt:', userPrompt);
+
+      const response = await client.chat.completions.create({
+        model: "gpt-4o", // Stronger model for code generation
+        messages: [
+          { role: "system", content: systemPrompt },
+          { role: "user", content: userPrompt }
+        ]
+      });
+
+
+
+      let content = response.choices[0]?.message?.content?.trim();
+
+      if (!content) {
+        consoleLogger.warn('No HTML returned from OpenAI');
+        return null;
+      }
+
+      // Cleanup if the model ignored the "no markdown" rule
+      content = content.replace(/^```html\s*/i, '').replace(/^```\s*/, '').replace(/\s*```$/, '');
+
+      return content;
+    } catch (error: any) {
+      consoleLogger.error('OpenAI HTML generation failed:', error);
+      throw error;
+    }
+  }, null, apiKey);
+};
+
+/**
+ * Helper function to create Zod-validated OpenAI tools
+ * Based on ref/tools/index.ts
+ */
+export const zodFunction = <T extends object>({
+  function: fn,
+  schema,
+  description = '',
+  name,
+}: {
+  function: (args: T) => Promise<object>;
+  schema: z.ZodSchema<T>;
+  description?: string;
+  name?: string;
+}): RunnableToolFunctionWithParse<T> => {
+  return {
+    type: 'function',
+    function: {
+      function: fn,
+      name: name ?? fn.name,
+      description: description,
+      parameters: zodToJsonSchema(schema, { target: 'openAi' }) as JSONSchema,
+      parse(input: string): T {
+        const obj = JSON.parse(input);
+        return schema.parse(obj);
+      },
+    },
+  };
+};
+
+// ====================================================================
+// TOOL DEFINITIONS
+// ====================================================================
+
+/**
+ * Tool: Generate Image
+ * Creates a new image from a text prompt using the specified AI model
+ */
+export const generateImageTool = (apiKey?: string) =>
+  zodFunction({
+    name: 'generate_image',
+    description: 'Generate one or more images from a text prompt using AI image generation models. Supports multiple providers (Google, Replicate, Bria, AIML API). Can generate multiple images if count is specified.',
+    schema: z.object({
+      prompt: z.string().describe('The text prompt describing the image to generate'),
+      count: z.number().optional().describe('Number of images to generate (1-4). Default: 1'),
+      model: z.string().optional().describe('Model string in format "provider/model-name". Default: "google/gemini-3-pro-image-preview"'),
+    }),
+    function: async (args) => {
+      try {
+        const count = Math.min(Math.max(args.count || 1, 1), 4); // Clamp between 1-4
+        consoleLogger.info('Tool::GenerateImage called', {
+          prompt: args.prompt,
+          model: args.model,
+          count
+        });
+
+        // Image Router will fetch the appropriate provider API key from user profile
+        // Don't pass OpenAI API key to image generation
+        const results = [];
+
+        // Generate multiple images if count > 1
+        for (let i = 0; i < count; i++) {
+          const result = await createImageRouter(
+            args.prompt,
+            args.model || 'google/gemini-3-pro-image-preview',
+            undefined // Let Image Router fetch the correct provider API key
+          );
+
+          if (!result) {
+            consoleLogger.warn(`Image ${i + 1}/${count} generation failed`);
+            continue;
+          }
+
+          // Convert ArrayBuffer to blob URL
+          const uint8Array = new Uint8Array(result.imageData);
+          const blob = new Blob([uint8Array], { type: 'image/png' });
+          const imageUrl = URL.createObjectURL(blob);
+
+          results.push({
+            imageUrl,
+            text: result.text,
+          });
+        }
+
+        if (results.length === 0) {
+          return { success: false, error: 'Failed to generate any images' };
+        }
+
+        return {
+          success: true,
+          images: results,
+          count: results.length,
+          message: `${results.length} image${results.length > 1 ? 's' : ''} generated successfully`,
+        };
+      } catch (error: any) {
+        consoleLogger.error('Tool::GenerateImage failed', error);
+        return { success: false, error: error.message };
+      }
+    },
+  });
+
+/**
+ * Tool: Transcribe Audio
+ * Converts speech/audio to text using OpenAI Whisper
+ */
+export const transcribeAudioTool = (apiKey?: string) =>
+  zodFunction({
+    name: 'transcribe_audio',
+    description: 'Transcribe audio or speech to text using OpenAI Whisper model. Accepts audio files in various formats.',
+    schema: z.object({
+      audioFile: z.any().describe('The audio file to transcribe (File object)'),
+      model: z.string().optional().describe('Whisper model to use. Default: "whisper-1"'),
+    }),
+    function: async (args) => {
+      try {
+        consoleLogger.info('Tool::TranscribeAudio called', { model: args.model });
+
+        const text = await transcribeAudio(args.audioFile, args.model, apiKey);
+
+        if (!text) {
+          return { success: false, error: 'Failed to transcribe audio' };
+        }
+
+        return {
+          success: true,
+          text,
+          message: 'Audio transcribed successfully',
+        };
+      } catch (error: any) {
+        consoleLogger.error('Tool::TranscribeAudio failed', error);
+        return { success: false, error: error.message };
+      }
+    },
+  });
+
+/**
+ * Tool: Optimize Prompt
+ * Enhances a user's prompt to produce better image generation results
+ */
+export const optimizePromptTool = (apiKey?: string) =>
+  zodFunction({
+    name: 'optimize_prompt',
+    description: 'Optimize and enhance a text prompt for better image generation results. Adds specific visual details, technical terms, and quality enhancers.',
+    schema: z.object({
+      prompt: z.string().describe('The original user prompt to optimize'),
+      model: z.string().optional().describe('GPT model to use for optimization. Default: "gpt-4o-mini"'),
+    }),
+    function: async (args) => {
+      try {
+        consoleLogger.info('Tool::OptimizePrompt called', { promptLength: args.prompt.length });
+
+        const optimized = await optimizePrompt(args.prompt, args.model, apiKey);
+
+        if (!optimized) {
+          return { success: false, error: 'Failed to optimize prompt' };
+        }
+
+        return {
+          success: true,
+          originalPrompt: args.prompt,
+          optimizedPrompt: optimized,
+          message: 'Prompt optimized successfully',
+        };
+      } catch (error: any) {
+        consoleLogger.error('Tool::OptimizePrompt failed', error);
+        return { success: false, error: error.message };
+      }
+    },
+  });
+
+/**
+ * Tool: Generate Text
+ * Generates text completion using GPT models
+ */
+export const generateTextTool = (apiKey?: string) =>
+  zodFunction({
+    name: 'generate_text',
+    description: 'Generate text completion using OpenAI GPT models. Useful for creating descriptions, titles, or any text content.',
+    schema: z.object({
+      input: z.string().describe('The input text or prompt'),
+      model: z.string().optional().describe('GPT model to use. Default: "gpt-4o-mini"'),
+    }),
+    function: async (args) => {
+      try {
+        consoleLogger.info('Tool::GenerateText called', { inputLength: args.input.length });
+
+        const text = await generateText(args.input, args.model, apiKey);
+
+        if (!text) {
+          return { success: false, error: 'Failed to generate text' };
+        }
+
+        return {
+          success: true,
+          text,
+          message: 'Text generated successfully',
+        };
+      } catch (error: any) {
+        consoleLogger.error('Tool::GenerateText failed', error);
+        return { success: false, error: error.message };
+      }
+    },
+  });
+
+/**
+ * Tool: Generate Image Metadata
+ * Generates title and description for an image based on the prompt or image content
+ */
+export const generateImageMetadataTool = (apiKey?: string) =>
+  zodFunction({
+    name: 'generate_image_metadata',
+    description: 'Generate a creative title and detailed description for an image based on the prompt or image concept. Returns both title and description.',
+    schema: z.object({
+      prompt: z.string().describe('The image prompt or concept to generate metadata for'),
+      style: z.string().optional().describe('Optional style hint for the metadata (e.g., "creative", "professional", "poetic")'),
+    }),
+    function: async (args) => {
+      try {
+        consoleLogger.info('Tool::GenerateImageMetadata called', { promptLength: args.prompt.length });
+
+        const style = args.style || 'creative';
+        const metadataPrompt = `Based on this image concept: "${args.prompt}"
+
+Generate a ${style} title and description for this image.
+
+Requirements:
+- Title: Short, catchy, and descriptive (5-8 words max)
+- Description: Engaging description that captures the essence (2-3 sentences)
+
+Format your response EXACTLY as:
+Title: [your title here]
+Description: [your description here]`;
+
+        const response = await generateText(metadataPrompt, 'gpt-4o-mini', apiKey);
+
+        if (!response) {
+          return { success: false, error: 'Failed to generate metadata' };
+        }
+
+        // Parse title and description from response
+        const titleMatch = response.match(/Title:\s*(.+?)(?:\n|$)/i);
+        const descMatch = response.match(/Description:\s*(.+?)$/is);
+
+        const title = titleMatch ? titleMatch[1].trim() : `Generated: ${args.prompt.substring(0, 50)}`;
+        const description = descMatch ? descMatch[1].trim() : args.prompt;
+
+        consoleLogger.info('Successfully generated image metadata', {
+          titleLength: title.length,
+          descriptionLength: description.length,
+        });
+
+        return {
+          success: true,
+          title,
+          description,
+          message: 'Image metadata generated successfully',
+        };
+      } catch (error: any) {
+        consoleLogger.error('Tool::GenerateImageMetadata failed', error);
+        return { success: false, error: error.message };
+      }
+    },
+  });
+
+/**
+ * Tool: Publish Image to Gallery
+ * Publishes a generated image to the user's gallery with title and description
+ */
+export const publishImageTool = () =>
+  zodFunction({
+    name: 'publish_image',
+    description: 'Publish a generated image to the gallery with title, description, and optional tags. This saves the image permanently to the user\'s account.',
+    schema: z.object({
+      imageUrl: z.string().describe('The URL or blob URL of the image to publish'),
+      title: z.string().describe('The title for the image'),
+      description: z.string().optional().describe('Optional description for the image'),
+      tags: z.array(z.string()).optional().describe('Optional array of tags for the image'),
+      prompt: z.string().optional().describe('The prompt used to generate the image'),
+    }),
+    function: async (args) => {
+      try {
+        consoleLogger.info('Tool::PublishImage called', { title: args.title });
+
+        // Note: This is a placeholder. The actual publishing logic needs to be
+        // implemented in the component that calls runTools, as it requires
+        // access to Supabase client, user context, and File handling.
+        // The tool returns the data needed for publishing.
+
+        return {
+          success: true,
+          publishData: {
+            imageUrl: args.imageUrl,
+            title: args.title,
+            description: args.description || '',
+            tags: args.tags || [],
+            prompt: args.prompt || '',
+          },
+          message: 'Image ready to publish. Please confirm publication in the UI.',
+          requiresConfirmation: true,
+        };
+      } catch (error: any) {
+        consoleLogger.error('Tool::PublishImage failed', error);
+        return { success: false, error: error.message };
+      }
+    },
+  });
+
+// ====================================================================
+// TOOL PRESETS
+// ====================================================================
+
+export interface ToolPreset {
+  name: string;
+  description: string;
+  model: string;
+  tools: RunnableToolFunctionWithParse<any>[];
+  systemPrompt?: string;
+}
+
+
+/**
+ * Create a simple custom preset using the preset type mapping
+ */
+export const createSimplePreset = (
+  type: PresetType,
+  systemPrompt: string,
+  apiKey?: string
+): ToolPreset => ({
+  name: `Custom ${type}`,
+  description: type,
+  model: 'openai/gpt-5.2',
+  tools: PRESET_TOOLS[type](apiKey),
+  systemPrompt,
+});
+
+/**
+ * Create tool presets with API key
+ */
+export const createToolPresets = (apiKey?: string, userId?: string, addLog?: LogFunction): Record<string, ToolPreset> => ({
+  'image-wizard': {
+    name: 'Image Generation Wizard',
+    description: 'Optimize → generate → metadata',
+    model: 'openai/gpt-5.2',
+    tools: PRESET_TOOLS['optimize-generate'](apiKey),
+    systemPrompt: `You are an AI image generation assistant. Your role is to:
+1. Optimize prompts for better results
+2. Generate images using optimized prompts
+3. Create metadata (title + description)
+
+Execute these steps automatically. Do NOT publish - user handles publishing.`,
+  },
+
+  'speech-to-image': {
+    name: 'Speech to Image',
+    description: 'Complete workflow: transcribe audio → optimize prompt → generate image',
+    model: 'openai/gpt-5.2',
+    tools: [
+      transcribeAudioTool(apiKey),
+      optimizePromptTool(apiKey),
+      generateImageTool(apiKey),
+    ],
+    systemPrompt: `You are an AI assistant that converts speech to images. Your workflow:
+1. Transcribe audio input to text (using transcribe_audio tool)
+2. Optimize the transcribed text as an image prompt (using optimize_prompt tool)
+3. Generate an image from the optimized prompt (using generate_image tool)
+4. Provide clear feedback at each step
+
+Execute all steps automatically when given audio input.`,
+  },
+
+  'text-to-image': {
+    name: 'Text to Image',
+    description: 'Optimize → generate → metadata',
+    model: 'openai/gpt-5.2',
+    tools: PRESET_TOOLS['optimize-generate'](apiKey),
+    systemPrompt: `You are a text-to-image generation assistant. 
+- Optimize prompts and generate images
+- Create metadata automatically
+- Do NOT publish - user handles that`,
+  },
+
+
+  'smart-generation': {
+    name: 'Smart Generation',
+    description: 'Optimize → generate → metadata (no publish)',
+    model: 'openai/gpt-5.2',
+    tools: PRESET_TOOLS['optimize-generate'](apiKey),
+    systemPrompt: `You are an intelligent image generation assistant.
+
+Workflow: Optimize prompt → Generate image → Create metadata
+
+Execute automatically. Do NOT publish - user handles publishing.
+Keep responses brief.`,
+  },
+
+  'auto-publish': {
+    name: 'Auto-Publish Workflow',
+    description: 'Optimize → generate → metadata → publish (full automation)',
+    model: 'openai/gpt-5.2',
+    tools: PRESET_TOOLS['generate-publish'](apiKey),
+    systemPrompt: `You are an auto-publishing assistant.
+
+Workflow: Optimize → Generate → Metadata → Publish
+
+Execute all steps automatically. Always include metadata.`,
+  },
+
+  'metadata-generator': {
+    name: 'Metadata Generator',
+    description: 'Generate title and description for image concepts or existing images',
+    model: 'openai/gpt-5.2',
+    tools: [
+      generateImageMetadataTool(apiKey),
+    ],
+    systemPrompt: `You are a creative metadata generator for images.
+Your job is to create engaging titles and descriptions that capture the essence of the image.
+
+For titles: Make them short, catchy, and memorable (5-8 words)
+For descriptions: Create 2-3 sentences that are engaging and descriptive
+
+Be creative and match the style of the image concept.`,
+  },
+
+  'metadata-only': {
+    name: 'Metadata Only',
+    description: 'Only generate title and description',
+    model: 'openai/gpt-5.2',
+    tools: PRESET_TOOLS['metadata-only'](apiKey),
+    systemPrompt: `Generate title and description for the prompt.
+Title: 5-8 words. Description: 2-3 sentences.`,
+  },
+  'page-generator': {
+    name: 'Page Generator',
+    description: 'Generate a complete page with text, images, and metadata from a single voice command.',
+    model: 'openai/gpt-5.2',
+    tools: [
+      generateTextWithImagesTool(userId || 'anonymous-user', addLog),
+      createPageTool(userId || 'anonymous-user', addLog),
+    ],
+    systemPrompt: `You are an AI assistant that creates well-structured pages with text and images. Your only task is to use the 'generate_text_with_images' tool to create rich, comprehensive markdown content based on the user's request. Include at least one relevant image unless otherwise specified.`,
+  },
+  'page-generator-text-only': {
+    name: 'Page Generator (Text Only)',
+    description: 'Generate a complete page with text from a single command, without images.',
+    model: 'openai/gpt-5.2',
+    tools: [
+      createPageTool(userId || 'anonymous-user', addLog),
+    ],
+    systemPrompt: `You are an AI assistant that writes well-structured, comprehensive markdown documents. Based on the user's request, generate the full text content for a page, then call the 'create_page' tool with that content and a suitable title and tags. Your final response must be only the 'create_page' tool call.`,
+  },
+  'layout-generator': {
+    name: 'Layout Generator',
+    description: 'Generate widget layout fragments (containers + widgets) from a text description.',
+    model: 'openai/gpt-5.2',
+    tools: [
+      createWidgetsTool(addLog),
+    ],
+    systemPrompt: `You are a layout generation assistant for a widget-based page editor. When the user describes a layout, call the create_widgets tool with the correct containers and widgets. Follow the widget schema exactly. Use appropriate columns, widget types, and props. Be creative with HTML widgets when no specific widget type fits. Always return valid JSON.`,
+  }
+});
+
+// ====================================================================
+// RUN TOOLS - Main Orchestration Function
+// ====================================================================
+
+export interface RunToolsOptions {
+  prompt: string;
+  preset?: string | ToolPreset;
+  apiKey?: string;
+  onMessage?: (message: any) => void;
+  onToolCall?: (toolCall: any) => void;
+  onContent?: (content: string) => void;
+  model?: string;
+  /** Provider name (e.g. 'openai', 'openrouter'). Determines which proxy base URL to use. */
+  provider?: string;
+  maxIterations?: number;
+  userId?: string;
+  images?: string[];
+  toolsEnabled?: boolean;
+  webSearchEnabled?: boolean;
+  pageToolsEnabled?: boolean;
+  imageToolsEnabled?: boolean;
+  vfsToolsEnabled?: boolean;
+  addLog?: LogFunction;
+}
+
+export interface RunToolsResult {
+  success: boolean;
+  content?: string;
+  messages: any[];
+  toolCalls: any[];
+  error?: string;
+}
+
+/**
+ * Run OpenAI with tools - main orchestration function
+ * Based on ref/run-tools.ts
+ * 
+ * @example
+ * // Use preset
+ * const result = await runTools({
+ *   prompt: "Create a beautiful sunset over mountains",
+ *   preset: "image-wizard"
+ * });
+ * 
+ * @example
+ * // Custom tools
+ * const result = await runTools({
+ *   prompt: "Generate an image of a cat",
+ *   preset: {
+ *     name: "custom",
+ *     model: "gpt-4o-mini",
+ *     tools: [generateImageTool()],
+ *     systemPrompt: "You are a helpful assistant"
+ *   }
+ * });
+ */
+export const runTools = async (options: RunToolsOptions): Promise<RunToolsResult> => {
+  const {
+    prompt,
+    preset,
+    apiKey,
+    onMessage,
+    onToolCall,
+    onContent,
+    maxIterations = 10,
+    userId,
+    images,
+    addLog,
+  } = options;
+
+  const logger = addLog ? {
+    debug: (m: string, d?: any) => addLog('debug', `[OPENAI] ${m}`, d),
+    info: (m: string, d?: any) => addLog('info', `[OPENAI] ${m}`, d),
+    warn: (m: string, d?: any) => addLog('warn', `[OPENAI] ${m}`, d),
+    error: (m: string, d?: any) => addLog('error', `[OPENAI] ${m}`, d),
+  } : consoleLogger;
+
+
+  const messages: any[] = [];
+  const toolCalls: any[] = [];
+
+  try {
+    // Get preset configuration (needed for model fallback)
+    const presets = createToolPresets(apiKey, userId, addLog);
+    const presetConfig: ToolPreset =
+      typeof preset === 'string'
+        ? presets[preset] || { ...presets['image-wizard'] }
+        : preset ? { ...preset } : { ...presets['image-wizard'] };
+    // Clone tools array to avoid modifying shared preset object
+    presetConfig.tools = [...presetConfig.tools];
+
+    // Determine effective provider — auto-detect OpenRouter from model format (contains '/')
+    const effectiveModel = options.model || presetConfig.model;
+    const effectiveProvider = options.provider
+      || (effectiveModel.includes('/') ? 'openrouter' : 'openai');
+
+    // Create client — route through the correct proxy based on provider
+    let client: OpenAI | null = null;
+
+    if (effectiveProvider === 'openrouter') {
+      // OpenRouter models (e.g. 'google/gemini-2.5-pro') need the OpenRouter proxy
+      let token: string | undefined = undefined;
+      try {
+        const { data } = await supabase.auth.getSession();
+        token = data?.session?.access_token;
+      } catch { }
+      if (!token) {
+        return {
+          success: false,
+          messages,
+          toolCalls,
+          error: 'No authentication token available for OpenRouter',
+        };
+      }
+      client = new OpenAI({
+        apiKey: token,
+        baseURL: `${import.meta.env.VITE_SERVER_IMAGE_API_URL}/api/openrouter/v1`,
+        dangerouslyAllowBrowser: true,
+      });
+    } else {
+      // Default: OpenAI proxy
+      client = await createOpenAIClient(apiKey);
+    }
+
+    if (!client) {
+      return {
+        success: false,
+        messages,
+        toolCalls,
+        error: 'Failed to create AI client - no API key available',
+      };
+    }
+
+
+
+    // Inject extra tools based on options
+    if (options.webSearchEnabled) {
+      const { webSearchTool, markdownScraperTool } = await import('@/modules/ai/searchTools');
+      presetConfig.tools.push(webSearchTool(logger.info));
+      presetConfig.tools.push(markdownScraperTool(logger.info));
+      logger.info('Injected Web Search and Markdown Scraper tools');
+    }
+    
+    // Determine effective provider — auto-detect OpenRouter from model format (contains '/')
+    // Note: If we use openrouter, we might need to add special tools, but for function calling we just pass them.
+
+    logger.info('Using preset', {
+      name: presetConfig.name,
+      model: presetConfig.model,
+      toolCount: presetConfig.tools.length,
+      toolsEnabled: options.toolsEnabled,
+      webSearchEnabled: options.webSearchEnabled,
+      pageToolsEnabled: options.pageToolsEnabled,
+      vfsToolsEnabled: options.vfsToolsEnabled
+    });
+
+    // Build messages
+    const initialMessages: OpenAI.Chat.ChatCompletionMessageParam[] = [];
+
+    if (presetConfig.systemPrompt) {
+      initialMessages.push({
+        role: 'system',
+        content: presetConfig.systemPrompt,
+      });
+    }
+
+    // Handle multimodal input if images are provided
+    if (images && images.length > 0) {
+      logger.info('Adding images to request', { count: images.length });
+
+      const content: any[] = [
+        { type: "text", text: prompt }
+      ];
+
+      images.forEach(url => {
+        content.push({
+          type: "image_url",
+          image_url: {
+            url,
+            detail: "auto"
+          }
+        });
+      });
+
+      initialMessages.push({
+        role: 'user',
+        content: content,
+      });
+    } else {
+      initialMessages.push({
+        role: 'user',
+        content: prompt,
+      });
+    }
+
+    // Run tools
+    const runner = client.chat.completions
+      .runTools({
+        model: options.model || presetConfig.model,
+        messages: initialMessages,
+        tools: presetConfig.tools
+      });
+
+    logger.info('RunTools started', {
+      prompt: prompt.substring(0, 100),
+      preset: typeof preset === 'string' ? preset : 'custom',
+      model: options.model || presetConfig.model,
+      toolCount: presetConfig.tools.length,
+      initialMessages
+    });
+
+    await runner.done();
+
+    const finalMessages = runner.messages;
+    const finalContent = await runner.finalContent();
+
+    // Manually reconstruct tool calls with their output from the message history
+    // This is more reliable than depending on the runner's final state.
+    const completedToolCalls = finalMessages
+      .filter((msg): msg is OpenAI.Chat.Completions.ChatCompletionMessage & { tool_calls: OpenAI.Chat.Completions.ChatCompletionMessageToolCall[] } => msg.role === 'assistant' && !!msg.tool_calls)
+      .flatMap(msg => msg.tool_calls);
+
+    for (const toolCall of completedToolCalls) {
+      const toolOutputMessage = finalMessages.find(
+        (msg): msg is OpenAI.Chat.Completions.ChatCompletionMessage => msg.role === 'tool' && msg.tool_call_id === toolCall.id
+      );
+      if (toolOutputMessage && 'function' in toolCall && toolCall.function) {
+        (toolCall.function as any).output = toolOutputMessage.content;
+      }
+    }
+
+    logger.info('RunTools completed', {
+      messageCount: finalMessages.length,
+      toolCallCount: completedToolCalls.length,
+      completedToolCalls,
+      finalMessages: finalMessages,
+      finalContent: finalContent,
+    });
+
+    // The SDK should handle parsing, but as a safeguard, parse stringified outputs.
+    for (const toolCall of completedToolCalls) {
+      if ('function' in toolCall && toolCall.function && 'output' in toolCall.function && typeof toolCall.function.output === 'string') {
+        try {
+          // Attempt to parse the output, but don't fail if it's just a raw string.
+          const parsedOutput = JSON.parse(toolCall.function.output);
+          (toolCall.function as any).output = parsedOutput;
+        } catch (e) {
+          logger.debug('Tool output was a non-JSON string.', { output: toolCall.function.output });
+        }
+      }
+    }
+
+    return {
+      success: true,
+      content: finalContent ?? undefined,
+      messages: finalMessages,
+      toolCalls: completedToolCalls,
+    };
+  } catch (error: any) {
+
+    logger.error('RunTools failed', {
+      error: error.message,
+      prompt: prompt.substring(0, 100),
+    });
+
+    return {
+      success: false,
+      messages,
+      toolCalls,
+      error: error.message || 'Unknown error occurred',
+    };
+  }
+};
diff --git a/packages/ui/src/lib/registerWidgets.ts b/packages/ui/src/lib/registerWidgets.ts
index 9b2c59c9..0e3d1499 100644
--- a/packages/ui/src/lib/registerWidgets.ts
+++ b/packages/ui/src/lib/registerWidgets.ts
@@ -1,1287 +1,1287 @@
-import { lazy } from 'react';
-import { widgetRegistry } from './widgetRegistry';
-import { translate } from '@/i18n';
-import {
-  Monitor,
-  Layout,
-  FileText,
-  Code,
-  Video,
-  MessageSquare,
-} from 'lucide-react';
-import type {
-  HtmlWidgetProps,
-  PhotoGridProps,
-  PhotoCardWidgetProps,
-  PhotoGridWidgetProps,
-  TabsWidgetProps,
-  GalleryWidgetProps,
-  PageCardWidgetProps,
-  MarkdownTextWidgetProps,
-  LayoutContainerWidgetProps,
-  FileBrowserWidgetProps,
-} from '@polymech/shared';
-
-import PageCardWidget from '@/modules/pages/PageCardWidget';
-
-import PhotoGrid from '@/components/PhotoGrid';
-import PhotoGridWidget from '@/components/widgets/PhotoGridWidget';
-import PhotoCardWidget from '@/components/widgets/PhotoCardWidget';
-import LayoutContainerWidget from '@/components/widgets/LayoutContainerWidget';
-import MarkdownTextWidget from '@/components/widgets/MarkdownTextWidget';
-import GalleryWidget from '@/components/widgets/GalleryWidget';
-import TabsWidget from '@/components/widgets/TabsWidget';
-import { HtmlWidget } from '@/components/widgets/HtmlWidget';
-import HomeWidget from '@/components/widgets/HomeWidget';
-import VideoBannerWidget from '@/components/widgets/VideoBannerWidget';
-import CategoryFeedWidget from '@/components/widgets/CategoryFeedWidget';
-import SupportChatWidget from '@/components/widgets/SupportChatWidget';
-import MenuWidget from '@/components/widgets/MenuWidget';
-
-const FileBrowserWidget = lazy(() => import('@/modules/storage/FileBrowserWidget').then(m => ({ default: m.FileBrowserWidget })));
-
-export function registerAllWidgets() {
-  // Clear existing registrations (useful for HMR)
-  widgetRegistry.clear();
-
-  // HTML Widget
-  widgetRegistry.register<HtmlWidgetProps>({
-    component: HtmlWidget,
-    metadata: {
-      id: 'html-widget',
-      name: translate('HTML Content'),
-      category: 'display',
-      description: translate('Render HTML content with variable substitution'),
-      icon: Code,
-      defaultProps: {
-        content: '<div>\n  <h3 class="text-xl font-bold">Hello ${name}</h3>\n  <p>Welcome to our custom widget!</p>\n</div>',
-        variables: '{\n  "name": "World"\n}',
-        className: ''
-      },
-      configSchema: {
-        content: {
-          type: 'markdown', // Using markdown editor for larger text area
-          label: 'HTML Content',
-          description: 'Enter your HTML code here. Use ${varName} for substitutions.',
-          default: '<div>Hello World</div>'
-        },
-        variables: {
-          type: 'markdown', // Using markdown/textarea for JSON input for now
-          label: 'Variables (JSON)',
-          description: 'JSON object defining variables for substitution.',
-          default: '{}'
-        },
-        className: {
-          type: 'classname',
-          label: 'CSS Class',
-          description: 'Tailwind classes for the container',
-          default: ''
-        }
-      },
-      minSize: { width: 300, height: 100 },
-      resizable: true,
-      tags: ['html', 'code', 'custom', 'embed']
-    }
-  });
-
-  // Photo widgets
-  widgetRegistry.register<PhotoGridProps>({
-    component: PhotoGrid,
-    metadata: {
-      id: 'photo-grid',
-      name: translate('Photo Grid'),
-      category: 'custom',
-      description: translate('Display photos in a responsive grid layout'),
-      icon: Monitor,
-      defaultProps: {
-        variables: {}
-      },
-      // Note: PhotoGrid fetches data internally based on navigation context
-      // For configurable picture selection, use 'photo-grid-widget' instead
-      minSize: { width: 300, height: 200 },
-      resizable: true,
-      tags: ['photo', 'grid', 'gallery']
-    }
-  });
-
-  widgetRegistry.register<PhotoCardWidgetProps>({
-    component: PhotoCardWidget,
-    metadata: {
-      id: 'photo-card',
-      name: translate('Photo Card'),
-      category: 'custom',
-      description: translate('Display a single photo card with details'),
-      icon: Monitor,
-      defaultProps: {
-        pictureId: null,
-        postId: null,
-        showHeader: true,
-        showFooter: true,
-        showAuthor: true,
-        showActions: true,
-        showTitle: true,
-        showDescription: true,
-        contentDisplay: 'below',
-        imageFit: 'contain',
-        variables: {}
-      },
-      configSchema: {
-        pictureId: {
-          type: 'imagePicker',
-          label: 'Select Picture',
-          description: 'Choose a picture from your published images',
-          default: null
-        },
-        showHeader: {
-          type: 'boolean',
-          label: 'Show Header',
-          description: 'Show header with author information',
-          default: true
-        },
-        showFooter: {
-          type: 'boolean',
-          label: 'Show Footer',
-          description: 'Show footer with likes, comments, and actions',
-          default: true
-        },
-        showAuthor: {
-          type: 'boolean',
-          label: 'Include Author',
-          description: 'Show author avatar and name',
-          default: true
-        },
-        showActions: {
-          type: 'boolean',
-          label: 'Include Actions',
-          description: 'Show like, comment, download buttons',
-          default: true
-        },
-        showTitle: {
-          type: 'boolean',
-          label: 'Show Title',
-          description: 'Display the picture title',
-          default: true
-        },
-        showDescription: {
-          type: 'boolean',
-          label: 'Show Description',
-          description: 'Display the picture description',
-          default: true
-        },
-        contentDisplay: {
-          type: 'select',
-          label: 'Content Display',
-          description: 'How to display title and description',
-          options: [
-            { value: 'below', label: 'Below Image' },
-            { value: 'overlay', label: 'Overlay on Hover' },
-            { value: 'overlay-always', label: 'Overlay (Always)' }
-          ],
-          default: 'below'
-        },
-        imageFit: {
-          type: 'select',
-          label: 'Image Fit',
-          description: 'How the image should fit within the card',
-          options: [
-            { value: 'contain', label: 'Contain' },
-            { value: 'cover', label: 'Cover' }
-          ],
-          default: 'contain'
-        }
-      },
-      minSize: { width: 300, height: 400 },
-      resizable: true,
-      tags: ['photo', 'card', 'display']
-    }
-  });
-
-  widgetRegistry.register<PhotoGridWidgetProps>({
-    component: PhotoGridWidget,
-    metadata: {
-      id: 'photo-grid-widget',
-      name: translate('Photo Grid Widget'),
-      category: 'custom',
-      description: translate('Display a customizable grid of selected photos'),
-      icon: Monitor,
-      defaultProps: {
-        pictureIds: [],
-        columns: 'auto',
-        variables: {}
-      },
-      configSchema: {
-        pictureIds: {
-          type: 'imagePicker', // We'll need to upgrade the config renderer to handle array/multi-select if not already supported, or rely on internal EditMode
-          label: 'Select Pictures',
-          description: 'Choose pictures to display in the grid',
-          default: []
-        },
-        columns: {
-          type: 'select',
-          label: 'Grid Columns',
-          description: 'Number of columns to display in grid view',
-          options: [
-            { value: 'auto', label: 'Auto (Responsive)' },
-            { value: '1', label: '1 Column' },
-            { value: '2', label: '2 Columns' },
-            { value: '3', label: '3 Columns' },
-            { value: '4', label: '4 Columns' },
-            { value: '5', label: '5 Columns' },
-            { value: '6', label: '6 Columns' }
-          ],
-          default: 'auto'
-        }
-      },
-      minSize: { width: 300, height: 300 },
-      resizable: true,
-      tags: ['photo', 'grid', 'gallery', 'custom']
-    }
-  });
-
-  widgetRegistry.register<TabsWidgetProps>({
-    component: TabsWidget,
-    metadata: {
-      id: 'tabs-widget',
-      name: translate('Tabs Widget'),
-      category: 'layout',
-      description: translate('Organize content into switchable tabs'),
-      icon: Layout,
-      defaultProps: {
-        tabs: [
-          {
-            id: 'tab-1',
-            label: 'Tab 1',
-            layoutId: 'tab-layout-1',
-            layoutData: {
-              id: 'tab-layout-1',
-              name: 'Tab 1',
-              containers: [],
-              createdAt: Date.now(),
-              updatedAt: Date.now(),
-              version: '1.0.0'
-            }
-          },
-          {
-            id: 'tab-2',
-            label: 'Tab 2',
-            layoutId: 'tab-layout-2',
-            layoutData: {
-              id: 'tab-layout-2',
-              name: 'Tab 2',
-              containers: [],
-              createdAt: Date.now(),
-              updatedAt: Date.now(),
-              version: '1.0.0'
-            }
-          }
-        ],
-        orientation: 'horizontal',
-        tabBarPosition: 'top',
-        tabBarClassName: '',
-        contentClassName: '',
-        variables: {}
-      } as unknown as TabsWidgetProps,
-
-      configSchema: {
-        tabs: {
-          type: 'tabs-editor',
-          label: 'Tabs',
-          description: 'Manage tabs and their order',
-          default: []
-        },
-        tabBarPosition: {
-          type: 'select',
-          label: 'Tab Bar Position',
-          description: 'Position of the tab bar',
-          options: [
-            { value: 'top', label: 'Top' },
-            { value: 'bottom', label: 'Bottom' },
-            { value: 'left', label: 'Left' },
-            { value: 'right', label: 'Right' }
-          ],
-          default: 'top'
-        },
-        tabBarClassName: {
-          type: 'classname',
-          label: 'Tab Bar Style',
-          description: 'Tailwind classes for the tab bar',
-          default: ''
-        },
-        contentClassName: {
-          type: 'classname',
-          label: 'Content Area Style',
-          description: 'Tailwind classes for the content area',
-          default: ''
-        }
-      },
-      minSize: { width: 400, height: 300 },
-      resizable: true,
-      tags: ['layout', 'tabs', 'container']
-    },
-    getNestedLayouts: (props: TabsWidgetProps) => {
-      if (!props.tabs || !Array.isArray(props.tabs)) return [];
-      return props.tabs.map((tab: unknown) => ({
-        id: (tab as any).id,
-        label: (tab as any).label,
-        layoutId: (tab as any).layoutId
-      }));
-    }
-  });
-
-  widgetRegistry.register<GalleryWidgetProps>({
-    component: GalleryWidget,
-    metadata: {
-      id: 'gallery-widget',
-      name: translate('Gallery'),
-      category: 'custom',
-      description: translate('Interactive gallery with main viewer and filmstrip navigation'),
-      icon: Monitor,
-      defaultProps: {
-        pictureIds: [],
-        thumbnailLayout: 'strip',
-        imageFit: 'contain',
-        thumbnailsPosition: 'bottom',
-        thumbnailsOrientation: 'horizontal',
-        zoomEnabled: false,
-        showVersions: false,
-        showTitle: false,
-        showDescription: false,
-        autoPlayVideos: false,
-        thumbnailsClassName: '',
-        variables: {}
-      },
-      configSchema: {
-        pictureIds: {
-          type: 'imagePicker',
-          label: 'Select Pictures',
-          description: 'Choose pictures to display in the gallery',
-          default: [],
-          multiSelect: true
-        },
-        showTitle: {
-          type: 'boolean',
-          label: 'Show Title',
-          description: 'Display the title of each picture below the main image',
-          default: false
-        },
-        showDescription: {
-          type: 'boolean',
-          label: 'Show Description',
-          description: 'Display the description of each picture below the main image',
-          default: false
-        },
-        thumbnailLayout: {
-          type: 'select',
-          label: 'Thumbnail Layout',
-          description: 'How to display thumbnails below the main image',
-          options: [
-            { value: 'strip', label: 'Horizontal Strip (scrollable)' },
-            { value: 'grid', label: 'Grid (multiple rows, fit width)' }
-          ],
-          default: 'strip'
-        },
-        imageFit: {
-          type: 'select',
-          label: 'Main Image Fit',
-          description: 'How the main image should fit within its container',
-          options: [
-            { value: 'contain', label: 'Contain (fit within bounds, show full image)' },
-            { value: 'cover', label: 'Cover (fill container, may crop image)' }
-          ],
-          default: 'cover'
-        },
-        thumbnailsPosition: {
-          type: 'select',
-          label: 'Thumbnails Position',
-          description: 'Where to place the thumbnails relative to the main image',
-          options: [
-            { value: 'bottom', label: 'Bottom' },
-            { value: 'top', label: 'Top' },
-            { value: 'left', label: 'Left' },
-            { value: 'right', label: 'Right' }
-          ],
-          default: 'bottom'
-        },
-        thumbnailsOrientation: {
-          type: 'select',
-          label: 'Thumbnails Orientation',
-          description: 'Direction of the thumbnail strip',
-          options: [
-            { value: 'horizontal', label: 'Horizontal' },
-            { value: 'vertical', label: 'Vertical' }
-          ],
-          default: 'horizontal'
-        },
-        zoomEnabled: {
-          type: 'boolean',
-          label: 'Enable Pan Zoom',
-          description: 'Enlarge image and pan on hover',
-          default: false
-        },
-        showVersions: {
-          type: 'boolean',
-          label: 'Show Versions',
-          description: 'Show version navigation in the filmstrip for pictures with versions',
-          default: false
-        },
-        autoPlayVideos: {
-          type: 'boolean',
-          label: 'Auto Play Videos',
-          description: 'Automatically play video items when selected (muted)',
-          default: false
-        },
-        thumbnailsClassName: {
-          type: 'classname',
-          label: 'Thumbnails CSS Class',
-          description: 'Additional CSS classes for the thumbnail strip container',
-          default: ''
-        }
-      },
-      minSize: { width: 600, height: 500 },
-      resizable: true,
-      tags: ['photo', 'gallery', 'viewer', 'slideshow']
-    }
-  });
-
-  widgetRegistry.register<PageCardWidgetProps>({
-    component: PageCardWidget,
-    metadata: {
-      id: 'page-card',
-      name: translate('Page Card'),
-      category: 'custom',
-      description: translate('Display a single page card with details'),
-      icon: FileText,
-      defaultProps: {
-        pageId: null,
-        showHeader: true,
-        showFooter: true,
-        showAuthor: true,
-        showActions: true,
-        contentDisplay: 'below',
-        variables: {}
-      },
-      configSchema: {
-        pageId: {
-          type: 'pagePicker',
-          label: 'Select Page',
-          description: 'Choose a page to display',
-          default: null
-        },
-        showHeader: {
-          type: 'boolean',
-          label: 'Show Header',
-          description: 'Show header with author information',
-          default: true
-        },
-        showFooter: {
-          type: 'boolean',
-          label: 'Show Footer',
-          description: 'Show footer with likes, comments, and actions',
-          default: true
-        },
-        showAuthor: {
-          type: 'boolean',
-          label: 'Show Author',
-          description: 'Show author avatar and name',
-          default: true
-        },
-        showActions: {
-          type: 'boolean',
-          label: 'Show Actions',
-          description: 'Show like and comment buttons',
-          default: true
-        },
-        contentDisplay: {
-          type: 'select',
-          label: 'Content Display',
-          description: 'How to display title and description',
-          options: [
-            { value: 'below', label: 'Below Image' },
-            { value: 'overlay', label: 'Overlay on Hover' },
-            { value: 'overlay-always', label: 'Overlay (Always)' }
-          ],
-          default: 'below'
-        }
-      },
-      minSize: { width: 300, height: 400 },
-      resizable: true,
-      tags: ['page', 'card', 'display']
-    }
-  });
-
-  // Content widgets
-  widgetRegistry.register<MarkdownTextWidgetProps>({
-    component: MarkdownTextWidget,
-    metadata: {
-      id: 'markdown-text',
-      name: translate('Text Block'),
-      category: 'display',
-      description: translate('Add rich text content with Markdown support'),
-      icon: FileText,
-      defaultProps: {
-        content: '',
-        placeholder: 'Enter your text here...',
-        variables: {}
-      },
-      configSchema: {
-        placeholder: {
-          type: 'text',
-          label: 'Placeholder Text',
-          description: 'Text shown when content is empty',
-          default: 'Enter your text here...'
-        }
-      },
-      minSize: { width: 300, height: 150 },
-      resizable: true,
-      tags: ['text', 'markdown', 'content', 'editor']
-    }
-  });
-
-  widgetRegistry.register<LayoutContainerWidgetProps>({
-    component: LayoutContainerWidget,
-    metadata: {
-      id: 'layout-container-widget',
-      name: translate('Nested Layout Container'),
-      category: 'custom',
-      description: translate('A widget that contains its own independent layout canvas.'),
-      icon: Layout,
-      defaultProps: {
-        nestedPageName: 'Nested Container',
-        showControls: true,
-        variables: {}
-      },
-      configSchema: {
-        nestedPageName: {
-          type: 'text',
-          label: 'Canvas Name',
-          description: 'The display name for the nested layout canvas.',
-          default: 'Nested Container'
-        },
-        showControls: {
-          type: 'boolean',
-          label: 'Show Canvas Controls',
-          description: 'Show the main controls (Add Container, Save, etc.) inside this nested canvas.',
-          default: true
-        }
-      },
-      minSize: { width: 300, height: 200 },
-      resizable: true,
-      tags: ['layout', 'container', 'nested', 'canvas']
-    },
-    getNestedLayouts: (props: LayoutContainerWidgetProps) => {
-      if (props.nestedPageId) {
-        return [{
-          id: 'nested-container',
-          label: props.nestedPageName || 'Nested Container',
-          layoutId: props.nestedPageId
-        }];
-      }
-      return [];
-    }
-  });
-
-  widgetRegistry.register({
-    component: SupportChatWidget,
-    metadata: {
-      id: 'support-chat-widget',
-      name: translate('Support Chat Widget'),
-      category: 'custom',
-      description: translate('Floating support chat button that expands into a full chat panel.'),
-      icon: MessageSquare,
-      defaultProps: {
-        buttons: [{ id: 'default', label: 'Ask Questions', contextPrompt: '' }],
-        position: 'bottom-right',
-        mode: 'floating',
-        autoOpen: false,
-        variables: {}
-      },
-      configSchema: {
-        position: {
-          type: 'select',
-          label: 'Button Position (Floating)',
-          description: 'Screen corner position (Only applies if Mode is Floating).',
-          options: [
-            { value: 'bottom-right', label: 'Bottom Right' },
-            { value: 'bottom-left', label: 'Bottom Left' }
-          ],
-          default: 'bottom-right'
-        },
-        mode: {
-          type: 'select',
-          label: 'Display Mode',
-          description: 'Whether the chat button floats over the page or renders inline within the layout.',
-          options: [
-            { value: 'floating', label: 'Floating (Corner)' },
-            { value: 'inline', label: 'Inline (In Layout)' }
-          ],
-          default: 'floating'
-        },
-        autoOpen: {
-          type: 'boolean',
-          label: 'Auto Open',
-          description: 'Open automatically when the page loads.',
-          default: false
-        }
-      },
-      minSize: { width: 100, height: 100 },
-      resizable: false,
-      tags: ['chat', 'support', 'ai', 'floating', 'button']
-    }
-  });
-
-  // File Browser Widget
-  widgetRegistry.register<FileBrowserWidgetProps>({
-    component: FileBrowserWidget,
-    metadata: {
-      id: 'file-browser',
-      name: translate('File Browser'),
-      category: 'custom',
-      description: translate('Browse files and directories on VFS mounts'),
-      icon: Monitor,
-      defaultProps: {
-        mount: 'root',
-        path: '/',
-        glob: '*.*',
-        mode: 'simple',
-        viewMode: 'list',
-        sortBy: 'name',
-        showToolbar: true,
-        canChangeMount: true,
-        allowFileViewer: true,
-        allowLightbox: true,
-        allowDownload: true,
-        allowPreview: false,
-        initialFile: '',
-        jail: false,
-        minHeight: '600px',
-        showStatusBar: true,
-        searchQuery: '',
-        variables: {}
-      },
-      configSchema: {
-        mountAndPath: {
-          type: 'vfsPicker',
-          label: 'Mount & Initial Path',
-          description: 'Browse to select the mount and starting directory',
-          mountKey: 'mount',
-          pathKey: 'path',
-          defaultMount: 'home',
-        },
-        searchQuery: {
-          type: 'text',
-          label: 'Initial Search Query',
-          description: 'If set, the file browser will start in search mode matching this query',
-          default: ''
-        },
-        initialFile: {
-          type: 'text',
-          label: 'Initial File',
-          description: 'If set, automatically selects and opens this file on load (needs filename + extension)',
-          default: ''
-        },
-        glob: {
-          type: 'selectWithText',
-          label: 'File Filter',
-          description: 'Filter which files are shown',
-          options: [
-            { value: '*.*', label: 'All Files' },
-            { value: '*.{jpg,jpeg,png,gif,webp,svg,bmp,avif,mp4,webm,mov,avi,mkv}', label: 'Media (Images & Video)' },
-            { value: '*.{jpg,jpeg,png,gif,webp,svg,bmp,avif}', label: 'Images Only' },
-            { value: '*.{mp4,webm,mov,avi,mkv,flv}', label: 'Videos Only' },
-          ],
-          default: '*.*'
-        },
-        mode: {
-          type: 'select',
-          label: 'Mode',
-          description: 'Simple = browse only. Advanced = file detail panel.',
-          options: [
-            { value: 'simple', label: 'Simple' },
-            { value: 'advanced', label: 'Advanced' }
-          ],
-          default: 'simple'
-        },
-        viewMode: {
-          type: 'select',
-          label: 'View Mode',
-          description: 'List, thumbnail grid or tree view',
-          options: [
-            { value: 'list', label: 'List' },
-            { value: 'thumbs', label: 'Thumbnails' },
-            { value: 'tree', label: 'Tree' }
-          ],
-          default: 'list'
-        },
-        sortBy: {
-          type: 'select',
-          label: 'Sort By',
-          description: 'Default sort order',
-          options: [
-            { value: 'name', label: 'Name' },
-            { value: 'ext', label: 'Extension' },
-            { value: 'date', label: 'Date' },
-            { value: 'type', label: 'Type' }
-          ],
-          default: 'name'
-        },
-        showToolbar: {
-          type: 'boolean',
-          label: 'Show Toolbar',
-          description: 'Show navigation toolbar with breadcrumbs, sort, and view toggle',
-          default: true
-        },
-        canChangeMount: {
-          type: 'boolean',
-          label: 'Allow Mount Switching',
-          description: 'Let users switch between VFS mounts',
-          default: true
-        },
-        allowLightbox: {
-          type: 'boolean',
-          label: 'Allow Image/Video Lightbox',
-          description: 'Open images and videos in a fullscreen lightbox',
-          default: true
-        },
-        allowFileViewer: {
-          type: 'boolean',
-          label: 'Allow Text File Viewer',
-          description: 'Open text/code files in the built-in viewer',
-          default: true
-        },
-        allowDownload: {
-          type: 'boolean',
-          label: 'Allow Download',
-          description: 'Show download button for files',
-          default: true
-        },
-        allowPreview: {
-          type: 'boolean',
-          label: 'Allow Document & 3D Preview',
-          description: 'Open document and 3D files in a modal preview',
-          default: true
-        },
-        jail: {
-          type: 'boolean',
-          label: 'Jail Mode',
-          description: 'Prevent navigating above the configured mount and path',
-          default: false
-        },
-        minHeight: {
-          type: 'selectWithText',
-          label: 'Min Height',
-          description: 'Minimum height of the widget (e.g. 600px, 70vh, 50%)',
-          options: [
-            { value: '400px', label: '400px' },
-            { value: '500px', label: '500px' },
-            { value: '600px', label: '600px' },
-            { value: '800px', label: '800px' },
-            { value: '50vh', label: '50vh' },
-            { value: '70vh', label: '70vh' },
-          ],
-          default: '600px'
-        },
-        showStatusBar: {
-          type: 'boolean',
-          label: 'Show Status Bar',
-          description: 'Show item count and path info at the bottom',
-          default: true
-        }
-      },
-      minSize: { width: 300, height: 300 },
-      resizable: true,
-      tags: ['file', 'browser', 'vfs', 'storage', 'explorer']
-    }
-  });
-
-  // Home Widget
-  widgetRegistry.register({
-    component: HomeWidget,
-    metadata: {
-      id: 'home',
-      name: translate('Home Feed'),
-      category: 'display',
-      description: translate('Display the main home feed with photos, categories, and sorting'),
-      icon: Monitor,
-      defaultProps: {
-        sortBy: 'latest',
-        viewMode: 'grid',
-        showCategories: false,
-        categorySlugs: '',
-        userId: '',
-        showSortBar: true,
-        showLayoutToggles: true,
-        showFooter: true,
-        center: false,
-        searchQuery: '',
-        initialContentType: '',
-        variables: {}
-      },
-      configSchema: {
-        sortBy: {
-          type: 'select',
-          label: 'Sort By',
-          description: 'Default sort order for the feed',
-          options: [
-            { value: 'latest', label: 'Latest' },
-            { value: 'top', label: 'Top' }
-          ],
-          default: 'latest'
-        },
-        viewMode: {
-          type: 'select',
-          label: 'View Mode',
-          description: 'Default display mode for the feed',
-          options: [
-            { value: 'grid', label: 'Grid' },
-            { value: 'large', label: 'Large Gallery' },
-            { value: 'list', label: 'List' }
-          ],
-          default: 'grid'
-        },
-        showCategories: {
-          type: 'boolean',
-          label: 'Show Categories Sidebar',
-          description: 'Show the category tree sidebar on desktop',
-          default: false
-        },
-        categorySlugs: {
-          type: 'text',
-          label: 'Category Filter',
-          description: 'Comma-separated category slugs to filter by (leave empty for all)',
-          default: ''
-        },
-        userId: {
-          type: 'userPicker',
-          label: 'User Filter',
-          description: 'Filter feed to show only content from a specific user',
-          default: ''
-        },
-        showSortBar: {
-          type: 'boolean',
-          label: 'Show Sort Bar',
-          description: 'Show the sort and category toggle bar',
-          default: true
-        },
-        showLayoutToggles: {
-          type: 'boolean',
-          label: 'Show Layout Toggles',
-          description: 'Show grid/large/list view toggle buttons',
-          default: true
-        },
-        showFooter: {
-          type: 'boolean',
-          label: 'Show Footer',
-          description: 'Show the site footer below the feed',
-          default: true
-        },
-        center: {
-          type: 'boolean',
-          label: 'Center Content',
-          description: 'Center the widget content with a maximum width container',
-          default: false
-        },
-        searchQuery: {
-          type: 'text',
-          label: 'Initial Search Query',
-          description: 'Load feed matching this search query',
-          default: ''
-        },
-        initialContentType: {
-          type: 'select',
-          label: 'Content Type',
-          description: 'Filter by content type',
-          options: [
-            { value: 'all', label: 'All Content' },
-            { value: 'posts', label: 'Posts' },
-            { value: 'pages', label: 'Pages' },
-            { value: 'pictures', label: 'Pictures' },
-            { value: 'files', label: 'Files' }
-          ],
-          default: 'all'
-        }
-      },
-      minSize: { width: 400, height: 400 },
-      resizable: true,
-      tags: ['home', 'feed', 'gallery', 'photos', 'categories']
-    }
-  });
-
-  // Video Banner Widget
-  widgetRegistry.register({
-    component: VideoBannerWidget,
-    metadata: {
-      id: 'video-banner',
-      name: translate('Hero'),
-      category: 'display',
-      description: translate('Full-width hero banner with background video, text overlay, and call-to-action buttons'),
-      icon: Video,
-      defaultProps: {
-        videoId: null,
-        posterImageId: null,
-        backgroundImageId: null,
-        heading: '',
-        description: '',
-        minHeight: 500,
-        overlayOpacity: 'medium',
-        objectFit: 'cover',
-        buttons: [],
-        variables: {}
-      },
-      configSchema: {
-        videoId: {
-          type: 'imagePicker',
-          label: 'Background Video',
-          description: 'Select a video-intern picture to use as background',
-          default: null
-        },
-        backgroundImageId: {
-          type: 'imagePicker',
-          label: 'Background Image',
-          description: 'Static image to use as background (when no video is set)',
-          default: null
-        },
-        posterImageId: {
-          type: 'imagePicker',
-          label: 'Poster Image',
-          description: 'Fallback image shown while video loads',
-          default: null
-        },
-        objectFit: {
-          type: 'select',
-          label: 'Image Fit',
-          description: 'How the background image fills the banner',
-          options: [
-            { value: 'cover', label: 'Cover (fill, may crop)' },
-            { value: 'contain', label: 'Contain (fit, may letterbox)' }
-          ],
-          default: 'cover'
-        },
-        heading: {
-          type: 'text',
-          label: 'Heading',
-          description: 'Main banner heading text',
-          default: ''
-        },
-        description: {
-          type: 'text',
-          label: 'Description',
-          description: 'Banner description text',
-          default: ''
-        },
-        minHeight: {
-          type: 'number',
-          label: 'Minimum Height (px)',
-          description: 'Minimum height of the banner in pixels',
-          default: 500
-        },
-        overlayOpacity: {
-          type: 'select',
-          label: 'Overlay Darkness',
-          description: 'How dark the text background pane is',
-          options: [
-            { value: 'light', label: 'Light' },
-            { value: 'medium', label: 'Medium' },
-            { value: 'dark', label: 'Dark' }
-          ],
-          default: 'medium'
-        },
-        buttons: {
-          type: 'buttons-editor',
-          label: 'CTA Buttons',
-          description: 'Call-to-action buttons with page links',
-          default: []
-        }
-      },
-      minSize: { width: 400, height: 300 },
-      resizable: true,
-      tags: ['video', 'banner', 'hero', 'landing']
-    }
-  });
-
-  // Category Feed Widget
-  widgetRegistry.register({
-    component: CategoryFeedWidget,
-    metadata: {
-      id: 'category-feed',
-      name: translate('Category Feed'),
-      category: 'display',
-      description: translate('Display a filtered feed for a specific category with heading and content type filter'),
-      icon: Monitor,
-      defaultProps: {
-        categoryId: '',
-        heading: '',
-        headingLevel: 'h2',
-        filterType: undefined,
-        showCategoryName: false,
-        sortBy: 'latest',
-        viewMode: 'grid',
-        showCategories: false,
-        userId: '',
-        showSortBar: true,
-        showLayoutToggles: true,
-        showFooter: false,
-        center: false,
-        columns: 'auto',
-        variables: {}
-      },
-      configSchema: {
-        categoryId: {
-          type: 'categoryPicker',
-          label: 'Category',
-          description: 'Select a category to filter the feed',
-          default: ''
-        },
-        heading: {
-          type: 'text',
-          label: 'Heading',
-          description: 'Section heading displayed above the feed (overrides category name)',
-          default: ''
-        },
-        showCategoryName: {
-          type: 'boolean',
-          label: 'Show Category Name',
-          description: 'Display the selected category name as heading (when no custom heading is set)',
-          default: false
-        },
-        headingLevel: {
-          type: 'select',
-          label: 'Heading Level',
-          description: 'HTML heading level',
-          options: [
-            { value: 'h1', label: 'H1' },
-            { value: 'h2', label: 'H2' },
-            { value: 'h3', label: 'H3' },
-            { value: 'h4', label: 'H4' }
-          ],
-          default: 'h2'
-        },
-        filterType: {
-          type: 'select',
-          label: 'Content Type',
-          description: 'Filter to show only a specific content type',
-          options: [
-            { value: 'all', label: 'All' },
-            { value: 'posts', label: 'Posts' },
-            { value: 'pages', label: 'Pages' },
-            { value: 'pictures', label: 'Pictures' }
-          ],
-          default: 'all'
-        },
-        sortBy: {
-          type: 'select',
-          label: 'Sort By',
-          description: 'Default sort order for the feed',
-          options: [
-            { value: 'latest', label: 'Latest' },
-            { value: 'top', label: 'Top' }
-          ],
-          default: 'latest'
-        },
-        viewMode: {
-          type: 'select',
-          label: 'View Mode',
-          description: 'Default display mode for the feed',
-          options: [
-            { value: 'grid', label: 'Grid' },
-            { value: 'large', label: 'Large Gallery' },
-            { value: 'list', label: 'List' }
-          ],
-          default: 'grid'
-        },
-        showCategories: {
-          type: 'boolean',
-          label: 'Show Categories Sidebar',
-          description: 'Show the category tree sidebar on desktop',
-          default: false
-        },
-        userId: {
-          type: 'userPicker',
-          label: 'User Filter',
-          description: 'Filter feed to show only content from a specific user',
-          default: ''
-        },
-        showSortBar: {
-          type: 'boolean',
-          label: 'Show Sort Bar',
-          description: 'Show the sort and category toggle bar',
-          default: true
-        },
-        showLayoutToggles: {
-          type: 'boolean',
-          label: 'Show Layout Toggles',
-          description: 'Show grid/large/list view toggle buttons',
-          default: true
-        },
-        showFooter: {
-          type: 'boolean',
-          label: 'Show Footer',
-          description: 'Show the site footer below the feed',
-          default: false
-        },
-        center: {
-          type: 'boolean',
-          label: 'Center Content',
-          description: 'Center the widget content with a maximum width container',
-          default: false
-        },
-        columns: {
-          type: 'select',
-          label: 'Grid Columns',
-          description: 'Number of columns to display in grid view',
-          options: [
-            { value: 'auto', label: 'Auto (Responsive)' },
-            { value: '1', label: '1 Column' },
-            { value: '2', label: '2 Columns' },
-            { value: '3', label: '3 Columns' },
-            { value: '4', label: '4 Columns' },
-            { value: '5', label: '5 Columns' },
-            { value: '6', label: '6 Columns' }
-          ],
-          default: 'auto'
-        }
-      },
-      minSize: { width: 400, height: 400 },
-      resizable: true,
-      tags: ['category', 'feed', 'home', 'filter', 'section']
-    }
-  });
-
-  // Menu Widget
-  widgetRegistry.register({
-    component: MenuWidget,
-    metadata: {
-      id: 'menu-widget',
-      name: translate('Menu'),
-      description: translate('Navigation menu with custom, page, and category links'),
-      icon: Layout,
-      category: 'navigation',
-      defaultProps: {
-        items: [],
-        orientation: 'horizontal',
-        size: 'md',
-        align: 'left',
-        variant: 'plain',
-        padding: 'none',
-        margin: 'none',
-        bg: 'none',
-        bgFrom: '#3b82f6',
-        bgTo: '#8b5cf6',
-        variables: {}
-      },
-      configSchema: {
-        orientation: {
-          type: 'select',
-          label: 'Orientation',
-          description: 'Menu layout direction',
-          options: [
-            { value: 'horizontal', label: 'Horizontal' },
-            { value: 'vertical', label: 'Vertical' }
-          ],
-          default: 'horizontal'
-        },
-        size: {
-          type: 'select',
-          label: 'Size',
-          description: 'Size of menu items',
-          options: [
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-            { value: 'xl', label: 'Extra Large' }
-          ],
-          default: 'md'
-        },
-        align: {
-          type: 'select',
-          label: 'Alignment',
-          description: 'Horizontal alignment of menu items',
-          options: [
-            { value: 'left', label: 'Left' },
-            { value: 'center', label: 'Center' },
-            { value: 'right', label: 'Right' }
-          ],
-          default: 'left'
-        },
-        variant: {
-          type: 'select',
-          label: 'Style',
-          description: 'Visual style of the menu',
-          options: [
-            { value: 'plain', label: 'Plain' },
-            { value: 'bar', label: 'Bar (Solid Background)' },
-            { value: 'glass', label: 'Glass (Blur Effect)' },
-            { value: 'pill', label: 'Pill (Rounded Items)' },
-            { value: 'underline', label: 'Underline' }
-          ],
-          default: 'plain'
-        },
-        padding: {
-          type: 'select',
-          label: 'Padding',
-          description: 'Inner spacing around menu items',
-          options: [
-            { value: 'none', label: 'None' },
-            { value: 'xs', label: 'XS' },
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-            { value: 'xl', label: 'XL' }
-          ],
-          default: 'none'
-        },
-        margin: {
-          type: 'select',
-          label: 'Margin',
-          description: 'Outer spacing around the menu',
-          options: [
-            { value: 'none', label: 'None' },
-            { value: 'xs', label: 'XS' },
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-            { value: 'xl', label: 'XL' }
-          ],
-          default: 'none'
-        },
-        bg: {
-          type: 'select',
-          label: 'Background',
-          description: 'Background color or gradient for the full row',
-          options: [
-            { value: 'none', label: 'None (Transparent)' },
-            { value: 'muted', label: 'Muted' },
-            { value: 'dark', label: 'Dark' },
-            { value: 'primary', label: 'Primary' },
-            { value: 'accent', label: 'Accent' },
-            { value: 'gradient-primary', label: 'Gradient — Primary' },
-            { value: 'gradient-dark', label: 'Gradient — Dark' },
-            { value: 'gradient-ocean', label: 'Gradient — Ocean' },
-            { value: 'gradient-sunset', label: 'Gradient — Sunset' },
-            { value: 'gradient-forest', label: 'Gradient — Forest' },
-            { value: 'gradient-brand', label: 'Gradient — Brand (Amber)' },
-            { value: 'custom', label: 'Custom Gradient…' }
-          ],
-          default: 'none'
-        },
-        bgFrom: {
-          type: 'color',
-          label: 'Gradient Start',
-          description: 'Left / start color of the custom gradient',
-          default: '#3b82f6',
-          showWhen: { field: 'bg', value: 'custom' }
-        },
-        bgTo: {
-          type: 'color',
-          label: 'Gradient End',
-          description: 'Right / end color of the custom gradient',
-          default: '#8b5cf6',
-          showWhen: { field: 'bg', value: 'custom' }
-        }
-      },
-      minSize: { width: 200, height: 40 },
-      resizable: true,
-      tags: ['menu', 'navigation', 'links', 'nav']
-    }
-  });
-
-}
+import { lazy } from 'react';
+import { widgetRegistry } from './widgetRegistry';
+import { translate } from '@/i18n';
+import {
+  Monitor,
+  Layout,
+  FileText,
+  Code,
+  Video,
+  MessageSquare,
+} from 'lucide-react';
+import type {
+  HtmlWidgetProps,
+  PhotoGridProps,
+  PhotoCardWidgetProps,
+  PhotoGridWidgetProps,
+  TabsWidgetProps,
+  GalleryWidgetProps,
+  PageCardWidgetProps,
+  MarkdownTextWidgetProps,
+  LayoutContainerWidgetProps,
+  FileBrowserWidgetProps,
+} from '@polymech/shared';
+
+import PageCardWidget from '@/modules/pages/PageCardWidget';
+
+import PhotoGrid from '@/components/PhotoGrid';
+import PhotoGridWidget from '@/components/widgets/PhotoGridWidget';
+import PhotoCardWidget from '@/components/widgets/PhotoCardWidget';
+import LayoutContainerWidget from '@/components/widgets/LayoutContainerWidget';
+import MarkdownTextWidget from '@/components/widgets/MarkdownTextWidget';
+import GalleryWidget from '@/components/widgets/GalleryWidget';
+import TabsWidget from '@/components/widgets/TabsWidget';
+import { HtmlWidget } from '@/components/widgets/HtmlWidget';
+import HomeWidget from '@/components/widgets/HomeWidget';
+import VideoBannerWidget from '@/components/widgets/VideoBannerWidget';
+import CategoryFeedWidget from '@/components/widgets/CategoryFeedWidget';
+import SupportChatWidget from '@/components/widgets/SupportChatWidget';
+import MenuWidget from '@/components/widgets/MenuWidget';
+
+const FileBrowserWidget = lazy(() => import('@/modules/storage/FileBrowserWidget').then(m => ({ default: m.FileBrowserWidget })));
+
+export function registerAllWidgets() {
+  // Clear existing registrations (useful for HMR)
+  widgetRegistry.clear();
+
+  // HTML Widget
+  widgetRegistry.register<HtmlWidgetProps>({
+    component: HtmlWidget,
+    metadata: {
+      id: 'html-widget',
+      name: translate('HTML Content'),
+      category: 'display',
+      description: translate('Render HTML content with variable substitution'),
+      icon: Code,
+      defaultProps: {
+        content: '<div>\n  <h3 class="text-xl font-bold">Hello ${name}</h3>\n  <p>Welcome to our custom widget!</p>\n</div>',
+        variables: '{\n  "name": "World"\n}',
+        className: ''
+      },
+      configSchema: {
+        content: {
+          type: 'markdown', // Using markdown editor for larger text area
+          label: 'HTML Content',
+          description: 'Enter your HTML code here. Use ${varName} for substitutions.',
+          default: '<div>Hello World</div>'
+        },
+        variables: {
+          type: 'markdown', // Using markdown/textarea for JSON input for now
+          label: 'Variables (JSON)',
+          description: 'JSON object defining variables for substitution.',
+          default: '{}'
+        },
+        className: {
+          type: 'classname',
+          label: 'CSS Class',
+          description: 'Tailwind classes for the container',
+          default: ''
+        }
+      },
+      minSize: { width: 300, height: 100 },
+      resizable: true,
+      tags: ['html', 'code', 'custom', 'embed']
+    }
+  });
+
+  // Photo widgets
+  widgetRegistry.register<PhotoGridProps>({
+    component: PhotoGrid,
+    metadata: {
+      id: 'photo-grid',
+      name: translate('Photo Grid'),
+      category: 'custom',
+      description: translate('Display photos in a responsive grid layout'),
+      icon: Monitor,
+      defaultProps: {
+        variables: {}
+      },
+      // Note: PhotoGrid fetches data internally based on navigation context
+      // For configurable picture selection, use 'photo-grid-widget' instead
+      minSize: { width: 300, height: 200 },
+      resizable: true,
+      tags: ['photo', 'grid', 'gallery']
+    }
+  });
+
+  widgetRegistry.register<PhotoCardWidgetProps>({
+    component: PhotoCardWidget,
+    metadata: {
+      id: 'photo-card',
+      name: translate('Photo Card'),
+      category: 'custom',
+      description: translate('Display a single photo card with details'),
+      icon: Monitor,
+      defaultProps: {
+        pictureId: null,
+        postId: null,
+        showHeader: true,
+        showFooter: true,
+        showAuthor: true,
+        showActions: true,
+        showTitle: true,
+        showDescription: true,
+        contentDisplay: 'below',
+        imageFit: 'contain',
+        variables: {}
+      },
+      configSchema: {
+        pictureId: {
+          type: 'imagePicker',
+          label: 'Select Picture',
+          description: 'Choose a picture from your published images',
+          default: null
+        },
+        showHeader: {
+          type: 'boolean',
+          label: 'Show Header',
+          description: 'Show header with author information',
+          default: true
+        },
+        showFooter: {
+          type: 'boolean',
+          label: 'Show Footer',
+          description: 'Show footer with likes, comments, and actions',
+          default: true
+        },
+        showAuthor: {
+          type: 'boolean',
+          label: 'Include Author',
+          description: 'Show author avatar and name',
+          default: true
+        },
+        showActions: {
+          type: 'boolean',
+          label: 'Include Actions',
+          description: 'Show like, comment, download buttons',
+          default: true
+        },
+        showTitle: {
+          type: 'boolean',
+          label: 'Show Title',
+          description: 'Display the picture title',
+          default: true
+        },
+        showDescription: {
+          type: 'boolean',
+          label: 'Show Description',
+          description: 'Display the picture description',
+          default: true
+        },
+        contentDisplay: {
+          type: 'select',
+          label: 'Content Display',
+          description: 'How to display title and description',
+          options: [
+            { value: 'below', label: 'Below Image' },
+            { value: 'overlay', label: 'Overlay on Hover' },
+            { value: 'overlay-always', label: 'Overlay (Always)' }
+          ],
+          default: 'below'
+        },
+        imageFit: {
+          type: 'select',
+          label: 'Image Fit',
+          description: 'How the image should fit within the card',
+          options: [
+            { value: 'contain', label: 'Contain' },
+            { value: 'cover', label: 'Cover' }
+          ],
+          default: 'contain'
+        }
+      },
+      minSize: { width: 300, height: 400 },
+      resizable: true,
+      tags: ['photo', 'card', 'display']
+    }
+  });
+
+  widgetRegistry.register<PhotoGridWidgetProps>({
+    component: PhotoGridWidget,
+    metadata: {
+      id: 'photo-grid-widget',
+      name: translate('Photo Grid Widget'),
+      category: 'custom',
+      description: translate('Display a customizable grid of selected photos'),
+      icon: Monitor,
+      defaultProps: {
+        pictureIds: [],
+        columns: 'auto',
+        variables: {}
+      },
+      configSchema: {
+        pictureIds: {
+          type: 'imagePicker', // We'll need to upgrade the config renderer to handle array/multi-select if not already supported, or rely on internal EditMode
+          label: 'Select Pictures',
+          description: 'Choose pictures to display in the grid',
+          default: []
+        },
+        columns: {
+          type: 'select',
+          label: 'Grid Columns',
+          description: 'Number of columns to display in grid view',
+          options: [
+            { value: 'auto', label: 'Auto (Responsive)' },
+            { value: '1', label: '1 Column' },
+            { value: '2', label: '2 Columns' },
+            { value: '3', label: '3 Columns' },
+            { value: '4', label: '4 Columns' },
+            { value: '5', label: '5 Columns' },
+            { value: '6', label: '6 Columns' }
+          ],
+          default: 'auto'
+        }
+      },
+      minSize: { width: 300, height: 300 },
+      resizable: true,
+      tags: ['photo', 'grid', 'gallery', 'custom']
+    }
+  });
+
+  widgetRegistry.register<TabsWidgetProps>({
+    component: TabsWidget,
+    metadata: {
+      id: 'tabs-widget',
+      name: translate('Tabs Widget'),
+      category: 'layout',
+      description: translate('Organize content into switchable tabs'),
+      icon: Layout,
+      defaultProps: {
+        tabs: [
+          {
+            id: 'tab-1',
+            label: 'Tab 1',
+            layoutId: 'tab-layout-1',
+            layoutData: {
+              id: 'tab-layout-1',
+              name: 'Tab 1',
+              containers: [],
+              createdAt: Date.now(),
+              updatedAt: Date.now(),
+              version: '1.0.0'
+            }
+          },
+          {
+            id: 'tab-2',
+            label: 'Tab 2',
+            layoutId: 'tab-layout-2',
+            layoutData: {
+              id: 'tab-layout-2',
+              name: 'Tab 2',
+              containers: [],
+              createdAt: Date.now(),
+              updatedAt: Date.now(),
+              version: '1.0.0'
+            }
+          }
+        ],
+        orientation: 'horizontal',
+        tabBarPosition: 'top',
+        tabBarClassName: '',
+        contentClassName: '',
+        variables: {}
+      } as unknown as TabsWidgetProps,
+
+      configSchema: {
+        tabs: {
+          type: 'tabs-editor',
+          label: 'Tabs',
+          description: 'Manage tabs and their order',
+          default: []
+        },
+        tabBarPosition: {
+          type: 'select',
+          label: 'Tab Bar Position',
+          description: 'Position of the tab bar',
+          options: [
+            { value: 'top', label: 'Top' },
+            { value: 'bottom', label: 'Bottom' },
+            { value: 'left', label: 'Left' },
+            { value: 'right', label: 'Right' }
+          ],
+          default: 'top'
+        },
+        tabBarClassName: {
+          type: 'classname',
+          label: 'Tab Bar Style',
+          description: 'Tailwind classes for the tab bar',
+          default: ''
+        },
+        contentClassName: {
+          type: 'classname',
+          label: 'Content Area Style',
+          description: 'Tailwind classes for the content area',
+          default: ''
+        }
+      },
+      minSize: { width: 400, height: 300 },
+      resizable: true,
+      tags: ['layout', 'tabs', 'container']
+    },
+    getNestedLayouts: (props: TabsWidgetProps) => {
+      if (!props.tabs || !Array.isArray(props.tabs)) return [];
+      return props.tabs.map((tab: unknown) => ({
+        id: (tab as any).id,
+        label: (tab as any).label,
+        layoutId: (tab as any).layoutId
+      }));
+    }
+  });
+
+  widgetRegistry.register<GalleryWidgetProps>({
+    component: GalleryWidget,
+    metadata: {
+      id: 'gallery-widget',
+      name: translate('Gallery'),
+      category: 'custom',
+      description: translate('Interactive gallery with main viewer and filmstrip navigation'),
+      icon: Monitor,
+      defaultProps: {
+        pictureIds: [],
+        thumbnailLayout: 'strip',
+        imageFit: 'contain',
+        thumbnailsPosition: 'bottom',
+        thumbnailsOrientation: 'horizontal',
+        zoomEnabled: false,
+        showVersions: false,
+        showTitle: false,
+        showDescription: false,
+        autoPlayVideos: false,
+        thumbnailsClassName: '',
+        variables: {}
+      },
+      configSchema: {
+        pictureIds: {
+          type: 'imagePicker',
+          label: 'Select Pictures',
+          description: 'Choose pictures to display in the gallery',
+          default: [],
+          multiSelect: true
+        },
+        showTitle: {
+          type: 'boolean',
+          label: 'Show Title',
+          description: 'Display the title of each picture below the main image',
+          default: false
+        },
+        showDescription: {
+          type: 'boolean',
+          label: 'Show Description',
+          description: 'Display the description of each picture below the main image',
+          default: false
+        },
+        thumbnailLayout: {
+          type: 'select',
+          label: 'Thumbnail Layout',
+          description: 'How to display thumbnails below the main image',
+          options: [
+            { value: 'strip', label: 'Horizontal Strip (scrollable)' },
+            { value: 'grid', label: 'Grid (multiple rows, fit width)' }
+          ],
+          default: 'strip'
+        },
+        imageFit: {
+          type: 'select',
+          label: 'Main Image Fit',
+          description: 'How the main image should fit within its container',
+          options: [
+            { value: 'contain', label: 'Contain (fit within bounds, show full image)' },
+            { value: 'cover', label: 'Cover (fill container, may crop image)' }
+          ],
+          default: 'cover'
+        },
+        thumbnailsPosition: {
+          type: 'select',
+          label: 'Thumbnails Position',
+          description: 'Where to place the thumbnails relative to the main image',
+          options: [
+            { value: 'bottom', label: 'Bottom' },
+            { value: 'top', label: 'Top' },
+            { value: 'left', label: 'Left' },
+            { value: 'right', label: 'Right' }
+          ],
+          default: 'bottom'
+        },
+        thumbnailsOrientation: {
+          type: 'select',
+          label: 'Thumbnails Orientation',
+          description: 'Direction of the thumbnail strip',
+          options: [
+            { value: 'horizontal', label: 'Horizontal' },
+            { value: 'vertical', label: 'Vertical' }
+          ],
+          default: 'horizontal'
+        },
+        zoomEnabled: {
+          type: 'boolean',
+          label: 'Enable Pan Zoom',
+          description: 'Enlarge image and pan on hover',
+          default: false
+        },
+        showVersions: {
+          type: 'boolean',
+          label: 'Show Versions',
+          description: 'Show version navigation in the filmstrip for pictures with versions',
+          default: false
+        },
+        autoPlayVideos: {
+          type: 'boolean',
+          label: 'Auto Play Videos',
+          description: 'Automatically play video items when selected (muted)',
+          default: false
+        },
+        thumbnailsClassName: {
+          type: 'classname',
+          label: 'Thumbnails CSS Class',
+          description: 'Additional CSS classes for the thumbnail strip container',
+          default: ''
+        }
+      },
+      minSize: { width: 600, height: 500 },
+      resizable: true,
+      tags: ['photo', 'gallery', 'viewer', 'slideshow']
+    }
+  });
+
+  widgetRegistry.register<PageCardWidgetProps>({
+    component: PageCardWidget,
+    metadata: {
+      id: 'page-card',
+      name: translate('Page Card'),
+      category: 'custom',
+      description: translate('Display a single page card with details'),
+      icon: FileText,
+      defaultProps: {
+        pageId: null,
+        showHeader: true,
+        showFooter: true,
+        showAuthor: true,
+        showActions: true,
+        contentDisplay: 'below',
+        variables: {}
+      },
+      configSchema: {
+        pageId: {
+          type: 'pagePicker',
+          label: 'Select Page',
+          description: 'Choose a page to display',
+          default: null
+        },
+        showHeader: {
+          type: 'boolean',
+          label: 'Show Header',
+          description: 'Show header with author information',
+          default: true
+        },
+        showFooter: {
+          type: 'boolean',
+          label: 'Show Footer',
+          description: 'Show footer with likes, comments, and actions',
+          default: true
+        },
+        showAuthor: {
+          type: 'boolean',
+          label: 'Show Author',
+          description: 'Show author avatar and name',
+          default: true
+        },
+        showActions: {
+          type: 'boolean',
+          label: 'Show Actions',
+          description: 'Show like and comment buttons',
+          default: true
+        },
+        contentDisplay: {
+          type: 'select',
+          label: 'Content Display',
+          description: 'How to display title and description',
+          options: [
+            { value: 'below', label: 'Below Image' },
+            { value: 'overlay', label: 'Overlay on Hover' },
+            { value: 'overlay-always', label: 'Overlay (Always)' }
+          ],
+          default: 'below'
+        }
+      },
+      minSize: { width: 300, height: 400 },
+      resizable: true,
+      tags: ['page', 'card', 'display']
+    }
+  });
+
+  // Content widgets
+  widgetRegistry.register<MarkdownTextWidgetProps>({
+    component: MarkdownTextWidget,
+    metadata: {
+      id: 'markdown-text',
+      name: translate('Text Block'),
+      category: 'display',
+      description: translate('Add rich text content with Markdown support'),
+      icon: FileText,
+      defaultProps: {
+        content: '',
+        placeholder: 'Enter your text here...',
+        variables: {}
+      },
+      configSchema: {
+        placeholder: {
+          type: 'text',
+          label: 'Placeholder Text',
+          description: 'Text shown when content is empty',
+          default: 'Enter your text here...'
+        }
+      },
+      minSize: { width: 300, height: 150 },
+      resizable: true,
+      tags: ['text', 'markdown', 'content', 'editor']
+    }
+  });
+
+  widgetRegistry.register<LayoutContainerWidgetProps>({
+    component: LayoutContainerWidget,
+    metadata: {
+      id: 'layout-container-widget',
+      name: translate('Nested Layout Container'),
+      category: 'custom',
+      description: translate('A widget that contains its own independent layout canvas.'),
+      icon: Layout,
+      defaultProps: {
+        nestedPageName: 'Nested Container',
+        showControls: true,
+        variables: {}
+      },
+      configSchema: {
+        nestedPageName: {
+          type: 'text',
+          label: 'Canvas Name',
+          description: 'The display name for the nested layout canvas.',
+          default: 'Nested Container'
+        },
+        showControls: {
+          type: 'boolean',
+          label: 'Show Canvas Controls',
+          description: 'Show the main controls (Add Container, Save, etc.) inside this nested canvas.',
+          default: true
+        }
+      },
+      minSize: { width: 300, height: 200 },
+      resizable: true,
+      tags: ['layout', 'container', 'nested', 'canvas']
+    },
+    getNestedLayouts: (props: LayoutContainerWidgetProps) => {
+      if (props.nestedPageId) {
+        return [{
+          id: 'nested-container',
+          label: props.nestedPageName || 'Nested Container',
+          layoutId: props.nestedPageId
+        }];
+      }
+      return [];
+    }
+  });
+
+  widgetRegistry.register({
+    component: SupportChatWidget,
+    metadata: {
+      id: 'support-chat-widget',
+      name: translate('Support Chat Widget'),
+      category: 'custom',
+      description: translate('Floating support chat button that expands into a full chat panel.'),
+      icon: MessageSquare,
+      defaultProps: {
+        buttons: [{ id: 'default', label: 'Ask Questions', contextPrompt: '' }],
+        position: 'bottom-right',
+        mode: 'floating',
+        autoOpen: false,
+        variables: {}
+      },
+      configSchema: {
+        position: {
+          type: 'select',
+          label: 'Button Position (Floating)',
+          description: 'Screen corner position (Only applies if Mode is Floating).',
+          options: [
+            { value: 'bottom-right', label: 'Bottom Right' },
+            { value: 'bottom-left', label: 'Bottom Left' }
+          ],
+          default: 'bottom-right'
+        },
+        mode: {
+          type: 'select',
+          label: 'Display Mode',
+          description: 'Whether the chat button floats over the page or renders inline within the layout.',
+          options: [
+            { value: 'floating', label: 'Floating (Corner)' },
+            { value: 'inline', label: 'Inline (In Layout)' }
+          ],
+          default: 'floating'
+        },
+        autoOpen: {
+          type: 'boolean',
+          label: 'Auto Open',
+          description: 'Open automatically when the page loads.',
+          default: false
+        }
+      },
+      minSize: { width: 100, height: 100 },
+      resizable: false,
+      tags: ['chat', 'support', 'ai', 'floating', 'button']
+    }
+  });
+
+  // File Browser Widget
+  widgetRegistry.register<FileBrowserWidgetProps>({
+    component: FileBrowserWidget,
+    metadata: {
+      id: 'file-browser',
+      name: translate('File Browser'),
+      category: 'custom',
+      description: translate('Browse files and directories on VFS mounts'),
+      icon: Monitor,
+      defaultProps: {
+        mount: 'root',
+        path: '/',
+        glob: '*.*',
+        mode: 'simple',
+        viewMode: 'list',
+        sortBy: 'name',
+        showToolbar: true,
+        canChangeMount: true,
+        allowFileViewer: true,
+        allowLightbox: true,
+        allowDownload: true,
+        allowPreview: false,
+        initialFile: '',
+        jail: false,
+        minHeight: '600px',
+        showStatusBar: true,
+        searchQuery: '',
+        variables: {}
+      },
+      configSchema: {
+        mountAndPath: {
+          type: 'vfsPicker',
+          label: 'Mount & Initial Path',
+          description: 'Browse to select the mount and starting directory',
+          mountKey: 'mount',
+          pathKey: 'path',
+          defaultMount: 'home',
+        },
+        searchQuery: {
+          type: 'text',
+          label: 'Initial Search Query',
+          description: 'If set, the file browser will start in search mode matching this query',
+          default: ''
+        },
+        initialFile: {
+          type: 'text',
+          label: 'Initial File',
+          description: 'If set, automatically selects and opens this file on load (needs filename + extension)',
+          default: ''
+        },
+        glob: {
+          type: 'selectWithText',
+          label: 'File Filter',
+          description: 'Filter which files are shown',
+          options: [
+            { value: '*.*', label: 'All Files' },
+            { value: '*.{jpg,jpeg,png,gif,webp,svg,bmp,avif,mp4,webm,mov,avi,mkv}', label: 'Media (Images & Video)' },
+            { value: '*.{jpg,jpeg,png,gif,webp,svg,bmp,avif}', label: 'Images Only' },
+            { value: '*.{mp4,webm,mov,avi,mkv,flv}', label: 'Videos Only' },
+          ],
+          default: '*.*'
+        },
+        mode: {
+          type: 'select',
+          label: 'Mode',
+          description: 'Simple = browse only. Advanced = file detail panel.',
+          options: [
+            { value: 'simple', label: 'Simple' },
+            { value: 'advanced', label: 'Advanced' }
+          ],
+          default: 'simple'
+        },
+        viewMode: {
+          type: 'select',
+          label: 'View Mode',
+          description: 'List, thumbnail grid or tree view',
+          options: [
+            { value: 'list', label: 'List' },
+            { value: 'thumbs', label: 'Thumbnails' },
+            { value: 'tree', label: 'Tree' }
+          ],
+          default: 'list'
+        },
+        sortBy: {
+          type: 'select',
+          label: 'Sort By',
+          description: 'Default sort order',
+          options: [
+            { value: 'name', label: 'Name' },
+            { value: 'ext', label: 'Extension' },
+            { value: 'date', label: 'Date' },
+            { value: 'type', label: 'Type' }
+          ],
+          default: 'name'
+        },
+        showToolbar: {
+          type: 'boolean',
+          label: 'Show Toolbar',
+          description: 'Show navigation toolbar with breadcrumbs, sort, and view toggle',
+          default: true
+        },
+        canChangeMount: {
+          type: 'boolean',
+          label: 'Allow Mount Switching',
+          description: 'Let users switch between VFS mounts',
+          default: true
+        },
+        allowLightbox: {
+          type: 'boolean',
+          label: 'Allow Image/Video Lightbox',
+          description: 'Open images and videos in a fullscreen lightbox',
+          default: true
+        },
+        allowFileViewer: {
+          type: 'boolean',
+          label: 'Allow Text File Viewer',
+          description: 'Open text/code files in the built-in viewer',
+          default: true
+        },
+        allowDownload: {
+          type: 'boolean',
+          label: 'Allow Download',
+          description: 'Show download button for files',
+          default: true
+        },
+        allowPreview: {
+          type: 'boolean',
+          label: 'Allow Document & 3D Preview',
+          description: 'Open document and 3D files in a modal preview',
+          default: true
+        },
+        jail: {
+          type: 'boolean',
+          label: 'Jail Mode',
+          description: 'Prevent navigating above the configured mount and path',
+          default: false
+        },
+        minHeight: {
+          type: 'selectWithText',
+          label: 'Min Height',
+          description: 'Minimum height of the widget (e.g. 600px, 70vh, 50%)',
+          options: [
+            { value: '400px', label: '400px' },
+            { value: '500px', label: '500px' },
+            { value: '600px', label: '600px' },
+            { value: '800px', label: '800px' },
+            { value: '50vh', label: '50vh' },
+            { value: '70vh', label: '70vh' },
+          ],
+          default: '600px'
+        },
+        showStatusBar: {
+          type: 'boolean',
+          label: 'Show Status Bar',
+          description: 'Show item count and path info at the bottom',
+          default: true
+        }
+      },
+      minSize: { width: 300, height: 300 },
+      resizable: true,
+      tags: ['file', 'browser', 'vfs', 'storage', 'explorer']
+    }
+  });
+
+  // Home Widget
+  widgetRegistry.register({
+    component: HomeWidget,
+    metadata: {
+      id: 'home',
+      name: translate('Home Feed'),
+      category: 'display',
+      description: translate('Display the main home feed with photos, categories, and sorting'),
+      icon: Monitor,
+      defaultProps: {
+        sortBy: 'latest',
+        viewMode: 'grid',
+        showCategories: false,
+        categorySlugs: '',
+        userId: '',
+        showSortBar: true,
+        showLayoutToggles: true,
+        showFooter: true,
+        center: false,
+        searchQuery: '',
+        initialContentType: '',
+        variables: {}
+      },
+      configSchema: {
+        sortBy: {
+          type: 'select',
+          label: 'Sort By',
+          description: 'Default sort order for the feed',
+          options: [
+            { value: 'latest', label: 'Latest' },
+            { value: 'top', label: 'Top' }
+          ],
+          default: 'latest'
+        },
+        viewMode: {
+          type: 'select',
+          label: 'View Mode',
+          description: 'Default display mode for the feed',
+          options: [
+            { value: 'grid', label: 'Grid' },
+            { value: 'large', label: 'Large Gallery' },
+            { value: 'list', label: 'List' }
+          ],
+          default: 'grid'
+        },
+        showCategories: {
+          type: 'boolean',
+          label: 'Show Categories Sidebar',
+          description: 'Show the category tree sidebar on desktop',
+          default: false
+        },
+        categorySlugs: {
+          type: 'text',
+          label: 'Category Filter',
+          description: 'Comma-separated category slugs to filter by (leave empty for all)',
+          default: ''
+        },
+        userId: {
+          type: 'userPicker',
+          label: 'User Filter',
+          description: 'Filter feed to show only content from a specific user',
+          default: ''
+        },
+        showSortBar: {
+          type: 'boolean',
+          label: 'Show Sort Bar',
+          description: 'Show the sort and category toggle bar',
+          default: true
+        },
+        showLayoutToggles: {
+          type: 'boolean',
+          label: 'Show Layout Toggles',
+          description: 'Show grid/large/list view toggle buttons',
+          default: true
+        },
+        showFooter: {
+          type: 'boolean',
+          label: 'Show Footer',
+          description: 'Show the site footer below the feed',
+          default: true
+        },
+        center: {
+          type: 'boolean',
+          label: 'Center Content',
+          description: 'Center the widget content with a maximum width container',
+          default: false
+        },
+        searchQuery: {
+          type: 'text',
+          label: 'Initial Search Query',
+          description: 'Load feed matching this search query',
+          default: ''
+        },
+        initialContentType: {
+          type: 'select',
+          label: 'Content Type',
+          description: 'Filter by content type',
+          options: [
+            { value: 'all', label: 'All Content' },
+            { value: 'posts', label: 'Posts' },
+            { value: 'pages', label: 'Pages' },
+            { value: 'pictures', label: 'Pictures' },
+            { value: 'files', label: 'Files' }
+          ],
+          default: 'all'
+        }
+      },
+      minSize: { width: 400, height: 400 },
+      resizable: true,
+      tags: ['home', 'feed', 'gallery', 'photos', 'categories']
+    }
+  });
+
+  // Video Banner Widget
+  widgetRegistry.register({
+    component: VideoBannerWidget,
+    metadata: {
+      id: 'video-banner',
+      name: translate('Hero'),
+      category: 'display',
+      description: translate('Full-width hero banner with background video, text overlay, and call-to-action buttons'),
+      icon: Video,
+      defaultProps: {
+        videoId: null,
+        posterImageId: null,
+        backgroundImageId: null,
+        heading: '',
+        description: '',
+        minHeight: 500,
+        overlayOpacity: 'medium',
+        objectFit: 'cover',
+        buttons: [],
+        variables: {}
+      },
+      configSchema: {
+        videoId: {
+          type: 'imagePicker',
+          label: 'Background Video',
+          description: 'Select a video-intern picture to use as background',
+          default: null
+        },
+        backgroundImageId: {
+          type: 'imagePicker',
+          label: 'Background Image',
+          description: 'Static image to use as background (when no video is set)',
+          default: null
+        },
+        posterImageId: {
+          type: 'imagePicker',
+          label: 'Poster Image',
+          description: 'Fallback image shown while video loads',
+          default: null
+        },
+        objectFit: {
+          type: 'select',
+          label: 'Image Fit',
+          description: 'How the background image fills the banner',
+          options: [
+            { value: 'cover', label: 'Cover (fill, may crop)' },
+            { value: 'contain', label: 'Contain (fit, may letterbox)' }
+          ],
+          default: 'cover'
+        },
+        heading: {
+          type: 'text',
+          label: 'Heading',
+          description: 'Main banner heading text',
+          default: ''
+        },
+        description: {
+          type: 'text',
+          label: 'Description',
+          description: 'Banner description text',
+          default: ''
+        },
+        minHeight: {
+          type: 'number',
+          label: 'Minimum Height (px)',
+          description: 'Minimum height of the banner in pixels',
+          default: 500
+        },
+        overlayOpacity: {
+          type: 'select',
+          label: 'Overlay Darkness',
+          description: 'How dark the text background pane is',
+          options: [
+            { value: 'light', label: 'Light' },
+            { value: 'medium', label: 'Medium' },
+            { value: 'dark', label: 'Dark' }
+          ],
+          default: 'medium'
+        },
+        buttons: {
+          type: 'buttons-editor',
+          label: 'CTA Buttons',
+          description: 'Call-to-action buttons with page links',
+          default: []
+        }
+      },
+      minSize: { width: 400, height: 300 },
+      resizable: true,
+      tags: ['video', 'banner', 'hero', 'landing']
+    }
+  });
+
+  // Category Feed Widget
+  widgetRegistry.register({
+    component: CategoryFeedWidget,
+    metadata: {
+      id: 'category-feed',
+      name: translate('Category Feed'),
+      category: 'display',
+      description: translate('Display a filtered feed for a specific category with heading and content type filter'),
+      icon: Monitor,
+      defaultProps: {
+        categoryId: '',
+        heading: '',
+        headingLevel: 'h2',
+        filterType: undefined,
+        showCategoryName: false,
+        sortBy: 'latest',
+        viewMode: 'grid',
+        showCategories: false,
+        userId: '',
+        showSortBar: true,
+        showLayoutToggles: true,
+        showFooter: false,
+        center: false,
+        columns: 'auto',
+        variables: {}
+      },
+      configSchema: {
+        categoryId: {
+          type: 'categoryPicker',
+          label: 'Category',
+          description: 'Select a category to filter the feed',
+          default: ''
+        },
+        heading: {
+          type: 'text',
+          label: 'Heading',
+          description: 'Section heading displayed above the feed (overrides category name)',
+          default: ''
+        },
+        showCategoryName: {
+          type: 'boolean',
+          label: 'Show Category Name',
+          description: 'Display the selected category name as heading (when no custom heading is set)',
+          default: false
+        },
+        headingLevel: {
+          type: 'select',
+          label: 'Heading Level',
+          description: 'HTML heading level',
+          options: [
+            { value: 'h1', label: 'H1' },
+            { value: 'h2', label: 'H2' },
+            { value: 'h3', label: 'H3' },
+            { value: 'h4', label: 'H4' }
+          ],
+          default: 'h2'
+        },
+        filterType: {
+          type: 'select',
+          label: 'Content Type',
+          description: 'Filter to show only a specific content type',
+          options: [
+            { value: 'all', label: 'All' },
+            { value: 'posts', label: 'Posts' },
+            { value: 'pages', label: 'Pages' },
+            { value: 'pictures', label: 'Pictures' }
+          ],
+          default: 'all'
+        },
+        sortBy: {
+          type: 'select',
+          label: 'Sort By',
+          description: 'Default sort order for the feed',
+          options: [
+            { value: 'latest', label: 'Latest' },
+            { value: 'top', label: 'Top' }
+          ],
+          default: 'latest'
+        },
+        viewMode: {
+          type: 'select',
+          label: 'View Mode',
+          description: 'Default display mode for the feed',
+          options: [
+            { value: 'grid', label: 'Grid' },
+            { value: 'large', label: 'Large Gallery' },
+            { value: 'list', label: 'List' }
+          ],
+          default: 'grid'
+        },
+        showCategories: {
+          type: 'boolean',
+          label: 'Show Categories Sidebar',
+          description: 'Show the category tree sidebar on desktop',
+          default: false
+        },
+        userId: {
+          type: 'userPicker',
+          label: 'User Filter',
+          description: 'Filter feed to show only content from a specific user',
+          default: ''
+        },
+        showSortBar: {
+          type: 'boolean',
+          label: 'Show Sort Bar',
+          description: 'Show the sort and category toggle bar',
+          default: true
+        },
+        showLayoutToggles: {
+          type: 'boolean',
+          label: 'Show Layout Toggles',
+          description: 'Show grid/large/list view toggle buttons',
+          default: true
+        },
+        showFooter: {
+          type: 'boolean',
+          label: 'Show Footer',
+          description: 'Show the site footer below the feed',
+          default: false
+        },
+        center: {
+          type: 'boolean',
+          label: 'Center Content',
+          description: 'Center the widget content with a maximum width container',
+          default: false
+        },
+        columns: {
+          type: 'select',
+          label: 'Grid Columns',
+          description: 'Number of columns to display in grid view',
+          options: [
+            { value: 'auto', label: 'Auto (Responsive)' },
+            { value: '1', label: '1 Column' },
+            { value: '2', label: '2 Columns' },
+            { value: '3', label: '3 Columns' },
+            { value: '4', label: '4 Columns' },
+            { value: '5', label: '5 Columns' },
+            { value: '6', label: '6 Columns' }
+          ],
+          default: 'auto'
+        }
+      },
+      minSize: { width: 400, height: 400 },
+      resizable: true,
+      tags: ['category', 'feed', 'home', 'filter', 'section']
+    }
+  });
+
+  // Menu Widget
+  widgetRegistry.register({
+    component: MenuWidget,
+    metadata: {
+      id: 'menu-widget',
+      name: translate('Menu'),
+      description: translate('Navigation menu with custom, page, and category links'),
+      icon: Layout,
+      category: 'navigation',
+      defaultProps: {
+        items: [],
+        orientation: 'horizontal',
+        size: 'md',
+        align: 'left',
+        variant: 'plain',
+        padding: 'none',
+        margin: 'none',
+        bg: 'none',
+        bgFrom: '#3b82f6',
+        bgTo: '#8b5cf6',
+        variables: {}
+      },
+      configSchema: {
+        orientation: {
+          type: 'select',
+          label: 'Orientation',
+          description: 'Menu layout direction',
+          options: [
+            { value: 'horizontal', label: 'Horizontal' },
+            { value: 'vertical', label: 'Vertical' }
+          ],
+          default: 'horizontal'
+        },
+        size: {
+          type: 'select',
+          label: 'Size',
+          description: 'Size of menu items',
+          options: [
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+            { value: 'xl', label: 'Extra Large' }
+          ],
+          default: 'md'
+        },
+        align: {
+          type: 'select',
+          label: 'Alignment',
+          description: 'Horizontal alignment of menu items',
+          options: [
+            { value: 'left', label: 'Left' },
+            { value: 'center', label: 'Center' },
+            { value: 'right', label: 'Right' }
+          ],
+          default: 'left'
+        },
+        variant: {
+          type: 'select',
+          label: 'Style',
+          description: 'Visual style of the menu',
+          options: [
+            { value: 'plain', label: 'Plain' },
+            { value: 'bar', label: 'Bar (Solid Background)' },
+            { value: 'glass', label: 'Glass (Blur Effect)' },
+            { value: 'pill', label: 'Pill (Rounded Items)' },
+            { value: 'underline', label: 'Underline' }
+          ],
+          default: 'plain'
+        },
+        padding: {
+          type: 'select',
+          label: 'Padding',
+          description: 'Inner spacing around menu items',
+          options: [
+            { value: 'none', label: 'None' },
+            { value: 'xs', label: 'XS' },
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+            { value: 'xl', label: 'XL' }
+          ],
+          default: 'none'
+        },
+        margin: {
+          type: 'select',
+          label: 'Margin',
+          description: 'Outer spacing around the menu',
+          options: [
+            { value: 'none', label: 'None' },
+            { value: 'xs', label: 'XS' },
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+            { value: 'xl', label: 'XL' }
+          ],
+          default: 'none'
+        },
+        bg: {
+          type: 'select',
+          label: 'Background',
+          description: 'Background color or gradient for the full row',
+          options: [
+            { value: 'none', label: 'None (Transparent)' },
+            { value: 'muted', label: 'Muted' },
+            { value: 'dark', label: 'Dark' },
+            { value: 'primary', label: 'Primary' },
+            { value: 'accent', label: 'Accent' },
+            { value: 'gradient-primary', label: 'Gradient — Primary' },
+            { value: 'gradient-dark', label: 'Gradient — Dark' },
+            { value: 'gradient-ocean', label: 'Gradient — Ocean' },
+            { value: 'gradient-sunset', label: 'Gradient — Sunset' },
+            { value: 'gradient-forest', label: 'Gradient — Forest' },
+            { value: 'gradient-brand', label: 'Gradient — Brand (Amber)' },
+            { value: 'custom', label: 'Custom Gradient…' }
+          ],
+          default: 'none'
+        },
+        bgFrom: {
+          type: 'color',
+          label: 'Gradient Start',
+          description: 'Left / start color of the custom gradient',
+          default: '#3b82f6',
+          showWhen: { field: 'bg', value: 'custom' }
+        },
+        bgTo: {
+          type: 'color',
+          label: 'Gradient End',
+          description: 'Right / end color of the custom gradient',
+          default: '#8b5cf6',
+          showWhen: { field: 'bg', value: 'custom' }
+        }
+      },
+      minSize: { width: 200, height: 40 },
+      resizable: true,
+      tags: ['menu', 'navigation', 'links', 'nav']
+    }
+  });
+
+}
diff --git a/packages/ui/src/lib/replicate.ts b/packages/ui/src/lib/replicate.ts
index 42723096..cc5e4306 100644
--- a/packages/ui/src/lib/replicate.ts
+++ b/packages/ui/src/lib/replicate.ts
@@ -1,47 +1,47 @@
-import { supabase } from "@/integrations/supabase/client";
-
-// Simple logger for user feedback
-const logger = {
-  debug: (message: string, data?: any) => console.debug(`[DEBUG] ${message}`, data),
-  info: (message: string, data?: any) => console.info(`[INFO] ${message}`, data),
-  warn: (message: string, data?: any) => console.warn(`[WARN] ${message}`, data),
-  error: (message: string, data?: any) => console.error(`[ERROR] ${message}`, data),
-};
-
-// Call the edge function to proxy Replicate API requests
-const callReplicateProxy = async (model: string, input: any): Promise<any> => {
-  const { data: { session } } = await supabase.auth.getSession();
-  if (!session) {
-    throw new Error('Not authenticated');
-  }
-
-  const SUPABASE_URL = "https://ytoadlpbdguriiccjnip.supabase.co";
-  
-  const response = await fetch(`${SUPABASE_URL}/functions/v1/replicate-proxy`, {
-    method: 'POST',
-    headers: {
-      'Authorization': `Bearer ${session.access_token}`,
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      action: 'run',
-      model,
-      input,
-    }),
-  });
-
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.error || 'Failed to call Replicate proxy');
-  }
-
-  const result = await response.json();
-  if (!result.success) {
-    throw new Error(result.error || 'Replicate request failed');
-  }
-
-  return result.output;
-};
+import { supabase } from "@/integrations/supabase/client";
+
+// Simple logger for user feedback
+const logger = {
+  debug: (message: string, data?: any) => console.debug(`[DEBUG] ${message}`, data),
+  info: (message: string, data?: any) => console.info(`[INFO] ${message}`, data),
+  warn: (message: string, data?: any) => console.warn(`[WARN] ${message}`, data),
+  error: (message: string, data?: any) => console.error(`[ERROR] ${message}`, data),
+};
+
+// Call the edge function to proxy Replicate API requests
+const callReplicateProxy = async (model: string, input: any): Promise<any> => {
+  const { data: { session } } = await supabase.auth.getSession();
+  if (!session) {
+    throw new Error('Not authenticated');
+  }
+
+  const SUPABASE_URL = "https://ytoadlpbdguriiccjnip.supabase.co";
+  
+  const response = await fetch(`${SUPABASE_URL}/functions/v1/replicate-proxy`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${session.access_token}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      action: 'run',
+      model,
+      input,
+    }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to call Replicate proxy');
+  }
+
+  const result = await response.json();
+  if (!result.success) {
+    throw new Error(result.error || 'Replicate request failed');
+  }
+
+  return result.output;
+};
 
 // Helper function to convert File to base64 data URL
 const fileToDataURL = (file: File): Promise<string> => {
@@ -70,142 +70,142 @@ interface ImageResult {
   text?: string;
 }
 
-// Generate image using Replicate (text-to-image)
-export const createImageWithReplicate = async (
-  prompt: string,
-  model: string = 'bytedance/seedream-4',
-  apiKey?: string
-): Promise<ImageResult | null> => {
-  try {
-    logger.info('Starting Replicate image generation', {
-      model,
-      promptLength: prompt.length,
-      promptPreview: prompt.substring(0, 100) + '...'
-    });
-
-    const output = await callReplicateProxy(model, {
-      prompt: prompt,
-      num_inference_steps: 20,
-      guidance_scale: 7.5,
-    });
-
-    logger.debug('Replicate API response:', { output });
-
-    // Handle different output formats
-    let imageUrl: string;
-    
-    if (Array.isArray(output) && output.length > 0) {
-      imageUrl = output[0];
-    } else if (typeof output === 'string') {
-      imageUrl = output;
-    } else if (output && typeof output === 'object' && 'url' in output) {
-      imageUrl = (output as any).url;
-    } else {
-      logger.error('Unexpected output format from Replicate:', output);
-      throw new Error('Unexpected output format from Replicate API');
-    }
-
-    logger.info('Image URL received from Replicate:', imageUrl);
-
-    // Fetch the image and convert to ArrayBuffer
-    const response = await fetch(imageUrl);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch generated image: ${response.statusText}`);
-    }
-
-    const arrayBuffer = await response.arrayBuffer();
-
-    logger.info('Successfully generated image with Replicate', {
-      model,
-      imageSize: arrayBuffer.byteLength
-    });
-
-    return {
-      imageData: arrayBuffer,
-      text: undefined // Replicate doesn't return text descriptions
-    };
-
-  } catch (error: any) {
-    logger.error('Replicate image generation failed:', {
-      error: error.message,
-      model,
-      promptPreview: prompt.substring(0, 100) + '...'
-    });
-    throw error;
-  }
-};
+// Generate image using Replicate (text-to-image)
+export const createImageWithReplicate = async (
+  prompt: string,
+  model: string = 'bytedance/seedream-4',
+  apiKey?: string
+): Promise<ImageResult | null> => {
+  try {
+    logger.info('Starting Replicate image generation', {
+      model,
+      promptLength: prompt.length,
+      promptPreview: prompt.substring(0, 100) + '...'
+    });
 
-// Edit image using Replicate (image-to-image)
-export const editImageWithReplicate = async (
-  prompt: string,
-  imageFiles: File[],
-  model: string = 'bytedance/seedream-4',
-  apiKey?: string
-): Promise<ImageResult | null> => {
-  try {
-    logger.info('Starting Replicate image editing', {
-      model,
-      imageCount: imageFiles.length,
-      promptLength: prompt.length,
-      promptPreview: prompt.substring(0, 100) + '...'
-    });
-
-    // Convert the first image to data URL for Replicate
-    const imageDataURL = await fileToDataURL(imageFiles[0]);
-
-    const output = await callReplicateProxy(model, {
-      prompt: prompt,
-      image: imageDataURL,
-      num_inference_steps: 20,
-      guidance_scale: 7.5,
-    });
-
-    logger.debug('Replicate API response (edit):', { output });
-
-    // Handle different output formats
-    let imageUrl: string;
-    
-    if (Array.isArray(output) && output.length > 0) {
-      imageUrl = output[0];
-    } else if (typeof output === 'string') {
-      imageUrl = output;
-    } else if (output && typeof output === 'object' && 'url' in output) {
-      imageUrl = (output as any).url;
-    } else {
-      logger.error('Unexpected output format from Replicate:', output);
-      throw new Error('Unexpected output format from Replicate API');
-    }
-
-    logger.info('Edited image URL received from Replicate:', imageUrl);
-
-    // Fetch the image and convert to ArrayBuffer
-    const response = await fetch(imageUrl);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch edited image: ${response.statusText}`);
-    }
-
-    const arrayBuffer = await response.arrayBuffer();
-
-    logger.info('Successfully edited image with Replicate', {
-      model,
-      imageSize: arrayBuffer.byteLength
-    });
-
-    return {
-      imageData: arrayBuffer,
-      text: undefined
-    };
-
-  } catch (error: any) {
-    logger.error('Replicate image editing failed:', {
-      error: error.message,
-      model,
-      imageCount: imageFiles.length,
-      promptPreview: prompt.substring(0, 100) + '...'
-    });
-    throw error;
-  }
-};
+    const output = await callReplicateProxy(model, {
+      prompt: prompt,
+      num_inference_steps: 20,
+      guidance_scale: 7.5,
+    });
+
+    logger.debug('Replicate API response:', { output });
+
+    // Handle different output formats
+    let imageUrl: string;
+    
+    if (Array.isArray(output) && output.length > 0) {
+      imageUrl = output[0];
+    } else if (typeof output === 'string') {
+      imageUrl = output;
+    } else if (output && typeof output === 'object' && 'url' in output) {
+      imageUrl = (output as any).url;
+    } else {
+      logger.error('Unexpected output format from Replicate:', output);
+      throw new Error('Unexpected output format from Replicate API');
+    }
+
+    logger.info('Image URL received from Replicate:', imageUrl);
+
+    // Fetch the image and convert to ArrayBuffer
+    const response = await fetch(imageUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch generated image: ${response.statusText}`);
+    }
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    logger.info('Successfully generated image with Replicate', {
+      model,
+      imageSize: arrayBuffer.byteLength
+    });
+
+    return {
+      imageData: arrayBuffer,
+      text: undefined // Replicate doesn't return text descriptions
+    };
+
+  } catch (error: any) {
+    logger.error('Replicate image generation failed:', {
+      error: error.message,
+      model,
+      promptPreview: prompt.substring(0, 100) + '...'
+    });
+    throw error;
+  }
+};
+
+// Edit image using Replicate (image-to-image)
+export const editImageWithReplicate = async (
+  prompt: string,
+  imageFiles: File[],
+  model: string = 'bytedance/seedream-4',
+  apiKey?: string
+): Promise<ImageResult | null> => {
+  try {
+    logger.info('Starting Replicate image editing', {
+      model,
+      imageCount: imageFiles.length,
+      promptLength: prompt.length,
+      promptPreview: prompt.substring(0, 100) + '...'
+    });
+
+    // Convert the first image to data URL for Replicate
+    const imageDataURL = await fileToDataURL(imageFiles[0]);
+
+    const output = await callReplicateProxy(model, {
+      prompt: prompt,
+      image: imageDataURL,
+      num_inference_steps: 20,
+      guidance_scale: 7.5,
+    });
+
+    logger.debug('Replicate API response (edit):', { output });
+
+    // Handle different output formats
+    let imageUrl: string;
+    
+    if (Array.isArray(output) && output.length > 0) {
+      imageUrl = output[0];
+    } else if (typeof output === 'string') {
+      imageUrl = output;
+    } else if (output && typeof output === 'object' && 'url' in output) {
+      imageUrl = (output as any).url;
+    } else {
+      logger.error('Unexpected output format from Replicate:', output);
+      throw new Error('Unexpected output format from Replicate API');
+    }
+
+    logger.info('Edited image URL received from Replicate:', imageUrl);
+
+    // Fetch the image and convert to ArrayBuffer
+    const response = await fetch(imageUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch edited image: ${response.statusText}`);
+    }
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    logger.info('Successfully edited image with Replicate', {
+      model,
+      imageSize: arrayBuffer.byteLength
+    });
+
+    return {
+      imageData: arrayBuffer,
+      text: undefined
+    };
+
+  } catch (error: any) {
+    logger.error('Replicate image editing failed:', {
+      error: error.message,
+      model,
+      imageCount: imageFiles.length,
+      promptPreview: prompt.substring(0, 100) + '...'
+    });
+    throw error;
+  }
+};
 
 // Export the logger for consistency
 export { logger };
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
index a5ef1935..f0217645 100644
--- a/packages/ui/src/lib/utils.ts
+++ b/packages/ui/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/ui/src/modules/ai/components/ToolSections.tsx b/packages/ui/src/modules/ai/components/ToolSections.tsx
index ef44ba80..b199154e 100644
--- a/packages/ui/src/modules/ai/components/ToolSections.tsx
+++ b/packages/ui/src/modules/ai/components/ToolSections.tsx
@@ -1,233 +1,233 @@
-/**
- * ToolSections — shared tool toggle sections used by ChatSidebar and AIPageGenerator.
- * Each section is a collapsible with a switch toggle + description of available tools.
- */
-
-import React from 'react';
-import { Wrench, FolderOpen, Settings, Globe, Image as ImageIcon } from 'lucide-react';
-import { T } from '@/i18n';
-import { Switch } from '@/components/ui/switch';
-import CollapsibleSection from '@/components/CollapsibleSection';
-import { ModelSelectorPanel } from '@/modules/ai/images/components';
-
-export interface ToolSectionsProps {
-    /** Storage key prefix for collapsible states (e.g. 'chat-tool' or 'aipg-tool') */
-    storagePrefix?: string;
-    /** ID prefix for switch elements */
-    idPrefix?: string;
-
-    toolsEnabled: boolean;
-    onToolsEnabledChange: (v: boolean) => void;
-    pageToolsEnabled: boolean;
-    onPageToolsEnabledChange: (v: boolean) => void;
-    imageToolsEnabled: boolean;
-    onImageToolsEnabledChange: (v: boolean) => void;
-    imageModel: string;
-    onImageModelChange: (model: string) => void;
-    vfsToolsEnabled: boolean;
-    onVfsToolsEnabledChange: (v: boolean) => void;
-    webSearchEnabled: boolean;
-    onWebSearchEnabledChange: (v: boolean) => void;
-
-    isGenerating: boolean;
-
-    /** Extra toggles to render at the end */
-    extraToggles?: React.ReactNode;
-}
-
-const ToolSections: React.FC<ToolSectionsProps> = ({
-    storagePrefix = 'chat-tool',
-    idPrefix = '',
-    toolsEnabled, onToolsEnabledChange,
-    pageToolsEnabled, onPageToolsEnabledChange,
-    imageToolsEnabled, onImageToolsEnabledChange,
-    imageModel, onImageModelChange,
-    vfsToolsEnabled, onVfsToolsEnabledChange,
-    webSearchEnabled, onWebSearchEnabledChange,
-    isGenerating,
-    extraToggles,
-}) => (
-    <div className="space-y-1">
-
-        {/* Search Tools */}
-        <CollapsibleSection
-            title={
-                <div className="flex items-center gap-2">
-                    <Wrench className="h-3.5 w-3.5 text-muted-foreground" />
-                    <span className="text-sm"><T>Search Tools</T></span>
-                </div>
-            }
-            storageKey={`${storagePrefix}-search`}
-            minimal
-            initiallyOpen={false}
-            headerContent={
-                <Switch
-                    id={`${idPrefix}tools-toggle`}
-                    checked={toolsEnabled}
-                    onCheckedChange={onToolsEnabledChange}
-                    disabled={isGenerating}
-                />
-            }
-        >
-            <div className="space-y-0.5 pl-2">
-                {[
-                    ['search_content', 'Full-text search across pages, posts, pictures'],
-                    ['find_pages', 'Find pages by query'],
-                    ['find_pictures', 'Find pictures by query'],
-                    ['get_page_content', 'Read a page\'s full content'],
-                    ['list_categories', 'List all categories'],
-                    ['find_by_category', 'List items in a category'],
-                ].map(([name, desc]) => (
-                    <div key={name} className="text-[11px] text-muted-foreground">
-                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
-                    </div>
-                ))}
-            </div>
-        </CollapsibleSection>
-
-        {/* Page Tools */}
-        <CollapsibleSection
-            title={
-                <div className="flex items-center gap-2">
-                    <Wrench className="h-3.5 w-3.5 text-muted-foreground" />
-                    <span className="text-sm"><T>Page Tools</T></span>
-                </div>
-            }
-            storageKey={`${storagePrefix}-page`}
-            minimal
-            initiallyOpen={false}
-            headerContent={
-                <Switch
-                    id={`${idPrefix}page-tools-toggle`}
-                    checked={pageToolsEnabled}
-                    onCheckedChange={onPageToolsEnabledChange}
-                    disabled={isGenerating}
-                />
-            }
-        >
-            <div className="space-y-0.5 pl-2">
-                {[
-                    ['create_page', 'Create a new page with markdown content'],
-                ].map(([name, desc]) => (
-                    <div key={name} className="text-[11px] text-muted-foreground">
-                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
-                    </div>
-                ))}
-            </div>
-        </CollapsibleSection>
-
-        {/* Image Tools — with ModelSelectorPanel settings */}
-        <CollapsibleSection
-            title={
-                <div className="flex items-center gap-2">
-                    <ImageIcon className="h-3.5 w-3.5 text-muted-foreground" />
-                    <span className="text-sm"><T>Image Tools</T></span>
-                    {imageToolsEnabled && <Settings className="h-3 w-3 text-muted-foreground/50" />}
-                </div>
-            }
-            storageKey={`${storagePrefix}-image`}
-            minimal
-            initiallyOpen={false}
-            headerContent={
-                <Switch
-                    id={`${idPrefix}image-tools-toggle`}
-                    checked={imageToolsEnabled}
-                    onCheckedChange={onImageToolsEnabledChange}
-                    disabled={isGenerating}
-                />
-            }
-        >
-            <div className="space-y-3 pl-2">
-                <div className="space-y-0.5">
-                    {[
-                        ['generate_image', 'Generate an image from a text prompt'],
-                    ].map(([name, desc]) => (
-                        <div key={name} className="text-[11px] text-muted-foreground">
-                            <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
-                        </div>
-                    ))}
-                </div>
-                {imageToolsEnabled && (
-                    <div className="border-t border-border pt-2">
-                        <ModelSelectorPanel
-                            value={imageModel}
-                            onChange={onImageModelChange}
-                            showStepNumber={false}
-                        />
-                    </div>
-                )}
-            </div>
-        </CollapsibleSection>
-
-        {/* VFS / File Tools */}
-        <CollapsibleSection
-            title={
-                <div className="flex items-center gap-2">
-                    <FolderOpen className="h-3.5 w-3.5 text-muted-foreground" />
-                    <span className="text-sm"><T>File Tools</T></span>
-                </div>
-            }
-            storageKey={`${storagePrefix}-vfs`}
-            minimal
-            initiallyOpen={false}
-            headerContent={
-                <Switch
-                    id={`${idPrefix}vfs-tools-toggle`}
-                    checked={vfsToolsEnabled}
-                    onCheckedChange={onVfsToolsEnabledChange}
-                    disabled={isGenerating}
-                />
-            }
-        >
-            <div className="space-y-0.5 pl-2">
-                {[
-                    ['fs_ls', 'List directory contents'],
-                    ['fs_read', 'Read file contents'],
-                    ['fs_write', 'Write/create a file'],
-                    ['fs_mkdir', 'Create a directory'],
-                    ['fs_delete', 'Delete a file or directory'],
-                ].map(([name, desc]) => (
-                    <div key={name} className="text-[11px] text-muted-foreground">
-                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
-                    </div>
-                ))}
-            </div>
-        </CollapsibleSection>
-
-        {/* Web Search Tools (SerpAPI) */}
-        <CollapsibleSection
-            title={
-                <div className="flex items-center gap-2">
-                    <Globe className="h-3.5 w-3.5 text-muted-foreground" />
-                    <span className="text-sm"><T>Web Search</T></span>
-                </div>
-            }
-            storageKey={`${storagePrefix}-web-search`}
-            minimal
-            initiallyOpen={false}
-            headerContent={
-                <Switch
-                    id={`${idPrefix}web-search-toggle`}
-                    checked={webSearchEnabled}
-                    onCheckedChange={onWebSearchEnabledChange}
-                    disabled={isGenerating}
-                />
-            }
-        >
-            <div className="space-y-0.5 pl-2">
-                {[
-                    ['web_search', 'Search the web via Google (SerpAPI)'],
-                    ['markdown_scraper', 'Scrape URL and extract readable markdown'],
-                ].map(([name, desc]) => (
-                    <div key={name} className="text-[11px] text-muted-foreground">
-                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
-                    </div>
-                ))}
-            </div>
-        </CollapsibleSection>
-
-        {extraToggles}
-    </div>
-);
-
-export default ToolSections;
+/**
+ * ToolSections — shared tool toggle sections used by ChatSidebar and AIPageGenerator.
+ * Each section is a collapsible with a switch toggle + description of available tools.
+ */
+
+import React from 'react';
+import { Wrench, FolderOpen, Settings, Globe, Image as ImageIcon } from 'lucide-react';
+import { T } from '@/i18n';
+import { Switch } from '@/components/ui/switch';
+import CollapsibleSection from '@/components/CollapsibleSection';
+import { ModelSelectorPanel } from '@/modules/ai/images/components';
+
+export interface ToolSectionsProps {
+    /** Storage key prefix for collapsible states (e.g. 'chat-tool' or 'aipg-tool') */
+    storagePrefix?: string;
+    /** ID prefix for switch elements */
+    idPrefix?: string;
+
+    toolsEnabled: boolean;
+    onToolsEnabledChange: (v: boolean) => void;
+    pageToolsEnabled: boolean;
+    onPageToolsEnabledChange: (v: boolean) => void;
+    imageToolsEnabled: boolean;
+    onImageToolsEnabledChange: (v: boolean) => void;
+    imageModel: string;
+    onImageModelChange: (model: string) => void;
+    vfsToolsEnabled: boolean;
+    onVfsToolsEnabledChange: (v: boolean) => void;
+    webSearchEnabled: boolean;
+    onWebSearchEnabledChange: (v: boolean) => void;
+
+    isGenerating: boolean;
+
+    /** Extra toggles to render at the end */
+    extraToggles?: React.ReactNode;
+}
+
+const ToolSections: React.FC<ToolSectionsProps> = ({
+    storagePrefix = 'chat-tool',
+    idPrefix = '',
+    toolsEnabled, onToolsEnabledChange,
+    pageToolsEnabled, onPageToolsEnabledChange,
+    imageToolsEnabled, onImageToolsEnabledChange,
+    imageModel, onImageModelChange,
+    vfsToolsEnabled, onVfsToolsEnabledChange,
+    webSearchEnabled, onWebSearchEnabledChange,
+    isGenerating,
+    extraToggles,
+}) => (
+    <div className="space-y-1">
+
+        {/* Search Tools */}
+        <CollapsibleSection
+            title={
+                <div className="flex items-center gap-2">
+                    <Wrench className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-sm"><T>Search Tools</T></span>
+                </div>
+            }
+            storageKey={`${storagePrefix}-search`}
+            minimal
+            initiallyOpen={false}
+            headerContent={
+                <Switch
+                    id={`${idPrefix}tools-toggle`}
+                    checked={toolsEnabled}
+                    onCheckedChange={onToolsEnabledChange}
+                    disabled={isGenerating}
+                />
+            }
+        >
+            <div className="space-y-0.5 pl-2">
+                {[
+                    ['search_content', 'Full-text search across pages, posts, pictures'],
+                    ['find_pages', 'Find pages by query'],
+                    ['find_pictures', 'Find pictures by query'],
+                    ['get_page_content', 'Read a page\'s full content'],
+                    ['list_categories', 'List all categories'],
+                    ['find_by_category', 'List items in a category'],
+                ].map(([name, desc]) => (
+                    <div key={name} className="text-[11px] text-muted-foreground">
+                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
+                    </div>
+                ))}
+            </div>
+        </CollapsibleSection>
+
+        {/* Page Tools */}
+        <CollapsibleSection
+            title={
+                <div className="flex items-center gap-2">
+                    <Wrench className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-sm"><T>Page Tools</T></span>
+                </div>
+            }
+            storageKey={`${storagePrefix}-page`}
+            minimal
+            initiallyOpen={false}
+            headerContent={
+                <Switch
+                    id={`${idPrefix}page-tools-toggle`}
+                    checked={pageToolsEnabled}
+                    onCheckedChange={onPageToolsEnabledChange}
+                    disabled={isGenerating}
+                />
+            }
+        >
+            <div className="space-y-0.5 pl-2">
+                {[
+                    ['create_page', 'Create a new page with markdown content'],
+                ].map(([name, desc]) => (
+                    <div key={name} className="text-[11px] text-muted-foreground">
+                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
+                    </div>
+                ))}
+            </div>
+        </CollapsibleSection>
+
+        {/* Image Tools — with ModelSelectorPanel settings */}
+        <CollapsibleSection
+            title={
+                <div className="flex items-center gap-2">
+                    <ImageIcon className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-sm"><T>Image Tools</T></span>
+                    {imageToolsEnabled && <Settings className="h-3 w-3 text-muted-foreground/50" />}
+                </div>
+            }
+            storageKey={`${storagePrefix}-image`}
+            minimal
+            initiallyOpen={false}
+            headerContent={
+                <Switch
+                    id={`${idPrefix}image-tools-toggle`}
+                    checked={imageToolsEnabled}
+                    onCheckedChange={onImageToolsEnabledChange}
+                    disabled={isGenerating}
+                />
+            }
+        >
+            <div className="space-y-3 pl-2">
+                <div className="space-y-0.5">
+                    {[
+                        ['generate_image', 'Generate an image from a text prompt'],
+                    ].map(([name, desc]) => (
+                        <div key={name} className="text-[11px] text-muted-foreground">
+                            <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
+                        </div>
+                    ))}
+                </div>
+                {imageToolsEnabled && (
+                    <div className="border-t border-border pt-2">
+                        <ModelSelectorPanel
+                            value={imageModel}
+                            onChange={onImageModelChange}
+                            showStepNumber={false}
+                        />
+                    </div>
+                )}
+            </div>
+        </CollapsibleSection>
+
+        {/* VFS / File Tools */}
+        <CollapsibleSection
+            title={
+                <div className="flex items-center gap-2">
+                    <FolderOpen className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-sm"><T>File Tools</T></span>
+                </div>
+            }
+            storageKey={`${storagePrefix}-vfs`}
+            minimal
+            initiallyOpen={false}
+            headerContent={
+                <Switch
+                    id={`${idPrefix}vfs-tools-toggle`}
+                    checked={vfsToolsEnabled}
+                    onCheckedChange={onVfsToolsEnabledChange}
+                    disabled={isGenerating}
+                />
+            }
+        >
+            <div className="space-y-0.5 pl-2">
+                {[
+                    ['fs_ls', 'List directory contents'],
+                    ['fs_read', 'Read file contents'],
+                    ['fs_write', 'Write/create a file'],
+                    ['fs_mkdir', 'Create a directory'],
+                    ['fs_delete', 'Delete a file or directory'],
+                ].map(([name, desc]) => (
+                    <div key={name} className="text-[11px] text-muted-foreground">
+                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
+                    </div>
+                ))}
+            </div>
+        </CollapsibleSection>
+
+        {/* Web Search Tools (SerpAPI) */}
+        <CollapsibleSection
+            title={
+                <div className="flex items-center gap-2">
+                    <Globe className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-sm"><T>Web Search</T></span>
+                </div>
+            }
+            storageKey={`${storagePrefix}-web-search`}
+            minimal
+            initiallyOpen={false}
+            headerContent={
+                <Switch
+                    id={`${idPrefix}web-search-toggle`}
+                    checked={webSearchEnabled}
+                    onCheckedChange={onWebSearchEnabledChange}
+                    disabled={isGenerating}
+                />
+            }
+        >
+            <div className="space-y-0.5 pl-2">
+                {[
+                    ['web_search', 'Search the web via Google (SerpAPI)'],
+                    ['markdown_scraper', 'Scrape URL and extract readable markdown'],
+                ].map(([name, desc]) => (
+                    <div key={name} className="text-[11px] text-muted-foreground">
+                        <code className="text-[10px] text-primary/70">{name}</code> — <T>{desc}</T>
+                    </div>
+                ))}
+            </div>
+        </CollapsibleSection>
+
+        {extraToggles}
+    </div>
+);
+
+export default ToolSections;
diff --git a/packages/ui/src/modules/layout/GenericCanvas.tsx b/packages/ui/src/modules/layout/GenericCanvas.tsx
index c76bab97..2f800d18 100644
--- a/packages/ui/src/modules/layout/GenericCanvas.tsx
+++ b/packages/ui/src/modules/layout/GenericCanvas.tsx
@@ -1,44 +1,44 @@
-import React, { lazy, Suspense } from 'react';
-import GenericCanvasView from './GenericCanvasView';
-
-// Re-export the full props type so existing consumers keep working
-export type { GenericCanvasEditProps as GenericCanvasProps } from './GenericCanvasEdit';
-
-// Lazy-load the heavy edit component (WidgetPalette, upload utils, supabase, etc.)
-const GenericCanvasEdit = lazy(() => import('./GenericCanvasEdit'));
-
-import type { GenericCanvasEditProps } from './GenericCanvasEdit';
-
-const GenericCanvasComponent: React.FC<GenericCanvasEditProps> = (props) => {
-  if (!props.isEditMode) {
-    return (
-      <GenericCanvasView
-        pageId={props.pageId}
-        pageName={props.pageName}
-        className={props.className}
-        initialLayout={props.initialLayout}
-        contextVariables={props.contextVariables}
-        pageContext={props.pageContext}
-      />
-    );
-  }
-
-  return (
-    <Suspense
-      fallback={
-        <GenericCanvasView
-          pageId={props.pageId}
-          pageName={props.pageName}
-          className={props.className}
-          initialLayout={props.initialLayout}
-          contextVariables={props.contextVariables}
-          pageContext={props.pageContext}
-        />
-      }
-    >
-      <GenericCanvasEdit {...props} />
-    </Suspense>
-  );
-};
-
-export const GenericCanvas = GenericCanvasComponent;
\ No newline at end of file
+import React, { lazy, Suspense } from 'react';
+import GenericCanvasView from './GenericCanvasView';
+
+// Re-export the full props type so existing consumers keep working
+export type { GenericCanvasEditProps as GenericCanvasProps } from './GenericCanvasEdit';
+
+// Lazy-load the heavy edit component (WidgetPalette, upload utils, supabase, etc.)
+const GenericCanvasEdit = lazy(() => import('./GenericCanvasEdit'));
+
+import type { GenericCanvasEditProps } from './GenericCanvasEdit';
+
+const GenericCanvasComponent: React.FC<GenericCanvasEditProps> = (props) => {
+  if (!props.isEditMode) {
+    return (
+      <GenericCanvasView
+        pageId={props.pageId}
+        pageName={props.pageName}
+        className={props.className}
+        initialLayout={props.initialLayout}
+        contextVariables={props.contextVariables}
+        pageContext={props.pageContext}
+      />
+    );
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <GenericCanvasView
+          pageId={props.pageId}
+          pageName={props.pageName}
+          className={props.className}
+          initialLayout={props.initialLayout}
+          contextVariables={props.contextVariables}
+          pageContext={props.pageContext}
+        />
+      }
+    >
+      <GenericCanvasEdit {...props} />
+    </Suspense>
+  );
+};
+
+export const GenericCanvas = GenericCanvasComponent;
diff --git a/packages/ui/src/modules/layout/LayoutContainer.tsx b/packages/ui/src/modules/layout/LayoutContainer.tsx
index ac45d9fe..cf264c68 100644
--- a/packages/ui/src/modules/layout/LayoutContainer.tsx
+++ b/packages/ui/src/modules/layout/LayoutContainer.tsx
@@ -1,21 +1,21 @@
-import React, { lazy, Suspense } from 'react';
-import LayoutContainerView from './LayoutContainerView';
-import type { LayoutContainerEditProps } from './LayoutContainerEdit';
-
-const LayoutContainerEdit = lazy(() => import('./LayoutContainerEdit'));
-
-export type { LayoutContainerEditProps as LayoutContainerProps } from './LayoutContainerEdit';
-
-const LayoutContainerComponent: React.FC<LayoutContainerEditProps> = (props) => {
-  if (!props.isEditMode) {
-    return <LayoutContainerView {...props} />;
-  }
-
-  return (
-    <Suspense fallback={<LayoutContainerView {...props} />}>
-      <LayoutContainerEdit {...props} />
-    </Suspense>
-  );
-};
-
-export const LayoutContainer = LayoutContainerComponent;
\ No newline at end of file
+import React, { lazy, Suspense } from 'react';
+import LayoutContainerView from './LayoutContainerView';
+import type { LayoutContainerEditProps } from './LayoutContainerEdit';
+
+const LayoutContainerEdit = lazy(() => import('./LayoutContainerEdit'));
+
+export type { LayoutContainerEditProps as LayoutContainerProps } from './LayoutContainerEdit';
+
+const LayoutContainerComponent: React.FC<LayoutContainerEditProps> = (props) => {
+  if (!props.isEditMode) {
+    return <LayoutContainerView {...props} />;
+  }
+
+  return (
+    <Suspense fallback={<LayoutContainerView {...props} />}>
+      <LayoutContainerEdit {...props} />
+    </Suspense>
+  );
+};
+
+export const LayoutContainer = LayoutContainerComponent;
diff --git a/packages/ui/src/modules/layout/LayoutContainerEdit.tsx b/packages/ui/src/modules/layout/LayoutContainerEdit.tsx
index 85d67d79..1eb67f52 100644
--- a/packages/ui/src/modules/layout/LayoutContainerEdit.tsx
+++ b/packages/ui/src/modules/layout/LayoutContainerEdit.tsx
@@ -1,809 +1,809 @@
-import React, { useState } from 'react';
-import { cn } from '@/lib/utils';
-import { useImageDrop } from '@/hooks/useImageDrop';
-import { Button } from '@/components/ui/button';
-import { Plus, Minus, Grid3X3, Trash2, Settings, ArrowUp, ArrowDown, GripVertical } from 'lucide-react';
-import { LayoutContainer as LayoutContainerType, WidgetInstance } from '@/modules/layout/LayoutManager';
-import { widgetRegistry } from '@/lib/widgetRegistry';
-import { WidgetSettingsManager } from '@/components/widgets/WidgetSettingsManager';
-import { WidgetMovementControls } from '@/components/widgets/WidgetMovementControls';
-import { useLayout } from '@/modules/layout/LayoutContext';
-import CollapsibleSection from '@/components/CollapsibleSection';
-import { ContainerSettingsManager } from '@/components/containers/ContainerSettingsManager';
-import { useDraggable, useDroppable } from '@dnd-kit/core';
-import { LayoutContainer } from './LayoutContainer';
-
-// Droppable slot for empty areas (column indicators, add-widget buttons)
-const DroppableSlot: React.FC<{
-  containerId: string;
-  index: number;
-  isEditMode: boolean;
-  children: React.ReactNode;
-}> = ({ containerId, index, isEditMode, children }) => {
-  const { setNodeRef, isOver } = useDroppable({
-    id: `slot-${containerId}-${index}`,
-    data: {
-      type: 'container-cell',
-      containerId,
-      index,
-    },
-    disabled: !isEditMode,
-  });
-
-  return (
-    <div ref={setNodeRef} className={cn(isOver && 'ring-2 ring-blue-400 ring-offset-2 rounded-lg')}>
-      {children}
-    </div>
-  );
-};
-
-export interface LayoutContainerEditProps {
-  container: LayoutContainerType;
-  isEditMode: boolean;
-  pageId: string;
-  selectedContainerId?: string | null;
-  onSelect?: (containerId: string, pageId?: string) => void;
-  onAddWidget?: (containerId: string, targetColumn?: number) => void;
-  onRemoveWidget?: (widgetInstanceId: string) => void;
-  onMoveWidget?: (widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => void;
-  onUpdateColumns?: (containerId: string, columns: number) => void;
-  onUpdateSettings?: (containerId: string, settings: Partial<LayoutContainerType['settings']>) => void;
-  onAddContainer?: (parentContainerId: string) => void;
-  onRemoveContainer?: (containerId: string) => void;
-  onMoveContainer?: (containerId: string, direction: 'up' | 'down') => void;
-  canMoveContainerUp?: boolean;
-  canMoveContainerDown?: boolean;
-  selectedWidgetId?: string | null;
-  selectedWidgetIds?: Set<string>;
-  onSelectWidget?: (widgetId: string, pageId?: string) => void;
-  depth?: number;
-  isCompactMode?: boolean;
-  editingWidgetId?: string | null;
-  onEditWidget?: (widgetId: string | null) => void;
-  newlyAddedWidgetId?: string | null;
-  contextVariables?: Record<string, any>;
-  pageContext?: Record<string, any>;
-  onFilesDrop?: (files: File[], targetColumn?: number) => void;
-}
-
-const LayoutContainerEditComponent: React.FC<LayoutContainerEditProps> = ({
-  container,
-  isEditMode,
-  pageId,
-  selectedContainerId,
-  onSelect,
-  onAddWidget,
-  onRemoveWidget,
-  onMoveWidget,
-  onUpdateColumns,
-  onUpdateSettings,
-  onAddContainer,
-  onRemoveContainer,
-  onMoveContainer,
-  canMoveContainerUp,
-  canMoveContainerDown,
-  selectedWidgetId,
-  selectedWidgetIds,
-  onSelectWidget,
-  depth = 0,
-  isCompactMode = false,
-  editingWidgetId,
-  onEditWidget,
-  newlyAddedWidgetId,
-  contextVariables,
-  pageContext,
-  onFilesDrop,
-}) => {
-  const { isDragging, handlers } = useImageDrop({
-    onFilesDrop: (files) => onFilesDrop?.(files),
-    isEditMode: isEditMode && !!onFilesDrop,
-  });
-  const maxDepth = 3; // Limit nesting depth
-  const canNest = depth < maxDepth;
-  const isSelected = selectedContainerId === container.id;
-  const [showContainerSettings, setShowContainerSettings] = useState(false);
-
-  // Generate responsive grid classes based on container.columns
-  const getGridClasses = (columns: number) => {
-    const baseClass = "grid"; // Always grid with gap
-
-    // Mobile: always 1 column, Desktop: respect container.columns
-    switch (columns) {
-      case 1: return `${baseClass} grid-cols-1`;
-      case 2: return `${baseClass} grid-cols-1 md:grid-cols-2`;
-      case 3: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3`;
-      case 4: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-4`;
-      case 5: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5`;
-      case 6: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6`;
-      default:
-        // For 7+ columns, use a more conservative approach
-        return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-${Math.min(columns, 12)}`;
-    }
-  };
-
-  const gridClasses = getGridClasses(container.columns);
-
-  // Extract container content rendering logic
-  const renderContainerContent = () => (
-    <>
-      {/* Grid Column Indicators (only in edit mode when selected) */}
-      {isEditMode && isSelected && container.widgets.length === 0 && container.children.length === 0 && (
-        <>
-          {Array.from({ length: container.columns }, (_, i) => (
-            <DroppableSlot
-              key={i}
-              containerId={container.id}
-              index={i}
-              isEditMode={isEditMode}
-            >
-              <div
-                className="min-h-[80px] flex items-center justify-center text-blue-500 dark:text-blue-400 text-sm cursor-pointer hover:bg-blue-100/20 dark:hover:bg-blue-800/20 transition-colors"
-                onDoubleClick={(e) => {
-                  e.stopPropagation();
-                  onAddWidget?.(container.id, i);
-                }}
-                title={`Double-click to add widget to column ${i + 1}`}
-              >
-                Col {i + 1}
-              </div>
-            </DroppableSlot>
-          ))}
-        </>
-      )}
-
-      {/* Render Widgets */}
-      {container.widgets
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .map((widget, index) => (
-          <WidgetItem
-            key={widget.id}
-            widget={widget}
-            index={index}
-            containerId={container.id}
-            isEditMode={isEditMode}
-            pageId={pageId}
-            isSelected={selectedWidgetIds ? selectedWidgetIds.has(widget.id) : selectedWidgetId === widget.id}
-            onSelect={() => onSelectWidget?.(widget.id, pageId)}
-            canMoveUp={index > 0}
-            canMoveDown={index < container.widgets.length - 1}
-            onRemove={onRemoveWidget}
-            onMove={onMoveWidget}
-            isEditing={editingWidgetId === widget.id}
-            onEditWidget={onEditWidget}
-            isNew={newlyAddedWidgetId === widget.id}
-            selectedWidgetId={selectedWidgetId}
-            onSelectWidget={onSelectWidget}
-            editingWidgetId={editingWidgetId}
-            contextVariables={contextVariables}
-            pageContext={pageContext}
-            selectedContainerId={selectedContainerId}
-            onSelectContainer={onSelect}
-          />
-        ))}
-
-      {/* Add Widget Buttons - always visible in edit mode at bottom of every container */}
-      {isEditMode && (
-        <>
-          {container.columns > 1 ? (
-            <div className="col-span-full grid gap-4" style={{ gridTemplateColumns: `repeat(${container.columns}, minmax(0, 1fr))` }}>
-              {Array.from({ length: container.columns }, (_, colIndex) => (
-                <DroppableSlot
-                  key={`add-widget-${colIndex}`}
-                  containerId={container.id}
-                  index={container.widgets.length + colIndex}
-                  isEditMode={isEditMode}
-                >
-                  <div
-                    className="flex items-center justify-center min-h-[40px] rounded-lg hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer group"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onAddWidget?.(container.id, colIndex);
-                    }}
-                    title={`Add widget to column ${colIndex + 1}`}
-                  >
-                    <div className="text-center text-slate-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
-                      <Plus className="h-4 w-4 mx-auto" />
-                      <p className="text-[10px]">Col {colIndex + 1}</p>
-                    </div>
-                  </div>
-                </DroppableSlot>
-              ))}
-            </div>
-          ) : (
-            <DroppableSlot
-              containerId={container.id}
-              index={container.widgets.length}
-              isEditMode={isEditMode}
-            >
-              <div
-                className="col-span-full flex items-center justify-center min-h-[36px] rounded-lg hover:bg-blue-50/30 dark:hover:bg-blue-900/20 transition-colors cursor-pointer group"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAddWidget?.(container.id);
-                }}
-                title="Add widget"
-              >
-                <div className="flex items-center gap-1 text-slate-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
-                  <Plus className="h-4 w-4" />
-                  <span className="text-xs">Add Widget</span>
-                </div>
-              </div>
-            </DroppableSlot>
-          )}
-        </>
-      )}
-
-      {/* Render Nested Containers */}
-      {container.children
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .map((childContainer) => (
-          <div key={childContainer.id} className="col-span-full">
-            <LayoutContainer
-              container={childContainer}
-              isEditMode={isEditMode}
-              pageId={pageId}
-              selectedContainerId={selectedContainerId}
-              onSelect={onSelect}
-              onAddWidget={onAddWidget}
-              onRemoveWidget={onRemoveWidget}
-              onMoveWidget={onMoveWidget}
-              onUpdateColumns={onUpdateColumns}
-              onUpdateSettings={onUpdateSettings}
-              onAddContainer={onAddContainer}
-              onRemoveContainer={onRemoveContainer}
-              onMoveContainer={onMoveContainer}
-              canMoveContainerUp={canMoveContainerUp}
-              canMoveContainerDown={canMoveContainerDown}
-              selectedWidgetId={selectedWidgetId}
-              selectedWidgetIds={selectedWidgetIds}
-              onSelectWidget={onSelectWidget}
-              depth={depth + 1}
-              isCompactMode={isCompactMode}
-              editingWidgetId={editingWidgetId}
-              onEditWidget={onEditWidget}
-              newlyAddedWidgetId={newlyAddedWidgetId}
-              contextVariables={contextVariables}
-              pageContext={pageContext}
-            />
-          </div>
-        ))}
-
-
-      {/* Empty State - only show when not showing column indicators */}
-      {container.widgets.length === 0 && container.children.length === 0 && !(isEditMode && isSelected) && !isEditMode && (
-        <div className="col-span-full flex items-center justify-center min-h-[80px] text-slate-500 dark:text-slate-400">
-          <p className="text-sm"></p>
-        </div>
-      )}
-    </>
-  );
-
-  // Handle Enabled State
-  const isContainerEnabled = container.settings?.enabled !== false; // Default to true
-
-  if (!isContainerEnabled && !isEditMode) {
-    return null;
-  }
-
-  return (
-    <div className={cn(
-      "space-y-0",
-      container.settings?.customClassName,
-      !isContainerEnabled && "opacity-50 grayscale transition-all hover:grayscale-0"
-    )}>
-      {/* Edit Mode Controls */}
-      {isEditMode && (
-        <div className={cn(
-          "text-white px-2 sm:px-3 py-1 rounded-t-lg text-xs overflow-hidden cursor-pointer",
-          isSelected ? "bg-blue-500" : "bg-slate-500"
-        )}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (isEditMode) {
-              onSelect?.(container.id, pageId);
-            }
-          }}
-        >
-          {/* Responsive layout: title and buttons wrap on small screens */}
-          <div className="flex items-center justify-between gap-x-2 gap-y-1 min-w-0 flex-wrap">
-            <div className="flex items-center gap-1 min-w-0 flex-grow">
-              <Grid3X3 className="h-3 w-3 shrink-0" />
-              <span className="truncate text-xs font-semibold">
-                {container.settings?.showTitle && container.settings?.title
-                  ? container.settings.title
-                  : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
-                {(container.settings?.collapsible || container.settings?.showTitle) && (
-                  <span className="ml-1 opacity-75 font-normal">⚙️</span>
-                )}
-              </span>
-            </div>
-
-            {/* Minimalist button row - wraps and justifies to the end */}
-            <div className="flex items-center gap-0.5 flex-wrap justify-end">
-              {/* Move controls for root containers */}
-              {depth === 0 && (
-                <div className="flex items-center gap-0.5 mr-1 border-r border-white/20 pr-1">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onMoveContainer?.(container.id, 'up');
-                    }}
-                    disabled={!canMoveContainerUp}
-                    className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
-                    title="Move container up"
-                  >
-                    <ArrowUp className="h-3 w-3" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onMoveContainer?.(container.id, 'down');
-                    }}
-                    disabled={!canMoveContainerDown}
-                    className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
-                    title="Move container down"
-                  >
-                    <ArrowDown className="h-3 w-3" />
-                  </Button>
-                </div>
-              )}
-              {/* Column controls */}
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onUpdateColumns?.(container.id, container.columns - 1);
-                }}
-                disabled={container.columns <= 1}
-                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
-                title="Decrease columns"
-              >
-                <Minus className="h-3 w-3" />
-              </Button>
-
-              <span className="min-w-[12px] text-center text-xs font-medium px-1">{container.columns}</span>
-
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onUpdateColumns?.(container.id, container.columns + 1);
-                }}
-                disabled={container.columns >= 12}
-                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
-                title="Increase columns"
-              >
-                <Plus className="h-3 w-3" />
-              </Button>
-
-              {/* Add widget button */}
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAddWidget?.(container.id);
-                }}
-                className="h-4 px-1 text-white hover:bg-white/20 shrink-0 ml-1"
-                title="Add widget"
-              >
-                <Plus className="h-3 w-3" />
-              </Button>
-
-              {/* Add nested container button */}
-              {canNest && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onAddContainer?.(container.id);
-                  }}
-                  className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
-                  title="Add nested container"
-                >
-                  <Grid3X3 className="h-3 w-3" />
-                </Button>
-              )}
-
-              {/* Container settings button */}
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setShowContainerSettings(true);
-                }}
-                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
-                title="Container settings"
-              >
-                <Settings className="h-3 w-3" />
-              </Button>
-
-              {/* Remove container button */}
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onRemoveContainer?.(container.id);
-                }}
-                className="h-4 px-1 text-white hover:bg-red-400 shrink-0"
-                title="Remove container"
-              >
-                <Trash2 className="h-3 w-3" />
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Container Content */}
-      <div
-        {...handlers}
-        className={cn(
-          "relative transition-all duration-200 min-w-0 overflow-hidden",
-          isEditMode ? "rounded-b-lg" : "",
-          isEditMode && "hover:border-blue-300 cursor-pointer",
-          isSelected && isEditMode && "border-blue-500 bg-blue-50/20 dark:bg-blue-900/20",
-          !isSelected && isEditMode && "border-slate-300/50 dark:border-white/20",
-          !isEditMode && "border-transparent",
-          isDragging && "ring-4 ring-blue-400 ring-opacity-50 bg-blue-50/50 dark:bg-blue-900/50"
-        )}
-        onClick={(e) => {
-          e.stopPropagation();
-          if (isEditMode) {
-            onSelect?.(container.id, pageId);
-          }
-        }}
-      >
-        {container.settings?.collapsible ? (
-          <CollapsibleSection
-            title={
-              container.settings?.showTitle
-                ? (container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`)
-                : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`
-            }
-            initiallyOpen={!container.settings?.collapsed}
-            storageKey={`container-${container.id}-collapsed`}
-            className="border-0 rounded-none shadow-none bg-transparent"
-            minimal={true}
-          >
-            <div
-              className={cn(
-                isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : isEditMode ? "p-2 min-h-[120px]" : "min-h-[120px]",
-                gridClasses,
-                isEditMode && isSelected && "bg-blue-50/10 dark:bg-blue-900/10"
-              )}
-              style={{
-                gap: `${container.gap}px`,
-              }}
-            >
-              {renderContainerContent()}
-            </div>
-          </CollapsibleSection>
-        ) : (
-          <div>
-            {/* Title for non-collapsible containers */}
-            {container.settings?.showTitle && (
-              <div className="px-4 pt-3 pb-1 border-b border-slate-300/30 dark:border-white/10">
-                <h3 className="text-sm font-medium text-slate-700 dark:text-white">
-                  {container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
-                </h3>
-              </div>
-            )}
-            <div
-              className={cn(
-                isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : isEditMode ? "p-2 min-h-[120px]" : "min-h-[120px]",
-                gridClasses,
-                isEditMode && isSelected && "bg-blue-50/10 dark:bg-blue-900/10"
-              )}
-              style={{
-                gap: `${container.gap}px`,
-              }}
-            >
-              {renderContainerContent()}
-            </div>
-          </div>
-        )}
-      </div>
-      {/* Drop Overlay */}
-
-
-      {/* Container Settings Dialog */}
-      {showContainerSettings && (
-        <ContainerSettingsManager
-          isOpen={showContainerSettings}
-          onClose={() => setShowContainerSettings(false)}
-          onSave={(settings) => {
-            onUpdateSettings?.(container.id, settings);
-            setShowContainerSettings(false);
-          }}
-          currentSettings={container.settings}
-          containerInfo={{
-            id: container.id,
-            columns: container.columns,
-          }}
-        />
-      )}
-    </div>
-  );
-};
-
-interface WidgetItemProps {
-  widget: WidgetInstance;
-  index: number;
-  containerId: string;
-  isEditMode: boolean;
-  pageId: string;
-  canMoveUp: boolean;
-  canMoveDown: boolean;
-  onRemove?: (widgetInstanceId: string) => void;
-  onMove?: (widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => void;
-  isSelected?: boolean;
-  onSelect?: () => void;
-  isEditing?: boolean;
-  onEditWidget?: (widgetId: string | null) => void;
-  isNew?: boolean;
-  selectedWidgetId?: string | null;
-  onSelectWidget?: (widgetId: string, pageId?: string) => void;
-  editingWidgetId?: string | null;
-  contextVariables?: Record<string, any>;
-  pageContext?: Record<string, any>;
-  selectedContainerId?: string | null;
-  onSelectContainer?: (containerId: string, pageId?: string) => void;
-}
-
-const WidgetItem: React.FC<WidgetItemProps> = ({
-  widget,
-  index,
-  containerId,
-  isEditMode,
-  pageId,
-  canMoveUp,
-  canMoveDown,
-  onRemove,
-  onMove,
-  isSelected,
-  onSelect,
-  isEditing,
-  onEditWidget,
-  isNew,
-  selectedWidgetId,
-  onSelectWidget,
-  editingWidgetId,
-  contextVariables,
-  pageContext,
-  selectedContainerId,
-  onSelectContainer,
-}) => {
-  const widgetDefinition = widgetRegistry.get(widget.widgetId);
-  const { updateWidgetProps, renameWidget } = useLayout();
-
-  // DnD hooks (only active in edit mode)
-  const { attributes, listeners, setNodeRef: setDragRef, isDragging: isDndDragging } = useDraggable({
-    id: `widget-${widget.id}`,
-    data: {
-      type: 'existing-widget',
-      widgetInstanceId: widget.id,
-      widgetDefId: widget.widgetId,
-      sourceContainerId: containerId,
-      sourceIndex: index,
-    },
-    disabled: !isEditMode,
-  });
-
-  const { setNodeRef: setDropRef, isOver } = useDroppable({
-    id: `cell-${containerId}-${index}`,
-    data: {
-      type: 'container-cell',
-      containerId,
-      index,
-    },
-    disabled: !isEditMode,
-  });
-
-  // Combine refs
-  const combinedRef = (node: HTMLElement | null) => {
-    setDragRef(node);
-    setDropRef(node);
-  };
-
-  // Internal state removed in favor of controlled state
-  // const [showSettingsModal, setShowSettingsModal] = useState(false);
-
-  const handlePropsChange = React.useCallback(async (newProps: Record<string, any>) => {
-    try {
-      await updateWidgetProps(pageId, widget.id, newProps);
-    } catch (error) {
-      console.error('Failed to update widget props:', error);
-    }
-  }, [pageId, widget.id, updateWidgetProps]);
-
-  // pageId is now passed as a prop from the parent component
-
-  if (!widgetDefinition) {
-    return (
-      <div className="relative group border-red-500 bg-red-100 dark:bg-red-900/20 rounded-lg">
-        <p className="text-red-600 dark:text-red-400 text-sm">
-          Widget "{widget.widgetId}" not found in registry
-        </p>
-        {isEditMode && (
-          <Button
-            size="icon"
-            variant="destructive"
-            className="absolute top-2 right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove?.(widget.id);
-            }}
-            title="Remove invalid widget"
-          >
-            <Trash2 className="h-3 w-3" />
-          </Button>
-        )}
-      </div>
-    );
-  }
-
-  const WidgetComponent = widgetDefinition.component;
-
-  const handleSettingsSave = async (settings: Record<string, any>) => {
-    try {
-      await updateWidgetProps(pageId, widget.id, settings);
-    } catch (error) {
-      console.error('Failed to save widget settings:', error);
-    }
-  };
-
-  const handleSettingsCancel = () => {
-    if (isNew) {
-      onRemove?.(widget.id);
-    }
-  };
-
-  // Handle Enabled State
-  const isEnabled = widget.props?.enabled !== false; // Default to true
-
-  if (!isEnabled && !isEditMode) {
-    return null;
-  }
-
-  return (
-    <div ref={combinedRef} className={cn(
-      "relative group",
-      !isEnabled && "opacity-50 grayscale transition-all hover:grayscale-0",
-      isDndDragging && "opacity-30",
-      isOver && "ring-2 ring-blue-400 ring-offset-2 rounded-lg"
-    )} id={`widget-item-${widget.id}`}>
-      {/* Edit Mode Controls */}
-      {isEditMode && (
-        <>
-          {/* Widget Info Overlay */}
-          <div
-            className="absolute top-0 left-0 right-0 bg-green-500/90 text-white text-xs px-2 py-1 rounded-t-lg z-10 cursor-grab active:cursor-grabbing"
-            {...listeners}
-            {...attributes}
-            onClick={(e) => {
-              e.stopPropagation();
-              onSelect?.();
-            }}
-          >
-            <div className="flex items-center justify-between">
-              <span>{widgetDefinition.metadata.name}</span>
-              <div className="flex items-center gap-1">
-                {/* Settings Gear Icon - For widgets with configSchema */}
-                {widgetDefinition.metadata.configSchema && (
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="h-4 w-4 text-white hover:bg-white/20"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      // Open settings modal via prop
-                      onEditWidget?.(widget.id);
-                    }}
-                    title="Widget settings"
-                  >
-                    <Settings className="h-2 w-2" />
-                  </Button>
-                )}
-
-                {/* Remove Button */}
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-4 w-4 text-white hover:bg-white/20"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onRemove?.(widget.id);
-                  }}
-                  title="Remove widget"
-                >
-                  <Trash2 className="h-2 w-2" />
-                </Button>
-              </div>
-            </div>
-          </div>
-
-
-
-          {/* Move Controls - Cross Pattern (Only show on hover or selection) */}
-          <div className={cn(
-            "absolute bottom-4 right-2 z-10 transition-opacity duration-200",
-            isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-          )}>
-            <WidgetMovementControls
-              onMove={(direction) => onMove?.(widget.id, direction)}
-              canMoveUp={canMoveUp}
-              canMoveDown={canMoveDown}
-            />
-          </div>
-
-        </>
-      )}
-
-      {/* Widget Content - With selection wrapper */}
-      <div
-        className={cn(
-          "w-full dark:bg-slate-900/10 overflow-hidden transition-all duration-200",
-          isEditMode && "rounded-lg",
-          widget.props?.customClassName || `widget-${widget.id.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
-          `widget-type-${widget.widgetId}`,
-          // Selection Visuals & Margins
-          isEditMode && "border-2",
-          isEditMode && isSelected ? "border-blue-500 ring-4 ring-blue-500/10 shadow-lg z-10" : "border-transparent",
-          isEditMode && !isSelected && "hover:border-blue-300 dark:hover:border-blue-700",
-          // Margin between header/content - applied via padding on this wrapper or margin on content? 
-          // Using padding-top on wrapper to separate from title bar overlay
-          isEditMode && "pt-8" // Space for title bar
-        )}
-        onClick={(e) => {
-          if (isEditMode) {
-            e.preventDefault(); // Prevent focus stealing if clicking background
-            e.stopPropagation();
-            onSelect?.();
-          }
-        }}
-      >
-        <WidgetComponent
-          {...(widget.props || {})}
-          widgetInstanceId={widget.id}
-          widgetDefId={widget.widgetId}
-          isEditMode={isEditMode}
-          onPropsChange={handlePropsChange}
-          selectedWidgetId={selectedWidgetId}
-          onSelectWidget={onSelectWidget}
-          editingWidgetId={editingWidgetId}
-          onEditWidget={onEditWidget}
-          contextVariables={contextVariables}
-          pageContext={pageContext}
-          selectedContainerId={selectedContainerId}
-          onSelectContainer={onSelectContainer} />
-      </div>
-
-      {/* Generic Settings Modal */}
-      {
-        widgetDefinition.metadata.configSchema && isEditing && (
-          <WidgetSettingsManager
-            isOpen={!!isEditing} // coerce to boolean although it should be boolean | undefined from comparison
-            onClose={() => onEditWidget?.(null)}
-            widgetDefinition={widgetDefinition}
-
-            currentProps={widget.props || {}}
-            onSave={handleSettingsSave}
-            onCancel={handleSettingsCancel}
-          />
-        )
-      }
-    </div >
-  );
-};
-
-export default LayoutContainerEditComponent;
\ No newline at end of file
+import React, { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { useImageDrop } from '@/hooks/useImageDrop';
+import { Button } from '@/components/ui/button';
+import { Plus, Minus, Grid3X3, Trash2, Settings, ArrowUp, ArrowDown, GripVertical } from 'lucide-react';
+import { LayoutContainer as LayoutContainerType, WidgetInstance } from '@/modules/layout/LayoutManager';
+import { widgetRegistry } from '@/lib/widgetRegistry';
+import { WidgetSettingsManager } from '@/components/widgets/WidgetSettingsManager';
+import { WidgetMovementControls } from '@/components/widgets/WidgetMovementControls';
+import { useLayout } from '@/modules/layout/LayoutContext';
+import CollapsibleSection from '@/components/CollapsibleSection';
+import { ContainerSettingsManager } from '@/components/containers/ContainerSettingsManager';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { LayoutContainer } from './LayoutContainer';
+
+// Droppable slot for empty areas (column indicators, add-widget buttons)
+const DroppableSlot: React.FC<{
+  containerId: string;
+  index: number;
+  isEditMode: boolean;
+  children: React.ReactNode;
+}> = ({ containerId, index, isEditMode, children }) => {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `slot-${containerId}-${index}`,
+    data: {
+      type: 'container-cell',
+      containerId,
+      index,
+    },
+    disabled: !isEditMode,
+  });
+
+  return (
+    <div ref={setNodeRef} className={cn(isOver && 'ring-2 ring-blue-400 ring-offset-2 rounded-lg')}>
+      {children}
+    </div>
+  );
+};
+
+export interface LayoutContainerEditProps {
+  container: LayoutContainerType;
+  isEditMode: boolean;
+  pageId: string;
+  selectedContainerId?: string | null;
+  onSelect?: (containerId: string, pageId?: string) => void;
+  onAddWidget?: (containerId: string, targetColumn?: number) => void;
+  onRemoveWidget?: (widgetInstanceId: string) => void;
+  onMoveWidget?: (widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => void;
+  onUpdateColumns?: (containerId: string, columns: number) => void;
+  onUpdateSettings?: (containerId: string, settings: Partial<LayoutContainerType['settings']>) => void;
+  onAddContainer?: (parentContainerId: string) => void;
+  onRemoveContainer?: (containerId: string) => void;
+  onMoveContainer?: (containerId: string, direction: 'up' | 'down') => void;
+  canMoveContainerUp?: boolean;
+  canMoveContainerDown?: boolean;
+  selectedWidgetId?: string | null;
+  selectedWidgetIds?: Set<string>;
+  onSelectWidget?: (widgetId: string, pageId?: string) => void;
+  depth?: number;
+  isCompactMode?: boolean;
+  editingWidgetId?: string | null;
+  onEditWidget?: (widgetId: string | null) => void;
+  newlyAddedWidgetId?: string | null;
+  contextVariables?: Record<string, any>;
+  pageContext?: Record<string, any>;
+  onFilesDrop?: (files: File[], targetColumn?: number) => void;
+}
+
+const LayoutContainerEditComponent: React.FC<LayoutContainerEditProps> = ({
+  container,
+  isEditMode,
+  pageId,
+  selectedContainerId,
+  onSelect,
+  onAddWidget,
+  onRemoveWidget,
+  onMoveWidget,
+  onUpdateColumns,
+  onUpdateSettings,
+  onAddContainer,
+  onRemoveContainer,
+  onMoveContainer,
+  canMoveContainerUp,
+  canMoveContainerDown,
+  selectedWidgetId,
+  selectedWidgetIds,
+  onSelectWidget,
+  depth = 0,
+  isCompactMode = false,
+  editingWidgetId,
+  onEditWidget,
+  newlyAddedWidgetId,
+  contextVariables,
+  pageContext,
+  onFilesDrop,
+}) => {
+  const { isDragging, handlers } = useImageDrop({
+    onFilesDrop: (files) => onFilesDrop?.(files),
+    isEditMode: isEditMode && !!onFilesDrop,
+  });
+  const maxDepth = 3; // Limit nesting depth
+  const canNest = depth < maxDepth;
+  const isSelected = selectedContainerId === container.id;
+  const [showContainerSettings, setShowContainerSettings] = useState(false);
+
+  // Generate responsive grid classes based on container.columns
+  const getGridClasses = (columns: number) => {
+    const baseClass = "grid"; // Always grid with gap
+
+    // Mobile: always 1 column, Desktop: respect container.columns
+    switch (columns) {
+      case 1: return `${baseClass} grid-cols-1`;
+      case 2: return `${baseClass} grid-cols-1 md:grid-cols-2`;
+      case 3: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3`;
+      case 4: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-4`;
+      case 5: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5`;
+      case 6: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6`;
+      default:
+        // For 7+ columns, use a more conservative approach
+        return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-${Math.min(columns, 12)}`;
+    }
+  };
+
+  const gridClasses = getGridClasses(container.columns);
+
+  // Extract container content rendering logic
+  const renderContainerContent = () => (
+    <>
+      {/* Grid Column Indicators (only in edit mode when selected) */}
+      {isEditMode && isSelected && container.widgets.length === 0 && container.children.length === 0 && (
+        <>
+          {Array.from({ length: container.columns }, (_, i) => (
+            <DroppableSlot
+              key={i}
+              containerId={container.id}
+              index={i}
+              isEditMode={isEditMode}
+            >
+              <div
+                className="min-h-[80px] flex items-center justify-center text-blue-500 dark:text-blue-400 text-sm cursor-pointer hover:bg-blue-100/20 dark:hover:bg-blue-800/20 transition-colors"
+                onDoubleClick={(e) => {
+                  e.stopPropagation();
+                  onAddWidget?.(container.id, i);
+                }}
+                title={`Double-click to add widget to column ${i + 1}`}
+              >
+                Col {i + 1}
+              </div>
+            </DroppableSlot>
+          ))}
+        </>
+      )}
+
+      {/* Render Widgets */}
+      {container.widgets
+        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .map((widget, index) => (
+          <WidgetItem
+            key={widget.id}
+            widget={widget}
+            index={index}
+            containerId={container.id}
+            isEditMode={isEditMode}
+            pageId={pageId}
+            isSelected={selectedWidgetIds ? selectedWidgetIds.has(widget.id) : selectedWidgetId === widget.id}
+            onSelect={() => onSelectWidget?.(widget.id, pageId)}
+            canMoveUp={index > 0}
+            canMoveDown={index < container.widgets.length - 1}
+            onRemove={onRemoveWidget}
+            onMove={onMoveWidget}
+            isEditing={editingWidgetId === widget.id}
+            onEditWidget={onEditWidget}
+            isNew={newlyAddedWidgetId === widget.id}
+            selectedWidgetId={selectedWidgetId}
+            onSelectWidget={onSelectWidget}
+            editingWidgetId={editingWidgetId}
+            contextVariables={contextVariables}
+            pageContext={pageContext}
+            selectedContainerId={selectedContainerId}
+            onSelectContainer={onSelect}
+          />
+        ))}
+
+      {/* Add Widget Buttons - always visible in edit mode at bottom of every container */}
+      {isEditMode && (
+        <>
+          {container.columns > 1 ? (
+            <div className="col-span-full grid gap-4" style={{ gridTemplateColumns: `repeat(${container.columns}, minmax(0, 1fr))` }}>
+              {Array.from({ length: container.columns }, (_, colIndex) => (
+                <DroppableSlot
+                  key={`add-widget-${colIndex}`}
+                  containerId={container.id}
+                  index={container.widgets.length + colIndex}
+                  isEditMode={isEditMode}
+                >
+                  <div
+                    className="flex items-center justify-center min-h-[40px] rounded-lg hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer group"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onAddWidget?.(container.id, colIndex);
+                    }}
+                    title={`Add widget to column ${colIndex + 1}`}
+                  >
+                    <div className="text-center text-slate-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
+                      <Plus className="h-4 w-4 mx-auto" />
+                      <p className="text-[10px]">Col {colIndex + 1}</p>
+                    </div>
+                  </div>
+                </DroppableSlot>
+              ))}
+            </div>
+          ) : (
+            <DroppableSlot
+              containerId={container.id}
+              index={container.widgets.length}
+              isEditMode={isEditMode}
+            >
+              <div
+                className="col-span-full flex items-center justify-center min-h-[36px] rounded-lg hover:bg-blue-50/30 dark:hover:bg-blue-900/20 transition-colors cursor-pointer group"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAddWidget?.(container.id);
+                }}
+                title="Add widget"
+              >
+                <div className="flex items-center gap-1 text-slate-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
+                  <Plus className="h-4 w-4" />
+                  <span className="text-xs">Add Widget</span>
+                </div>
+              </div>
+            </DroppableSlot>
+          )}
+        </>
+      )}
+
+      {/* Render Nested Containers */}
+      {container.children
+        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .map((childContainer) => (
+          <div key={childContainer.id} className="col-span-full">
+            <LayoutContainer
+              container={childContainer}
+              isEditMode={isEditMode}
+              pageId={pageId}
+              selectedContainerId={selectedContainerId}
+              onSelect={onSelect}
+              onAddWidget={onAddWidget}
+              onRemoveWidget={onRemoveWidget}
+              onMoveWidget={onMoveWidget}
+              onUpdateColumns={onUpdateColumns}
+              onUpdateSettings={onUpdateSettings}
+              onAddContainer={onAddContainer}
+              onRemoveContainer={onRemoveContainer}
+              onMoveContainer={onMoveContainer}
+              canMoveContainerUp={canMoveContainerUp}
+              canMoveContainerDown={canMoveContainerDown}
+              selectedWidgetId={selectedWidgetId}
+              selectedWidgetIds={selectedWidgetIds}
+              onSelectWidget={onSelectWidget}
+              depth={depth + 1}
+              isCompactMode={isCompactMode}
+              editingWidgetId={editingWidgetId}
+              onEditWidget={onEditWidget}
+              newlyAddedWidgetId={newlyAddedWidgetId}
+              contextVariables={contextVariables}
+              pageContext={pageContext}
+            />
+          </div>
+        ))}
+
+
+      {/* Empty State - only show when not showing column indicators */}
+      {container.widgets.length === 0 && container.children.length === 0 && !(isEditMode && isSelected) && !isEditMode && (
+        <div className="col-span-full flex items-center justify-center min-h-[80px] text-slate-500 dark:text-slate-400">
+          <p className="text-sm"></p>
+        </div>
+      )}
+    </>
+  );
+
+  // Handle Enabled State
+  const isContainerEnabled = container.settings?.enabled !== false; // Default to true
+
+  if (!isContainerEnabled && !isEditMode) {
+    return null;
+  }
+
+  return (
+    <div className={cn(
+      "space-y-0",
+      container.settings?.customClassName,
+      !isContainerEnabled && "opacity-50 grayscale transition-all hover:grayscale-0"
+    )}>
+      {/* Edit Mode Controls */}
+      {isEditMode && (
+        <div className={cn(
+          "text-white px-2 sm:px-3 py-1 rounded-t-lg text-xs overflow-hidden cursor-pointer",
+          isSelected ? "bg-blue-500" : "bg-slate-500"
+        )}
+          onClick={(e) => {
+            e.stopPropagation();
+            if (isEditMode) {
+              onSelect?.(container.id, pageId);
+            }
+          }}
+        >
+          {/* Responsive layout: title and buttons wrap on small screens */}
+          <div className="flex items-center justify-between gap-x-2 gap-y-1 min-w-0 flex-wrap">
+            <div className="flex items-center gap-1 min-w-0 flex-grow">
+              <Grid3X3 className="h-3 w-3 shrink-0" />
+              <span className="truncate text-xs font-semibold">
+                {container.settings?.showTitle && container.settings?.title
+                  ? container.settings.title
+                  : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
+                {(container.settings?.collapsible || container.settings?.showTitle) && (
+                  <span className="ml-1 opacity-75 font-normal">⚙️</span>
+                )}
+              </span>
+            </div>
+
+            {/* Minimalist button row - wraps and justifies to the end */}
+            <div className="flex items-center gap-0.5 flex-wrap justify-end">
+              {/* Move controls for root containers */}
+              {depth === 0 && (
+                <div className="flex items-center gap-0.5 mr-1 border-r border-white/20 pr-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onMoveContainer?.(container.id, 'up');
+                    }}
+                    disabled={!canMoveContainerUp}
+                    className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
+                    title="Move container up"
+                  >
+                    <ArrowUp className="h-3 w-3" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onMoveContainer?.(container.id, 'down');
+                    }}
+                    disabled={!canMoveContainerDown}
+                    className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
+                    title="Move container down"
+                  >
+                    <ArrowDown className="h-3 w-3" />
+                  </Button>
+                </div>
+              )}
+              {/* Column controls */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onUpdateColumns?.(container.id, container.columns - 1);
+                }}
+                disabled={container.columns <= 1}
+                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
+                title="Decrease columns"
+              >
+                <Minus className="h-3 w-3" />
+              </Button>
+
+              <span className="min-w-[12px] text-center text-xs font-medium px-1">{container.columns}</span>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onUpdateColumns?.(container.id, container.columns + 1);
+                }}
+                disabled={container.columns >= 12}
+                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
+                title="Increase columns"
+              >
+                <Plus className="h-3 w-3" />
+              </Button>
+
+              {/* Add widget button */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAddWidget?.(container.id);
+                }}
+                className="h-4 px-1 text-white hover:bg-white/20 shrink-0 ml-1"
+                title="Add widget"
+              >
+                <Plus className="h-3 w-3" />
+              </Button>
+
+              {/* Add nested container button */}
+              {canNest && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAddContainer?.(container.id);
+                  }}
+                  className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
+                  title="Add nested container"
+                >
+                  <Grid3X3 className="h-3 w-3" />
+                </Button>
+              )}
+
+              {/* Container settings button */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowContainerSettings(true);
+                }}
+                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
+                title="Container settings"
+              >
+                <Settings className="h-3 w-3" />
+              </Button>
+
+              {/* Remove container button */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemoveContainer?.(container.id);
+                }}
+                className="h-4 px-1 text-white hover:bg-red-400 shrink-0"
+                title="Remove container"
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Container Content */}
+      <div
+        {...handlers}
+        className={cn(
+          "relative transition-all duration-200 min-w-0 overflow-hidden",
+          isEditMode ? "rounded-b-lg" : "",
+          isEditMode && "hover:border-blue-300 cursor-pointer",
+          isSelected && isEditMode && "border-blue-500 bg-blue-50/20 dark:bg-blue-900/20",
+          !isSelected && isEditMode && "border-slate-300/50 dark:border-white/20",
+          !isEditMode && "border-transparent",
+          isDragging && "ring-4 ring-blue-400 ring-opacity-50 bg-blue-50/50 dark:bg-blue-900/50"
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (isEditMode) {
+            onSelect?.(container.id, pageId);
+          }
+        }}
+      >
+        {container.settings?.collapsible ? (
+          <CollapsibleSection
+            title={
+              container.settings?.showTitle
+                ? (container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`)
+                : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`
+            }
+            initiallyOpen={!container.settings?.collapsed}
+            storageKey={`container-${container.id}-collapsed`}
+            className="border-0 rounded-none shadow-none bg-transparent"
+            minimal={true}
+          >
+            <div
+              className={cn(
+                isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : isEditMode ? "p-2 min-h-[120px]" : "min-h-[120px]",
+                gridClasses,
+                isEditMode && isSelected && "bg-blue-50/10 dark:bg-blue-900/10"
+              )}
+              style={{
+                gap: `${container.gap}px`,
+              }}
+            >
+              {renderContainerContent()}
+            </div>
+          </CollapsibleSection>
+        ) : (
+          <div>
+            {/* Title for non-collapsible containers */}
+            {container.settings?.showTitle && (
+              <div className="px-4 pt-3 pb-1 border-b border-slate-300/30 dark:border-white/10">
+                <h3 className="text-sm font-medium text-slate-700 dark:text-white">
+                  {container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
+                </h3>
+              </div>
+            )}
+            <div
+              className={cn(
+                isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : isEditMode ? "p-2 min-h-[120px]" : "min-h-[120px]",
+                gridClasses,
+                isEditMode && isSelected && "bg-blue-50/10 dark:bg-blue-900/10"
+              )}
+              style={{
+                gap: `${container.gap}px`,
+              }}
+            >
+              {renderContainerContent()}
+            </div>
+          </div>
+        )}
+      </div>
+      {/* Drop Overlay */}
+
+
+      {/* Container Settings Dialog */}
+      {showContainerSettings && (
+        <ContainerSettingsManager
+          isOpen={showContainerSettings}
+          onClose={() => setShowContainerSettings(false)}
+          onSave={(settings) => {
+            onUpdateSettings?.(container.id, settings);
+            setShowContainerSettings(false);
+          }}
+          currentSettings={container.settings}
+          containerInfo={{
+            id: container.id,
+            columns: container.columns,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+interface WidgetItemProps {
+  widget: WidgetInstance;
+  index: number;
+  containerId: string;
+  isEditMode: boolean;
+  pageId: string;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
+  onRemove?: (widgetInstanceId: string) => void;
+  onMove?: (widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => void;
+  isSelected?: boolean;
+  onSelect?: () => void;
+  isEditing?: boolean;
+  onEditWidget?: (widgetId: string | null) => void;
+  isNew?: boolean;
+  selectedWidgetId?: string | null;
+  onSelectWidget?: (widgetId: string, pageId?: string) => void;
+  editingWidgetId?: string | null;
+  contextVariables?: Record<string, any>;
+  pageContext?: Record<string, any>;
+  selectedContainerId?: string | null;
+  onSelectContainer?: (containerId: string, pageId?: string) => void;
+}
+
+const WidgetItem: React.FC<WidgetItemProps> = ({
+  widget,
+  index,
+  containerId,
+  isEditMode,
+  pageId,
+  canMoveUp,
+  canMoveDown,
+  onRemove,
+  onMove,
+  isSelected,
+  onSelect,
+  isEditing,
+  onEditWidget,
+  isNew,
+  selectedWidgetId,
+  onSelectWidget,
+  editingWidgetId,
+  contextVariables,
+  pageContext,
+  selectedContainerId,
+  onSelectContainer,
+}) => {
+  const widgetDefinition = widgetRegistry.get(widget.widgetId);
+  const { updateWidgetProps, renameWidget } = useLayout();
+
+  // DnD hooks (only active in edit mode)
+  const { attributes, listeners, setNodeRef: setDragRef, isDragging: isDndDragging } = useDraggable({
+    id: `widget-${widget.id}`,
+    data: {
+      type: 'existing-widget',
+      widgetInstanceId: widget.id,
+      widgetDefId: widget.widgetId,
+      sourceContainerId: containerId,
+      sourceIndex: index,
+    },
+    disabled: !isEditMode,
+  });
+
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: `cell-${containerId}-${index}`,
+    data: {
+      type: 'container-cell',
+      containerId,
+      index,
+    },
+    disabled: !isEditMode,
+  });
+
+  // Combine refs
+  const combinedRef = (node: HTMLElement | null) => {
+    setDragRef(node);
+    setDropRef(node);
+  };
+
+  // Internal state removed in favor of controlled state
+  // const [showSettingsModal, setShowSettingsModal] = useState(false);
+
+  const handlePropsChange = React.useCallback(async (newProps: Record<string, any>) => {
+    try {
+      await updateWidgetProps(pageId, widget.id, newProps);
+    } catch (error) {
+      console.error('Failed to update widget props:', error);
+    }
+  }, [pageId, widget.id, updateWidgetProps]);
+
+  // pageId is now passed as a prop from the parent component
+
+  if (!widgetDefinition) {
+    return (
+      <div className="relative group border-red-500 bg-red-100 dark:bg-red-900/20 rounded-lg">
+        <p className="text-red-600 dark:text-red-400 text-sm">
+          Widget "{widget.widgetId}" not found in registry
+        </p>
+        {isEditMode && (
+          <Button
+            size="icon"
+            variant="destructive"
+            className="absolute top-2 right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove?.(widget.id);
+            }}
+            title="Remove invalid widget"
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  const WidgetComponent = widgetDefinition.component;
+
+  const handleSettingsSave = async (settings: Record<string, any>) => {
+    try {
+      await updateWidgetProps(pageId, widget.id, settings);
+    } catch (error) {
+      console.error('Failed to save widget settings:', error);
+    }
+  };
+
+  const handleSettingsCancel = () => {
+    if (isNew) {
+      onRemove?.(widget.id);
+    }
+  };
+
+  // Handle Enabled State
+  const isEnabled = widget.props?.enabled !== false; // Default to true
+
+  if (!isEnabled && !isEditMode) {
+    return null;
+  }
+
+  return (
+    <div ref={combinedRef} className={cn(
+      "relative group",
+      !isEnabled && "opacity-50 grayscale transition-all hover:grayscale-0",
+      isDndDragging && "opacity-30",
+      isOver && "ring-2 ring-blue-400 ring-offset-2 rounded-lg"
+    )} id={`widget-item-${widget.id}`}>
+      {/* Edit Mode Controls */}
+      {isEditMode && (
+        <>
+          {/* Widget Info Overlay */}
+          <div
+            className="absolute top-0 left-0 right-0 bg-green-500/90 text-white text-xs px-2 py-1 rounded-t-lg z-10 cursor-grab active:cursor-grabbing"
+            {...listeners}
+            {...attributes}
+            onClick={(e) => {
+              e.stopPropagation();
+              onSelect?.();
+            }}
+          >
+            <div className="flex items-center justify-between">
+              <span>{widgetDefinition.metadata.name}</span>
+              <div className="flex items-center gap-1">
+                {/* Settings Gear Icon - For widgets with configSchema */}
+                {widgetDefinition.metadata.configSchema && (
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-4 w-4 text-white hover:bg-white/20"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      // Open settings modal via prop
+                      onEditWidget?.(widget.id);
+                    }}
+                    title="Widget settings"
+                  >
+                    <Settings className="h-2 w-2" />
+                  </Button>
+                )}
+
+                {/* Remove Button */}
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-4 w-4 text-white hover:bg-white/20"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRemove?.(widget.id);
+                  }}
+                  title="Remove widget"
+                >
+                  <Trash2 className="h-2 w-2" />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+
+
+          {/* Move Controls - Cross Pattern (Only show on hover or selection) */}
+          <div className={cn(
+            "absolute bottom-4 right-2 z-10 transition-opacity duration-200",
+            isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+          )}>
+            <WidgetMovementControls
+              onMove={(direction) => onMove?.(widget.id, direction)}
+              canMoveUp={canMoveUp}
+              canMoveDown={canMoveDown}
+            />
+          </div>
+
+        </>
+      )}
+
+      {/* Widget Content - With selection wrapper */}
+      <div
+        className={cn(
+          "w-full dark:bg-slate-900/10 overflow-hidden transition-all duration-200",
+          isEditMode && "rounded-lg",
+          widget.props?.customClassName || `widget-${widget.id.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
+          `widget-type-${widget.widgetId}`,
+          // Selection Visuals & Margins
+          isEditMode && "border-2",
+          isEditMode && isSelected ? "border-blue-500 ring-4 ring-blue-500/10 shadow-lg z-10" : "border-transparent",
+          isEditMode && !isSelected && "hover:border-blue-300 dark:hover:border-blue-700",
+          // Margin between header/content - applied via padding on this wrapper or margin on content? 
+          // Using padding-top on wrapper to separate from title bar overlay
+          isEditMode && "pt-8" // Space for title bar
+        )}
+        onClick={(e) => {
+          if (isEditMode) {
+            e.preventDefault(); // Prevent focus stealing if clicking background
+            e.stopPropagation();
+            onSelect?.();
+          }
+        }}
+      >
+        <WidgetComponent
+          {...(widget.props || {})}
+          widgetInstanceId={widget.id}
+          widgetDefId={widget.widgetId}
+          isEditMode={isEditMode}
+          onPropsChange={handlePropsChange}
+          selectedWidgetId={selectedWidgetId}
+          onSelectWidget={onSelectWidget}
+          editingWidgetId={editingWidgetId}
+          onEditWidget={onEditWidget}
+          contextVariables={contextVariables}
+          pageContext={pageContext}
+          selectedContainerId={selectedContainerId}
+          onSelectContainer={onSelectContainer} />
+      </div>
+
+      {/* Generic Settings Modal */}
+      {
+        widgetDefinition.metadata.configSchema && isEditing && (
+          <WidgetSettingsManager
+            isOpen={!!isEditing} // coerce to boolean although it should be boolean | undefined from comparison
+            onClose={() => onEditWidget?.(null)}
+            widgetDefinition={widgetDefinition}
+
+            currentProps={widget.props || {}}
+            onSave={handleSettingsSave}
+            onCancel={handleSettingsCancel}
+          />
+        )
+      }
+    </div >
+  );
+};
+
+export default LayoutContainerEditComponent;
diff --git a/packages/ui/src/modules/layout/LayoutContainerView.tsx b/packages/ui/src/modules/layout/LayoutContainerView.tsx
index 9774c0a9..2aca2c8b 100644
--- a/packages/ui/src/modules/layout/LayoutContainerView.tsx
+++ b/packages/ui/src/modules/layout/LayoutContainerView.tsx
@@ -1,233 +1,233 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { LayoutContainer as LayoutContainerType, WidgetInstance } from '@/modules/layout/LayoutManager';
-import { widgetRegistry } from '@/lib/widgetRegistry';
-import CollapsibleSection from '@/components/CollapsibleSection';
-import { LayoutContainer } from './LayoutContainer';
-import type { LayoutContainerEditProps } from './LayoutContainerEdit';
-
-export type LayoutContainerViewProps = Omit<
-  LayoutContainerEditProps,
-  | 'onAddWidget'
-  | 'onRemoveWidget'
-  | 'onMoveWidget'
-  | 'onUpdateColumns'
-  | 'onUpdateSettings'
-  | 'onAddContainer'
-  | 'onRemoveContainer'
-  | 'onMoveContainer'
-  | 'onEditWidget'
-  | 'onFilesDrop'
-  | 'canMoveContainerUp'
-  | 'canMoveContainerDown'
->;
-
-const LayoutContainerView: React.FC<LayoutContainerViewProps> = ({
-  container,
-  isEditMode = false,
-  pageId,
-  selectedContainerId,
-  onSelect,
-  selectedWidgetId,
-  selectedWidgetIds,
-  onSelectWidget,
-  depth = 0,
-  isCompactMode = false,
-  contextVariables,
-  pageContext,
-}) => {
-  const maxDepth = 3;
-
-  const getGridClasses = (columns: number) => {
-    const baseClass = "grid";
-    switch (columns) {
-      case 1: return `${baseClass} grid-cols-1`;
-      case 2: return `${baseClass} grid-cols-1 md:grid-cols-2`;
-      case 3: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3`;
-      case 4: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-4`;
-      case 5: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5`;
-      case 6: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6`;
-      default:
-        return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-${Math.min(columns, 12)}`;
-    }
-  };
-
-  const gridClasses = getGridClasses(container.columns);
-
-  const renderContainerContent = () => (
-    <>
-      {container.widgets
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .map((widget, index) => (
-          <WidgetItemView
-            key={widget.id}
-            widget={widget}
-            index={index}
-            containerId={container.id}
-            pageId={pageId}
-            selectedWidgetId={selectedWidgetId}
-            selectedWidgetIds={selectedWidgetIds}
-            onSelectWidget={onSelectWidget}
-            contextVariables={contextVariables}
-            pageContext={pageContext}
-            selectedContainerId={selectedContainerId}
-            onSelectContainer={onSelect}
-          />
-        ))}
-
-      {container.children
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .map((childContainer) => (
-          <div key={childContainer.id} className="col-span-full">
-            <LayoutContainer
-              container={childContainer}
-              isEditMode={false}
-              pageId={pageId}
-              selectedContainerId={selectedContainerId}
-              onSelect={onSelect}
-              selectedWidgetId={selectedWidgetId}
-              selectedWidgetIds={selectedWidgetIds}
-              onSelectWidget={onSelectWidget}
-              depth={depth + 1}
-              isCompactMode={isCompactMode}
-              contextVariables={contextVariables}
-              pageContext={pageContext}
-            />
-          </div>
-        ))}
-
-      {container.widgets.length === 0 && container.children.length === 0 && (
-        <div className="col-span-full flex items-center justify-center min-h-[80px] text-slate-500 dark:text-slate-400">
-          <p className="text-sm"></p>
-        </div>
-      )}
-    </>
-  );
-
-  const isContainerEnabled = container.settings?.enabled !== false;
-
-  if (!isContainerEnabled) {
-    return null;
-  }
-
-  return (
-    <div className={cn("space-y-0", container.settings?.customClassName)}>
-      <div className="relative transition-all duration-200 min-w-0 overflow-hidden border-transparent">
-        {container.settings?.collapsible ? (
-          <CollapsibleSection
-            title={
-              container.settings?.showTitle
-                ? (container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`)
-                : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`
-            }
-            initiallyOpen={!container.settings?.collapsed}
-            storageKey={`container-${container.id}-collapsed`}
-            className="border-0 rounded-none shadow-none bg-transparent"
-            minimal={true}
-          >
-            <div
-              className={cn(isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : "min-h-[120px]", gridClasses)}
-              style={{ gap: `${container.gap}px` }}
-            >
-              {renderContainerContent()}
-            </div>
-          </CollapsibleSection>
-        ) : (
-          <div>
-            {container.settings?.showTitle && (
-              <div className="px-4 pt-3 pb-1 border-b border-slate-300/30 dark:border-white/10">
-                <h3 className="text-sm font-medium text-slate-700 dark:text-white">
-                  {container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
-                </h3>
-              </div>
-            )}
-            <div
-              className={cn(isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : "min-h-[120px]", gridClasses)}
-              style={{ gap: `${container.gap}px` }}
-            >
-              {renderContainerContent()}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-interface WidgetItemViewProps {
-  widget: WidgetInstance;
-  index: number;
-  containerId: string;
-  pageId: string;
-  selectedWidgetId?: string | null;
-  selectedWidgetIds?: Set<string>;
-  onSelectWidget?: (widgetId: string, pageId?: string) => void;
-  contextVariables?: Record<string, any>;
-  pageContext?: Record<string, any>;
-  selectedContainerId?: string | null;
-  onSelectContainer?: (containerId: string, pageId?: string) => void;
-}
-
-const WidgetItemView: React.FC<WidgetItemViewProps> = ({
-  widget,
-  index,
-  containerId,
-  pageId,
-  selectedWidgetId,
-  selectedWidgetIds,
-  onSelectWidget,
-  contextVariables,
-  pageContext,
-  selectedContainerId,
-  onSelectContainer,
-}) => {
-  const widgetDefinition = widgetRegistry.get(widget.widgetId);
-
-  if (!widgetDefinition) {
-    return (
-      <div className="relative group border-red-500 bg-red-100 dark:bg-red-900/20 rounded-lg">
-        <p className="text-red-600 dark:text-red-400 text-sm">
-          Widget "{widget.widgetId}" not found in registry
-        </p>
-      </div>
-    );
-  }
-
-  const WidgetComponent = widgetDefinition.component;
-  const isEnabled = widget.props?.enabled !== false;
-
-  if (!isEnabled) {
-    return null;
-  }
-
-  return (
-    <div className="relative group" id={`widget-item-${widget.id}`}>
-      <div
-        className={cn(
-          "w-full dark:bg-slate-900/10 overflow-hidden transition-all duration-200",
-          widget.props?.customClassName || `widget-${widget.id.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
-          `widget-type-${widget.widgetId}`,
-          "border-transparent"
-        )}
-      >
-        <WidgetComponent
-          {...(widget.props || {})}
-          widgetInstanceId={widget.id}
-          widgetDefId={widget.widgetId}
-          isEditMode={false}
-          onPropsChange={async () => { }}
-          selectedWidgetId={selectedWidgetId}
-          onSelectWidget={onSelectWidget}
-          editingWidgetId={null}
-          onEditWidget={() => { }}
-          contextVariables={contextVariables}
-          pageContext={pageContext}
-          selectedContainerId={selectedContainerId}
-          onSelectContainer={onSelectContainer}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default LayoutContainerView;
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { LayoutContainer as LayoutContainerType, WidgetInstance } from '@/modules/layout/LayoutManager';
+import { widgetRegistry } from '@/lib/widgetRegistry';
+import CollapsibleSection from '@/components/CollapsibleSection';
+import { LayoutContainer } from './LayoutContainer';
+import type { LayoutContainerEditProps } from './LayoutContainerEdit';
+
+export type LayoutContainerViewProps = Omit<
+  LayoutContainerEditProps,
+  | 'onAddWidget'
+  | 'onRemoveWidget'
+  | 'onMoveWidget'
+  | 'onUpdateColumns'
+  | 'onUpdateSettings'
+  | 'onAddContainer'
+  | 'onRemoveContainer'
+  | 'onMoveContainer'
+  | 'onEditWidget'
+  | 'onFilesDrop'
+  | 'canMoveContainerUp'
+  | 'canMoveContainerDown'
+>;
+
+const LayoutContainerView: React.FC<LayoutContainerViewProps> = ({
+  container,
+  isEditMode = false,
+  pageId,
+  selectedContainerId,
+  onSelect,
+  selectedWidgetId,
+  selectedWidgetIds,
+  onSelectWidget,
+  depth = 0,
+  isCompactMode = false,
+  contextVariables,
+  pageContext,
+}) => {
+  const maxDepth = 3;
+
+  const getGridClasses = (columns: number) => {
+    const baseClass = "grid";
+    switch (columns) {
+      case 1: return `${baseClass} grid-cols-1`;
+      case 2: return `${baseClass} grid-cols-1 md:grid-cols-2`;
+      case 3: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3`;
+      case 4: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-4`;
+      case 5: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5`;
+      case 6: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6`;
+      default:
+        return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-${Math.min(columns, 12)}`;
+    }
+  };
+
+  const gridClasses = getGridClasses(container.columns);
+
+  const renderContainerContent = () => (
+    <>
+      {container.widgets
+        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .map((widget, index) => (
+          <WidgetItemView
+            key={widget.id}
+            widget={widget}
+            index={index}
+            containerId={container.id}
+            pageId={pageId}
+            selectedWidgetId={selectedWidgetId}
+            selectedWidgetIds={selectedWidgetIds}
+            onSelectWidget={onSelectWidget}
+            contextVariables={contextVariables}
+            pageContext={pageContext}
+            selectedContainerId={selectedContainerId}
+            onSelectContainer={onSelect}
+          />
+        ))}
+
+      {container.children
+        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .map((childContainer) => (
+          <div key={childContainer.id} className="col-span-full">
+            <LayoutContainer
+              container={childContainer}
+              isEditMode={false}
+              pageId={pageId}
+              selectedContainerId={selectedContainerId}
+              onSelect={onSelect}
+              selectedWidgetId={selectedWidgetId}
+              selectedWidgetIds={selectedWidgetIds}
+              onSelectWidget={onSelectWidget}
+              depth={depth + 1}
+              isCompactMode={isCompactMode}
+              contextVariables={contextVariables}
+              pageContext={pageContext}
+            />
+          </div>
+        ))}
+
+      {container.widgets.length === 0 && container.children.length === 0 && (
+        <div className="col-span-full flex items-center justify-center min-h-[80px] text-slate-500 dark:text-slate-400">
+          <p className="text-sm"></p>
+        </div>
+      )}
+    </>
+  );
+
+  const isContainerEnabled = container.settings?.enabled !== false;
+
+  if (!isContainerEnabled) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-0", container.settings?.customClassName)}>
+      <div className="relative transition-all duration-200 min-w-0 overflow-hidden border-transparent">
+        {container.settings?.collapsible ? (
+          <CollapsibleSection
+            title={
+              container.settings?.showTitle
+                ? (container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`)
+                : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`
+            }
+            initiallyOpen={!container.settings?.collapsed}
+            storageKey={`container-${container.id}-collapsed`}
+            className="border-0 rounded-none shadow-none bg-transparent"
+            minimal={true}
+          >
+            <div
+              className={cn(isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : "min-h-[120px]", gridClasses)}
+              style={{ gap: `${container.gap}px` }}
+            >
+              {renderContainerContent()}
+            </div>
+          </CollapsibleSection>
+        ) : (
+          <div>
+            {container.settings?.showTitle && (
+              <div className="px-4 pt-3 pb-1 border-b border-slate-300/30 dark:border-white/10">
+                <h3 className="text-sm font-medium text-slate-700 dark:text-white">
+                  {container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
+                </h3>
+              </div>
+            )}
+            <div
+              className={cn(isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : "min-h-[120px]", gridClasses)}
+              style={{ gap: `${container.gap}px` }}
+            >
+              {renderContainerContent()}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface WidgetItemViewProps {
+  widget: WidgetInstance;
+  index: number;
+  containerId: string;
+  pageId: string;
+  selectedWidgetId?: string | null;
+  selectedWidgetIds?: Set<string>;
+  onSelectWidget?: (widgetId: string, pageId?: string) => void;
+  contextVariables?: Record<string, any>;
+  pageContext?: Record<string, any>;
+  selectedContainerId?: string | null;
+  onSelectContainer?: (containerId: string, pageId?: string) => void;
+}
+
+const WidgetItemView: React.FC<WidgetItemViewProps> = ({
+  widget,
+  index,
+  containerId,
+  pageId,
+  selectedWidgetId,
+  selectedWidgetIds,
+  onSelectWidget,
+  contextVariables,
+  pageContext,
+  selectedContainerId,
+  onSelectContainer,
+}) => {
+  const widgetDefinition = widgetRegistry.get(widget.widgetId);
+
+  if (!widgetDefinition) {
+    return (
+      <div className="relative group border-red-500 bg-red-100 dark:bg-red-900/20 rounded-lg">
+        <p className="text-red-600 dark:text-red-400 text-sm">
+          Widget "{widget.widgetId}" not found in registry
+        </p>
+      </div>
+    );
+  }
+
+  const WidgetComponent = widgetDefinition.component;
+  const isEnabled = widget.props?.enabled !== false;
+
+  if (!isEnabled) {
+    return null;
+  }
+
+  return (
+    <div className="relative group" id={`widget-item-${widget.id}`}>
+      <div
+        className={cn(
+          "w-full dark:bg-slate-900/10 overflow-hidden transition-all duration-200",
+          widget.props?.customClassName || `widget-${widget.id.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
+          `widget-type-${widget.widgetId}`,
+          "border-transparent"
+        )}
+      >
+        <WidgetComponent
+          {...(widget.props || {})}
+          widgetInstanceId={widget.id}
+          widgetDefId={widget.widgetId}
+          isEditMode={false}
+          onPropsChange={async () => { }}
+          selectedWidgetId={selectedWidgetId}
+          onSelectWidget={onSelectWidget}
+          editingWidgetId={null}
+          onEditWidget={() => { }}
+          contextVariables={contextVariables}
+          pageContext={pageContext}
+          selectedContainerId={selectedContainerId}
+          onSelectContainer={onSelectContainer}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LayoutContainerView;
diff --git a/packages/ui/src/modules/layout/LayoutContext.tsx b/packages/ui/src/modules/layout/LayoutContext.tsx
index 4620ba1c..8e38094d 100644
--- a/packages/ui/src/modules/layout/LayoutContext.tsx
+++ b/packages/ui/src/modules/layout/LayoutContext.tsx
@@ -1,456 +1,456 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
-import { UnifiedLayoutManager, PageLayout, WidgetInstance, LayoutContainer, FlexibleContainer } from '@/modules/layout/LayoutManager';
-import { HistoryManager } from '@/modules/layout/HistoryManager';
-import { Command } from '@/modules/layout/types';
-import {
-  AddWidgetCommand,
-  RemoveWidgetCommand,
-  UpdateWidgetSettingsCommand,
-  AddContainerCommand,
-  RemoveContainerCommand,
-  MoveContainerCommand,
-  MoveWidgetCommand,
-  UpdateContainerColumnsCommand,
-  UpdateContainerSettingsCommand,
-  RenameWidgetCommand,
-  ReplaceLayoutCommand,
-  AddFlexContainerCommand
-} from '@/modules/layout/commands';
-
-
-interface LayoutContextType {
-  // Generic page management
-  loadPageLayout: (pageId: string, defaultName?: string) => Promise<void>;
-  getLoadedPageLayout: (pageId: string) => PageLayout | null;
-  clearPageLayout: (pageId: string) => Promise<void>;
-
-  // Generic page actions
-  addWidgetToPage: (pageId: string, containerId: string, widgetId: string, targetColumn?: number, rowId?: string, initialProps?: Record<string, any>) => Promise<WidgetInstance>;
-  removeWidgetFromPage: (pageId: string, widgetInstanceId: string) => Promise<void>;
-  moveWidgetInPage: (pageId: string, widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => Promise<void>;
-  updatePageContainerColumns: (pageId: string, containerId: string, columns: number) => Promise<void>;
-  updatePageContainerSettings: (pageId: string, containerId: string, settings: Partial<LayoutContainer['settings']>) => Promise<void>;
-  addPageContainer: (pageId: string, parentContainerId?: string) => Promise<LayoutContainer>;
-  addFlexPageContainer: (pageId: string) => Promise<FlexibleContainer>;
-  removePageContainer: (pageId: string, containerId: string) => Promise<void>;
-  movePageContainer: (pageId: string, containerId: string, direction: 'up' | 'down') => Promise<void>;
-  updateWidgetProps: (pageId: string, widgetInstanceId: string, props: Record<string, any>) => Promise<void>;
-  renameWidget: (pageId: string, widgetInstanceId: string, newId: string) => Promise<boolean>;
-  exportPageLayout: (pageId: string) => Promise<string>;
-  importPageLayout: (pageId: string, jsonData: string) => Promise<PageLayout>;
-  hydratePageLayout: (pageId: string, layout: PageLayout) => void;
-
-  // Manual save
-  saveToApi: () => Promise<boolean>;
-
-  // History Actions
-  undo: () => Promise<void>;
-  redo: () => Promise<void>;
-  canUndo: boolean;
-  canRedo: boolean;
-  clearHistory: () => void;
-  executeCommand: (command: Command) => Promise<void>;
-
-  // State
-  isLoading: boolean;
-  loadedPages: Map<string, PageLayout>;
-}
-
-const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
-
-interface LayoutProviderProps {
-  children: ReactNode;
-}
-
-export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
-  const [loadedPages, setLoadedPages] = useState<Map<string, PageLayout>>(new Map());
-  const [isLoading, setIsLoading] = useState(true);
-
-  // History State
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
-
-  // Pending Metadata State
-  const [pendingMetadata, setPendingMetadata] = useState<Map<string, Record<string, any>>>(new Map());
-
-  const updateLayoutCallback = useCallback((pageId: string, layout: PageLayout) => {
-    setLoadedPages(prev => new Map(prev).set(pageId, layout));
-    // UnifiedLayoutManager.savePageLayout(layout).catch(e => console.error("Failed to persist layout update", e));
-  }, []);
-
-  const updatePageMetadataCallback = useCallback((pageId: string, metadata: Record<string, any>) => {
-    setPendingMetadata(prev => {
-      const newMap = new Map(prev);
-      const existing = newMap.get(pageId) || {};
-      newMap.set(pageId, { ...existing, ...metadata });
-      return newMap;
-    });
-  }, []);
-
-  const [historyManager] = useState(() => new HistoryManager({
-    pageId: '',
-    layouts: loadedPages,
-    updateLayout: updateLayoutCallback,
-    pageMetadata: pendingMetadata,
-    updatePageMetadata: updatePageMetadataCallback
-  }));
-
-  // Update history manager context when state changes
-  useEffect(() => {
-    // We need to update the context inside historyManager so it has access to latest state
-    // but HistoryManager doesn't preserve context reference, it uses it per execute/undo/redo.
-    // However, for 'executeCommand' prop below, we construct a fresh context.
-  }, [loadedPages, pendingMetadata, updateLayoutCallback, updatePageMetadataCallback]);
-
-
-  const updateHistoryState = useCallback(() => {
-    setCanUndo(historyManager.canUndo());
-    setCanRedo(historyManager.canRedo());
-  }, [historyManager]);
-
-  useEffect(() => {
-    updateHistoryState();
-  }, [historyManager, loadedPages, pendingMetadata]);
-
-  // Load layout
-  const loadPageLayout = useCallback(async (pageId: string, defaultName?: string) => {
-    try {
-      const layout = await UnifiedLayoutManager.getPageLayout(pageId, defaultName);
-      setLoadedPages(prev => new Map(prev).set(pageId, layout));
-    } catch (e) {
-      console.error("Failed to load page layout", e);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  const getLoadedPageLayout = useCallback((pageId: string) => {
-    return loadedPages.get(pageId) || null;
-  }, [loadedPages]);
-
-  const clearPageLayout = useCallback(async (pageId: string) => {
-    setLoadedPages(prev => {
-      const next = new Map(prev);
-      next.delete(pageId);
-      return next;
-    });
-  }, []);
-
-  // Widget Actions
-  const addWidgetToPage = useCallback(async (pageId: string, containerId: string, widgetId: string, targetColumn?: number, rowId?: string, initialProps?: Record<string, any>) => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) throw new Error("Layout not loaded");
-
-    const widgetInstance = UnifiedLayoutManager.createWidgetInstance(widgetId);
-    if (initialProps) {
-      widgetInstance.props = { ...widgetInstance.props, ...initialProps };
-    }
-
-    // For flex containers, set cell placement
-    if (rowId) {
-      widgetInstance.rowId = rowId;
-      widgetInstance.column = targetColumn ?? 0;
-    }
-
-    // Use Command for Undo/Redo
-    const command = new AddWidgetCommand(pageId, containerId, widgetInstance, -1);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-    return widgetInstance;
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const removeWidgetFromPage = useCallback(async (pageId: string, widgetInstanceId: string) => {
-    const command = new RemoveWidgetCommand(pageId, widgetInstanceId);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const updateWidgetProps = useCallback(async (pageId: string, widgetInstanceId: string, props: Record<string, any>) => {
-    const propsKeys = Object.keys(props);
-    const isTabSync = propsKeys.includes('tabs');
-    if (isTabSync) {
-      console.log('[LayoutContext updateWidgetProps] TAB SYNC-BACK received', {
-        pageId, widgetInstanceId, timestamp: Date.now(),
-        loadedPagesKeys: [...loadedPages.keys()],
-        parentLayoutUpdatedAt: loadedPages.get(pageId)?.updatedAt,
-        props
-      });
-    }
-    const command = new UpdateWidgetSettingsCommand(pageId, widgetInstanceId, props);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  // Other Actions (Direct Update for now)
-  const moveWidgetInPage = useCallback(async (pageId: string, widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) return;
-
-    const command = new MoveWidgetCommand(pageId, widgetInstanceId, direction);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const updatePageContainerColumns = useCallback(async (pageId: string, containerId: string, columns: number) => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) return;
-    const command = new UpdateContainerColumnsCommand(pageId, containerId, columns);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const updatePageContainerSettings = useCallback(async (pageId: string, containerId: string, settings: Partial<LayoutContainer['settings']>) => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) return;
-    const command = new UpdateContainerSettingsCommand(pageId, containerId, settings);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const addPageContainer = useCallback(async (pageId: string, parentContainerId?: string) => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) throw new Error("Layout not loaded");
-    // Create container instance first (pure)
-    // UnifiedLayoutManager.addContainer mutates, checking if we can generate detached container?
-    // We can't easily generate detached container with UnifiedLayoutManager.addContainer without a layout.
-    // So we manually create it here or use a helper that doesn't attach.
-    // UnifiedLayoutManager.generateContainerId is static.
-
-    // Manual creation to follow command pattern:
-    const newContainer: LayoutContainer = {
-      id: UnifiedLayoutManager.generateContainerId(),
-      type: 'container',
-      columns: 1,
-      gap: 16,
-      widgets: [],
-      children: [],
-      order: 0 // Command execution will set order
-    };
-
-    const command = new AddContainerCommand(pageId, newContainer, parentContainerId);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-    return newContainer;
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const addFlexPageContainer = useCallback(async (pageId: string) => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) throw new Error("Layout not loaded");
-
-    const newContainer: FlexibleContainer = {
-      id: UnifiedLayoutManager.generateContainerId(),
-      type: 'flex-container',
-      rows: [{
-        id: UnifiedLayoutManager.generateRowId(),
-        columns: [{ width: 1, unit: 'fr' }, { width: 1, unit: 'fr' }],
-        sizing: 'constrained',
-      }],
-      widgets: [],
-      gap: 16,
-      order: 0,
-    };
-
-    const command = new AddFlexContainerCommand(pageId, newContainer);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-    return newContainer;
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const removePageContainer = useCallback(async (pageId: string, containerId: string) => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) return;
-    const command = new RemoveContainerCommand(pageId, containerId);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const movePageContainer = useCallback(async (pageId: string, containerId: string, direction: 'up' | 'down') => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) return;
-    const command = new MoveContainerCommand(pageId, containerId, direction);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const renameWidget = useCallback(async (pageId: string, widgetInstanceId: string, newId: string) => {
-    const layout = loadedPages.get(pageId);
-    if (!layout) return false;
-    const command = new RenameWidgetCommand(pageId, widgetInstanceId, newId);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-    return true; // Command execution is async void, we assume success if no throw
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const exportPageLayout = useCallback(async (pageId: string) => {
-    return UnifiedLayoutManager.exportPageLayout(pageId);
-  }, []);
-
-  const importPageLayout = useCallback(async (pageId: string, jsonData: string) => {
-    // Use parseLayoutJSON (pure) then execute ReplaceLayoutCommand
-    const parsedLayout = UnifiedLayoutManager.parseLayoutJSON(jsonData, pageId);
-
-    const command = new ReplaceLayoutCommand(pageId, parsedLayout);
-    await historyManager.execute(command, {
-      pageId,
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-    return parsedLayout;
-  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
-
-  const hydratePageLayout = useCallback((pageId: string, layout: PageLayout) => {
-    setLoadedPages(prev => new Map(prev).set(pageId, layout));
-    setIsLoading(false);
-  }, []);
-
-  const saveToApi = useCallback(async (): Promise<boolean> => {
-    return true;
-  }, []);
-
-  const undo = async () => {
-    await historyManager.undo({
-      pageId: '',
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  };
-
-  const redo = async () => {
-    await historyManager.redo({
-      pageId: '',
-      layouts: loadedPages,
-      updateLayout: updateLayoutCallback,
-      pageMetadata: pendingMetadata,
-      updatePageMetadata: updatePageMetadataCallback
-    });
-    updateHistoryState();
-  };
-
-  const clearHistory = useCallback(() => {
-    historyManager.clear();
-    updateHistoryState();
-  }, [historyManager, updateHistoryState]);
-
-  return (
-    <LayoutContext.Provider value={{
-      // ... existing values ...
-      loadPageLayout,
-      getLoadedPageLayout,
-      clearPageLayout,
-      addWidgetToPage,
-      removeWidgetFromPage,
-      moveWidgetInPage,
-      updatePageContainerColumns,
-      updatePageContainerSettings,
-      addPageContainer,
-      addFlexPageContainer,
-      removePageContainer,
-      movePageContainer,
-      updateWidgetProps,
-      renameWidget,
-      saveToApi,
-      exportPageLayout,
-      importPageLayout,
-      hydratePageLayout,
-      isLoading,
-      loadedPages,
-      undo,
-      redo,
-      canUndo,
-      canRedo,
-      clearHistory,
-      executeCommand: async (command: Command) => {
-        await historyManager.execute(command, {
-          pageId: '',
-          layouts: loadedPages,
-          updateLayout: updateLayoutCallback,
-          pageMetadata: pendingMetadata,
-          updatePageMetadata: updatePageMetadataCallback
-        });
-        updateHistoryState();
-      }
-    }}>
-      {children}
-    </LayoutContext.Provider>
-  );
-};
-
-export const useLayout = (): LayoutContextType => {
-  const context = useContext(LayoutContext);
-  if (context === undefined) {
-    throw new Error('useLayout must be used within a LayoutProvider');
-  }
-  return context;
-};
\ No newline at end of file
+import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
+import { UnifiedLayoutManager, PageLayout, WidgetInstance, LayoutContainer, FlexibleContainer } from '@/modules/layout/LayoutManager';
+import { HistoryManager } from '@/modules/layout/HistoryManager';
+import { Command } from '@/modules/layout/types';
+import {
+  AddWidgetCommand,
+  RemoveWidgetCommand,
+  UpdateWidgetSettingsCommand,
+  AddContainerCommand,
+  RemoveContainerCommand,
+  MoveContainerCommand,
+  MoveWidgetCommand,
+  UpdateContainerColumnsCommand,
+  UpdateContainerSettingsCommand,
+  RenameWidgetCommand,
+  ReplaceLayoutCommand,
+  AddFlexContainerCommand
+} from '@/modules/layout/commands';
+
+
+interface LayoutContextType {
+  // Generic page management
+  loadPageLayout: (pageId: string, defaultName?: string) => Promise<void>;
+  getLoadedPageLayout: (pageId: string) => PageLayout | null;
+  clearPageLayout: (pageId: string) => Promise<void>;
+
+  // Generic page actions
+  addWidgetToPage: (pageId: string, containerId: string, widgetId: string, targetColumn?: number, rowId?: string, initialProps?: Record<string, any>) => Promise<WidgetInstance>;
+  removeWidgetFromPage: (pageId: string, widgetInstanceId: string) => Promise<void>;
+  moveWidgetInPage: (pageId: string, widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => Promise<void>;
+  updatePageContainerColumns: (pageId: string, containerId: string, columns: number) => Promise<void>;
+  updatePageContainerSettings: (pageId: string, containerId: string, settings: Partial<LayoutContainer['settings']>) => Promise<void>;
+  addPageContainer: (pageId: string, parentContainerId?: string) => Promise<LayoutContainer>;
+  addFlexPageContainer: (pageId: string) => Promise<FlexibleContainer>;
+  removePageContainer: (pageId: string, containerId: string) => Promise<void>;
+  movePageContainer: (pageId: string, containerId: string, direction: 'up' | 'down') => Promise<void>;
+  updateWidgetProps: (pageId: string, widgetInstanceId: string, props: Record<string, any>) => Promise<void>;
+  renameWidget: (pageId: string, widgetInstanceId: string, newId: string) => Promise<boolean>;
+  exportPageLayout: (pageId: string) => Promise<string>;
+  importPageLayout: (pageId: string, jsonData: string) => Promise<PageLayout>;
+  hydratePageLayout: (pageId: string, layout: PageLayout) => void;
+
+  // Manual save
+  saveToApi: () => Promise<boolean>;
+
+  // History Actions
+  undo: () => Promise<void>;
+  redo: () => Promise<void>;
+  canUndo: boolean;
+  canRedo: boolean;
+  clearHistory: () => void;
+  executeCommand: (command: Command) => Promise<void>;
+
+  // State
+  isLoading: boolean;
+  loadedPages: Map<string, PageLayout>;
+}
+
+const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
+
+interface LayoutProviderProps {
+  children: ReactNode;
+}
+
+export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
+  const [loadedPages, setLoadedPages] = useState<Map<string, PageLayout>>(new Map());
+  const [isLoading, setIsLoading] = useState(true);
+
+  // History State
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  // Pending Metadata State
+  const [pendingMetadata, setPendingMetadata] = useState<Map<string, Record<string, any>>>(new Map());
+
+  const updateLayoutCallback = useCallback((pageId: string, layout: PageLayout) => {
+    setLoadedPages(prev => new Map(prev).set(pageId, layout));
+    // UnifiedLayoutManager.savePageLayout(layout).catch(e => console.error("Failed to persist layout update", e));
+  }, []);
+
+  const updatePageMetadataCallback = useCallback((pageId: string, metadata: Record<string, any>) => {
+    setPendingMetadata(prev => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(pageId) || {};
+      newMap.set(pageId, { ...existing, ...metadata });
+      return newMap;
+    });
+  }, []);
+
+  const [historyManager] = useState(() => new HistoryManager({
+    pageId: '',
+    layouts: loadedPages,
+    updateLayout: updateLayoutCallback,
+    pageMetadata: pendingMetadata,
+    updatePageMetadata: updatePageMetadataCallback
+  }));
+
+  // Update history manager context when state changes
+  useEffect(() => {
+    // We need to update the context inside historyManager so it has access to latest state
+    // but HistoryManager doesn't preserve context reference, it uses it per execute/undo/redo.
+    // However, for 'executeCommand' prop below, we construct a fresh context.
+  }, [loadedPages, pendingMetadata, updateLayoutCallback, updatePageMetadataCallback]);
+
+
+  const updateHistoryState = useCallback(() => {
+    setCanUndo(historyManager.canUndo());
+    setCanRedo(historyManager.canRedo());
+  }, [historyManager]);
+
+  useEffect(() => {
+    updateHistoryState();
+  }, [historyManager, loadedPages, pendingMetadata]);
+
+  // Load layout
+  const loadPageLayout = useCallback(async (pageId: string, defaultName?: string) => {
+    try {
+      const layout = await UnifiedLayoutManager.getPageLayout(pageId, defaultName);
+      setLoadedPages(prev => new Map(prev).set(pageId, layout));
+    } catch (e) {
+      console.error("Failed to load page layout", e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const getLoadedPageLayout = useCallback((pageId: string) => {
+    return loadedPages.get(pageId) || null;
+  }, [loadedPages]);
+
+  const clearPageLayout = useCallback(async (pageId: string) => {
+    setLoadedPages(prev => {
+      const next = new Map(prev);
+      next.delete(pageId);
+      return next;
+    });
+  }, []);
+
+  // Widget Actions
+  const addWidgetToPage = useCallback(async (pageId: string, containerId: string, widgetId: string, targetColumn?: number, rowId?: string, initialProps?: Record<string, any>) => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) throw new Error("Layout not loaded");
+
+    const widgetInstance = UnifiedLayoutManager.createWidgetInstance(widgetId);
+    if (initialProps) {
+      widgetInstance.props = { ...widgetInstance.props, ...initialProps };
+    }
+
+    // For flex containers, set cell placement
+    if (rowId) {
+      widgetInstance.rowId = rowId;
+      widgetInstance.column = targetColumn ?? 0;
+    }
+
+    // Use Command for Undo/Redo
+    const command = new AddWidgetCommand(pageId, containerId, widgetInstance, -1);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+    return widgetInstance;
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const removeWidgetFromPage = useCallback(async (pageId: string, widgetInstanceId: string) => {
+    const command = new RemoveWidgetCommand(pageId, widgetInstanceId);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const updateWidgetProps = useCallback(async (pageId: string, widgetInstanceId: string, props: Record<string, any>) => {
+    const propsKeys = Object.keys(props);
+    const isTabSync = propsKeys.includes('tabs');
+    if (isTabSync) {
+      console.log('[LayoutContext updateWidgetProps] TAB SYNC-BACK received', {
+        pageId, widgetInstanceId, timestamp: Date.now(),
+        loadedPagesKeys: [...loadedPages.keys()],
+        parentLayoutUpdatedAt: loadedPages.get(pageId)?.updatedAt,
+        props
+      });
+    }
+    const command = new UpdateWidgetSettingsCommand(pageId, widgetInstanceId, props);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  // Other Actions (Direct Update for now)
+  const moveWidgetInPage = useCallback(async (pageId: string, widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) return;
+
+    const command = new MoveWidgetCommand(pageId, widgetInstanceId, direction);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const updatePageContainerColumns = useCallback(async (pageId: string, containerId: string, columns: number) => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) return;
+    const command = new UpdateContainerColumnsCommand(pageId, containerId, columns);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const updatePageContainerSettings = useCallback(async (pageId: string, containerId: string, settings: Partial<LayoutContainer['settings']>) => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) return;
+    const command = new UpdateContainerSettingsCommand(pageId, containerId, settings);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const addPageContainer = useCallback(async (pageId: string, parentContainerId?: string) => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) throw new Error("Layout not loaded");
+    // Create container instance first (pure)
+    // UnifiedLayoutManager.addContainer mutates, checking if we can generate detached container?
+    // We can't easily generate detached container with UnifiedLayoutManager.addContainer without a layout.
+    // So we manually create it here or use a helper that doesn't attach.
+    // UnifiedLayoutManager.generateContainerId is static.
+
+    // Manual creation to follow command pattern:
+    const newContainer: LayoutContainer = {
+      id: UnifiedLayoutManager.generateContainerId(),
+      type: 'container',
+      columns: 1,
+      gap: 16,
+      widgets: [],
+      children: [],
+      order: 0 // Command execution will set order
+    };
+
+    const command = new AddContainerCommand(pageId, newContainer, parentContainerId);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+    return newContainer;
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const addFlexPageContainer = useCallback(async (pageId: string) => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) throw new Error("Layout not loaded");
+
+    const newContainer: FlexibleContainer = {
+      id: UnifiedLayoutManager.generateContainerId(),
+      type: 'flex-container',
+      rows: [{
+        id: UnifiedLayoutManager.generateRowId(),
+        columns: [{ width: 1, unit: 'fr' }, { width: 1, unit: 'fr' }],
+        sizing: 'constrained',
+      }],
+      widgets: [],
+      gap: 16,
+      order: 0,
+    };
+
+    const command = new AddFlexContainerCommand(pageId, newContainer);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+    return newContainer;
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const removePageContainer = useCallback(async (pageId: string, containerId: string) => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) return;
+    const command = new RemoveContainerCommand(pageId, containerId);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const movePageContainer = useCallback(async (pageId: string, containerId: string, direction: 'up' | 'down') => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) return;
+    const command = new MoveContainerCommand(pageId, containerId, direction);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const renameWidget = useCallback(async (pageId: string, widgetInstanceId: string, newId: string) => {
+    const layout = loadedPages.get(pageId);
+    if (!layout) return false;
+    const command = new RenameWidgetCommand(pageId, widgetInstanceId, newId);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+    return true; // Command execution is async void, we assume success if no throw
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const exportPageLayout = useCallback(async (pageId: string) => {
+    return UnifiedLayoutManager.exportPageLayout(pageId);
+  }, []);
+
+  const importPageLayout = useCallback(async (pageId: string, jsonData: string) => {
+    // Use parseLayoutJSON (pure) then execute ReplaceLayoutCommand
+    const parsedLayout = UnifiedLayoutManager.parseLayoutJSON(jsonData, pageId);
+
+    const command = new ReplaceLayoutCommand(pageId, parsedLayout);
+    await historyManager.execute(command, {
+      pageId,
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+    return parsedLayout;
+  }, [loadedPages, historyManager, updateLayoutCallback, pendingMetadata, updatePageMetadataCallback, updateHistoryState]);
+
+  const hydratePageLayout = useCallback((pageId: string, layout: PageLayout) => {
+    setLoadedPages(prev => new Map(prev).set(pageId, layout));
+    setIsLoading(false);
+  }, []);
+
+  const saveToApi = useCallback(async (): Promise<boolean> => {
+    return true;
+  }, []);
+
+  const undo = async () => {
+    await historyManager.undo({
+      pageId: '',
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  };
+
+  const redo = async () => {
+    await historyManager.redo({
+      pageId: '',
+      layouts: loadedPages,
+      updateLayout: updateLayoutCallback,
+      pageMetadata: pendingMetadata,
+      updatePageMetadata: updatePageMetadataCallback
+    });
+    updateHistoryState();
+  };
+
+  const clearHistory = useCallback(() => {
+    historyManager.clear();
+    updateHistoryState();
+  }, [historyManager, updateHistoryState]);
+
+  return (
+    <LayoutContext.Provider value={{
+      // ... existing values ...
+      loadPageLayout,
+      getLoadedPageLayout,
+      clearPageLayout,
+      addWidgetToPage,
+      removeWidgetFromPage,
+      moveWidgetInPage,
+      updatePageContainerColumns,
+      updatePageContainerSettings,
+      addPageContainer,
+      addFlexPageContainer,
+      removePageContainer,
+      movePageContainer,
+      updateWidgetProps,
+      renameWidget,
+      saveToApi,
+      exportPageLayout,
+      importPageLayout,
+      hydratePageLayout,
+      isLoading,
+      loadedPages,
+      undo,
+      redo,
+      canUndo,
+      canRedo,
+      clearHistory,
+      executeCommand: async (command: Command) => {
+        await historyManager.execute(command, {
+          pageId: '',
+          layouts: loadedPages,
+          updateLayout: updateLayoutCallback,
+          pageMetadata: pendingMetadata,
+          updatePageMetadata: updatePageMetadataCallback
+        });
+        updateHistoryState();
+      }
+    }}>
+      {children}
+    </LayoutContext.Provider>
+  );
+};
+
+export const useLayout = (): LayoutContextType => {
+  const context = useContext(LayoutContext);
+  if (context === undefined) {
+    throw new Error('useLayout must be used within a LayoutProvider');
+  }
+  return context;
+};
diff --git a/packages/ui/src/modules/layout/LayoutManager.ts b/packages/ui/src/modules/layout/LayoutManager.ts
index f11e39f8..419c5325 100644
--- a/packages/ui/src/modules/layout/LayoutManager.ts
+++ b/packages/ui/src/modules/layout/LayoutManager.ts
@@ -1,1106 +1,1106 @@
-import { getLayout, createLayout, updateLayout } from './client-layouts';
-import { widgetRegistry } from '@/lib/widgetRegistry';
-import { updatePage } from '@/modules/pages/client-pages';
-
-export interface WidgetInstance {
-  id: string;
-  widgetId: string; // References the widget registry ID
-  props?: Record<string, any>;
-  order?: number;
-  // Flexible Container placement (only used inside FlexibleContainer)
-  rowId?: string;
-  column?: number;
-  // Tracks which snippet this widget was instantiated from
-  snippetId?: string;
-}
-
-export interface LayoutContainer {
-  id: string;
-  type: 'container';
-  columns: number;
-  gap: number;
-  widgets: WidgetInstance[];
-  children: LayoutContainer[];
-  order?: number;
-  settings?: {
-    collapsible?: boolean;
-    collapsed?: boolean;
-    title?: string;
-    showTitle?: boolean;
-    customClassName?: string;
-    enabled?: boolean;
-  };
-}
-
-// Flexible Container: row-based layout with adjustable columns
-export interface ColumnDef {
-  width: number;
-  unit: 'fr' | 'px' | 'rem' | '%';
-  minWidth?: number;
-}
-
-export interface RowDef {
-  id: string;
-  columns: ColumnDef[];
-  gap?: number;
-  sizing?: 'constrained' | 'unconstrained';
-  cellAlignments?: ('stretch' | 'start' | 'center' | 'end')[];
-  padding?: string; // Tailwind padding class e.g. 'p-2', 'p-4'
-}
-
-export interface FlexibleContainer {
-  id: string;
-  type: 'flex-container';
-  rows: RowDef[];
-  widgets: WidgetInstance[];
-  gap: number;
-  order?: number;
-  settings?: LayoutContainer['settings'];
-}
-
-export type AnyContainer = LayoutContainer | FlexibleContainer;
-
-export interface PageLayout {
-  id: string;
-  name: string;
-  containers: AnyContainer[];
-  createdAt: number;
-  updatedAt: number;
-  loadedBundles?: string[];
-  rootTemplate?: string;
-}
-
-export interface RootLayoutData {
-  pages: Record<string, PageLayout>;
-  version: string;
-  lastUpdated: number;
-}
-
-
-
-export class UnifiedLayoutManager {
-  private static readonly VERSION = '1.0.0';
-
-  // Type guards
-  static isLayoutContainer(c: AnyContainer): c is LayoutContainer {
-    return c.type === 'container';
-  }
-
-  static isFlexibleContainer(c: AnyContainer): c is FlexibleContainer {
-    return c.type === 'flex-container';
-  }
-
-  // Helper: get LayoutContainers only (for methods that only operate on old containers)
-  static getLayoutContainers(containers: AnyContainer[]): LayoutContainer[] {
-    return containers.filter((c): c is LayoutContainer => c.type === 'container');
-  }
-
-  // Generate unique IDs
-  static generateId(): string {
-    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-
-  static generateContainerId(): string {
-    return `container-${this.generateId()}`;
-  }
-
-  static generateWidgetId(): string {
-    return `widget-${this.generateId()}`;
-  }
-
-  static generateRowId(): string {
-    return `row-${this.generateId()}`;
-  }
-
-  // Create a standalone widget instance (for Command pattern)
-  static createWidgetInstance(widgetId: string): WidgetInstance {
-    let defaultProps = {};
-    const widgetDef = widgetRegistry.get(widgetId);
-    if (widgetDef && widgetDef.metadata.defaultProps) {
-      defaultProps = { ...widgetDef.metadata.defaultProps };
-    }
-
-    return {
-      id: this.generateWidgetId(),
-      widgetId,
-      props: defaultProps,
-      order: 0
-    };
-  }
-
-  // Get all widgets in a layout (recursive, supports both container types)
-  static getAllWidgets(layout: PageLayout): WidgetInstance[] {
-    const widgets: WidgetInstance[] = [];
-    const collect = (containers: AnyContainer[]) => {
-      containers.forEach(c => {
-        widgets.push(...c.widgets);
-        if (this.isLayoutContainer(c)) {
-          collect(c.children);
-        }
-      });
-    };
-    collect(layout.containers);
-    return widgets;
-  }
-
-  // Load root data from storage (database-only, no localStorage)
-  static async loadRootData(pageId?: string): Promise<RootLayoutData> {
-    if (!pageId) {
-      return { pages: {}, version: this.VERSION, lastUpdated: Date.now() };
-    }
-
-    try {
-      const isPage = pageId.startsWith('page-');
-      const isLayout = pageId.startsWith('layout-') || pageId.startsWith('tabs-');
-      if (isPage) {
-        const actualId = pageId.replace('page-', '');
-        const { fetchPageDetailsById } = await import('@/modules/pages/client-pages');
-        const data = await fetchPageDetailsById(actualId);
-
-        if (data && data.page && data.page.content) {
-          let content = data.page.content;
-          if (typeof content === 'string') {
-            try { content = JSON.parse(content); } catch (e) { /* ignore */ }
-          }
-          // Ensure it has the structure we expect, or wrap it
-          // If content is just the PageLayout object
-          if ((content as any).id && (content as any).containers) {
-            return {
-              pages: { [pageId]: content as PageLayout },
-              version: this.VERSION,
-              lastUpdated: Date.now()
-            };
-          }
-          return content as RootLayoutData;
-        }
-      } else if (isLayout) {
-        const layoutId = pageId.replace(/^(layout-|tabs-)/, '');
-        try {
-          const { data } = await getLayout(layoutId);
-          const layoutJson = data?.layout_json;
-
-          if (layoutJson) {
-            return {
-              pages: { [pageId]: layoutJson as PageLayout },
-              version: this.VERSION,
-              lastUpdated: Date.now()
-            };
-          }
-        } catch (e) {
-          console.warn('Layout not found or failed to load:', layoutId);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to load layouts from database:', error);
-    }
-
-    // Return default structure
-    return {
-      pages: {},
-      version: this.VERSION,
-      lastUpdated: Date.now()
-    };
-  }
-
-  // Save root data to storage (database-only, no localStorage)
-  static async saveRootData(data: RootLayoutData, pageId?: string, metadata?: Record<string, any>): Promise<void> {
-    if (!pageId) return;
-
-    try {
-      const isPage = pageId.startsWith('page-');
-      const isLayout = pageId.startsWith('layout-') || pageId.startsWith('tabs-');
-
-      if (isPage) {
-        const actualId = pageId.replace('page-', '');
-        await updatePage(actualId, {
-          content: data,
-          updated_at: new Date().toISOString(),
-          ...(metadata || {})
-        });
-      } else if (isLayout) {
-        const layoutJson = data.pages?.[pageId];
-        if (layoutJson) {
-          const layoutId = pageId.replace(/^(layout-|tabs-)/, '');
-          const layoutData = {
-            id: layoutId,
-            layout_json: layoutJson,
-            meta: metadata,
-            name: metadata?.title || `Layout ${pageId}`
-          };
-
-          // Upsert logic
-          try {
-            let exists = false;
-            try {
-              await getLayout(layoutId);
-              exists = true;
-            } catch (e) {
-              // Assuming 404 or failure means we should try create
-            }
-
-            if (exists) {
-              await updateLayout(layoutId, layoutData);
-            } else {
-              await createLayout(layoutData);
-            }
-          } catch (error) {
-            console.error('Failed to save layout via API', error);
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Failed to save layouts to database:', error);
-    }
-  }
-
-
-  // Manual save to API
-  static async saveToApi(data?: RootLayoutData): Promise<boolean> {
-    try {
-      const dataToSave = data || await this.loadRootData();
-      dataToSave.lastUpdated = Date.now();
-      return false;
-    } catch (error) {
-      console.error('Failed to save layouts to API:', error);
-      return false;
-    }
-  }
-
-  // Get or create page layout (database-only)
-  static async getPageLayout(pageId: string, defaultName?: string): Promise<PageLayout> {
-    // Load from database
-    const rootData = await this.loadRootData(pageId);
-
-    if (!rootData.pages[pageId]) {
-      // Create new page layout
-      rootData.pages[pageId] = {
-        id: pageId,
-        name: defaultName || `Page ${pageId}`,
-        containers: [
-          {
-            id: this.generateContainerId(),
-            type: 'container',
-            columns: 1,
-            gap: 16,
-            widgets: [],
-            children: [],
-            order: 0
-          }
-        ],
-        createdAt: Date.now(),
-        updatedAt: Date.now()
-      };
-
-      // Save the new layout to database immediately
-      await this.savePageLayout(rootData.pages[pageId]);
-    }
-
-    return rootData.pages[pageId];
-  }
-
-  // Save page layout (database-only)
-  static async savePageLayout(layout: PageLayout, metadata?: Record<string, any>): Promise<void> {
-    layout.updatedAt = Date.now();
-
-    // Create a minimal RootLayoutData for just this page
-    const pageData: RootLayoutData = {
-      pages: { [layout.id]: layout },
-      version: this.VERSION,
-      lastUpdated: Date.now()
-    };
-
-    // Save directly to database
-    await this.saveRootData(pageData, layout.id, metadata);
-  }
-
-  // Find container by ID in layout (recursive, supports both container types)
-  static findContainer(containers: AnyContainer[], containerId: string): AnyContainer | null {
-    for (const container of containers) {
-      if (container.id === containerId) {
-        return container;
-      }
-      if (this.isLayoutContainer(container)) {
-        const found = this.findContainer(container.children, containerId);
-        if (found) return found;
-      }
-    }
-    return null;
-  }
-
-  // Find a LayoutContainer specifically (narrows type)
-  static findLayoutContainer(containers: AnyContainer[], containerId: string): LayoutContainer | null {
-    const found = this.findContainer(containers, containerId);
-    return found && this.isLayoutContainer(found) ? found : null;
-  }
-
-  // Find a FlexibleContainer specifically (narrows type)
-  static findFlexContainer(containers: AnyContainer[], containerId: string): FlexibleContainer | null {
-    const found = this.findContainer(containers, containerId);
-    return found && this.isFlexibleContainer(found) ? found : null;
-  }
-
-  // Calculate insertion index based on column target
-  static calculateWidgetInsertionIndex(container: LayoutContainer, targetColumn?: number): number {
-    let order = container.widgets.length;
-
-    if (targetColumn !== undefined && targetColumn >= 0 && targetColumn < container.columns) {
-      const occupiedPositionsInColumn = container.widgets
-        .map((_, index) => index)
-        .filter(index => index % container.columns === targetColumn);
-
-      let targetRow = 0;
-      while (occupiedPositionsInColumn.includes(targetRow * container.columns + targetColumn)) {
-        targetRow++;
-      }
-
-      order = targetRow * container.columns + targetColumn;
-
-      if (order > container.widgets.length) {
-        order = container.widgets.length;
-      }
-    }
-    return order;
-  }
-
-  // Add widget to specific container
-  static addWidgetToContainer(
-    layout: PageLayout,
-    containerId: string,
-    widgetId: string,
-    targetColumn?: number
-  ): WidgetInstance {
-    const container = this.findContainer(layout.containers, containerId);
-
-    if (!container) {
-      throw new Error(`Container ${containerId} not found`);
-    }
-
-    let order = container.widgets.length;
-
-    // Column targeting only applies to LayoutContainer
-    if (this.isLayoutContainer(container) && targetColumn !== undefined && targetColumn >= 0 && targetColumn < container.columns) {
-      const occupiedPositionsInColumn = container.widgets
-        .map((_, index) => index)
-        .filter(index => index % container.columns === targetColumn);
-
-      let targetRow = 0;
-      while (occupiedPositionsInColumn.includes(targetRow * container.columns + targetColumn)) {
-        targetRow++;
-      }
-
-      order = targetRow * container.columns + targetColumn;
-
-      if (order > container.widgets.length) {
-        order = container.widgets.length;
-      }
-    }
-
-    // Get default props from registry if available
-    let defaultProps = {};
-    const widgetDef = widgetRegistry.get(widgetId);
-    if (widgetDef && widgetDef.metadata.defaultProps) {
-      defaultProps = { ...widgetDef.metadata.defaultProps };
-    }
-
-    const newWidget: WidgetInstance = {
-      id: this.generateWidgetId(),
-      widgetId,
-      props: defaultProps,
-      order
-    };
-
-    container.widgets.splice(order, 0, newWidget);
-    container.widgets.forEach((w, i) => w.order = i);
-
-    return newWidget;
-  }
-
-
-
-  // Remove widget from container
-  static removeWidgetFromContainer(layout: PageLayout, widgetInstanceId: string): boolean {
-    const removeFromContainers = (containers: AnyContainer[]): boolean => {
-      for (const container of containers) {
-        const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
-        if (widgetIndex >= 0) {
-          container.widgets.splice(widgetIndex, 1);
-          container.widgets.forEach((w, i) => w.order = i);
-          return true;
-        }
-        if (this.isLayoutContainer(container) && removeFromContainers(container.children)) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    return removeFromContainers(layout.containers);
-  }
-
-
-
-  // Update widget props
-  static updateWidgetProps(layout: PageLayout, widgetInstanceId: string, props: Record<string, any>): boolean {
-    const findAndUpdateWidget = (containers: AnyContainer[]): boolean => {
-      for (const container of containers) {
-        const widget = container.widgets.find(w => w.id === widgetInstanceId);
-        if (widget) {
-          widget.props = { ...widget.props, ...props };
-          return true;
-        }
-        if (this.isLayoutContainer(container) && findAndUpdateWidget(container.children)) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    return findAndUpdateWidget(layout.containers);
-  }
-
-  // Rename widget (change instance ID)
-  static renameWidget(layout: PageLayout, oldId: string, newId: string): boolean {
-    // 1. Check if newId already exists
-    const findWidget = (containers: AnyContainer[]): boolean => {
-      for (const container of containers) {
-        if (container.widgets.some(w => w.id === newId)) {
-          return true;
-        }
-        if (this.isLayoutContainer(container) && findWidget(container.children)) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    if (findWidget(layout.containers)) {
-      console.warn(`Cannot rename widget: ID ${newId} already exists`);
-      return false;
-    }
-
-    // 2. Find and rename
-    const findAndRename = (containers: AnyContainer[]): boolean => {
-      for (const container of containers) {
-        const widget = container.widgets.find(w => w.id === oldId);
-        if (widget) {
-          widget.id = newId;
-          return true;
-        }
-        if (this.isLayoutContainer(container) && findAndRename(container.children)) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    return findAndRename(layout.containers);
-  }
-
-
-
-  // Update container columns (LayoutContainer only)
-  static updateContainerColumns(layout: PageLayout, containerId: string, columns: number): boolean {
-    const container = this.findLayoutContainer(layout.containers, containerId);
-
-    if (container) {
-      container.columns = Math.max(1, Math.min(12, columns));
-      return true;
-    }
-    return false;
-  }
-
-
-
-  // Update container gap
-  static async updateContainerGap(pageId: string, containerId: string, gap: number): Promise<void> {
-    const layout = await this.getPageLayout(pageId);
-    const container = this.findContainer(layout.containers, containerId);
-
-    if (container) {
-      container.gap = Math.max(0, gap);
-      await this.savePageLayout(layout);
-    }
-  }
-
-  // Update container settings
-  static updateContainerSettings(layout: PageLayout, containerId: string, settings: Partial<LayoutContainer['settings']>): boolean {
-    const container = this.findContainer(layout.containers, containerId);
-
-    if (container) {
-      container.settings = { ...container.settings, ...settings };
-      return true;
-    }
-    return false;
-  }
-
-
-
-  // Add new container
-  static addContainer(
-    layout: PageLayout,
-    parentContainerId?: string,
-    columns: number = 1
-  ): LayoutContainer {
-    const newContainer: LayoutContainer = {
-      id: this.generateContainerId(),
-      type: 'container',
-      columns,
-      gap: 16,
-      widgets: [],
-      children: [],
-      order: 0
-    };
-
-    if (parentContainerId) {
-      const parentContainer = this.findLayoutContainer(layout.containers, parentContainerId);
-      if (parentContainer) {
-        newContainer.order = parentContainer.children.length;
-        parentContainer.children.push(newContainer);
-      }
-    } else {
-      newContainer.order = layout.containers.length;
-      layout.containers.push(newContainer);
-    }
-
-    return newContainer;
-  }
-
-  // Add new FlexibleContainer
-  static addFlexibleContainer(
-    layout: PageLayout,
-  ): FlexibleContainer {
-    const newContainer: FlexibleContainer = {
-      id: this.generateContainerId(),
-      type: 'flex-container',
-      rows: [{
-        id: this.generateRowId(),
-        columns: [{ width: 1, unit: 'fr' }, { width: 1, unit: 'fr' }],
-        sizing: 'constrained',
-      }],
-      widgets: [],
-      gap: 16,
-      order: layout.containers.length
-    };
-
-    layout.containers.push(newContainer);
-    return newContainer;
-  }
-
-
-
-  // Remove container
-  static removeContainer(layout: PageLayout, containerId: string, allowRemoveLastContainer: boolean = false): boolean {
-    // Don't allow removing the last root container (unless explicitly allowed)
-    if (!allowRemoveLastContainer && layout.containers.length === 1 && layout.containers[0].id === containerId) {
-      return false;
-    }
-
-    // Remove from root containers
-    const originalLength = layout.containers.length;
-    layout.containers = layout.containers.filter(c => c.id !== containerId);
-
-    // Remove from nested containers (recursive)
-    const removeFromChildren = (containers: AnyContainer[]) => {
-      containers.forEach(container => {
-        if (this.isLayoutContainer(container)) {
-          container.children = container.children.filter(c => c.id !== containerId);
-          removeFromChildren(container.children);
-        }
-      });
-    };
-
-    removeFromChildren(layout.containers);
-
-    // Return true if something was removed
-    return layout.containers.length !== originalLength;
-  }
-
-  // Move a root-level container up or down
-  static moveRootContainer(layout: PageLayout, containerId: string, direction: 'up' | 'down'): boolean {
-    const containerIndex = layout.containers.findIndex(c => c.id === containerId);
-
-    if (containerIndex === -1) {
-      return false; // Container not found at root level
-    }
-
-    const targetIndex = direction === 'up' ? containerIndex - 1 : containerIndex + 1;
-
-    // Check if the move is within the bounds of the array
-    if (targetIndex < 0 || targetIndex >= layout.containers.length) {
-      return false;
-    }
-
-    // Swap the container with its target
-    const temp = layout.containers[containerIndex];
-    layout.containers[containerIndex] = layout.containers[targetIndex];
-    layout.containers[targetIndex] = temp;
-
-    // After swapping, update the order property for all root containers
-    layout.containers.forEach((container, index) => {
-      container.order = index;
-    });
-
-    return true;
-  }
-
-
-
-  // Move widget in any direction within its container (grid-aware)
-  static moveWidgetInContainer(
-    layout: PageLayout,
-    widgetInstanceId: string,
-    direction: 'up' | 'down' | 'left' | 'right'
-  ): boolean {
-
-    // Find the widget and its container (LayoutContainer only — grid movement is LC-specific)
-    const findWidgetContainer = (containers: AnyContainer[]): LayoutContainer | null => {
-      for (const container of containers) {
-        if (this.isLayoutContainer(container)) {
-          if (container.widgets.some(w => w.id === widgetInstanceId)) {
-            return container;
-          }
-          const found = findWidgetContainer(container.children);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-
-    const container = findWidgetContainer(layout.containers);
-    if (!container) return false;
-
-    const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
-    if (widgetIndex === -1) return false;
-
-    const { columns } = container;
-    const totalWidgets = container.widgets.length;
-
-    let targetIndex = -1;
-
-    switch (direction) {
-      case 'up':
-        targetIndex = widgetIndex - columns;
-        break;
-      case 'down':
-        targetIndex = widgetIndex + columns;
-        break;
-      case 'left':
-        // Prevent wrapping from first to last column
-        if (widgetIndex % columns !== 0) {
-          targetIndex = widgetIndex - 1;
-        }
-        break;
-      case 'right':
-        // Prevent wrapping from last to first column
-        if ((widgetIndex + 1) % columns !== 0) {
-          targetIndex = widgetIndex + 1;
-        }
-        break;
-    }
-
-    // Check if target is valid
-    if (targetIndex >= 0 && targetIndex < totalWidgets) {
-      // Perform the swap
-      [container.widgets[widgetIndex], container.widgets[targetIndex]] =
-        [container.widgets[targetIndex], container.widgets[widgetIndex]];
-
-      // Update order values
-      container.widgets.forEach((w, i) => w.order = i);
-      return true;
-    }
-
-    return false;
-  }
-
-  // Move widget directionally within a FlexibleContainer
-  static moveFlexWidget(
-    layout: PageLayout,
-    widgetInstanceId: string,
-    direction: 'up' | 'down' | 'left' | 'right'
-  ): boolean {
-    // Find the widget and its flex container
-    const findWidgetFlexContainer = (containers: AnyContainer[]): FlexibleContainer | null => {
-      for (const container of containers) {
-        if (this.isFlexibleContainer(container)) {
-          if (container.widgets.some(w => w.id === widgetInstanceId)) {
-            return container;
-          }
-        }
-        if (this.isLayoutContainer(container)) {
-          const found = findWidgetFlexContainer(container.children);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-
-    const container = findWidgetFlexContainer(layout.containers);
-    if (!container) return false;
-
-    const widget = container.widgets.find(w => w.id === widgetInstanceId);
-    if (!widget || !widget.rowId || widget.column === undefined) return false;
-
-    const rowIndex = container.rows.findIndex(r => r.id === widget.rowId);
-    if (rowIndex === -1) return false;
-
-    const currentRow = container.rows[rowIndex];
-
-    switch (direction) {
-      case 'left': {
-        if (widget.column <= 0) return false;
-        widget.column -= 1;
-        return true;
-      }
-      case 'right': {
-        if (widget.column >= currentRow.columns.length - 1) return false;
-        widget.column += 1;
-        return true;
-      }
-      case 'up': {
-        if (rowIndex <= 0) return false;
-        const targetRow = container.rows[rowIndex - 1];
-        // Clamp column to target row's column count
-        widget.rowId = targetRow.id;
-        widget.column = Math.min(widget.column, targetRow.columns.length - 1);
-        return true;
-      }
-      case 'down': {
-        if (rowIndex >= container.rows.length - 1) return false;
-        const targetRow = container.rows[rowIndex + 1];
-        widget.rowId = targetRow.id;
-        widget.column = Math.min(widget.column, targetRow.columns.length - 1);
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  // Drag-and-drop: move a widget to a specific target location (cross-container)
-  // Returns the original position for undo, or null if the move failed.
-  static moveWidgetToTarget(
-    layout: PageLayout,
-    widgetInstanceId: string,
-    target: { containerId: string; index?: number; rowId?: string; column?: number }
-  ): { containerId: string; index: number; rowId?: string; column?: number } | null {
-    // Find widget and source container
-    let sourceContainer: AnyContainer | null = null;
-    let widget: WidgetInstance | null = null;
-    let sourceIndex = -1;
-
-    const findWidget = (containers: AnyContainer[]): boolean => {
-      for (const c of containers) {
-        const idx = c.widgets.findIndex(w => w.id === widgetInstanceId);
-        if (idx >= 0) {
-          sourceContainer = c;
-          widget = c.widgets[idx];
-          sourceIndex = idx;
-          return true;
-        }
-        if (this.isLayoutContainer(c) && findWidget(c.children)) return true;
-      }
-      return false;
-    };
-    if (!findWidget(layout.containers) || !widget || !sourceContainer) return null;
-
-    // Capture original position for undo
-    const original: { containerId: string; index: number; rowId?: string; column?: number } = {
-      containerId: sourceContainer.id,
-      index: sourceIndex,
-      rowId: (widget as WidgetInstance).rowId,
-      column: (widget as WidgetInstance).column,
-    };
-
-    // Remove from source
-    sourceContainer.widgets.splice(sourceIndex, 1);
-    sourceContainer.widgets.forEach((w, i) => w.order = i);
-
-    // Find target container
-    const targetContainer = this.findContainer(layout.containers, target.containerId);
-    if (!targetContainer) return null;
-
-    // Assign flex placement or clear it
-    const w = widget as WidgetInstance;
-    if (target.rowId !== undefined) {
-      w.rowId = target.rowId;
-      w.column = target.column ?? 0;
-    } else {
-      // Moving to a regular container — clear flex props
-      delete w.rowId;
-      delete w.column;
-    }
-
-    // Insert at target
-    const insertIndex = target.index !== undefined
-      ? Math.min(target.index, targetContainer.widgets.length)
-      : targetContainer.widgets.length;
-    targetContainer.widgets.splice(insertIndex, 0, w);
-    targetContainer.widgets.forEach((wi, i) => wi.order = i);
-
-    return original;
-  }
-
-  // Get grid position of a widget (row, column)
-  static getWidgetGridPosition(
-    layout: PageLayout,
-    widgetInstanceId: string
-  ): { row: number; col: number; containerColumns: number } | null {
-    // Find the widget and its container (LayoutContainer only)
-    const findWidgetContainer = (containers: AnyContainer[]): LayoutContainer | null => {
-      for (const container of containers) {
-        if (this.isLayoutContainer(container)) {
-          if (container.widgets.some(w => w.id === widgetInstanceId)) {
-            return container;
-          }
-          const found = findWidgetContainer(container.children);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-
-    const container = findWidgetContainer(layout.containers);
-    if (!container) return null;
-
-    const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
-    if (widgetIndex === -1) return null;
-
-    const row = Math.floor(widgetIndex / container.columns);
-    const col = widgetIndex % container.columns;
-
-    return { row, col, containerColumns: container.columns };
-  }
-
-  // Move widget to specific grid position (row, column)
-  static moveWidgetToGridPosition(
-    layout: PageLayout,
-    widgetInstanceId: string,
-    targetRow: number,
-    targetCol: number
-  ): boolean {
-    // Find the widget and its container (LayoutContainer only)
-    const findWidgetContainer = (containers: AnyContainer[]): LayoutContainer | null => {
-      for (const container of containers) {
-        if (this.isLayoutContainer(container)) {
-          if (container.widgets.some(w => w.id === widgetInstanceId)) {
-            return container;
-          }
-          const found = findWidgetContainer(container.children);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-
-    const container = findWidgetContainer(layout.containers);
-    if (!container) return false;
-
-    const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
-    if (widgetIndex === -1) return false;
-
-    // Validate target position
-    if (targetRow < 0 || targetCol < 0 || targetCol >= container.columns) {
-      return false;
-    }
-
-    const targetIndex = targetRow * container.columns + targetCol;
-
-    // Don't move to the same position
-    if (targetIndex === widgetIndex) {
-      return false;
-    }
-
-    // For positions beyond current widget array, we can extend the array
-    // But we need to ensure we don't create gaps
-    if (targetIndex >= container.widgets.length) {
-      // Only allow if it's the next logical position (no gaps)
-      if (targetIndex > container.widgets.length) {
-        return false;
-      }
-    }
-
-    // Move the widget
-    const widget = container.widgets.splice(widgetIndex, 1)[0];
-
-    if (targetIndex >= container.widgets.length) {
-      // Append at the end
-      container.widgets.push(widget);
-    } else {
-      // Insert at target position
-      container.widgets.splice(targetIndex, 0, widget);
-    }
-
-    // Update order values
-    container.widgets.forEach((w, i) => w.order = i);
-
-    return true;
-  }
-
-
-
-  // Move widget within container or between containers (existing method for drag-drop)
-  static async moveWidget(
-    pageId: string,
-    widgetInstanceId: string,
-    targetContainerId: string,
-    newOrder: number
-  ): Promise<void> {
-    const layout = await this.getPageLayout(pageId);
-
-    // First, remove widget from current location
-    let widget: WidgetInstance | null = null;
-    const removeFromContainers = (containers: AnyContainer[]): boolean => {
-      for (const container of containers) {
-        const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
-        if (widgetIndex >= 0) {
-          widget = container.widgets.splice(widgetIndex, 1)[0];
-          // Reorder remaining widgets
-          container.widgets.forEach((w, i) => w.order = i);
-          return true;
-        }
-        if (this.isLayoutContainer(container) && removeFromContainers(container.children)) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    const wasRemoved = removeFromContainers(layout.containers);
-    if (wasRemoved && widget) {
-      // Add to target container
-      const targetContainer = this.findContainer(layout.containers, targetContainerId);
-      if (targetContainer) {
-        const widgetToMove = widget as WidgetInstance;
-        widgetToMove.order = Math.max(0, Math.min(newOrder, targetContainer.widgets.length));
-        targetContainer.widgets.splice(widgetToMove.order, 0, widgetToMove);
-        // Reorder all widgets in target container
-        targetContainer.widgets.forEach((w, i) => w.order = i);
-      }
-    }
-
-    await this.savePageLayout(layout);
-  }
-
-  // Get container widget count (including nested)
-  static getContainerWidgetCount(container: AnyContainer): number {
-    let count = container.widgets.length;
-    if (this.isLayoutContainer(container)) {
-      container.children.forEach(child => {
-        count += this.getContainerWidgetCount(child);
-      });
-    }
-    return count;
-  }
-
-  // Export layout to JSON
-  // Export layout to JSON
-  static async exportPageLayout(pageId: string): Promise<string> {
-    const layout = await this.getPageLayout(pageId);
-    return JSON.stringify(layout, null, 2);
-  }
-
-  // Parse layout from JSON (Pure, no side effects)
-  static parseLayoutJSON(jsonData: string, targetPageId?: string): PageLayout {
-    try {
-      const parsedData = JSON.parse(jsonData) as PageLayout;
-
-      // Basic validation
-      if (!parsedData.id || !parsedData.containers) {
-        throw new Error('Invalid layout data for import.');
-      }
-
-      // Check for widget count for debugging
-      let widgetCount = 0;
-      const countWidgets = (containers: AnyContainer[]) => {
-        containers.forEach(c => {
-          widgetCount += c.widgets.length;
-          if (this.isLayoutContainer(c)) countWidgets(c.children);
-        });
-      };
-      countWidgets(parsedData.containers);
-
-      // Sanitization: Ensure all widget IDs are unique within the imported layout
-      const seenIds = new Set<string>();
-      const sanitizeIds = (containers: AnyContainer[]) => {
-        containers.forEach(container => {
-          container.widgets.forEach(widget => {
-            if (seenIds.has(widget.id)) {
-              const newId = this.generateWidgetId();
-              console.warn(`[ULM] Found duplicate widget ID ${widget.id} during import. Regenerating to ${newId}`);
-              widget.id = newId;
-            }
-            seenIds.add(widget.id);
-          });
-          if (this.isLayoutContainer(container)) sanitizeIds(container.children);
-        });
-      };
-      sanitizeIds(parsedData.containers);
-
-      // Ensure the ID in the JSON matches the target pageId if provided
-      if (targetPageId && parsedData.id !== targetPageId) {
-        console.warn(`[ULM] Mismatch between target pageId (${targetPageId}) and imported ID (${parsedData.id}). Overwriting ID.`);
-        parsedData.id = targetPageId;
-      }
-
-      return parsedData;
-    } catch (e) {
-      console.error("Failed to parse layout JSON", e);
-      throw e;
-    }
-  }
-
-  // Import layout from JSON (Saves to DB)
-  static async importPageLayout(pageId: string, jsonData: string): Promise<PageLayout> {
-    try {
-      const parsedData = this.parseLayoutJSON(jsonData, pageId);
-
-      // Load the existing root data
-      const rootData = await this.loadRootData(pageId);
-
-      // Update the specific page layout
-      rootData.pages[pageId] = parsedData;
-      rootData.lastUpdated = Date.now();
-
-      // Save the updated root data
-      await this.saveRootData(rootData, pageId);
-
-      return parsedData;
-    } catch (error) {
-      console.error(`[ULM] Error importing page layout for ${pageId}:`, error);
-      throw error;
-    }
-  }
-
-  // Clean up invalid widgets from layout
-  static async cleanupInvalidWidgets(pageId: string, validWidgetIds: Set<string>): Promise<void> {
-    const layout = await this.getPageLayout(pageId);
-    let hasChanges = false;
-
-    const cleanContainers = (containers: AnyContainer[]) => {
-      containers.forEach(container => {
-        const originalLength = container.widgets.length;
-        container.widgets = container.widgets.filter(widget => validWidgetIds.has(widget.widgetId));
-        if (container.widgets.length !== originalLength) {
-          hasChanges = true;
-          container.widgets.forEach((w, i) => w.order = i);
-        }
-        if (this.isLayoutContainer(container)) cleanContainers(container.children);
-      });
-    };
-
-    cleanContainers(layout.containers);
-
-    if (hasChanges) {
-      await this.savePageLayout(layout);
-    }
-  }
-
-  // Convenience methods for common layouts
-  static async getPlaygroundLayout(): Promise<PageLayout> {
-    return await this.getPageLayout('playground-layout', 'Playground Layout');
-  }
-
-  static async getDashboardLayout(): Promise<PageLayout> {
-    return await this.getPageLayout('dashboard-layout', 'Dashboard Layout');
-  }
-}
\ No newline at end of file
+import { getLayout, createLayout, updateLayout } from './client-layouts';
+import { widgetRegistry } from '@/lib/widgetRegistry';
+import { updatePage } from '@/modules/pages/client-pages';
+
+export interface WidgetInstance {
+  id: string;
+  widgetId: string; // References the widget registry ID
+  props?: Record<string, any>;
+  order?: number;
+  // Flexible Container placement (only used inside FlexibleContainer)
+  rowId?: string;
+  column?: number;
+  // Tracks which snippet this widget was instantiated from
+  snippetId?: string;
+}
+
+export interface LayoutContainer {
+  id: string;
+  type: 'container';
+  columns: number;
+  gap: number;
+  widgets: WidgetInstance[];
+  children: LayoutContainer[];
+  order?: number;
+  settings?: {
+    collapsible?: boolean;
+    collapsed?: boolean;
+    title?: string;
+    showTitle?: boolean;
+    customClassName?: string;
+    enabled?: boolean;
+  };
+}
+
+// Flexible Container: row-based layout with adjustable columns
+export interface ColumnDef {
+  width: number;
+  unit: 'fr' | 'px' | 'rem' | '%';
+  minWidth?: number;
+}
+
+export interface RowDef {
+  id: string;
+  columns: ColumnDef[];
+  gap?: number;
+  sizing?: 'constrained' | 'unconstrained';
+  cellAlignments?: ('stretch' | 'start' | 'center' | 'end')[];
+  padding?: string; // Tailwind padding class e.g. 'p-2', 'p-4'
+}
+
+export interface FlexibleContainer {
+  id: string;
+  type: 'flex-container';
+  rows: RowDef[];
+  widgets: WidgetInstance[];
+  gap: number;
+  order?: number;
+  settings?: LayoutContainer['settings'];
+}
+
+export type AnyContainer = LayoutContainer | FlexibleContainer;
+
+export interface PageLayout {
+  id: string;
+  name: string;
+  containers: AnyContainer[];
+  createdAt: number;
+  updatedAt: number;
+  loadedBundles?: string[];
+  rootTemplate?: string;
+}
+
+export interface RootLayoutData {
+  pages: Record<string, PageLayout>;
+  version: string;
+  lastUpdated: number;
+}
+
+
+
+export class UnifiedLayoutManager {
+  private static readonly VERSION = '1.0.0';
+
+  // Type guards
+  static isLayoutContainer(c: AnyContainer): c is LayoutContainer {
+    return c.type === 'container';
+  }
+
+  static isFlexibleContainer(c: AnyContainer): c is FlexibleContainer {
+    return c.type === 'flex-container';
+  }
+
+  // Helper: get LayoutContainers only (for methods that only operate on old containers)
+  static getLayoutContainers(containers: AnyContainer[]): LayoutContainer[] {
+    return containers.filter((c): c is LayoutContainer => c.type === 'container');
+  }
+
+  // Generate unique IDs
+  static generateId(): string {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  static generateContainerId(): string {
+    return `container-${this.generateId()}`;
+  }
+
+  static generateWidgetId(): string {
+    return `widget-${this.generateId()}`;
+  }
+
+  static generateRowId(): string {
+    return `row-${this.generateId()}`;
+  }
+
+  // Create a standalone widget instance (for Command pattern)
+  static createWidgetInstance(widgetId: string): WidgetInstance {
+    let defaultProps = {};
+    const widgetDef = widgetRegistry.get(widgetId);
+    if (widgetDef && widgetDef.metadata.defaultProps) {
+      defaultProps = { ...widgetDef.metadata.defaultProps };
+    }
+
+    return {
+      id: this.generateWidgetId(),
+      widgetId,
+      props: defaultProps,
+      order: 0
+    };
+  }
+
+  // Get all widgets in a layout (recursive, supports both container types)
+  static getAllWidgets(layout: PageLayout): WidgetInstance[] {
+    const widgets: WidgetInstance[] = [];
+    const collect = (containers: AnyContainer[]) => {
+      containers.forEach(c => {
+        widgets.push(...c.widgets);
+        if (this.isLayoutContainer(c)) {
+          collect(c.children);
+        }
+      });
+    };
+    collect(layout.containers);
+    return widgets;
+  }
+
+  // Load root data from storage (database-only, no localStorage)
+  static async loadRootData(pageId?: string): Promise<RootLayoutData> {
+    if (!pageId) {
+      return { pages: {}, version: this.VERSION, lastUpdated: Date.now() };
+    }
+
+    try {
+      const isPage = pageId.startsWith('page-');
+      const isLayout = pageId.startsWith('layout-') || pageId.startsWith('tabs-');
+      if (isPage) {
+        const actualId = pageId.replace('page-', '');
+        const { fetchPageDetailsById } = await import('@/modules/pages/client-pages');
+        const data = await fetchPageDetailsById(actualId);
+
+        if (data && data.page && data.page.content) {
+          let content = data.page.content;
+          if (typeof content === 'string') {
+            try { content = JSON.parse(content); } catch (e) { /* ignore */ }
+          }
+          // Ensure it has the structure we expect, or wrap it
+          // If content is just the PageLayout object
+          if ((content as any).id && (content as any).containers) {
+            return {
+              pages: { [pageId]: content as PageLayout },
+              version: this.VERSION,
+              lastUpdated: Date.now()
+            };
+          }
+          return content as RootLayoutData;
+        }
+      } else if (isLayout) {
+        const layoutId = pageId.replace(/^(layout-|tabs-)/, '');
+        try {
+          const { data } = await getLayout(layoutId);
+          const layoutJson = data?.layout_json;
+
+          if (layoutJson) {
+            return {
+              pages: { [pageId]: layoutJson as PageLayout },
+              version: this.VERSION,
+              lastUpdated: Date.now()
+            };
+          }
+        } catch (e) {
+          console.warn('Layout not found or failed to load:', layoutId);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load layouts from database:', error);
+    }
+
+    // Return default structure
+    return {
+      pages: {},
+      version: this.VERSION,
+      lastUpdated: Date.now()
+    };
+  }
+
+  // Save root data to storage (database-only, no localStorage)
+  static async saveRootData(data: RootLayoutData, pageId?: string, metadata?: Record<string, any>): Promise<void> {
+    if (!pageId) return;
+
+    try {
+      const isPage = pageId.startsWith('page-');
+      const isLayout = pageId.startsWith('layout-') || pageId.startsWith('tabs-');
+
+      if (isPage) {
+        const actualId = pageId.replace('page-', '');
+        await updatePage(actualId, {
+          content: data,
+          updated_at: new Date().toISOString(),
+          ...(metadata || {})
+        });
+      } else if (isLayout) {
+        const layoutJson = data.pages?.[pageId];
+        if (layoutJson) {
+          const layoutId = pageId.replace(/^(layout-|tabs-)/, '');
+          const layoutData = {
+            id: layoutId,
+            layout_json: layoutJson,
+            meta: metadata,
+            name: metadata?.title || `Layout ${pageId}`
+          };
+
+          // Upsert logic
+          try {
+            let exists = false;
+            try {
+              await getLayout(layoutId);
+              exists = true;
+            } catch (e) {
+              // Assuming 404 or failure means we should try create
+            }
+
+            if (exists) {
+              await updateLayout(layoutId, layoutData);
+            } else {
+              await createLayout(layoutData);
+            }
+          } catch (error) {
+            console.error('Failed to save layout via API', error);
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Failed to save layouts to database:', error);
+    }
+  }
+
+
+  // Manual save to API
+  static async saveToApi(data?: RootLayoutData): Promise<boolean> {
+    try {
+      const dataToSave = data || await this.loadRootData();
+      dataToSave.lastUpdated = Date.now();
+      return false;
+    } catch (error) {
+      console.error('Failed to save layouts to API:', error);
+      return false;
+    }
+  }
+
+  // Get or create page layout (database-only)
+  static async getPageLayout(pageId: string, defaultName?: string): Promise<PageLayout> {
+    // Load from database
+    const rootData = await this.loadRootData(pageId);
+
+    if (!rootData.pages[pageId]) {
+      // Create new page layout
+      rootData.pages[pageId] = {
+        id: pageId,
+        name: defaultName || `Page ${pageId}`,
+        containers: [
+          {
+            id: this.generateContainerId(),
+            type: 'container',
+            columns: 1,
+            gap: 16,
+            widgets: [],
+            children: [],
+            order: 0
+          }
+        ],
+        createdAt: Date.now(),
+        updatedAt: Date.now()
+      };
+
+      // Save the new layout to database immediately
+      await this.savePageLayout(rootData.pages[pageId]);
+    }
+
+    return rootData.pages[pageId];
+  }
+
+  // Save page layout (database-only)
+  static async savePageLayout(layout: PageLayout, metadata?: Record<string, any>): Promise<void> {
+    layout.updatedAt = Date.now();
+
+    // Create a minimal RootLayoutData for just this page
+    const pageData: RootLayoutData = {
+      pages: { [layout.id]: layout },
+      version: this.VERSION,
+      lastUpdated: Date.now()
+    };
+
+    // Save directly to database
+    await this.saveRootData(pageData, layout.id, metadata);
+  }
+
+  // Find container by ID in layout (recursive, supports both container types)
+  static findContainer(containers: AnyContainer[], containerId: string): AnyContainer | null {
+    for (const container of containers) {
+      if (container.id === containerId) {
+        return container;
+      }
+      if (this.isLayoutContainer(container)) {
+        const found = this.findContainer(container.children, containerId);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+  // Find a LayoutContainer specifically (narrows type)
+  static findLayoutContainer(containers: AnyContainer[], containerId: string): LayoutContainer | null {
+    const found = this.findContainer(containers, containerId);
+    return found && this.isLayoutContainer(found) ? found : null;
+  }
+
+  // Find a FlexibleContainer specifically (narrows type)
+  static findFlexContainer(containers: AnyContainer[], containerId: string): FlexibleContainer | null {
+    const found = this.findContainer(containers, containerId);
+    return found && this.isFlexibleContainer(found) ? found : null;
+  }
+
+  // Calculate insertion index based on column target
+  static calculateWidgetInsertionIndex(container: LayoutContainer, targetColumn?: number): number {
+    let order = container.widgets.length;
+
+    if (targetColumn !== undefined && targetColumn >= 0 && targetColumn < container.columns) {
+      const occupiedPositionsInColumn = container.widgets
+        .map((_, index) => index)
+        .filter(index => index % container.columns === targetColumn);
+
+      let targetRow = 0;
+      while (occupiedPositionsInColumn.includes(targetRow * container.columns + targetColumn)) {
+        targetRow++;
+      }
+
+      order = targetRow * container.columns + targetColumn;
+
+      if (order > container.widgets.length) {
+        order = container.widgets.length;
+      }
+    }
+    return order;
+  }
+
+  // Add widget to specific container
+  static addWidgetToContainer(
+    layout: PageLayout,
+    containerId: string,
+    widgetId: string,
+    targetColumn?: number
+  ): WidgetInstance {
+    const container = this.findContainer(layout.containers, containerId);
+
+    if (!container) {
+      throw new Error(`Container ${containerId} not found`);
+    }
+
+    let order = container.widgets.length;
+
+    // Column targeting only applies to LayoutContainer
+    if (this.isLayoutContainer(container) && targetColumn !== undefined && targetColumn >= 0 && targetColumn < container.columns) {
+      const occupiedPositionsInColumn = container.widgets
+        .map((_, index) => index)
+        .filter(index => index % container.columns === targetColumn);
+
+      let targetRow = 0;
+      while (occupiedPositionsInColumn.includes(targetRow * container.columns + targetColumn)) {
+        targetRow++;
+      }
+
+      order = targetRow * container.columns + targetColumn;
+
+      if (order > container.widgets.length) {
+        order = container.widgets.length;
+      }
+    }
+
+    // Get default props from registry if available
+    let defaultProps = {};
+    const widgetDef = widgetRegistry.get(widgetId);
+    if (widgetDef && widgetDef.metadata.defaultProps) {
+      defaultProps = { ...widgetDef.metadata.defaultProps };
+    }
+
+    const newWidget: WidgetInstance = {
+      id: this.generateWidgetId(),
+      widgetId,
+      props: defaultProps,
+      order
+    };
+
+    container.widgets.splice(order, 0, newWidget);
+    container.widgets.forEach((w, i) => w.order = i);
+
+    return newWidget;
+  }
+
+
+
+  // Remove widget from container
+  static removeWidgetFromContainer(layout: PageLayout, widgetInstanceId: string): boolean {
+    const removeFromContainers = (containers: AnyContainer[]): boolean => {
+      for (const container of containers) {
+        const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
+        if (widgetIndex >= 0) {
+          container.widgets.splice(widgetIndex, 1);
+          container.widgets.forEach((w, i) => w.order = i);
+          return true;
+        }
+        if (this.isLayoutContainer(container) && removeFromContainers(container.children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    return removeFromContainers(layout.containers);
+  }
+
+
+
+  // Update widget props
+  static updateWidgetProps(layout: PageLayout, widgetInstanceId: string, props: Record<string, any>): boolean {
+    const findAndUpdateWidget = (containers: AnyContainer[]): boolean => {
+      for (const container of containers) {
+        const widget = container.widgets.find(w => w.id === widgetInstanceId);
+        if (widget) {
+          widget.props = { ...widget.props, ...props };
+          return true;
+        }
+        if (this.isLayoutContainer(container) && findAndUpdateWidget(container.children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    return findAndUpdateWidget(layout.containers);
+  }
+
+  // Rename widget (change instance ID)
+  static renameWidget(layout: PageLayout, oldId: string, newId: string): boolean {
+    // 1. Check if newId already exists
+    const findWidget = (containers: AnyContainer[]): boolean => {
+      for (const container of containers) {
+        if (container.widgets.some(w => w.id === newId)) {
+          return true;
+        }
+        if (this.isLayoutContainer(container) && findWidget(container.children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    if (findWidget(layout.containers)) {
+      console.warn(`Cannot rename widget: ID ${newId} already exists`);
+      return false;
+    }
+
+    // 2. Find and rename
+    const findAndRename = (containers: AnyContainer[]): boolean => {
+      for (const container of containers) {
+        const widget = container.widgets.find(w => w.id === oldId);
+        if (widget) {
+          widget.id = newId;
+          return true;
+        }
+        if (this.isLayoutContainer(container) && findAndRename(container.children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    return findAndRename(layout.containers);
+  }
+
+
+
+  // Update container columns (LayoutContainer only)
+  static updateContainerColumns(layout: PageLayout, containerId: string, columns: number): boolean {
+    const container = this.findLayoutContainer(layout.containers, containerId);
+
+    if (container) {
+      container.columns = Math.max(1, Math.min(12, columns));
+      return true;
+    }
+    return false;
+  }
+
+
+
+  // Update container gap
+  static async updateContainerGap(pageId: string, containerId: string, gap: number): Promise<void> {
+    const layout = await this.getPageLayout(pageId);
+    const container = this.findContainer(layout.containers, containerId);
+
+    if (container) {
+      container.gap = Math.max(0, gap);
+      await this.savePageLayout(layout);
+    }
+  }
+
+  // Update container settings
+  static updateContainerSettings(layout: PageLayout, containerId: string, settings: Partial<LayoutContainer['settings']>): boolean {
+    const container = this.findContainer(layout.containers, containerId);
+
+    if (container) {
+      container.settings = { ...container.settings, ...settings };
+      return true;
+    }
+    return false;
+  }
+
+
+
+  // Add new container
+  static addContainer(
+    layout: PageLayout,
+    parentContainerId?: string,
+    columns: number = 1
+  ): LayoutContainer {
+    const newContainer: LayoutContainer = {
+      id: this.generateContainerId(),
+      type: 'container',
+      columns,
+      gap: 16,
+      widgets: [],
+      children: [],
+      order: 0
+    };
+
+    if (parentContainerId) {
+      const parentContainer = this.findLayoutContainer(layout.containers, parentContainerId);
+      if (parentContainer) {
+        newContainer.order = parentContainer.children.length;
+        parentContainer.children.push(newContainer);
+      }
+    } else {
+      newContainer.order = layout.containers.length;
+      layout.containers.push(newContainer);
+    }
+
+    return newContainer;
+  }
+
+  // Add new FlexibleContainer
+  static addFlexibleContainer(
+    layout: PageLayout,
+  ): FlexibleContainer {
+    const newContainer: FlexibleContainer = {
+      id: this.generateContainerId(),
+      type: 'flex-container',
+      rows: [{
+        id: this.generateRowId(),
+        columns: [{ width: 1, unit: 'fr' }, { width: 1, unit: 'fr' }],
+        sizing: 'constrained',
+      }],
+      widgets: [],
+      gap: 16,
+      order: layout.containers.length
+    };
+
+    layout.containers.push(newContainer);
+    return newContainer;
+  }
+
+
+
+  // Remove container
+  static removeContainer(layout: PageLayout, containerId: string, allowRemoveLastContainer: boolean = false): boolean {
+    // Don't allow removing the last root container (unless explicitly allowed)
+    if (!allowRemoveLastContainer && layout.containers.length === 1 && layout.containers[0].id === containerId) {
+      return false;
+    }
+
+    // Remove from root containers
+    const originalLength = layout.containers.length;
+    layout.containers = layout.containers.filter(c => c.id !== containerId);
+
+    // Remove from nested containers (recursive)
+    const removeFromChildren = (containers: AnyContainer[]) => {
+      containers.forEach(container => {
+        if (this.isLayoutContainer(container)) {
+          container.children = container.children.filter(c => c.id !== containerId);
+          removeFromChildren(container.children);
+        }
+      });
+    };
+
+    removeFromChildren(layout.containers);
+
+    // Return true if something was removed
+    return layout.containers.length !== originalLength;
+  }
+
+  // Move a root-level container up or down
+  static moveRootContainer(layout: PageLayout, containerId: string, direction: 'up' | 'down'): boolean {
+    const containerIndex = layout.containers.findIndex(c => c.id === containerId);
+
+    if (containerIndex === -1) {
+      return false; // Container not found at root level
+    }
+
+    const targetIndex = direction === 'up' ? containerIndex - 1 : containerIndex + 1;
+
+    // Check if the move is within the bounds of the array
+    if (targetIndex < 0 || targetIndex >= layout.containers.length) {
+      return false;
+    }
+
+    // Swap the container with its target
+    const temp = layout.containers[containerIndex];
+    layout.containers[containerIndex] = layout.containers[targetIndex];
+    layout.containers[targetIndex] = temp;
+
+    // After swapping, update the order property for all root containers
+    layout.containers.forEach((container, index) => {
+      container.order = index;
+    });
+
+    return true;
+  }
+
+
+
+  // Move widget in any direction within its container (grid-aware)
+  static moveWidgetInContainer(
+    layout: PageLayout,
+    widgetInstanceId: string,
+    direction: 'up' | 'down' | 'left' | 'right'
+  ): boolean {
+
+    // Find the widget and its container (LayoutContainer only — grid movement is LC-specific)
+    const findWidgetContainer = (containers: AnyContainer[]): LayoutContainer | null => {
+      for (const container of containers) {
+        if (this.isLayoutContainer(container)) {
+          if (container.widgets.some(w => w.id === widgetInstanceId)) {
+            return container;
+          }
+          const found = findWidgetContainer(container.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const container = findWidgetContainer(layout.containers);
+    if (!container) return false;
+
+    const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
+    if (widgetIndex === -1) return false;
+
+    const { columns } = container;
+    const totalWidgets = container.widgets.length;
+
+    let targetIndex = -1;
+
+    switch (direction) {
+      case 'up':
+        targetIndex = widgetIndex - columns;
+        break;
+      case 'down':
+        targetIndex = widgetIndex + columns;
+        break;
+      case 'left':
+        // Prevent wrapping from first to last column
+        if (widgetIndex % columns !== 0) {
+          targetIndex = widgetIndex - 1;
+        }
+        break;
+      case 'right':
+        // Prevent wrapping from last to first column
+        if ((widgetIndex + 1) % columns !== 0) {
+          targetIndex = widgetIndex + 1;
+        }
+        break;
+    }
+
+    // Check if target is valid
+    if (targetIndex >= 0 && targetIndex < totalWidgets) {
+      // Perform the swap
+      [container.widgets[widgetIndex], container.widgets[targetIndex]] =
+        [container.widgets[targetIndex], container.widgets[widgetIndex]];
+
+      // Update order values
+      container.widgets.forEach((w, i) => w.order = i);
+      return true;
+    }
+
+    return false;
+  }
+
+  // Move widget directionally within a FlexibleContainer
+  static moveFlexWidget(
+    layout: PageLayout,
+    widgetInstanceId: string,
+    direction: 'up' | 'down' | 'left' | 'right'
+  ): boolean {
+    // Find the widget and its flex container
+    const findWidgetFlexContainer = (containers: AnyContainer[]): FlexibleContainer | null => {
+      for (const container of containers) {
+        if (this.isFlexibleContainer(container)) {
+          if (container.widgets.some(w => w.id === widgetInstanceId)) {
+            return container;
+          }
+        }
+        if (this.isLayoutContainer(container)) {
+          const found = findWidgetFlexContainer(container.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const container = findWidgetFlexContainer(layout.containers);
+    if (!container) return false;
+
+    const widget = container.widgets.find(w => w.id === widgetInstanceId);
+    if (!widget || !widget.rowId || widget.column === undefined) return false;
+
+    const rowIndex = container.rows.findIndex(r => r.id === widget.rowId);
+    if (rowIndex === -1) return false;
+
+    const currentRow = container.rows[rowIndex];
+
+    switch (direction) {
+      case 'left': {
+        if (widget.column <= 0) return false;
+        widget.column -= 1;
+        return true;
+      }
+      case 'right': {
+        if (widget.column >= currentRow.columns.length - 1) return false;
+        widget.column += 1;
+        return true;
+      }
+      case 'up': {
+        if (rowIndex <= 0) return false;
+        const targetRow = container.rows[rowIndex - 1];
+        // Clamp column to target row's column count
+        widget.rowId = targetRow.id;
+        widget.column = Math.min(widget.column, targetRow.columns.length - 1);
+        return true;
+      }
+      case 'down': {
+        if (rowIndex >= container.rows.length - 1) return false;
+        const targetRow = container.rows[rowIndex + 1];
+        widget.rowId = targetRow.id;
+        widget.column = Math.min(widget.column, targetRow.columns.length - 1);
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  // Drag-and-drop: move a widget to a specific target location (cross-container)
+  // Returns the original position for undo, or null if the move failed.
+  static moveWidgetToTarget(
+    layout: PageLayout,
+    widgetInstanceId: string,
+    target: { containerId: string; index?: number; rowId?: string; column?: number }
+  ): { containerId: string; index: number; rowId?: string; column?: number } | null {
+    // Find widget and source container
+    let sourceContainer: AnyContainer | null = null;
+    let widget: WidgetInstance | null = null;
+    let sourceIndex = -1;
+
+    const findWidget = (containers: AnyContainer[]): boolean => {
+      for (const c of containers) {
+        const idx = c.widgets.findIndex(w => w.id === widgetInstanceId);
+        if (idx >= 0) {
+          sourceContainer = c;
+          widget = c.widgets[idx];
+          sourceIndex = idx;
+          return true;
+        }
+        if (this.isLayoutContainer(c) && findWidget(c.children)) return true;
+      }
+      return false;
+    };
+    if (!findWidget(layout.containers) || !widget || !sourceContainer) return null;
+
+    // Capture original position for undo
+    const original: { containerId: string; index: number; rowId?: string; column?: number } = {
+      containerId: sourceContainer.id,
+      index: sourceIndex,
+      rowId: (widget as WidgetInstance).rowId,
+      column: (widget as WidgetInstance).column,
+    };
+
+    // Remove from source
+    sourceContainer.widgets.splice(sourceIndex, 1);
+    sourceContainer.widgets.forEach((w, i) => w.order = i);
+
+    // Find target container
+    const targetContainer = this.findContainer(layout.containers, target.containerId);
+    if (!targetContainer) return null;
+
+    // Assign flex placement or clear it
+    const w = widget as WidgetInstance;
+    if (target.rowId !== undefined) {
+      w.rowId = target.rowId;
+      w.column = target.column ?? 0;
+    } else {
+      // Moving to a regular container — clear flex props
+      delete w.rowId;
+      delete w.column;
+    }
+
+    // Insert at target
+    const insertIndex = target.index !== undefined
+      ? Math.min(target.index, targetContainer.widgets.length)
+      : targetContainer.widgets.length;
+    targetContainer.widgets.splice(insertIndex, 0, w);
+    targetContainer.widgets.forEach((wi, i) => wi.order = i);
+
+    return original;
+  }
+
+  // Get grid position of a widget (row, column)
+  static getWidgetGridPosition(
+    layout: PageLayout,
+    widgetInstanceId: string
+  ): { row: number; col: number; containerColumns: number } | null {
+    // Find the widget and its container (LayoutContainer only)
+    const findWidgetContainer = (containers: AnyContainer[]): LayoutContainer | null => {
+      for (const container of containers) {
+        if (this.isLayoutContainer(container)) {
+          if (container.widgets.some(w => w.id === widgetInstanceId)) {
+            return container;
+          }
+          const found = findWidgetContainer(container.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const container = findWidgetContainer(layout.containers);
+    if (!container) return null;
+
+    const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
+    if (widgetIndex === -1) return null;
+
+    const row = Math.floor(widgetIndex / container.columns);
+    const col = widgetIndex % container.columns;
+
+    return { row, col, containerColumns: container.columns };
+  }
+
+  // Move widget to specific grid position (row, column)
+  static moveWidgetToGridPosition(
+    layout: PageLayout,
+    widgetInstanceId: string,
+    targetRow: number,
+    targetCol: number
+  ): boolean {
+    // Find the widget and its container (LayoutContainer only)
+    const findWidgetContainer = (containers: AnyContainer[]): LayoutContainer | null => {
+      for (const container of containers) {
+        if (this.isLayoutContainer(container)) {
+          if (container.widgets.some(w => w.id === widgetInstanceId)) {
+            return container;
+          }
+          const found = findWidgetContainer(container.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const container = findWidgetContainer(layout.containers);
+    if (!container) return false;
+
+    const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
+    if (widgetIndex === -1) return false;
+
+    // Validate target position
+    if (targetRow < 0 || targetCol < 0 || targetCol >= container.columns) {
+      return false;
+    }
+
+    const targetIndex = targetRow * container.columns + targetCol;
+
+    // Don't move to the same position
+    if (targetIndex === widgetIndex) {
+      return false;
+    }
+
+    // For positions beyond current widget array, we can extend the array
+    // But we need to ensure we don't create gaps
+    if (targetIndex >= container.widgets.length) {
+      // Only allow if it's the next logical position (no gaps)
+      if (targetIndex > container.widgets.length) {
+        return false;
+      }
+    }
+
+    // Move the widget
+    const widget = container.widgets.splice(widgetIndex, 1)[0];
+
+    if (targetIndex >= container.widgets.length) {
+      // Append at the end
+      container.widgets.push(widget);
+    } else {
+      // Insert at target position
+      container.widgets.splice(targetIndex, 0, widget);
+    }
+
+    // Update order values
+    container.widgets.forEach((w, i) => w.order = i);
+
+    return true;
+  }
+
+
+
+  // Move widget within container or between containers (existing method for drag-drop)
+  static async moveWidget(
+    pageId: string,
+    widgetInstanceId: string,
+    targetContainerId: string,
+    newOrder: number
+  ): Promise<void> {
+    const layout = await this.getPageLayout(pageId);
+
+    // First, remove widget from current location
+    let widget: WidgetInstance | null = null;
+    const removeFromContainers = (containers: AnyContainer[]): boolean => {
+      for (const container of containers) {
+        const widgetIndex = container.widgets.findIndex(w => w.id === widgetInstanceId);
+        if (widgetIndex >= 0) {
+          widget = container.widgets.splice(widgetIndex, 1)[0];
+          // Reorder remaining widgets
+          container.widgets.forEach((w, i) => w.order = i);
+          return true;
+        }
+        if (this.isLayoutContainer(container) && removeFromContainers(container.children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const wasRemoved = removeFromContainers(layout.containers);
+    if (wasRemoved && widget) {
+      // Add to target container
+      const targetContainer = this.findContainer(layout.containers, targetContainerId);
+      if (targetContainer) {
+        const widgetToMove = widget as WidgetInstance;
+        widgetToMove.order = Math.max(0, Math.min(newOrder, targetContainer.widgets.length));
+        targetContainer.widgets.splice(widgetToMove.order, 0, widgetToMove);
+        // Reorder all widgets in target container
+        targetContainer.widgets.forEach((w, i) => w.order = i);
+      }
+    }
+
+    await this.savePageLayout(layout);
+  }
+
+  // Get container widget count (including nested)
+  static getContainerWidgetCount(container: AnyContainer): number {
+    let count = container.widgets.length;
+    if (this.isLayoutContainer(container)) {
+      container.children.forEach(child => {
+        count += this.getContainerWidgetCount(child);
+      });
+    }
+    return count;
+  }
+
+  // Export layout to JSON
+  // Export layout to JSON
+  static async exportPageLayout(pageId: string): Promise<string> {
+    const layout = await this.getPageLayout(pageId);
+    return JSON.stringify(layout, null, 2);
+  }
+
+  // Parse layout from JSON (Pure, no side effects)
+  static parseLayoutJSON(jsonData: string, targetPageId?: string): PageLayout {
+    try {
+      const parsedData = JSON.parse(jsonData) as PageLayout;
+
+      // Basic validation
+      if (!parsedData.id || !parsedData.containers) {
+        throw new Error('Invalid layout data for import.');
+      }
+
+      // Check for widget count for debugging
+      let widgetCount = 0;
+      const countWidgets = (containers: AnyContainer[]) => {
+        containers.forEach(c => {
+          widgetCount += c.widgets.length;
+          if (this.isLayoutContainer(c)) countWidgets(c.children);
+        });
+      };
+      countWidgets(parsedData.containers);
+
+      // Sanitization: Ensure all widget IDs are unique within the imported layout
+      const seenIds = new Set<string>();
+      const sanitizeIds = (containers: AnyContainer[]) => {
+        containers.forEach(container => {
+          container.widgets.forEach(widget => {
+            if (seenIds.has(widget.id)) {
+              const newId = this.generateWidgetId();
+              console.warn(`[ULM] Found duplicate widget ID ${widget.id} during import. Regenerating to ${newId}`);
+              widget.id = newId;
+            }
+            seenIds.add(widget.id);
+          });
+          if (this.isLayoutContainer(container)) sanitizeIds(container.children);
+        });
+      };
+      sanitizeIds(parsedData.containers);
+
+      // Ensure the ID in the JSON matches the target pageId if provided
+      if (targetPageId && parsedData.id !== targetPageId) {
+        console.warn(`[ULM] Mismatch between target pageId (${targetPageId}) and imported ID (${parsedData.id}). Overwriting ID.`);
+        parsedData.id = targetPageId;
+      }
+
+      return parsedData;
+    } catch (e) {
+      console.error("Failed to parse layout JSON", e);
+      throw e;
+    }
+  }
+
+  // Import layout from JSON (Saves to DB)
+  static async importPageLayout(pageId: string, jsonData: string): Promise<PageLayout> {
+    try {
+      const parsedData = this.parseLayoutJSON(jsonData, pageId);
+
+      // Load the existing root data
+      const rootData = await this.loadRootData(pageId);
+
+      // Update the specific page layout
+      rootData.pages[pageId] = parsedData;
+      rootData.lastUpdated = Date.now();
+
+      // Save the updated root data
+      await this.saveRootData(rootData, pageId);
+
+      return parsedData;
+    } catch (error) {
+      console.error(`[ULM] Error importing page layout for ${pageId}:`, error);
+      throw error;
+    }
+  }
+
+  // Clean up invalid widgets from layout
+  static async cleanupInvalidWidgets(pageId: string, validWidgetIds: Set<string>): Promise<void> {
+    const layout = await this.getPageLayout(pageId);
+    let hasChanges = false;
+
+    const cleanContainers = (containers: AnyContainer[]) => {
+      containers.forEach(container => {
+        const originalLength = container.widgets.length;
+        container.widgets = container.widgets.filter(widget => validWidgetIds.has(widget.widgetId));
+        if (container.widgets.length !== originalLength) {
+          hasChanges = true;
+          container.widgets.forEach((w, i) => w.order = i);
+        }
+        if (this.isLayoutContainer(container)) cleanContainers(container.children);
+      });
+    };
+
+    cleanContainers(layout.containers);
+
+    if (hasChanges) {
+      await this.savePageLayout(layout);
+    }
+  }
+
+  // Convenience methods for common layouts
+  static async getPlaygroundLayout(): Promise<PageLayout> {
+    return await this.getPageLayout('playground-layout', 'Playground Layout');
+  }
+
+  static async getDashboardLayout(): Promise<PageLayout> {
+    return await this.getPageLayout('dashboard-layout', 'Dashboard Layout');
+  }
+}
diff --git a/packages/ui/src/modules/pages/PageCard.tsx b/packages/ui/src/modules/pages/PageCard.tsx
index bcac2374..65a7d9f9 100644
--- a/packages/ui/src/modules/pages/PageCard.tsx
+++ b/packages/ui/src/modules/pages/PageCard.tsx
@@ -1,210 +1,210 @@
-import React from 'react';
-import { Heart, MessageCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import ResponsiveImage from "@/components/ResponsiveImage";
-import UserAvatarBlock from "@/components/UserAvatarBlock";
-import MarkdownRenderer from "@/components/MarkdownRenderer";
-import type { MediaRendererProps } from "@/lib/mediaRegistry";
-
-/** Extensible preset configuration for card display */
-export interface CardPreset {
-    showTitle?: boolean;
-    showDescription?: boolean;
-    showAuthor?: boolean;
-    showActions?: boolean;
-}
-
-interface PageCardProps extends Omit<MediaRendererProps, 'created_at'> {
-    variant?: 'grid' | 'feed';
-    responsive?: any;
-    showContent?: boolean;
-    showHeader?: boolean;
-    overlayMode?: 'hover' | 'always';
-    authorAvatarUrl?: string | null;
-    created_at?: string;
-    apiUrl?: string;
-    versionCount?: number;
-    preset?: CardPreset;
-    className?: string;
-}
-
-const PageCard: React.FC<PageCardProps> = ({
-    id,
-    url,
-    thumbnailUrl,
-    title,
-    author,
-    authorId,
-    authorAvatarUrl,
-    likes,
-    comments,
-    isLiked,
-    description,
-    onClick,
-    onLike,
-    created_at,
-    variant = 'grid',
-    responsive,
-    showContent = true,
-    showHeader = true,
-    overlayMode = 'hover',
-    apiUrl,
-    versionCount,
-    preset,
-    type,
-    className
-}) => {
-    // Determine image source
-    // If url is missing or empty, fallback to picsum
-    // For PAGE_EXTERNAL, currently 'url' is the link and 'thumbnailUrl' is the image.
-
-    const displayImage = thumbnailUrl || url || "https://picsum.photos/640";
-
-    const handleLike = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onLike?.();
-    };
-
-    const handleCardClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onClick?.(id);
-    };
-
-    if (variant === 'feed') {
-        return (
-            <div
-                data-testid="page-card"
-                className="group relative overflow-hidden transition-all duration-300 cursor-pointer w-full mb-4 bg-card"
-                onClick={handleCardClick}
-            >
-
-                <div className={`relative w-full aspect-[16/9] overflow-hidden bg-muted`}>
-                    <ResponsiveImage
-                        src={displayImage}
-                        alt={title}
-                        className="w-full h-full"
-                        imgClassName="w-full h-full object-contain transition-transform duration-300"
-                        sizes="100vw"
-                        data={responsive}
-                        apiUrl={apiUrl}
-                    />
-                </div>
-
-                {showContent && (
-                    <div className="pb-2 space-y-2">
-                        {/* Author + Actions row */}
-                        <div className="flex items-center justify-between px-2 pt-2">
-                            {preset?.showAuthor !== false && (
-                                <UserAvatarBlock
-                                    userId={authorId}
-                                    avatarUrl={authorAvatarUrl}
-                                    displayName={author}
-                                    className="w-8 h-8"
-                                    showDate={true}
-                                    createdAt={created_at}
-                                />
-                            )}
-                            {preset?.showActions !== false && (
-                                <div className="flex items-center gap-1">
-                                    <Button size="sm" variant="ghost" className="px-0 gap-1" onClick={handleLike}>
-                                        <Heart className={`h-5 w-5 ${isLiked ? "fill-red-500 text-red-500" : ""}`} />
-                                        <span>{likes}</span>
-                                    </Button>
-                                    <Button size="sm" variant="ghost" className="px-0 gap-1">
-                                        <MessageCircle className="h-5 w-5" />
-                                        <span>{comments}</span>
-                                    </Button>
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Title & Description */}
-                        <div className="px-4 space-y-1">
-                            <div className="font-semibold text-sm">{title}</div>
-                            {description && (
-                                <div className="text-sm text-foreground/90 line-clamp-3">
-                                    <MarkdownRenderer content={description} className="prose-sm dark:prose-invert" />
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    // Grid Variant
-    return (
-        <div
-            data-testid="page-card"
-            className={`group relative overflow-hidden bg-card transition-all duration-300 cursor-pointer w-full flex flex-col ${preset?.showTitle ? '' : 'md:aspect-square'} ${className || ''}`}
-            onClick={handleCardClick}
-        >
-            <div className={`relative w-full overflow-hidden ${className?.includes('h-full') ? 'flex-1 min-h-0' : 'aspect-square'}`}>
-                <ResponsiveImage
-                    src={displayImage}
-                    alt={title}
-                    className="w-full h-full"
-                    imgClassName="w-full h-full object-contain transition-transform duration-300"
-                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
-                    responsiveSizes={[640, 1024, 1440]}
-                    data={responsive}
-                    apiUrl={apiUrl}
-                />
-
-                {/* TESTING: Entire hover overlay disabled */}
-                {false && showContent && (
-                    <div className={`hidden md:block absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent ${overlayMode === 'always' ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity duration-300 pointer-events-none`}>
-                        <div className="absolute bottom-0 left-0 right-0 p-4 pointer-events-auto">
-                            <div className="flex items-center justify-between mb-2">
-                                {preset?.showAuthor !== false && (
-                                    <UserAvatarBlock
-                                        userId={authorId}
-                                        avatarUrl={authorAvatarUrl}
-                                        displayName={author}
-                                        hoverStyle={true}
-                                        showDate={false}
-                                    />
-                                )}
-
-                                {preset?.showActions !== false && (
-                                    <div className="flex items-center space-x-1">
-                                        <Button
-                                            size="sm"
-                                            variant="ghost"
-                                            onClick={handleLike}
-                                            className={`h-8 w-8 p-0 ${isLiked ? "text-red-500" : "text-white hover:text-red-500"}`}
-                                        >
-                                            <Heart className="h-4 w-4" fill={isLiked ? "currentColor" : "none"} />
-                                        </Button>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Mobile title below thumbnail */}
-            <div className="md:hidden px-2 py-1.5 bg-muted/40">
-                <div className="flex items-center justify-between">
-                    <span className="text-sm font-medium truncate flex-1 mr-2">{title}</span>
-                </div>
-            </div>
-
-            {/* Info bar below image (preset-driven) */}
-            {(preset?.showTitle || preset?.showDescription) && (title || description) && (
-                <div className="px-2.5 py-2 border-t bg-muted/40">
-                    {preset?.showTitle && title && (
-                        <h3 className="text-sm font-medium truncate">{title}</h3>
-                    )}
-                    {preset?.showDescription && description && (
-                        <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{description}</p>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default PageCard;
+import React from 'react';
+import { Heart, MessageCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import ResponsiveImage from "@/components/ResponsiveImage";
+import UserAvatarBlock from "@/components/UserAvatarBlock";
+import MarkdownRenderer from "@/components/MarkdownRenderer";
+import type { MediaRendererProps } from "@/lib/mediaRegistry";
+
+/** Extensible preset configuration for card display */
+export interface CardPreset {
+    showTitle?: boolean;
+    showDescription?: boolean;
+    showAuthor?: boolean;
+    showActions?: boolean;
+}
+
+interface PageCardProps extends Omit<MediaRendererProps, 'created_at'> {
+    variant?: 'grid' | 'feed';
+    responsive?: any;
+    showContent?: boolean;
+    showHeader?: boolean;
+    overlayMode?: 'hover' | 'always';
+    authorAvatarUrl?: string | null;
+    created_at?: string;
+    apiUrl?: string;
+    versionCount?: number;
+    preset?: CardPreset;
+    className?: string;
+}
+
+const PageCard: React.FC<PageCardProps> = ({
+    id,
+    url,
+    thumbnailUrl,
+    title,
+    author,
+    authorId,
+    authorAvatarUrl,
+    likes,
+    comments,
+    isLiked,
+    description,
+    onClick,
+    onLike,
+    created_at,
+    variant = 'grid',
+    responsive,
+    showContent = true,
+    showHeader = true,
+    overlayMode = 'hover',
+    apiUrl,
+    versionCount,
+    preset,
+    type,
+    className
+}) => {
+    // Determine image source
+    // If url is missing or empty, fallback to picsum
+    // For PAGE_EXTERNAL, currently 'url' is the link and 'thumbnailUrl' is the image.
+
+    const displayImage = thumbnailUrl || url || "https://picsum.photos/640";
+
+    const handleLike = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onLike?.();
+    };
+
+    const handleCardClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onClick?.(id);
+    };
+
+    if (variant === 'feed') {
+        return (
+            <div
+                data-testid="page-card"
+                className="group relative overflow-hidden transition-all duration-300 cursor-pointer w-full mb-4 bg-card"
+                onClick={handleCardClick}
+            >
+
+                <div className={`relative w-full aspect-[16/9] overflow-hidden bg-muted`}>
+                    <ResponsiveImage
+                        src={displayImage}
+                        alt={title}
+                        className="w-full h-full"
+                        imgClassName="w-full h-full object-contain transition-transform duration-300"
+                        sizes="100vw"
+                        data={responsive}
+                        apiUrl={apiUrl}
+                    />
+                </div>
+
+                {showContent && (
+                    <div className="pb-2 space-y-2">
+                        {/* Author + Actions row */}
+                        <div className="flex items-center justify-between px-2 pt-2">
+                            {preset?.showAuthor !== false && (
+                                <UserAvatarBlock
+                                    userId={authorId}
+                                    avatarUrl={authorAvatarUrl}
+                                    displayName={author}
+                                    className="w-8 h-8"
+                                    showDate={true}
+                                    createdAt={created_at}
+                                />
+                            )}
+                            {preset?.showActions !== false && (
+                                <div className="flex items-center gap-1">
+                                    <Button size="sm" variant="ghost" className="px-0 gap-1" onClick={handleLike}>
+                                        <Heart className={`h-5 w-5 ${isLiked ? "fill-red-500 text-red-500" : ""}`} />
+                                        <span>{likes}</span>
+                                    </Button>
+                                    <Button size="sm" variant="ghost" className="px-0 gap-1">
+                                        <MessageCircle className="h-5 w-5" />
+                                        <span>{comments}</span>
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Title & Description */}
+                        <div className="px-4 space-y-1">
+                            <div className="font-semibold text-sm">{title}</div>
+                            {description && (
+                                <div className="text-sm text-foreground/90 line-clamp-3">
+                                    <MarkdownRenderer content={description} className="prose-sm dark:prose-invert" />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Grid Variant
+    return (
+        <div
+            data-testid="page-card"
+            className={`group relative overflow-hidden bg-card transition-all duration-300 cursor-pointer w-full flex flex-col ${preset?.showTitle ? '' : 'md:aspect-square'} ${className || ''}`}
+            onClick={handleCardClick}
+        >
+            <div className={`relative w-full overflow-hidden ${className?.includes('h-full') ? 'flex-1 min-h-0' : 'aspect-square'}`}>
+                <ResponsiveImage
+                    src={displayImage}
+                    alt={title}
+                    className="w-full h-full"
+                    imgClassName="w-full h-full object-contain transition-transform duration-300"
+                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
+                    responsiveSizes={[640, 1024, 1440]}
+                    data={responsive}
+                    apiUrl={apiUrl}
+                />
+
+                {/* TESTING: Entire hover overlay disabled */}
+                {false && showContent && (
+                    <div className={`hidden md:block absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent ${overlayMode === 'always' ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity duration-300 pointer-events-none`}>
+                        <div className="absolute bottom-0 left-0 right-0 p-4 pointer-events-auto">
+                            <div className="flex items-center justify-between mb-2">
+                                {preset?.showAuthor !== false && (
+                                    <UserAvatarBlock
+                                        userId={authorId}
+                                        avatarUrl={authorAvatarUrl}
+                                        displayName={author}
+                                        hoverStyle={true}
+                                        showDate={false}
+                                    />
+                                )}
+
+                                {preset?.showActions !== false && (
+                                    <div className="flex items-center space-x-1">
+                                        <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={handleLike}
+                                            className={`h-8 w-8 p-0 ${isLiked ? "text-red-500" : "text-white hover:text-red-500"}`}
+                                        >
+                                            <Heart className="h-4 w-4" fill={isLiked ? "currentColor" : "none"} />
+                                        </Button>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Mobile title below thumbnail */}
+            <div className="md:hidden px-2 py-1.5 bg-muted/40">
+                <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium truncate flex-1 mr-2">{title}</span>
+                </div>
+            </div>
+
+            {/* Info bar below image (preset-driven) */}
+            {(preset?.showTitle || preset?.showDescription) && (title || description) && (
+                <div className="px-2.5 py-2 border-t bg-muted/40">
+                    {preset?.showTitle && title && (
+                        <h3 className="text-sm font-medium truncate">{title}</h3>
+                    )}
+                    {preset?.showDescription && description && (
+                        <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{description}</p>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default PageCard;
diff --git a/packages/ui/src/modules/pages/PagePickerDialog.tsx b/packages/ui/src/modules/pages/PagePickerDialog.tsx
index 881fa7be..70708932 100644
--- a/packages/ui/src/modules/pages/PagePickerDialog.tsx
+++ b/packages/ui/src/modules/pages/PagePickerDialog.tsx
@@ -1,224 +1,224 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { T, translate } from '@/i18n';
-import { Search, FileText, Check, Users, User } from 'lucide-react';
-import { useAuth } from '@/hooks/useAuth';
-import { cn } from '@/lib/utils';
-import { FEED_API_ENDPOINT } from '@/constants';
-
-/** Simplified page shape returned from the feed API */
-interface FeedPage {
-    id: string;
-    title: string;
-    slug: string;       // from meta.slug
-    user_id: string;    // owner UUID
-    author?: { display_name?: string; username?: string };
-}
-
-interface PagePickerDialogProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onSelect: (page: FeedPage | null) => void;
-    currentValue?: string | null;
-    forbiddenIds?: string[];
-}
-
-export const PagePickerDialog: React.FC<PagePickerDialogProps> = ({
-    isOpen,
-    onClose,
-    onSelect,
-    currentValue,
-    forbiddenIds = []
-}) => {
-    const { user } = useAuth();
-    const [pages, setPages] = useState<FeedPage[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
-    const [selectedId, setSelectedId] = useState<string | null>(currentValue || null);
-    const [showAllUsers, setShowAllUsers] = useState(false);
-
-    useEffect(() => {
-        if (isOpen) {
-            fetchPages();
-            setSelectedId(currentValue || null);
-        }
-    }, [isOpen, currentValue, showAllUsers]);
-
-    const fetchPages = async () => {
-        setLoading(true);
-        try {
-            const params = new URLSearchParams({
-                contentType: 'pages',
-                limit: '200',
-                sortBy: 'latest',
-            });
-
-            // Filter to current user's pages unless "all users" is toggled
-            if (!showAllUsers && user?.id) {
-                params.set('source', 'user');
-                params.set('sourceId', user.id);
-            }
-
-            const res = await fetch(`${FEED_API_ENDPOINT}?${params}`);
-            if (!res.ok) throw new Error(`Failed to fetch pages: ${res.statusText}`);
-
-            const feedItems: any[] = await res.json();
-
-            // Transform feed items into simple page objects
-            const transformed: FeedPage[] = feedItems
-                .filter((item: any) => item.type === 'page-intern' || item.meta?.slug)
-                .map((item: any) => ({
-                    id: item.id,
-                    title: item.title || 'Untitled',
-                    slug: item.meta?.slug || item.slug || item.id,
-                    user_id: item.user_id || item.owner || '',
-                    author: item.author,
-                }));
-
-            setPages(transformed);
-        } catch (err) {
-            console.error('Error fetching pages:', err);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const filteredPages = useMemo(() => {
-        return pages
-            .filter(page => !forbiddenIds.includes(page.id))
-            .filter(page => {
-                const q = searchQuery.toLowerCase();
-                return page.title.toLowerCase().includes(q) ||
-                    page.slug.toLowerCase().includes(q) ||
-                    (page.author?.display_name || '').toLowerCase().includes(q);
-            });
-    }, [pages, searchQuery, forbiddenIds]);
-
-    const handleConfirm = () => {
-        if (selectedId) {
-            const selectedPage = pages.find(p => p.id === selectedId) || null;
-            onSelect(selectedPage);
-        } else {
-            onSelect(null);
-        }
-        onClose();
-    };
-
-    const handleClear = () => {
-        setSelectedId(null);
-    };
-
-    return (
-        <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
-                <DialogHeader>
-                    <DialogTitle><T>Select Page</T></DialogTitle>
-                    <DialogDescription>
-                        <T>Choose a page to link in the menu.</T>
-                    </DialogDescription>
-                </DialogHeader>
-
-                {/* Search + scope toggle */}
-                <div className="flex gap-2 my-2">
-                    <div className="relative flex-1">
-                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                        <Input
-                            placeholder={translate('Search pages...')}
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="pl-10"
-                        />
-                    </div>
-                    <Button
-                        variant={showAllUsers ? 'default' : 'outline'}
-                        size="sm"
-                        onClick={() => setShowAllUsers(!showAllUsers)}
-                        className="shrink-0 h-10"
-                        title={showAllUsers ? translate('Showing all users') : translate('Showing my pages')}
-                    >
-                        {showAllUsers ? <Users className="h-4 w-4 mr-1.5" /> : <User className="h-4 w-4 mr-1.5" />}
-                        {showAllUsers ? <T>All</T> : <T>Mine</T>}
-                    </Button>
-                </div>
-
-                {/* Pages Grid */}
-                <div className="flex-1 overflow-y-auto min-h-0 border rounded-md bg-muted/10 p-2">
-                    {loading ? (
-                        <div className="flex items-center justify-center py-12">
-                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-                        </div>
-                    ) : filteredPages.length === 0 ? (
-                        <div className="text-center py-12">
-                            <FileText className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
-                            <p className="text-muted-foreground">
-                                <T>{searchQuery ? 'No pages found' : 'No pages available'}</T>
-                            </p>
-                        </div>
-                    ) : (
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                            {/* Option for None */}
-                            <div
-                                onClick={handleClear}
-                                className={cn(
-                                    "cursor-pointer rounded-lg border-2 p-3 flex items-center gap-3 transition-all hover:border-primary/50 bg-background",
-                                    selectedId === null ? "border-primary" : "border-transparent"
-                                )}
-                            >
-                                <div className="h-10 w-10 rounded-md bg-muted flex items-center justify-center">
-                                    <span className="text-xs text-muted-foreground">/</span>
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                    <p className="text-sm font-medium truncate"><T>None</T></p>
-                                    <p className="text-xs text-muted-foreground truncate"><T>Clear selection</T></p>
-                                </div>
-                                {selectedId === null && <Check className="h-4 w-4 text-primary" />}
-                            </div>
-
-                            {filteredPages.map((page) => (
-                                <div
-                                    key={page.id}
-                                    onClick={() => setSelectedId(page.id)}
-                                    onDoubleClick={() => {
-                                        setSelectedId(page.id);
-                                        onSelect(page);
-                                        onClose();
-                                    }}
-                                    className={cn(
-                                        "cursor-pointer rounded-lg border-2 p-3 flex items-center gap-3 transition-all hover:border-primary/50 bg-background",
-                                        selectedId === page.id ? "border-primary" : "border-transparent"
-                                    )}
-                                >
-                                    <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
-                                        <FileText className="h-5 w-5 text-primary" />
-                                    </div>
-                                    <div className="flex-1 min-w-0">
-                                        <p className="text-sm font-medium truncate">{page.title}</p>
-                                        <p className="text-xs text-muted-foreground truncate">
-                                            /{page.slug}
-                                            {showAllUsers && page.author?.display_name && (
-                                                <span className="ml-1 opacity-60">• {page.author.display_name}</span>
-                                            )}
-                                        </p>
-                                    </div>
-                                    {selectedId === page.id && <Check className="h-4 w-4 text-primary" />}
-                                </div>
-                            ))}
-                        </div>
-                    )}
-                </div>
-
-                {/* Actions */}
-                <div className="flex justify-end items-center pt-4 gap-2">
-                    <Button variant="outline" onClick={onClose}>
-                        <T>Cancel</T>
-                    </Button>
-                    <Button onClick={handleConfirm}>
-                        <T>Confirm Selection</T>
-                    </Button>
-                </div>
-            </DialogContent>
-        </Dialog>
-    );
-};
+import React, { useState, useEffect, useMemo } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { T, translate } from '@/i18n';
+import { Search, FileText, Check, Users, User } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { cn } from '@/lib/utils';
+import { FEED_API_ENDPOINT } from '@/constants';
+
+/** Simplified page shape returned from the feed API */
+interface FeedPage {
+    id: string;
+    title: string;
+    slug: string;       // from meta.slug
+    user_id: string;    // owner UUID
+    author?: { display_name?: string; username?: string };
+}
+
+interface PagePickerDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelect: (page: FeedPage | null) => void;
+    currentValue?: string | null;
+    forbiddenIds?: string[];
+}
+
+export const PagePickerDialog: React.FC<PagePickerDialogProps> = ({
+    isOpen,
+    onClose,
+    onSelect,
+    currentValue,
+    forbiddenIds = []
+}) => {
+    const { user } = useAuth();
+    const [pages, setPages] = useState<FeedPage[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedId, setSelectedId] = useState<string | null>(currentValue || null);
+    const [showAllUsers, setShowAllUsers] = useState(false);
+
+    useEffect(() => {
+        if (isOpen) {
+            fetchPages();
+            setSelectedId(currentValue || null);
+        }
+    }, [isOpen, currentValue, showAllUsers]);
+
+    const fetchPages = async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams({
+                contentType: 'pages',
+                limit: '200',
+                sortBy: 'latest',
+            });
+
+            // Filter to current user's pages unless "all users" is toggled
+            if (!showAllUsers && user?.id) {
+                params.set('source', 'user');
+                params.set('sourceId', user.id);
+            }
+
+            const res = await fetch(`${FEED_API_ENDPOINT}?${params}`);
+            if (!res.ok) throw new Error(`Failed to fetch pages: ${res.statusText}`);
+
+            const feedItems: any[] = await res.json();
+
+            // Transform feed items into simple page objects
+            const transformed: FeedPage[] = feedItems
+                .filter((item: any) => item.type === 'page-intern' || item.meta?.slug)
+                .map((item: any) => ({
+                    id: item.id,
+                    title: item.title || 'Untitled',
+                    slug: item.meta?.slug || item.slug || item.id,
+                    user_id: item.user_id || item.owner || '',
+                    author: item.author,
+                }));
+
+            setPages(transformed);
+        } catch (err) {
+            console.error('Error fetching pages:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const filteredPages = useMemo(() => {
+        return pages
+            .filter(page => !forbiddenIds.includes(page.id))
+            .filter(page => {
+                const q = searchQuery.toLowerCase();
+                return page.title.toLowerCase().includes(q) ||
+                    page.slug.toLowerCase().includes(q) ||
+                    (page.author?.display_name || '').toLowerCase().includes(q);
+            });
+    }, [pages, searchQuery, forbiddenIds]);
+
+    const handleConfirm = () => {
+        if (selectedId) {
+            const selectedPage = pages.find(p => p.id === selectedId) || null;
+            onSelect(selectedPage);
+        } else {
+            onSelect(null);
+        }
+        onClose();
+    };
+
+    const handleClear = () => {
+        setSelectedId(null);
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+                <DialogHeader>
+                    <DialogTitle><T>Select Page</T></DialogTitle>
+                    <DialogDescription>
+                        <T>Choose a page to link in the menu.</T>
+                    </DialogDescription>
+                </DialogHeader>
+
+                {/* Search + scope toggle */}
+                <div className="flex gap-2 my-2">
+                    <div className="relative flex-1">
+                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                        <Input
+                            placeholder={translate('Search pages...')}
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="pl-10"
+                        />
+                    </div>
+                    <Button
+                        variant={showAllUsers ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => setShowAllUsers(!showAllUsers)}
+                        className="shrink-0 h-10"
+                        title={showAllUsers ? translate('Showing all users') : translate('Showing my pages')}
+                    >
+                        {showAllUsers ? <Users className="h-4 w-4 mr-1.5" /> : <User className="h-4 w-4 mr-1.5" />}
+                        {showAllUsers ? <T>All</T> : <T>Mine</T>}
+                    </Button>
+                </div>
+
+                {/* Pages Grid */}
+                <div className="flex-1 overflow-y-auto min-h-0 border rounded-md bg-muted/10 p-2">
+                    {loading ? (
+                        <div className="flex items-center justify-center py-12">
+                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                        </div>
+                    ) : filteredPages.length === 0 ? (
+                        <div className="text-center py-12">
+                            <FileText className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
+                            <p className="text-muted-foreground">
+                                <T>{searchQuery ? 'No pages found' : 'No pages available'}</T>
+                            </p>
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                            {/* Option for None */}
+                            <div
+                                onClick={handleClear}
+                                className={cn(
+                                    "cursor-pointer rounded-lg border-2 p-3 flex items-center gap-3 transition-all hover:border-primary/50 bg-background",
+                                    selectedId === null ? "border-primary" : "border-transparent"
+                                )}
+                            >
+                                <div className="h-10 w-10 rounded-md bg-muted flex items-center justify-center">
+                                    <span className="text-xs text-muted-foreground">/</span>
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <p className="text-sm font-medium truncate"><T>None</T></p>
+                                    <p className="text-xs text-muted-foreground truncate"><T>Clear selection</T></p>
+                                </div>
+                                {selectedId === null && <Check className="h-4 w-4 text-primary" />}
+                            </div>
+
+                            {filteredPages.map((page) => (
+                                <div
+                                    key={page.id}
+                                    onClick={() => setSelectedId(page.id)}
+                                    onDoubleClick={() => {
+                                        setSelectedId(page.id);
+                                        onSelect(page);
+                                        onClose();
+                                    }}
+                                    className={cn(
+                                        "cursor-pointer rounded-lg border-2 p-3 flex items-center gap-3 transition-all hover:border-primary/50 bg-background",
+                                        selectedId === page.id ? "border-primary" : "border-transparent"
+                                    )}
+                                >
+                                    <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
+                                        <FileText className="h-5 w-5 text-primary" />
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <p className="text-sm font-medium truncate">{page.title}</p>
+                                        <p className="text-xs text-muted-foreground truncate">
+                                            /{page.slug}
+                                            {showAllUsers && page.author?.display_name && (
+                                                <span className="ml-1 opacity-60">• {page.author.display_name}</span>
+                                            )}
+                                        </p>
+                                    </div>
+                                    {selectedId === page.id && <Check className="h-4 w-4 text-primary" />}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {/* Actions */}
+                <div className="flex justify-end items-center pt-4 gap-2">
+                    <Button variant="outline" onClick={onClose}>
+                        <T>Cancel</T>
+                    </Button>
+                    <Button onClick={handleConfirm}>
+                        <T>Confirm Selection</T>
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
diff --git a/packages/ui/src/modules/pages/VersionManager.tsx b/packages/ui/src/modules/pages/VersionManager.tsx
index def04ae3..42a36558 100644
--- a/packages/ui/src/modules/pages/VersionManager.tsx
+++ b/packages/ui/src/modules/pages/VersionManager.tsx
@@ -1,173 +1,173 @@
-import { useState } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
-import { toast } from "sonner";
-import { History, Trash2, Plus, Loader2, Undo2 } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { T, translate } from "@/i18n";
-import { fetchPageVersions, createPageVersion, deletePageVersion, restorePageVersion } from "./client-pages";
-
-interface VersionManagerProps {
-    isOpen: boolean;
-    onClose: () => void;
-    pageId: string;
-    pageTitle?: string;
-    /** Called when user wants to restore/view a version */
-    onSelectVersion?: (versionId: string) => void;
-    /** Called after a successful restore */
-    onRestore?: () => void;
-}
-
-export const VersionManager = ({ isOpen, onClose, pageId, pageTitle, onSelectVersion, onRestore }: VersionManagerProps) => {
-    const [actionLoading, setActionLoading] = useState(false);
-    const queryClient = useQueryClient();
-
-    const { data: versions = [], isLoading } = useQuery({
-        queryKey: ['page-versions', pageId],
-        queryFn: () => fetchPageVersions(pageId),
-        enabled: isOpen && !!pageId,
-    });
-
-    const handleCreate = async () => {
-        setActionLoading(true);
-        try {
-            await createPageVersion(pageId);
-            toast.success(translate("Version created"));
-            queryClient.invalidateQueries({ queryKey: ['page-versions', pageId] });
-        } catch (err: any) {
-            console.error(err);
-            toast.error(err.message || translate("Failed to create version"));
-        } finally {
-            setActionLoading(false);
-        }
-    };
-
-    const handleDelete = async (versionId: string, e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (!confirm(translate("Delete this version?"))) return;
-
-        setActionLoading(true);
-        try {
-            await deletePageVersion(pageId, versionId);
-            toast.success(translate("Version deleted"));
-            queryClient.invalidateQueries({ queryKey: ['page-versions', pageId] });
-        } catch (err: any) {
-            console.error(err);
-            toast.error(err.message || translate("Failed to delete version"));
-        } finally {
-            setActionLoading(false);
-        }
-    };
-
-    const handleRestore = async (versionId: string, e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (!confirm(translate("Restore this version? Current content will be overwritten."))) return;
-
-        setActionLoading(true);
-        try {
-            await restorePageVersion(pageId, versionId);
-            toast.success(translate("Version restored"));
-            onRestore?.();
-            onClose();
-        } catch (err: any) {
-            console.error(err);
-            toast.error(err.message || translate("Failed to restore version"));
-        } finally {
-            setActionLoading(false);
-        }
-    };
-
-    const formatDate = (dateStr: string) => {
-        try {
-            return new Date(dateStr).toLocaleString(undefined, {
-                dateStyle: 'medium',
-                timeStyle: 'short',
-            });
-        } catch {
-            return dateStr;
-        }
-    };
-
-    return (
-        <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="max-w-lg max-h-[70vh] flex flex-col">
-                <DialogHeader>
-                    <DialogTitle className="flex items-center gap-2">
-                        <History className="h-4 w-4" />
-                        <T>Versions</T>
-                        {pageTitle && <span className="text-muted-foreground font-normal text-sm ml-1">— {pageTitle}</span>}
-                    </DialogTitle>
-                    <DialogDescription>
-                        <T>Manage saved snapshots of this page.</T>
-                    </DialogDescription>
-                </DialogHeader>
-
-                {/* Actions */}
-                <div className="flex items-center justify-between">
-                    <span className="text-xs text-muted-foreground">
-                        {versions.length} {versions.length === 1 ? translate('version') : translate('versions')}
-                    </span>
-                    <Button size="sm" variant="outline" onClick={handleCreate} disabled={actionLoading}>
-                        {actionLoading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Plus className="h-3 w-3 mr-1" />}
-                        <T>Snapshot</T>
-                    </Button>
-                </div>
-
-                {/* Version list */}
-                <div className="flex-1 overflow-y-auto min-h-0 border rounded-md">
-                    {isLoading ? (
-                        <div className="flex justify-center p-6"><Loader2 className="h-5 w-5 animate-spin" /></div>
-                    ) : versions.length === 0 ? (
-                        <div className="text-center text-sm text-muted-foreground py-8">
-                            <T>No versions yet.</T>
-                        </div>
-                    ) : (
-                        <div className="divide-y">
-                            {versions.map((v: any) => (
-                                <div
-                                    key={v.id}
-                                    className={cn(
-                                        "flex items-center justify-between p-3 hover:bg-muted/50 group",
-                                        onSelectVersion && "cursor-pointer"
-                                    )}
-                                    onClick={() => onSelectVersion?.(v.id)}
-                                >
-                                    <div className="min-w-0 flex-1">
-                                        <div className="text-sm font-medium truncate">
-                                            {v.meta?.version_label || v.meta?.version_of_title || v.title}
-                                        </div>
-                                        <div className="text-xs text-muted-foreground">
-                                            {formatDate(v.created_at)}
-                                        </div>
-                                    </div>
-                                    <div className="flex items-center gap-0.5 shrink-0">
-                                        <Button
-                                            variant="ghost"
-                                            size="icon"
-                                            className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
-                                            onClick={(e) => handleRestore(v.id, e)}
-                                            disabled={actionLoading}
-                                            title={translate("Restore")}
-                                        >
-                                            <Undo2 className="h-3 w-3" />
-                                        </Button>
-                                        <Button
-                                            variant="ghost"
-                                            size="icon"
-                                            className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity text-destructive"
-                                            onClick={(e) => handleDelete(v.id, e)}
-                                            disabled={actionLoading}
-                                        >
-                                            <Trash2 className="h-3 w-3" />
-                                        </Button>
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </DialogContent>
-        </Dialog>
-    );
-};
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { toast } from "sonner";
+import { History, Trash2, Plus, Loader2, Undo2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { T, translate } from "@/i18n";
+import { fetchPageVersions, createPageVersion, deletePageVersion, restorePageVersion } from "./client-pages";
+
+interface VersionManagerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    pageId: string;
+    pageTitle?: string;
+    /** Called when user wants to restore/view a version */
+    onSelectVersion?: (versionId: string) => void;
+    /** Called after a successful restore */
+    onRestore?: () => void;
+}
+
+export const VersionManager = ({ isOpen, onClose, pageId, pageTitle, onSelectVersion, onRestore }: VersionManagerProps) => {
+    const [actionLoading, setActionLoading] = useState(false);
+    const queryClient = useQueryClient();
+
+    const { data: versions = [], isLoading } = useQuery({
+        queryKey: ['page-versions', pageId],
+        queryFn: () => fetchPageVersions(pageId),
+        enabled: isOpen && !!pageId,
+    });
+
+    const handleCreate = async () => {
+        setActionLoading(true);
+        try {
+            await createPageVersion(pageId);
+            toast.success(translate("Version created"));
+            queryClient.invalidateQueries({ queryKey: ['page-versions', pageId] });
+        } catch (err: any) {
+            console.error(err);
+            toast.error(err.message || translate("Failed to create version"));
+        } finally {
+            setActionLoading(false);
+        }
+    };
+
+    const handleDelete = async (versionId: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!confirm(translate("Delete this version?"))) return;
+
+        setActionLoading(true);
+        try {
+            await deletePageVersion(pageId, versionId);
+            toast.success(translate("Version deleted"));
+            queryClient.invalidateQueries({ queryKey: ['page-versions', pageId] });
+        } catch (err: any) {
+            console.error(err);
+            toast.error(err.message || translate("Failed to delete version"));
+        } finally {
+            setActionLoading(false);
+        }
+    };
+
+    const handleRestore = async (versionId: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!confirm(translate("Restore this version? Current content will be overwritten."))) return;
+
+        setActionLoading(true);
+        try {
+            await restorePageVersion(pageId, versionId);
+            toast.success(translate("Version restored"));
+            onRestore?.();
+            onClose();
+        } catch (err: any) {
+            console.error(err);
+            toast.error(err.message || translate("Failed to restore version"));
+        } finally {
+            setActionLoading(false);
+        }
+    };
+
+    const formatDate = (dateStr: string) => {
+        try {
+            return new Date(dateStr).toLocaleString(undefined, {
+                dateStyle: 'medium',
+                timeStyle: 'short',
+            });
+        } catch {
+            return dateStr;
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="max-w-lg max-h-[70vh] flex flex-col">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <History className="h-4 w-4" />
+                        <T>Versions</T>
+                        {pageTitle && <span className="text-muted-foreground font-normal text-sm ml-1">— {pageTitle}</span>}
+                    </DialogTitle>
+                    <DialogDescription>
+                        <T>Manage saved snapshots of this page.</T>
+                    </DialogDescription>
+                </DialogHeader>
+
+                {/* Actions */}
+                <div className="flex items-center justify-between">
+                    <span className="text-xs text-muted-foreground">
+                        {versions.length} {versions.length === 1 ? translate('version') : translate('versions')}
+                    </span>
+                    <Button size="sm" variant="outline" onClick={handleCreate} disabled={actionLoading}>
+                        {actionLoading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Plus className="h-3 w-3 mr-1" />}
+                        <T>Snapshot</T>
+                    </Button>
+                </div>
+
+                {/* Version list */}
+                <div className="flex-1 overflow-y-auto min-h-0 border rounded-md">
+                    {isLoading ? (
+                        <div className="flex justify-center p-6"><Loader2 className="h-5 w-5 animate-spin" /></div>
+                    ) : versions.length === 0 ? (
+                        <div className="text-center text-sm text-muted-foreground py-8">
+                            <T>No versions yet.</T>
+                        </div>
+                    ) : (
+                        <div className="divide-y">
+                            {versions.map((v: any) => (
+                                <div
+                                    key={v.id}
+                                    className={cn(
+                                        "flex items-center justify-between p-3 hover:bg-muted/50 group",
+                                        onSelectVersion && "cursor-pointer"
+                                    )}
+                                    onClick={() => onSelectVersion?.(v.id)}
+                                >
+                                    <div className="min-w-0 flex-1">
+                                        <div className="text-sm font-medium truncate">
+                                            {v.meta?.version_label || v.meta?.version_of_title || v.title}
+                                        </div>
+                                        <div className="text-xs text-muted-foreground">
+                                            {formatDate(v.created_at)}
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-0.5 shrink-0">
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
+                                            onClick={(e) => handleRestore(v.id, e)}
+                                            disabled={actionLoading}
+                                            title={translate("Restore")}
+                                        >
+                                            <Undo2 className="h-3 w-3" />
+                                        </Button>
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity text-destructive"
+                                            onClick={(e) => handleDelete(v.id, e)}
+                                            disabled={actionLoading}
+                                        >
+                                            <Trash2 className="h-3 w-3" />
+                                        </Button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
diff --git a/packages/ui/src/modules/pages/editor/UserPageDetails.tsx b/packages/ui/src/modules/pages/editor/UserPageDetails.tsx
index 8232266c..5403854c 100644
--- a/packages/ui/src/modules/pages/editor/UserPageDetails.tsx
+++ b/packages/ui/src/modules/pages/editor/UserPageDetails.tsx
@@ -1,38 +1,38 @@
-import React, { lazy, Suspense } from 'react';
-import { Page, UserProfile } from "../types";
-import { Database } from '@/integrations/supabase/types';
-import UserPageDetailsView from './UserPageDetailsView';
-
-type Layout = Database['public']['Tables']['layouts']['Row'];
-
-export interface UserPageDetailsProps {
-    page: Page;
-    userProfile: UserProfile | null;
-    isOwner: boolean;
-    isEditMode: boolean;
-    embedded?: boolean;
-    userId: string;
-    orgSlug?: string;
-    onPageUpdate: (updatedPage: Page) => void;
-    onToggleEditMode: () => void;
-    onWidgetRename: (id: string | null) => void;
-    templates?: Layout[];
-    onLoadTemplate?: (template: Layout) => void;
-    showActions?: boolean;
-    ActionsComponent?: React.ComponentType<any>;
-    contextVariables?: Record<string, any>;
-}
-
-const UserPageDetailsEdit = lazy(() => import('./UserPageDetailsEdit'));
-
-export const UserPageDetails: React.FC<UserPageDetailsProps> = (props) => {
-    if (!props.isEditMode) {
-        return <UserPageDetailsView {...props} />;
-    }
-
-    return (
-        <Suspense fallback={<UserPageDetailsView {...props} />}>
-            <UserPageDetailsEdit {...props} />
-        </Suspense>
-    );
-};
+import React, { lazy, Suspense } from 'react';
+import { Page, UserProfile } from "../types";
+import { Database } from '@/integrations/supabase/types';
+import UserPageDetailsView from './UserPageDetailsView';
+
+type Layout = Database['public']['Tables']['layouts']['Row'];
+
+export interface UserPageDetailsProps {
+    page: Page;
+    userProfile: UserProfile | null;
+    isOwner: boolean;
+    isEditMode: boolean;
+    embedded?: boolean;
+    userId: string;
+    orgSlug?: string;
+    onPageUpdate: (updatedPage: Page) => void;
+    onToggleEditMode: () => void;
+    onWidgetRename: (id: string | null) => void;
+    templates?: Layout[];
+    onLoadTemplate?: (template: Layout) => void;
+    showActions?: boolean;
+    ActionsComponent?: React.ComponentType<any>;
+    contextVariables?: Record<string, any>;
+}
+
+const UserPageDetailsEdit = lazy(() => import('./UserPageDetailsEdit'));
+
+export const UserPageDetails: React.FC<UserPageDetailsProps> = (props) => {
+    if (!props.isEditMode) {
+        return <UserPageDetailsView {...props} />;
+    }
+
+    return (
+        <Suspense fallback={<UserPageDetailsView {...props} />}>
+            <UserPageDetailsEdit {...props} />
+        </Suspense>
+    );
+};
diff --git a/packages/ui/src/modules/pages/editor/UserPageDetailsView.tsx b/packages/ui/src/modules/pages/editor/UserPageDetailsView.tsx
index 44ff3908..38cc7814 100644
--- a/packages/ui/src/modules/pages/editor/UserPageDetailsView.tsx
+++ b/packages/ui/src/modules/pages/editor/UserPageDetailsView.tsx
@@ -1,193 +1,193 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Badge } from "@/components/ui/badge";
-import { T } from "@/i18n";
-import { FileText, Calendar, FolderTree, EyeOff } from "lucide-react";
-import { Separator } from "@/components/ui/separator";
-import { Page, UserProfile } from "../types";
-import { Database } from '@/integrations/supabase/types';
-
-type Layout = Database['public']['Tables']['layouts']['Row'];
-
-const PageActions = React.lazy(() => import("../PageActions").then(module => ({ default: module.PageActions })));
-
-export interface UserPageDetailsViewProps {
-    page: Page;
-    userProfile: UserProfile | null;
-    isOwner: boolean;
-    isEditMode?: boolean;
-    embedded?: boolean;
-    userId: string;
-    orgSlug?: string;
-    onPageUpdate: (updatedPage: Page) => void;
-    onToggleEditMode: () => void;
-    onWidgetRename: (id: string | null) => void;
-    templates?: Layout[];
-    onLoadTemplate?: (template: Layout) => void;
-    showActions?: boolean;
-    ActionsComponent?: React.ComponentType<any>;
-    contextVariables?: Record<string, any>;
-}
-
-const UserPageDetailsView: React.FC<UserPageDetailsViewProps> = ({
-    page,
-    userProfile,
-    isOwner,
-    isEditMode = false,
-    embedded = false,
-    userId,
-    orgSlug,
-    onPageUpdate,
-    onToggleEditMode,
-    onWidgetRename,
-    templates,
-    onLoadTemplate,
-    showActions = true,
-    ActionsComponent = PageActions,
-    contextVariables = {},
-}) => {
-    const showAuthor = contextVariables['showAuthor'] !== 'false' && contextVariables['showAuthor'] !== false;
-    const showDate = contextVariables['showDate'] !== 'false' && contextVariables['showDate'] !== false;
-    const showCategories = contextVariables['showCategories'] !== 'false' && contextVariables['showCategories'] !== false;
-    const computedShowActions = contextVariables['showActions'] !== 'false' && contextVariables['showActions'] !== false && showActions;
-    const showParent = contextVariables['showParent'] !== 'false' && contextVariables['showParent'] !== false;
-    const showTitle = contextVariables['showTitle'] !== 'false' && contextVariables['showTitle'] !== false;
-
-    if (!showTitle && !showAuthor && !showDate && !showCategories && !showParent && !computedShowActions) {
-        return null;
-    }
-
-    return (
-        <div className="dark:bg-slate-900/50 p-2 mb-2">
-            <div className="flex items-start gap-4">
-                <div className="flex-1">
-                    {/* Parent Page Eyebrow */}
-                    {page.parent_page && showParent && (
-                        <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
-                            <Link
-                                to={orgSlug ? `/org/${orgSlug}/user/${userId}/pages/${page.parent_page.slug}` : `/user/${userId}/pages/${page.parent_page.slug}`}
-                                className="hover:text-primary transition-colors flex items-center gap-1"
-                            >
-                                <FileText className="h-3 w-3" />
-                                <span>{page.parent_page.title}</span>
-                            </Link>
-                        </div>
-                    )}
-
-                    {/* Title */}
-                    {showTitle && (
-                        <h1
-                            className="text-3xl font-bold mb-2"
-                            data-testid="page-title-display"
-                        >
-                            {page.title}
-                        </h1>
-                    )}
-
-                    <div className="flex flex-col gap-2 mt-2">
-                        {/* Only show the info row if either author or date is shown */}
-                        {(showAuthor || showDate) && (
-                            <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                                {showAuthor && userProfile && (
-                                    <Link
-                                        to={orgSlug ? `/org/${orgSlug}/user/${userId}` : `/user/${userId}`}
-                                        className="hover:text-primary transition-colors"
-                                    >
-                                        {userProfile.display_name || userProfile.username || `User ${userId?.slice(0, 8)}`}
-                                    </Link>
-                                )}
-                                {showDate && (
-                                    <div className="flex items-center gap-1">
-                                        <Calendar className="h-4 w-4" />
-                                        {new Date(page.created_at).toLocaleDateString('en-US', {
-                                            year: 'numeric',
-                                            month: 'long',
-                                            day: 'numeric'
-                                        })}
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                        
-                        {showCategories && (() => {
-                            const displayPaths = page.category_paths || (page.categories?.map(c => [c]) || []);
-                            if (displayPaths.length === 0) return null;
-
-                            return (
-                                <div className="flex flex-col gap-1 mt-1">
-                                    {displayPaths.map((path, pathIdx) => (
-                                        <div key={pathIdx} className="flex items-center gap-2 text-sm text-muted-foreground">
-                                            <FolderTree className="h-4 w-4 shrink-0" />
-                                            {path.map((cat, idx) => (
-                                                <span key={cat.id} className="flex items-center">
-                                                    {idx > 0 && <span className="mx-1 text-muted-foreground/50">/</span>}
-                                                    <Link to={`/categories/${cat.slug}`} className="hover:text-primary transition-colors hover:underline">
-                                                        {cat.name}
-                                                    </Link>
-                                                </span>
-                                            ))}
-                                        </div>
-                                    ))}
-                                </div>
-                            );
-                        })()}
-                    </div>
-                </div>
-            </div>
-
-            <Separator className="my-2" />
-
-            {/* Tags and Type */}
-            <div className="space-y-2 mt-2">
-                <div className="flex items-center gap-2 flex-wrap w-full">
-                    {!page.visible && isOwner && (
-                        <Badge variant="destructive" className="flex items-center gap-1">
-                            <EyeOff className="h-3 w-3" />
-                            <T>Hidden</T>
-                        </Badge>
-                    )}
-                    {!page.is_public && (
-                        <Badge variant="secondary" className="bg-blue-500/10 text-blue-500">
-                            <T>Private</T>
-                        </Badge>
-                    )}
-
-                    {computedShowActions && (
-                        <React.Suspense fallback={<div className="h-9 w-24 bg-muted animate-pulse rounded" />}>
-                            <ActionsComponent
-                                page={page}
-                                isOwner={isOwner}
-                                isEditMode={false}
-                                embedded={embedded}
-                                onToggleEditMode={() => {
-                                    onToggleEditMode();
-                                    onWidgetRename(null);
-                                }}
-                                onPageUpdate={onPageUpdate}
-                                onDelete={() => { }}
-                                onMetaUpdated={() => { }}
-                                templates={templates}
-                                onLoadTemplate={onLoadTemplate}
-                            />
-                        </React.Suspense>
-                    )}
-                </div>
-                {/* Tags */}
-                {page.tags && page.tags.length > 0 && (
-                    <div className="flex items-center gap-2 flex-wrap w-full">
-                        {page.tags.map((tag, index) => (
-                            <Badge
-                                key={index}
-                                variant="secondary"
-                            >
-                                #{tag}
-                            </Badge>
-                        ))}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default UserPageDetailsView;
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Badge } from "@/components/ui/badge";
+import { T } from "@/i18n";
+import { FileText, Calendar, FolderTree, EyeOff } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { Page, UserProfile } from "../types";
+import { Database } from '@/integrations/supabase/types';
+
+type Layout = Database['public']['Tables']['layouts']['Row'];
+
+const PageActions = React.lazy(() => import("../PageActions").then(module => ({ default: module.PageActions })));
+
+export interface UserPageDetailsViewProps {
+    page: Page;
+    userProfile: UserProfile | null;
+    isOwner: boolean;
+    isEditMode?: boolean;
+    embedded?: boolean;
+    userId: string;
+    orgSlug?: string;
+    onPageUpdate: (updatedPage: Page) => void;
+    onToggleEditMode: () => void;
+    onWidgetRename: (id: string | null) => void;
+    templates?: Layout[];
+    onLoadTemplate?: (template: Layout) => void;
+    showActions?: boolean;
+    ActionsComponent?: React.ComponentType<any>;
+    contextVariables?: Record<string, any>;
+}
+
+const UserPageDetailsView: React.FC<UserPageDetailsViewProps> = ({
+    page,
+    userProfile,
+    isOwner,
+    isEditMode = false,
+    embedded = false,
+    userId,
+    orgSlug,
+    onPageUpdate,
+    onToggleEditMode,
+    onWidgetRename,
+    templates,
+    onLoadTemplate,
+    showActions = true,
+    ActionsComponent = PageActions,
+    contextVariables = {},
+}) => {
+    const showAuthor = contextVariables['showAuthor'] !== 'false' && contextVariables['showAuthor'] !== false;
+    const showDate = contextVariables['showDate'] !== 'false' && contextVariables['showDate'] !== false;
+    const showCategories = contextVariables['showCategories'] !== 'false' && contextVariables['showCategories'] !== false;
+    const computedShowActions = contextVariables['showActions'] !== 'false' && contextVariables['showActions'] !== false && showActions;
+    const showParent = contextVariables['showParent'] !== 'false' && contextVariables['showParent'] !== false;
+    const showTitle = contextVariables['showTitle'] !== 'false' && contextVariables['showTitle'] !== false;
+
+    if (!showTitle && !showAuthor && !showDate && !showCategories && !showParent && !computedShowActions) {
+        return null;
+    }
+
+    return (
+        <div className="dark:bg-slate-900/50 p-2 mb-2">
+            <div className="flex items-start gap-4">
+                <div className="flex-1">
+                    {/* Parent Page Eyebrow */}
+                    {page.parent_page && showParent && (
+                        <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
+                            <Link
+                                to={orgSlug ? `/org/${orgSlug}/user/${userId}/pages/${page.parent_page.slug}` : `/user/${userId}/pages/${page.parent_page.slug}`}
+                                className="hover:text-primary transition-colors flex items-center gap-1"
+                            >
+                                <FileText className="h-3 w-3" />
+                                <span>{page.parent_page.title}</span>
+                            </Link>
+                        </div>
+                    )}
+
+                    {/* Title */}
+                    {showTitle && (
+                        <h1
+                            className="text-3xl font-bold mb-2"
+                            data-testid="page-title-display"
+                        >
+                            {page.title}
+                        </h1>
+                    )}
+
+                    <div className="flex flex-col gap-2 mt-2">
+                        {/* Only show the info row if either author or date is shown */}
+                        {(showAuthor || showDate) && (
+                            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                                {showAuthor && userProfile && (
+                                    <Link
+                                        to={orgSlug ? `/org/${orgSlug}/user/${userId}` : `/user/${userId}`}
+                                        className="hover:text-primary transition-colors"
+                                    >
+                                        {userProfile.display_name || userProfile.username || `User ${userId?.slice(0, 8)}`}
+                                    </Link>
+                                )}
+                                {showDate && (
+                                    <div className="flex items-center gap-1">
+                                        <Calendar className="h-4 w-4" />
+                                        {new Date(page.created_at).toLocaleDateString('en-US', {
+                                            year: 'numeric',
+                                            month: 'long',
+                                            day: 'numeric'
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                        
+                        {showCategories && (() => {
+                            const displayPaths = page.category_paths || (page.categories?.map(c => [c]) || []);
+                            if (displayPaths.length === 0) return null;
+
+                            return (
+                                <div className="flex flex-col gap-1 mt-1">
+                                    {displayPaths.map((path, pathIdx) => (
+                                        <div key={pathIdx} className="flex items-center gap-2 text-sm text-muted-foreground">
+                                            <FolderTree className="h-4 w-4 shrink-0" />
+                                            {path.map((cat, idx) => (
+                                                <span key={cat.id} className="flex items-center">
+                                                    {idx > 0 && <span className="mx-1 text-muted-foreground/50">/</span>}
+                                                    <Link to={`/categories/${cat.slug}`} className="hover:text-primary transition-colors hover:underline">
+                                                        {cat.name}
+                                                    </Link>
+                                                </span>
+                                            ))}
+                                        </div>
+                                    ))}
+                                </div>
+                            );
+                        })()}
+                    </div>
+                </div>
+            </div>
+
+            <Separator className="my-2" />
+
+            {/* Tags and Type */}
+            <div className="space-y-2 mt-2">
+                <div className="flex items-center gap-2 flex-wrap w-full">
+                    {!page.visible && isOwner && (
+                        <Badge variant="destructive" className="flex items-center gap-1">
+                            <EyeOff className="h-3 w-3" />
+                            <T>Hidden</T>
+                        </Badge>
+                    )}
+                    {!page.is_public && (
+                        <Badge variant="secondary" className="bg-blue-500/10 text-blue-500">
+                            <T>Private</T>
+                        </Badge>
+                    )}
+
+                    {computedShowActions && (
+                        <React.Suspense fallback={<div className="h-9 w-24 bg-muted animate-pulse rounded" />}>
+                            <ActionsComponent
+                                page={page}
+                                isOwner={isOwner}
+                                isEditMode={false}
+                                embedded={embedded}
+                                onToggleEditMode={() => {
+                                    onToggleEditMode();
+                                    onWidgetRename(null);
+                                }}
+                                onPageUpdate={onPageUpdate}
+                                onDelete={() => { }}
+                                onMetaUpdated={() => { }}
+                                templates={templates}
+                                onLoadTemplate={onLoadTemplate}
+                            />
+                        </React.Suspense>
+                    )}
+                </div>
+                {/* Tags */}
+                {page.tags && page.tags.length > 0 && (
+                    <div className="flex items-center gap-2 flex-wrap w-full">
+                        {page.tags.map((tag, index) => (
+                            <Badge
+                                key={index}
+                                variant="secondary"
+                            >
+                                #{tag}
+                            </Badge>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default UserPageDetailsView;
diff --git a/packages/ui/src/modules/places/CompetitorSidebar.tsx b/packages/ui/src/modules/places/CompetitorSidebar.tsx
deleted file mode 100644
index e1edc54b..00000000
--- a/packages/ui/src/modules/places/CompetitorSidebar.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as NavigationMenu from "@radix-ui/react-navigation-menu";
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import {
-    Search,
-    MapPin,
-    ChevronLeft,
-    ChevronRight,
-} from "lucide-react";
-
-// Using Lucide icons as requested ("we keep our icons")
-const navItems = [
-    { label: "Search", icon: Search, href: "/products/competitors?view=grid" },
-    { label: "Discover", icon: MapPin, href: "/products/competitors?view=map" },
-];
-
-export function CompetitorSidebar() {
-    const [open, setOpen] = useState(true);
-    const location = useLocation();
-
-    // Helper to check active state including query params for view
-    const isActive = (href: string) => {
-        return location.pathname + location.search === href ||
-            (href.includes('?view=grid') && location.pathname === '/products/competitors' && (!location.search.includes('view=') || location.search.includes('view=grid')))
-    };
-
-    return (
-        <aside
-            className={`flex flex-col bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-100 min-h-screen transition-all duration-300 relative z-20 ${open ? "w-32" : "w-16"
-                }`}
-        >
-            {/* Toggle */}
-            <button
-                className="p-3 text-gray-500 hover:text-gray-900 self-end mb-4 transition-colors"
-                onClick={() => setOpen(!open)}
-            >
-                {open ? <ChevronLeft className="h-6 w-6" /> : <ChevronRight className="h-6 w-6" />}
-            </button>
-
-            {/* Navigation */}
-            <NavigationMenu.Root className="flex flex-col gap-1 px-2" orientation="vertical">
-                <NavigationMenu.List className="flex flex-col space-y-2">
-                    {navItems.map(({ label, icon: Icon, href }) => {
-                        const active = isActive(href);
-                        return (
-                            <NavigationMenu.Item key={label}>
-                                <NavigationMenu.Link
-                                    asChild
-                                    className={`group flex items-center gap-2 py-2 px-3 rounded-md transition-all cursor-pointer ${active
-                                        ? " text-indigo-600 shadow-sm font-medium"
-                                        : "hover:bg-gray-200/50 text-gray-500 hover:text-gray-900"
-                                        }`}
-                                >
-                                    <Link to={href}>
-                                        <Icon className={`h-5 w-5 ${active ? "text-indigo-600" : "text-gray-400 group-hover:text-gray-600"}`} />
-                                        <span
-                                            className={`text-sm whitespace-nowrap transition-all duration-300 ${open ? "opacity-100 ml-2" : "opacity-0 hidden"
-                                                }`}
-                                        >
-                                            {label}
-                                        </span>
-                                    </Link>
-                                </NavigationMenu.Link>
-                            </NavigationMenu.Item>
-                        );
-                    })}
-                </NavigationMenu.List>
-            </NavigationMenu.Root>
-        </aside>
-    );
-}
diff --git a/packages/ui/src/modules/places/CompetitorsGridView.tsx b/packages/ui/src/modules/places/CompetitorsGridView.tsx
index 49aec8e5..015dde00 100644
--- a/packages/ui/src/modules/places/CompetitorsGridView.tsx
+++ b/packages/ui/src/modules/places/CompetitorsGridView.tsx
@@ -2,8 +2,6 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { DataGrid, type GridColDef, type GridFilterModel, type GridPaginationModel, type GridSortModel, type GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { type CompetitorFull } from '@polymech/shared';
-import { EmailFinderToolbar } from './EmailFinderToolbar';
-import { useCompetitorActions } from './useCompetitorActions';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import { useMuiTheme } from '@/hooks/useMuiTheme';
 import { type CompetitorSettings } from './useCompetitorSettings';
@@ -18,21 +16,16 @@ import {
     paramsToVisibilityModel,
     paramsToColumnOrder
 } from './gridUtils';
-import { GridProgress } from './GridProgress';
 import { useGridColumns } from './useGridColumns';
-// import { useLocationEnrichment } from './hooks/useEnrichment';
 
 interface CompetitorsGridViewProps {
     competitors: CompetitorFull[];
     loading: boolean;
     settings: CompetitorSettings;
     updateExcludedTypes: (types: string[]) => Promise<void>;
-    onOpenSettings: () => void;
-    showExcluded: boolean;
-    setShowExcluded: (show: boolean) => void;
 }
 
-export const CompetitorsGridView: React.FC<CompetitorsGridViewProps> = ({ competitors, loading, settings, updateExcludedTypes, onOpenSettings, showExcluded, setShowExcluded, enrich, isEnriching, enrichmentStatus }) => {
+export const CompetitorsGridView: React.FC<CompetitorsGridViewProps> = ({ competitors, loading, settings, updateExcludedTypes }) => {
     const muiTheme = useMuiTheme();
     const [searchParams, setSearchParams] = useSearchParams();
 
@@ -48,27 +41,7 @@ export const CompetitorsGridView: React.FC<CompetitorsGridViewProps> = ({ compet
     const [sortModel, setSortModel] = useState<GridSortModel>(() => paramsToSortModel(searchParams));
 
     const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>(() => paramsToVisibilityModel(searchParams));
-
-    // State for showing excluded competitors - MOVED TO PARENT
-    // const [showExcluded, setShowExcluded] = useState(false);
-
-    // Filter competitors based on excluded types - MOVED TO PARENT
     const filteredCompetitors = competitors;
-    console.log('filteredCompetitors', filteredCompetitors)
-    /*
-    const filteredCompetitors = React.useMemo(() => {
-        if (showExcluded) return competitors;
-
-        const excluded = settings.excluded_types || [];
-        if (excluded.length === 0) return competitors;
-
-        return competitors.filter(competitor => {
-            const types = competitor.types || [];
-            return !types.some(type => excluded.includes(type));
-        });
-    }, [competitors, showExcluded, settings.excluded_types]);
-    */
-
     // Column Widths state
     const [columnWidths, setColumnWidths] = useState<Record<string, number>>(() => {
         try {
@@ -92,50 +65,10 @@ export const CompetitorsGridView: React.FC<CompetitorsGridViewProps> = ({ compet
     // Selection state
     const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
-    // Use custom hook for competitor actions
-    const {
-        emailLoadingStates,
-        emailData,
-        emailErrors,
-        isProcessing,
-        progress,
-        findEmails,
-        handleFindEmails,
-        handleCancel,
-        cancelRow,
-        handleExportThunderbird
-    } = useCompetitorActions({
-        competitors,
-        selectedRows,
-        excludedTypes: settings.excluded_types || [],
-        columnVisibilityModel
-    });
-
-    // const { enrich, isEnriching } = useLocationEnrichment();
-
-    // Handlers for "All Results" fallback
-    const handleFetchMeta = React.useCallback(() => {
-        const ids = selectedRows.length > 0 ? selectedRows : filteredCompetitors.map(c => String(c.place_id));
-        if (ids.length === 0) return;
-        enrich(ids, ['meta']);
-    }, [selectedRows, filteredCompetitors, enrich]);
-
-    const handleFetchEmail = React.useCallback(() => {
-        const ids = selectedRows.length > 0 ? selectedRows : filteredCompetitors.map(c => String(c.place_id));
-        if (ids.length === 0) return;
-        findEmails(ids);
-    }, [selectedRows, filteredCompetitors, findEmails]);
-
     // Get Columns Definition
     const columns = useGridColumns({
-        emailLoadingStates,
-        emailData,
-        emailErrors,
-        findEmails,
-        cancelRow,
         settings,
-        updateExcludedTypes,
-        enrichmentStatus
+        updateExcludedTypes
     });
 
     // Update URL when filter model changes
@@ -282,8 +215,6 @@ export const CompetitorsGridView: React.FC<CompetitorsGridViewProps> = ({ compet
 
     return (
         <div className="space-y-4" style={{ width: '100%' }}>
-            <GridProgress isProcessing={isProcessing} progress={progress || null} />
-
             <div className="overflow-hidden" style={{ height: 600, width: '100%' }}>
                 <MuiThemeProvider theme={muiTheme}>
                     <DataGrid
@@ -328,25 +259,6 @@ export const CompetitorsGridView: React.FC<CompetitorsGridViewProps> = ({ compet
                             }
                             setSelectedRows(ids.map(id => String(id)));
                         }}
-                        slots={{
-                            toolbar: EmailFinderToolbar as any,
-                        }}
-                        slotProps={{
-                            toolbar: {
-                                selectedCount: selectedRows.length,
-                                onFindEmails: handleFindEmails,
-                                isProcessing,
-                                progress,
-                                onCancel: handleCancel,
-                                onExportThunderbird: handleExportThunderbird,
-                                showExcluded,
-                                onToggleShowExcluded: setShowExcluded,
-                                onOpenSettings,
-                                onFetchMeta: handleFetchMeta,
-                                onFetchEmail: handleFetchEmail,
-                                isEnriching
-                            } as any,
-                        }}
                         className="border-0 rounded-none h-full"
                         sx={{
                             border: 0,
diff --git a/packages/ui/src/modules/places/CompetitorsMapView.tsx b/packages/ui/src/modules/places/CompetitorsMapView.tsx
index 31d9fa06..fe0cb86b 100644
--- a/packages/ui/src/modules/places/CompetitorsMapView.tsx
+++ b/packages/ui/src/modules/places/CompetitorsMapView.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react'
 import { Map as MapIcon, Sun, Moon, GripVertical, Maximize, Locate, Loader2, LayoutGrid, X } from 'lucide-react';
 import { RulerButton } from './components/RulerButton';
 import { type CompetitorFull } from '@polymech/shared';
-import { fetchRegionBoundary } from './client-searches';
+import { fetchRegionBoundary } from './client-gridsearch';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useTheme } from '@/components/ThemeProvider';
diff --git a/packages/ui/src/modules/places/EmailCell.tsx b/packages/ui/src/modules/places/EmailCell.tsx
index 95b82be8..66d5cdd2 100644
--- a/packages/ui/src/modules/places/EmailCell.tsx
+++ b/packages/ui/src/modules/places/EmailCell.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { CircularProgress, Tooltip, IconButton, Chip, Stack, Button, Popover, Box, Typography, List, ListItem, ListItemButton, ListItemText, ListItemIcon } from '@mui/material';
-import { Mail, ContentCopy, Error as ErrorIcon, CheckCircle, Search as SearchIcon, Refresh as RefreshIcon, Close } from '@mui/icons-material';
-
-export type EmailLoadingState = 'idle' | 'loading' | 'success' | 'error';
+import { Tooltip, Chip, Popover, Box, Typography, List, ListItem, ListItemButton, ListItemText, ListItemIcon } from '@mui/material';
+import { Mail, ContentCopy, CheckCircle } from '@mui/icons-material';
 
 export interface EmailCellProps {
     emails?: Array<{
@@ -10,16 +8,12 @@ export interface EmailCellProps {
         source?: string;
         foundAt?: string;
         tool?: string;
-    }>;
-    loadingState: EmailLoadingState;
-    errorMessage?: string;
+    } | string>;
     website?: string;
-    onFindEmail?: () => void;
-    onCancel?: () => void;
     isExcluded?: boolean;
 }
 
-export const EmailCell: React.FC<EmailCellProps> = ({ emails, loadingState, errorMessage, website, onFindEmail, onCancel, isExcluded }) => {
+export const EmailCell: React.FC<EmailCellProps> = ({ emails, website, isExcluded }) => {
     const [copiedEmail, setCopiedEmail] = React.useState<string | null>(null);
     const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
 
@@ -65,7 +59,7 @@ export const EmailCell: React.FC<EmailCellProps> = ({ emails, loadingState, erro
             if (!website) return 0;
             try {
                 const hostname = new URL(website).hostname.replace(/^www\./, '');
-                const domain = hostname.split('.').slice(-2).join('.'); // simple domain extraction
+                const domain = hostname.split('.').slice(-2).join('.');
 
                 const aMatch = a.email.toLowerCase().includes(domain);
                 const bMatch = b.email.toLowerCase().includes(domain);
@@ -79,64 +73,7 @@ export const EmailCell: React.FC<EmailCellProps> = ({ emails, loadingState, erro
         });
     }, [emails, website]);
 
-    // Loading state
-    if (loadingState === 'loading') {
-        return (
-            <div className="flex items-center justify-center h-full gap-1">
-                <Tooltip title="Finding emails...">
-                    <CircularProgress size={16} />
-                </Tooltip>
-                {onCancel && (
-                    <Tooltip title="Cancel">
-                        <IconButton size="small" onClick={(e) => { e.stopPropagation(); onCancel(); }}>
-                            <RefreshIcon fontSize="small" sx={{ transform: 'rotate(45deg)' }} /> {/* Using rotated refresh as cancel/close if Close not imported, or import Close? I'll import Close */}
-                        </IconButton>
-                    </Tooltip>
-                )}
-            </div>
-        );
-    }
-
-    // Error state
-    if (loadingState === 'error') {
-        return (
-            <div className="flex items-center justify-center gap-1 h-full">
-                <Tooltip title={errorMessage || 'Error finding emails'}>
-                    <ErrorIcon color="error" fontSize="small" />
-                </Tooltip>
-                {onFindEmail && (
-                    <Tooltip title="Retry">
-                        <IconButton size="small" onClick={(e) => { e.stopPropagation(); onFindEmail(); }}>
-                            <RefreshIcon fontSize="small" />
-                        </IconButton>
-                    </Tooltip>
-                )}
-            </div>
-        );
-    }
-
-    // Success but no emails found, OR we have explicit empty email list (from previous attempt)
-    const isExplicitlyEmpty = emails && emails.length === 0;
-    if ((loadingState === 'success' && (!emails || emails.length === 0)) || isExplicitlyEmpty) {
-        return (
-            <div className="flex items-center justify-center gap-2 h-full w-full">
-                <span className="text-gray-500 text-sm italic">No emails found</span>
-                {onFindEmail && (
-                    <Tooltip title="Try again">
-                        <IconButton
-                            size="small"
-                            onClick={(e) => { e.stopPropagation(); onFindEmail(); }}
-                            color="default"
-                        >
-                            <RefreshIcon fontSize="small" />
-                        </IconButton>
-                    </Tooltip>
-                )}
-            </div>
-        );
-    }
-
-    // No emails found (Idle)
+    // No emails found
     if (!emails || emails.length === 0) {
         // Excluded state
         if (isExcluded) {
@@ -151,19 +88,7 @@ export const EmailCell: React.FC<EmailCellProps> = ({ emails, loadingState, erro
 
         return (
             <div className="flex items-center justify-center h-full w-full">
-                {onFindEmail ? (
-                    <Tooltip title="Find emails">
-                        <IconButton
-                            size="small"
-                            onClick={(e) => { e.stopPropagation(); onFindEmail(); }}
-                            color="primary"
-                        >
-                            <SearchIcon fontSize="small" />
-                        </IconButton>
-                    </Tooltip>
-                ) : (
-                    <span className="text-gray-400 text-sm">-</span>
-                )}
+                <span className="text-gray-400 text-sm">-</span>
             </div>
         );
     }
@@ -172,7 +97,6 @@ export const EmailCell: React.FC<EmailCellProps> = ({ emails, loadingState, erro
     const hasMultiple = uniqueEmails.length > 1;
     const countLabel = hasMultiple ? ` (+${uniqueEmails.length - 1})` : '';
 
-    // Success - show emails
     return (
         <div className="flex items-center justify-start h-full py-1">
             <Tooltip
diff --git a/packages/ui/src/modules/places/EmailFinderToolbar.tsx b/packages/ui/src/modules/places/EmailFinderToolbar.tsx
deleted file mode 100644
index e5a82108..00000000
--- a/packages/ui/src/modules/places/EmailFinderToolbar.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react';
-import {
-    GridToolbarContainer,
-    GridToolbarColumnsButton,
-    GridToolbarFilterButton,
-    GridToolbarDensitySelector,
-    GridToolbarExport,
-    GridToolbarQuickFilter,
-    type GridToolbarProps,
-} from '@mui/x-data-grid';
-import { Button, LinearProgress, Box, Typography, IconButton, Tooltip, Switch, FormControlLabel } from '@mui/material';
-import { Mail, Close, Settings, AutoFixHigh, Email } from '@mui/icons-material';
-
-export interface EmailFinderToolbarProps extends Partial<GridToolbarProps> {
-    selectedCount: number;
-    onFindEmails: () => void;
-    isProcessing: boolean;
-    progress?: {
-        current: number;
-        total: number;
-        percent: number;
-        message: string;
-    };
-    onCancel?: () => void;
-    onExportThunderbird?: () => void;
-    showExcluded: boolean;
-    onToggleShowExcluded: (show: boolean) => void;
-    onOpenSettings?: () => void;
-    onFetchMeta?: () => void;
-    onFetchEmail?: () => void;
-    isEnriching?: boolean;
-}
-
-export const EmailFinderToolbar: React.FC<EmailFinderToolbarProps> = ({
-    selectedCount,
-    onFindEmails,
-    isProcessing,
-    progress,
-    onCancel,
-    onExportThunderbird,
-    showExcluded,
-    onToggleShowExcluded,
-    onOpenSettings,
-    onFetchMeta,
-    onFetchEmail,
-    isEnriching = false,
-}) => {
-
-    return (
-        <GridToolbarContainer>
-            <GridToolbarColumnsButton />
-            <GridToolbarFilterButton />
-            <GridToolbarDensitySelector />
-            <GridToolbarExport />
-
-            <Box sx={{ flexGrow: 1 }} />
-
-            {/* Quick Filter */}
-            <GridToolbarQuickFilter />
-
-            {/* Show Excluded Toggle */}
-            <Box sx={{ ml: 2, display: 'flex', alignItems: 'center' }}>
-                <FormControlLabel
-                    control={
-                        <Switch
-                            checked={showExcluded}
-                            onChange={(e) => onToggleShowExcluded(e.target.checked)}
-                            size="small"
-                        />
-                    }
-                    label="Show Excluded"
-                />
-                {onOpenSettings && (
-                    <Tooltip title="Search Settings">
-                        <IconButton size="small" onClick={onOpenSettings} sx={{ ml: 1 }}>
-                            <Settings fontSize="small" />
-                        </IconButton>
-                    </Tooltip>
-                )}
-            </Box>
-
-
-            {/* Export Thunderbird Button */}
-            <Button
-                size="small"
-                onClick={onExportThunderbird}
-                variant="text"
-                color="primary"
-                sx={{ ml: 1 }}
-            >
-                Export CSV
-            </Button>
-
-
-
-            {/* Processing indicator */}
-            {isProcessing && progress && (
-                <Box sx={{ ml: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography variant="caption" color="text.secondary">
-                        {progress.message}
-                    </Typography>
-                    <Box sx={{ width: 100 }}>
-                        <LinearProgress variant="determinate" value={progress.percent} />
-                    </Box>
-                    {onCancel && (
-                        <Tooltip title="Cancel">
-                            <IconButton size="small" onClick={onCancel}>
-                                <Close fontSize="small" />
-                            </IconButton>
-                        </Tooltip>
-                    )}
-                </Box>
-            )}
-        </GridToolbarContainer>
-    );
-};
diff --git a/packages/ui/src/modules/places/GADMPlayground.tsx b/packages/ui/src/modules/places/GADMPlayground.tsx
deleted file mode 100644
index 08066b7f..00000000
--- a/packages/ui/src/modules/places/GADMPlayground.tsx
+++ /dev/null
@@ -1,434 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import maplibregl from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { RegionSelector } from './components/RegionSelector';
-import { AreaScanner, type AreaScannerRef } from './components/AreaScanner';
-import { RegionTreeView } from './components/RegionTreeView';
-import { Map as MapIcon, GripVertical, Trash2, Loader2, Info } from 'lucide-react';
-
-const MAP_STYLE = 'https://api.maptiler.com/maps/basic-v2/style.json?key=aQ5CJxgn3brYPrfV3ws9';
-
-interface SelectedRegion {
-    id: string;
-    name: string;
-    geojson: any;
-    color: string;
-}
-
-const COLORS = [
-    '#ef4444', // red-500
-    '#f97316', // orange-500
-    '#eab308', // yellow-500
-    '#22c55e', // green-500
-    '#06b6d4', // cyan-500
-    '#3b82f6', // blue-500
-    '#8b5cf6', // violet-500
-    '#ec4899', // pink-500
-];
-
-export const GADMPlayground = () => {
-    const mapContainer = useRef<HTMLDivElement>(null);
-    const map = useRef<maplibregl.Map | null>(null);
-    const areaScannerRef = useRef<AreaScannerRef>(null);
-    const [selectedRegions, setSelectedRegions] = useState<SelectedRegion[]>([]);
-    const [sidebarWidth, setSidebarWidth] = useState(300);
-    const [isResizing, setIsResizing] = useState(false);
-    const [scanStatus, setScanStatus] = useState<string | null>(null);
-    const [currentCountry, setCurrentCountry] = useState<string | null>(null);
-    const [viewingRegion, setViewingRegion] = useState<SelectedRegion | null>(null);
-
-    // Initialize Map
-    useEffect(() => {
-        if (map.current || !mapContainer.current) return;
-
-        map.current = new maplibregl.Map({
-            container: mapContainer.current,
-            style: MAP_STYLE,
-            center: [10.45, 51.16],
-            zoom: 4,
-        });
-
-        map.current.addControl(new maplibregl.NavigationControl());
-    }, []);
-
-    // Handle Region Addition
-    const addRegion = async (region: any, shouldZoom = true) => {
-        // Extract GID
-        const gidKey = Object.keys(region).find(k => k.startsWith('GID_'));
-        const id = gidKey ? region[gidKey] : null;
-
-        if (!id) return;
-        if (selectedRegions.find(r => r.id === id)) return; // Already added
-
-        const level = gidKey!.split('_')[1];
-        const nameKey = `NAME_${level}`;
-        // Fallback to finding any NAME key if specific level name missing (unlikely but safe)
-        const name = region[nameKey] || Object.keys(region).find(k => k.startsWith('NAME_') && region[k]) ? region[Object.keys(region).find(k => k.startsWith('NAME_') && region[k])!] : 'Unknown';
-
-        try {
-            const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
-            const res = await fetch(`${apiUrl}/api/regions/boundary/${id}?name=${encodeURIComponent(name)}&level=${level}`);
-            if (res.ok) {
-                const geojson = await res.json();
-                const color = COLORS[selectedRegions.length % COLORS.length];
-
-                const newRegion = { id, name, geojson, color };
-                setSelectedRegions(prev => [...prev, newRegion]);
-
-                // Add to map immediately
-                addLayerToMap(newRegion);
-                if (shouldZoom) {
-                    zoomToRegion(geojson);
-                }
-            }
-        } catch (e) {
-            console.error("Failed to add region", e);
-        }
-    };
-
-    const handleScanResult = async (names: string[]) => {
-        const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
-
-        let processed = 0;
-        const total = names.length;
-
-        // Process sequentially or in small batches to avoid rate limits
-        for (const name of names) {
-            setScanStatus(`Processing ${processed + 1}/${total}: ${name}`);
-            try {
-                // 1. Search for Region Metadata
-                let query = `${apiUrl}/api/regions/search?query=${encodeURIComponent(name)}`;
-                if (currentCountry) {
-                    query += `&country=${encodeURIComponent(currentCountry)}`;
-                }
-
-                const searchRes = await fetch(query);
-                const searchData = await searchRes.json();
-
-                if (searchData.data && searchData.data.length > 0) {
-                    // Take the first match
-                    const regionMeta = searchData.data[0];
-                    console.log("Region metadata:", regionMeta);
-                    await addRegion(regionMeta, false); // Disable zoom for auto-scan
-                }
-            } catch (e) {
-                console.error(`Failed to auto-add region: ${name}`, e);
-            }
-            processed++;
-        }
-        setScanStatus(null);
-    };
-
-    const addLayerToMap = (region: SelectedRegion) => {
-        if (!map.current) return;
-
-        const sourceId = `source-${region.id}`;
-        if (!map.current.getSource(sourceId)) {
-            map.current.addSource(sourceId, {
-                type: 'geojson',
-                data: region.geojson
-            });
-
-            map.current.addLayer({
-                id: `fill-${region.id}`,
-                type: 'fill',
-                source: sourceId,
-                paint: {
-                    'fill-color': region.color,
-                    'fill-opacity': 0.3
-                }
-            });
-
-            map.current.addLayer({
-                id: `line-${region.id}`,
-                type: 'line',
-                source: sourceId,
-                paint: {
-                    'line-color': region.color,
-                    'line-width': 2
-                }
-            });
-        }
-    };
-
-    const removeRegion = (id: string) => {
-        if (!map.current) return;
-
-        if (map.current.getLayer(`fill-${id}`)) map.current.removeLayer(`fill-${id}`);
-        if (map.current.getLayer(`line-${id}`)) map.current.removeLayer(`line-${id}`);
-        if (map.current.getSource(`source-${id}`)) map.current.removeSource(`source-${id}`);
-
-        setSelectedRegions(prev => prev.filter(r => r.id !== id));
-    };
-
-    const zoomToRegion = (geojson: any) => {
-        if (!map.current) return;
-        const bbox = new maplibregl.LngLatBounds();
-
-        const processCoords = (coords: any[]) => {
-            coords.forEach(coord => {
-                if (Array.isArray(coord[0])) processCoords(coord);
-                else bbox.extend([coord[0], coord[1]]);
-            });
-        }
-
-        if (geojson.features) {
-            geojson.features.forEach((f: any) => {
-                if (f.geometry) {
-                    if (f.geometry.type === 'Polygon' || f.geometry.type === 'MultiPolygon') {
-                        processCoords(f.geometry.coordinates);
-                    }
-                }
-            });
-        } else if (geojson.type === 'Polygon' || geojson.type === 'MultiPolygon') {
-            processCoords(geojson.coordinates);
-        }
-
-        if (!bbox.isEmpty()) {
-            map.current.fitBounds(bbox, { padding: 50 });
-        }
-    };
-
-    // Resizing Logic
-    useEffect(() => {
-        const handleMouseMove = (e: MouseEvent) => {
-            if (isResizing) {
-                setSidebarWidth(window.innerWidth - e.clientX);
-            }
-        };
-        const handleMouseUp = () => setIsResizing(false);
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isResizing]);
-
-    return (
-        <div className="flex h-[calc(100vh-64px)] overflow-hidden">
-            {/* Map Area */}
-            <div className="flex-1 relative">
-                <div ref={mapContainer} className="w-full h-full" />
-
-                {/* Tools Overlay */}
-                <div className="absolute top-4 left-4 z-10 flex flex-col gap-4">
-                    <div className=" p-4 rounded-lg shadow-lg w-80">
-                        <h3 className="text-sm font-semibold mb-2">Search Region</h3>
-                        <RegionSelector onSelect={(r) => addRegion(r, true)} />
-                    </div>
-
-                    <div className=" p-4 rounded-lg shadow-lg w-auto">
-                        <h3 className="text-sm font-semibold mb-2">Scan Viewport</h3>
-                        <AreaScanner
-                            ref={areaScannerRef}
-                            map={map.current}
-                            onSelect={(name) => {
-                                handleScanResult([name]);
-                            }}
-                            onResultsFound={(names) => {
-                                console.log("Results found:", names);
-                                handleScanResult(names);
-                            }}
-                            onCenterLocation={(geo) => {
-                                console.log("Center location scanned:", geo);
-                                if (geo.countryName) {
-                                    setCurrentCountry(geo.countryName);
-                                }
-                            }}
-                        />
-                    </div>
-                    {/* Country Context Indicator */}
-                    {currentCountry && (
-                        <div className="/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-sm border text-xs font-semibold  flex items-center gap-1">
-                            <span className="text-gray-400">Context:</span>
-                            {currentCountry}
-                        </div>
-                    )}
-                </div>
-
-                {/* Status Overlay */}
-                {scanStatus && (
-                    <div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-20">
-                        <div className="bg-blue-600 text-white px-4 py-2 rounded-full shadow-lg text-sm font-medium flex items-center gap-2 animate-pulse">
-                            <Loader2 className="w-4 h-4 animate-spin" />
-                            {scanStatus}
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Resizer */}
-            <div
-                className="w-1 bg-gray-200 hover:bg-blue-500 cursor-col-resize flex items-center justify-center transition-colors"
-                onMouseDown={() => setIsResizing(true)}
-            >
-                <GripVertical className="w-3 h-3 text-gray-400" />
-            </div>
-
-            {/* Sidebar List */}
-            <div className=" border-l shadow-xl z-20 overflow-y-auto" style={{ width: sidebarWidth }}>
-                <div className="p-4 border-b">
-                    <h2 className="text-lg font-bold flex items-center gap-2">
-                        <MapIcon className="w-5 h-5" />
-                        Selected Regions
-                    </h2>
-                </div>
-                <div className="p-2 space-y-2">
-                    {selectedRegions.length === 0 && (
-                        <p className="text-gray-500 text-sm text-center py-8">No regions selected. Search or scan to add.</p>
-                    )}
-                    {selectedRegions.map(region => (
-                        <div key={region.id} className="flex items-center justify-between p-3  rounded-lg border hover:border-blue-300 transition-colors group">
-                            <div className="flex items-center gap-3 overflow-hidden">
-                                <div className="w-4 h-4 rounded-full flex-shrink-0" style={{ backgroundColor: region.color }} />
-                                <div className="truncate">
-                                    <div className="font-medium text-sm truncate" title={region.name}>{region.name}</div>
-                                    <div className="text-xs text-gray-500">{region.id}</div>
-                                </div>
-                            </div>
-                            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                                <button
-                                    onClick={() => setViewingRegion(region)}
-                                    className="p-1.5 text-gray-500 hover:text-blue-600 rounded hover:bg-blue-50"
-                                    title="View Properties"
-                                >
-                                    <Info className="w-4 h-4" />
-                                </button>
-                                <button
-                                    onClick={() => zoomToRegion(region.geojson)}
-                                    className="p-1.5 text-gray-500 hover:text-blue-600 rounded hover:bg-blue-50"
-                                    title="Zoom to"
-                                >
-                                    <MapIcon className="w-4 h-4" />
-                                </button>
-                                <button
-                                    onClick={() => removeRegion(region.id)}
-                                    className="p-1.5 text-gray-500 hover:text-red-600 rounded hover:bg-red-50"
-                                    title="Remove"
-                                >
-                                    <Trash2 className="w-4 h-4" />
-                                </button>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-
-            {/* Properties Modal */}
-            {viewingRegion && (
-                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" onClick={() => setViewingRegion(null)}>
-                    <div className=" rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] flex flex-col overflow-hidden" onClick={e => e.stopPropagation()}>
-                        <div className="p-4 border-b flex justify-between items-center ">
-                            <h3 className="font-semibold text-lg">{viewingRegion.name}</h3>
-                            <div className="flex items-center gap-2">
-                                <button
-                                    onClick={async () => {
-                                        const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
-
-                                        try {
-                                            // Fetch all descendants (depth=-1 for infinite/max)
-                                            // The server will automatically determine the start level from the admin ID
-                                            const res = await fetch(`${apiUrl}/api/regions/names?admin=${viewingRegion.id}&depth=-1`);
-                                            const data = await res.json();
-                                            if (data.data && data.data.length > 0) {
-                                                // Identify useful names (filter out "n.a.")
-                                                // Optionally filter on client side if needed, but showing all is safer for now.
-                                                // The user complained about "n.a.", so maybe we should filter them?
-                                                // "useless names".
-                                                // Let's filter out entries where NAME_X contains "n.a."
-                                                const useful = data.data.filter((d: any) => {
-                                                    const nameKey = Object.keys(d).find(k => k.startsWith('NAME_'));
-                                                    return nameKey && d[nameKey] && !d[nameKey].includes('n.a.');
-                                                });
-
-                                                const updated = { ...viewingRegion.geojson.properties, subdivisions: useful.length > 0 ? useful : data.data };
-                                                setViewingRegion({ ...viewingRegion, geojson: { ...viewingRegion.geojson, properties: updated } });
-                                            } else {
-                                                alert("No subdivisions found.");
-                                            }
-                                        } catch (e) {
-                                            console.error(e);
-                                            alert("Failed to fetch subdivisions");
-                                        }
-                                    }}
-                                    className="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded hover:bg-blue-200"
-                                >
-                                    Load Subdivisions
-                                </button>
-                                <button
-                                    onClick={async () => {
-                                        if (!viewingRegion) return;
-                                        // 1. Zoom to region
-                                        zoomToRegion(viewingRegion.geojson);
-
-                                        // 2. Wait for map to settle (approx 1.5s for flyTo)
-                                        setScanStatus("Zooming to region...");
-                                        await new Promise(r => setTimeout(r, 1500));
-
-                                        // 3. Scan
-                                        if (areaScannerRef.current) {
-                                            setScanStatus("Scanning for towns...");
-                                            try {
-                                                const towns = await areaScannerRef.current.scan(true); // silent scan
-                                                if (towns.length > 0) {
-                                                    // Append to subdivisions
-                                                    // Map simple strings to object structure expected by UI?
-                                                    // UI expects { NAME_X: "Name", GID_X: "..." }
-                                                    // We only have names. Let's create a fake structure: { NAME_SCAN: "Name", type: "Scanned Location" }
-                                                    const scannedObjs = towns.map(t => ({
-                                                        NAME_SCAN: t,
-                                                        type: "Scanned Location"
-                                                    }));
-
-                                                    // Merge with existing properties
-                                                    const existingProps = viewingRegion.geojson.properties || {};
-                                                    // Be careful not to overwrite existing GADM subdivisions if mixed usage
-                                                    const existingSubs = existingProps.subdivisions || [];
-
-                                                    const updated = {
-                                                        ...existingProps,
-                                                        subdivisions: [...existingSubs, ...scannedObjs]
-                                                    };
-
-                                                    setViewingRegion({
-                                                        ...viewingRegion,
-                                                        geojson: { ...viewingRegion.geojson, properties: updated }
-                                                    });
-                                                } else {
-                                                    alert("No towns found by scanning.");
-                                                }
-                                            } catch (e) {
-                                                console.error(e);
-                                                alert("Scan failed");
-                                            }
-                                            setScanStatus(null);
-                                        }
-                                    }}
-                                    className="text-xs bg-green-100 text-green-600 px-2 py-1 rounded hover:bg-green-200"
-                                >
-                                    Scan For Towns
-                                </button>
-                                <button onClick={() => setViewingRegion(null)} className="text-gray-400 hover:text-gray-600">×</button>
-                            </div>
-                        </div>
-                        <div className="p-0 overflow-auto flex-1  flex flex-col">
-                            {viewingRegion.geojson.properties?.subdivisions ? (
-                                <RegionTreeView
-                                    subdivisions={viewingRegion.geojson.properties.subdivisions}
-                                    rootName={viewingRegion.name}
-                                    rootId={viewingRegion.id}
-                                    onSearch={(term) => console.log("Searching for:", term)}
-                                />
-                            ) : (
-                                <pre className="text-xs p-4 font-mono whitespace-pre-wrap">
-                                    {JSON.stringify(viewingRegion.geojson.properties || viewingRegion.geojson, null, 2)}
-                                </pre>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
diff --git a/packages/ui/src/modules/places/GridProgress.tsx b/packages/ui/src/modules/places/GridProgress.tsx
deleted file mode 100644
index a0f4c251..00000000
--- a/packages/ui/src/modules/places/GridProgress.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-interface GridProgressProps {
-    isProcessing: boolean;
-    progress: { current: number; total: number; percent: number; message: string } | null;
-}
-
-export const GridProgress: React.FC<GridProgressProps> = ({ isProcessing, progress }) => {
-    if (!isProcessing || !progress) return null;
-
-    return (
-        <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded shadow-sm animate-in fade-in slide-in-from-top-2 duration-300">
-            <div className="flex">
-                <div className="flex-shrink-0">
-                    <svg className="h-5 w-5 text-blue-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                </div>
-                <div className="ml-3">
-                    <p className="text-sm text-blue-700">
-                        <span className="font-medium">Processing ({progress.current}/{progress.total}): </span>
-                        {progress.message}
-                    </p>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/ui/src/modules/places/GridSearchPlayground.old.tsx b/packages/ui/src/modules/places/GridSearchPlayground.old.tsx
deleted file mode 100644
index 6aebd317..00000000
--- a/packages/ui/src/modules/places/GridSearchPlayground.old.tsx
+++ /dev/null
@@ -1,582 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import maplibregl from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { fetchGridSearches, fetchGridSearchesLocal, fetchGridSearch, fetchGridSearchLocal, fetchGridSearchPolygons, generateGridSearch, searchGadmRegions, GridEnumerateResult } from './client-searches';
-import { Layers, Loader2, Sun, Moon, Users, Mountain, Crosshair, MousePointerClick } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { useSearchParams } from 'react-router-dom';
-import { GadmPicker } from './gadm-picker';
-
-// ΓöÇΓöÇΓöÇ Map style constants ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
-
-const MAP_STYLE_OSM_3D = {
-    version: 8 as const,
-    sources: {
-        osm: {
-            type: 'raster',
-            tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
-            tileSize: 256,
-            attribution: '&copy; OpenStreetMap Contributors',
-            maxzoom: 19
-        },
-        terrainSource: {
-            type: 'raster-dem',
-            url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9',
-            tileSize: 256
-        },
-        hillshadeSource: {
-            type: 'raster-dem',
-            url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9',
-            tileSize: 256
-        }
-    },
-    layers: [
-        { id: 'osm', type: 'raster', source: 'osm' },
-        {
-            id: 'hills', type: 'hillshade', source: 'hillshadeSource',
-            layout: { visibility: 'visible' as const },
-            paint: { 'hillshade-shadow-color': '#473B24' }
-        }
-    ],
-    terrain: { source: 'terrainSource', exaggeration: 1 },
-    sky: {}
-};
-
-const MAP_STYLES = {
-    light: MAP_STYLE_OSM_3D,
-    dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-};
-
-// ΓöÇΓöÇΓöÇ Helpers ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
-
-function addMapSources(m: maplibregl.Map, bboxData: any, polyData: any) {
-    if (!m.getSource('grid-bboxes'))
-        m.addSource('grid-bboxes', { type: 'geojson', data: bboxData });
-    if (!m.getSource('grid-polygons'))
-        m.addSource('grid-polygons', { type: 'geojson', data: polyData });
-}
-
-function addMapLayers(m: maplibregl.Map, densityVisible: boolean) {
-    if (!m.getLayer('polygons-fill'))
-        m.addLayer({ id: 'polygons-fill', type: 'fill', source: 'grid-polygons', paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.3 } });
-    if (!m.getLayer('polygons-line'))
-        m.addLayer({ id: 'polygons-line', type: 'line', source: 'grid-polygons', paint: { 'line-color': '#2563eb', 'line-width': 2 } });
-    if (!m.getLayer('bboxes-fill'))
-        m.addLayer({ id: 'bboxes-fill', type: 'fill', source: 'grid-bboxes', paint: { 'fill-color': '#f59e0b', 'fill-opacity': 0 } });
-    if (!m.getLayer('bboxes-line'))
-        m.addLayer({ id: 'bboxes-line', type: 'line', source: 'grid-bboxes', paint: { 'line-color': '#d97706', 'line-width': 2, 'line-dasharray': [2, 2] } });
-    if (!m.getLayer('density-fill'))
-        m.addLayer({
-            id: 'density-fill', type: 'fill', source: 'grid-bboxes',
-            layout: { visibility: densityVisible ? 'visible' : 'none' },
-            paint: {
-                'fill-color': [
-                    'case',
-                    ['all', ['has', 'population'], ['has', 'areaSqKm'], ['>', ['get', 'areaSqKm'], 0]],
-                    ['interpolate', ['linear'], ['/', ['get', 'population'], ['get', 'areaSqKm']],
-                        0, '#f7fcf5', 50, '#c7e9c0', 200, '#74c476', 500, '#31a354', 1000, '#006d2c', 5000, '#00441b'],
-                    '#cccccc'
-                ],
-                'fill-opacity': 0.65
-            }
-        });
-}
-
-// ΓöÇΓöÇΓöÇ Component ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
-
-export default function GridSearchPlayground() {
-    const [searchParams, setSearchParams] = useSearchParams();
-    const mapContainer = useRef<HTMLDivElement>(null);
-    const mapWrapper = useRef<HTMLDivElement>(null);
-    const map = useRef<maplibregl.Map | null>(null);
-    const bboxesRef = useRef<any>({ type: 'FeatureCollection', features: [] });
-    const polygonsRef = useRef<any>({ type: 'FeatureCollection', features: [] });
-    const suggestionsWrapRef = useRef<HTMLDivElement>(null);
-    const [isMapLoaded, setIsMapLoaded] = useState(false);
-    const [showPolygons, setShowPolygons] = useState(() => searchParams.get('polygons') === '1');
-
-    // URL-aware state helpers
-    const updateParam = useCallback((key: string, value: string | null) => {
-        setSearchParams(prev => {
-            const next = new URLSearchParams(prev);
-            if (value === null || value === '') next.delete(key);
-            else next.set(key, value);
-            return next;
-        }, { replace: true });
-    }, [setSearchParams]);
-
-    // Theme / map style
-    const { theme, systemTheme } = useTheme();
-    const currentTheme = theme === 'system' ? systemTheme : theme;
-    const urlStyle = searchParams.get('style');
-    const [mapStyle, setMapStyleRaw] = useState<any>(() => {
-        if (urlStyle === 'dark') return MAP_STYLES.dark;
-        if (urlStyle === 'light') return MAP_STYLES.light;
-        return currentTheme === 'dark' ? MAP_STYLES.dark : MAP_STYLES.light;
-    });
-    const setMapStyle = useCallback((style: any) => {
-        setMapStyleRaw(style);
-        updateParam('style', style === MAP_STYLES.dark ? 'dark' : 'light');
-    }, [updateParam]);
-
-    useEffect(() => {
-        if (urlStyle) return;
-        setMapStyleRaw(currentTheme === 'dark' ? MAP_STYLES.dark : MAP_STYLES.light);
-    }, [currentTheme, urlStyle]);
-
-    useEffect(() => {
-        if (map.current && isMapLoaded) map.current.setStyle(mapStyle);
-    }, [mapStyle, isMapLoaded]);
-
-    // Core state
-    const [searches, setSearches] = useState<any[]>([]);
-    const [selectedSearch, setSelectedSearchRaw] = useState<string | null>(() => searchParams.get('search'));
-    const [searchData, setSearchData] = useState<GridEnumerateResult | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [loadingPolygons, setLoadingPolygons] = useState(false);
-
-    const setSelectedSearch = useCallback((val: string | null) => {
-        setSelectedSearchRaw(val);
-        updateParam('search', val);
-        setShowPolygons(false);
-        updateParam('polygons', null);
-    }, [updateParam]);
-
-    // Generate form state
-    const [genRegion, setGenRegion] = useState('');
-    const [genGid, setGenGid] = useState('');
-    const [searchQuery, setSearchQuery] = useState('');
-    const [suggestions, setSuggestions] = useState<any[]>([]);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [loadingSuggestions, setLoadingSuggestions] = useState(false);
-    const [genLevel, setGenLevel] = useState('cities');
-    const [generating, setGenerating] = useState(false);
-    const [genError, setGenError] = useState('');
-    const [includeStats, setIncludeStatsRaw] = useState(() => searchParams.get('stats') !== '0');
-    const [showDensity, setShowDensityRaw] = useState(() => searchParams.get('density') === '1');
-
-    const setIncludeStats = useCallback((val: boolean) => {
-        setIncludeStatsRaw(val);
-        updateParam('stats', val ? null : '0');
-    }, [updateParam]);
-
-    const setShowDensity = useCallback((val: boolean) => {
-        setShowDensityRaw(val);
-        updateParam('density', val ? '1' : null);
-    }, [updateParam]);
-
-    // GADM Picker
-    const [gadmPickerActive, setGadmPickerActiveRaw] = useState(() => searchParams.get('picker') === '1');
-    const [pickerRegions, setPickerRegions] = useState<any[]>([]);
-
-    const setGadmPickerActive = useCallback((val: boolean) => {
-        setGadmPickerActiveRaw(val);
-        updateParam('picker', val ? '1' : null);
-    }, [updateParam]);
-
-    // Density layer toggle
-    useEffect(() => {
-        if (!map.current || !isMapLoaded) return;
-        const m = map.current;
-        if (m.getLayer('density-fill'))
-            m.setLayoutProperty('density-fill', 'visibility', showDensity ? 'visible' : 'none');
-        if (m.getLayer('polygons-fill'))
-            m.setLayoutProperty('polygons-fill', 'visibility', showDensity ? 'none' : 'visible');
-        if (m.getLayer('polygons-line'))
-            m.setLayoutProperty('polygons-line', 'visibility', showDensity ? 'none' : 'visible');
-    }, [showDensity, isMapLoaded]);
-
-    // Click-outside handler for suggestions dropdown
-    useEffect(() => {
-        const handler = (e: MouseEvent) => {
-            if (suggestionsWrapRef.current && !suggestionsWrapRef.current.contains(e.target as Node))
-                setShowSuggestions(false);
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, []);
-
-    // Map initialization
-    useEffect(() => {
-        fetchGridSearchesLocal()
-            .then((list) => {
-                const parsed = list.map((id: string) => {
-                    let regionName = id;
-                    let level = 'unknown';
-                    let query = '';
-
-                    const cleanId = id.replace(/^grid-state-/, '');
-                    const levels = ['states', 'provinces', 'districts', 'cities', 'towns', 'villages'];
-                    
-                    if (cleanId.startsWith('search-') || cleanId.startsWith('email-')) {
-                        const parts = cleanId.split('-');
-                        const levelIdx = parts.findIndex(p => levels.includes(p));
-                        if (levelIdx !== -1) {
-                            level = parts[levelIdx];
-                            regionName = parts.slice(1, levelIdx).join('-');
-                            query = parts.slice(levelIdx + 1).join('-');
-                        } else {
-                            regionName = parts.slice(1).join('-');
-                        }
-                        
-                        regionName = regionName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
-                        if (query) {
-                            query = query.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
-                        }
-                    }
-
-                    return { id, regionName, level, query };
-                });
-                setSearches(parsed);
-            })
-            .catch(console.error);
-
-        if (!mapContainer.current) return;
-
-        const m = new maplibregl.Map({
-            container: mapContainer.current,
-            style: mapStyle,
-            center: [10.45, 51.16],
-            zoom: 4,
-            maxPitch: 85,
-        });
-        map.current = m;
-
-        m.addControl(new maplibregl.NavigationControl({ visualizePitch: true, showZoom: true, showCompass: true }), 'top-right');
-        m.addControl(new maplibregl.FullscreenControl({ container: mapWrapper.current || undefined }), 'top-right');
-        m.addControl(new maplibregl.TerrainControl({ source: 'terrainSource', exaggeration: 1 }), 'top-right');
-
-        m.on('load', () => {
-            setIsMapLoaded(true);
-            addMapSources(m, { type: 'FeatureCollection', features: [] }, { type: 'FeatureCollection', features: [] });
-            addMapLayers(m, false);
-            setTimeout(() => m.resize(), 100);
-        });
-
-        m.on('style.load', () => {
-            // Re-inject terrain for styles that don't include it (e.g. dark URL)
-            if (!m.getSource('terrainSource')) {
-                const terrainDef = { type: 'raster-dem' as const, url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9', tileSize: 256 };
-                m.addSource('terrainSource', terrainDef);
-                if (!m.getSource('hillshadeSource')) m.addSource('hillshadeSource', terrainDef);
-            }
-            addMapSources(m, bboxesRef.current, polygonsRef.current);
-            addMapLayers(m, showDensity);
-        });
-
-        return () => { m.remove(); map.current = null; };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    // Load search data when selected
-    useEffect(() => {
-        if (!selectedSearch) return;
-        setLoading(true);
-        fetchGridSearchLocal(selectedSearch).then(data => {
-            setSearchData(data);
-            setLoading(false);
-            if (!map.current) return;
-
-            const features = data.areas.map(area => {
-                if (!area.bbox) return null;
-                const [minX, minY, maxX, maxY] = area.bbox;
-                return {
-                    type: 'Feature',
-                    properties: {
-                        name: area.name, gid: area.gid, level: area.level,
-                        population: area.stats?.totalPopulation ?? 0,
-                        placeCount: area.stats?.placeCount ?? 0,
-                        avgElevation: area.stats?.avgElevation ?? 0,
-                        areaSqKm: area.areaSqKm ?? 0,
-                    },
-                    geometry: { type: 'Polygon', coordinates: [[[minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY], [minX, minY]]] }
-                };
-            }).filter(Boolean);
-
-            const featureCollection = { type: 'FeatureCollection', features };
-            bboxesRef.current = featureCollection;
-            (map.current.getSource('grid-bboxes') as maplibregl.GeoJSONSource)?.setData(featureCollection as any);
-
-            polygonsRef.current = { type: 'FeatureCollection', features: [] };
-            (map.current.getSource('grid-polygons') as maplibregl.GeoJSONSource)?.setData(polygonsRef.current as any);
-
-            if (data.region.bbox) {
-                const [minX, minY, maxX, maxY] = data.region.bbox;
-                map.current.fitBounds([[minX, minY], [maxX, maxY]], { padding: 50 });
-            } else if (features.length > 0) {
-                const bounds = new maplibregl.LngLatBounds();
-                features.forEach(f => {
-                    // @ts-ignore
-                    bounds.extend(f?.geometry.coordinates[0][0]);
-                    // @ts-ignore
-                    bounds.extend(f?.geometry.coordinates[0][2]);
-                });
-                map.current.fitBounds(bounds, { padding: 50 });
-            }
-        }).catch(err => { console.error(err); setLoading(false); });
-    }, [selectedSearch]);
-
-    // Debounced region search
-    useEffect(() => {
-        if (genGid) return;
-        if (!searchQuery || searchQuery.length < 2) { setSuggestions([]); return; }
-        const id = setTimeout(async () => {
-            setLoadingSuggestions(true);
-            try {
-                const results = await searchGadmRegions(searchQuery);
-                setSuggestions(Array.isArray(results) ? results : (results as any).results || []);
-                setShowSuggestions(true);
-            } catch { setSuggestions([]); }
-            setLoadingSuggestions(false);
-        }, 400);
-        return () => clearTimeout(id);
-    }, [searchQuery, genGid]);
-
-    const handleFetchPolygons = async () => {
-        if (!searchData?.areas) return;
-        setLoadingPolygons(true);
-        try {
-            const fc: any = await fetchGridSearchPolygons(searchData.region?.gid, searchData.areas[0]?.level);
-            polygonsRef.current = fc;
-            (map.current?.getSource('grid-polygons') as maplibregl.GeoJSONSource)?.setData(fc);
-            (map.current?.getSource('grid-bboxes') as maplibregl.GeoJSONSource)?.setData({ type: 'FeatureCollection', features: [] } as any);
-            bboxesRef.current = { type: 'FeatureCollection', features: [] };
-            setShowPolygons(true);
-            updateParam('polygons', '1');
-        } catch (e) { console.error(e); }
-        setLoadingPolygons(false);
-    };
-
-    // Auto-fetch polygons on mount when URL has ?polygons=1
-    useEffect(() => {
-        if (showPolygons && searchData && !loadingPolygons) handleFetchPolygons();
-    }, [searchData]); // intentionally only on data load
-
-    const handleGenerate = async () => {
-        setGenerating(true);
-        setGenError('');
-        try {
-            const res = await generateGridSearch({ region: genRegion, level: genLevel, gid: genGid || undefined, includeStats });
-            if (res.success) {
-                const searchName = res.jsonFile.replace('.json', '');
-                setSearches(prev => {
-                    if (prev.find(s => s.id === searchName)) return prev;
-                    return [...prev, { id: searchName, regionName: genRegion, level: genLevel, query: '', generatedAt: new Date().toISOString() }];
-                });
-                setSelectedSearch(searchName);
-                setGenRegion(''); setGenGid(''); setSearchQuery(''); setSuggestions([]); setShowSuggestions(false);
-            }
-        } catch (err: any) {
-            setGenError(err.message || 'Failed to generate');
-        } finally {
-            setGenerating(false);
-        }
-    };
-
-    // ΓöÇΓöÇΓöÇ Derived display values ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
-
-    const areasWithStats = searchData?.areas.filter(a => a.stats) ?? [];
-    const totalPop = areasWithStats.reduce((sum, a) => sum + (a.stats?.totalPopulation ?? 0), 0);
-    const avgElev = areasWithStats.length > 0
-        ? Math.round(areasWithStats.reduce((sum, a) => sum + (a.stats?.avgElevation ?? 0), 0) / areasWithStats.length)
-        : null;
-    const hasStats = areasWithStats.length > 0;
-
-    // ΓöÇΓöÇΓöÇ Render ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ
-
-    return (
-        <div ref={mapWrapper} className="flex h-[calc(100vh-64px)] [&:fullscreen]:h-screen w-full bg-white dark:bg-gray-900">
-
-            {/* ΓöÇΓöÇ Sidebar ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */}
-            <div className="w-80 border-r bg-white dark:bg-gray-900 p-4 flex flex-col gap-4 overflow-y-auto z-10 flex-shrink-0">
-                <h2 className="text-xl font-bold font-mono text-gray-800 dark:text-gray-100">GridSearch Playground</h2>
-
-                {/* Generate card */}
-                <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md border dark:border-gray-700 space-y-3">
-                    <h3 className="font-semibold text-sm text-gray-800 dark:text-gray-200">Generate New Search</h3>
-                    <div className="relative" ref={suggestionsWrapRef}>
-                        <input
-                            type="text"
-                            placeholder="Type a region (e.g. Spain, Barcelona)"
-                            className="w-full border rounded-md p-2 text-sm dark:bg-gray-900 dark:border-gray-600 dark:text-white pr-8"
-                            value={searchQuery}
-                            onChange={e => { setSearchQuery(e.target.value); setGenRegion(e.target.value); setGenGid(''); setShowSuggestions(true); }}
-                            onFocus={() => setShowSuggestions(true)}
-                            onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
-                        />
-                        {loadingSuggestions && (
-                            <div className="absolute right-2 top-2.5"><Loader2 className="w-4 h-4 animate-spin text-gray-400" /></div>
-                        )}
-                        {showSuggestions && suggestions.length > 0 && (
-                            <ul className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-auto">
-                                {suggestions.map((s, i) => {
-                                    const nameKey = Object.keys(s).find(k => k.startsWith('NAME_'));
-                                    const gidKey = Object.keys(s).find(k => k.startsWith('GID_'));
-                                    const name = nameKey ? s[nameKey] : '';
-                                    const gid = gidKey ? s[gidKey] : '';
-                                    const displayName = s.hierarchy || s.name || name || gid;
-                                    const levelLabel = gidKey ? `Level ${gidKey.replace('GID_', '')}` : '';
-                                    return (
-                                        <li
-                                            key={i}
-                                            className="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200 border-b dark:border-gray-700 last:border-0"
-                                            onMouseDown={e => {
-                                                e.preventDefault();
-                                                setSearchQuery(displayName); setGenRegion(displayName); setGenGid(gid);
-                                                setShowSuggestions(false); setSuggestions([]);
-                                            }}
-                                        >
-                                            <div className="font-medium">{displayName}</div>
-                                            {levelLabel && <div className="text-xs text-gray-500 dark:text-gray-400">{levelLabel} {gid && `(${gid})`}</div>}
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        )}
-                    </div>
-
-                    <select
-                        className="w-full border rounded-md p-2 text-sm dark:bg-gray-900 dark:border-gray-600 dark:text-white"
-                        value={genLevel}
-                        onChange={e => setGenLevel(e.target.value)}
-                    >
-                        <option value="states">States (Level 1)</option>
-                        <option value="provinces">Provinces (Level 2)</option>
-                        <option value="districts">Districts (Level 3)</option>
-                        <option value="cities">Cities / Communes (Level 4)</option>
-                        <option value="towns">Towns (Level 5)</option>
-                        <option value="villages">Villages (Level 6)</option>
-                    </select>
-
-                    {genError && (
-                        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded p-3 text-red-600 dark:text-red-400 text-sm">
-                            <p className="font-semibold mb-1">Generation Failed</p>
-                            <p className="whitespace-pre-wrap">{genError.replace('Failed to generate search: Error: ', '')}</p>
-                        </div>
-                    )}
-
-                    <button
-                        onClick={handleGenerate}
-                        disabled={generating || !genRegion.trim()}
-                        className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md flex items-center justify-center transition-colors disabled:opacity-50 text-sm"
-                    >
-                        {generating ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
-                        {generating ? 'Mapping Area...' : 'Generate Areas'}
-                    </button>
-
-                    <label className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
-                        <input
-                            type="checkbox"
-                            checked={includeStats}
-                            onChange={e => setIncludeStats(e.target.checked)}
-                            className="rounded border-gray-300 dark:border-gray-600"
-                        />
-                        Include population &amp; elevation stats
-                    </label>
-                </div>
-
-                <hr className="dark:border-gray-700" />
-
-                {/* Search selector */}
-                <div className="space-y-2">
-                    <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Select Generated Search</label>
-                    <select
-                        className="w-full border rounded-md p-2 text-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100"
-                        value={selectedSearch || ''}
-                        onChange={e => setSelectedSearch(e.target.value)}
-                    >
-                        <option value="">-- Choose Search --</option>
-                        {searches.map(s => <option key={s.id} value={s.id}>{s.regionName} ({s.level || 'unknown'}) {s.query ? `- ${s.query}` : ''}</option>)}
-                    </select>
-                </div>
-
-                {loading && <div className="flex items-center text-sm text-gray-500"><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Loading grid...</div>}
-
-                {/* Search info + polygon button */}
-                {searchData && !loading && (
-                    <div className="mt-4 space-y-4">
-                        <div className="bg-gray-50 dark:bg-gray-800 p-3 rounded-md border dark:border-gray-700 text-sm space-y-1">
-                            <p className="dark:text-gray-200"><strong>Region:</strong> {searchData.region.name} (Level {searchData.region.level})</p>
-                            <p className="dark:text-gray-200"><strong>Total Cells:</strong> {searchData.areas.length}</p>
-                            <p className="dark:text-gray-200"><strong>Generated:</strong> {new Date(searchData.generatedAt).toLocaleString()}</p>
-                            {hasStats && (
-                                <>
-                                    <hr className="dark:border-gray-600 my-2" />
-                                    <p className="dark:text-gray-200 flex items-center gap-1.5">
-                                        <Users className="w-3.5 h-3.5 text-blue-500" />
-                                        <strong>Population:</strong> {totalPop.toLocaleString()}
-                                    </p>
-                                    {avgElev !== null && (
-                                        <p className="dark:text-gray-200 flex items-center gap-1.5">
-                                            <strong>Avg Elevation:</strong> {avgElev}m
-                                        </p>
-                                    )}
-                                </>
-                            )}
-                        </div>
-                        <button
-                            onClick={handleFetchPolygons}
-                            disabled={loadingPolygons}
-                            className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md flex items-center justify-center transition-colors disabled:opacity-50"
-                        >
-                            {loadingPolygons ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Layers className="w-4 h-4 mr-2" />}
-                            Fetch Exact Polygons
-                        </button>
-                    </div>
-                )}
-
-                <hr className="dark:border-gray-700" />
-                
-                {/* GADM Picker panel */}
-                {gadmPickerActive && (
-                    <GadmPicker 
-                        map={isMapLoaded ? map.current : null}
-                        active={gadmPickerActive}
-                        onClose={() => setGadmPickerActive(false)}
-                        onSelectionChange={(r) => setPickerRegions(r)} 
-                    />
-                )}
-
-            </div>
-
-            {/* ΓöÇΓöÇ Map ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇ */}
-            <div className="flex-1 relative min-h-0 w-full">
-                <div ref={mapContainer} className="w-full h-full" />
-
-                {/* Toolbar */}
-                <div className="absolute top-4 left-4 z-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-1">
-                    <div className="flex flex-col gap-1">
-                        <button
-                            onClick={() => setMapStyle(MAP_STYLES.light)}
-                            className={`p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${mapStyle === MAP_STYLES.light ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600' : 'text-gray-600 dark:text-gray-400'}`}
-                            title="Light Mode"
-                        >
-                            <Sun className="w-5 h-5" />
-                        </button>
-                        <button
-                            onClick={() => setMapStyle(MAP_STYLES.dark)}
-                            className={`p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${mapStyle === MAP_STYLES.dark ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600' : 'text-gray-600 dark:text-gray-400'}`}
-                            title="Dark Mode"
-                        >
-                            <Moon className="w-5 h-5" />
-                        </button>
-                        <div className="w-full border-t border-gray-200 dark:border-gray-600 my-0.5" />
-                        <button
-                            onClick={() => setShowDensity(!showDensity)}
-                            className={`p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${showDensity ? 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600' : 'text-gray-600 dark:text-gray-400'}`}
-                            title="Population Density"
-                        >
-                            <Users className="w-5 h-5" />
-                        </button>
-                        <button
-                            onClick={() => setGadmPickerActive(!gadmPickerActive)}
-                            className={`p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${gadmPickerActive ? 'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-600' : 'text-gray-600 dark:text-gray-400'}`}
-                            title="GADM Area Selector"
-                        >
-                            <MousePointerClick className="w-5 h-5" />
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/packages/ui/src/modules/places/GridSearchPlayground.tsx b/packages/ui/src/modules/places/GridSearchPlayground.tsx
deleted file mode 100644
index 015f1834..00000000
--- a/packages/ui/src/modules/places/GridSearchPlayground.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { GadmPicker } from './gadm-picker';
-import { GridSearchMap } from './components/GridSearchMap';
-import { GenerateGridForm } from './components/GenerateGridForm';
-import { GridSearchSelector } from './components/GridSearchSelector';
-import { GridSearchSimulator } from './gridsearch/simulator/GridSearchSimulator';
-import { MapPosterOverlay } from './components/MapPosterOverlay';
-import { useGridSearchState } from './hooks/useGridSearchState';
-import CollapsibleSection from '@/components/CollapsibleSection';
-import { useAppStore } from '@/store/appStore';
-
-export default function GridSearchPlayground() {
-    const state = useGridSearchState();
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    
-    const { setShowGlobalFooter } = useAppStore();
-
-    useEffect(() => {
-        setShowGlobalFooter(false);
-        return () => setShowGlobalFooter(true);
-    }, [setShowGlobalFooter]);
-
-    useEffect(() => {
-        const handleFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    }, []);
-
-    const toggleFullscreen = useCallback(() => {
-        if (!document.fullscreenElement) {
-            containerRef.current?.requestFullscreen().catch(err => {
-                console.error(`Error attempting to enable full-screen mode: ${err.message}`);
-            });
-        } else {
-            document.exitFullscreen();
-        }
-    }, []);
-
-    return (
-        <div ref={containerRef} className="flex h-[calc(100svh-64px)] [&:fullscreen]:h-svh w-full bg-white dark:bg-gray-900 relative">
-            {/* ── Sidebar ────────────────────────────────────────────────── */}
-            {!state.posterMode && (
-                <div className="w-96 flex-shrink-0 bg-white dark:bg-gray-900 border-r dark:border-gray-800 p-4 pb-12 flex flex-col gap-6 overflow-y-auto z-10">
-                    <h2 className="text-xl font-bold font-mono text-gray-800 dark:text-gray-100">GridSearch Playground</h2>
-
-                    <CollapsibleSection title="Generate New Search" initiallyOpen={false} minimal>
-                        <GenerateGridForm
-                            includeStats={state.includeStats}
-                            onToggleStats={state.setIncludeStats}
-                            onGenerated={state.handleSearchGenerated}
-                        />
-                    </CollapsibleSection>
-
-                    <hr className="dark:border-gray-700" />
-
-                    <CollapsibleSection title="Select Generated Search" initiallyOpen={false} minimal>
-                        <GridSearchSelector
-                            searches={state.searches}
-                            selectedSearch={state.selectedSearch}
-                            searchData={state.searchData}
-                            loading={state.loading}
-                            loadingPolygons={state.loadingPolygons}
-                            onSelectSearch={state.setSelectedSearch}
-                            onFetchPolygons={state.handleFetchPolygons}
-                        />
-                    </CollapsibleSection>
-
-                    <CollapsibleSection
-                        title="GADM Area Selector"
-                        initiallyOpen={state.gadmPickerActive}
-                        onStateChange={state.setGadmPickerActive}
-                        minimal
-                        keepMounted
-                    >
-                        <div className="pt-2">
-                            <GadmPicker
-                                map={state.mapInstance}
-                                active={state.gadmPickerActive}
-                                onClose={() => state.setGadmPickerActive(false)}
-                                onSelectionChange={(r, polygons) => {
-                                    state.setPickerRegions(r);
-                                    state.setPickerPolygons(polygons);
-                                }}
-                            />
-                        </div>
-                    </CollapsibleSection>
-
-                    {state.pickerRegions && state.pickerRegions.length > 0 && (
-                        <CollapsibleSection title="GridSearch Simulator" initiallyOpen={false} minimal keepMounted>
-                            <GridSearchSimulator
-                                pickerRegions={state.pickerRegions}
-                                pickerPolygons={state.pickerPolygons}
-                                setSimulatorData={state.setSimulatorData}
-                                setSimulatorPath={state.setSimulatorPath}
-                                setSimulatorScanner={state.setSimulatorScanner}
-                                onFilterCell={(cell) => {
-                                    // Example external filter implementation hook!
-                                    return true;
-                                }}
-                            />
-                        </CollapsibleSection>
-                    )}
-                    <div className="min-h-12 flex-shrink-0" />
-                </div>
-            )}
-
-            {/* ── Map ────────────────────────────────────────────────────── */}
-            <div id="poster-capture-area" className="relative flex-1 flex flex-col min-w-0 min-h-0">
-                <GridSearchMap
-                    bboxesFeatureCollection={state.bboxesData}
-                    polygonsFeatureCollection={state.polygonsData}
-                    pickerPolygons={state.pickerPolygons}
-                    targetBounds={state.targetBounds}
-                    urlStyle={state.urlStyle}
-                    posterMode={state.posterMode}
-                    posterTheme={state.posterTheme}
-                    showDensity={state.showDensity}
-                    showCenters={state.showCenters}
-                    gadmPickerActive={state.gadmPickerActive}
-                    simulatorData={state.simulatorData}
-                    simulatorPath={state.simulatorPath}
-                    simulatorScanner={state.simulatorScanner}
-                    onStyleChange={state.setUrlStyle}
-                    onPosterMode={state.setPosterMode}
-                    onToggleDensity={state.setShowDensity}
-                    onToggleCenters={state.setShowCenters}
-                    onTogglePicker={state.setGadmPickerActive}
-                    onMapReady={state.setMapInstance}
-                    isFullscreen={isFullscreen}
-                    onFullscreenToggle={toggleFullscreen}
-                    overlayBottomLeft={
-                        !state.posterMode ? (() => {
-                            const areasWithStats = state.searchData?.areas.filter((a: any) => a.stats) || [];
-                            const regionsWithStats = state.pickerRegions?.filter((r: any) => r.stats) || [];
-
-                            let totalPop = 0;
-                            let totalArea = 0;
-                            let label = "Total Selection";
-
-                            if (areasWithStats.length > 0) {
-                                label = "Grid Statistics";
-                                totalPop = areasWithStats.reduce((sum: number, a: any) => sum + (a.stats?.totalPopulation ?? 0), 0);
-                                totalArea = areasWithStats.reduce((sum: number, a: any) => sum + (a.stats?.areaSqKm ?? 0), 0);
-                            } else if (regionsWithStats.length > 0) {
-                                label = "Region Statistics";
-                                totalPop = regionsWithStats.reduce((sum: number, a: any) => sum + (a.stats?.population ?? 0), 0);
-                                totalArea = regionsWithStats.reduce((sum: number, a: any) => sum + (a.stats?.areaSqkm ?? 0), 0);
-                            }
-
-                            if (totalPop === 0 && totalArea === 0) return null;
-
-                            return (
-                                <div className="bg-white/95 dark:bg-gray-800/95 backdrop-blur shadow-lg border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-sm min-w-[200px] mb-4 ml-4">
-                                    <h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-2 border-b border-gray-100 dark:border-gray-700 pb-1">{label}</h4>
-                                    <div className="space-y-1 text-gray-600 dark:text-gray-400">
-                                        <div className="flex justify-between gap-4">
-                                            <span>Population:</span>
-                                            <span className="font-medium text-gray-900 dark:text-white">{totalPop.toLocaleString()}</span>
-                                        </div>
-                                        <div className="flex justify-between gap-4">
-                                            <span>Area:</span>
-                                            <span className="font-medium text-gray-900 dark:text-white">{totalArea.toLocaleString(undefined, { maximumFractionDigits: 1 })} km²</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            );
-                        })() : null
-                    }
-                />
-                
-                {state.posterMode && (
-                    <MapPosterOverlay
-                        map={state.mapInstance}
-                        pickerRegions={state.pickerRegions}
-                        pickerPolygons={state.pickerPolygons}
-                        posterTheme={state.posterTheme}
-                        setPosterTheme={state.setPosterTheme}
-                        onClose={() => state.setPosterMode(false)}
-                    />
-                )}
-            </div>
-        </div>
-    );
-}
diff --git a/packages/ui/src/modules/places/RJSFTemplates.tsx b/packages/ui/src/modules/places/RJSFTemplates.tsx
deleted file mode 100644
index 6dc3daea..00000000
--- a/packages/ui/src/modules/places/RJSFTemplates.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import React from 'react';
-import type { WidgetProps, RegistryWidgetsType } from '@rjsf/utils';
-import CollapsibleSection from '../../components/CollapsibleSection';
-
-// Utility function to convert camelCase to Title Case
-const formatLabel = (str: string): string => {
-    // Split on capital letters and join with spaces
-    return str
-        .replace(/([A-Z])/g, ' $1') // Add space before capital letters
-        .replace(/^./, (char) => char.toUpperCase()) // Capitalize first letter
-        .trim();
-};
-
-// Custom TextWidget using Tailwind/shadcn styling
-const TextWidget = (props: WidgetProps) => {
-    const {
-        id,
-        required,
-        readonly,
-        disabled,
-        type,
-        label,
-        value,
-        onChange,
-        onBlur,
-        onFocus,
-        autofocus,
-        options,
-        schema,
-        rawErrors = [],
-    } = props;
-
-    const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) =>
-        onChange(value === '' ? options.emptyValue : value);
-    const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-        onBlur(id, value);
-    const _onFocus = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-        onFocus(id, value);
-
-    return (
-        <input
-            id={id}
-            type={type || 'text'}
-            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            readOnly={readonly}
-            disabled={disabled}
-            autoFocus={autofocus}
-            value={value || ''}
-            required={required}
-            onChange={_onChange}
-            onBlur={_onBlur}
-            onFocus={_onFocus}
-            aria-describedby={rawErrors.length > 0 ? `${id}-error` : undefined}
-        />
-    );
-};
-
-// Custom CheckboxWidget for toggle switches
-const CheckboxWidget = (props: WidgetProps) => {
-    const {
-        id,
-        value,
-        disabled,
-        readonly,
-        label,
-        onChange,
-        onBlur,
-        onFocus,
-        autofocus,
-        rawErrors = [],
-    } = props;
-
-    // Handle both boolean and string "true"/"false" values
-    const isChecked = value === true || value === 'true';
-
-    const _onChange = ({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) => {
-        // Emit boolean to satisfy z.boolean() schema
-        onChange(checked);
-    };
-
-    const _onBlur = () => onBlur(id, value);
-    const _onFocus = () => onFocus(id, value);
-
-    return (
-        <div className="flex items-center">
-            <button
-                type="button"
-                role="switch"
-                aria-checked={isChecked}
-                disabled={disabled || readonly}
-                onClick={() => {
-                    if (!disabled && !readonly) {
-                        onChange(!isChecked);
-                    }
-                }}
-                onBlur={_onBlur}
-                onFocus={_onFocus}
-                className={`
-                    relative inline-flex h-6 w-11 items-center rounded-full transition-colors
-                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-                    disabled:cursor-not-allowed disabled:opacity-50
-                    ${isChecked ? 'bg-indigo-600' : 'bg-gray-200'}
-                `}
-            >
-                <span
-                    className={`
-                        inline-block h-4 w-4 transform rounded-full  transition-transform
-                        ${isChecked ? 'translate-x-6' : 'translate-x-1'}
-                    `}
-                />
-            </button>
-            <input
-                type="checkbox"
-                id={id}
-                checked={isChecked}
-                onChange={_onChange}
-                disabled={disabled}
-                readOnly={readonly}
-                autoFocus={autofocus}
-                className="sr-only"
-                aria-describedby={rawErrors.length > 0 ? `${id}-error` : undefined}
-            />
-        </div>
-    );
-};
-
-// Custom FieldTemplate
-export const FieldTemplate = (props: any) => {
-    const {
-        id,
-        classNames,
-        label,
-        help,
-        required,
-        description,
-        errors,
-        children,
-        schema,
-    } = props;
-
-    // Format the label to be human-readable
-    const formattedLabel = label ? formatLabel(label) : label;
-
-    return (
-        <div className={`mb-4 ${classNames}`}>
-            {formattedLabel && (
-                <label
-                    htmlFor={id}
-                    className="block text-sm font-medium  mb-1"
-                >
-                    {formattedLabel}
-                    {required && <span className="text-red-500 ml-1">*</span>}
-                </label>
-            )}
-            {description && (
-                <div className="text-sm text-gray-500 mb-2">{description}</div>
-            )}
-            {children}
-            {errors && errors.length > 0 && (
-                <div id={`${id}-error`} className="mt-1 text-sm text-red-600">
-                    {errors}
-                </div>
-            )}
-            {help && <p className="mt-1 text-sm text-gray-500">{help}</p>}
-        </div>
-    );
-};
-
-// Custom ObjectFieldTemplate with Grouping Support
-export const ObjectFieldTemplate = (props: any) => {
-    const { properties, schema, uiSchema } = props;
-
-    // Group properties based on uiSchema
-    const groups: Record<string, any[]> = {};
-    const ungrouped: any[] = [];
-
-    properties.forEach((element: any) => {
-        // Skip if hidden widget
-        if (uiSchema?.[element.name]?.['ui:widget'] === 'hidden') {
-            return;
-        }
-
-        const groupName = uiSchema?.[element.name]?.['ui:group'];
-        if (groupName) {
-            if (!groups[groupName]) {
-                groups[groupName] = [];
-            }
-            groups[groupName].push(element);
-        } else {
-            ungrouped.push(element);
-        }
-    });
-
-    const hasGroups = Object.keys(groups).length > 0;
-
-    if (!hasGroups) {
-        return (
-            <div className="space-y-4">
-                {props.description && (
-                    <p className="text-sm text-gray-600 mb-4">{props.description}</p>
-                )}
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-                    {properties.map((element: any) => (
-                        <div key={element.name} className="w-full">
-                            {element.content}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="space-y-6">
-            {props.description && (
-                <p className="text-sm text-gray-600 mb-4">{props.description}</p>
-            )}
-
-            {/* Render Groups */}
-            {hasGroups && (
-                <div className="flex flex-col gap-4">
-                    {Object.entries(groups).map(([groupName, elements]) => (
-                        <CollapsibleSection
-                            key={groupName}
-                            title={groupName}
-                            initiallyOpen={true}
-                            minimal={true}
-                            storageKey={`competitor-search-group-${groupName}`}
-                            className=""
-                            headerClassName="flex justify-between items-center p-3 cursor-pointer hover:/50 transition-colors rounded-t-lg"
-                            contentClassName="p-3"
-                        >
-                            <div className="grid grid-cols-1 gap-4">
-                                {elements.map((element: any) => (
-                                    <div key={element.name} className="w-full">
-                                        {element.content}
-                                    </div>
-                                ))}
-                            </div>
-                        </CollapsibleSection>
-                    ))}
-                </div>
-            )}
-
-            {/* Render Ungrouped Fields */}
-            {ungrouped.length > 0 && (
-                <div className="grid grid-cols-1 gap-4">
-                    {ungrouped.map((element: any) => (
-                        <div key={element.name} className="w-full">
-                            {element.content}
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};
-
-// Custom widgets
-export const customWidgets: RegistryWidgetsType = {
-    TextWidget,
-    CheckboxWidget,
-};
-
-// Custom templates
-export const customTemplates = {
-    FieldTemplate,
-    ObjectFieldTemplate,
-};
diff --git a/packages/ui/src/modules/places/SearchSidebar.tsx b/packages/ui/src/modules/places/SearchSidebar.tsx
deleted file mode 100644
index 8ca6dd59..00000000
--- a/packages/ui/src/modules/places/SearchSidebar.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, { useState } from 'react';
-import { RefreshCw, Settings, Search, ChevronsLeft } from 'lucide-react';
-import { CompetitorRequestSchema, CompetitorUISchema } from '@polymech/shared';
-import Form from '@rjsf/core';
-import validator from '@rjsf/validator-ajv8';
-import { customWidgets, customTemplates } from './RJSFTemplates';
-import { CompetitorSettingsDialog } from './CompetitorSettingsDialog';
-import { z } from 'zod/v4';
-import { openapiSchemaToJsonSchema } from '@openapi-contrib/openapi-schema-to-json-schema';
-import { ScrollArea } from '../../components/ui/scroll-area';
-
-// Convert Zod schema to JSON Schema (moved from index.tsx)
-const zodJsonSchema = z.toJSONSchema(CompetitorRequestSchema, { target: "draft-7", io: "input" });
-const jsonSchemaRaw = openapiSchemaToJsonSchema(zodJsonSchema);
-const { $schema, ...jsonSchema } = jsonSchemaRaw as any;
-
-// UI Schema
-const uiSchema = {
-    ...CompetitorUISchema,
-    refresh: {
-        'ui:widget': 'CheckboxWidget',
-        'ui:group': 'Settings',
-    },
-    excludedTypes: {
-        'ui:widget': 'hidden',
-    },
-};
-
-export interface SearchFormValues {
-    query: string;
-    location: string;
-    refresh: boolean;
-    filterCity?: string;
-    filterCountry?: string;
-    filterContinent?: string;
-    filterType?: string;
-}
-
-interface SearchSidebarProps {
-    defaultValues: SearchFormValues;
-    loading: boolean;
-    streamProgress: { stage: string; percent: number } | null;
-    streamingMode: boolean;
-    onStreamingModeChange: (mode: boolean) => void;
-    onSearch: (values: SearchFormValues) => void;
-    onCancel: () => void;
-    onCollapse?: () => void; // New prop for collapsing
-    settings: any;
-    updateExcludedTypes: (types: string[]) => Promise<void>;
-    className?: string; // For adding custom classes
-}
-
-export const SearchSidebar: React.FC<SearchSidebarProps> = ({
-    defaultValues,
-    loading,
-    streamProgress,
-    streamingMode,
-    onStreamingModeChange,
-    onSearch,
-    onCancel,
-    onCollapse,
-    settings,
-    updateExcludedTypes,
-    className
-}) => {
-    const [settingsOpen, setSettingsOpen] = useState(false);
-
-    return (
-        <div className={`flex flex-col h-full  border-r border-gray-200 ${className}`}>
-            <div className="p-4 border-b border-gray-100 flex justify-between items-center ">
-                <h2 className="font-semibold text-gray-900 flex items-center">
-                    <Search className="w-4 h-4 mr-2 text-indigo-600" />
-                    Search
-                </h2>
-                <div className="flex items-center space-x-1">
-                    {/* Settings Trigger */}
-                    <button
-                        onClick={() => setSettingsOpen(true)}
-                        className="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
-                        title="Settings"
-                    >
-                        <Settings className="w-4 h-4" />
-                    </button>
-                    {/* Collapse Trigger */}
-                    {onCollapse && (
-                        <button
-                            onClick={onCollapse}
-                            className="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
-                            title="Collapse Sidebar"
-                        >
-                            <ChevronsLeft className="w-4 h-4" />
-                        </button>
-                    )}
-                    <CompetitorSettingsDialog
-                        open={settingsOpen}
-                        onOpenChange={setSettingsOpen}
-                        settings={settings}
-                        updateExcludedTypes={updateExcludedTypes}
-                    />
-                </div>
-            </div>
-
-            <ScrollArea className="flex-1 p-4">
-                {/* Streaming Toggle */}
-                <div className="mb-6 flex items-center justify-between  p-3 rounded-lg border border-gray-100">
-                    <span className="text-sm font-medium ">Streaming Mode</span>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                        <input
-                            type="checkbox"
-                            checked={streamingMode}
-                            onChange={(e) => onStreamingModeChange(e.target.checked)}
-                            className="sr-only peer"
-                        />
-                        <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after: after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
-                    </label>
-                </div>
-
-                {/* Stream Progress */}
-                {streamProgress && (
-                    <div className="mb-4 px-3 py-2 bg-blue-50 rounded-lg border border-blue-100">
-                        <div className="flex items-center justify-between mb-1">
-                            <span className="text-xs text-blue-700 font-medium">{streamProgress.stage.replace(/_/g, ' ')}</span>
-                            <span className="text-xs font-bold text-blue-700">{streamProgress.percent}%</span>
-                        </div>
-                        <div className="w-full bg-blue-200 rounded-full h-1.5 overflow-hidden">
-                            <div
-                                className="bg-blue-600 h-1.5 rounded-full transition-all duration-300"
-                                style={{ width: `${streamProgress.percent}%` }}
-                            />
-                        </div>
-                    </div>
-                )}
-
-                {/* Form */}
-                <div className="search-form-sidebar">
-                    <style>{`
-                        /* Custom overrides for sidebar form compactness */
-                        .search-form-sidebar .form-group { margin-bottom: 0.75rem; }
-                        .search-form-sidebar label { font-size: 0.875rem; color: #4b5563; }
-                        .search-form-sidebar input[type="text"] { 
-                            font-size: 0.875rem; 
-                            padding: 0.5rem; 
-                            height: 2.25rem;
-                            border-radius: 0.375rem;
-                        }
-                    `}</style>
-                    <Form
-                        schema={jsonSchema}
-                        uiSchema={uiSchema}
-                        validator={validator}
-                        widgets={customWidgets}
-                        templates={{
-                            ...customTemplates,
-                            // We might want to force a single column layout here if RJSFTemplates uses grid
-                        }}
-                        formData={defaultValues}
-                        onSubmit={(data) => {
-                            // Extract values and call handler
-                            const fd = data.formData;
-                            const values: SearchFormValues = {
-                                query: fd.query,
-                                location: fd.location,
-                                refresh: fd.refresh,
-                                filterCity: fd.filterCity,
-                                filterCountry: fd.filterCountry,
-                                filterContinent: fd.filterContinent,
-                                filterType: fd.filterType,
-                            };
-                            onSearch(values);
-                        }}
-                        disabled={loading}
-                    >
-                        <div className="flex flex-col gap-2 mt-6">
-                            <button
-                                type="submit"
-                                disabled={loading}
-                                className="w-full flex justify-center items-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                            >
-                                {loading ? (
-                                    <>
-                                        <RefreshCw className="animate-spin -ml-1 mr-2 h-4 w-4" />
-                                        Searching...
-                                    </>
-                                ) : (
-                                    'Search'
-                                )}
-                            </button>
-                            {loading && (
-                                <button
-                                    type="button"
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        onCancel();
-                                    }}
-                                    className="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg   hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                                >
-                                    Cancel
-                                </button>
-                            )}
-                        </div>
-                    </Form>
-                </div>
-            </ScrollArea>
-        </div>
-    );
-};
diff --git a/packages/ui/src/modules/places/client-gridsearch.ts b/packages/ui/src/modules/places/client-gridsearch.ts
index ee9cc136..6091d1c8 100644
--- a/packages/ui/src/modules/places/client-gridsearch.ts
+++ b/packages/ui/src/modules/places/client-gridsearch.ts
@@ -1,249 +1,345 @@
-import { supabase as defaultSupabase } from "@/integrations/supabase/client";
-import { fetchWithDeduplication } from "@/lib/db";
-
-const serverUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
-
-// --- Types ---
-export interface GridSearchSummary {
-    id: string;
-    status: string;
-    regionName: string;
-    level: string;
-    query: string;
-    generatedAt: string;
-}
-
-export interface RestoredRunState {
-    run: {
-        id: string;
-        runId: string;
-        status: string;
-        request: any;
-        result: any;
-        createdAt: string;
-        updatedAt: string;
-    };
-    areasSearched: number;
-    totalPlaces: number;
-    places: any[];
-}
-
-export interface GridSearchJobPayload {
-    region: string;
-    types: string[];
-    level?: string;
-    emails?: boolean;
-    names?: string[];
-    enrichers?: string[];
-    enrichBudgetMs?: number;
-    jobId?: string;
-    guided?: {
-        areas: {
-            gid: string;
-            name: string;
-            level: number;
-            raw: any;
-        }[];
-        settings?: any;
-    };
-}
-
-export interface GridSearchGeneratePayload {
-    region: string;
-    level: 'cities' | 'provinces' | 'states' | 'districts' | 'towns' | 'villages';
-    name?: string;
-}
-
-export interface GridSearchPolygonPayload {
-    regionGid?: string;
-    level?: number;
-    gids?: string[];
-}
-
-export interface GridSearchPreviewPayload {
-    query: string;
-    lat?: number;
-    lng?: number;
-}
-
-/** Helper function to get authorization headers */
-const getAuthHeaders = async (): Promise<HeadersInit> => {
-    const { data: sessionData } = await defaultSupabase.auth.getSession();
-    const token = sessionData?.session?.access_token;
-    const headers: HeadersInit = { 'Content-Type': 'application/json' };
-    if (token) headers['Authorization'] = `Bearer ${token}`;
-    return headers;
-};
-
-// --- API Methods ---
-
-export const fetchGridSearches = async (): Promise<GridSearchSummary[]> => {
-    const headers = await getAuthHeaders();
-    // Cache busting is probably needed more often if we delete, so skip deduplication wrapper
-    // or just fetch raw without caching
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch`, { headers });
-    if (!res.ok) throw new Error(`Failed to fetch grid searches: ${res.statusText}`);
-    const json = await res.json();
-    return json.data || [];
-};
-
-export const deleteGridSearch = async (id: string): Promise<boolean> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch/${id}`, {
-        method: 'DELETE',
-        headers
-    });
-    if (!res.ok) throw new Error(`Failed to delete grid search: ${res.statusText}`);
-    const json = await res.json();
-    return json.success;
-};
-
-export const fetchGridSearchById = async (id: string): Promise<any> => {
-    const cacheKey = `gridsearch-id-${id}`;
-    return fetchWithDeduplication(cacheKey, async () => {
-        const headers = await getAuthHeaders();
-        const res = await fetch(`${serverUrl}/api/locations/gridsearch/${id}`, { headers });
-        if (!res.ok) throw new Error(`Failed to fetch grid search result: ${res.statusText}`);
-        const json = await res.json();
-        return json.data;
-    }, 60000 * 5); // 5 minute cache
-};
-
-export const fetchGridSearchRunState = async (id: string): Promise<RestoredRunState> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch/${id}/state`, { headers });
-    if (!res.ok) throw new Error(`Failed to fetch run state: ${res.statusText}`);
-    const json = await res.json();
-    return json.data;
-};
-
-export const submitGridSearchJob = async (payload: GridSearchJobPayload): Promise<{ message: string; jobId: string }> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(payload)
-    });
-    if (!res.ok) throw new Error(`Failed to submit grid search job: ${res.statusText}`);
-    return await res.json();
-};
-
-export const fetchGridSearchPolygons = async (payload: GridSearchPolygonPayload): Promise<any> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch/polygons`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(payload)
-    });
-    if (!res.ok) throw new Error(`Failed to fetch grid search polygons: ${res.statusText}`);
-    return await res.json(); // Returns GeoJSON FeatureCollection
-};
-
-export const generateGridSearch = async (payload: GridSearchGeneratePayload): Promise<{ success: boolean; jsonFile: string; mdFile: string; areasCount: number }> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch/generate`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(payload)
-    });
-    if (!res.ok) throw new Error(`Failed to generate grid search: ${res.statusText}`);
-    return await res.json();
-};
-
-/** Get the streaming SSE URL for a GridSearch job */
-export const getGridSearchStreamUrl = (jobId: string, token?: string): string => {
-    const url = `${serverUrl}/api/locations/gridsearch/${jobId}/stream`;
-    return token ? `${url}?token=${token}` : url;
-};
-
-
-export const previewGridSearch = async (payload: GridSearchPreviewPayload): Promise<{ success: boolean; results: any[] }> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch/preview`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(payload)
-    });
-    if (!res.ok) throw new Error(`Failed to preview grid search: ${res.statusText}`);
-    return await res.json();
-};
-
-export const fetchCompetitorById = async (id: string): Promise<any> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/places/${id}`, { headers });
-    if (!res.ok) throw new Error(`Failed to fetch place details: ${res.statusText}`);
-    const json = await res.json();
-    return json.data;
-};
-
-export const fetchGridSearchExport = async (jobId: string, format: 'md' | 'json' = 'md'): Promise<string> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch/export?search=${jobId}&format=${format}`, {
-        method: 'GET',
-        headers
-    });
-    if (!res.ok) throw new Error(`Failed to load report: ${res.statusText}`);
-    return await res.text();
-};
-
-// --- Places GridSearch API Methods (New C++ backend) ---
-
-export const fetchPlacesGridSearches = async (): Promise<GridSearchSummary[]> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/places/gridsearch`, { headers });
-    if (!res.ok) throw new Error(`Failed to fetch places grid searches: ${res.statusText}`);
-    const json = await res.json();
-    return json.data || [];
-};
-
-export const fetchPlacesGridSearchById = async (id: string): Promise<any> => {
-    const cacheKey = `places-gridsearch-id-${id}`;
-    return fetchWithDeduplication(cacheKey, async () => {
-        const headers = await getAuthHeaders();
-        const res = await fetch(`${serverUrl}/api/places/gridsearch/${id}`, { headers });
-        if (!res.ok) throw new Error(`Failed to fetch places grid search result: ${res.statusText}`);
-        const json = await res.json();
-        return json.data;
-    }, 60000 * 5);
-};
-
-export const fetchPlacesGridSearchRunState = async (id: string): Promise<RestoredRunState> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/places/gridsearch/${id}/state`, { headers });
-    if (!res.ok) throw new Error(`Failed to fetch run state: ${res.statusText}`);
-    const json = await res.json();
-    return json.data;
-};
-
-export const submitPlacesGridSearchJob = async (payload: GridSearchJobPayload): Promise<{ message: string; jobId: string }> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/places/gridsearch`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(payload)
-    });
-    if (!res.ok) throw new Error(`Failed to submit places grid search job: ${res.statusText}`);
-    return await res.json();
-};
-
-export const deletePlacesGridSearch = async (id: string): Promise<boolean> => {
-    // We will just call the old locations route for deletion to keep it simple, 
-    // since both manipulate the exact same Postgres table (grid_search_runs).
-    return deleteGridSearch(id);
-};
-
-export const getPlacesGridSearchStreamUrl = (jobId: string, token?: string): string => {
-    // If not implemented in places, fallback to locations or just use the same URL format
-    const url = `${serverUrl}/api/places/gridsearch/${jobId}/stream`;
-    return token ? `${url}?token=${token}` : url;
-};
-
-export const fetchPlacesGridSearchExport = async (jobId: string, format: 'md' | 'json' = 'md'): Promise<string> => {
-    const headers = await getAuthHeaders();
-    const res = await fetch(`${serverUrl}/api/places/gridsearch/export?search=${jobId}&format=${format}`, {
-        method: 'GET',
-        headers
-    });
-    if (!res.ok) throw new Error(`Failed to load places grid search export: ${res.statusText}`);
-    return await res.text();
-};
+import { supabase as defaultSupabase } from "@/integrations/supabase/client";
+import { fetchWithDeduplication } from "@/lib/db";
+
+const serverUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
+
+// --- Types ---
+export interface GridSearchSummary {
+    id: string;
+    status: string;
+    regionName: string;
+    level: string;
+    query: string;
+    generatedAt: string;
+}
+
+export interface RestoredRunState {
+    run: {
+        id: string;
+        runId: string;
+        status: string;
+        request: any;
+        result: any;
+        createdAt: string;
+        updatedAt: string;
+    };
+    areasSearched: number;
+    totalPlaces: number;
+    places: any[];
+}
+
+export interface GridSearchJobPayload {
+    region: string;
+    types: string[];
+    level?: string;
+    emails?: boolean;
+    names?: string[];
+    enrichers?: string[];
+    enrichBudgetMs?: number;
+    jobId?: string;
+    guided?: {
+        areas: {
+            gid: string;
+            name: string;
+            level: number;
+            raw: any;
+        }[];
+        settings?: any;
+    };
+}
+
+export interface GridSearchGeneratePayload {
+    region: string;
+    level: 'cities' | 'provinces' | 'states' | 'districts' | 'towns' | 'villages';
+    name?: string;
+}
+
+export interface GridSearchPolygonPayload {
+    regionGid?: string;
+    level?: number;
+    gids?: string[];
+}
+
+export interface GridSearchPreviewPayload {
+    query: string;
+    lat?: number;
+    lng?: number;
+}
+
+/** Helper function to get authorization headers */
+const getAuthHeaders = async (): Promise<HeadersInit> => {
+    const { data: sessionData } = await defaultSupabase.auth.getSession();
+    const token = sessionData?.session?.access_token;
+    const headers: HeadersInit = { 'Content-Type': 'application/json' };
+    if (token) headers['Authorization'] = `Bearer ${token}`;
+    return headers;
+};
+
+/** Generic API Client handler */
+async function apiClient<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    const headers = await getAuthHeaders();
+    const response = await fetch(`${serverUrl}${endpoint}`, {
+        ...options,
+        headers: {
+            ...headers,
+            ...options.headers,
+        },
+    });
+
+    if (!response.ok) {
+        throw new Error(`API Error on ${endpoint}: ${response.statusText}`);
+    }
+
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+        return response.json();
+    }
+    return response.text() as unknown as T;
+}
+
+// --- API Methods ---
+export const fetchGridSearchPolygons = async (payload: GridSearchPolygonPayload): Promise<any> => {
+    return apiClient<any>('/api/locations/gridsearch/polygons', {
+        method: 'POST',
+        body: JSON.stringify(payload)
+    });
+};
+
+export const fetchCompetitorById = async (id: string): Promise<any> => {
+    const res = await apiClient<{ data: any }>(`/api/places/${id}`);
+    return res.data;
+};
+
+// --- Places GridSearch API Methods (New C++ backend) ---
+
+export const fetchPlacesGridSearches = async (): Promise<GridSearchSummary[]> => {
+    const res = await apiClient<{ data: GridSearchSummary[] }>('/api/places/gridsearch');
+    return res.data || [];
+};
+
+export const fetchPlacesGridSearchById = async (id: string): Promise<any> => {
+    const cacheKey = `places-gridsearch-id-${id}`;
+    return fetchWithDeduplication(cacheKey, async () => {
+        const res = await apiClient<{ data: any }>(`/api/places/gridsearch/${id}`);
+        return res.data;
+    }, 60000 * 5);
+};
+
+export const fetchPlacesGridSearchRunState = async (id: string): Promise<RestoredRunState> => {
+    const res = await apiClient<{ data: RestoredRunState }>(`/api/places/gridsearch/${id}/state`);
+    return res.data;
+};
+
+export const submitPlacesGridSearchJob = async (payload: GridSearchJobPayload): Promise<{ message: string; jobId: string }> => {
+    return apiClient<{ message: string; jobId: string }>('/api/places/gridsearch', {
+        method: 'POST',
+        body: JSON.stringify(payload)
+    });
+};
+
+export const retryPlacesGridSearchJob = async (id: string): Promise<any> => {
+    return apiClient<any>(`/api/places/gridsearch/${id}/retry`, {
+        method: 'POST'
+    });
+};
+
+export const deletePlacesGridSearch = async (id: string): Promise<boolean> => {
+    // Note: Assuming there is a similar endpoint for places deletion.
+    const res = await apiClient<{ success: boolean; data: any }>(`/api/places/gridsearch/${id}`, {
+        method: 'DELETE'
+    });
+    return res.success !== false;
+};
+
+export const getPlacesGridSearchStreamUrl = (jobId: string, token?: string): string => {
+    const url = `${serverUrl}/api/places/gridsearch/${jobId}/stream`;
+    return token ? `${url}?token=${token}` : url;
+};
+
+export const fetchPlacesGridSearchExport = async (jobId: string, format: 'md' | 'json' = 'md'): Promise<string> => {
+    return apiClient<string>(`/api/places/gridsearch/export?search=${jobId}&format=${format}`);
+};
+
+// --- From client-gridsearch.ts ---
+
+export interface GridArea {
+    name: string;
+    gid: string;
+    level: number;
+    center: { lat: number; lon: number };
+    bbox?: [number, number, number, number];
+    areaSqKm?: number;
+    maxDistanceKm?: number;
+    geometry?: any;
+    stats?: {
+        totalPopulation: number;
+        placeCount: number;
+        avgElevation: number;
+        minElevation: number;
+        maxElevation: number;
+    };
+}
+
+export interface GridSearchQuery {
+    region: string;
+    level: string | number;
+    includeArea?: boolean;
+    includeDistance?: boolean;
+    includeGeometry?: boolean;
+    includeStats?: boolean;
+    bigdataKey?: string;
+    [key: string]: any;
+}
+
+export interface GridEnumerateResult {
+    query: GridSearchQuery;
+    region: {
+        name: string;
+        gid: string;
+        level: number;
+        center?: { lat: number; lon: number };
+        bbox?: [number, number, number, number];
+        areaSqKm?: number;
+        maxDistanceKm?: number;
+        geometry?: any;
+    };
+    areas: GridArea[];
+    maxLevelAvailable: number;
+    generatedAt: string;
+}
+
+export interface GadmRow {
+    level: number;
+    queryName: string;
+    gadmName: string | null;
+    gid: string | null;
+    gadmRow: any | null;
+}
+
+export const fetchGridSearches = async (): Promise<string[]> => {
+    return fetchWithDeduplication('grid-searches-list', async () => {
+        const res = await apiClient<{ data: string[] }>('/api/locations/gridsearch');
+        return res.data;
+    }, 60000);
+};
+
+export const fetchGridSearchesLocal = async (): Promise<string[]> => {
+    return fetchWithDeduplication('grid-searches-local-list', async () => {
+        const res = await apiClient<{ data: string[] }>('/api/locations/gridsearch/local');
+        return res.data;
+    }, 60000);
+};
+
+export const fetchGridSearch = async (id: string): Promise<GridEnumerateResult> => {
+    return fetchWithDeduplication(`grid-search-${id}`, async () => {
+        const res = await apiClient<{ data: GridEnumerateResult }>(`/api/locations/gridsearch/${encodeURIComponent(id)}`);
+        return res.data;
+    });
+};
+
+export const fetchGridSearchLocal = async (id: string): Promise<GridEnumerateResult> => {
+    return fetchWithDeduplication(`grid-search-local-${id}`, async () => {
+        const res = await apiClient<{ data: GridEnumerateResult }>(`/api/locations/gridsearch/local/${encodeURIComponent(id)}`);
+        return res.data;
+    });
+};
+
+export const generateGridSearch = async (req: {
+    region: string;
+    level: string | number;
+    name?: string;
+    gid?: string;
+    includeStats?: boolean;
+    maxElevation?: number;
+    minDensity?: number;
+}): Promise<any> => {
+    return apiClient<any>('/api/locations/gridsearch/generate', {
+        method: 'POST',
+        body: JSON.stringify(req)
+    });
+};
+
+export const searchGadmRegions = async (query: string, contentLevel?: number): Promise<any[]> => {
+    if (!query) return [];
+    try {
+        let url = `/api/regions/search?query=${encodeURIComponent(query)}`;
+        if (contentLevel !== undefined) {
+            url += `&content_level=${contentLevel}`;
+        }
+        const res = await apiClient<any>(url);
+        return res.data || res.rows || [];
+    } catch (e) {
+        console.error('Error searching GADM regions:', e);
+        return [];
+    }
+};
+
+export const fetchRegionHierarchy = async (lat: number, lon: number): Promise<any[]> => {
+    const cacheKey = `gadm-hierarchy-${lat.toFixed(4)}-${lon.toFixed(4)}`;
+    return fetchWithDeduplication(cacheKey, async () => {
+        const res = await apiClient<{ data: any[] }>(`/api/regions/hierarchy?lat=${lat}&lon=${lon}`);
+        return res.data || [];
+    });
+};
+
+export const fetchRegionBoundary = async (
+    gid: string,
+    name: string,
+    targetLevel: number,
+    enrich?: boolean
+): Promise<any> => {
+    const cacheKey = `gadm-boundary-${gid}-L${targetLevel}-E${enrich}`;
+    return fetchWithDeduplication(cacheKey, async () => {
+        let url = `/api/regions/boundary/${encodeURIComponent(gid)}?name=${encodeURIComponent(name)}&targetLevel=${targetLevel}`;
+        if (enrich) url += '&enrich=true';
+        return apiClient<any>(url);
+    });
+};
+
+export async function resolveGadmHierarchy(lat: number, lng: number): Promise<GadmRow[]> {
+    const rows: GadmRow[] = [];
+    try {
+        const foundRows = await fetchRegionHierarchy(lat, lng);
+        for (let level = 0; level <= 5; level++) {
+            const match = foundRows.find((r: any) => r.level === level);
+            if (match) {
+                rows.push({ level, queryName: match.gadmName || '', gadmName: match.gadmName, gid: match.gid, gadmRow: match });
+            } else {
+                rows.push({ level, queryName: '', gadmName: null, gid: null, gadmRow: null });
+            }
+        }
+    } catch (e) {
+        for (let level = 0; level <= 5; level++) rows.push({ level, queryName: '', gadmName: null, gid: null, gadmRow: null });
+    }
+    return rows;
+}
+
+export const fetchRegionChildren = async (adminGid: string, targetLevel: number): Promise<any[]> => {
+    const cacheKey = `gadm-children-${adminGid}-L${targetLevel}`;
+    return fetchWithDeduplication(cacheKey, async () => {
+        try {
+            const url = `/api/regions/names?admin=${encodeURIComponent(adminGid)}&content_level=${targetLevel}&resolveNames=true`;
+            const res = await apiClient<any>(url);
+            return res.data || res.rows || [];
+        } catch (e) {
+            console.error('Failed to fetch region children', e);
+            return [];
+        }
+    });
+};
+
+export const fetchReverseGeocode = async (lat: number, lon: number): Promise<any> => {
+    const cacheKey = `reverse-geocode-${lat.toFixed(4)}-${lon.toFixed(4)}`;
+    return fetchWithDeduplication(cacheKey, async () => {
+        const res = await apiClient<{ data: any }>(`/api/regions/reverse?lat=${lat}&lon=${lon}`);
+        return res.data;
+    });
+};
+
+export const fetchIpLocation = async (): Promise<any> => {
+    return fetchWithDeduplication('ip-api-location', async () => {
+        const res = await fetch('http://ip-api.com/json/');
+        if (!res.ok) throw new Error(`Failed to fetch IP location: ${res.statusText}`);
+        return await res.json();
+    }, 600000); // 10 minutes cache
+};
diff --git a/packages/ui/src/modules/places/client-searches.ts b/packages/ui/src/modules/places/client-searches.ts
deleted file mode 100644
index 17f28c43..00000000
--- a/packages/ui/src/modules/places/client-searches.ts
+++ /dev/null
@@ -1,310 +0,0 @@
-import { supabase as defaultSupabase } from "@/integrations/supabase/client";
-import { fetchWithDeduplication } from "@/lib/db";
-
-// --- Grid Searches Types ---
-
-export interface GridArea {
-    name: string;
-    gid: string;
-    level: number;
-    center: { lat: number; lon: number };
-    bbox?: [number, number, number, number];
-    areaSqKm?: number;
-    maxDistanceKm?: number;
-    geometry?: any;
-    stats?: {
-        totalPopulation: number;
-        placeCount: number;
-        avgElevation: number;
-        minElevation: number;
-        maxElevation: number;
-    };
-}
-
-export interface GridSearchQuery {
-    region: string;
-    level: string | number;
-    includeArea?: boolean;
-    includeDistance?: boolean;
-    includeGeometry?: boolean;
-    includeStats?: boolean;
-    bigdataKey?: string;
-    [key: string]: any;
-}
-
-export interface GridEnumerateResult {
-    query: GridSearchQuery;
-    region: {
-        name: string;
-        gid: string;
-        level: number;
-        center?: { lat: number; lon: number };
-        bbox?: [number, number, number, number];
-        areaSqKm?: number;
-        maxDistanceKm?: number;
-        geometry?: any;
-    };
-    areas: GridArea[];
-    maxLevelAvailable: number;
-    generatedAt: string;
-}
-
-const serverUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
-
-// --- Fetch API Methods ---
-
-export const fetchGridSearches = async (): Promise<string[]> => {
-    return fetchWithDeduplication('grid-searches-list', async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {
-            'Content-Type': 'application/json'
-        };
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const res = await fetch(`${serverUrl}/api/locations/gridsearch`, { headers });
-        if (!res.ok) throw new Error(`Failed to fetch grid searches: ${res.statusText}`);
-        const result = await res.json();
-        return result.data;
-    }, 60000); // cache for 60s
-};
-export const fetchGridSearchesLocal = async (): Promise<string[]> => {
-    return fetchWithDeduplication('grid-searches-list', async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {
-            'Content-Type': 'application/json'
-        };
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const res = await fetch(`${serverUrl}/api/locations/gridsearch/local`, { headers });
-        if (!res.ok) throw new Error(`Failed to fetch grid searches: ${res.statusText}`);
-        const result = await res.json();
-        return result.data;
-    }, 60000); // cache for 60s
-};
-
-export const fetchGridSearch = async (id: string): Promise<GridEnumerateResult> => {
-    return fetchWithDeduplication(`grid-search-${id}`, async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {};
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const res = await fetch(`${serverUrl}/api/locations/gridsearch/${encodeURIComponent(id)}`, { headers });
-        if (!res.ok) throw new Error(`Failed to fetch grid search: ${res.statusText}`);
-        const result = await res.json();
-        return result.data;
-    });
-};
-
-export const fetchGridSearchLocal = async (id: string): Promise<GridEnumerateResult> => {
-    return fetchWithDeduplication(`grid-search-local-${id}`, async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {};
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const res = await fetch(`${serverUrl}/api/locations/gridsearch/local/${encodeURIComponent(id)}`, { headers });
-        if (!res.ok) throw new Error(`Failed to fetch local grid search: ${res.statusText}`);
-        const result = await res.json();
-        return result.data;
-    });
-};
-
-export const fetchGridSearchPolygons = async (regionGid: string, level?: number): Promise<any> => {
-    if (!regionGid) {
-        return { type: 'FeatureCollection', features: [] };
-    }
-
-    const cacheKey = `grid-search-polygons-${regionGid}-L${level ?? 'auto'}`;
-
-    return fetchWithDeduplication(cacheKey, async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {
-            'Content-Type': 'application/json'
-        };
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const res = await fetch(`${serverUrl}/api/locations/gridsearch/polygons`, {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({ regionGid, level })
-        });
-        if (!res.ok) throw new Error(`Failed to fetch polygons: ${res.statusText}`);
-
-        // This endpoint directly returns a FeatureCollection object
-        return await res.json();
-    });
-};
-
-export interface GenerateGridSearchRequest {
-    region: string;
-    level: string | number;
-    name?: string;
-    gid?: string;
-    includeStats?: boolean;
-    maxElevation?: number;
-    minDensity?: number;
-}
-
-export const generateGridSearch = async (req: GenerateGridSearchRequest): Promise<any> => {
-    const { data: { session } } = await defaultSupabase.auth.getSession();
-    const headers: Record<string, string> = {
-        'Content-Type': 'application/json'
-    };
-    if (session?.access_token) {
-        headers['Authorization'] = `Bearer ${session.access_token}`;
-    }
-
-    const res = await fetch(`${serverUrl}/api/locations/gridsearch/generate`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(req)
-    });
-
-    if (!res.ok) {
-        let errStr = res.statusText;
-        try {
-            const errJson = await res.json();
-            if (errJson.error) errStr = errJson.error;
-        } catch { }
-        throw new Error(`Failed to generate search: ${errStr}`);
-    }
-
-    return await res.json();
-    return await res.json();
-};
-
-export const searchGadmRegions = async (query: string, contentLevel?: number): Promise<any[]> => {
-    console.log('searchGadmRegions', query);
-    if (!query) return [];
-    try {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {
-            'Content-Type': 'application/json'
-        };
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const url = new URL(`${serverUrl}/api/regions/search`);
-        url.searchParams.append('query', query);
-        if (contentLevel !== undefined) {
-            url.searchParams.append('content_level', contentLevel.toString());
-        }
-
-        const res = await fetch(url.toString(), { headers });
-        if (!res.ok) {
-            console.error('Failed to search GADM regions', await res.text());
-            return [];
-        }
-        const json = await res.json();
-        return json.data || json.rows || [];
-    } catch (e) {
-        console.error('Error searching GADM regions:', e);
-        return [];
-    }
-};
-
-export const fetchRegionHierarchy = async (lat: number, lon: number): Promise<any[]> => {
-    // Round to 4 decimals for cache key reuse (about 11m accuracy)
-    const cacheKey = `gadm-hierarchy-${lat.toFixed(4)}-${lon.toFixed(4)}`;
-    return fetchWithDeduplication(cacheKey, async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {};
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const res = await fetch(`${serverUrl}/api/regions/hierarchy?lat=${lat}&lon=${lon}`, { headers });
-        if (!res.ok) throw new Error(`Failed to fetch hierarchy: ${res.statusText}`);
-        const result = await res.json();
-        return result.data || [];
-    });
-};
-
-export const fetchRegionBoundary = async (
-    gid: string, 
-    name: string, 
-    targetLevel: number, 
-    enrich?: boolean
-): Promise<any> => {
-    const cacheKey = `gadm-boundary-${gid}-L${targetLevel}-E${enrich}`;
-    return fetchWithDeduplication(cacheKey, async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {};
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-
-        const url = new URL(`${serverUrl}/api/regions/boundary/${encodeURIComponent(gid)}`);
-        url.searchParams.append('name', name);
-        url.searchParams.append('targetLevel', targetLevel.toString());
-        if (enrich) url.searchParams.append('enrich', 'true');
-
-        const res = await fetch(url.toString(), { headers });
-        if (!res.ok) throw new Error(`Failed to fetch boundary: ${res.statusText}`);
-        return await res.json();
-    });
-};
-
-export interface GadmRow {
-    level: number;
-    queryName: string;
-    gadmName: string | null;
-    gid: string | null;
-    gadmRow: any | null;
-}
-
-export async function resolveGadmHierarchy(lat: number, lng: number): Promise<GadmRow[]> {
-    const rows: GadmRow[] = [];
-    try {
-        const foundRows = await fetchRegionHierarchy(lat, lng);
-        for (let level = 0; level <= 5; level++) {
-            const match = foundRows.find((r: any) => r.level === level);
-            if (match) {
-                rows.push({ level, queryName: match.gadmName || '', gadmName: match.gadmName, gid: match.gid, gadmRow: match });
-            } else {
-                rows.push({ level, queryName: '', gadmName: null, gid: null, gadmRow: null });
-            }
-        }
-    } catch (e) {
-        for (let level = 0; level <= 5; level++) rows.push({ level, queryName: '', gadmName: null, gid: null, gadmRow: null });
-    }
-    return rows;
-}
-
-export const fetchRegionChildren = async (adminGid: string, targetLevel: number): Promise<any[]> => {
-    // Round to cache key
-    const cacheKey = `gadm-children-${adminGid}-L${targetLevel}`;
-    return fetchWithDeduplication(cacheKey, async () => {
-        const { data: { session } } = await defaultSupabase.auth.getSession();
-        const headers: Record<string, string> = {
-            'Content-Type': 'application/json'
-        };
-        if (session?.access_token) {
-            headers['Authorization'] = `Bearer ${session.access_token}`;
-        }
-        
-        const url = new URL(`${serverUrl}/api/regions/names`);
-        url.searchParams.append('admin', adminGid);
-        url.searchParams.append('content_level', targetLevel.toString());
-        url.searchParams.append('resolveNames', 'true');
-
-        const res = await fetch(url.toString(), { headers });
-        if (!res.ok) {
-            console.error('Failed to fetch region children', await res.text());
-            return [];
-        }
-        const json = await res.json();
-        return json.data || json.rows || [];
-    });
-};
-
diff --git a/packages/ui/src/modules/places/components/AreaScanner.tsx b/packages/ui/src/modules/places/components/AreaScanner.tsx
deleted file mode 100644
index 15cae23f..00000000
--- a/packages/ui/src/modules/places/components/AreaScanner.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useState } from 'react';
-import { Map, Loader2, MapPin } from 'lucide-react';
-import maplibregl from 'maplibre-gl';
-import type { Geo } from '@/types';
-
-interface AreaScannerProps {
-    map: maplibregl.Map | null;
-    onSelect: (locationName: string) => void;
-    onResultsFound?: (locations: string[]) => void;
-    onCenterLocation?: (geo: Geo) => void;
-    className?: string;
-}
-
-export interface AreaScannerRef {
-    scan: (silent?: boolean) => Promise<string[]>;
-}
-
-export const AreaScanner = React.forwardRef<AreaScannerRef, AreaScannerProps>(({ map, onSelect, onResultsFound, onCenterLocation, className }, ref) => {
-    const [loading, setLoading] = useState(false);
-    const [results, setResults] = useState<string[]>([]);
-    const [isOpen, setIsOpen] = useState(false);
-
-    // Helper to fetch just the center
-    const checkCenter = async () => {
-        if (!map || !onCenterLocation) return;
-
-        try {
-            const center = map.getCenter();
-            const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
-
-            const res = await fetch(`${apiUrl}/api/regions/reverse?lat=${center.lat}&lon=${center.lng}`);
-            if (res.ok) {
-                const json = await res.json();
-                if (json.data) {
-                    onCenterLocation(json.data as Geo);
-                }
-            }
-        } catch (e) {
-            console.error("Failed to check center", e);
-        }
-    };
-
-    // Auto-track center on move
-    React.useEffect(() => {
-        if (!map) return;
-
-        const onMoveEnd = () => {
-            checkCenter();
-        };
-
-        const onMapClick = (e: maplibregl.MapMouseEvent) => {
-            if (e.originalEvent.shiftKey) {
-                map.easeTo({ center: e.lngLat });
-            }
-        };
-
-        map.on('moveend', onMoveEnd);
-        map.on('click', onMapClick);
-
-        // Initial check
-        checkCenter();
-
-        return () => {
-            map.off('moveend', onMoveEnd);
-            map.off('click', onMapClick);
-        };
-    }, [map, onCenterLocation]);
-
-    const scanArea = async (silent = false) => {
-        if (!map) return [];
-
-        setLoading(true);
-        setResults([]);
-
-        // Only open UI if we don't have an auto-handler (and not silent)
-        if (!onResultsFound && !silent) {
-            setIsOpen(true);
-        }
-
-        let uniqueList: string[] = [];
-
-        try {
-            const bounds = map.getBounds();
-            const ne = bounds.getNorthEast();
-            const sw = bounds.getSouthWest();
-
-            // Create a 5x5 grid for better coverage
-            const latStep = (ne.lat - sw.lat) / 5;
-            const lngStep = (ne.lng - sw.lng) / 5;
-
-            const points: { lat: number, lng: number }[] = [];
-
-            // Generate grid points (centers of the 5x5 cells)
-            for (let i = 0; i < 5; i++) {
-                for (let j = 0; j < 5; j++) {
-                    points.push({
-                        lat: sw.lat + latStep * i + latStep / 2,
-                        lng: sw.lng + lngStep * j + lngStep / 2
-                    });
-                }
-            }
-
-            // Also add the exact center - MUST BE LAST for onCenterLocation logic
-            const center = map.getCenter();
-            points.push(center);
-
-            const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
-
-            // Fetch in parallel
-            const promises = points.map(p =>
-                fetch(`${apiUrl}/api/regions/reverse?lat=${p.lat}&lon=${p.lng}`)
-                    .then(r => r.ok ? r.json() : null)
-                    .catch(() => null)
-            );
-
-            const responses = await Promise.all(promises);
-
-            // Handle center point specifically
-            const centerResponse = responses[responses.length - 1];
-            if (centerResponse && centerResponse.data && onCenterLocation) {
-                onCenterLocation(centerResponse.data as Geo);
-            }
-
-            const locations = new Set<string>();
-
-            responses.forEach(res => {
-                if (res && res.data) {
-                    const geo = res.data as Geo;
-                    // Prefer city/locality
-                    if (geo.city && geo.city !== 'unknown') locations.add(geo.city);
-                    else if (geo.locality && geo.locality !== 'unknown') locations.add(geo.locality);
-                    else if (geo.principalSubdivision && geo.principalSubdivision !== 'unknown') locations.add(geo.principalSubdivision);
-                }
-            });
-
-            uniqueList = Array.from(locations).sort();
-            setResults(uniqueList);
-
-            // Notify parent
-            if (onResultsFound && !silent) {
-                onResultsFound(uniqueList);
-            }
-
-        } catch (e) {
-            console.error("Scan failed", e);
-        } finally {
-            setLoading(false);
-        }
-
-        return uniqueList;
-    };
-
-    React.useImperativeHandle(ref, () => ({
-        scan: scanArea
-    }));
-
-    return (
-        <div className={`relative ${className}`}>
-            <button
-                className="px-4 py-2 bg-white dark:bg-gray-800 dark:text-gray-200 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium transition-colors flex items-center gap-2"
-                onClick={() => scanArea(false)}
-                disabled={loading}
-            >
-                {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Map className="w-4 h-4" />}
-                Scan Area
-            </button>
-
-            {/* Only show list if open (manual mode) */}
-            {isOpen && (results.length > 0 || loading) && (
-                <div className="absolute top-full right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden z-50">
-                    <div className="px-3 py-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-                        <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Found Locations</span>
-                        <button onClick={() => setIsOpen(false)} className="text-gray-400 hover:text-gray-600">×</button>
-                    </div>
-
-                    {loading && results.length === 0 && (
-                        <div className="p-4 text-center text-sm text-gray-500">Scanning grid...</div>
-                    )}
-
-                    {!loading && results.length === 0 && (
-                        <div className="p-4 text-center text-sm text-gray-500">No distinct locations found</div>
-                    )}
-
-                    <div className="max-h-[300px] overflow-y-auto">
-                        {results.map((loc, idx) => (
-                            <button
-                                key={idx}
-                                className="w-full text-left px-4 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-sm  dark:text-gray-200 flex items-center gap-2 transition-colors"
-                                onClick={() => {
-                                    onSelect(loc);
-                                    setIsOpen(false);
-                                }}
-                            >
-                                <MapPin className="w-3 h-3 text-gray-400" />
-                                {loc}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-});
diff --git a/packages/ui/src/modules/places/components/GenerateGridForm.tsx b/packages/ui/src/modules/places/components/GenerateGridForm.tsx
deleted file mode 100644
index 927405a6..00000000
--- a/packages/ui/src/modules/places/components/GenerateGridForm.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { Loader2 } from 'lucide-react';
-import { searchGadmRegions, generateGridSearch } from '../client-searches';
-
-export interface GenerateGridFormProps {
-    includeStats: boolean;
-    onToggleStats: (val: boolean) => void;
-    onGenerated: (searchName: string, region: string, level: string) => void;
-}
-
-export function GenerateGridForm({ includeStats, onToggleStats, onGenerated }: GenerateGridFormProps) {
-    const suggestionsWrapRef = useRef<HTMLDivElement>(null);
-    const [genRegion, setGenRegion] = useState('');
-    const [genGid, setGenGid] = useState('');
-    const [searchQuery, setSearchQuery] = useState('');
-    const [suggestions, setSuggestions] = useState<any[]>([]);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [loadingSuggestions, setLoadingSuggestions] = useState(false);
-    const [genLevel, setGenLevel] = useState('cities');
-    const [generating, setGenerating] = useState(false);
-    const [genError, setGenError] = useState('');
-    const [maxElevation, setMaxElevation] = useState<number>(700);
-    const [minDensity, setMinDensity] = useState<number>(10);
-
-    useEffect(() => {
-        const handler = (e: MouseEvent) => {
-            if (suggestionsWrapRef.current && !suggestionsWrapRef.current.contains(e.target as Node))
-                setShowSuggestions(false);
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, []);
-
-    useEffect(() => {
-        if (genGid) return;
-        if (!searchQuery || searchQuery.length < 2) { setSuggestions([]); return; }
-        const id = setTimeout(async () => {
-            setLoadingSuggestions(true);
-            try {
-                const results = await searchGadmRegions(searchQuery);
-                setSuggestions(Array.isArray(results) ? results : (results as any).results || []);
-                setShowSuggestions(true);
-            } catch { setSuggestions([]); }
-            setLoadingSuggestions(false);
-        }, 400);
-        return () => clearTimeout(id);
-    }, [searchQuery, genGid]);
-
-    const handleGenerate = async () => {
-        setGenerating(true);
-        setGenError('');
-        try {
-            const res = await generateGridSearch({ 
-                region: genRegion, 
-                level: genLevel, 
-                gid: genGid || undefined, 
-                includeStats,
-                maxElevation,
-                minDensity
-            });
-            if (res.success) {
-                const searchName = res.jsonFile.replace('.json', '');
-                onGenerated(searchName, genRegion, genLevel);
-                
-                setGenRegion(''); setGenGid(''); setSearchQuery(''); setSuggestions([]); setShowSuggestions(false);
-            }
-        } catch (err: any) {
-            setGenError(err.message || 'Failed to generate');
-        } finally {
-            setGenerating(false);
-        }
-    };
-
-    return (
-        <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-md border dark:border-gray-700 space-y-3">
-            <h3 className="font-semibold text-sm text-gray-800 dark:text-gray-200">Generate New Search</h3>
-            <div className="relative" ref={suggestionsWrapRef}>
-                <input
-                    type="text"
-                    placeholder="Type a region (e.g. Spain, Barcelona)"
-                    className="w-full border rounded-md p-2 text-sm dark:bg-gray-900 dark:border-gray-600 dark:text-white pr-8"
-                    value={searchQuery}
-                    onChange={e => { setSearchQuery(e.target.value); setGenRegion(e.target.value); setGenGid(''); setShowSuggestions(true); }}
-                    onFocus={() => setShowSuggestions(true)}
-                    onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
-                />
-                {loadingSuggestions && (
-                    <div className="absolute right-2 top-2.5"><Loader2 className="w-4 h-4 animate-spin text-gray-400" /></div>
-                )}
-                {showSuggestions && suggestions.length > 0 && (
-                    <ul className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-auto">
-                        {suggestions.map((s, i) => {
-                            const nameKey = Object.keys(s).find(k => k.startsWith('NAME_'));
-                            const gidKey = Object.keys(s).find(k => k.startsWith('GID_'));
-                            const name = nameKey ? s[nameKey] : '';
-                            const gid = gidKey ? s[gidKey] : '';
-                            const displayName = s.hierarchy || s.name || name || gid;
-                            const levelLabel = gidKey ? `Level ${gidKey.replace('GID_', '')}` : '';
-                            return (
-                                <li
-                                    key={i}
-                                    className="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200 border-b dark:border-gray-700 last:border-0"
-                                    onMouseDown={e => {
-                                        e.preventDefault();
-                                        setSearchQuery(displayName); setGenRegion(displayName); setGenGid(gid);
-                                        setShowSuggestions(false); setSuggestions([]);
-                                    }}
-                                >
-                                    <div className="font-medium">{displayName}</div>
-                                    {levelLabel && <div className="text-xs text-gray-500 dark:text-gray-400">{levelLabel} {gid && `(${gid})`}</div>}
-                                </li>
-                            );
-                        })}
-                    </ul>
-                )}
-            </div>
-
-            <select
-                className="w-full border rounded-md p-2 text-sm dark:bg-gray-900 dark:border-gray-600 dark:text-white"
-                value={genLevel}
-                onChange={e => setGenLevel(e.target.value)}
-            >
-                <option value="states">States (Level 1)</option>
-                <option value="provinces">Provinces (Level 2)</option>
-                <option value="districts">Districts (Level 3)</option>
-                <option value="cities">Cities / Communes (Level 4)</option>
-                <option value="towns">Towns (Level 5)</option>
-                <option value="villages">Villages (Level 6)</option>
-            </select>
-
-            {genError && (
-                <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded p-3 text-red-600 dark:text-red-400 text-sm">
-                    <p className="font-semibold mb-1">Generation Failed</p>
-                    <p className="whitespace-pre-wrap">{genError.replace('Failed to generate search: Error: ', '')}</p>
-                </div>
-            )}
-
-            <button
-                onClick={handleGenerate}
-                disabled={generating || !genRegion.trim()}
-                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md flex items-center justify-center transition-colors disabled:opacity-50 text-sm"
-            >
-                {generating ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
-                {generating ? 'Mapping Area...' : 'Generate Areas'}
-            </button>
-
-            <label className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
-                <input
-                    type="checkbox"
-                    checked={includeStats}
-                    onChange={e => onToggleStats(e.target.checked)}
-                    className="rounded border-gray-300 dark:border-gray-600"
-                />
-                Include population &amp; elevation stats
-            </label>
-
-            {includeStats && (
-                <div className="grid grid-cols-2 gap-3 mt-3 pt-3 border-t dark:border-gray-700">
-                    <div>
-                        <label className="text-xs text-gray-700 dark:text-gray-300 block mb-1">Max Elevation (m)</label>
-                        <input 
-                            type="number" 
-                            className="w-full border rounded p-1.5 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-white"
-                            value={maxElevation}
-                            onChange={e => setMaxElevation(Number(e.target.value))}
-                        />
-                        <span className="text-[10px] text-gray-500">Skips &gt; {maxElevation}m</span>
-                    </div>
-                    <div>
-                        <label className="text-xs text-gray-700 dark:text-gray-300 block mb-1">Min Density (p/km²)</label>
-                        <input 
-                            type="number" 
-                            className="w-full border rounded p-1.5 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-white"
-                            value={minDensity}
-                            onChange={e => setMinDensity(Number(e.target.value))}
-                        />
-                        <span className="text-[10px] text-gray-500">Skips &lt; {minDensity}</span>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/packages/ui/src/modules/places/components/GridSearchMap.tsx b/packages/ui/src/modules/places/components/GridSearchMap.tsx
deleted file mode 100644
index 793e9f73..00000000
--- a/packages/ui/src/modules/places/components/GridSearchMap.tsx
+++ /dev/null
@@ -1,374 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import maplibregl from 'maplibre-gl';
-import { useTheme } from '@/components/ThemeProvider';
-import { Users, MousePointerClick, MapPin, Palette } from 'lucide-react';
-import { MAP_STYLES, type MapStyleKey } from './map-styles';
-import { POSTER_THEMES } from '../utils/poster-themes';
-import { MapFooter } from './MapFooter';
-import { useMapControls } from '../hooks/useMapControls';
-import { SimulatorLayers } from './map-layers/SimulatorLayers';
-import { RegionLayers } from './map-layers/RegionLayers';
-import { MapLayerToggles } from './MapLayerToggles';
-import { RulerButton } from './RulerButton';
-
-const safeSetStyle = (m: maplibregl.Map, style: any) => {
-    const terrain = m.getTerrain();
-    if (terrain) {
-        m.setTerrain(null);
-    }
-    m.setStyle(style);
-    if (terrain) {
-        m.once('style.load', () => {
-            setTimeout(() => {
-                try { m.setTerrain(terrain); } catch (e) { }
-            }, 50);
-        });
-    }
-};
-
-
-export interface GridSearchMapProps {
-    bboxesFeatureCollection: any;
-    polygonsFeatureCollection: any;
-    targetBounds?: maplibregl.LngLatBoundsLike;
-    urlStyle?: string | null;
-    posterMode?: boolean;
-    posterTheme?: string;
-    showDensity?: boolean;
-    showCenters?: boolean;
-    gadmPickerActive?: boolean;
-    pickerPolygons?: any[];
-    simulatorData?: any;
-    simulatorPath?: any;
-    simulatorScanner?: any;
-    onStyleChange?: (styleUrl: string) => void;
-    onPosterMode?: (active: boolean) => void;
-    onToggleDensity?: (visible: boolean) => void;
-    onToggleCenters?: (visible: boolean) => void;
-    onTogglePicker?: (active: boolean) => void;
-    onMapReady?: (map: maplibregl.Map) => void;
-    overlayBottomLeft?: React.ReactNode;
-    isFullscreen?: boolean;
-    onFullscreenToggle?: () => void;
-}
-
-export function GridSearchMap({
-    bboxesFeatureCollection,
-    polygonsFeatureCollection,
-    targetBounds,
-    urlStyle,
-    posterMode = false,
-    posterTheme = 'terracotta',
-    showDensity = false,
-    showCenters = false,
-    gadmPickerActive = false,
-    pickerPolygons,
-    simulatorData, simulatorPath, simulatorScanner,
-    onStyleChange,
-    onPosterMode,
-    onToggleDensity,
-    onToggleCenters,
-    onTogglePicker,
-    onMapReady,
-    overlayBottomLeft,
-    isFullscreen,
-    onFullscreenToggle
-}: GridSearchMapProps) {
-    const mapContainer = useRef<HTMLDivElement>(null);
-    const mapWrapper = useRef<HTMLDivElement>(null);
-    const map = useRef<maplibregl.Map | null>(null);
-    const [isMapLoaded, setIsMapLoaded] = useState(false);
-
-    const { mapInternals, currentCenterLabel, isLocating, setupMapListeners, handleLocate, cleanupLocateMarker } = useMapControls();
-
-    // Theme / map style
-    const { theme } = useTheme();
-
-    const getResolvedTheme = useCallback(() => {
-        if (theme === 'system' && typeof window !== 'undefined') {
-            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
-        return theme === 'dark' ? 'dark' : 'light';
-    }, [theme]);
-
-    const [mapStyleKey, setMapStyleKeyRaw] = useState<MapStyleKey>(() => {
-        if (urlStyle === 'dark' || urlStyle === 'light') return urlStyle as MapStyleKey;
-        return getResolvedTheme();
-    });
-
-    const setMapStyleKey = useCallback((styleKey: MapStyleKey) => {
-        setMapStyleKeyRaw(styleKey);
-        onStyleChange?.(styleKey);
-    }, [onStyleChange]);
-
-    const mapStyleRef = useRef(mapStyleKey);
-    useEffect(() => {
-        mapStyleRef.current = mapStyleKey;
-    }, [mapStyleKey]);
-
-    useEffect(() => {
-        const updateTheme = () => {
-            if (urlStyle) return;
-            setMapStyleKeyRaw(getResolvedTheme());
-        };
-        updateTheme();
-
-        if (theme === 'system') {
-            const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-            mediaQuery.addEventListener("change", updateTheme);
-            return () => mediaQuery.removeEventListener("change", updateTheme);
-        }
-    }, [theme, urlStyle, getResolvedTheme]);
-
-    useEffect(() => {
-        const m = map.current;
-        if (!m || !isMapLoaded) return;
-
-        if (!posterMode) {
-            safeSetStyle(m, MAP_STYLES[mapStyleKey]);
-            return;
-        }
-
-        const applyPosterTheme = async () => {
-            try {
-                const theme = POSTER_THEMES[posterTheme] || POSTER_THEMES['terracotta'];
-                const styleUrl = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
-                const res = await fetch(styleUrl);
-                const style = await res.json();
-
-                style.layers = style.layers.map((layer: any) => {
-                    layer.paint = layer.paint || {};
-                    if (layer.id === 'background') {
-                        layer.paint = { ...layer.paint, 'background-color': theme.bg };
-                    }
-                    else if (layer.id === 'water' || layer.id.includes('waterway')) {
-                        layer.paint = { ...layer.paint, 'fill-color': theme.water, 'line-color': theme.water };
-                    }
-                    else if (layer.id.includes('park') || layer.id.includes('landcover') || layer.id.includes('wood') || layer.id.includes('grass')) {
-                        layer.paint = { ...layer.paint, 'fill-color': theme.parks };
-                    }
-                    else if (layer.id.includes('highway') || layer.id.includes('road')) {
-                        let color = theme.road_default;
-                        if (layer.id.includes('motorway') || layer.id.includes('trunk')) color = theme.road_motorway;
-                        else if (layer.id.includes('primary')) color = theme.road_primary;
-                        else if (layer.id.includes('secondary')) color = theme.road_secondary;
-                        else if (layer.id.includes('tertiary')) color = theme.road_tertiary;
-                        else if (layer.id.includes('residential') || layer.id.includes('pedestrian')) color = theme.road_residential;
-
-                        if (layer.type === 'line') {
-                            layer.paint = { ...layer.paint, 'line-color': color };
-                        } else if (layer.type === 'polygon' || layer.type === 'fill') {
-                            layer.paint = { ...layer.paint, 'fill-color': color };
-                        }
-                    }
-                    else if (layer.type === 'symbol' && layer.layout && layer.layout['text-field']) {
-                        layer.paint = { ...layer.paint, 'text-color': theme.text, 'text-halo-color': theme.bg, 'text-halo-width': 1 };
-                    }
-                    else if ((layer.id.includes('boundary') || layer.id.includes('admin')) && layer.type === 'line') {
-                        layer.paint = { ...layer.paint, 'line-color': theme.text };
-                    }
-                    return layer;
-                });
-                safeSetStyle(m, style);
-            } catch (e) {
-                console.error("Failed to apply poster theme", e);
-            }
-        };
-        applyPosterTheme();
-    }, [mapStyleKey, isMapLoaded, posterMode, posterTheme]);
-
-
-
-    useEffect(() => {
-        if (!mapContainer.current) return;
-
-        const m = new maplibregl.Map({
-            container: mapContainer.current,
-            style: MAP_STYLES[mapStyleKey],
-            center: [10.45, 51.16],
-            zoom: 4,
-            maxPitch: 85,
-            // @ts-ignore MapLibre underlying canvas options allows preserveDrawingBuffer but TS interface might differ
-            preserveDrawingBuffer: true,
-        });
-        map.current = m;
-
-        m.addControl(new maplibregl.NavigationControl({ visualizePitch: true, showZoom: true, showCompass: true }), 'top-right');
-        m.addControl(new maplibregl.TerrainControl({ source: 'terrainSource', exaggeration: 1 }), 'top-right');
-
-        m.on('load', () => {
-            setIsMapLoaded(true);
-            onMapReady?.(m);
-            setTimeout(() => m.resize(), 100);
-        });
-
-        m.on('style.load', () => {
-            if (!m.getSource('terrainSource')) {
-                const terrainDef = { type: 'raster-dem' as const, url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9', tileSize: 256 };
-                m.addSource('terrainSource', terrainDef);
-                if (!m.getSource('hillshadeSource')) m.addSource('hillshadeSource', terrainDef);
-            }
-
-        });
-
-        const cleanupListeners = setupMapListeners(m);
-
-        return () => {
-            cleanupListeners();
-            cleanupLocateMarker();
-            m.remove();
-            map.current = null;
-        };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-
-
-    const hasAutoCentered = useRef(false);
-
-    // Effect for bounds framing
-    useEffect(() => {
-        if (!map.current || !isMapLoaded) return;
-
-        if (!hasAutoCentered.current) {
-            let zoomed = false;
-            if (pickerPolygons && pickerPolygons.length > 0) {
-                try {
-                    const bounds = new maplibregl.LngLatBounds();
-                    let hasPoints = false;
-                    pickerPolygons.forEach(fc => {
-                        fc?.features?.forEach((f: any) => {
-                            if (f.geometry?.type === 'Polygon') {
-                                f.geometry.coordinates[0].forEach((c: any) => { bounds.extend(c); hasPoints = true; });
-                            } else if (f.geometry?.type === 'MultiPolygon') {
-                                f.geometry.coordinates.forEach((poly: any) => poly[0].forEach((c: any) => { bounds.extend(c); hasPoints = true; }));
-                            }
-                        });
-                    });
-                    if (hasPoints) {
-                        map.current.fitBounds(bounds, { padding: 50, duration: 0, maxZoom: 12 });
-                        zoomed = true;
-                        hasAutoCentered.current = true;
-                    }
-                } catch (e) { console.error("Failed to fit initial picker bounds", e) }
-            }
-
-            if (!zoomed && targetBounds) {
-                try {
-                    map.current.fitBounds(targetBounds, { padding: 50, duration: 0, maxZoom: 12 });
-                    hasAutoCentered.current = true;
-                } catch (e) {
-                    console.error("Failed to fit bounds:", e);
-                }
-            }
-        } else {
-            if (targetBounds) {
-                try {
-                    map.current.fitBounds(targetBounds, { padding: 50, maxZoom: 12 });
-                } catch (e) {
-                    console.error("Failed to fit bounds:", e);
-                }
-            }
-        }
-    }, [targetBounds, pickerPolygons, isMapLoaded]);
-
-    return (
-        <div ref={mapWrapper} className="flex-1 relative w-full h-full flex flex-col min-h-0 min-w-0 bg-transparent overflow-hidden">
-            <div className="relative flex-1 min-h-0 min-w-0 w-full h-full bg-slate-100 dark:bg-slate-900">
-                <div ref={mapContainer} className="absolute inset-0" />
-
-                {isMapLoaded && map.current && (
-                    <>
-                        <SimulatorLayers
-                            map={map.current}
-                            isDarkStyle={mapStyleKey === 'dark'}
-                            simulatorData={simulatorData}
-                            simulatorPath={simulatorPath}
-                            simulatorScanner={simulatorScanner}
-                        />
-                        <RegionLayers
-                            map={map.current}
-                            isDarkStyle={mapStyleKey === 'dark'}
-                            bboxesFeatureCollection={bboxesFeatureCollection}
-                            polygonsFeatureCollection={polygonsFeatureCollection}
-                            pickerPolygons={pickerPolygons}
-                            showDensity={showDensity}
-                            showCenters={showCenters}
-                        />
-                    </>
-                )}
-
-                {overlayBottomLeft && (
-                    <div className="absolute bottom-4 left-4 z-10 pointer-events-auto">
-                        {overlayBottomLeft}
-                    </div>
-                )}
-            </div>
-
-            <MapFooter
-                currentCenterLabel={currentCenterLabel}
-                mapInternals={mapInternals}
-                isLocating={isLocating}
-                onLocate={() => handleLocate(map.current)}
-                onZoomToFit={() => {
-                    if (map.current) {
-                        let zoomed = false;
-                        if (pickerPolygons && pickerPolygons.length > 0) {
-                            try {
-                                const bounds = new maplibregl.LngLatBounds();
-                                let hasPoints = false;
-                                pickerPolygons.forEach(fc => {
-                                    fc?.features?.forEach((f: any) => {
-                                        if (f.geometry?.type === 'Polygon') {
-                                            f.geometry.coordinates[0].forEach((c: any) => { bounds.extend(c); hasPoints = true; });
-                                        } else if (f.geometry?.type === 'MultiPolygon') {
-                                            f.geometry.coordinates.forEach((poly: any) => poly[0].forEach((c: any) => { bounds.extend(c); hasPoints = true; }));
-                                        }
-                                    });
-                                });
-                                if (hasPoints) {
-                                    map.current.fitBounds(bounds, { padding: 50, maxZoom: 12 });
-                                    zoomed = true;
-                                }
-                            } catch (e) { console.error("Failed to fit picker bounds", e) }
-                        }
-
-                        if (!zoomed && targetBounds) {
-                            try {
-                                map.current.fitBounds(targetBounds, { padding: 50, maxZoom: 12 });
-                            } catch (e) { console.error("Failed to fit zoom targetBounds", e) }
-                        }
-                    }
-                }}
-                isFullscreen={isFullscreen}
-                onFullscreenToggle={onFullscreenToggle}
-                activeStyleKey={mapStyleKey}
-                onStyleChange={setMapStyleKey}
-            >
-                <MapLayerToggles
-                    showDensity={showDensity}
-                    onToggleDensity={onToggleDensity}
-                    showCenters={showCenters}
-                    onToggleCenters={onToggleCenters}
-                />
-                <RulerButton map={map.current} />
-
-                <button
-                    onClick={() => onPosterMode?.(!posterMode)}
-                    className={`p-1 flex items-center gap-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${posterMode ? 'bg-orange-50 dark:bg-orange-900/30 text-orange-600' : 'text-gray-500'} font-medium`}
-                    title="Poster View"
-                >
-                    <Palette className="w-3.5 h-3.5" />
-                    <span className="hidden sm:inline">Poster</span>
-                </button>
-                <button
-                    onClick={() => onTogglePicker?.(!gadmPickerActive)}
-                    className={`p-1 flex items-center gap-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${gadmPickerActive ? 'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-600' : 'text-gray-500'} font-medium`}
-                    title="GADM Area Selector"
-                >
-                    <MousePointerClick className="w-3.5 h-3.5" />
-                    <span className="hidden sm:inline">Regions</span>
-                </button>
-            </MapFooter>
-        </div>
-    );
-}
diff --git a/packages/ui/src/modules/places/components/GridSearchSelector.tsx b/packages/ui/src/modules/places/components/GridSearchSelector.tsx
deleted file mode 100644
index e1bcfbfe..00000000
--- a/packages/ui/src/modules/places/components/GridSearchSelector.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Loader2, Users, Layers } from 'lucide-react';
-import { GridEnumerateResult } from '../client-searches';
-
-export interface GridSearchOption {
-    id: string;
-    regionName: string;
-    level: string;
-    query: string;
-    generatedAt?: string;
-}
-
-export interface GridSearchSelectorProps {
-    searches: GridSearchOption[];
-    selectedSearch: string | null;
-    searchData: GridEnumerateResult | null;
-    loading: boolean;
-    loadingPolygons: boolean;
-    onSelectSearch: (id: string | null) => void;
-    onFetchPolygons: () => void;
-}
-
-export function GridSearchSelector({
-    searches, selectedSearch, searchData, loading, loadingPolygons, onSelectSearch, onFetchPolygons
-}: GridSearchSelectorProps) {
-
-    const areasWithStats = searchData?.areas.filter(a => a.stats) ?? [];
-    const totalPop = areasWithStats.reduce((sum, a) => sum + (a.stats?.totalPopulation ?? 0), 0);
-    const avgElev = areasWithStats.length > 0
-        ? Math.round(areasWithStats.reduce((sum, a) => sum + (a.stats?.avgElevation ?? 0), 0) / areasWithStats.length)
-        : null;
-    const hasStats = areasWithStats.length > 0;
-
-    return (
-        <div className="flex flex-col gap-4">
-            <div className="space-y-2">
-                <select
-                    className="w-full border rounded-md p-2 text-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100"
-                    value={selectedSearch || ''}
-                    onChange={e => onSelectSearch(e.target.value || null)}
-                >
-                    <option value="">-- Choose Search --</option>
-                    {searches.map(s => <option key={s.id} value={s.id}>{s.regionName} ({s.level || 'unknown'}) {s.query ? `- ${s.query}` : ''}</option>)}
-                </select>
-            </div>
-
-            {loading && <div className="flex items-center text-sm text-gray-500"><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Loading grid...</div>}
-
-            {searchData && !loading && (
-                <div className="mt-4 space-y-4">
-                    <div className="bg-gray-50 dark:bg-gray-800 p-3 rounded-md border dark:border-gray-700 text-sm space-y-1">
-                        <p className="dark:text-gray-200"><strong>Region:</strong> {searchData.region.name} (Level {searchData.region.level})</p>
-                        <p className="dark:text-gray-200"><strong>Total Cells:</strong> {searchData.areas.length}</p>
-                        <p className="dark:text-gray-200"><strong>Generated:</strong> {new Date(searchData.generatedAt).toLocaleString()}</p>
-                        {hasStats && (
-                            <>
-                                <hr className="dark:border-gray-600 my-2" />
-                                <p className="dark:text-gray-200 flex items-center gap-1.5">
-                                    <Users className="w-3.5 h-3.5 text-blue-500" />
-                                    <strong>Population:</strong> {totalPop.toLocaleString()}
-                                </p>
-                                {avgElev !== null && (
-                                    <p className="dark:text-gray-200 flex items-center gap-1.5">
-                                        <strong>Avg Elevation:</strong> {avgElev}m
-                                    </p>
-                                )}
-                            </>
-                        )}
-                    </div>
-                    <button
-                        onClick={onFetchPolygons}
-                        disabled={loadingPolygons}
-                        className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md flex items-center justify-center transition-colors disabled:opacity-50"
-                    >
-                        {loadingPolygons ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Layers className="w-4 h-4 mr-2" />}
-                        Fetch Exact Polygons
-                    </button>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/packages/ui/src/modules/places/components/MapFooter.tsx b/packages/ui/src/modules/places/components/MapFooter.tsx
index 454857fb..068bda66 100644
--- a/packages/ui/src/modules/places/components/MapFooter.tsx
+++ b/packages/ui/src/modules/places/components/MapFooter.tsx
@@ -1,119 +1,108 @@
-import React from 'react';
-import { Map as MapIcon, Loader2, Locate, Maximize, Minimize, Focus, Sun, Moon } from 'lucide-react';
-import type { MapStyleKey } from './map-styles';
-
-export interface MapFooterProps {
-    currentCenterLabel?: string | null;
-    mapInternals?: { lat: number; lng: number; zoom: number } | null;
-    isLocating?: boolean;
-    onLocate?: () => void;
-    onZoomToFit?: () => void;
-    isFullscreen?: boolean;
-    onFullscreenToggle?: () => void;
-    activeStyleKey?: MapStyleKey;
-    onStyleChange?: (styleKey: MapStyleKey) => void;
-    children?: React.ReactNode;
-}
-
-export function MapFooter({
-    currentCenterLabel,
-    mapInternals,
-    isLocating = false,
-    onLocate,
-    onZoomToFit,
-    isFullscreen = false,
-    onFullscreenToggle,
-    activeStyleKey,
-    onStyleChange,
-    children
-}: MapFooterProps) {
-    return (
-        <div className="px-4 py-2 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-xs flex justify-between items-center z-20 shrink-0 w-full overflow-hidden">
-            <div className="flex items-center gap-4 text-gray-600 dark:text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap min-w-0">
-                {currentCenterLabel ? (
-                    <div className="font-medium text-gray-900 dark:text-gray-200 flex items-center gap-1">
-                        <MapIcon className="w-3 h-3 text-indigo-500" />
-                        {currentCenterLabel}
-                    </div>
-                ) : (
-                    <span>Pan map to view details</span>
-                )}
-
-                {mapInternals && (
-                    <div className="font-mono flex gap-4 opacity-80 pl-4 border-l border-gray-300 dark:border-gray-600">
-                        <span>Lat: {mapInternals.lat.toFixed(4)}</span>
-                        <span>Lng: {mapInternals.lng.toFixed(4)}</span>
-                        <span>Zoom: {mapInternals.zoom.toFixed(1)}</span>
-                    </div>
-                )}
-            </div>
-
-            {/* Style Toggles & Actions */}
-            <div className="flex items-center gap-1 border-l border-gray-300 dark:border-gray-600 pl-4">
-                {onLocate && (
-                    <button
-                        onClick={onLocate}
-                        disabled={isLocating}
-                        className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${isLocating ? 'text-indigo-500' : 'text-gray-500'}`}
-                        title="Locate Me (IP)"
-                    >
-                        {isLocating ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Locate className="w-3.5 h-3.5" />}
-                    </button>
-                )}
-                
-                {onZoomToFit && (
-                    <button
-                        onClick={onZoomToFit}
-                        className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500"
-                        title="Zoom to Fit"
-                    >
-                        <Focus className="w-3.5 h-3.5" />
-                    </button>
-                )}
-
-                {onFullscreenToggle && (
-                    <button
-                        onClick={onFullscreenToggle}
-                        className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${isFullscreen ? 'text-indigo-600 font-medium' : 'text-gray-500'}`}
-                        title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
-                    >
-                        {isFullscreen ? <Minimize className="w-3.5 h-3.5" /> : <Maximize className="w-3.5 h-3.5" />}
-                    </button>
-                )}
-
-                {onStyleChange && (
-                    <>
-                        <button 
-                            onClick={() => onStyleChange('light')} 
-                            className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${activeStyleKey === 'light' ? 'text-indigo-600 font-medium' : 'text-gray-500'}`} 
-                            title="Light Mode"
-                        >
-                            <Sun className="w-3.5 h-3.5" />
-                        </button>
-                        <button 
-                            onClick={() => onStyleChange('osm_raster')} 
-                            className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${activeStyleKey === 'osm_raster' ? 'text-indigo-600 font-medium' : 'text-gray-500'}`} 
-                            title="OSM Raster"
-                        >
-                            <MapIcon className="w-3.5 h-3.5" />
-                        </button>
-                        <button 
-                            onClick={() => onStyleChange('dark')} 
-                            className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${activeStyleKey === 'dark' ? 'text-indigo-600 font-medium' : 'text-gray-500'}`} 
-                            title="Dark Mode"
-                        >
-                            <Moon className="w-3.5 h-3.5" />
-                        </button>
-                    </>
-                )}
-
-                {children && (
-                    <>
-                        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600 mx-2"></div>
-                        {children}
-                    </>
-                )}
-            </div>
-        </div>
-    );
-}
+import React from 'react';
+import { Map as MapIcon, Loader2, Locate, Maximize, Minimize, Focus, Sun, Moon } from 'lucide-react';
+import type { MapStyleKey } from './map-styles';
+
+export interface MapFooterProps {
+    currentCenterLabel?: string | null;
+    mapInternals?: { lat: number; lng: number; zoom: number } | null;
+    isLocating?: boolean;
+    onLocate?: () => void;
+    onZoomToFit?: () => void;
+    isFullscreen?: boolean;
+    onFullscreenToggle?: () => void;
+    activeStyleKey?: MapStyleKey;
+    onStyleChange?: (styleKey: MapStyleKey) => void;
+    children?: React.ReactNode;
+}
+
+export function MapFooter({
+    currentCenterLabel,
+    mapInternals,
+    isLocating = false,
+    onLocate,
+    onZoomToFit,
+    isFullscreen = false,
+    onFullscreenToggle,
+    activeStyleKey,
+    onStyleChange,
+    children
+}: MapFooterProps) {
+    return (
+        <div className="px-4 py-2 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-xs flex justify-between items-center z-20 shrink-0 w-full overflow-hidden">
+            <div className="flex items-center gap-4 text-gray-600 dark:text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap min-w-0">
+                {currentCenterLabel ? (
+                    <div className="font-medium text-gray-900 dark:text-gray-200 flex items-center gap-1">
+                        <MapIcon className="w-3 h-3 text-indigo-500" />
+                        {currentCenterLabel}
+                    </div>
+                ) : (
+                    <span>Pan map to view details</span>
+                )}
+
+                {mapInternals && (
+                    <div className="font-mono flex gap-4 opacity-80 pl-4 border-l border-gray-300 dark:border-gray-600">
+                        <span>Lat: {mapInternals.lat.toFixed(4)}</span>
+                        <span>Lng: {mapInternals.lng.toFixed(4)}</span>
+                        <span>Zoom: {mapInternals.zoom.toFixed(1)}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Style Toggles & Actions */}
+            <div className="flex items-center gap-1 border-l border-gray-300 dark:border-gray-600 pl-4">
+                {onLocate && (
+                    <button
+                        onClick={onLocate}
+                        disabled={isLocating}
+                        className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${isLocating ? 'text-indigo-500' : 'text-gray-500'}`}
+                        title="Locate Me (IP)"
+                    >
+                        {isLocating ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Locate className="w-3.5 h-3.5" />}
+                    </button>
+                )}
+                
+                {onZoomToFit && (
+                    <button
+                        onClick={onZoomToFit}
+                        className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500"
+                        title="Zoom to Fit"
+                    >
+                        <Focus className="w-3.5 h-3.5" />
+                    </button>
+                )}
+
+                {onFullscreenToggle && (
+                    <button
+                        onClick={onFullscreenToggle}
+                        className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${isFullscreen ? 'text-indigo-600 font-medium' : 'text-gray-500'}`}
+                        title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+                    >
+                        {isFullscreen ? <Minimize className="w-3.5 h-3.5" /> : <Maximize className="w-3.5 h-3.5" />}
+                    </button>
+                )}
+
+                {onStyleChange && [
+                    { key: 'light', icon: Sun, title: 'Light Mode' },
+                    { key: 'osm_raster', icon: MapIcon, title: 'OSM Raster' },
+                    { key: 'dark', icon: Moon, title: 'Dark Mode' }
+                ].map(({ key, icon: Icon, title }) => (
+                    <button
+                        key={key}
+                        onClick={() => onStyleChange(key as MapStyleKey)}
+                        className={`p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 ${activeStyleKey === key ? 'text-indigo-600 font-medium' : 'text-gray-500'}`}
+                        title={title}
+                    >
+                        <Icon className="w-3.5 h-3.5" />
+                    </button>
+                ))}
+
+                {children && (
+                    <>
+                        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600 mx-2"></div>
+                        {children}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/components/MapLayerToggles.tsx b/packages/ui/src/modules/places/components/MapLayerToggles.tsx
index 4a0a46f0..66cab504 100644
--- a/packages/ui/src/modules/places/components/MapLayerToggles.tsx
+++ b/packages/ui/src/modules/places/components/MapLayerToggles.tsx
@@ -1,41 +1,51 @@
-import React from 'react';
-import { Users, MapPin } from 'lucide-react';
-
-export interface MapLayerTogglesProps {
-    showDensity?: boolean;
-    onToggleDensity?: (visible: boolean) => void;
-    showCenters?: boolean;
-    onToggleCenters?: (visible: boolean) => void;
-}
-
-export function MapLayerToggles({
-    showDensity,
-    onToggleDensity,
-    showCenters,
-    onToggleCenters
-}: MapLayerTogglesProps) {
-    return (
-        <>
-            {onToggleDensity && (
-                <button
-                    onClick={() => onToggleDensity(!showDensity)}
-                    className={`p-1 flex items-center gap-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${showDensity ? 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600' : 'text-gray-500'} font-medium`}
-                    title="Population Density"
-                >
-                    <Users className="w-3.5 h-3.5" />
-                    <span className="hidden sm:inline">Density</span>
-                </button>
-            )}
-            {onToggleCenters && (
-                <button
-                    onClick={() => onToggleCenters(!showCenters)}
-                    className={`p-1 flex items-center gap-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${showCenters ? 'bg-purple-50 dark:bg-purple-900/30 text-purple-600' : 'text-gray-500'} font-medium`}
-                    title="Population & Built Centers"
-                >
-                    <MapPin className="w-3.5 h-3.5" />
-                    <span className="hidden sm:inline">Centers</span>
-                </button>
-            )}
-        </>
-    );
-}
+import React from 'react';
+import { Users, MapPin } from 'lucide-react';
+
+export interface MapLayerTogglesProps {
+    showDensity?: boolean;
+    onToggleDensity?: (visible: boolean) => void;
+    showCenters?: boolean;
+    onToggleCenters?: (visible: boolean) => void;
+}
+
+export function MapLayerToggles({
+    showDensity,
+    onToggleDensity,
+    showCenters,
+    onToggleCenters
+}: MapLayerTogglesProps) {
+    return (
+        <>
+            {[
+                {
+                    show: onToggleDensity,
+                    isActive: showDensity,
+                    onToggle: () => onToggleDensity?.(!showDensity),
+                    activeClasses: 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600',
+                    title: 'Population Density',
+                    icon: Users,
+                    label: 'Density'
+                },
+                {
+                    show: onToggleCenters,
+                    isActive: showCenters,
+                    onToggle: () => onToggleCenters?.(!showCenters),
+                    activeClasses: 'bg-purple-50 dark:bg-purple-900/30 text-purple-600',
+                    title: 'Population & Built Centers',
+                    icon: MapPin,
+                    label: 'Centers'
+                }
+            ].map(({ show, isActive, onToggle, activeClasses, title, icon: Icon, label }) => show && (
+                <button
+                    key={label}
+                    onClick={onToggle}
+                    className={`p-1 flex items-center gap-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${isActive ? activeClasses : 'text-gray-500'} font-medium`}
+                    title={title}
+                >
+                    <Icon className="w-3.5 h-3.5" />
+                    <span className="hidden sm:inline">{label}</span>
+                </button>
+            ))}
+        </>
+    );
+}
diff --git a/packages/ui/src/modules/places/components/MapOverlayToolbars.tsx b/packages/ui/src/modules/places/components/MapOverlayToolbars.tsx
index b0fc6f20..ab0c1500 100644
--- a/packages/ui/src/modules/places/components/MapOverlayToolbars.tsx
+++ b/packages/ui/src/modules/places/components/MapOverlayToolbars.tsx
@@ -1,86 +1,86 @@
-import React from 'react';
-import { LayoutGrid, Info } from 'lucide-react';
-
-interface MapOverlayToolbarsProps {
-    features: any;
-    sidebarOpen: boolean;
-    gadmPickerActive: boolean;
-    simulatorActive: boolean;
-    setSidebarOpen: (v: boolean) => void;
-    setGadmPickerActive: (v: boolean) => void;
-    setSimulatorActive: (v: boolean) => void;
-    infoPanelOpen: boolean;
-    setInfoPanelOpen: (v: boolean) => void;
-}
-
-export function MapOverlayToolbars({
-    features,
-    sidebarOpen,
-    gadmPickerActive,
-    simulatorActive,
-    setSidebarOpen,
-    setGadmPickerActive,
-    setSimulatorActive,
-    infoPanelOpen,
-    setInfoPanelOpen
-}: MapOverlayToolbarsProps) {
-    const isExpanded = gadmPickerActive || simulatorActive || sidebarOpen;
-
-    return (
-        <div className="absolute top-4 left-4 right-4 z-10 flex flex-col gap-2 pointer-events-none items-start">
-            <div className="flex flex-wrap items-start gap-2 w-full max-w-full">
-                
-                {/* Tools & Info Buttons */}
-                {(features.enableSidebarTools || features.showSidebar || features.enableInfoPanel) && (
-                    <div className="flex items-center gap-1.5 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50 pointer-events-auto shrink-0">
-                        {/* Sidebar Toggle Button */}
-                        {(features.enableSidebarTools || features.showSidebar) && (
-                            <button
-                                onClick={() => {
-                                    if (isExpanded) {
-                                        setGadmPickerActive(false);
-                                        setSimulatorActive(false);
-                                        setSidebarOpen(false);
-                                    } else {
-                                        setSidebarOpen(true);
-                                    }
-                                }}
-                                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors border ${
-                                    isExpanded
-                                        ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300 border-indigo-200 dark:border-indigo-800'
-                                        : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 border-gray-200 dark:border-gray-700'
-                                }`}
-                                title="Toggle Sidebar"
-                            >
-                                <LayoutGrid className="w-4 h-4" />
-                                {isExpanded ? 'Hide Tools' : 'Show Tools'}
-                            </button>
-                        )}
-
-                        {/* Info Button */}
-                        {features.enableInfoPanel && (
-                            <button
-                                onClick={() => setInfoPanelOpen(!infoPanelOpen)}
-                                className={`p-2 rounded-md transition-colors ${infoPanelOpen
-                                    ? 'bg-indigo-100 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400'
-                                    : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
-                                    }`}
-                                title="Show Information"
-                            >
-                                <Info className="w-5 h-5" />
-                            </button>
-                        )}
-                    </div>
-                )}
-                
-                {/* Portal target for Simulator Controls */}
-                <div 
-                    id="sim-controls-portal" 
-                    className="flex max-w-full items-center justify-start pointer-events-auto empty:hidden bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50 shrink-0"
-                ></div>
-
-                <div className="flex-1 min-w-0"></div> { /* Spacer */}
-            </div>
-        </div>
-    );
-}
+import React from 'react';
+import { LayoutGrid, Info } from 'lucide-react';
+
+interface MapOverlayToolbarsProps {
+    features: any;
+    sidebarOpen: boolean;
+    gadmPickerActive: boolean;
+    simulatorActive: boolean;
+    setSidebarOpen: (v: boolean) => void;
+    setGadmPickerActive: (v: boolean) => void;
+    setSimulatorActive: (v: boolean) => void;
+    infoPanelOpen: boolean;
+    setInfoPanelOpen: (v: boolean) => void;
+}
+
+export function MapOverlayToolbars({
+    features,
+    sidebarOpen,
+    gadmPickerActive,
+    simulatorActive,
+    setSidebarOpen,
+    setGadmPickerActive,
+    setSimulatorActive,
+    infoPanelOpen,
+    setInfoPanelOpen
+}: MapOverlayToolbarsProps) {
+    const isExpanded = gadmPickerActive || simulatorActive || sidebarOpen;
+
+    return (
+        <div className="absolute top-4 left-4 right-4 z-10 flex flex-col gap-2 pointer-events-none items-start">
+            <div className="flex flex-wrap items-start gap-2 w-full max-w-full">
+                
+                {/* Tools & Info Buttons */}
+                {(features.enableSidebarTools || features.showSidebar || features.enableInfoPanel) && (
+                    <div className="flex items-center gap-1.5 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50 pointer-events-auto shrink-0">
+                        {/* Sidebar Toggle Button */}
+                        {(features.enableSidebarTools || features.showSidebar) && (
+                            <button
+                                onClick={() => {
+                                    if (isExpanded) {
+                                        setGadmPickerActive(false);
+                                        setSimulatorActive(false);
+                                        setSidebarOpen(false);
+                                    } else {
+                                        setSidebarOpen(true);
+                                    }
+                                }}
+                                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors border ${
+                                    isExpanded
+                                        ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300 border-indigo-200 dark:border-indigo-800'
+                                        : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 border-gray-200 dark:border-gray-700'
+                                }`}
+                                title="Toggle Sidebar"
+                            >
+                                <LayoutGrid className="w-4 h-4" />
+                                {isExpanded ? 'Hide Tools' : 'Show Tools'}
+                            </button>
+                        )}
+
+                        {/* Info Button */}
+                        {features.enableInfoPanel && (
+                            <button
+                                onClick={() => setInfoPanelOpen(!infoPanelOpen)}
+                                className={`p-2 rounded-md transition-colors ${infoPanelOpen
+                                    ? 'bg-indigo-100 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400'
+                                    : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
+                                    }`}
+                                title="Show Information"
+                            >
+                                <Info className="w-5 h-5" />
+                            </button>
+                        )}
+                    </div>
+                )}
+                
+                {/* Portal target for Simulator Controls */}
+                <div 
+                    id="sim-controls-portal" 
+                    className="flex max-w-full items-center justify-start pointer-events-auto empty:hidden bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50 shrink-0"
+                ></div>
+
+                <div className="flex-1 min-w-0"></div> { /* Spacer */}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/components/MapPosterOverlay.tsx b/packages/ui/src/modules/places/components/MapPosterOverlay.tsx
index 1e89d04e..64b272ee 100644
--- a/packages/ui/src/modules/places/components/MapPosterOverlay.tsx
+++ b/packages/ui/src/modules/places/components/MapPosterOverlay.tsx
@@ -1,199 +1,199 @@
-import React, { useEffect, useState } from 'react';
-import maplibregl from 'maplibre-gl';
-import { POSTER_THEMES } from '../utils/poster-themes';
-
-// Fallback feather icons if lucide-react unavailable, or just raw SVG
-const XIcon = ({ className }: { className?: string }) => (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-);
-const PaletteIcon = ({ className }: { className?: string }) => (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
-);
-
-interface MapPosterOverlayProps {
-    map: maplibregl.Map | null;
-    pickerRegions: any[];
-    pickerPolygons?: any[];
-    posterTheme: string;
-    setPosterTheme: (theme: string) => void;
-    onClose: () => void;
-}
-
-const MapIcon = ({ className }: { className?: string }) => (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6"></polygon><line x1="9" y1="3" x2="9" y2="18"></line><line x1="15" y1="6" x2="15" y2="21"></line></svg>
-);
-
-export function MapPosterOverlay({ map, pickerRegions, pickerPolygons, posterTheme, setPosterTheme, onClose }: MapPosterOverlayProps) {
-    const theme = POSTER_THEMES[posterTheme] || POSTER_THEMES['terracotta'];
-    const [center, setCenter] = useState<{ lat: number, lng: number } | null>(null);
-
-    const [inferredCity, setInferredCity] = useState("CITY NAME");
-    const [inferredCountry, setInferredCountry] = useState("COUNTRY");
-
-    useEffect(() => {
-        if (!map) return;
-        const updateCenter = () => {
-            const c = map.getCenter();
-            setCenter({ lat: c.lat, lng: c.lng });
-        };
-        
-        const fetchGeo = async () => {
-            const c = map.getCenter();
-            try {
-                const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
-                const res = await fetch(`${apiUrl}/api/regions/reverse?lat=${c.lat}&lon=${c.lng}`);
-                if (res.ok) {
-                    const json = await res.json();
-                    if (json.data) {
-                        const geo = json.data;
-                        let cty = geo.city && geo.city !== 'unknown' ? geo.city : 
-                                  geo.locality && geo.locality !== 'unknown' ? geo.locality :
-                                  geo.principalSubdivision && geo.principalSubdivision !== 'unknown' ? geo.principalSubdivision : null;
-                        let ctry = geo.countryName || null;
-                        if (cty && cty !== "unknown") setInferredCity(cty);
-                        if (ctry && ctry !== "unknown") setInferredCountry(ctry);
-                    }
-                }
-            } catch (e) {}
-        };
-
-        updateCenter();
-        fetchGeo();
-
-        map.on('move', updateCenter);
-        map.on('moveend', fetchGeo);
-        
-        return () => { 
-            map.off('move', updateCenter);
-            map.off('moveend', fetchGeo);
-        }
-    }, [map]);
-
-    let city = "CITY NAME";
-    let country = "COUNTRY";
-    
-    if (pickerRegions && pickerRegions.length > 0) {
-        const countryRegion = pickerRegions.find(r => r.level === 0);
-        const cityRegion = pickerRegions.slice().reverse().find(r => r.level > 0);
-        if (countryRegion && countryRegion.name) country = countryRegion.name;
-        if (cityRegion && cityRegion.name) city = cityRegion.name;
-        else if (countryRegion && countryRegion.name) city = countryRegion.name;
-    }
-
-    city = (city === "CITY NAME" || !city) ? inferredCity : city;
-    country = (country === "COUNTRY" || !country) ? inferredCountry : country;
-
-    const formatCoords = (c: { lat: number, lng: number }) => {
-        const latStr = `${Math.abs(c.lat).toFixed(4)}° ${c.lat >= 0 ? 'N' : 'S'}`;
-        const lngStr = `${Math.abs(c.lng).toFixed(4)}° ${c.lng >= 0 ? 'E' : 'W'}`;
-        return `${latStr} / ${lngStr}`;
-    };
-
-    const displayCity = city.toUpperCase().split('').join('  ');
-    
-    const gradientTop = `linear-gradient(to bottom, ${theme.gradient_color}FF 0%, ${theme.gradient_color}00 100%)`;
-    const gradientBottom = `linear-gradient(to top, ${theme.gradient_color}FF 30%, ${theme.gradient_color}00 100%)`;
-
-    const [showGadmBorders, setShowGadmBorders] = useState(true);
-
-    useEffect(() => {
-        if (!map || !pickerPolygons || pickerPolygons.length === 0) return;
-        
-        const combinedFeatures = pickerPolygons.flatMap(fc => fc.features || []);
-        const fc = { type: 'FeatureCollection', features: combinedFeatures };
-        
-        if (!map.getSource('poster-gadm')) {
-            map.addSource('poster-gadm', { type: 'geojson', data: fc as any });
-            map.addLayer({
-                id: 'poster-gadm-borders',
-                type: 'line',
-                source: 'poster-gadm',
-                paint: {
-                    'line-color': theme.text,
-                    'line-width': 1.5,
-                    'line-dasharray': [4, 4]
-                }
-            });
-        }
-        
-        if (showGadmBorders) {
-            map.setLayoutProperty('poster-gadm-borders', 'visibility', 'visible');
-            map.setPaintProperty('poster-gadm-borders', 'line-color', theme.text);
-        } else {
-            map.setLayoutProperty('poster-gadm-borders', 'visibility', 'none');
-        }
-
-        return () => {
-            if (map.getLayer('poster-gadm-borders')) map.removeLayer('poster-gadm-borders');
-            if (map.getSource('poster-gadm')) map.removeSource('poster-gadm');
-        };
-    }, [map, pickerPolygons, showGadmBorders, theme.text]);
-
-    return (
-        <div className="absolute inset-0 z-40 pointer-events-none flex flex-col justify-between overflow-hidden mix-blend-normal">
-            {/* Top Gradient */}
-            <div className="w-full h-32 absolute top-0 left-0" style={{ background: gradientTop }} />
-            
-            {/* Controls (pointer events auto) */}
-            <div id="poster-controls" className="absolute top-4 right-4 flex gap-2 pointer-events-auto z-50">
-                <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur rounded flex items-center p-1 border border-gray-200 dark:border-gray-700 shadow-sm text-gray-800 dark:text-gray-200">
-                    <PaletteIcon className="w-4 h-4 ml-2 mr-1 opacity-50" />
-                    <select 
-                        value={posterTheme} 
-                        onChange={e => setPosterTheme(e.target.value)}
-                        className="bg-transparent text-sm font-medium border-none focus:ring-0 cursor-pointer outline-none px-2 py-1"
-                    >
-                        {Object.keys(POSTER_THEMES).map(k => (
-                            <option key={k} value={k}>{POSTER_THEMES[k].name}</option>
-                        ))}
-                    </select>
-                </div>
-                {pickerPolygons && pickerPolygons.length > 0 && (
-                    <button 
-                        onClick={() => setShowGadmBorders(!showGadmBorders)} 
-                        className={`flex items-center px-3 py-1.5 ${showGadmBorders ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100'} rounded text-sm font-medium transition-colors shadow-sm`}
-                        title="Toggle GADM Borders"
-                    >
-                        <MapIcon className="w-4 h-4" />
-                    </button>
-                )}
-                <button 
-                    onClick={onClose} 
-                    className="flex items-center px-3 py-1.5 bg-red-100 hover:bg-red-200 dark:bg-red-900/40 dark:hover:bg-red-900/60 text-red-700 dark:text-red-300 rounded text-sm font-medium transition-colors shadow-sm"
-                >
-                    <XIcon className="w-4 h-4 mr-1.5" /> Exit Poster Mode
-                </button>
-            </div>
-
-            {/* Bottom Content Area */}
-            <div className="w-full h-72 absolute bottom-0 left-0 flex flex-col justify-end items-center pb-12" style={{ background: gradientBottom }}>
-                <div 
-                    className="text-center transition-colors duration-500"
-                    style={{ color: theme.text }}
-                >
-                    <div className="font-bold tracking-[0.2em] text-5xl mb-6 font-mono leading-none drop-shadow-sm">
-                        {displayCity}
-                    </div>
-                    
-                    <div className="w-20 h-[2px] mx-auto opacity-70 mb-5 drop-shadow-sm" style={{ backgroundColor: theme.text }} />
-                    
-                    <div className="text-2xl tracking-[0.3em] font-light mb-3 drop-shadow-sm">
-                        {country.toUpperCase()}
-                    </div>
-                    
-                    <div className="text-sm opacity-80 font-mono tracking-wider drop-shadow-sm">
-                        {center ? formatCoords(center) : 'Loading...'}
-                    </div>
-                </div>
-
-                {/* Attribution */}
-                <div 
-                    className="absolute bottom-4 right-4 text-xs opacity-50 font-mono"
-                    style={{ color: theme.text }}
-                >
-                    © OpenStreetMap contributors
-                </div>
-            </div>
-        </div>
-    );
-}
+import React, { useEffect, useState } from 'react';
+import maplibregl from 'maplibre-gl';
+import { POSTER_THEMES } from '../utils/poster-themes';
+
+// Fallback feather icons if lucide-react unavailable, or just raw SVG
+const XIcon = ({ className }: { className?: string }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+);
+const PaletteIcon = ({ className }: { className?: string }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
+);
+
+interface MapPosterOverlayProps {
+    map: maplibregl.Map | null;
+    pickerRegions: any[];
+    pickerPolygons?: any[];
+    posterTheme: string;
+    setPosterTheme: (theme: string) => void;
+    onClose: () => void;
+}
+
+const MapIcon = ({ className }: { className?: string }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6"></polygon><line x1="9" y1="3" x2="9" y2="18"></line><line x1="15" y1="6" x2="15" y2="21"></line></svg>
+);
+
+export function MapPosterOverlay({ map, pickerRegions, pickerPolygons, posterTheme, setPosterTheme, onClose }: MapPosterOverlayProps) {
+    const theme = POSTER_THEMES[posterTheme] || POSTER_THEMES['terracotta'];
+    const [center, setCenter] = useState<{ lat: number, lng: number } | null>(null);
+
+    const [inferredCity, setInferredCity] = useState("CITY NAME");
+    const [inferredCountry, setInferredCountry] = useState("COUNTRY");
+
+    useEffect(() => {
+        if (!map) return;
+        const updateCenter = () => {
+            const c = map.getCenter();
+            setCenter({ lat: c.lat, lng: c.lng });
+        };
+        
+        const fetchGeo = async () => {
+            const c = map.getCenter();
+            try {
+                const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
+                const res = await fetch(`${apiUrl}/api/regions/reverse?lat=${c.lat}&lon=${c.lng}`);
+                if (res.ok) {
+                    const json = await res.json();
+                    if (json.data) {
+                        const geo = json.data;
+                        let cty = geo.city && geo.city !== 'unknown' ? geo.city : 
+                                  geo.locality && geo.locality !== 'unknown' ? geo.locality :
+                                  geo.principalSubdivision && geo.principalSubdivision !== 'unknown' ? geo.principalSubdivision : null;
+                        let ctry = geo.countryName || null;
+                        if (cty && cty !== "unknown") setInferredCity(cty);
+                        if (ctry && ctry !== "unknown") setInferredCountry(ctry);
+                    }
+                }
+            } catch (e) {}
+        };
+
+        updateCenter();
+        fetchGeo();
+
+        map.on('move', updateCenter);
+        map.on('moveend', fetchGeo);
+        
+        return () => { 
+            map.off('move', updateCenter);
+            map.off('moveend', fetchGeo);
+        }
+    }, [map]);
+
+    let city = "CITY NAME";
+    let country = "COUNTRY";
+    
+    if (pickerRegions && pickerRegions.length > 0) {
+        const countryRegion = pickerRegions.find(r => r.level === 0);
+        const cityRegion = pickerRegions.slice().reverse().find(r => r.level > 0);
+        if (countryRegion && countryRegion.name) country = countryRegion.name;
+        if (cityRegion && cityRegion.name) city = cityRegion.name;
+        else if (countryRegion && countryRegion.name) city = countryRegion.name;
+    }
+
+    city = (city === "CITY NAME" || !city) ? inferredCity : city;
+    country = (country === "COUNTRY" || !country) ? inferredCountry : country;
+
+    const formatCoords = (c: { lat: number, lng: number }) => {
+        const latStr = `${Math.abs(c.lat).toFixed(4)}° ${c.lat >= 0 ? 'N' : 'S'}`;
+        const lngStr = `${Math.abs(c.lng).toFixed(4)}° ${c.lng >= 0 ? 'E' : 'W'}`;
+        return `${latStr} / ${lngStr}`;
+    };
+
+    const displayCity = city.toUpperCase().split('').join('  ');
+    
+    const gradientTop = `linear-gradient(to bottom, ${theme.gradient_color}FF 0%, ${theme.gradient_color}00 100%)`;
+    const gradientBottom = `linear-gradient(to top, ${theme.gradient_color}FF 30%, ${theme.gradient_color}00 100%)`;
+
+    const [showGadmBorders, setShowGadmBorders] = useState(true);
+
+    useEffect(() => {
+        if (!map || !pickerPolygons || pickerPolygons.length === 0) return;
+        
+        const combinedFeatures = pickerPolygons.flatMap(fc => fc.features || []);
+        const fc = { type: 'FeatureCollection', features: combinedFeatures };
+        
+        if (!map.getSource('poster-gadm')) {
+            map.addSource('poster-gadm', { type: 'geojson', data: fc as any });
+            map.addLayer({
+                id: 'poster-gadm-borders',
+                type: 'line',
+                source: 'poster-gadm',
+                paint: {
+                    'line-color': theme.text,
+                    'line-width': 1.5,
+                    'line-dasharray': [4, 4]
+                }
+            });
+        }
+        
+        if (showGadmBorders) {
+            map.setLayoutProperty('poster-gadm-borders', 'visibility', 'visible');
+            map.setPaintProperty('poster-gadm-borders', 'line-color', theme.text);
+        } else {
+            map.setLayoutProperty('poster-gadm-borders', 'visibility', 'none');
+        }
+
+        return () => {
+            if (map.getLayer('poster-gadm-borders')) map.removeLayer('poster-gadm-borders');
+            if (map.getSource('poster-gadm')) map.removeSource('poster-gadm');
+        };
+    }, [map, pickerPolygons, showGadmBorders, theme.text]);
+
+    return (
+        <div className="absolute inset-0 z-40 pointer-events-none flex flex-col justify-between overflow-hidden mix-blend-normal">
+            {/* Top Gradient */}
+            <div className="w-full h-32 absolute top-0 left-0" style={{ background: gradientTop }} />
+            
+            {/* Controls (pointer events auto) */}
+            <div id="poster-controls" className="absolute top-4 right-4 flex gap-2 pointer-events-auto z-50">
+                <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur rounded flex items-center p-1 border border-gray-200 dark:border-gray-700 shadow-sm text-gray-800 dark:text-gray-200">
+                    <PaletteIcon className="w-4 h-4 ml-2 mr-1 opacity-50" />
+                    <select 
+                        value={posterTheme} 
+                        onChange={e => setPosterTheme(e.target.value)}
+                        className="bg-transparent text-sm font-medium border-none focus:ring-0 cursor-pointer outline-none px-2 py-1"
+                    >
+                        {Object.keys(POSTER_THEMES).map(k => (
+                            <option key={k} value={k}>{POSTER_THEMES[k].name}</option>
+                        ))}
+                    </select>
+                </div>
+                {pickerPolygons && pickerPolygons.length > 0 && (
+                    <button 
+                        onClick={() => setShowGadmBorders(!showGadmBorders)} 
+                        className={`flex items-center px-3 py-1.5 ${showGadmBorders ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300' : 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100'} rounded text-sm font-medium transition-colors shadow-sm`}
+                        title="Toggle GADM Borders"
+                    >
+                        <MapIcon className="w-4 h-4" />
+                    </button>
+                )}
+                <button 
+                    onClick={onClose} 
+                    className="flex items-center px-3 py-1.5 bg-red-100 hover:bg-red-200 dark:bg-red-900/40 dark:hover:bg-red-900/60 text-red-700 dark:text-red-300 rounded text-sm font-medium transition-colors shadow-sm"
+                >
+                    <XIcon className="w-4 h-4 mr-1.5" /> Exit Poster Mode
+                </button>
+            </div>
+
+            {/* Bottom Content Area */}
+            <div className="w-full h-72 absolute bottom-0 left-0 flex flex-col justify-end items-center pb-12" style={{ background: gradientBottom }}>
+                <div 
+                    className="text-center transition-colors duration-500"
+                    style={{ color: theme.text }}
+                >
+                    <div className="font-bold tracking-[0.2em] text-5xl mb-6 font-mono leading-none drop-shadow-sm">
+                        {displayCity}
+                    </div>
+                    
+                    <div className="w-20 h-[2px] mx-auto opacity-70 mb-5 drop-shadow-sm" style={{ backgroundColor: theme.text }} />
+                    
+                    <div className="text-2xl tracking-[0.3em] font-light mb-3 drop-shadow-sm">
+                        {country.toUpperCase()}
+                    </div>
+                    
+                    <div className="text-sm opacity-80 font-mono tracking-wider drop-shadow-sm">
+                        {center ? formatCoords(center) : 'Loading...'}
+                    </div>
+                </div>
+
+                {/* Attribution */}
+                <div 
+                    className="absolute bottom-4 right-4 text-xs opacity-50 font-mono"
+                    style={{ color: theme.text }}
+                >
+                    © OpenStreetMap contributors
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/components/RegionSelector.tsx b/packages/ui/src/modules/places/components/RegionSelector.tsx
index a7481ff9..2eee56dd 100644
--- a/packages/ui/src/modules/places/components/RegionSelector.tsx
+++ b/packages/ui/src/modules/places/components/RegionSelector.tsx
@@ -1,6 +1,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { MapPin, Search } from 'lucide-react';
+import { searchGadmRegions } from '../client-gridsearch';
 
 interface Region {
     [key: string]: any;
@@ -28,16 +29,8 @@ export const RegionSelector: React.FC<RegionSelectorProps> = ({ onSelect, classN
         const timer = setTimeout(async () => {
             setLoading(true);
             try {
-                const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
-                let url = `${apiUrl}/api/regions/search?query=${encodeURIComponent(query)}`;
-                if (contentLevel !== undefined) {
-                    url += `&content_level=${contentLevel}`;
-                }
-                const res = await fetch(url);
-                if (res.ok) {
-                    const data = await res.json();
-                    setResults(data.data || []);
-                }
+                const data = await searchGadmRegions(query, contentLevel);
+                setResults(data);
             } catch (e) {
                 console.error("Search failed", e);
             } finally {
diff --git a/packages/ui/src/modules/places/components/RulerButton.tsx b/packages/ui/src/modules/places/components/RulerButton.tsx
index 6f23f176..ba7bba77 100644
--- a/packages/ui/src/modules/places/components/RulerButton.tsx
+++ b/packages/ui/src/modules/places/components/RulerButton.tsx
@@ -1,36 +1,36 @@
-import React from 'react';
-import { Ruler, RotateCcw } from 'lucide-react';
-import maplibregl from 'maplibre-gl';
-import { useRulerTool } from '../hooks/useRulerTool';
-
-export function RulerButton({ map }: { map: maplibregl.Map | null }) {
-    const { active, toggle, reset, formattedTotal, pointCount } = useRulerTool(map);
-
-    return (
-        <>
-            <button
-                onClick={toggle}
-                className={`p-1 flex items-center gap-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors font-medium ${
-                    active
-                        ? 'bg-amber-50 dark:bg-amber-900/30 text-amber-600'
-                        : 'text-gray-500'
-                }`}
-                title={active ? 'Disable Ruler' : 'Measure Distance'}
-            >
-                <Ruler className="w-3.5 h-3.5" />
-                {active && pointCount >= 2 && (
-                    <span className="text-[10px] font-mono font-bold">{formattedTotal}</span>
-                )}
-            </button>
-            {active && pointCount > 0 && (
-                <button
-                    onClick={reset}
-                    className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 hover:text-amber-600 transition-colors"
-                    title="Clear Measurement"
-                >
-                    <RotateCcw className="w-3 h-3" />
-                </button>
-            )}
-        </>
-    );
-}
+import React from 'react';
+import { Ruler, RotateCcw } from 'lucide-react';
+import maplibregl from 'maplibre-gl';
+import { useRulerTool } from '../hooks/useRulerTool';
+
+export function RulerButton({ map }: { map: maplibregl.Map | null }) {
+    const { active, toggle, reset, formattedTotal, pointCount } = useRulerTool(map);
+
+    return (
+        <>
+            <button
+                onClick={toggle}
+                className={`p-1 flex items-center gap-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors font-medium ${
+                    active
+                        ? 'bg-amber-50 dark:bg-amber-900/30 text-amber-600'
+                        : 'text-gray-500'
+                }`}
+                title={active ? 'Disable Ruler' : 'Measure Distance'}
+            >
+                <Ruler className="w-3.5 h-3.5" />
+                {active && pointCount >= 2 && (
+                    <span className="text-[10px] font-mono font-bold">{formattedTotal}</span>
+                )}
+            </button>
+            {active && pointCount > 0 && (
+                <button
+                    onClick={reset}
+                    className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 hover:text-amber-600 transition-colors"
+                    title="Clear Measurement"
+                >
+                    <RotateCcw className="w-3 h-3" />
+                </button>
+            )}
+        </>
+    );
+}
diff --git a/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx b/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx
index dcaea263..4f15b2b1 100644
--- a/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx
+++ b/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx
@@ -1,171 +1,171 @@
-import React, { useEffect } from 'react';
-import maplibregl from 'maplibre-gl';
-
-export function LiveSearchLayers({ map, liveAreas, liveRadii, liveNodes, isDarkStyle }: { map: maplibregl.Map, liveAreas: any[], liveRadii: any[], liveNodes: any[], isDarkStyle: boolean }) {
-    useEffect(() => {
-        if (!map) return;
-
-        // Add source if not present
-        if (!map.getSource('live-areas')) {
-            map.addSource('live-areas', {
-                type: 'geojson',
-                data: { type: 'FeatureCollection', features: [] }
-            });
-            map.addLayer({
-                id: 'live-areas-fill',
-                type: 'fill',
-                source: 'live-areas',
-                paint: {
-                    'fill-color': '#eab308', // yellow-500
-                    'fill-opacity': 0.15
-                }
-            });
-            map.addLayer({
-                id: 'live-areas-line',
-                type: 'line',
-                source: 'live-areas',
-                paint: {
-                    'line-color': '#eab308',
-                    'line-width': 2,
-                    'line-dasharray': [2, 2]
-                }
-            });
-        }
-
-        if (!map.getSource('live-radii')) {
-            map.addSource('live-radii', {
-                type: 'geojson',
-                data: { type: 'FeatureCollection', features: [] }
-            });
-            map.addLayer({
-                id: 'live-radii-fill',
-                type: 'fill',
-                source: 'live-radii',
-                paint: {
-                    'fill-color': '#3b82f6', // blue-500
-                    'fill-opacity': 0.1
-                }
-            });
-            map.addLayer({
-                id: 'live-radii-line',
-                type: 'line',
-                source: 'live-radii',
-                paint: {
-                    'line-color': '#3b82f6',
-                    'line-width': 2
-                }
-            });
-        }
-
-        if (!map.getSource('live-nodes')) {
-            map.addSource('live-nodes', {
-                type: 'geojson',
-                data: { type: 'FeatureCollection', features: [] }
-            });
-            map.addLayer({
-                id: 'live-nodes-circle',
-                type: 'circle',
-                source: 'live-nodes',
-                paint: {
-                    'circle-radius': 4,
-                    'circle-color': '#f43f5e', // rose-500
-                    'circle-stroke-width': 1,
-                    'circle-stroke-color': '#ffffff'
-                }
-            });
-        }
-
-    }, [map]);
-
-    useEffect(() => {
-        if (!map || !map.getSource('live-areas')) return;
-
-        const features = liveAreas.map(a => {
-            // Assuming the boundary comes as geojson
-            const geom = a.boundary || a.geojson || a.geom;
-            if (geom) {
-                return {
-                    type: 'Feature',
-                    properties: { name: a.name },
-                    geometry: geom
-                };
-            }
-            return null;
-        }).filter(Boolean);
-
-        (map.getSource('live-areas') as maplibregl.GeoJSONSource).setData({
-            type: 'FeatureCollection',
-            features: features as any
-        });
-    }, [map, liveAreas]);
-
-    useEffect(() => {
-        if (!map || !map.getSource('live-radii')) return;
-
-        // Radii usually come as center + radius
-        // Let's create a rough circle polygon using basic math if there is no boundary
-        const features = liveRadii.map(r => {
-            const center = r.location?.location || r.center || r;
-            const radiusInKm = r.radius || r.radius_km;
-            if (center && radiusInKm) {
-                const lng = center.lng || center.lon;
-                if (lng === undefined || center.lat === undefined) return null;
-
-                // Return a circle polygon
-                const points = 64;
-                const coords = [];
-                const distanceX = radiusInKm / (111.320 * Math.cos((center.lat * Math.PI) / 180));
-                const distanceY = radiusInKm / 110.574;
-
-                for (let i = 0; i < points; i++) {
-                    const theta = (i / points) * (2 * Math.PI);
-                    const x = distanceX * Math.cos(theta);
-                    const y = distanceY * Math.sin(theta);
-                    coords.push([lng + x, center.lat + y]);
-                }
-                coords.push(coords[0]); // close polygon
-
-                return {
-                    type: 'Feature',
-                    properties: { name: r.name || 'Radius' },
-                    geometry: {
-                        type: 'Polygon',
-                        coordinates: [coords]
-                    }
-                };
-            }
-            return null;
-        }).filter(Boolean);
-
-        (map.getSource('live-radii') as maplibregl.GeoJSONSource).setData({
-            type: 'FeatureCollection',
-            features: features as any
-        });
-    }, [map, liveRadii]);
-
-    useEffect(() => {
-        if (!map || !map.getSource('live-nodes')) return;
-
-        const features = liveNodes.map(n => {
-            const loc = n.location || n;
-            if (loc && typeof loc.lat === 'number' && typeof loc.lng === 'number') {
-                return {
-                    type: 'Feature',
-                    properties: { name: n.name || 'Node' },
-                    geometry: {
-                        type: 'Point',
-                        coordinates: [loc.lng, loc.lat]
-                    }
-                };
-            }
-            return null;
-        }).filter(Boolean);
-
-        (map.getSource('live-nodes') as maplibregl.GeoJSONSource).setData({
-            type: 'FeatureCollection',
-            features: features as any
-        });
-    }, [map, liveNodes]);
-
-    return null;
-}
+import React, { useEffect } from 'react';
+import maplibregl from 'maplibre-gl';
+
+export function LiveSearchLayers({ map, liveAreas, liveRadii, liveNodes, isDarkStyle }: { map: maplibregl.Map, liveAreas: any[], liveRadii: any[], liveNodes: any[], isDarkStyle: boolean }) {
+    useEffect(() => {
+        if (!map) return;
+
+        // Add source if not present
+        if (!map.getSource('live-areas')) {
+            map.addSource('live-areas', {
+                type: 'geojson',
+                data: { type: 'FeatureCollection', features: [] }
+            });
+            map.addLayer({
+                id: 'live-areas-fill',
+                type: 'fill',
+                source: 'live-areas',
+                paint: {
+                    'fill-color': '#eab308', // yellow-500
+                    'fill-opacity': 0.15
+                }
+            });
+            map.addLayer({
+                id: 'live-areas-line',
+                type: 'line',
+                source: 'live-areas',
+                paint: {
+                    'line-color': '#eab308',
+                    'line-width': 2,
+                    'line-dasharray': [2, 2]
+                }
+            });
+        }
+
+        if (!map.getSource('live-radii')) {
+            map.addSource('live-radii', {
+                type: 'geojson',
+                data: { type: 'FeatureCollection', features: [] }
+            });
+            map.addLayer({
+                id: 'live-radii-fill',
+                type: 'fill',
+                source: 'live-radii',
+                paint: {
+                    'fill-color': '#3b82f6', // blue-500
+                    'fill-opacity': 0.1
+                }
+            });
+            map.addLayer({
+                id: 'live-radii-line',
+                type: 'line',
+                source: 'live-radii',
+                paint: {
+                    'line-color': '#3b82f6',
+                    'line-width': 2
+                }
+            });
+        }
+
+        if (!map.getSource('live-nodes')) {
+            map.addSource('live-nodes', {
+                type: 'geojson',
+                data: { type: 'FeatureCollection', features: [] }
+            });
+            map.addLayer({
+                id: 'live-nodes-circle',
+                type: 'circle',
+                source: 'live-nodes',
+                paint: {
+                    'circle-radius': 4,
+                    'circle-color': '#f43f5e', // rose-500
+                    'circle-stroke-width': 1,
+                    'circle-stroke-color': '#ffffff'
+                }
+            });
+        }
+
+    }, [map]);
+
+    useEffect(() => {
+        if (!map || !map.getSource('live-areas')) return;
+
+        const features = liveAreas.map(a => {
+            // Assuming the boundary comes as geojson
+            const geom = a.boundary || a.geojson || a.geom;
+            if (geom) {
+                return {
+                    type: 'Feature',
+                    properties: { name: a.name },
+                    geometry: geom
+                };
+            }
+            return null;
+        }).filter(Boolean);
+
+        (map.getSource('live-areas') as maplibregl.GeoJSONSource).setData({
+            type: 'FeatureCollection',
+            features: features as any
+        });
+    }, [map, liveAreas]);
+
+    useEffect(() => {
+        if (!map || !map.getSource('live-radii')) return;
+
+        // Radii usually come as center + radius
+        // Let's create a rough circle polygon using basic math if there is no boundary
+        const features = liveRadii.map(r => {
+            const center = r.location?.location || r.center || r;
+            const radiusInKm = r.radius || r.radius_km;
+            if (center && radiusInKm) {
+                const lng = center.lng || center.lon;
+                if (lng === undefined || center.lat === undefined) return null;
+
+                // Return a circle polygon
+                const points = 64;
+                const coords = [];
+                const distanceX = radiusInKm / (111.320 * Math.cos((center.lat * Math.PI) / 180));
+                const distanceY = radiusInKm / 110.574;
+
+                for (let i = 0; i < points; i++) {
+                    const theta = (i / points) * (2 * Math.PI);
+                    const x = distanceX * Math.cos(theta);
+                    const y = distanceY * Math.sin(theta);
+                    coords.push([lng + x, center.lat + y]);
+                }
+                coords.push(coords[0]); // close polygon
+
+                return {
+                    type: 'Feature',
+                    properties: { name: r.name || 'Radius' },
+                    geometry: {
+                        type: 'Polygon',
+                        coordinates: [coords]
+                    }
+                };
+            }
+            return null;
+        }).filter(Boolean);
+
+        (map.getSource('live-radii') as maplibregl.GeoJSONSource).setData({
+            type: 'FeatureCollection',
+            features: features as any
+        });
+    }, [map, liveRadii]);
+
+    useEffect(() => {
+        if (!map || !map.getSource('live-nodes')) return;
+
+        const features = liveNodes.map(n => {
+            const loc = n.location || n;
+            if (loc && typeof loc.lat === 'number' && typeof loc.lng === 'number') {
+                return {
+                    type: 'Feature',
+                    properties: { name: n.name || 'Node' },
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [loc.lng, loc.lat]
+                    }
+                };
+            }
+            return null;
+        }).filter(Boolean);
+
+        (map.getSource('live-nodes') as maplibregl.GeoJSONSource).setData({
+            type: 'FeatureCollection',
+            features: features as any
+        });
+    }, [map, liveNodes]);
+
+    return null;
+}
diff --git a/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx b/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx
index 8558301a..cc135105 100644
--- a/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx
+++ b/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx
@@ -1,239 +1,239 @@
-import { useEffect, useRef } from 'react';
-import maplibregl from 'maplibre-gl';
-
-export interface RegionLayersProps {
-    map: maplibregl.Map | null;
-    isDarkStyle: boolean;
-    bboxesFeatureCollection?: any;
-    polygonsFeatureCollection?: any;
-    pickerPolygons?: any[];
-    showDensity?: boolean;
-    showCenters?: boolean;
-}
-
-const emptyFc = { type: 'FeatureCollection', features: [] };
-
-export function RegionLayers({
-    map,
-    isDarkStyle,
-    bboxesFeatureCollection,
-    polygonsFeatureCollection,
-    pickerPolygons,
-    showDensity = false,
-    showCenters = false
-}: RegionLayersProps) {
-
-    const isDarkStyleRef = useRef(isDarkStyle);
-    isDarkStyleRef.current = isDarkStyle;
-    
-    const showDensityRef = useRef(showDensity);
-    showDensityRef.current = showDensity;
-
-    const bboxesCollectionRef = useRef(bboxesFeatureCollection);
-    bboxesCollectionRef.current = bboxesFeatureCollection;
-    
-    const polygonsCollectionRef = useRef(polygonsFeatureCollection);
-    polygonsCollectionRef.current = polygonsFeatureCollection;
-
-    const ghsCentersDataRef = useRef<any>(emptyFc);
-
-    // Add Sources and Layers
-    useEffect(() => {
-        if (!map) return;
-
-        const setupMapLayers = () => {
-            if (!map.getStyle()) return;
-
-            const currentIsDark = isDarkStyleRef.current;
-            const currentShowDensity = showDensityRef.current;
-
-            // Add Sources
-            if (!map.getSource('grid-bboxes')) map.addSource('grid-bboxes', { type: 'geojson', data: bboxesCollectionRef.current || emptyFc as any });
-            if (!map.getSource('grid-polygons')) map.addSource('grid-polygons', { type: 'geojson', data: polygonsCollectionRef.current || emptyFc as any });
-            if (!map.getSource('ghs-centers')) map.addSource('ghs-centers', { type: 'geojson', data: ghsCentersDataRef.current || emptyFc as any });
-
-            // Add Layers
-            if (!map.getLayer('polygons-fill')) {
-                map.addLayer({ 
-                    id: 'polygons-fill', type: 'fill', source: 'grid-polygons', 
-                    paint: { 'fill-color': currentIsDark ? '#3b82f6' : '#2563eb', 'fill-opacity': currentIsDark ? 0.3 : 0.5 },
-                    layout: { visibility: currentShowDensity ? 'none' : 'visible' }
-                });
-            }
-
-            if (!map.getLayer('polygons-line')) {
-                map.addLayer({ 
-                    id: 'polygons-line', type: 'line', source: 'grid-polygons', 
-                    paint: { 'line-color': currentIsDark ? '#2563eb' : '#1d4ed8', 'line-width': currentIsDark ? 2 : 3 },
-                    layout: { visibility: currentShowDensity ? 'none' : 'visible' }
-                });
-            }
-
-            if (!map.getLayer('bboxes-fill')) {
-                map.addLayer({ 
-                    id: 'bboxes-fill', type: 'fill', source: 'grid-bboxes', 
-                    paint: { 'fill-color': '#f59e0b', 'fill-opacity': 0 } 
-                });
-            }
-
-            if (!map.getLayer('bboxes-line')) {
-                map.addLayer({ 
-                    id: 'bboxes-line', type: 'line', source: 'grid-bboxes', 
-                    paint: { 'line-color': '#d97706', 'line-width': 2, 'line-dasharray': [2, 2] } 
-                });
-            }
-
-            if (!map.getLayer('density-fill')) {
-                map.addLayer({
-                    id: 'density-fill', type: 'fill', source: 'grid-bboxes',
-                    layout: { visibility: currentShowDensity ? 'visible' : 'none' },
-                    paint: {
-                        'fill-color': [
-                            'case',
-                            ['all', ['has', 'population'], ['has', 'areaSqKm'], ['>', ['get', 'areaSqKm'], 0]],
-                            ['interpolate', ['linear'], ['/', ['get', 'population'], ['get', 'areaSqKm']],
-                                0, '#f7fcf5', 50, '#c7e9c0', 200, '#74c476', 500, '#31a354', 1000, '#006d2c', 5000, '#00441b'],
-                            '#cccccc'
-                        ],
-                        'fill-opacity': 0.65
-                    }
-                });
-            }
-
-            if (!map.getLayer('ghs-centers-points')) {
-                map.addLayer({
-                    id: 'ghs-centers-points',
-                    type: 'circle',
-                    source: 'ghs-centers',
-                    paint: {
-                        'circle-radius': [
-                            'case',
-                            ['==', ['get', 'isMain'], true],
-                            ['match', ['get', 'type'], 'pop', 7, 'built', 6, 5],
-                            ['match', ['get', 'type'], 'pop', 4, 'built', 3, 3]
-                        ],
-                        'circle-color': ['match', ['get', 'type'], 'pop', '#facc15', 'built', '#f87171', '#aaaaaa'],
-                        'circle-stroke-width': 1,
-                        'circle-stroke-color': '#000000',
-                        'circle-opacity': [
-                            'case',
-                            ['==', ['get', 'isMain'], true],
-                            0.9,
-                            0.7
-                        ]
-                    }
-                });
-            }
-        };
-
-        if (map.getStyle()) setupMapLayers();
-        map.on('styledata', setupMapLayers);
-        map.on('style.load', setupMapLayers);
-
-        return () => {
-            map.off('styledata', setupMapLayers);
-            map.off('style.load', setupMapLayers);
-            if (map.getStyle()) {
-                if (map.getLayer('polygons-fill')) map.removeLayer('polygons-fill');
-                if (map.getLayer('polygons-line')) map.removeLayer('polygons-line');
-                if (map.getLayer('bboxes-fill')) map.removeLayer('bboxes-fill');
-                if (map.getLayer('bboxes-line')) map.removeLayer('bboxes-line');
-                if (map.getLayer('density-fill')) map.removeLayer('density-fill');
-                if (map.getLayer('ghs-centers-points')) map.removeLayer('ghs-centers-points');
-                if (map.getSource('grid-bboxes')) map.removeSource('grid-bboxes');
-                if (map.getSource('grid-polygons')) map.removeSource('grid-polygons');
-                if (map.getSource('ghs-centers')) map.removeSource('ghs-centers');
-            }
-        };
-    }, [map]);
-
-    // Update Styles
-    useEffect(() => {
-        if (!map || !map.getStyle()) return;
-        
-        if (map.getLayer('polygons-fill')) {
-            map.setPaintProperty('polygons-fill', 'fill-color', isDarkStyle ? '#3b82f6' : '#2563eb');
-            map.setPaintProperty('polygons-fill', 'fill-opacity', isDarkStyle ? 0.3 : 0.5);
-            map.setLayoutProperty('polygons-fill', 'visibility', showDensity ? 'none' : 'visible');
-        }
-
-        if (map.getLayer('polygons-line')) {
-            map.setPaintProperty('polygons-line', 'line-color', isDarkStyle ? '#2563eb' : '#1d4ed8');
-            map.setPaintProperty('polygons-line', 'line-width', isDarkStyle ? 2 : 3);
-            map.setLayoutProperty('polygons-line', 'visibility', showDensity ? 'none' : 'visible');
-        }
-
-        if (map.getLayer('density-fill')) {
-            map.setLayoutProperty('density-fill', 'visibility', showDensity ? 'visible' : 'none');
-        }
-    }, [map, isDarkStyle, showDensity]);
-
-    // Update GHS Centers Source
-    useEffect(() => {
-        if (!map) return;
-        try {
-            if (showCenters && pickerPolygons && pickerPolygons.length > 0) {
-                const features: any[] = [];
-                pickerPolygons.forEach(fc => {
-                    if (fc && fc.features) {
-                        fc.features.forEach((f: any) => {
-                            if (f.properties?.ghsBuiltCenter) {
-                                features.push({
-                                    type: 'Feature',
-                                    geometry: { type: 'Point', coordinates: f.properties.ghsBuiltCenter },
-                                    properties: { type: 'built', isMain: true }
-                                });
-                            }
-                            if (f.properties?.ghsPopCenter) {
-                                features.push({
-                                    type: 'Feature',
-                                    geometry: { type: 'Point', coordinates: f.properties.ghsPopCenter },
-                                    properties: { type: 'pop', isMain: true }
-                                });
-                            }
-                            if (Array.isArray(f.properties?.ghsBuiltCenters)) {
-                                f.properties.ghsBuiltCenters.forEach((c: number[]) => {
-                                    features.push({
-                                        type: 'Feature',
-                                        geometry: { type: 'Point', coordinates: [c[0], c[1]] },
-                                        properties: { type: 'built', isMain: false, value: c[2] }
-                                    });
-                                });
-                            }
-                            if (Array.isArray(f.properties?.ghsPopCenters)) {
-                                f.properties.ghsPopCenters.forEach((c: number[]) => {
-                                    features.push({
-                                        type: 'Feature',
-                                        geometry: { type: 'Point', coordinates: [c[0], c[1]] },
-                                        properties: { type: 'pop', isMain: false, value: c[2] }
-                                    });
-                                });
-                            }
-                        });
-                    }
-                });
-                const newData = { type: 'FeatureCollection', features };
-                ghsCentersDataRef.current = newData;
-                if (map.getSource('ghs-centers')) (map.getSource('ghs-centers') as maplibregl.GeoJSONSource).setData(newData as any);
-            } else {
-                ghsCentersDataRef.current = emptyFc;
-                if (map.getSource('ghs-centers')) (map.getSource('ghs-centers') as maplibregl.GeoJSONSource).setData(emptyFc as any);
-            }
-        } catch (e) {
-            console.warn("Could not set ghs-centers", e);
-        }
-    }, [map, showCenters, pickerPolygons]);
-
-    // Update Bboxes and Polygons Features
-    useEffect(() => {
-        if (!map) return;
-        try {
-            if (map.getSource('grid-bboxes')) (map.getSource('grid-bboxes') as maplibregl.GeoJSONSource).setData(bboxesFeatureCollection || emptyFc as any);
-            if (map.getSource('grid-polygons')) (map.getSource('grid-polygons') as maplibregl.GeoJSONSource).setData(polygonsFeatureCollection || emptyFc as any);
-        } catch (e) {
-            console.warn("Could not update grid-bboxes or grid-polygons", e);
-        }
-    }, [map, bboxesFeatureCollection, polygonsFeatureCollection]);
-
-    return null;
-}
+import { useEffect, useRef } from 'react';
+import maplibregl from 'maplibre-gl';
+
+export interface RegionLayersProps {
+    map: maplibregl.Map | null;
+    isDarkStyle: boolean;
+    bboxesFeatureCollection?: any;
+    polygonsFeatureCollection?: any;
+    pickerPolygons?: any[];
+    showDensity?: boolean;
+    showCenters?: boolean;
+}
+
+const emptyFc = { type: 'FeatureCollection', features: [] };
+
+export function RegionLayers({
+    map,
+    isDarkStyle,
+    bboxesFeatureCollection,
+    polygonsFeatureCollection,
+    pickerPolygons,
+    showDensity = false,
+    showCenters = false
+}: RegionLayersProps) {
+
+    const isDarkStyleRef = useRef(isDarkStyle);
+    isDarkStyleRef.current = isDarkStyle;
+    
+    const showDensityRef = useRef(showDensity);
+    showDensityRef.current = showDensity;
+
+    const bboxesCollectionRef = useRef(bboxesFeatureCollection);
+    bboxesCollectionRef.current = bboxesFeatureCollection;
+    
+    const polygonsCollectionRef = useRef(polygonsFeatureCollection);
+    polygonsCollectionRef.current = polygonsFeatureCollection;
+
+    const ghsCentersDataRef = useRef<any>(emptyFc);
+
+    // Add Sources and Layers
+    useEffect(() => {
+        if (!map) return;
+
+        const setupMapLayers = () => {
+            if (!map.getStyle()) return;
+
+            const currentIsDark = isDarkStyleRef.current;
+            const currentShowDensity = showDensityRef.current;
+
+            // Add Sources
+            if (!map.getSource('grid-bboxes')) map.addSource('grid-bboxes', { type: 'geojson', data: bboxesCollectionRef.current || emptyFc as any });
+            if (!map.getSource('grid-polygons')) map.addSource('grid-polygons', { type: 'geojson', data: polygonsCollectionRef.current || emptyFc as any });
+            if (!map.getSource('ghs-centers')) map.addSource('ghs-centers', { type: 'geojson', data: ghsCentersDataRef.current || emptyFc as any });
+
+            // Add Layers
+            if (!map.getLayer('polygons-fill')) {
+                map.addLayer({ 
+                    id: 'polygons-fill', type: 'fill', source: 'grid-polygons', 
+                    paint: { 'fill-color': currentIsDark ? '#3b82f6' : '#2563eb', 'fill-opacity': currentIsDark ? 0.3 : 0.5 },
+                    layout: { visibility: currentShowDensity ? 'none' : 'visible' }
+                });
+            }
+
+            if (!map.getLayer('polygons-line')) {
+                map.addLayer({ 
+                    id: 'polygons-line', type: 'line', source: 'grid-polygons', 
+                    paint: { 'line-color': currentIsDark ? '#2563eb' : '#1d4ed8', 'line-width': currentIsDark ? 2 : 3 },
+                    layout: { visibility: currentShowDensity ? 'none' : 'visible' }
+                });
+            }
+
+            if (!map.getLayer('bboxes-fill')) {
+                map.addLayer({ 
+                    id: 'bboxes-fill', type: 'fill', source: 'grid-bboxes', 
+                    paint: { 'fill-color': '#f59e0b', 'fill-opacity': 0 } 
+                });
+            }
+
+            if (!map.getLayer('bboxes-line')) {
+                map.addLayer({ 
+                    id: 'bboxes-line', type: 'line', source: 'grid-bboxes', 
+                    paint: { 'line-color': '#d97706', 'line-width': 2, 'line-dasharray': [2, 2] } 
+                });
+            }
+
+            if (!map.getLayer('density-fill')) {
+                map.addLayer({
+                    id: 'density-fill', type: 'fill', source: 'grid-bboxes',
+                    layout: { visibility: currentShowDensity ? 'visible' : 'none' },
+                    paint: {
+                        'fill-color': [
+                            'case',
+                            ['all', ['has', 'population'], ['has', 'areaSqKm'], ['>', ['get', 'areaSqKm'], 0]],
+                            ['interpolate', ['linear'], ['/', ['get', 'population'], ['get', 'areaSqKm']],
+                                0, '#f7fcf5', 50, '#c7e9c0', 200, '#74c476', 500, '#31a354', 1000, '#006d2c', 5000, '#00441b'],
+                            '#cccccc'
+                        ],
+                        'fill-opacity': 0.65
+                    }
+                });
+            }
+
+            if (!map.getLayer('ghs-centers-points')) {
+                map.addLayer({
+                    id: 'ghs-centers-points',
+                    type: 'circle',
+                    source: 'ghs-centers',
+                    paint: {
+                        'circle-radius': [
+                            'case',
+                            ['==', ['get', 'isMain'], true],
+                            ['match', ['get', 'type'], 'pop', 7, 'built', 6, 5],
+                            ['match', ['get', 'type'], 'pop', 4, 'built', 3, 3]
+                        ],
+                        'circle-color': ['match', ['get', 'type'], 'pop', '#facc15', 'built', '#f87171', '#aaaaaa'],
+                        'circle-stroke-width': 1,
+                        'circle-stroke-color': '#000000',
+                        'circle-opacity': [
+                            'case',
+                            ['==', ['get', 'isMain'], true],
+                            0.9,
+                            0.7
+                        ]
+                    }
+                });
+            }
+        };
+
+        if (map.getStyle()) setupMapLayers();
+        map.on('styledata', setupMapLayers);
+        map.on('style.load', setupMapLayers);
+
+        return () => {
+            map.off('styledata', setupMapLayers);
+            map.off('style.load', setupMapLayers);
+            if (map.getStyle()) {
+                if (map.getLayer('polygons-fill')) map.removeLayer('polygons-fill');
+                if (map.getLayer('polygons-line')) map.removeLayer('polygons-line');
+                if (map.getLayer('bboxes-fill')) map.removeLayer('bboxes-fill');
+                if (map.getLayer('bboxes-line')) map.removeLayer('bboxes-line');
+                if (map.getLayer('density-fill')) map.removeLayer('density-fill');
+                if (map.getLayer('ghs-centers-points')) map.removeLayer('ghs-centers-points');
+                if (map.getSource('grid-bboxes')) map.removeSource('grid-bboxes');
+                if (map.getSource('grid-polygons')) map.removeSource('grid-polygons');
+                if (map.getSource('ghs-centers')) map.removeSource('ghs-centers');
+            }
+        };
+    }, [map]);
+
+    // Update Styles
+    useEffect(() => {
+        if (!map || !map.getStyle()) return;
+        
+        if (map.getLayer('polygons-fill')) {
+            map.setPaintProperty('polygons-fill', 'fill-color', isDarkStyle ? '#3b82f6' : '#2563eb');
+            map.setPaintProperty('polygons-fill', 'fill-opacity', isDarkStyle ? 0.3 : 0.5);
+            map.setLayoutProperty('polygons-fill', 'visibility', showDensity ? 'none' : 'visible');
+        }
+
+        if (map.getLayer('polygons-line')) {
+            map.setPaintProperty('polygons-line', 'line-color', isDarkStyle ? '#2563eb' : '#1d4ed8');
+            map.setPaintProperty('polygons-line', 'line-width', isDarkStyle ? 2 : 3);
+            map.setLayoutProperty('polygons-line', 'visibility', showDensity ? 'none' : 'visible');
+        }
+
+        if (map.getLayer('density-fill')) {
+            map.setLayoutProperty('density-fill', 'visibility', showDensity ? 'visible' : 'none');
+        }
+    }, [map, isDarkStyle, showDensity]);
+
+    // Update GHS Centers Source
+    useEffect(() => {
+        if (!map) return;
+        try {
+            if (showCenters && pickerPolygons && pickerPolygons.length > 0) {
+                const features: any[] = [];
+                pickerPolygons.forEach(fc => {
+                    if (fc && fc.features) {
+                        fc.features.forEach((f: any) => {
+                            if (f.properties?.ghsBuiltCenter) {
+                                features.push({
+                                    type: 'Feature',
+                                    geometry: { type: 'Point', coordinates: f.properties.ghsBuiltCenter },
+                                    properties: { type: 'built', isMain: true }
+                                });
+                            }
+                            if (f.properties?.ghsPopCenter) {
+                                features.push({
+                                    type: 'Feature',
+                                    geometry: { type: 'Point', coordinates: f.properties.ghsPopCenter },
+                                    properties: { type: 'pop', isMain: true }
+                                });
+                            }
+                            if (Array.isArray(f.properties?.ghsBuiltCenters)) {
+                                f.properties.ghsBuiltCenters.forEach((c: number[]) => {
+                                    features.push({
+                                        type: 'Feature',
+                                        geometry: { type: 'Point', coordinates: [c[0], c[1]] },
+                                        properties: { type: 'built', isMain: false, value: c[2] }
+                                    });
+                                });
+                            }
+                            if (Array.isArray(f.properties?.ghsPopCenters)) {
+                                f.properties.ghsPopCenters.forEach((c: number[]) => {
+                                    features.push({
+                                        type: 'Feature',
+                                        geometry: { type: 'Point', coordinates: [c[0], c[1]] },
+                                        properties: { type: 'pop', isMain: false, value: c[2] }
+                                    });
+                                });
+                            }
+                        });
+                    }
+                });
+                const newData = { type: 'FeatureCollection', features };
+                ghsCentersDataRef.current = newData;
+                if (map.getSource('ghs-centers')) (map.getSource('ghs-centers') as maplibregl.GeoJSONSource).setData(newData as any);
+            } else {
+                ghsCentersDataRef.current = emptyFc;
+                if (map.getSource('ghs-centers')) (map.getSource('ghs-centers') as maplibregl.GeoJSONSource).setData(emptyFc as any);
+            }
+        } catch (e) {
+            console.warn("Could not set ghs-centers", e);
+        }
+    }, [map, showCenters, pickerPolygons]);
+
+    // Update Bboxes and Polygons Features
+    useEffect(() => {
+        if (!map) return;
+        try {
+            if (map.getSource('grid-bboxes')) (map.getSource('grid-bboxes') as maplibregl.GeoJSONSource).setData(bboxesFeatureCollection || emptyFc as any);
+            if (map.getSource('grid-polygons')) (map.getSource('grid-polygons') as maplibregl.GeoJSONSource).setData(polygonsFeatureCollection || emptyFc as any);
+        } catch (e) {
+            console.warn("Could not update grid-bboxes or grid-polygons", e);
+        }
+    }, [map, bboxesFeatureCollection, polygonsFeatureCollection]);
+
+    return null;
+}
diff --git a/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx b/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx
index 649b223e..a32115d2 100644
--- a/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx
+++ b/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx
@@ -1,153 +1,153 @@
-import { useEffect, useRef } from 'react';
-import maplibregl from 'maplibre-gl';
-
-export interface SimulatorLayersProps {
-    map: maplibregl.Map | null;
-    isDarkStyle: boolean;
-    simulatorData?: any;
-    simulatorPath?: any;
-    simulatorScanner?: any;
-}
-
-const emptyFc = { type: 'FeatureCollection', features: [] };
-
-const pacmanOpenSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="30" height="30"><path d="M50,50 L100,25 A50,50 0 1,0 100,75 Z" fill="#eab308"/></svg>`;
-const pacmanClosedSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="30" height="30"><circle cx="50" cy="50" r="50" fill="#eab308"/></svg>`;
-
-export function SimulatorLayers({ map, isDarkStyle, simulatorData, simulatorPath, simulatorScanner }: SimulatorLayersProps) {
-    
-    const isDarkStyleRef = useRef(isDarkStyle);
-    isDarkStyleRef.current = isDarkStyle;
-
-    const simulatorDataRef = useRef(simulatorData);
-    simulatorDataRef.current = simulatorData;
-
-    const simulatorPathRef = useRef(simulatorPath);
-    simulatorPathRef.current = simulatorPath;
-
-    const simulatorScannerRef = useRef(simulatorScanner);
-    simulatorScannerRef.current = simulatorScanner;
-
-    // Add Sources and Layers (Mount/Unmount only!)
-    useEffect(() => {
-        if (!map) return;
-        
-        const setupMapLayers = () => {
-            if (!map.getStyle()) return;
-
-            const currentIsDark = isDarkStyleRef.current;
-
-            // Load Pacman Icons
-            const imgOpen = new Image(30, 30);
-            imgOpen.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(pacmanOpenSvg);
-            imgOpen.onload = () => { if (!map.hasImage('pacman-open')) map.addImage('pacman-open', imgOpen); };
-
-            const imgClosed = new Image(30, 30);
-            imgClosed.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(pacmanClosedSvg);
-            imgClosed.onload = () => { if (!map.hasImage('pacman-closed')) map.addImage('pacman-closed', imgClosed); };
-
-            if (!map.getSource('simulator-grid')) {
-                map.addSource('simulator-grid', { type: 'geojson', data: simulatorDataRef.current || emptyFc as any });
-            }
-            if (!map.getLayer('simulator-grid-fill')) {
-                map.addLayer({
-                    id: 'simulator-grid-fill',
-                    type: 'fill',
-                    source: 'simulator-grid',
-                    paint: {
-                        'fill-color': [
-                            'match', ['get', 'sim_status'],
-                            'pending', currentIsDark ? 'rgba(150, 150, 150, 0.2)' : 'rgba(0, 0, 0, 0.25)',
-                            'skipped', currentIsDark ? 'rgba(239, 68, 68, 0.3)' : 'rgba(220, 38, 38, 0.6)', 
-                            'processed', currentIsDark ? 'rgba(34, 197, 94, 0.4)' : 'rgba(22, 163, 74, 0.7)', 
-                            'rgba(0,0,0,0)'
-                        ],
-                        'fill-outline-color': currentIsDark ? 'rgba(150, 150, 150, 0.5)' : 'rgba(0, 0, 0, 0.6)'
-                    }
-                });
-            }
-
-            if (!map.getSource('simulator-path')) {
-                map.addSource('simulator-path', { type: 'geojson', data: simulatorPathRef.current || emptyFc as any });
-            }
-            if (!map.getLayer('simulator-path-line')) {
-                map.addLayer({
-                    id: 'simulator-path-line',
-                    type: 'line',
-                    source: 'simulator-path',
-                    paint: {
-                        'line-color': 'rgba(59, 130, 246, 0.4)',
-                        'line-width': 1.5,
-                        'line-dasharray': [3, 3]
-                    }
-                });
-            }
-
-            if (!map.getSource('simulator-scanner')) {
-                map.addSource('simulator-scanner', { type: 'geojson', data: simulatorScannerRef.current || emptyFc as any });
-            }
-            if (!map.getLayer('simulator-scanner-pacman')) {
-                map.addLayer({
-                    id: 'simulator-scanner-pacman',
-                    type: 'symbol',
-                    source: 'simulator-scanner',
-                    layout: {
-                        'icon-image': ['coalesce', ['get', 'icon_state'], 'pacman-open'],
-                        'icon-size': 1.0,
-                        'icon-rotate': ['-', ['get', 'bearing'], 90],
-                        'icon-rotation-alignment': 'map',
-                        'icon-allow-overlap': true,
-                        'icon-ignore-placement': true
-                    }
-                });
-            }
-        };
-
-        if (map.getStyle()) setupMapLayers();
-        map.on('styledata', setupMapLayers);
-        map.on('style.load', setupMapLayers);
-
-        return () => {
-            map.off('styledata', setupMapLayers);
-            map.off('style.load', setupMapLayers);
-            if (map.getStyle()) {
-                if (map.getLayer('simulator-grid-fill')) map.removeLayer('simulator-grid-fill');
-                if (map.getLayer('simulator-path-line')) map.removeLayer('simulator-path-line');
-                if (map.getLayer('simulator-scanner-pacman')) map.removeLayer('simulator-scanner-pacman');
-                if (map.getSource('simulator-grid')) map.removeSource('simulator-grid');
-                if (map.getSource('simulator-path')) map.removeSource('simulator-path');
-                if (map.getSource('simulator-scanner')) map.removeSource('simulator-scanner');
-            }
-        };
-    }, [map]);
-
-    // Update Styles when theme changes
-    useEffect(() => {
-        if (!map || !map.getStyle()) return;
-        if (map.getLayer('simulator-grid-fill')) {
-            map.setPaintProperty('simulator-grid-fill', 'fill-color', [
-                'match', ['get', 'sim_status'],
-                'pending', isDarkStyle ? 'rgba(150, 150, 150, 0.2)' : 'rgba(0, 0, 0, 0.25)',
-                'skipped', isDarkStyle ? 'rgba(239, 68, 68, 0.3)' : 'rgba(220, 38, 38, 0.6)', 
-                'processed', isDarkStyle ? 'rgba(34, 197, 94, 0.4)' : 'rgba(22, 163, 74, 0.7)', 
-                'rgba(0,0,0,0)'
-            ]);
-            map.setPaintProperty('simulator-grid-fill', 'fill-outline-color', isDarkStyle ? 'rgba(150, 150, 150, 0.5)' : 'rgba(0, 0, 0, 0.6)');
-        }
-    }, [map, isDarkStyle]);
-
-    // Update Data
-    useEffect(() => {
-        if (!map) return;
-        try {
-            if (map.getSource('simulator-grid')) (map.getSource('simulator-grid') as maplibregl.GeoJSONSource).setData(simulatorData || emptyFc as any);
-            if (map.getSource('simulator-path')) (map.getSource('simulator-path') as maplibregl.GeoJSONSource).setData(simulatorPath || emptyFc as any);
-            if (map.getSource('simulator-scanner')) (map.getSource('simulator-scanner') as maplibregl.GeoJSONSource).setData(simulatorScanner || emptyFc as any);
-            if (map.getLayer('simulator-scanner-pacman')) map.moveLayer('simulator-scanner-pacman');
-        } catch (e) {
-            console.warn("Could not update simulator data", e);
-        }
-    }, [map, simulatorData, simulatorPath, simulatorScanner]);
-
-    return null;
-}
+import { useEffect, useRef } from 'react';
+import maplibregl from 'maplibre-gl';
+
+export interface SimulatorLayersProps {
+    map: maplibregl.Map | null;
+    isDarkStyle: boolean;
+    simulatorData?: any;
+    simulatorPath?: any;
+    simulatorScanner?: any;
+}
+
+const emptyFc = { type: 'FeatureCollection', features: [] };
+
+const pacmanOpenSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="30" height="30"><path d="M50,50 L100,25 A50,50 0 1,0 100,75 Z" fill="#eab308"/></svg>`;
+const pacmanClosedSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="30" height="30"><circle cx="50" cy="50" r="50" fill="#eab308"/></svg>`;
+
+export function SimulatorLayers({ map, isDarkStyle, simulatorData, simulatorPath, simulatorScanner }: SimulatorLayersProps) {
+    
+    const isDarkStyleRef = useRef(isDarkStyle);
+    isDarkStyleRef.current = isDarkStyle;
+
+    const simulatorDataRef = useRef(simulatorData);
+    simulatorDataRef.current = simulatorData;
+
+    const simulatorPathRef = useRef(simulatorPath);
+    simulatorPathRef.current = simulatorPath;
+
+    const simulatorScannerRef = useRef(simulatorScanner);
+    simulatorScannerRef.current = simulatorScanner;
+
+    // Add Sources and Layers (Mount/Unmount only!)
+    useEffect(() => {
+        if (!map) return;
+        
+        const setupMapLayers = () => {
+            if (!map.getStyle()) return;
+
+            const currentIsDark = isDarkStyleRef.current;
+
+            // Load Pacman Icons
+            const imgOpen = new Image(30, 30);
+            imgOpen.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(pacmanOpenSvg);
+            imgOpen.onload = () => { if (!map.hasImage('pacman-open')) map.addImage('pacman-open', imgOpen); };
+
+            const imgClosed = new Image(30, 30);
+            imgClosed.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(pacmanClosedSvg);
+            imgClosed.onload = () => { if (!map.hasImage('pacman-closed')) map.addImage('pacman-closed', imgClosed); };
+
+            if (!map.getSource('simulator-grid')) {
+                map.addSource('simulator-grid', { type: 'geojson', data: simulatorDataRef.current || emptyFc as any });
+            }
+            if (!map.getLayer('simulator-grid-fill')) {
+                map.addLayer({
+                    id: 'simulator-grid-fill',
+                    type: 'fill',
+                    source: 'simulator-grid',
+                    paint: {
+                        'fill-color': [
+                            'match', ['get', 'sim_status'],
+                            'pending', currentIsDark ? 'rgba(150, 150, 150, 0.2)' : 'rgba(0, 0, 0, 0.25)',
+                            'skipped', currentIsDark ? 'rgba(239, 68, 68, 0.3)' : 'rgba(220, 38, 38, 0.6)', 
+                            'processed', currentIsDark ? 'rgba(34, 197, 94, 0.4)' : 'rgba(22, 163, 74, 0.7)', 
+                            'rgba(0,0,0,0)'
+                        ],
+                        'fill-outline-color': currentIsDark ? 'rgba(150, 150, 150, 0.5)' : 'rgba(0, 0, 0, 0.6)'
+                    }
+                });
+            }
+
+            if (!map.getSource('simulator-path')) {
+                map.addSource('simulator-path', { type: 'geojson', data: simulatorPathRef.current || emptyFc as any });
+            }
+            if (!map.getLayer('simulator-path-line')) {
+                map.addLayer({
+                    id: 'simulator-path-line',
+                    type: 'line',
+                    source: 'simulator-path',
+                    paint: {
+                        'line-color': 'rgba(59, 130, 246, 0.4)',
+                        'line-width': 1.5,
+                        'line-dasharray': [3, 3]
+                    }
+                });
+            }
+
+            if (!map.getSource('simulator-scanner')) {
+                map.addSource('simulator-scanner', { type: 'geojson', data: simulatorScannerRef.current || emptyFc as any });
+            }
+            if (!map.getLayer('simulator-scanner-pacman')) {
+                map.addLayer({
+                    id: 'simulator-scanner-pacman',
+                    type: 'symbol',
+                    source: 'simulator-scanner',
+                    layout: {
+                        'icon-image': ['coalesce', ['get', 'icon_state'], 'pacman-open'],
+                        'icon-size': 1.0,
+                        'icon-rotate': ['-', ['get', 'bearing'], 90],
+                        'icon-rotation-alignment': 'map',
+                        'icon-allow-overlap': true,
+                        'icon-ignore-placement': true
+                    }
+                });
+            }
+        };
+
+        if (map.getStyle()) setupMapLayers();
+        map.on('styledata', setupMapLayers);
+        map.on('style.load', setupMapLayers);
+
+        return () => {
+            map.off('styledata', setupMapLayers);
+            map.off('style.load', setupMapLayers);
+            if (map.getStyle()) {
+                if (map.getLayer('simulator-grid-fill')) map.removeLayer('simulator-grid-fill');
+                if (map.getLayer('simulator-path-line')) map.removeLayer('simulator-path-line');
+                if (map.getLayer('simulator-scanner-pacman')) map.removeLayer('simulator-scanner-pacman');
+                if (map.getSource('simulator-grid')) map.removeSource('simulator-grid');
+                if (map.getSource('simulator-path')) map.removeSource('simulator-path');
+                if (map.getSource('simulator-scanner')) map.removeSource('simulator-scanner');
+            }
+        };
+    }, [map]);
+
+    // Update Styles when theme changes
+    useEffect(() => {
+        if (!map || !map.getStyle()) return;
+        if (map.getLayer('simulator-grid-fill')) {
+            map.setPaintProperty('simulator-grid-fill', 'fill-color', [
+                'match', ['get', 'sim_status'],
+                'pending', isDarkStyle ? 'rgba(150, 150, 150, 0.2)' : 'rgba(0, 0, 0, 0.25)',
+                'skipped', isDarkStyle ? 'rgba(239, 68, 68, 0.3)' : 'rgba(220, 38, 38, 0.6)', 
+                'processed', isDarkStyle ? 'rgba(34, 197, 94, 0.4)' : 'rgba(22, 163, 74, 0.7)', 
+                'rgba(0,0,0,0)'
+            ]);
+            map.setPaintProperty('simulator-grid-fill', 'fill-outline-color', isDarkStyle ? 'rgba(150, 150, 150, 0.5)' : 'rgba(0, 0, 0, 0.6)');
+        }
+    }, [map, isDarkStyle]);
+
+    // Update Data
+    useEffect(() => {
+        if (!map) return;
+        try {
+            if (map.getSource('simulator-grid')) (map.getSource('simulator-grid') as maplibregl.GeoJSONSource).setData(simulatorData || emptyFc as any);
+            if (map.getSource('simulator-path')) (map.getSource('simulator-path') as maplibregl.GeoJSONSource).setData(simulatorPath || emptyFc as any);
+            if (map.getSource('simulator-scanner')) (map.getSource('simulator-scanner') as maplibregl.GeoJSONSource).setData(simulatorScanner || emptyFc as any);
+            if (map.getLayer('simulator-scanner-pacman')) map.moveLayer('simulator-scanner-pacman');
+        } catch (e) {
+            console.warn("Could not update simulator data", e);
+        }
+    }, [map, simulatorData, simulatorPath, simulatorScanner]);
+
+    return null;
+}
diff --git a/packages/ui/src/modules/places/components/map-styles.ts b/packages/ui/src/modules/places/components/map-styles.ts
index 08cbac48..df6f569b 100644
--- a/packages/ui/src/modules/places/components/map-styles.ts
+++ b/packages/ui/src/modules/places/components/map-styles.ts
@@ -1,40 +1,40 @@
-export const MAP_STYLE_OSM_3D = {
-    version: 8 as const,
-    sources: {
-        osm: {
-            type: 'raster' as const,
-            tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
-            tileSize: 256,
-            attribution: '&copy; OpenStreetMap Contributors',
-            maxzoom: 19
-        },
-        terrainSource: {
-            type: 'raster-dem' as const,
-            url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9',
-            tileSize: 256
-        },
-        hillshadeSource: {
-            type: 'raster-dem' as const,
-            url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9',
-            tileSize: 256
-        }
-    },
-    layers: [
-        { id: 'osm', type: 'raster' as const, source: 'osm' },
-        {
-            id: 'hills', type: 'hillshade' as const, source: 'hillshadeSource',
-            layout: { visibility: 'visible' as const },
-            paint: { 'hillshade-shadow-color': '#473B24' }
-        }
-    ],
-    terrain: { source: 'terrainSource', exaggeration: 1 },
-    sky: {}
-};
-
-export const MAP_STYLES = {
-    light: MAP_STYLE_OSM_3D,
-    dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-    osm_raster: MAP_STYLE_OSM_3D
-};
-
-export type MapStyleKey = keyof typeof MAP_STYLES;
+export const MAP_STYLE_OSM_3D = {
+    version: 8 as const,
+    sources: {
+        osm: {
+            type: 'raster' as const,
+            tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+            tileSize: 256,
+            attribution: '&copy; OpenStreetMap Contributors',
+            maxzoom: 19
+        },
+        terrainSource: {
+            type: 'raster-dem' as const,
+            url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9',
+            tileSize: 256
+        },
+        hillshadeSource: {
+            type: 'raster-dem' as const,
+            url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=aQ5CJxgn3brYPrfV3ws9',
+            tileSize: 256
+        }
+    },
+    layers: [
+        { id: 'osm', type: 'raster' as const, source: 'osm' },
+        {
+            id: 'hills', type: 'hillshade' as const, source: 'hillshadeSource',
+            layout: { visibility: 'visible' as const },
+            paint: { 'hillshade-shadow-color': '#473B24' }
+        }
+    ],
+    terrain: { source: 'terrainSource', exaggeration: 1 },
+    sky: {}
+};
+
+export const MAP_STYLES = {
+    light: MAP_STYLE_OSM_3D,
+    dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+    osm_raster: MAP_STYLE_OSM_3D
+};
+
+export type MapStyleKey = keyof typeof MAP_STYLES;
diff --git a/packages/ui/src/modules/places/emailFinder.ts b/packages/ui/src/modules/places/emailFinder.ts
deleted file mode 100644
index 7b34a15d..00000000
--- a/packages/ui/src/modules/places/emailFinder.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-/**
- * SSE Client for Email Finding
- * 
- * Handles Server-Sent Events connection for batch email finding
- */
-
-export interface EmailFinderCallbacks {
-    onProgress?: (data: ProgressEvent) => void
-    onLocationStart?: (data: LocationStartEvent) => void
-    onLocationMetaStart?: (data: LocationMetaStartEvent) => void
-    onLocationMeta?: (data: LocationMetaEvent) => void
-    onLocationJob?: (data: LocationJobEvent) => void
-    onLocationEmail?: (data: LocationEmailEvent) => void
-    onLocationComplete?: (data: LocationCompleteEvent) => void
-    onLocationError?: (data: LocationErrorEvent) => void
-    onComplete?: (data: CompleteEvent) => void
-    onError?: (error: Error) => void
-}
-
-export interface ProgressEvent {
-    current: number
-    total: number
-    percent: number
-    message: string
-}
-
-export interface LocationJobEvent {
-    place_id: string
-    jobId: string
-}
-
-export interface LocationStartEvent {
-    place_id: string
-    title?: string
-    index: number
-    total: number
-}
-
-export interface LocationMetaStartEvent {
-    place_id: string
-    message: string
-}
-
-export interface LocationMetaEvent {
-    place_id: string
-    pageCount: number
-}
-//...
-
-
-export interface LocationEmailEvent {
-    place_id: string
-    email: string
-    source: string
-    cached: boolean
-}
-
-export interface LocationCompleteEvent {
-    place_id: string
-    emailCount: number
-    cached: boolean
-    timedOut?: boolean
-}
-
-export interface LocationErrorEvent {
-    place_id: string
-    error: string
-    canRetry: boolean
-}
-
-export interface CompleteEvent {
-    total: number
-    successful: number
-    failed: number
-    emailsFound: number
-}
-
-/**
- * Start streaming email finding for multiple locations
- * 
- * @param placeIds Array of place IDs to process
- * @param token Authentication token
- * @param callbacks Event callbacks
- * @returns EventSource instance for cleanup
- */
-export function streamFindEmails(
-    placeIds: string[],
-    token: string,
-    callbacks: EmailFinderCallbacks
-): EventSource | null {
-    if (placeIds.length === 0) {
-        callbacks.onError?.(new Error('No place IDs provided'))
-        return null
-    }
-
-    if (!token) {
-        callbacks.onError?.(new Error('Not authenticated'))
-        return null
-    }
-
-    // Build URL
-    const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333'
-    const placeIdsParam = placeIds.join(',')
-    const url = `${baseUrl}/api/competitors/email/stream?place_ids=${encodeURIComponent(placeIdsParam)}&token=${encodeURIComponent(token)}`
-
-    console.log(`Streaming emails for locations: ${placeIds}, URL: ${url}`)
-
-    // Create EventSource
-    // Note: EventSource doesn't support custom headers natively
-    // We'll need to pass the token via query param
-    const eventSource = new EventSource(url)
-
-    // Set up event listeners
-    eventSource.addEventListener('progress', (e) => {
-        try {
-            const data = JSON.parse(e.data) as ProgressEvent
-            callbacks.onProgress?.(data)
-        } catch (err) {
-            console.error('Failed to parse progress event:', err)
-        }
-    })
-
-    eventSource.addEventListener('location-start', (e) => {
-        try {
-            const data = JSON.parse(e.data) as LocationStartEvent
-            callbacks.onLocationStart?.(data)
-        } catch (err) {
-            console.error('Failed to parse location-start event:', err)
-        }
-    })
-
-    eventSource.addEventListener('location-job', (e) => {
-        try {
-            const data = JSON.parse(e.data) as LocationJobEvent
-            callbacks.onLocationJob?.(data)
-        } catch (err) {
-            console.error('Failed to parse location-job event:', err)
-        }
-    })
-
-    eventSource.addEventListener('location-meta-start', (e) => {
-        try {
-            const data = JSON.parse(e.data) as LocationMetaStartEvent
-            callbacks.onLocationMetaStart?.(data)
-        } catch (err) {
-            console.error('Failed to parse location-meta-start event:', err)
-        }
-    })
-
-    eventSource.addEventListener('location-meta', (e) => {
-        try {
-            const data = JSON.parse(e.data) as LocationMetaEvent
-            callbacks.onLocationMeta?.(data)
-        } catch (err) {
-            console.error('Failed to parse location-meta event:', err)
-        }
-    })
-
-    eventSource.addEventListener('location-email', (e) => {
-        try {
-            const data = JSON.parse(e.data) as LocationEmailEvent
-            callbacks.onLocationEmail?.(data)
-        } catch (err) {
-            console.error('Failed to parse location-email event:', err)
-        }
-    })
-
-    eventSource.addEventListener('location-complete', (e) => {
-        try {
-            const data = JSON.parse(e.data) as LocationCompleteEvent
-            callbacks.onLocationComplete?.(data)
-        } catch (err) {
-            console.error('Failed to parse location-complete event:', err)
-        }
-    })
-
-    eventSource.addEventListener('location-error', (e) => {
-        try {
-            const data = JSON.parse(e.data) as LocationErrorEvent
-            callbacks.onLocationError?.(data)
-        } catch (err) {
-            console.error('Failed to parse location-error event:', err)
-        }
-    })
-
-    eventSource.addEventListener('complete', (e) => {
-        try {
-            const data = JSON.parse(e.data) as CompleteEvent
-            callbacks.onComplete?.(data)
-            eventSource.close()
-        } catch (err) {
-            console.error('Failed to parse complete event:', err)
-        }
-    })
-
-    eventSource.addEventListener('error', (e) => {
-        try {
-            if (e.type === 'error') {
-                const data = JSON.parse((e as any).data)
-                callbacks.onError?.(new Error(data.error || 'Stream error'))
-            } else {
-                callbacks.onError?.(new Error('Connection error'))
-            }
-        } catch (err) {
-            callbacks.onError?.(new Error('Stream error'))
-        }
-        eventSource.close()
-    })
-
-    eventSource.onerror = () => {
-        if (eventSource.readyState === EventSource.CLOSED) {
-            callbacks.onError?.(new Error('Connection closed'))
-        } else {
-            callbacks.onError?.(new Error('Connection error'))
-        }
-    }
-
-    return eventSource
-}
diff --git a/packages/ui/src/modules/places/gadm-picker/GadmPickedRegions.tsx b/packages/ui/src/modules/places/gadm-picker/GadmPickedRegions.tsx
index 8d011086..f8fd1673 100644
--- a/packages/ui/src/modules/places/gadm-picker/GadmPickedRegions.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/GadmPickedRegions.tsx
@@ -1,97 +1,97 @@
-import React from 'react';
-import { X, Trash2, ChevronRight } from 'lucide-react';
-import type { GadmNode } from './GadmTreePicker';
-
-export interface GadmPickedRegionsProps {
-    selectedNodes: GadmNode[];
-    resolutions: Record<string, number>;
-    onRemove: (node: GadmNode) => void;
-    onChangeResolution: (node: GadmNode, level: number) => void;
-    onClearAll: () => void;
-}
-
-/** Build breadcrumb segments from node hierarchy data */
-function buildBreadcrumbs(node: GadmNode): string[] {
-    const crumbs: string[] = [];
-    if (!node.data) return [node.label || node.name];
-    for (let i = 0; i <= 5; i++) {
-        const name = node.data[`NAME_${i}`];
-        if (!name) break;
-        crumbs.push(name);
-        if (node.data[`GID_${i}`] === node.gid) break;
-    }
-    if (crumbs.length === 0) crumbs.push(node.label || node.name);
-    return crumbs;
-}
-
-export function GadmPickedRegions({ selectedNodes, resolutions, onRemove, onChangeResolution, onClearAll }: GadmPickedRegionsProps) {
-    if (!selectedNodes || selectedNodes.length === 0) return null;
-
-    return (
-        <div className="flex flex-col gap-1.5 h-full">
-            <div className="flex justify-between items-center px-2 py-1.5 shrink-0">
-                <span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
-                    Selected ({selectedNodes.length})
-                </span>
-                {onClearAll && (
-                    <button onClick={onClearAll} className="text-gray-400 hover:text-red-500 transition-colors" title="Clear all">
-                        <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                )}
-            </div>
-
-            <div className="flex flex-col gap-1">
-                {selectedNodes.map((node) => {
-                    const crumbs = buildBreadcrumbs(node);
-                    const currentRes = resolutions[node.gid] ?? node.level;
-
-                    return (
-                        <div
-                            key={node.gid}
-                            className="flex items-center gap-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200/60 dark:border-amber-800/40 rounded-lg px-2.5 py-1.5 group"
-                        >
-                            <span className="w-1.5 h-1.5 rounded-full bg-amber-500 shrink-0" />
-
-                            {/* Breadcrumbs */}
-                            <div className="flex items-center gap-0.5 min-w-0 flex-1 text-xs text-amber-800 dark:text-amber-300 truncate">
-                                {crumbs.map((c, i) => (
-                                    <React.Fragment key={i}>
-                                        {i > 0 && <ChevronRight className="w-2.5 h-2.5 text-amber-400/60 shrink-0" />}
-                                        <span className={i === crumbs.length - 1 ? 'font-semibold truncate' : 'opacity-70 shrink-0'}>
-                                            {c}
-                                        </span>
-                                    </React.Fragment>
-                                ))}
-                            </div>
-
-                            {/* Compact resolution pills */}
-                            <div className="flex gap-px shrink-0">
-                                {[0, 1, 2, 3, 4, 5].map((l) => (
-                                    <button
-                                        key={l}
-                                        onClick={() => onChangeResolution(node, l)}
-                                        className={`w-5 h-5 rounded flex items-center justify-center text-[9px] font-bold transition-all ${
-                                            currentRes === l
-                                                ? 'bg-amber-500 text-white shadow-sm'
-                                                : 'text-amber-600/50 dark:text-amber-400/40 hover:bg-amber-200/60 dark:hover:bg-amber-800/40'
-                                        }`}
-                                        title={`Level ${l}`}
-                                    >
-                                        {l}
-                                    </button>
-                                ))}
-                            </div>
-
-                            <button
-                                onClick={(e) => { e.stopPropagation(); onRemove(node); }}
-                                className="text-amber-400/60 hover:text-red-500 transition-colors shrink-0 ml-0.5"
-                            >
-                                <X className="w-3.5 h-3.5" />
-                            </button>
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-}
+import React from 'react';
+import { X, Trash2, ChevronRight } from 'lucide-react';
+import type { GadmNode } from './GadmTreePicker';
+
+export interface GadmPickedRegionsProps {
+    selectedNodes: GadmNode[];
+    resolutions: Record<string, number>;
+    onRemove: (node: GadmNode) => void;
+    onChangeResolution: (node: GadmNode, level: number) => void;
+    onClearAll: () => void;
+}
+
+/** Build breadcrumb segments from node hierarchy data */
+function buildBreadcrumbs(node: GadmNode): string[] {
+    const crumbs: string[] = [];
+    if (!node.data) return [node.label || node.name];
+    for (let i = 0; i <= 5; i++) {
+        const name = node.data[`NAME_${i}`];
+        if (!name) break;
+        crumbs.push(name);
+        if (node.data[`GID_${i}`] === node.gid) break;
+    }
+    if (crumbs.length === 0) crumbs.push(node.label || node.name);
+    return crumbs;
+}
+
+export function GadmPickedRegions({ selectedNodes, resolutions, onRemove, onChangeResolution, onClearAll }: GadmPickedRegionsProps) {
+    if (!selectedNodes || selectedNodes.length === 0) return null;
+
+    return (
+        <div className="flex flex-col gap-1.5 h-full">
+            <div className="flex justify-between items-center px-2 py-1.5 shrink-0">
+                <span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
+                    Selected ({selectedNodes.length})
+                </span>
+                {onClearAll && (
+                    <button onClick={onClearAll} className="text-gray-400 hover:text-red-500 transition-colors" title="Clear all">
+                        <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                )}
+            </div>
+
+            <div className="flex flex-col gap-1">
+                {selectedNodes.map((node) => {
+                    const crumbs = buildBreadcrumbs(node);
+                    const currentRes = resolutions[node.gid] ?? node.level;
+
+                    return (
+                        <div
+                            key={node.gid}
+                            className="flex items-center gap-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200/60 dark:border-amber-800/40 rounded-lg px-2.5 py-1.5 group"
+                        >
+                            <span className="w-1.5 h-1.5 rounded-full bg-amber-500 shrink-0" />
+
+                            {/* Breadcrumbs */}
+                            <div className="flex items-center gap-0.5 min-w-0 flex-1 text-xs text-amber-800 dark:text-amber-300 truncate">
+                                {crumbs.map((c, i) => (
+                                    <React.Fragment key={i}>
+                                        {i > 0 && <ChevronRight className="w-2.5 h-2.5 text-amber-400/60 shrink-0" />}
+                                        <span className={i === crumbs.length - 1 ? 'font-semibold truncate' : 'opacity-70 shrink-0'}>
+                                            {c}
+                                        </span>
+                                    </React.Fragment>
+                                ))}
+                            </div>
+
+                            {/* Compact resolution pills */}
+                            <div className="flex gap-px shrink-0">
+                                {[0, 1, 2, 3, 4, 5].map((l) => (
+                                    <button
+                                        key={l}
+                                        onClick={() => onChangeResolution(node, l)}
+                                        className={`w-5 h-5 rounded flex items-center justify-center text-[9px] font-bold transition-all ${
+                                            currentRes === l
+                                                ? 'bg-amber-500 text-white shadow-sm'
+                                                : 'text-amber-600/50 dark:text-amber-400/40 hover:bg-amber-200/60 dark:hover:bg-amber-800/40'
+                                        }`}
+                                        title={`Level ${l}`}
+                                    >
+                                        {l}
+                                    </button>
+                                ))}
+                            </div>
+
+                            <button
+                                onClick={(e) => { e.stopPropagation(); onRemove(node); }}
+                                className="text-amber-400/60 hover:text-red-500 transition-colors shrink-0 ml-0.5"
+                            >
+                                <X className="w-3.5 h-3.5" />
+                            </button>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx b/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx
index b8d566ee..9494ae6a 100644
--- a/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx
@@ -1,927 +1,872 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import maplibregl from 'maplibre-gl';
-import { Loader2, X, MapPin, Crosshair, Plus, ChevronRight, Copy, Download, Upload, Trash2 } from 'lucide-react';
-import * as turf from '@turf/turf';
-import { searchGadmRegions, fetchRegionHierarchy, fetchRegionBoundary, resolveGadmHierarchy, type GadmRow } from '../client-searches';
-import { GadmSearchControls } from './components/GadmSearchControls';
-import { Label } from '@/components/ui/label';
-
-function useLocalStorage<T>(key: string, initialValue: T) {
-    const [storedValue, setStoredValue] = useState<T>(() => {
-        try {
-            const item = window.localStorage.getItem(key);
-            return item ? JSON.parse(item) : initialValue;
-        } catch (error) {
-            console.error(error);
-            return initialValue;
-        }
-    });
-
-    const setValue = (value: T | ((val: T) => T)) => {
-        try {
-            const valueToStore = value instanceof Function ? value(storedValue) : value;
-            setStoredValue(valueToStore);
-            window.localStorage.setItem(key, JSON.stringify(valueToStore));
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
-    return [storedValue, setValue] as const;
-}
-
-export interface GadmRegion {
-    gid: string;
-    gadmName: string;
-    level: number;
-    stats?: any;
-    raw?: any;
-    parents?: { name: string; gid: string; level: number }[];
-}
-
-
-
-function createMarkerEl(): HTMLElement {
-    const el = document.createElement('div');
-    el.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="filter:drop-shadow(0 3px 4px rgba(0,0,0,0.25));"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" fill="white" fill-opacity="0.92"/><circle cx="12" cy="10" r="3" fill="#0ea5e9"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="2" y1="10" x2="5" y2="10"/><line x1="19" y1="10" x2="22" y2="10"/></svg>`;
-    el.style.cursor = 'move';
-    return el;
-}
-
-const MAX_DISPLAY_LEVEL: Record<number, number> = {
-    0: 1,
-    1: 3,
-    2: 4,
-    3: 5,
-    4: 5,
-    5: 5
-};
-
-function getOriginalLevel(gid: string): number {
-    if (!gid) return 0;
-    const base = gid.split('_')[0];
-    return base.split('.').length - 1;
-}
-
-export interface GadmPickerProps {
-    map: maplibregl.Map | null;
-    active: boolean;
-    onClose?: () => void;
-    onSelectionChange?: (regions: GadmRegion[], geojsons: any[]) => void;
-    className?: string;
-    /** Pre-load these regions (same shape as export: { gid, name, level }) */
-    initialRegions?: Array<{ gid: string; name: string; level: number }>;
-}
-
-const LEVEL_OPTIONS = [
-    { value: 0, label: 'Country (Level 0)' },
-    { value: 1, label: 'State (Level 1)' },
-    { value: 2, label: 'Province (Level 2)' },
-    { value: 3, label: 'District (Level 3)' },
-    { value: 4, label: 'City (Level 4)' },
-    { value: 5, label: 'Town (Level 5)' },
-];
-
-export function GadmPicker({ map, active, onClose, onSelectionChange, className = "", initialRegions }: GadmPickerProps) {
-    const [levelOption, setLevelOption] = useLocalStorage<number>('pm_gadm_levelOption', 0);
-    const [resolutionOption, setResolutionOption] = useLocalStorage<number>('pm_gadm_resolutionOption', 1);
-    const enrich = true;
-
-    // UI state
-    const [query, setQuery] = useState('');
-    const [suggestions, setSuggestions] = useState<any[]>([]);
-    const [loadingSuggestions, setLoadingSuggestions] = useState(false);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const suggestionsWrapRef = useRef<HTMLDivElement>(null);
-    const headerSuggestionsWrapRef = useRef<HTMLDivElement>(null);
-    const [headerPortalTarget, setHeaderPortalTarget] = useState<HTMLElement | null>(null);
-
-    useEffect(() => {
-        setHeaderPortalTarget(document.getElementById('gadm-controls-portal'));
-    }, []);
-
-    const [selectedRegions, setSelectedRegions] = useState<GadmRegion[]>([]);
-    const [geojsons, setGeojsons] = useState<Record<string, any>>({});
-
-    // Extracted Inspector State
-    const markerRef = useRef<maplibregl.Marker | null>(null);
-    const [inspectedHierarchy, setInspectedHierarchy] = useState<any[] | null>(null);
-    const [inspectedPoint, setInspectedPoint] = useState<{ lat: number, lng: number } | null>(null);
-    const [inspectedGeojson, setInspectedGeojson] = useState<any>(null);
-    const [loadingInspector, setLoadingInspector] = useState(false);
-    const [loadingHighlightGid, setLoadingHighlightGid] = useState<string | null>(null);
-
-    const [pendingSelectionCount, setPendingSelectionCount] = useState(0);
-    const isFetchingSelectionRef = useRef(false);
-
-    const [loadingBoundaryIds, setLoadingBoundaryIds] = useState<Set<string>>(new Set());
-    const loadingBoundaryIdsRef = useRef<Set<string>>(new Set());
-    const processingGids = useRef<Set<string>>(new Set());
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const importedInitialRef = useRef<string | null>(null);
-
-    // Ctrl+click inspection queue logic
-    const inspectionIdRef = useRef(0);
-    const queuedInspectionsRef = useRef<Set<number>>(new Set());
-
-    // Fix stale closures in map click / drag listeners
-    const stateRef = useRef({ levelOption, resolutionOption, enrich });
-    useEffect(() => {
-        stateRef.current = { levelOption, resolutionOption, enrich };
-    }, [levelOption, resolutionOption, enrich]);
-
-    // Restore selected Gadm regions on mount
-    useEffect(() => {
-        let mounted = true;
-        // Commented out to prevent merging old selections during wizard steps
-        /*
-        try {
-            const saved = window.localStorage.getItem('pm_gadm_saved_regions');
-            if (saved) {
-                const parsed = JSON.parse(saved);
-                if (Array.isArray(parsed) && parsed.length > 0) {
-                    setTimeout(() => {
-                        for (const item of parsed) {
-                            if (!mounted) break;
-                            const raw = item.raw || { gid: item.gid, gadmName: item.name, level: item.level };
-                            handleSelectRegion(raw, undefined, true);
-                        }
-                    }, 50);
-                }
-            }
-        } catch (e) { console.error('Failed to parse cached gadm regions', e); }
-        */
-        return () => { mounted = false; };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    // Provide selected data mapping up
-    useEffect(() => {
-        if (onSelectionChange) {
-            const polygons = selectedRegions.map(r => geojsons[r.gid]).filter(Boolean);
-            onSelectionChange(selectedRegions, polygons);
-        }
-
-        // Persist to local storage (disabled)
-        /*
-        if (selectedRegions.length > 0) {
-            const data = selectedRegions.map(r => ({ gid: r.gid, name: r.gadmName, level: r.level, raw: r.raw }));
-            window.localStorage.setItem('pm_gadm_saved_regions', JSON.stringify(data));
-        } else {
-            window.localStorage.removeItem('pm_gadm_saved_regions');
-        }
-        */
-    }, [selectedRegions, geojsons]);
-
-    const updateMapFeatures = useCallback(() => {
-        if (!map || !map.getSource('gadm-picker-features')) return;
-
-        const PALETTE = [
-            { fill: '#fef08a', line: '#ca8a04', outerLine: '#b91c1c' }, // Yellow / Red
-            { fill: '#bfdbfe', line: '#2563eb', outerLine: '#1e3a8a' }, // Blue
-            { fill: '#fecaca', line: '#dc2626', outerLine: '#7f1d1d' }, // Red
-            { fill: '#a7f3d0', line: '#059669', outerLine: '#064e3b' }, // Emerald
-            { fill: '#e9d5ff', line: '#9333ea', outerLine: '#581c87' }, // Purple
-            { fill: '#fed7aa', line: '#ea580c', outerLine: '#7c2d12' }, // Orange
-            { fill: '#a5f3fc', line: '#0891b2', outerLine: '#164e63' }, // Cyan
-            { fill: '#fbcfe8', line: '#db2777', outerLine: '#831843' }, // Pink
-        ];
-
-        const allFeatures: any[] = [];
-        selectedRegions.forEach((region, i) => {
-            const gj = geojsons[region.gid];
-            const colors = PALETTE[i % PALETTE.length];
-
-            if (gj?.features) {
-                gj.features.forEach((f: any) => {
-                    const isOuter = f.properties.isOuter === true;
-                    allFeatures.push({
-                        ...f,
-                        properties: { ...f.properties, _fillColor: colors.fill, _lineColor: isOuter ? colors.outerLine : colors.line }
-                    });
-                });
-            }
-        });
-
-        const fc = { type: 'FeatureCollection', features: allFeatures };
-        (map.getSource('gadm-picker-features') as maplibregl.GeoJSONSource).setData(fc as any);
-    }, [map, geojsons, selectedRegions]);
-
-    // Setup map source/layers
-    useEffect(() => {
-        if (!map) return;
-
-        const setupMapLayers = () => {
-            if (!map.getStyle()) return;
-            if (!map.getSource('gadm-picker-features')) {
-                map.addSource('gadm-picker-features', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
-                map.addLayer({ id: 'gadm-picker-fill', type: 'fill', source: 'gadm-picker-features', paint: { 'fill-color': ['get', '_fillColor'], 'fill-opacity': 0.15 } });
-                map.addLayer({ id: 'gadm-picker-line', type: 'line', source: 'gadm-picker-features', paint: { 'line-color': ['get', '_lineColor'], 'line-width': ['case', ['==', ['get', 'isOuter'], true], 3, 1] } });
-                updateMapFeatures();
-                if (!map.getSource('gadm-picker-highlight')) {
-                    map.addSource('gadm-picker-highlight', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
-                    map.addLayer({ id: 'gadm-picker-highlight-fill', type: 'fill', source: 'gadm-picker-highlight', paint: { 'fill-color': '#0ea5e9', 'fill-opacity': 0.25 } });
-                    map.addLayer({ id: 'gadm-picker-highlight-line', type: 'line', source: 'gadm-picker-highlight', paint: { 'line-color': '#0ea5e9', 'line-width': 2 } });
-                }
-            }
-        };
-
-        if (map.isStyleLoaded()) setupMapLayers();
-        map.on('styledata', setupMapLayers);
-
-        return () => {
-            map.off('styledata', setupMapLayers);
-            if (map.getStyle()) {
-                if (map.getLayer('gadm-picker-fill')) map.removeLayer('gadm-picker-fill');
-                if (map.getLayer('gadm-picker-line')) map.removeLayer('gadm-picker-line');
-                if (map.getSource('gadm-picker-features')) map.removeSource('gadm-picker-features');
-                if (map.getLayer('gadm-picker-highlight-fill')) map.removeLayer('gadm-picker-highlight-fill');
-                if (map.getLayer('gadm-picker-highlight-line')) map.removeLayer('gadm-picker-highlight-line');
-                if (map.getSource('gadm-picker-highlight')) map.removeSource('gadm-picker-highlight');
-            }
-        };
-    }, [map, updateMapFeatures]);
-
-    // Handle Inspector Marker
-    useEffect(() => {
-        if (!map || !active) {
-            markerRef.current?.remove();
-            markerRef.current = null;
-            setInspectedGeojson(null);
-            return;
-        }
-
-        if (!markerRef.current) {
-            markerRef.current = new maplibregl.Marker({ element: createMarkerEl(), draggable: true, anchor: 'bottom' });
-
-            markerRef.current.on('dragend', async () => {
-                if (!markerRef.current) return;
-                const { lat, lng } = markerRef.current.getLngLat();
-                await performInspection(lat, lng);
-            });
-        }
-    }, [map, active]);
-
-    const performInspection = async (lat: number, lng: number, ctrlKey: boolean = false) => {
-        const id = ++inspectionIdRef.current;
-        if (ctrlKey) {
-            queuedInspectionsRef.current.add(id);
-            isFetchingSelectionRef.current = true;
-            setPendingSelectionCount(p => p + 1);
-        } else {
-            queuedInspectionsRef.current.clear();
-        }
-
-        try {
-            if (!markerRef.current) return;
-            markerRef.current.setLngLat([lng, lat]);
-
-            try {
-                markerRef.current.addTo(map!);
-            } catch (e) { }
-
-            if (id === inspectionIdRef.current) {
-                setInspectedPoint({ lat, lng });
-                setLoadingInspector(true);
-                setInspectedHierarchy(null);
-            }
-
-            let rows: any[] | null = null;
-            try {
-                rows = await resolveGadmHierarchy(lat, lng);
-            } catch (e) {
-                console.error(e);
-            }
-
-            if (ctrlKey) {
-                if (!queuedInspectionsRef.current.has(id)) return; // Aborted by a newer normal click
-                queuedInspectionsRef.current.delete(id);
-            } else {
-                if (id !== inspectionIdRef.current) return; // Aborted by a newer click
-            }
-
-            if (id === inspectionIdRef.current) {
-                setLoadingInspector(false);
-                if (rows) setInspectedHierarchy(rows);
-            }
-
-            if (rows) {
-                const { levelOption } = stateRef.current;
-                const targetRow = rows.find((r: any) => r.level === levelOption) || rows[rows.length - 1];
-                if (targetRow && targetRow.gid) {
-                    if (id === inspectionIdRef.current) {
-                        setLoadingHighlightGid(targetRow.gid);
-                    }
-                    try {
-                        const { levelOption: currentLevelOpt, resolutionOption } = stateRef.current;
-                        const previewLevel = (resolutionOption > targetRow.level) ? resolutionOption : targetRow.level;
-
-                        const maxDisplay = MAX_DISPLAY_LEVEL[targetRow.level] ?? 5;
-                        const displayPreviewLevel = Math.min(previewLevel, maxDisplay);
-
-                        const geojson = await fetchRegionBoundary(targetRow.gid, targetRow.gadmName, displayPreviewLevel, false);
-                        if (id === inspectionIdRef.current) {
-                            setInspectedGeojson(geojson);
-                        }
-
-                        if (ctrlKey) {
-                            handleSelectRegion({ ...targetRow.gadmRow, level: targetRow.level }, undefined, true);
-                        }
-                    } catch (e) {
-                        console.error('Failed to fetch boundary for highlight', e);
-                        if (id === inspectionIdRef.current) setInspectedGeojson(null);
-                    } finally {
-                        if (id === inspectionIdRef.current) setLoadingHighlightGid(null);
-                    }
-                } else {
-                    if (id === inspectionIdRef.current) setInspectedGeojson(null);
-                }
-            } else {
-                if (id === inspectionIdRef.current) setInspectedGeojson(null);
-            }
-        } finally {
-            if (ctrlKey) {
-                isFetchingSelectionRef.current = false;
-                setPendingSelectionCount(p => Math.max(0, p - 1));
-            }
-        }
-    };
-
-    const handlePreviewRegion = async (gid: string, name: string, level: number) => {
-        if (!map) return;
-        setLoadingHighlightGid(gid);
-        try {
-            const { resolutionOption } = stateRef.current;
-            const previewLevel = (resolutionOption > level) ? resolutionOption : level;
-            const maxDisplay = MAX_DISPLAY_LEVEL[level] ?? 5;
-            const displayPreviewLevel = Math.min(previewLevel, maxDisplay);
-
-            const geojson = await fetchRegionBoundary(gid, name, displayPreviewLevel, false);
-            setInspectedGeojson(geojson);
-
-            if (geojson && geojson.features && geojson.features.length > 0) {
-                const bbox = turf.bbox(geojson as any);
-                map.fitBounds(bbox as any, { padding: 50, duration: 800 });
-            }
-        } catch (e) {
-            console.error('Failed to fetch preview boundary', e);
-        } finally {
-            setLoadingHighlightGid(null);
-        }
-    };
-
-    // Keep map highlight mapped to inspectedGeojson
-    useEffect(() => {
-        if (!map || !active) return;
-        const source = map.getSource('gadm-picker-highlight') as maplibregl.GeoJSONSource;
-        if (source) {
-            source.setData(inspectedGeojson || { type: 'FeatureCollection', features: [] });
-        }
-    }, [map, active, inspectedGeojson]);
-
-    // Map click handler when active
-    useEffect(() => {
-        if (!map || !active) return;
-
-        const handleMapClick = async (e: maplibregl.MapMouseEvent) => {
-            // Skip if ruler tool is active
-            if (map.getCanvas().dataset.rulerActive) return;
-            const ctrlKey = e.originalEvent.ctrlKey || e.originalEvent.metaKey;
-            if (ctrlKey && isFetchingSelectionRef.current) return;
-            const lat = e.lngLat.lat;
-            const lng = e.lngLat.lng;
-            await performInspection(lat, lng, ctrlKey);
-        };
-
-        map.getCanvas().style.cursor = 'crosshair';
-        map.on('click', handleMapClick);
-
-        return () => {
-            map.getCanvas().style.cursor = '';
-            map.off('click', handleMapClick);
-        };
-    }, [map, active]);
-
-    // Close suggestions
-    useEffect(() => {
-        const handler = (e: MouseEvent) => {
-            const tgt = e.target as Node;
-            const inMain = suggestionsWrapRef.current?.contains(tgt);
-            const inHeader = headerSuggestionsWrapRef.current?.contains(tgt);
-            if (!inMain && !inHeader) {
-                setShowSuggestions(false);
-            }
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, []);
-
-    // Search query debouncer
-    useEffect(() => {
-        if (!query || query.length < 2) {
-            setSuggestions([]);
-            return;
-        }
-        const tid = setTimeout(async () => {
-            setLoadingSuggestions(true);
-            try {
-                const results = await searchGadmRegions(query, levelOption);
-                setSuggestions(results);
-            } catch (err) {
-                setSuggestions([]);
-            } finally {
-                setLoadingSuggestions(false);
-            }
-        }, 400);
-        return () => clearTimeout(tid);
-    }, [query, levelOption]);
-
-    const setLoadingGid = (gid: string, isLoading: boolean) => {
-        if (isLoading) loadingBoundaryIdsRef.current.add(gid);
-        else loadingBoundaryIdsRef.current.delete(gid);
-        // Force a re-render to reflect loading state changes
-        setLoadingBoundaryIds(new Set(loadingBoundaryIdsRef.current));
-    };
-
-    async function handleSelectRegion(region: any, forceLevel?: number, isMulti: boolean = false) {
-        const { levelOption, resolutionOption, enrich } = stateRef.current;
-        const gadmLevel = region.raw?.level ?? (region.level !== undefined ? region.level : levelOption);
-        const gid = region.gid || region[`GID_${gadmLevel}`] || region.GID_0;
-        const name = region.gadmName || region.name || region[`NAME_${gadmLevel}`] || region.NAME_0;
-
-        if (!gid) return;
-
-        if (!isMulti) {
-            if (isFetchingSelectionRef.current) return;
-            isFetchingSelectionRef.current = true;
-        }
-
-        const realGadmLevel = getOriginalLevel(gid);
-
-        // Ensure we handle duplicate queries safely
-        if (processingGids.current.has(gid)) {
-            if (!isMulti) isFetchingSelectionRef.current = false;
-            return;
-        }
-        processingGids.current.add(gid);
-
-        const targetLevel = (forceLevel !== undefined) ? forceLevel : (resolutionOption > realGadmLevel ? resolutionOption : realGadmLevel);
-
-        // Build parent chain for breadcrumb
-        const parents: { name: string; gid: string; level: number }[] = [];
-        // Try inspectedHierarchy first (available during inspector ctrl+click)
-        if (inspectedHierarchy) {
-            for (const row of inspectedHierarchy) {
-                if (row.level < realGadmLevel && row.gadmName && row.gid) {
-                    parents.push({ name: row.gadmName, gid: row.gid, level: row.level });
-                }
-            }
-        }
-        // Fallback: try raw GADM NAME_0/GID_0 fields (available from search results)
-        if (parents.length === 0) {
-            for (let l = 0; l < realGadmLevel; l++) {
-                const n = region[`NAME_${l}`];
-                const g = region[`GID_${l}`];
-                if (n && g) parents.push({ name: n, gid: g, level: l });
-            }
-        }
-
-        let isDuplicate = false;
-        setSelectedRegions(prev => {
-            if (prev.some(r => r.gid === gid)) { isDuplicate = true; return prev; }
-            return [...prev, { gid, gadmName: name, level: targetLevel, raw: region, parents: parents.length > 0 ? parents : undefined }];
-        });
-
-        if (isDuplicate) {
-            setQuery(''); setShowSuggestions(false);
-            return;
-        }
-
-        setQuery(''); setShowSuggestions(false);
-        setLoadingGid(gid, true);
-
-        try {
-            const displayLevel = Math.min(targetLevel, MAX_DISPLAY_LEVEL[realGadmLevel] ?? 5);
-
-            let geojson = await fetchRegionBoundary(
-                gid, name || '', displayLevel, enrich
-            );
-
-            if (!geojson.features || geojson.features.length === 0) {
-                console.warn(`No subdivisions found for ${gid} at level ${targetLevel} (displayed ${displayLevel}). Snapping back to level ${realGadmLevel}`);
-
-                setSelectedRegions(prev => prev.map(r => r.gid === gid ? { ...r, level: realGadmLevel } : r));
-                geojson = await fetchRegionBoundary(gid, name || '', realGadmLevel, enrich);
-            }
-
-            let activeStats: Record<string, any> | undefined;
-            if (enrich && geojson.features && geojson.features.length > 0) {
-                const props = geojson.features[0].properties;
-                if (props.ghsPopulation !== undefined || props.ghsBuiltWeight !== undefined) {
-                    activeStats = {
-                        ghsBuiltWeight: props.ghsBuiltWeight,
-                        ghsPopulation: props.ghsPopulation
-                    };
-                }
-            }
-
-            setSelectedRegions(prev => prev.map(r => r.gid === gid ? { ...r, stats: activeStats } : r));
-            setGeojsons(prev => ({ ...prev, [gid]: geojson }));
-
-            if (!isMulti && map && geojson && geojson.features && geojson.features.length > 0) {
-                try {
-                    const bbox = turf.bbox(geojson as any);
-                    map.fitBounds(bbox as any, { padding: 50, duration: 800 });
-                } catch (e) {
-                    console.error("Failed to auto-fit bounds", e);
-                }
-            }
-        } catch (e) {
-            console.error("Failed to fetch boundary for", gid, e);
-        } finally {
-            setLoadingGid(gid, false);
-            if (!isMulti) isFetchingSelectionRef.current = false;
-        }
-    };
-
-    const handleRemoveRegion = (gid: string) => {
-        processingGids.current.delete(gid);
-        setSelectedRegions(prev => prev.filter(r => r.gid !== gid));
-        setGeojsons(prev => {
-            const next = { ...prev };
-            delete next[gid];
-            return next;
-        });
-    };
-
-    const handleFlyToRegion = async (gid: string) => {
-        if (!map) return;
-        const gj = geojsons[gid];
-        if (!gj || !gj.features || gj.features.length === 0) return;
-
-        try {
-            const turf = await import('@turf/turf');
-            const bbox = turf.bbox(gj as any);
-            map.fitBounds(bbox as any, { padding: 50, duration: 800 });
-        } catch (e) {
-            console.error("Failed to fit bounds", e);
-        }
-    };
-
-    const handleReResolveRegion = (region: any, targetLevel: number) => {
-        if (loadingBoundaryIds.has(region.gid)) return;
-        if (targetLevel === region.level) return;
-        handleRemoveRegion(region.gid);
-        const originalRaw = region.raw || { gid: region.gid, gadmName: region.gadmName, level: region.level };
-        handleSelectRegion(originalRaw, targetLevel, true);
-    };
-
-    const handleCopyToClipboard = async () => {
-        const data = selectedRegions.map(r => ({ gid: r.gid, name: r.gadmName, level: r.level, raw: r.raw }));
-        await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
-    };
-
-    const handleExportJson = () => {
-        if (!selectedRegions.length) return;
-        const data = selectedRegions.map(r => ({ gid: r.gid, name: r.gadmName, level: r.level, raw: r.raw }));
-        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `gadm-selection-${Date.now()}.json`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    };
-
-    const handleImportJson = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-        const reader = new FileReader();
-        reader.onload = async (evt) => {
-            try {
-                const parsed = JSON.parse(evt.target?.result as string);
-                if (Array.isArray(parsed)) {
-                    // Full reset
-                    queuedInspectionsRef.current.clear();
-                    processingGids.current.clear();
-                    loadingBoundaryIdsRef.current.clear();
-                    setLoadingBoundaryIds(new Set());
-                    setSelectedRegions([]);
-                    setGeojsons({});
-
-                    // Queue them all concurrently via isMulti=true
-                    for (const item of parsed) {
-                        const raw = item.raw || { gid: item.gid, gadmName: item.name, level: item.level };
-                        handleSelectRegion(raw, item.level, true);
-                    }
-                }
-            } catch (err) {
-                console.error("Failed to parse JSON", err);
-            }
-            if (fileInputRef.current) fileInputRef.current.value = "";
-        };
-        reader.readAsText(file);
-    };
-
-    const handleClearAll = () => {
-        isFetchingSelectionRef.current = false;
-        queuedInspectionsRef.current.clear();
-        processingGids.current.clear();
-        loadingBoundaryIdsRef.current.clear();
-        setLoadingBoundaryIds(new Set());
-        setSelectedRegions([]);
-        setGeojsons({});
-        setInspectedGeojson(null);
-        setInspectedHierarchy(null);
-        if (markerRef.current) {
-            markerRef.current.remove();
-            markerRef.current = null;
-        }
-    };
-
-    // Import initialRegions prop (same logic as handleImportJson)
-    useEffect(() => {
-        if (!initialRegions || initialRegions.length === 0) return;
-        const key = initialRegions.map(r => r.gid).sort().join(',');
-        if (importedInitialRef.current === key) return;
-        importedInitialRef.current = key;
-
-        // Full reset, same as import handler
-        queuedInspectionsRef.current.clear();
-        processingGids.current.clear();
-        loadingBoundaryIdsRef.current.clear();
-        setLoadingBoundaryIds(new Set());
-        setSelectedRegions([]);
-        setGeojsons({});
-
-        for (const item of initialRegions) {
-            const raw = (item as any).raw || { gid: item.gid, gadmName: item.name, level: item.level };
-            handleSelectRegion(raw, item.level, true);
-        }
-    }, [initialRegions]);
-
-    useEffect(() => {
-        updateMapFeatures();
-    }, [updateMapFeatures]);
-
-    const sidebarContent = active ? (
-        <div className={`w-full h-full flex flex-col space-y-4 ${className}`}>
-
-            <p className="text-sm text-gray-600 dark:text-gray-400 flex-shrink-0">
-                Click anywhere on the map to inspect administrative areas, or use the search below.
-            </p>
-
-            {/* Config & Search */}
-            <GadmSearchControls
-                levelOption={levelOption} setLevelOption={setLevelOption}
-                resolutionOption={resolutionOption} setResolutionOption={setResolutionOption}
-                query={query} setQuery={setQuery}
-                suggestions={suggestions} loadingSuggestions={loadingSuggestions}
-                showSuggestions={showSuggestions} setShowSuggestions={setShowSuggestions}
-                onSelectSuggestion={(s, ctrlKey) => handleSelectRegion(s, undefined, ctrlKey)}
-                suggestionsWrapRef={suggestionsWrapRef}
-                layout="vertical"
-            />
-
-            <div className="flex-1 overflow-y-auto min-h-0 space-y-4 pr-2">
-                {/* Visual Inspector Panel */}
-                {(inspectedPoint || loadingInspector) && (
-                    <div className="bg-sky-50 dark:bg-sky-900/10 border border-sky-200 dark:border-sky-800 rounded-md p-3">
-                        <div className="flex items-center gap-2 mb-2 text-sky-800 dark:text-sky-300">
-                            <Crosshair className="w-4 h-4" />
-                            <h4 className="text-xs font-semibold uppercase tracking-wider">Inspected Location</h4>
-                            {loadingInspector && <Loader2 className="w-3 h-3 animate-spin ml-auto" />}
-                        </div>
-
-                        {!loadingInspector && inspectedHierarchy && (
-                            <div className="flex flex-col gap-1.5 mt-2">
-                                {inspectedHierarchy.map((row) => (
-                                    <div key={row.level} className="flex flex-col">
-                                        <div className="flex items-center min-h-[28px] overflow-hidden group">
-                                            {/* Indentation */}
-                                            {Array.from({ length: row.level }).map((_, i) => (
-                                                <div key={i} className="w-3 mx-1 flex-shrink-0 flex items-center justify-center opacity-30">
-                                                    <ChevronRight className="w-3 h-3 text-sky-600 dark:text-sky-400" />
-                                                </div>
-                                            ))}
-
-                                            {/* Name / Action */}
-                                            {row.gid ? (
-                                                <div className="flex items-center flex-1 min-w-0 bg-white dark:bg-sky-900/30 border border-sky-100 dark:border-sky-800 rounded px-2 py-1 transition-colors group/row">
-                                                    <div
-                                                        className="flex items-baseline flex-1 min-w-0 mr-2 cursor-pointer group-hover/row:text-sky-600 transition-colors"
-                                                        onClick={() => handlePreviewRegion(row.gid, row.gadmName, row.level)}
-                                                    >
-                                                        {loadingHighlightGid === row.gid && <Loader2 className="w-3 h-3 animate-spin text-sky-500 mr-1.5 self-center shrink-0" />}
-                                                        <span className="text-sm font-medium text-sky-900 dark:text-sky-100 group-hover/row:text-sky-600 group-hover/row:underline dark:group-hover/row:text-sky-300 truncate flex-shrink">
-                                                            {row.gadmName}
-                                                        </span>
-                                                        <span className="ml-1.5 text-[10px] text-sky-500 dark:text-sky-400 font-normal opacity-70 flex-shrink-0">L{row.level}</span>
-                                                    </div>
-                                                    <button
-                                                        onClick={(e) => handleSelectRegion(row.gadmRow, row.level, e.ctrlKey || e.metaKey)}
-                                                        className="ml-auto text-[10px] font-bold tracking-wide uppercase bg-sky-100 hover:bg-sky-200 dark:bg-sky-800 dark:hover:bg-sky-700 text-sky-700 dark:text-sky-200 px-2 py-0.5 rounded transition-colors flex items-center gap-1 flex-shrink-0"
-                                                        title="Add this region"
-                                                    >
-                                                        <Plus className="w-3 h-3" /> Add
-                                                    </button>
-                                                </div>
-                                            ) : (
-                                                <div className="flex items-center flex-1 min-w-0 px-2 py-1">
-                                                    <span className="text-sm font-medium text-sky-900/40 dark:text-sky-100/30 italic truncate">
-                                                        No Level {row.level} data
-                                                    </span>
-                                                </div>
-                                            )}
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-                )}
-
-                {/* Selected Regions header and actions */}
-                <div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800/50 p-2 rounded border border-gray-100 dark:border-gray-700/50">
-                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                        Picked Regions {selectedRegions.length > 0 && `(${selectedRegions.length})`}
-                    </h4>
-                    <div className="flex gap-2">
-                        <button onClick={handleCopyToClipboard} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title="Copy configuration to clipboard">
-                            <Copy className="w-4 h-4" />
-                        </button>
-                        <button onClick={handleExportJson} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title="Download configuration JSON">
-                            <Download className="w-4 h-4" />
-                        </button>
-                        <button onClick={() => fileInputRef.current?.click()} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title="Import configuration JSON">
-                            <Upload className="w-4 h-4" />
-                        </button>
-                        <input type="file" ref={fileInputRef} className="hidden" accept="application/json" onChange={handleImportJson} />
-                        <div className="w-[1px] h-4 bg-gray-200 dark:bg-gray-700 mx-1"></div>
-                        <button onClick={handleClearAll} className="text-gray-400 hover:text-red-500 dark:hover:text-red-400" title="Clear all regions">
-                            <Trash2 className="w-4 h-4" />
-                        </button>
-                    </div>
-                </div>
-
-                {selectedRegions.length > 0 ? (
-                    <div className="space-y-2 pb-2">
-                        <div className="flex flex-col gap-2">
-                            {selectedRegions.map((region) => {
-                                const loading = loadingBoundaryIds.has(region.gid);
-                                const realGadm = getOriginalLevel(region.gid);
-                                const maxDisplay = MAX_DISPLAY_LEVEL[realGadm] ?? 5;
-                                const isCapped = region.level > maxDisplay;
-                                return (
-                                    <div
-                                        key={region.gid}
-                                        className="flex flex-col bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/50 rounded-lg p-2 cursor-pointer hover:bg-yellow-100 dark:hover:bg-yellow-900/40 transition-colors"
-                                        onClick={(e) => {
-                                            if ((e.target as HTMLElement).closest('button')) return;
-                                            handleFlyToRegion(region.gid);
-                                        }}
-                                    >
-                                        <div className="flex items-center gap-1.5 justify-between">
-                                            <div className="flex items-center gap-1.5 font-medium text-yellow-800 dark:text-yellow-300 text-sm">
-                                                {loading && <Loader2 className="w-3 h-3 animate-spin text-yellow-600" />}
-                                                {!loading && <span className="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0"></span>}
-                                                <span className="truncate">{region.gadmName}</span>
-                                                <span className="text-xs opacity-70">({region.gid})</span>
-                                            </div>
-                                            <button
-                                                onClick={(e) => { e.stopPropagation(); handleRemoveRegion(region.gid); }}
-                                                className="text-yellow-600 hover:text-red-500 flex-shrink-0 focus:outline-none ml-2 bg-yellow-100/50 dark:bg-yellow-800/30 p-1 rounded transition-colors"
-                                            >
-                                                <X className="w-3 h-3" />
-                                            </button>
-                                        </div>
-                                        {!loading && (() => {
-                                            const crumbs = region.parents;
-                                            if (!crumbs || crumbs.length === 0) return null;
-                                            return (
-                                                <div className="flex items-center flex-wrap gap-0.5 mt-1 pl-3.5 text-[10px] text-yellow-700/70 dark:text-yellow-400/60">
-                                                    {crumbs.map((c, i) => (
-                                                        <React.Fragment key={c.gid}>
-                                                            {i > 0 && <ChevronRight className="w-2.5 h-2.5 opacity-50" />}
-                                                            <button
-                                                                onClick={async (e) => {
-                                                                    e.stopPropagation();
-                                                                    try {
-                                                                        const geo = await fetchRegionBoundary(c.gid, c.name, c.level, false);
-                                                                        if (geo?.features?.length) {
-                                                                            const centroid = turf.centroid(geo.features[0]);
-                                                                            const [lng, lat] = centroid.geometry.coordinates;
-                                                                            await performInspection(lat, lng);
-                                                                        }
-                                                                    } catch (err) {
-                                                                        console.error('Breadcrumb inspect failed', err);
-                                                                    }
-                                                                }}
-                                                                className="hover:text-yellow-900 dark:hover:text-yellow-200 hover:underline underline-offset-2 transition-colors cursor-pointer"
-                                                                title={`Inspect ${c.name}`}
-                                                            >
-                                                                {c.name}
-                                                            </button>
-                                                        </React.Fragment>
-                                                    ))}
-                                                </div>
-                                            );
-                                        })()}
-                                        {region.stats && !loading && (
-                                            <div className="mt-1.5 text-xs text-yellow-700 dark:text-yellow-500 flex gap-4 opacity-90 border-t border-yellow-200/50 dark:border-yellow-800/50 pt-1.5 pl-3.5">
-                                                <span><strong className="font-semibold">Built:</strong> {region.stats.ghsBuiltWeight ? Math.round(region.stats.ghsBuiltWeight).toLocaleString() : 'N/A'}</span>
-                                                <span><strong className="font-semibold">Pop:</strong> {region.stats.ghsPopulation ? Math.round(region.stats.ghsPopulation).toLocaleString() : 'N/A'}</span>
-                                            </div>
-                                        )}
-                                        {isCapped && !loading && (
-                                            <div className="mt-1.5 text-[10px] text-amber-600 dark:text-amber-400 flex items-center gap-1 pl-3.5 opacity-80" title={`Target is L${region.level} but map shows max L${maxDisplay} for performance. Simulator uses full L${region.level} data.`}>
-                                                <svg className="w-3 h-3 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>
-                                                <span>Map capped at <strong>L{maxDisplay}</strong> — simulator uses full <strong>L{region.level}</strong></span>
-                                            </div>
-                                        )}
-                                        <div className="mt-2 flex items-center justify-between border-t border-yellow-200/50 dark:border-yellow-800/50 pt-2 px-1">
-                                            <span className="text-[10px] uppercase font-bold text-yellow-600/70 dark:text-yellow-500/70 tracking-wider">Change Level</span>
-                                            <div className="flex items-center bg-yellow-100/50 dark:bg-yellow-900/30 p-0.5 rounded border border-yellow-200 dark:border-yellow-700/50">
-                                                {[0, 1, 2, 3, 4, 5].map((lvl) => {
-                                                    const isSelected = lvl === region.level;
-                                                    return (
-                                                        <button
-                                                            key={lvl}
-                                                            onClick={(e) => { e.stopPropagation(); handleReResolveRegion(region, lvl); }}
-                                                            className={`px-2 py-0.5 text-[10px] font-bold rounded transition-colors ${isSelected
-                                                                ? 'bg-yellow-400 text-yellow-900 shadow-sm'
-                                                                : 'text-yellow-700 dark:text-yellow-400 hover:bg-yellow-200/50 dark:hover:bg-yellow-800/50'
-                                                                }`}
-                                                            title={`Change to Level ${lvl}`}
-                                                        >
-                                                            L{lvl}
-                                                        </button>
-                                                    );
-                                                })}
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-
-                            {/* Optimistic pending selection placeholders */}
-                            {Array.from({ length: pendingSelectionCount }).map((_, i) => (
-                                <div key={`pending-${i}`} className="flex flex-col bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/50 rounded-lg p-2 opacity-70">
-                                    <div className="flex items-center gap-2 font-medium text-yellow-800 dark:text-yellow-300 text-sm">
-                                        <Loader2 className="w-3 h-3 animate-spin text-yellow-600" />
-                                        <span>Resolving location...</span>
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                ) : (
-                    pendingSelectionCount > 0 ? (
-                        <div className="space-y-2 pb-2">
-                            <div className="flex flex-col gap-2">
-                                {Array.from({ length: pendingSelectionCount }).map((_, i) => (
-                                    <div key={`pending-empty-${i}`} className="flex flex-col bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/50 rounded-lg p-2 opacity-70">
-                                        <div className="flex items-center gap-2 font-medium text-yellow-800 dark:text-yellow-300 text-sm">
-                                            <Loader2 className="w-3 h-3 animate-spin text-yellow-600" />
-                                            <span>Resolving location...</span>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    ) : (
-                        !inspectedPoint && (
-                            <div className="text-sm text-gray-500 italic text-center py-4 bg-gray-50 dark:bg-gray-800/50 rounded border border-dashed border-gray-200 dark:border-gray-700">
-                                No regions picked yet.
-                            </div>
-                        )
-                    )
-                )}
-            </div>
-        </div>
-    ) : null;
-
-    return (
-        <>
-            {sidebarContent}
-
-            {/* Portal Config & Search to Header */}
-            {headerPortalTarget && createPortal(
-                <GadmSearchControls
-                    levelOption={levelOption} setLevelOption={setLevelOption}
-                    resolutionOption={resolutionOption} setResolutionOption={setResolutionOption}
-                    query={query} setQuery={setQuery}
-                    suggestions={suggestions} loadingSuggestions={loadingSuggestions}
-                    showSuggestions={showSuggestions} setShowSuggestions={setShowSuggestions}
-                    onSelectSuggestion={(s, ctrlKey) => handleSelectRegion(s, undefined, ctrlKey)}
-                    suggestionsWrapRef={headerSuggestionsWrapRef}
-                    layout="horizontal"
-                />,
-                headerPortalTarget
-            )}
-        </>
-    );
-}
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import maplibregl from 'maplibre-gl';
+import { Loader2, X, Crosshair, Plus, ChevronRight, Copy, Download, Upload, Trash2 } from 'lucide-react';
+import * as turf from '@turf/turf';
+import { searchGadmRegions, fetchRegionBoundary, resolveGadmHierarchy, type GadmRow } from '../client-gridsearch';
+import { GadmSearchControls } from './components/GadmSearchControls';
+import { T } from '../../../i18n';
+
+
+export interface GadmRegion {
+    gid: string;
+    gadmName: string;
+    level: number;
+    stats?: any;
+    raw?: any;
+    parents?: { name: string; gid: string; level: number }[];
+}
+
+
+
+function createMarkerEl(): HTMLElement {
+    const el = document.createElement('div');
+    el.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="filter:drop-shadow(0 3px 4px rgba(0,0,0,0.25));"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" fill="white" fill-opacity="0.92"/><circle cx="12" cy="10" r="3" fill="#0ea5e9"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="2" y1="10" x2="5" y2="10"/><line x1="19" y1="10" x2="22" y2="10"/></svg>`;
+    el.style.cursor = 'move';
+    return el;
+}
+
+const MAX_DISPLAY_LEVEL: Record<number, number> = {
+    0: 1,
+    1: 3,
+    2: 4,
+    3: 5,
+    4: 5,
+    5: 5
+};
+
+function getOriginalLevel(gid: string): number {
+    if (!gid) return 0;
+    const base = gid.split('_')[0];
+    return base.split('.').length - 1;
+}
+
+export interface GadmPickerProps {
+    map: maplibregl.Map | null;
+    active: boolean;
+    onClose?: () => void;
+    onSelectionChange?: (regions: GadmRegion[], geojsons: any[]) => void;
+    className?: string;
+    /** Pre-load these regions (same shape as export: { gid, name, level }) */
+    initialRegions?: Array<{ gid: string; name: string; level: number }>;
+}
+
+const LEVEL_OPTIONS = [
+    { value: 0, label: 'Country (Level 0)' },
+    { value: 1, label: 'State (Level 1)' },
+    { value: 2, label: 'Province (Level 2)' },
+    { value: 3, label: 'District (Level 3)' },
+    { value: 4, label: 'City (Level 4)' },
+    { value: 5, label: 'Town (Level 5)' },
+];
+
+export function GadmPicker({ map, active, onClose, onSelectionChange, className = "", initialRegions }: GadmPickerProps) {
+    const [levelOption, setLevelOption] = useState<number>(0);
+    const [resolutionOption, setResolutionOption] = useState<number>(1);
+    const enrich = true;
+
+    // UI state
+    const [query, setQuery] = useState('');
+    const [suggestions, setSuggestions] = useState<any[]>([]);
+    const [loadingSuggestions, setLoadingSuggestions] = useState(false);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const suggestionsWrapRef = useRef<HTMLDivElement>(null);
+    const headerSuggestionsWrapRef = useRef<HTMLDivElement>(null);
+    const [headerPortalTarget, setHeaderPortalTarget] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        setHeaderPortalTarget(document.getElementById('gadm-controls-portal'));
+    }, []);
+
+    const [selectedRegions, setSelectedRegions] = useState<GadmRegion[]>([]);
+    const [geojsons, setGeojsons] = useState<Record<string, any>>({});
+
+    // Extracted Inspector State
+    const markerRef = useRef<maplibregl.Marker | null>(null);
+    const [inspectedHierarchy, setInspectedHierarchy] = useState<any[] | null>(null);
+    const [inspectedPoint, setInspectedPoint] = useState<{ lat: number, lng: number } | null>(null);
+    const [inspectedGeojson, setInspectedGeojson] = useState<any>(null);
+    const [loadingInspector, setLoadingInspector] = useState(false);
+    const [loadingHighlightGid, setLoadingHighlightGid] = useState<string | null>(null);
+
+    const [pendingSelectionCount, setPendingSelectionCount] = useState(0);
+    const isFetchingSelectionRef = useRef(false);
+
+    const [loadingBoundaryIds, setLoadingBoundaryIds] = useState<Set<string>>(new Set());
+    const loadingBoundaryIdsRef = useRef<Set<string>>(new Set());
+    const processingGids = useRef<Set<string>>(new Set());
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const importedInitialRef = useRef<string | null>(null);
+
+    // Ctrl+click inspection queue logic
+    const inspectionIdRef = useRef(0);
+    const queuedInspectionsRef = useRef<Set<number>>(new Set());
+
+    // Fix stale closures in map click / drag listeners
+    const stateRef = useRef({ levelOption, resolutionOption, enrich });
+    useEffect(() => {
+        stateRef.current = { levelOption, resolutionOption, enrich };
+    }, [levelOption, resolutionOption, enrich]);
+
+
+
+    // Provide selected data mapping up
+    useEffect(() => {
+        if (onSelectionChange) {
+            const polygons = selectedRegions.map(r => geojsons[r.gid]).filter(Boolean);
+            onSelectionChange(selectedRegions, polygons);
+        }
+
+    }, [selectedRegions, geojsons]);
+
+    const updateMapFeatures = useCallback(() => {
+        if (!map || !map.getSource('gadm-picker-features')) return;
+
+        const PALETTE = [
+            { fill: '#fef08a', line: '#ca8a04', outerLine: '#b91c1c' }, // Yellow / Red
+            { fill: '#bfdbfe', line: '#2563eb', outerLine: '#1e3a8a' }, // Blue
+            { fill: '#fecaca', line: '#dc2626', outerLine: '#7f1d1d' }, // Red
+            { fill: '#a7f3d0', line: '#059669', outerLine: '#064e3b' }, // Emerald
+            { fill: '#e9d5ff', line: '#9333ea', outerLine: '#581c87' }, // Purple
+            { fill: '#fed7aa', line: '#ea580c', outerLine: '#7c2d12' }, // Orange
+            { fill: '#a5f3fc', line: '#0891b2', outerLine: '#164e63' }, // Cyan
+            { fill: '#fbcfe8', line: '#db2777', outerLine: '#831843' }, // Pink
+        ];
+
+        const allFeatures: any[] = [];
+        selectedRegions.forEach((region, i) => {
+            const gj = geojsons[region.gid];
+            const colors = PALETTE[i % PALETTE.length];
+
+            if (gj?.features) {
+                gj.features.forEach((f: any) => {
+                    const isOuter = f.properties.isOuter === true;
+                    allFeatures.push({
+                        ...f,
+                        properties: { ...f.properties, _fillColor: colors.fill, _lineColor: isOuter ? colors.outerLine : colors.line }
+                    });
+                });
+            }
+        });
+
+        const fc = { type: 'FeatureCollection', features: allFeatures };
+        (map.getSource('gadm-picker-features') as maplibregl.GeoJSONSource).setData(fc as any);
+    }, [map, geojsons, selectedRegions]);
+
+    // Setup map source/layers
+    useEffect(() => {
+        if (!map) return;
+
+        const setupMapLayers = () => {
+            if (!map.getStyle()) return;
+            if (!map.getSource('gadm-picker-features')) {
+                map.addSource('gadm-picker-features', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
+                map.addLayer({ id: 'gadm-picker-fill', type: 'fill', source: 'gadm-picker-features', paint: { 'fill-color': ['get', '_fillColor'], 'fill-opacity': 0.15 } });
+                map.addLayer({ id: 'gadm-picker-line', type: 'line', source: 'gadm-picker-features', paint: { 'line-color': ['get', '_lineColor'], 'line-width': ['case', ['==', ['get', 'isOuter'], true], 3, 1] } });
+                updateMapFeatures();
+                if (!map.getSource('gadm-picker-highlight')) {
+                    map.addSource('gadm-picker-highlight', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
+                    map.addLayer({ id: 'gadm-picker-highlight-fill', type: 'fill', source: 'gadm-picker-highlight', paint: { 'fill-color': '#0ea5e9', 'fill-opacity': 0.25 } });
+                    map.addLayer({ id: 'gadm-picker-highlight-line', type: 'line', source: 'gadm-picker-highlight', paint: { 'line-color': '#0ea5e9', 'line-width': 2 } });
+                }
+            }
+        };
+
+        if (map.isStyleLoaded()) setupMapLayers();
+        map.on('styledata', setupMapLayers);
+
+        return () => {
+            map.off('styledata', setupMapLayers);
+            if (map.getStyle()) {
+                if (map.getLayer('gadm-picker-fill')) map.removeLayer('gadm-picker-fill');
+                if (map.getLayer('gadm-picker-line')) map.removeLayer('gadm-picker-line');
+                if (map.getSource('gadm-picker-features')) map.removeSource('gadm-picker-features');
+                if (map.getLayer('gadm-picker-highlight-fill')) map.removeLayer('gadm-picker-highlight-fill');
+                if (map.getLayer('gadm-picker-highlight-line')) map.removeLayer('gadm-picker-highlight-line');
+                if (map.getSource('gadm-picker-highlight')) map.removeSource('gadm-picker-highlight');
+            }
+        };
+    }, [map, updateMapFeatures]);
+
+    // Handle Inspector Marker
+    useEffect(() => {
+        if (!map || !active) {
+            markerRef.current?.remove();
+            markerRef.current = null;
+            setInspectedGeojson(null);
+            return;
+        }
+
+        if (!markerRef.current) {
+            markerRef.current = new maplibregl.Marker({ element: createMarkerEl(), draggable: true, anchor: 'bottom' });
+
+            markerRef.current.on('dragend', async () => {
+                if (!markerRef.current) return;
+                const { lat, lng } = markerRef.current.getLngLat();
+                await performInspection(lat, lng);
+            });
+        }
+    }, [map, active]);
+
+    const performInspection = async (lat: number, lng: number, ctrlKey: boolean = false) => {
+        const id = ++inspectionIdRef.current;
+        if (ctrlKey) {
+            queuedInspectionsRef.current.add(id);
+            isFetchingSelectionRef.current = true;
+            setPendingSelectionCount(p => p + 1);
+        } else {
+            queuedInspectionsRef.current.clear();
+        }
+
+        try {
+            if (!markerRef.current) return;
+            markerRef.current.setLngLat([lng, lat]);
+
+            try {
+                markerRef.current.addTo(map!);
+            } catch (e) { }
+
+            if (id === inspectionIdRef.current) {
+                setInspectedPoint({ lat, lng });
+                setLoadingInspector(true);
+                setInspectedHierarchy(null);
+            }
+
+            let rows: any[] | null = null;
+            try {
+                rows = await resolveGadmHierarchy(lat, lng);
+            } catch (e) {
+                console.error(e);
+            }
+
+            if (ctrlKey) {
+                if (!queuedInspectionsRef.current.has(id)) return; // Aborted by a newer normal click
+                queuedInspectionsRef.current.delete(id);
+            } else {
+                if (id !== inspectionIdRef.current) return; // Aborted by a newer click
+            }
+
+            if (id === inspectionIdRef.current) {
+                setLoadingInspector(false);
+                if (rows) setInspectedHierarchy(rows);
+            }
+
+            if (rows) {
+                const { levelOption } = stateRef.current;
+                const targetRow = rows.find((r: any) => r.level === levelOption) || rows[rows.length - 1];
+                if (targetRow && targetRow.gid) {
+                    if (id === inspectionIdRef.current) {
+                        setLoadingHighlightGid(targetRow.gid);
+                    }
+                    try {
+                        const { levelOption: currentLevelOpt, resolutionOption } = stateRef.current;
+                        const previewLevel = (resolutionOption > targetRow.level) ? resolutionOption : targetRow.level;
+
+                        const maxDisplay = MAX_DISPLAY_LEVEL[targetRow.level] ?? 5;
+                        const displayPreviewLevel = Math.min(previewLevel, maxDisplay);
+
+                        const geojson = await fetchRegionBoundary(targetRow.gid, targetRow.gadmName, displayPreviewLevel, false);
+                        if (id === inspectionIdRef.current) {
+                            setInspectedGeojson(geojson);
+                        }
+
+                        if (ctrlKey) {
+                            handleSelectRegion({ ...targetRow.gadmRow, level: targetRow.level }, undefined, true);
+                        }
+                    } catch (e) {
+                        console.error('Failed to fetch boundary for highlight', e);
+                        if (id === inspectionIdRef.current) setInspectedGeojson(null);
+                    } finally {
+                        if (id === inspectionIdRef.current) setLoadingHighlightGid(null);
+                    }
+                } else {
+                    if (id === inspectionIdRef.current) setInspectedGeojson(null);
+                }
+            } else {
+                if (id === inspectionIdRef.current) setInspectedGeojson(null);
+            }
+        } finally {
+            if (ctrlKey) {
+                isFetchingSelectionRef.current = false;
+                setPendingSelectionCount(p => Math.max(0, p - 1));
+            }
+        }
+    };
+
+    const handlePreviewRegion = async (gid: string, name: string, level: number) => {
+        if (!map) return;
+        setLoadingHighlightGid(gid);
+        try {
+            const { resolutionOption } = stateRef.current;
+            const previewLevel = (resolutionOption > level) ? resolutionOption : level;
+            const maxDisplay = MAX_DISPLAY_LEVEL[level] ?? 5;
+            const displayPreviewLevel = Math.min(previewLevel, maxDisplay);
+
+            const geojson = await fetchRegionBoundary(gid, name, displayPreviewLevel, false);
+            setInspectedGeojson(geojson);
+
+            if (geojson && geojson.features && geojson.features.length > 0) {
+                const bbox = turf.bbox(geojson as any);
+                map.fitBounds(bbox as any, { padding: 50, duration: 800 });
+            }
+        } catch (e) {
+            console.error('Failed to fetch preview boundary', e);
+        } finally {
+            setLoadingHighlightGid(null);
+        }
+    };
+
+    // Keep map highlight mapped to inspectedGeojson
+    useEffect(() => {
+        if (!map || !active) return;
+        const source = map.getSource('gadm-picker-highlight') as maplibregl.GeoJSONSource;
+        if (source) {
+            source.setData(inspectedGeojson || { type: 'FeatureCollection', features: [] });
+        }
+    }, [map, active, inspectedGeojson]);
+
+    // Map click handler when active
+    useEffect(() => {
+        if (!map || !active) return;
+
+        const handleMapClick = async (e: maplibregl.MapMouseEvent) => {
+            // Skip if ruler tool is active
+            if (map.getCanvas().dataset.rulerActive) return;
+            const ctrlKey = e.originalEvent.ctrlKey || e.originalEvent.metaKey;
+            if (ctrlKey && isFetchingSelectionRef.current) return;
+            const lat = e.lngLat.lat;
+            const lng = e.lngLat.lng;
+            await performInspection(lat, lng, ctrlKey);
+        };
+
+        map.getCanvas().style.cursor = 'crosshair';
+        map.on('click', handleMapClick);
+
+        return () => {
+            map.getCanvas().style.cursor = '';
+            map.off('click', handleMapClick);
+        };
+    }, [map, active]);
+
+    // Close suggestions
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            const tgt = e.target as Node;
+            const inMain = suggestionsWrapRef.current?.contains(tgt);
+            const inHeader = headerSuggestionsWrapRef.current?.contains(tgt);
+            if (!inMain && !inHeader) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, []);
+
+    // Search query debouncer
+    useEffect(() => {
+        if (!query || query.length < 2) {
+            setSuggestions([]);
+            return;
+        }
+        const tid = setTimeout(async () => {
+            setLoadingSuggestions(true);
+            try {
+                const results = await searchGadmRegions(query, levelOption);
+                setSuggestions(results);
+            } catch (err) {
+                setSuggestions([]);
+            } finally {
+                setLoadingSuggestions(false);
+            }
+        }, 400);
+        return () => clearTimeout(tid);
+    }, [query, levelOption]);
+
+    const setLoadingGid = (gid: string, isLoading: boolean) => {
+        if (isLoading) loadingBoundaryIdsRef.current.add(gid);
+        else loadingBoundaryIdsRef.current.delete(gid);
+        // Force a re-render to reflect loading state changes
+        setLoadingBoundaryIds(new Set(loadingBoundaryIdsRef.current));
+    };
+
+    async function handleSelectRegion(region: any, forceLevel?: number, isMulti: boolean = false) {
+        const { levelOption, resolutionOption, enrich } = stateRef.current;
+        const gadmLevel = region.raw?.level ?? (region.level !== undefined ? region.level : levelOption);
+        const gid = region.gid || region[`GID_${gadmLevel}`] || region.GID_0;
+        const name = region.gadmName || region.name || region[`NAME_${gadmLevel}`] || region.NAME_0;
+
+        if (!gid) return;
+
+        if (!isMulti) {
+            if (isFetchingSelectionRef.current) return;
+            isFetchingSelectionRef.current = true;
+        }
+
+        const realGadmLevel = getOriginalLevel(gid);
+
+        // Ensure we handle duplicate queries safely
+        if (processingGids.current.has(gid)) {
+            if (!isMulti) isFetchingSelectionRef.current = false;
+            return;
+        }
+        processingGids.current.add(gid);
+
+        const targetLevel = (forceLevel !== undefined) ? forceLevel : (resolutionOption > realGadmLevel ? resolutionOption : realGadmLevel);
+
+        // Build parent chain for breadcrumb
+        const parents: { name: string; gid: string; level: number }[] = [];
+        // Try inspectedHierarchy first (available during inspector ctrl+click)
+        if (inspectedHierarchy) {
+            for (const row of inspectedHierarchy) {
+                if (row.level < realGadmLevel && row.gadmName && row.gid) {
+                    parents.push({ name: row.gadmName, gid: row.gid, level: row.level });
+                }
+            }
+        }
+        // Fallback: try raw GADM NAME_0/GID_0 fields (available from search results)
+        if (parents.length === 0) {
+            for (let l = 0; l < realGadmLevel; l++) {
+                const n = region[`NAME_${l}`];
+                const g = region[`GID_${l}`];
+                if (n && g) parents.push({ name: n, gid: g, level: l });
+            }
+        }
+
+        let isDuplicate = false;
+        setSelectedRegions(prev => {
+            if (prev.some(r => r.gid === gid)) { isDuplicate = true; return prev; }
+            return [...prev, { gid, gadmName: name, level: targetLevel, raw: region, parents: parents.length > 0 ? parents : undefined }];
+        });
+
+        if (isDuplicate) {
+            setQuery(''); setShowSuggestions(false);
+            return;
+        }
+
+        setQuery(''); setShowSuggestions(false);
+        setLoadingGid(gid, true);
+
+        try {
+            const displayLevel = Math.min(targetLevel, MAX_DISPLAY_LEVEL[realGadmLevel] ?? 5);
+
+            let geojson = await fetchRegionBoundary(
+                gid, name || '', displayLevel, enrich
+            );
+
+            if (!geojson.features || geojson.features.length === 0) {
+                console.warn(`No subdivisions found for ${gid} at level ${targetLevel} (displayed ${displayLevel}). Snapping back to level ${realGadmLevel}`);
+
+                setSelectedRegions(prev => prev.map(r => r.gid === gid ? { ...r, level: realGadmLevel } : r));
+                geojson = await fetchRegionBoundary(gid, name || '', realGadmLevel, enrich);
+            }
+
+            let activeStats: Record<string, any> | undefined;
+            if (enrich && geojson.features && geojson.features.length > 0) {
+                const props = geojson.features[0].properties;
+                if (props.ghsPopulation !== undefined || props.ghsBuiltWeight !== undefined) {
+                    activeStats = {
+                        ghsBuiltWeight: props.ghsBuiltWeight,
+                        ghsPopulation: props.ghsPopulation
+                    };
+                }
+            }
+
+            setSelectedRegions(prev => prev.map(r => r.gid === gid ? { ...r, stats: activeStats } : r));
+            setGeojsons(prev => ({ ...prev, [gid]: geojson }));
+
+            if (!isMulti && map && geojson && geojson.features && geojson.features.length > 0) {
+                try {
+                    const bbox = turf.bbox(geojson as any);
+                    map.fitBounds(bbox as any, { padding: 50, duration: 800 });
+                } catch (e) {
+                    console.error("Failed to auto-fit bounds", e);
+                }
+            }
+        } catch (e) {
+            console.error("Failed to fetch boundary for", gid, e);
+        } finally {
+            setLoadingGid(gid, false);
+            if (!isMulti) isFetchingSelectionRef.current = false;
+        }
+    };
+
+    const handleRemoveRegion = (gid: string) => {
+        processingGids.current.delete(gid);
+        setSelectedRegions(prev => prev.filter(r => r.gid !== gid));
+        setGeojsons(prev => {
+            const next = { ...prev };
+            delete next[gid];
+            return next;
+        });
+    };
+
+    const handleFlyToRegion = async (gid: string) => {
+        if (!map) return;
+        const gj = geojsons[gid];
+        if (!gj || !gj.features || gj.features.length === 0) return;
+
+        try {
+            const turf = await import('@turf/turf');
+            const bbox = turf.bbox(gj as any);
+            map.fitBounds(bbox as any, { padding: 50, duration: 800 });
+        } catch (e) {
+            console.error("Failed to fit bounds", e);
+        }
+    };
+
+    const handleReResolveRegion = (region: any, targetLevel: number) => {
+        if (loadingBoundaryIds.has(region.gid)) return;
+        if (targetLevel === region.level) return;
+        handleRemoveRegion(region.gid);
+        const originalRaw = region.raw || { gid: region.gid, gadmName: region.gadmName, level: region.level };
+        handleSelectRegion(originalRaw, targetLevel, true);
+    };
+
+    const handleCopyToClipboard = async () => {
+        const data = selectedRegions.map(r => ({ gid: r.gid, name: r.gadmName, level: r.level, raw: r.raw }));
+        await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+    };
+
+    const handleExportJson = () => {
+        if (!selectedRegions.length) return;
+        const data = selectedRegions.map(r => ({ gid: r.gid, name: r.gadmName, level: r.level, raw: r.raw }));
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `gadm-selection-${Date.now()}.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+
+    const handleImportJson = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = async (evt) => {
+            try {
+                const parsed = JSON.parse(evt.target?.result as string);
+                if (Array.isArray(parsed)) {
+                    // Full reset
+                    queuedInspectionsRef.current.clear();
+                    processingGids.current.clear();
+                    loadingBoundaryIdsRef.current.clear();
+                    setLoadingBoundaryIds(new Set());
+                    setSelectedRegions([]);
+                    setGeojsons({});
+
+                    // Queue them all concurrently via isMulti=true
+                    for (const item of parsed) {
+                        const raw = item.raw || { gid: item.gid, gadmName: item.name, level: item.level };
+                        handleSelectRegion(raw, item.level, true);
+                    }
+                }
+            } catch (err) {
+                console.error("Failed to parse JSON", err);
+            }
+            if (fileInputRef.current) fileInputRef.current.value = "";
+        };
+        reader.readAsText(file);
+    };
+
+    const handleClearAll = () => {
+        isFetchingSelectionRef.current = false;
+        queuedInspectionsRef.current.clear();
+        processingGids.current.clear();
+        loadingBoundaryIdsRef.current.clear();
+        setLoadingBoundaryIds(new Set());
+        setSelectedRegions([]);
+        setGeojsons({});
+        setInspectedGeojson(null);
+        setInspectedHierarchy(null);
+        if (markerRef.current) {
+            markerRef.current.remove();
+            markerRef.current = null;
+        }
+    };
+
+    // Import initialRegions prop (same logic as handleImportJson)
+    useEffect(() => {
+        if (!initialRegions || initialRegions.length === 0) return;
+        const key = initialRegions.map(r => r.gid).sort().join(',');
+        if (importedInitialRef.current === key) return;
+        importedInitialRef.current = key;
+
+        // Full reset, same as import handler
+        queuedInspectionsRef.current.clear();
+        processingGids.current.clear();
+        loadingBoundaryIdsRef.current.clear();
+        setLoadingBoundaryIds(new Set());
+        setSelectedRegions([]);
+        setGeojsons({});
+
+        for (const item of initialRegions) {
+            const raw = (item as any).raw || { gid: item.gid, gadmName: item.name, level: item.level };
+            handleSelectRegion(raw, item.level, true);
+        }
+    }, [initialRegions]);
+
+    useEffect(() => {
+        updateMapFeatures();
+    }, [updateMapFeatures]);
+
+    const sidebarContent = active ? (
+        <div className={`w-full h-full flex flex-col space-y-4 ${className}`}>
+
+            <p className="text-sm text-gray-600 dark:text-gray-400 flex-shrink-0">
+                <T>Click anywhere on the map to inspect administrative areas, or use the search below.</T>
+            </p>
+
+            {/* Config & Search */}
+            <GadmSearchControls
+                levelOption={levelOption} setLevelOption={setLevelOption}
+                resolutionOption={resolutionOption} setResolutionOption={setResolutionOption}
+                query={query} setQuery={setQuery}
+                suggestions={suggestions} loadingSuggestions={loadingSuggestions}
+                showSuggestions={showSuggestions} setShowSuggestions={setShowSuggestions}
+                onSelectSuggestion={(s, ctrlKey) => handleSelectRegion(s, undefined, ctrlKey)}
+                suggestionsWrapRef={suggestionsWrapRef}
+                layout="vertical"
+            />
+
+            <div className="flex-1 overflow-y-auto min-h-0 space-y-4 pr-2">
+                {/* Visual Inspector Panel */}
+                {(inspectedPoint || loadingInspector) && (
+                    <div className="bg-sky-50 dark:bg-sky-900/10 border border-sky-200 dark:border-sky-800 rounded-md p-3">
+                        <div className="flex items-center gap-2 mb-2 text-sky-800 dark:text-sky-300">
+                            <Crosshair className="w-4 h-4" />
+                            <h4 className="text-xs font-semibold uppercase tracking-wider"><T>Inspected Location</T></h4>
+                            {loadingInspector && <Loader2 className="w-3 h-3 animate-spin ml-auto" />}
+                        </div>
+
+                        {!loadingInspector && inspectedHierarchy && (
+                            <div className="flex flex-col gap-1.5 mt-2">
+                                {inspectedHierarchy.map((row) => (
+                                    <div key={row.level} className="flex flex-col">
+                                        <div className="flex items-center min-h-[28px] overflow-hidden group">
+                                            {/* Indentation */}
+                                            {Array.from({ length: row.level }).map((_, i) => (
+                                                <div key={i} className="w-3 mx-1 flex-shrink-0 flex items-center justify-center opacity-30">
+                                                    <ChevronRight className="w-3 h-3 text-sky-600 dark:text-sky-400" />
+                                                </div>
+                                            ))}
+
+                                            {/* Name / Action */}
+                                            {row.gid ? (
+                                                <div className="flex items-center flex-1 min-w-0 bg-white dark:bg-sky-900/30 border border-sky-100 dark:border-sky-800 rounded px-2 py-1 transition-colors group/row">
+                                                    <div
+                                                        className="flex items-baseline flex-1 min-w-0 mr-2 cursor-pointer group-hover/row:text-sky-600 transition-colors"
+                                                        onClick={() => handlePreviewRegion(row.gid, row.gadmName, row.level)}
+                                                    >
+                                                        {loadingHighlightGid === row.gid && <Loader2 className="w-3 h-3 animate-spin text-sky-500 mr-1.5 self-center shrink-0" />}
+                                                        <span className="text-sm font-medium text-sky-900 dark:text-sky-100 group-hover/row:text-sky-600 group-hover/row:underline dark:group-hover/row:text-sky-300 truncate flex-shrink">
+                                                            {row.gadmName}
+                                                        </span>
+                                                        <span className="ml-1.5 text-[10px] text-sky-500 dark:text-sky-400 font-normal opacity-70 flex-shrink-0">L{row.level}</span>
+                                                    </div>
+                                                    <button
+                                                        onClick={(e) => handleSelectRegion(row.gadmRow, row.level, e.ctrlKey || e.metaKey)}
+                                                        className="ml-auto text-[10px] font-bold tracking-wide uppercase bg-sky-100 hover:bg-sky-200 dark:bg-sky-800 dark:hover:bg-sky-700 text-sky-700 dark:text-sky-200 px-2 py-0.5 rounded transition-colors flex items-center gap-1 flex-shrink-0"
+                                                        title="Add this region"
+                                                    >
+                                                        <Plus className="w-3 h-3" /> <T>Add</T>
+                                                    </button>
+                                                </div>
+                                            ) : (
+                                                <div className="flex items-center flex-1 min-w-0 px-2 py-1">
+                                                    <span className="text-sm font-medium text-sky-900/40 dark:text-sky-100/30 italic truncate">
+                                                        <T>No Level</T> {row.level} <T>data</T>
+                                                    </span>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                {/* Selected Regions header and actions */}
+                <div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800/50 p-2 rounded border border-gray-100 dark:border-gray-700/50">
+                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                        <T>Picked Regions</T> {selectedRegions.length > 0 && `(${selectedRegions.length})`}
+                    </h4>
+                    <div className="flex gap-2">
+                        <button onClick={handleCopyToClipboard} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title="Copy configuration to clipboard">
+                            <Copy className="w-4 h-4" />
+                        </button>
+                        <button onClick={handleExportJson} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title="Download configuration JSON">
+                            <Download className="w-4 h-4" />
+                        </button>
+                        <button onClick={() => fileInputRef.current?.click()} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title="Import configuration JSON">
+                            <Upload className="w-4 h-4" />
+                        </button>
+                        <input type="file" ref={fileInputRef} className="hidden" accept="application/json" onChange={handleImportJson} />
+                        <div className="w-[1px] h-4 bg-gray-200 dark:bg-gray-700 mx-1"></div>
+                        <button onClick={handleClearAll} className="text-gray-400 hover:text-red-500 dark:hover:text-red-400" title="Clear all regions">
+                            <Trash2 className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+
+                {selectedRegions.length > 0 ? (
+                    <div className="space-y-2 pb-2">
+                        <div className="flex flex-col gap-2">
+                            {selectedRegions.map((region) => {
+                                const loading = loadingBoundaryIds.has(region.gid);
+                                const realGadm = getOriginalLevel(region.gid);
+                                const maxDisplay = MAX_DISPLAY_LEVEL[realGadm] ?? 5;
+                                const isCapped = region.level > maxDisplay;
+                                return (
+                                    <div
+                                        key={region.gid}
+                                        className="flex flex-col bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/50 rounded-lg p-2 cursor-pointer hover:bg-yellow-100 dark:hover:bg-yellow-900/40 transition-colors"
+                                        onClick={(e) => {
+                                            if ((e.target as HTMLElement).closest('button')) return;
+                                            handleFlyToRegion(region.gid);
+                                        }}
+                                    >
+                                        <div className="flex items-center gap-1.5 justify-between">
+                                            <div className="flex items-center gap-1.5 font-medium text-yellow-800 dark:text-yellow-300 text-sm">
+                                                {loading && <Loader2 className="w-3 h-3 animate-spin text-yellow-600" />}
+                                                {!loading && <span className="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0"></span>}
+                                                <span className="truncate">{region.gadmName}</span>
+                                                <span className="text-xs opacity-70">({region.gid})</span>
+                                            </div>
+                                            <button
+                                                onClick={(e) => { e.stopPropagation(); handleRemoveRegion(region.gid); }}
+                                                className="text-yellow-600 hover:text-red-500 flex-shrink-0 focus:outline-none ml-2 bg-yellow-100/50 dark:bg-yellow-800/30 p-1 rounded transition-colors"
+                                            >
+                                                <X className="w-3 h-3" />
+                                            </button>
+                                        </div>
+                                        {!loading && (() => {
+                                            const crumbs = region.parents;
+                                            if (!crumbs || crumbs.length === 0) return null;
+                                            return (
+                                                <div className="flex items-center flex-wrap gap-0.5 mt-1 pl-3.5 text-[10px] text-yellow-700/70 dark:text-yellow-400/60">
+                                                    {crumbs.map((c, i) => (
+                                                        <React.Fragment key={c.gid}>
+                                                            {i > 0 && <ChevronRight className="w-2.5 h-2.5 opacity-50" />}
+                                                            <button
+                                                                onClick={async (e) => {
+                                                                    e.stopPropagation();
+                                                                    try {
+                                                                        const geo = await fetchRegionBoundary(c.gid, c.name, c.level, false);
+                                                                        if (geo?.features?.length) {
+                                                                            const centroid = turf.centroid(geo.features[0]);
+                                                                            const [lng, lat] = centroid.geometry.coordinates;
+                                                                            await performInspection(lat, lng);
+                                                                        }
+                                                                    } catch (err) {
+                                                                        console.error('Breadcrumb inspect failed', err);
+                                                                    }
+                                                                }}
+                                                                className="hover:text-yellow-900 dark:hover:text-yellow-200 hover:underline underline-offset-2 transition-colors cursor-pointer"
+                                                                title={`Inspect ${c.name}`}
+                                                            >
+                                                                {c.name}
+                                                            </button>
+                                                        </React.Fragment>
+                                                    ))}
+                                                </div>
+                                            );
+                                        })()}
+                                        {region.stats && !loading && (
+                                            <div className="mt-1.5 text-xs text-yellow-700 dark:text-yellow-500 flex gap-4 opacity-90 border-t border-yellow-200/50 dark:border-yellow-800/50 pt-1.5 pl-3.5">
+                                                <span><strong className="font-semibold"><T>Built:</T></strong> {region.stats.ghsBuiltWeight ? Math.round(region.stats.ghsBuiltWeight).toLocaleString() : 'N/A'}</span>
+                                                <span><strong className="font-semibold"><T>Pop:</T></strong> {region.stats.ghsPopulation ? Math.round(region.stats.ghsPopulation).toLocaleString() : 'N/A'}</span>
+                                            </div>
+                                        )}
+                                        {isCapped && !loading && (
+                                            <div className="mt-1.5 text-[10px] text-amber-600 dark:text-amber-400 flex items-center gap-1 pl-3.5 opacity-80" title={`Target is L${region.level} but map shows max L${maxDisplay} for performance. Simulator uses full L${region.level} data.`}>
+                                                <svg className="w-3 h-3 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>
+                                                <span><T>Map capped at</T> <strong>L{maxDisplay}</strong> — <T>simulator uses full</T> <strong>L{region.level}</strong></span>
+                                            </div>
+                                        )}
+                                        <div className="mt-2 flex items-center justify-between border-t border-yellow-200/50 dark:border-yellow-800/50 pt-2 px-1">
+                                            <span className="text-[10px] uppercase font-bold text-yellow-600/70 dark:text-yellow-500/70 tracking-wider"><T>Change Level</T></span>
+                                            <div className="flex items-center bg-yellow-100/50 dark:bg-yellow-900/30 p-0.5 rounded border border-yellow-200 dark:border-yellow-700/50">
+                                                {[0, 1, 2, 3, 4, 5].map((lvl) => {
+                                                    const isSelected = lvl === region.level;
+                                                    return (
+                                                        <button
+                                                            key={lvl}
+                                                            onClick={(e) => { e.stopPropagation(); handleReResolveRegion(region, lvl); }}
+                                                            className={`px-2 py-0.5 text-[10px] font-bold rounded transition-colors ${isSelected
+                                                                ? 'bg-yellow-400 text-yellow-900 shadow-sm'
+                                                                : 'text-yellow-700 dark:text-yellow-400 hover:bg-yellow-200/50 dark:hover:bg-yellow-800/50'
+                                                                }`}
+                                                            title={`Change to Level ${lvl}`}
+                                                        >
+                                                            L{lvl}
+                                                        </button>
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+
+                            {/* Optimistic pending selection placeholders */}
+                            {Array.from({ length: pendingSelectionCount }).map((_, i) => (
+                                <div key={`pending-${i}`} className="flex flex-col bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/50 rounded-lg p-2 opacity-70">
+                                    <div className="flex items-center gap-2 font-medium text-yellow-800 dark:text-yellow-300 text-sm">
+                                        <Loader2 className="w-3 h-3 animate-spin text-yellow-600" />
+                                        <span>Resolving location...</span>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ) : (
+                    pendingSelectionCount > 0 ? (
+                        <div className="space-y-2 pb-2">
+                            <div className="flex flex-col gap-2">
+                                {Array.from({ length: pendingSelectionCount }).map((_, i) => (
+                                    <div key={`pending-empty-${i}`} className="flex flex-col bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/50 rounded-lg p-2 opacity-70">
+                                        <div className="flex items-center gap-2 font-medium text-yellow-800 dark:text-yellow-300 text-sm">
+                                            <Loader2 className="w-3 h-3 animate-spin text-yellow-600" />
+                                            <span><T>Resolving location...</T></span>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        !inspectedPoint && (
+                            <div className="text-sm text-gray-500 italic text-center py-4 bg-gray-50 dark:bg-gray-800/50 rounded border border-dashed border-gray-200 dark:border-gray-700">
+                                <T>No regions picked yet.</T>
+                            </div>
+                        )
+                    )
+                )}
+            </div>
+        </div>
+    ) : null;
+
+    return (
+        <>
+            {sidebarContent}
+
+            {/* Portal Config & Search to Header */}
+            {headerPortalTarget && createPortal(
+                <GadmSearchControls
+                    levelOption={levelOption} setLevelOption={setLevelOption}
+                    resolutionOption={resolutionOption} setResolutionOption={setResolutionOption}
+                    query={query} setQuery={setQuery}
+                    suggestions={suggestions} loadingSuggestions={loadingSuggestions}
+                    showSuggestions={showSuggestions} setShowSuggestions={setShowSuggestions}
+                    onSelectSuggestion={(s, ctrlKey) => handleSelectRegion(s, undefined, ctrlKey)}
+                    suggestionsWrapRef={headerSuggestionsWrapRef}
+                    layout="horizontal"
+                />,
+                headerPortalTarget
+            )}
+        </>
+    );
+}
diff --git a/packages/ui/src/modules/places/gadm-picker/GadmPickerContext.tsx b/packages/ui/src/modules/places/gadm-picker/GadmPickerContext.tsx
index 3d338eb6..50d97d40 100644
--- a/packages/ui/src/modules/places/gadm-picker/GadmPickerContext.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/GadmPickerContext.tsx
@@ -1,42 +1,42 @@
-import React, { createContext, useContext, useState, useRef } from 'react';
-import type { GadmNode, GadmTreePickerApi, ExpandState } from './GadmTreePicker';
-
-export interface GadmPickerState {
-    roots: GadmNode[];
-    setRoots: React.Dispatch<React.SetStateAction<GadmNode[]>>;
-    expandMap: Record<string, ExpandState>;
-    setExpandMap: React.Dispatch<React.SetStateAction<Record<string, ExpandState>>>;
-    regionQuery: string;
-    setRegionQuery: React.Dispatch<React.SetStateAction<string>>;
-    hasAutoLocated: boolean;
-    setHasAutoLocated: React.Dispatch<React.SetStateAction<boolean>>;
-    treeApiRef: React.MutableRefObject<GadmTreePickerApi | null>;
-}
-
-const GadmPickerContext = createContext<GadmPickerState | null>(null);
-
-export function GadmPickerProvider({ children }: { children: React.ReactNode }) {
-    const [roots, setRoots] = useState<GadmNode[]>([]);
-    const [expandMap, setExpandMap] = useState<Record<string, ExpandState>>({});
-    const [regionQuery, setRegionQuery] = useState('');
-    const [hasAutoLocated, setHasAutoLocated] = useState(false);
-    const treeApiRef = useRef<GadmTreePickerApi | null>(null);
-
-    return (
-        <GadmPickerContext.Provider value={{
-            roots, setRoots,
-            expandMap, setExpandMap,
-            regionQuery, setRegionQuery,
-            hasAutoLocated, setHasAutoLocated,
-            treeApiRef,
-        }}>
-            {children}
-        </GadmPickerContext.Provider>
-    );
-}
-
-export function useGadmPicker(): GadmPickerState {
-    const ctx = useContext(GadmPickerContext);
-    if (!ctx) throw new Error('useGadmPicker must be used within GadmPickerProvider');
-    return ctx;
-}
+import React, { createContext, useContext, useState, useRef } from 'react';
+import type { GadmNode, GadmTreePickerApi, ExpandState } from './GadmTreePicker';
+
+export interface GadmPickerState {
+    roots: GadmNode[];
+    setRoots: React.Dispatch<React.SetStateAction<GadmNode[]>>;
+    expandMap: Record<string, ExpandState>;
+    setExpandMap: React.Dispatch<React.SetStateAction<Record<string, ExpandState>>>;
+    regionQuery: string;
+    setRegionQuery: React.Dispatch<React.SetStateAction<string>>;
+    hasAutoLocated: boolean;
+    setHasAutoLocated: React.Dispatch<React.SetStateAction<boolean>>;
+    treeApiRef: React.MutableRefObject<GadmTreePickerApi | null>;
+}
+
+const GadmPickerContext = createContext<GadmPickerState | null>(null);
+
+export function GadmPickerProvider({ children }: { children: React.ReactNode }) {
+    const [roots, setRoots] = useState<GadmNode[]>([]);
+    const [expandMap, setExpandMap] = useState<Record<string, ExpandState>>({});
+    const [regionQuery, setRegionQuery] = useState('');
+    const [hasAutoLocated, setHasAutoLocated] = useState(false);
+    const treeApiRef = useRef<GadmTreePickerApi | null>(null);
+
+    return (
+        <GadmPickerContext.Provider value={{
+            roots, setRoots,
+            expandMap, setExpandMap,
+            regionQuery, setRegionQuery,
+            hasAutoLocated, setHasAutoLocated,
+            treeApiRef,
+        }}>
+            {children}
+        </GadmPickerContext.Provider>
+    );
+}
+
+export function useGadmPicker(): GadmPickerState {
+    const ctx = useContext(GadmPickerContext);
+    if (!ctx) throw new Error('useGadmPicker must be used within GadmPickerProvider');
+    return ctx;
+}
diff --git a/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx b/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx
index 5c269214..3341e11d 100644
--- a/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx
@@ -1,288 +1,286 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { MapPin, Loader2, Locate } from 'lucide-react';
-import { searchGadmRegions, fetchRegionChildren, fetchRegionHierarchy } from '../client-searches';
-import { GadmTreePicker, GadmNode, GadmTreePickerApi } from './GadmTreePicker';
-import { GadmPickedRegions } from './GadmPickedRegions';
-import { useGadmPicker } from './GadmPickerContext';
-
-export interface GadmRegionCollectorProps {
-    selectedNodes: GadmNode[];
-    onSelectionChange: (nodes: GadmNode[]) => void;
-    resolutions: Record<string, number>;
-    onChangeResolution: (gid: string, level: number) => void;
-}
-export function GadmRegionCollector({
-    onSelectionChange,
-    selectedNodes,
-    resolutions,
-    onChangeResolution
-}: GadmRegionCollectorProps) {
-    const {
-        roots, setRoots,
-        expandMap, setExpandMap,
-        regionQuery, setRegionQuery,
-        hasAutoLocated, setHasAutoLocated,
-        treeApiRef,
-    } = useGadmPicker();
-
-    const [suggestions, setSuggestions] = useState<any[]>([]);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [loadingSuggestions, setLoadingSuggestions] = useState(false);
-    
-    const suggestionsWrapRef = useRef<HTMLDivElement>(null);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const [isLocating, setIsLocating] = useState(false);
-
-    const handleAddSuggestion = (s: any, keepQuery?: string) => {
-        // Find the deepest GID available in the search result
-        let deepestGid = '';
-        let deepestName = '';
-        let deepestLevel = -1;
-        for (let i = 5; i >= 0; i--) {
-            if (s[`GID_${i}`]) {
-                deepestGid = s[`GID_${i}`];
-                deepestName = s[`NAME_${i}`] || s.name || deepestGid;
-                deepestLevel = i;
-                break;
-            }
-        }
-        if (!deepestGid) return;
-
-        // Parse the GID to reconstruct the full hierarchy
-        // GID format: "DEU.14.3_1" → country="DEU", segments=["14","3"], version="_1"
-        const versionMatch = deepestGid.match(/_\d+$/);
-        const version = versionMatch ? versionMatch[0] : '_1';
-        const withoutVersion = deepestGid.replace(/_\d+$/, '');
-        const parts = withoutVersion.split('.');
-        const countryCode = parts[0]; // e.g. "DEU"
-
-        // Build path GIDs for each level: DEU, DEU.14_1, DEU.14.3_1
-        const pathGids: string[] = [countryCode];
-        for (let i = 1; i < parts.length; i++) {
-            pathGids.push(parts.slice(0, i + 1).join('.') + version);
-        }
-
-        // Create root node for the country (L0)
-        const rootName = s['NAME_0'] || countryCode;
-        const rootNode: GadmNode = {
-            name: rootName,
-            gid: countryCode,
-            level: 0,
-            hasChildren: true,
-            data: { GID_0: countryCode, NAME_0: rootName }
-        };
-
-        setRoots(prev => {
-            if (prev.find(p => p.gid === rootNode.gid)) return prev;
-            return [...prev, rootNode];
-        });
-
-        // Trigger expand path with all GIDs up to the target
-        setTimeout(() => {
-            treeApiRef.current?.expandPath(pathGids);
-        }, 100);
-
-        if (keepQuery !== undefined) {
-            setRegionQuery(keepQuery);
-        } else {
-            setRegionQuery('');
-        }
-        setShowSuggestions(false);
-    };
-
-    const performLocate = async () => {
-        setIsLocating(true);
-        try {
-            const res = await fetch('http://ip-api.com/json/');
-            if (res.ok) {
-                const data = await res.json();
-                if (data.status === 'success' && data.lat && data.lon) {
-                    const hierarchy = await fetchRegionHierarchy(data.lat, data.lon);
-                    if (hierarchy && hierarchy.length > 0) {
-                        const pathGids = hierarchy.map((d: any) => d.gid);
-                        const l0 = hierarchy[0];
-                        const rootNode: GadmNode = {
-                            name: l0.gadmName || l0.name || l0.gid,
-                            gid: l0.gid,
-                            level: l0.level,
-                            hasChildren: l0.level < 5,
-                            data: l0 
-                        };
-                        
-                        setRoots(prev => {
-                            if (prev.find(p => p.gid === rootNode.gid)) return prev;
-                            return [...prev, rootNode];
-                        });
-
-                        setTimeout(() => {
-                            treeApiRef.current?.expandPath(pathGids);
-                        }, 100);
-                        
-                        const lastNode = hierarchy[hierarchy.length - 1];
-                        setRegionQuery(lastNode.gadmName || lastNode.name || lastNode.gid);
-                    }
-                }
-            }
-        } catch (e) {
-            console.error('Failed to locate', e);
-        } finally {
-            setIsLocating(false);
-        }
-    };
-
-    useEffect(() => {
-        if (!hasAutoLocated) {
-            setHasAutoLocated(true);
-            performLocate();
-        }
-    }, [hasAutoLocated]);
-    
-    useEffect(() => {
-        if (!regionQuery || regionQuery.length < 2) { setSuggestions([]); return; }
-        const id = setTimeout(async () => {
-            setLoadingSuggestions(true);
-            try {
-                const results = await searchGadmRegions(regionQuery);
-                setSuggestions(Array.isArray(results) ? results : (results as any).results || []);
-                if (document.activeElement === inputRef.current) {
-                    setShowSuggestions(true);
-                }
-            } catch { setSuggestions([]); }
-            setLoadingSuggestions(false);
-        }, 400);
-        return () => clearTimeout(id);
-    }, [regionQuery]);
-
-    useEffect(() => {
-        const handler = (e: MouseEvent) => {
-            if (suggestionsWrapRef.current && !suggestionsWrapRef.current.contains(e.target as Node))
-                setShowSuggestions(false);
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, []);
-
-    const handleRemovePicked = (node: GadmNode) => {
-        const nextNodes = selectedNodes.filter(n => n.gid !== node.gid);
-        onSelectionChange(nextNodes);
-        treeApiRef.current?.setSelectedIds(nextNodes.map(n => n.gid));
-    };
-
-    const handleClearAll = () => {
-        onSelectionChange([]);
-        treeApiRef.current?.setSelectedIds([]);
-    };
-
-    return (
-        <div className="flex flex-col gap-4 flex-1 min-h-0 w-full">
-            <div className="relative mt-2" ref={suggestionsWrapRef}>
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <MapPin className="h-6 w-6 text-gray-400" />
-                </div>
-                <input
-                    ref={inputRef}
-                    type="text"
-                    placeholder="Search countries, regions, cities to add..."
-                    className="w-full block pl-12 pr-12 py-4 text-lg border-2 border-transparent bg-gray-100 dark:bg-gray-900 focus:bg-white dark:focus:bg-gray-800 focus:border-indigo-500 focus:ring-0 rounded-xl transition-colors dark:text-white"
-                    value={regionQuery}
-                    onChange={e => { setRegionQuery(e.target.value); setShowSuggestions(true); }}
-                    onFocus={() => setShowSuggestions(true)}
-                />
-                <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
-                    {loadingSuggestions ? (
-                        <Loader2 className="w-6 h-6 animate-spin text-indigo-500" />
-                    ) : (
-                        <button 
-                            type="button"
-                            onClick={performLocate}
-                            disabled={isLocating}
-                            className="p-1.5 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors disabled:opacity-50"
-                            title="Use my current location"
-                        >
-                            {isLocating ? <Loader2 className="w-5 h-5 animate-spin" /> : <Locate className="w-5 h-5" />}
-                        </button>
-                    )}
-                </div>
-                {showSuggestions && suggestions.length > 0 && (
-                    <ul className="absolute z-50 w-full mt-2 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl shadow-2xl max-h-64 overflow-auto py-2">
-                        {suggestions.map((s, i) => {
-                            const nameKey = Object.keys(s).find(k => k.startsWith('NAME_'));
-                            const gidKey = Object.keys(s).find(k => k.startsWith('GID_'));
-                            const name = nameKey ? s[nameKey] : '';
-                            const gid = gidKey ? s[gidKey] : '';
-                            const displayName = s.hierarchy || s.name || name || gid;
-                            return (
-                                <li
-                                    key={i}
-                                    className="px-6 py-3 cursor-pointer hover:bg-indigo-50 dark:hover:bg-gray-700 transition-colors flex items-center gap-3"
-                                    onClick={() => handleAddSuggestion(s)}
-                                >
-                                    <MapPin className="h-4 w-4 text-gray-400" />
-                                    <div>
-                                        <div className="font-medium text-gray-800 dark:text-gray-200">{displayName}</div>
-                                        <div className="text-sm text-gray-500">{gid}</div>
-                                    </div>
-                                </li>
-                            );
-                        })}
-                    </ul>
-                )}
-            </div>
-            
-            <div className="flex-1 min-h-0 border rounded-xl overflow-hidden bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 flex flex-col">
-                {roots.length === 0 ? (
-                    <div className="flex-1 flex flex-col items-center justify-center text-gray-400">
-                        <MapPin className="w-12 h-12 mb-2 opacity-50" />
-                        <p>Search and select regions above to build your list</p>
-                    </div>
-                ) : (
-                    <div className="flex flex-col h-full overflow-hidden">
-                        <div className="flex-1 min-h-0 border-b border-gray-200 dark:border-gray-700">
-                            <GadmTreePicker 
-                                apiRef={treeApiRef}
-                                data={roots} 
-                                expandMapExternal={expandMap}
-                                setExpandMapExternal={setExpandMap}
-                                initialSelectedIds={selectedNodes.map(n => n.gid)}
-                                fetchChildren={async (node) => {
-                                   const children = await fetchRegionChildren(node.gid, node.level + 1);
-                                   const seen = new Set();
-                                   return children.map((c: any) => {
-                                       const actualName = c.name || c.gadmName || c[`NAME_${node.level + 1}`] || c.gid || 'Unknown';
-                                       return {
-                                           name: actualName,
-                                           gid: c.gid || c[`GID_${node.level + 1}`] || c.id || Math.random().toString(),
-                                           level: node.level + 1,
-                                           hasChildren: node.level + 1 < 5,
-                                           label: c.LABEL || undefined,
-                                           data: c
-                                       };
-                                   }).filter((c: any) => {
-                                       if (seen.has(c.gid)) return false;
-                                       seen.add(c.gid);
-                                       const display = c.label || c.name;
-                                       if (display.toLowerCase() === 'unknown') return false;
-                                       return true;
-                                   });
-                                }}
-                                onSelectionChange={onSelectionChange}
-                            />
-                        </div>
-
-                        {selectedNodes.length > 0 && (
-                            <div className="shrink-0 max-h-[50%] overflow-y-auto p-4 bg-gray-50/30 dark:bg-gray-800/10">
-                                <GadmPickedRegions 
-                                    selectedNodes={selectedNodes}
-                                    resolutions={resolutions}
-                                    onRemove={handleRemovePicked}
-                                    onChangeResolution={(node, lvl) => onChangeResolution(node.gid, lvl)}
-                                    onClearAll={handleClearAll}
-                                />
-                            </div>
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
+import React, { useState, useEffect, useRef } from 'react';
+import { MapPin, Loader2, Locate } from 'lucide-react';
+import { searchGadmRegions, fetchRegionChildren, fetchRegionHierarchy, fetchIpLocation } from '../client-gridsearch';
+import { GadmTreePicker, GadmNode, GadmTreePickerApi } from './GadmTreePicker';
+import { GadmPickedRegions } from './GadmPickedRegions';
+import { useGadmPicker } from './GadmPickerContext';
+import { T, translate } from '../../../i18n';
+
+export interface GadmRegionCollectorProps {
+    selectedNodes: GadmNode[];
+    onSelectionChange: (nodes: GadmNode[]) => void;
+    resolutions: Record<string, number>;
+    onChangeResolution: (gid: string, level: number) => void;
+}
+export function GadmRegionCollector({
+    onSelectionChange,
+    selectedNodes,
+    resolutions,
+    onChangeResolution
+}: GadmRegionCollectorProps) {
+    const {
+        roots, setRoots,
+        expandMap, setExpandMap,
+        regionQuery, setRegionQuery,
+        hasAutoLocated, setHasAutoLocated,
+        treeApiRef,
+    } = useGadmPicker();
+
+    const [suggestions, setSuggestions] = useState<any[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [loadingSuggestions, setLoadingSuggestions] = useState(false);
+    
+    const suggestionsWrapRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [isLocating, setIsLocating] = useState(false);
+
+    const handleAddSuggestion = (s: any, keepQuery?: string) => {
+        // Find the deepest GID available in the search result
+        let deepestGid = '';
+        let deepestName = '';
+        let deepestLevel = -1;
+        for (let i = 5; i >= 0; i--) {
+            if (s[`GID_${i}`]) {
+                deepestGid = s[`GID_${i}`];
+                deepestName = s[`NAME_${i}`] || s.name || deepestGid;
+                deepestLevel = i;
+                break;
+            }
+        }
+        if (!deepestGid) return;
+
+        // Parse the GID to reconstruct the full hierarchy
+        // GID format: "DEU.14.3_1" → country="DEU", segments=["14","3"], version="_1"
+        const versionMatch = deepestGid.match(/_\d+$/);
+        const version = versionMatch ? versionMatch[0] : '_1';
+        const withoutVersion = deepestGid.replace(/_\d+$/, '');
+        const parts = withoutVersion.split('.');
+        const countryCode = parts[0]; // e.g. "DEU"
+
+        // Build path GIDs for each level: DEU, DEU.14_1, DEU.14.3_1
+        const pathGids: string[] = [countryCode];
+        for (let i = 1; i < parts.length; i++) {
+            pathGids.push(parts.slice(0, i + 1).join('.') + version);
+        }
+
+        // Create root node for the country (L0)
+        const rootName = s['NAME_0'] || countryCode;
+        const rootNode: GadmNode = {
+            name: rootName,
+            gid: countryCode,
+            level: 0,
+            hasChildren: true,
+            data: { GID_0: countryCode, NAME_0: rootName }
+        };
+
+        setRoots(prev => {
+            if (prev.find(p => p.gid === rootNode.gid)) return prev;
+            return [...prev, rootNode];
+        });
+
+        // Trigger expand path with all GIDs up to the target
+        setTimeout(() => {
+            treeApiRef.current?.expandPath(pathGids);
+        }, 100);
+
+        if (keepQuery !== undefined) {
+            setRegionQuery(keepQuery);
+        } else {
+            setRegionQuery('');
+        }
+        setShowSuggestions(false);
+    };
+
+    const performLocate = async () => {
+        setIsLocating(true);
+        try {
+            const data = await fetchIpLocation();
+            if (data && data.status === 'success' && data.lat && data.lon) {
+                const hierarchy = await fetchRegionHierarchy(data.lat, data.lon);
+                if (hierarchy && hierarchy.length > 0) {
+                    const pathGids = hierarchy.map((d: any) => d.gid);
+                    const l0 = hierarchy[0];
+                    const rootNode: GadmNode = {
+                        name: l0.gadmName || l0.name || l0.gid,
+                        gid: l0.gid,
+                        level: l0.level,
+                        hasChildren: l0.level < 5,
+                        data: l0 
+                    };
+                    
+                    setRoots(prev => {
+                        if (prev.find(p => p.gid === rootNode.gid)) return prev;
+                        return [...prev, rootNode];
+                    });
+
+                    setTimeout(() => {
+                        treeApiRef.current?.expandPath(pathGids);
+                    }, 100);
+                    
+                    const lastNode = hierarchy[hierarchy.length - 1];
+                    setRegionQuery(lastNode.gadmName || lastNode.name || lastNode.gid);
+                }
+            }
+        } catch (e) {
+            console.error('Failed to locate', e);
+        } finally {
+            setIsLocating(false);
+        }
+    };
+
+    useEffect(() => {
+        if (!hasAutoLocated) {
+            setHasAutoLocated(true);
+            performLocate();
+        }
+    }, [hasAutoLocated]);
+    
+    useEffect(() => {
+        if (!regionQuery || regionQuery.length < 2) { setSuggestions([]); return; }
+        const id = setTimeout(async () => {
+            setLoadingSuggestions(true);
+            try {
+                const results = await searchGadmRegions(regionQuery);
+                setSuggestions(Array.isArray(results) ? results : (results as any).results || []);
+                if (document.activeElement === inputRef.current) {
+                    setShowSuggestions(true);
+                }
+            } catch { setSuggestions([]); }
+            setLoadingSuggestions(false);
+        }, 400);
+        return () => clearTimeout(id);
+    }, [regionQuery]);
+
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            if (suggestionsWrapRef.current && !suggestionsWrapRef.current.contains(e.target as Node))
+                setShowSuggestions(false);
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, []);
+
+    const handleRemovePicked = (node: GadmNode) => {
+        const nextNodes = selectedNodes.filter(n => n.gid !== node.gid);
+        onSelectionChange(nextNodes);
+        treeApiRef.current?.setSelectedIds(nextNodes.map(n => n.gid));
+    };
+
+    const handleClearAll = () => {
+        onSelectionChange([]);
+        treeApiRef.current?.setSelectedIds([]);
+    };
+
+    return (
+        <div className="flex flex-col gap-4 flex-1 min-h-0 w-full">
+            <div className="relative mt-2" ref={suggestionsWrapRef}>
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                    <MapPin className="h-6 w-6 text-gray-400" />
+                </div>
+                <input
+                    ref={inputRef}
+                    type="text"
+                    placeholder={translate("Search countries, regions, cities to add...")}
+                    className="w-full block pl-12 pr-12 py-4 text-lg border-2 border-transparent bg-gray-100 dark:bg-gray-900 focus:bg-white dark:focus:bg-gray-800 focus:border-indigo-500 focus:ring-0 rounded-xl transition-colors dark:text-white"
+                    value={regionQuery}
+                    onChange={e => { setRegionQuery(e.target.value); setShowSuggestions(true); }}
+                    onFocus={() => setShowSuggestions(true)}
+                />
+                <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
+                    {loadingSuggestions ? (
+                        <Loader2 className="w-6 h-6 animate-spin text-indigo-500" />
+                    ) : (
+                        <button 
+                            type="button"
+                            onClick={performLocate}
+                            disabled={isLocating}
+                            className="p-1.5 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors disabled:opacity-50"
+                            title={translate("Use my current location")}
+                        >
+                            {isLocating ? <Loader2 className="w-5 h-5 animate-spin" /> : <Locate className="w-5 h-5" />}
+                        </button>
+                    )}
+                </div>
+                {showSuggestions && suggestions.length > 0 && (
+                    <ul className="absolute z-50 w-full mt-2 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl shadow-2xl max-h-64 overflow-auto py-2">
+                        {suggestions.map((s, i) => {
+                            const nameKey = Object.keys(s).find(k => k.startsWith('NAME_'));
+                            const gidKey = Object.keys(s).find(k => k.startsWith('GID_'));
+                            const name = nameKey ? s[nameKey] : '';
+                            const gid = gidKey ? s[gidKey] : '';
+                            const displayName = s.hierarchy || s.name || name || gid;
+                            return (
+                                <li
+                                    key={i}
+                                    className="px-6 py-3 cursor-pointer hover:bg-indigo-50 dark:hover:bg-gray-700 transition-colors flex items-center gap-3"
+                                    onClick={() => handleAddSuggestion(s)}
+                                >
+                                    <MapPin className="h-4 w-4 text-gray-400" />
+                                    <div>
+                                        <div className="font-medium text-gray-800 dark:text-gray-200">{displayName}</div>
+                                        <div className="text-sm text-gray-500">{gid}</div>
+                                    </div>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                )}
+            </div>
+            
+            <div className="flex-1 min-h-0 border rounded-xl overflow-hidden bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 flex flex-col">
+                {roots.length === 0 ? (
+                    <div className="flex-1 flex flex-col items-center justify-center text-gray-400">
+                        <MapPin className="w-12 h-12 mb-2 opacity-50" />
+                        <p><T>Search and select regions above to build your list</T></p>
+                    </div>
+                ) : (
+                    <div className="flex flex-col h-full overflow-hidden">
+                        <div className="flex-1 min-h-0 border-b border-gray-200 dark:border-gray-700">
+                            <GadmTreePicker 
+                                apiRef={treeApiRef}
+                                data={roots} 
+                                expandMapExternal={expandMap}
+                                setExpandMapExternal={setExpandMap}
+                                initialSelectedIds={selectedNodes.map(n => n.gid)}
+                                fetchChildren={async (node) => {
+                                   const children = await fetchRegionChildren(node.gid, node.level + 1);
+                                   const seen = new Set();
+                                   return children.map((c: any) => {
+                                       const actualName = c.name || c.gadmName || c[`NAME_${node.level + 1}`] || c.gid || 'Unknown';
+                                       return {
+                                           name: actualName,
+                                           gid: c.gid || c[`GID_${node.level + 1}`] || c.id || Math.random().toString(),
+                                           level: node.level + 1,
+                                           hasChildren: node.level + 1 < 5,
+                                           label: c.LABEL || undefined,
+                                           data: c
+                                       };
+                                   }).filter((c: any) => {
+                                       if (seen.has(c.gid)) return false;
+                                       seen.add(c.gid);
+                                       const display = c.label || c.name;
+                                       if (display.toLowerCase() === 'unknown') return false;
+                                       return true;
+                                   });
+                                }}
+                                onSelectionChange={onSelectionChange}
+                            />
+                        </div>
+
+                        {selectedNodes.length > 0 && (
+                            <div className="shrink-0 max-h-[50%] overflow-y-auto p-4 bg-gray-50/30 dark:bg-gray-800/10">
+                                <GadmPickedRegions 
+                                    selectedNodes={selectedNodes}
+                                    resolutions={resolutions}
+                                    onRemove={handleRemovePicked}
+                                    onChangeResolution={(node, lvl) => onChangeResolution(node.gid, lvl)}
+                                    onClearAll={handleClearAll}
+                                />
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gadm-picker/GadmTreePicker.tsx b/packages/ui/src/modules/places/gadm-picker/GadmTreePicker.tsx
index 9363a029..a68b4878 100644
--- a/packages/ui/src/modules/places/gadm-picker/GadmTreePicker.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/GadmTreePicker.tsx
@@ -1,640 +1,640 @@
-import React, { useMemo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { ChevronRight, Globe, MapPin, Loader2 } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export interface GadmNode {
-    name: string;
-    gid: string;
-    level: number;
-    hasChildren: boolean;
-    label?: string;
-    data?: any;
-}
-
-export interface GadmTreePickerApi {
-    expandPath: (gids: string[]) => void;
-    setSelectedIds: (gids: string[]) => void;
-}
-
-export interface GadmTreePickerProps {
-    data: GadmNode[];
-    onSelect?: (node: GadmNode) => void;
-    onSelectionChange?: (nodes: GadmNode[]) => void;
-    onActivate?: (node: GadmNode) => void;
-    selectedId?: string;
-    className?: string;
-    fetchChildren?: (node: GadmNode) => Promise<GadmNode[]>;
-    fontSize?: number;
-    apiRef?: React.MutableRefObject<GadmTreePickerApi | null>;
-    expandMapExternal?: Record<string, ExpandState>;
-    setExpandMapExternal?: React.Dispatch<React.SetStateAction<Record<string, ExpandState>>>;
-    initialSelectedIds?: string[];
-}
-
-type TreeRow = {
-    id: string;
-    name: string;
-    displayName: string;
-    node: GadmNode;
-    depth: number;
-    parentId: string | null;
-    expanded: boolean;
-    loading: boolean;
-};
-
-export interface ExpandState {
-    expanded: boolean;
-    children: GadmNode[];
-    loading: boolean;
-}
-
-function sortNodesAsc(nodes: GadmNode[]): GadmNode[] {
-    return [...nodes].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
-}
-
-function buildRows(
-    nodes: GadmNode[],
-    expandMap: Record<string, ExpandState>,
-    depth: number = 0,
-    parentId: string | null = null
-): TreeRow[] {
-    const rows: TreeRow[] = [];
-    for (const n of nodes) {
-        const state = expandMap[n.gid];
-        const expanded = state?.expanded ?? false;
-        const loading = state?.loading ?? false;
-        // If we fetched children and got none, treat as leaf (no arrow)
-        const knownEmpty = state && !state.loading && state.children !== undefined && state.children.length === 0;
-        const effectiveNode = knownEmpty ? { ...n, hasChildren: false } : n;
-        rows.push({
-            id: n.gid,
-            name: n.name,
-            displayName: n.label || n.name,
-            node: effectiveNode,
-            depth,
-            parentId,
-            expanded,
-            loading,
-        });
-        if (n.hasChildren && expanded && state?.children?.length) {
-            const childRows = buildRows(
-                sortNodesAsc(state.children),
-                expandMap,
-                depth + 1,
-                n.gid
-            );
-            rows.push(...childRows);
-        }
-    }
-    return rows;
-}
-
-function findMatchIdx(rows: TreeRow[], str: string, startFrom: number, direction: 1 | -1 = 1): number {
-    const count = rows.length;
-    for (let i = 0; i < count; i++) {
-        const idx = ((startFrom + i * direction) % count + count) % count;
-        if (rows[idx].displayName.toLowerCase().startsWith(str)) return idx;
-    }
-    for (let i = 0; i < count; i++) {
-        const idx = ((startFrom + i * direction) % count + count) % count;
-        if (rows[idx].displayName.toLowerCase().includes(str)) return idx;
-    }
-    return -1;
-}
-
-export const GadmTreePicker = React.forwardRef<HTMLDivElement, GadmTreePickerProps>(
-    ({ data, onSelect, onSelectionChange, onActivate, selectedId, className, fetchChildren, fontSize = 14, apiRef, expandMapExternal, setExpandMapExternal, initialSelectedIds }, forwardedRef) => {
-        const [expandMapInternal, setExpandMapInternal] = useState<Record<string, ExpandState>>({});
-        const expandMap = expandMapExternal ?? expandMapInternal;
-        const setExpandMap = setExpandMapExternal ?? setExpandMapInternal;
-        const rows = useMemo(() => buildRows(data, expandMap), [data, expandMap]);
-        const [focusIdx, setFocusIdx] = useState(0);
-        const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set(initialSelectedIds ?? []));
-        const anchorIdx = useRef<number>(0);
-        const containerRef = useRef<HTMLDivElement>(null);
-        const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-        const searchBuf = useRef('');
-        const searchTimer = useRef<any>(null);
-        const [searchDisplay, setSearchDisplay] = useState('');
-
-        const setRef = useCallback((el: HTMLDivElement | null) => {
-            (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
-            if (typeof forwardedRef === 'function') forwardedRef(el);
-            else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
-        }, [forwardedRef]);
-
-        const [pendingExpands, setPendingExpands] = useState<string[]>([]);
-
-        React.useImperativeHandle(apiRef, () => ({
-            expandPath: (gids: string[]) => {
-                setPendingExpands(gids);
-            },
-            setSelectedIds: (gids: string[]) => {
-                setSelectedIds(new Set(gids));
-            }
-        }), []);
-
-
-
-        useEffect(() => {
-            if (selectedId) {
-                setSelectedIds(prev => {
-                    if (prev.size === 1 && prev.has(selectedId)) return prev;
-                    return new Set([selectedId]);
-                });
-                const idx = rows.findIndex(r => r.id === selectedId);
-                if (idx >= 0) {
-                    setFocusIdx(idx);
-                }
-            } else if (selectedId === undefined && data.length === 0) {
-                setSelectedIds(new Set());
-            }
-        }, [selectedId, rows, data.length]);
-
-        const prevDataRef = useRef(data);
-        useLayoutEffect(() => {
-            if (data === prevDataRef.current && rows.length > 0) return;
-            prevDataRef.current = data;
-
-            if (rows.length === 0) return;
-
-            if (selectedId) {
-                const existingIdx = rows.findIndex(r => r.id === selectedId);
-                if (existingIdx >= 0) {
-                    containerRef.current?.focus({ preventScroll: true });
-                    return;
-                }
-            }
-
-            setFocusIdx(0);
-            anchorIdx.current = 0;
-            containerRef.current?.focus({ preventScroll: true });
-        }, [data, rows, selectedId]);
-
-        useEffect(() => {
-            rowRefs.current[focusIdx]?.scrollIntoView({ block: 'nearest' });
-        }, [focusIdx]);
-
-        const onSelectionChangeRef = useRef(onSelectionChange);
-        onSelectionChangeRef.current = onSelectionChange;
-        const rowsRef = useRef(rows);
-        rowsRef.current = rows;
-
-        useEffect(() => {
-            if (!onSelectionChangeRef.current) return;
-            const currentRows = rowsRef.current;
-            const selectedNodes = currentRows.filter(r => selectedIds.has(r.id)).map(r => {
-                const node = r.node;
-
-                // If it doesn't have parent GID_0 but is nested, walk up to construct the hierarchy
-                if (!node.data?.GID_0 && r.depth > 0) {
-                    const syntheticData = { ...node.data };
-                    let curr: TreeRow | undefined = r;
-                    while (curr) {
-                        syntheticData[`GID_${curr.node.level}`] = curr.id;
-                        syntheticData[`NAME_${curr.node.level}`] = curr.name;
-                        const pId = curr.parentId;
-                        curr = pId ? currentRows.find(or => or.id === pId) : undefined;
-                    }
-                    return { ...node, data: syntheticData };
-                }
-
-                // Always ensure GID of its own level is populated
-                if (!node.data[`GID_${node.level}`]) {
-                    const syntheticData = { ...node.data };
-                    syntheticData[`GID_${node.level}`] = node.gid;
-                    syntheticData[`NAME_${node.level}`] = node.name;
-                    return { ...node, data: syntheticData };
-                }
-
-                return node;
-            });
-            onSelectionChangeRef.current(selectedNodes);
-        }, [selectedIds]);
-
-        const toggleExpand = useCallback(async (row: TreeRow) => {
-            if (!row.node.hasChildren || !fetchChildren) return;
-            const path = row.node.gid;
-            const current = expandMap[path];
-
-            if (current?.expanded) {
-                setExpandMap(prev => ({
-                    ...prev,
-                    [path]: { ...prev[path], expanded: false },
-                }));
-            } else if (current?.children?.length) {
-                setExpandMap(prev => ({
-                    ...prev,
-                    [path]: { ...prev[path], expanded: true },
-                }));
-            } else {
-                setExpandMap(prev => ({
-                    ...prev,
-                    [path]: { expanded: true, children: [], loading: true },
-                }));
-                try {
-                    const children = await fetchChildren(row.node);
-                    setExpandMap(prev => ({
-                        ...prev,
-                        [path]: { expanded: true, children, loading: false },
-                    }));
-                } catch {
-                    setExpandMap(prev => ({
-                        ...prev,
-                        [path]: { expanded: false, children: [], loading: false },
-                    }));
-                }
-            }
-        }, [expandMap, fetchChildren]);
-
-        // Effect to process pending automatic expansions synchronously with the rendered rows
-        useEffect(() => {
-            if (pendingExpands.length > 0) {
-                const targetGid = pendingExpands[0];
-                const row = rows.find(r => r.id === targetGid);
-                if (row) {
-                    if (row.loading) return; // Wait for children to load
-
-                    if (!row.expanded && row.node.hasChildren && fetchChildren) {
-                        toggleExpand(row);
-                    } else if (row.expanded || !row.node.hasChildren) {
-                        // Move to next pending target if it's already expanded or has no children
-                        setPendingExpands(prev => prev.slice(1));
-                    }
-                } else {
-                    const isAnyLoading = rows.some(r => r.loading);
-                    if (!isAnyLoading) {
-                        setPendingExpands(prev => prev.slice(1));
-                    }
-                }
-            }
-        }, [pendingExpands, rows, toggleExpand, fetchChildren]);
-
-        const toggleExpandSelected = useCallback(async () => {
-            if (!fetchChildren || selectedIds.size === 0) return;
-            const selectedDirs = rows.filter(r => selectedIds.has(r.id) && r.node.hasChildren);
-            if (selectedDirs.length === 0) return;
-
-            const anyCollapsed = selectedDirs.some(r => !r.expanded);
-
-            if (!anyCollapsed) {
-                setExpandMap(prev => {
-                    const next = { ...prev };
-                    for (const r of selectedDirs) {
-                        next[r.node.gid] = { ...next[r.node.gid], expanded: false };
-                    }
-                    return next;
-                });
-            } else {
-                for (const r of selectedDirs) {
-                    if (!r.expanded) {
-                        await toggleExpand(r);
-                    }
-                }
-            }
-        }, [fetchChildren, selectedIds, rows, toggleExpand]);
-
-        const collapseNode = useCallback((row: TreeRow) => {
-            if (!row.node.hasChildren) return;
-            setExpandMap(prev => ({
-                ...prev,
-                [row.node.gid]: { ...prev[row.node.gid], expanded: false },
-            }));
-        }, []);
-
-        const activate = useCallback((row: TreeRow) => {
-            onActivate?.(row.node);
-        }, [onActivate]);
-
-        const selectRow = useCallback((idx: number) => {
-            setFocusIdx(idx);
-            anchorIdx.current = idx;
-            const row = rows[idx];
-            if (!row) {
-                setSelectedIds(new Set());
-                return;
-            }
-            setSelectedIds(new Set([row.id]));
-            onSelect?.(row.node);
-        }, [rows, onSelect]);
-
-        const toggleSelectRow = useCallback((idx: number) => {
-            setFocusIdx(idx);
-            anchorIdx.current = idx;
-            const row = rows[idx];
-            if (!row) return;
-            setSelectedIds(prev => {
-                const next = new Set(prev);
-                if (next.has(row.id)) next.delete(row.id);
-                else next.add(row.id);
-                return next;
-            });
-        }, [rows]);
-
-        const rangeSelectTo = useCallback((idx: number) => {
-            setFocusIdx(idx);
-            const start = Math.min(anchorIdx.current, idx);
-            const end = Math.max(anchorIdx.current, idx);
-            const ids = new Set<string>();
-            for (let i = start; i <= end; i++) {
-                const r = rows[i];
-                if (r) ids.add(r.id);
-            }
-            setSelectedIds(ids);
-        }, [rows]);
-
-        const handleClick = useCallback((idx: number, e: React.MouseEvent) => {
-            if (e.ctrlKey || e.metaKey) {
-                toggleSelectRow(idx);
-            } else if (e.shiftKey) {
-                rangeSelectTo(idx);
-            } else {
-                selectRow(idx);
-            }
-            containerRef.current?.focus({ preventScroll: true });
-        }, [selectRow, toggleSelectRow, rangeSelectTo]);
-
-        const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-            if (e.altKey) return;
-
-            const count = rows.length;
-            if (count === 0) return;
-
-            switch (e.key) {
-                case 'ArrowDown': {
-                    e.preventDefault();
-                    if (searchBuf.current) {
-                        const found = findMatchIdx(rows, searchBuf.current, focusIdx + 1, 1);
-                        if (found >= 0) selectRow(found);
-                    } else {
-                        const next = focusIdx < count - 1 ? focusIdx + 1 : 0;
-                        if (e.shiftKey) rangeSelectTo(next);
-                        else selectRow(next);
-                    }
-                    break;
-                }
-                case 'ArrowUp': {
-                    e.preventDefault();
-                    if (searchBuf.current) {
-                        const found = findMatchIdx(rows, searchBuf.current, focusIdx - 1 + count, -1);
-                        if (found >= 0) selectRow(found);
-                    } else {
-                        const prev = focusIdx > 0 ? focusIdx - 1 : count - 1;
-                        if (e.shiftKey) rangeSelectTo(prev);
-                        else selectRow(prev);
-                    }
-                    break;
-                }
-                case 'ArrowRight': {
-                    e.preventDefault();
-                    if (fetchChildren && selectedIds.size > 1) {
-                        const selectedDirs = rows.filter(r => selectedIds.has(r.id) && r.node.hasChildren && !r.expanded);
-                        if (selectedDirs.length > 0) {
-                            for (const r of selectedDirs) toggleExpand(r);
-                            break;
-                        }
-                    }
-                    const rowR = rows[focusIdx];
-                    if (!rowR) break;
-                    if (rowR.node.hasChildren && fetchChildren) {
-                        if (!rowR.expanded) {
-                            toggleExpand(rowR);
-                        } else {
-                            if (focusIdx < count - 1) selectRow(focusIdx + 1);
-                        }
-                    } else {
-                        if (focusIdx < count - 1) selectRow(focusIdx + 1);
-                    }
-                    break;
-                }
-                case 'ArrowLeft': {
-                    e.preventDefault();
-                    const visibleIds = new Set(rows.map(r => r.id));
-                    const cleanIds = new Set([...selectedIds].filter(id => visibleIds.has(id)));
-                    if (cleanIds.size !== selectedIds.size) setSelectedIds(cleanIds);
-
-                    if (fetchChildren && cleanIds.size > 1) {
-                        const selectedDirs = rows.filter(r => cleanIds.has(r.id) && r.node.hasChildren && r.expanded);
-                        if (selectedDirs.length > 0) {
-                            for (const r of selectedDirs) collapseNode(r);
-                            break;
-                        }
-                    }
-                    const rowL = rows[focusIdx];
-                    if (!rowL) break;
-                    if (rowL.node.hasChildren && rowL.expanded && fetchChildren) {
-                        collapseNode(rowL);
-                    } else if (rowL.parentId) {
-                        const parentIdx = rows.findIndex(r => r.id === rowL.parentId);
-                        if (parentIdx >= 0) {
-                            const parentRow = rows[parentIdx];
-                            if (parentRow) collapseNode(parentRow);
-                            selectRow(parentIdx);
-                        }
-                    }
-                    break;
-                }
-                case 'Enter': {
-                    e.preventDefault();
-                    const row = rows[focusIdx];
-                    if (row) activate(row);
-                    break;
-                }
-                case 'Backspace': {
-                    e.preventDefault();
-                    if (searchBuf.current.length > 0) {
-                        searchBuf.current = searchBuf.current.slice(0, -1);
-                        if (searchBuf.current.length > 0) {
-                            const found = findMatchIdx(rows, searchBuf.current, 0, 1);
-                            if (found >= 0) selectRow(found);
-                        }
-                    }
-                    break;
-                }
-                case 'Home': {
-                    e.preventDefault();
-                    if (e.shiftKey) rangeSelectTo(0);
-                    else selectRow(0);
-                    break;
-                }
-                case 'End': {
-                    e.preventDefault();
-                    if (e.shiftKey) rangeSelectTo(count - 1);
-                    else selectRow(count - 1);
-                    break;
-                }
-                case ' ': {
-                    e.preventDefault();
-                    if (fetchChildren && selectedIds.size > 0) {
-                        const hasSelectedDirs = rows.some(r => selectedIds.has(r.id) && r.node.hasChildren);
-                        if (hasSelectedDirs) {
-                            toggleExpandSelected();
-                            break;
-                        }
-                    }
-                    const row = rows[focusIdx];
-                    if (row?.node.hasChildren && fetchChildren) {
-                        toggleExpand(row);
-                    } else if (row) {
-                        activate(row);
-                    }
-                    break;
-                }
-                case 'a': {
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        const all = new Set(rows.map(r => r.id));
-                        setSelectedIds(all);
-                    }
-                    break;
-                }
-                case 'Escape': {
-                    e.preventDefault();
-                    if (searchBuf.current) {
-                        searchBuf.current = '';
-                        setSearchDisplay('');
-                    } else {
-                        setSelectedIds(new Set());
-                    }
-                    break;
-                }
-                default: {
-                    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
-                        const char = e.key.toLowerCase();
-                        searchBuf.current += char;
-                        setSearchDisplay(searchBuf.current);
-
-                        if (searchTimer.current) clearTimeout(searchTimer.current);
-                        searchTimer.current = setTimeout(() => { searchBuf.current = ''; setSearchDisplay(''); }, 10000);
-
-                        const str = searchBuf.current;
-                        const found = findMatchIdx(rows, str, focusIdx, 1);
-                        if (found >= 0) selectRow(found);
-                    }
-                    break;
-                }
-            }
-        }, [focusIdx, rows, activate, selectRow, toggleExpand, collapseNode, fetchChildren, rangeSelectTo, selectedIds, toggleExpandSelected]);
-
-        return (
-            <div
-                ref={setRef}
-                data-testid="gadm-tree"
-                className={cn("w-full h-full min-h-0 overflow-y-auto outline-none fb-tree-container p-1", className)}
-                tabIndex={0}
-                onKeyDown={handleKeyDown}
-            >
-                {rows.map((row, idx) => {
-                    const isSelected = selectedIds.has(row.id);
-                    const isFocused = focusIdx === idx;
-                    return (
-                        <div
-                            key={`${row.id}-${idx}`}
-                            data-testid="gadm-tree-node"
-                            data-node-id={row.id}
-                            ref={(el) => { rowRefs.current[idx] = el; }}
-                            className={cn(
-                                "flex items-center gap-1 py-0.5 cursor-pointer select-none rounded group",
-                                isSelected && !isFocused && "bg-sky-100 dark:bg-sky-900/50 text-sky-900 dark:text-sky-100",
-                                isFocused && "bg-sky-50 dark:bg-sky-800 text-sky-900 dark:text-sky-50 ring-1 ring-sky-400 dark:ring-sky-500",
-                                !isSelected && !isFocused && "hover:bg-sky-50/50 dark:hover:bg-sky-900/40 text-slate-700 dark:text-slate-300",
-                            )}
-                            style={{ fontSize: fontSize, paddingLeft: `${row.depth * 16 + 4}px`, paddingRight: 8 }}
-                            onClick={() => {
-                                setFocusIdx(idx);
-                                anchorIdx.current = idx;
-                                containerRef.current?.focus({ preventScroll: true });
-                            }}
-                            onDoubleClick={() => {
-                                if (row.node.hasChildren && fetchChildren) {
-                                    toggleExpand(row);
-                                }
-                                activate(row);
-                            }}
-                        >
-                            {row.node.hasChildren && fetchChildren ? (
-                                <button
-                                    type="button"
-                                    className="flex items-center justify-center w-4 h-4 shrink-0 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors"
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        toggleExpand(row);
-                                    }}
-                                    tabIndex={-1}
-                                >
-                                    {row.loading ? (
-                                        <Loader2 size={12} className="animate-spin" />
-                                    ) : (
-                                        <ChevronRight
-                                            size={14}
-                                            className={cn(
-                                                "transition-transform duration-150",
-                                                row.expanded && "rotate-90"
-                                            )}
-                                        />
-                                    )}
-                                </button>
-                            ) : (
-                                <span className="w-4 shrink-0" />
-                            )}
-
-                            <div className="flex items-center justify-center text-slate-400 dark:text-slate-500 shrink-0">
-                                {row.node.level === 0 ? (
-                                    <Globe size={16} className={cn(row.expanded && "text-sky-500")} />
-                                ) : (
-                                    <MapPin size={16} className={cn(row.expanded && "text-sky-500")} />
-                                )}
-                            </div>
-
-                            <span className="truncate flex-1 ml-1">
-                                {(() => {
-                                    const label = row.displayName;
-                                    if (!isFocused || !searchDisplay) return label;
-                                    const lower = label.toLowerCase();
-                                    const pos = lower.startsWith(searchDisplay) ? 0 : lower.indexOf(searchDisplay);
-                                    if (pos < 0) return label;
-                                    return (
-                                        <>
-                                            {pos > 0 && label.slice(0, pos)}
-                                            <span className="bg-amber-200/80 text-amber-900 border-b border-amber-500 dark:bg-sky-500/30 dark:text-sky-200 dark:border-sky-400">
-                                                {label.slice(pos, pos + searchDisplay.length)}
-                                            </span>
-                                            {label.slice(pos + searchDisplay.length)}
-                                        </>
-                                    );
-                                })()}
-                            </span>
-                            <span className="text-[10px] text-slate-400 ml-1.5 opacity-70 shrink-0">
-                                L{row.node.level}
-                            </span>
-                            <button
-                                type="button"
-                                tabIndex={-1}
-                                className="ml-1.5 shrink-0 relative inline-flex items-center"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    toggleSelectRow(idx);
-                                    containerRef.current?.focus({ preventScroll: true });
-                                }}
-                            >
-                                <span className={cn(
-                                    "w-7 h-4 rounded-full transition-colors duration-200",
-                                    isSelected
-                                        ? "bg-indigo-500"
-                                        : "bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500"
-                                )} />
-                                <span className={cn(
-                                    "absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-white shadow transition-transform duration-200",
-                                    isSelected && "translate-x-3"
-                                )} />
-                            </button>
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-);
-
-GadmTreePicker.displayName = 'GadmTreePicker';
+import React, { useMemo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ChevronRight, Globe, MapPin, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface GadmNode {
+    name: string;
+    gid: string;
+    level: number;
+    hasChildren: boolean;
+    label?: string;
+    data?: any;
+}
+
+export interface GadmTreePickerApi {
+    expandPath: (gids: string[]) => void;
+    setSelectedIds: (gids: string[]) => void;
+}
+
+export interface GadmTreePickerProps {
+    data: GadmNode[];
+    onSelect?: (node: GadmNode) => void;
+    onSelectionChange?: (nodes: GadmNode[]) => void;
+    onActivate?: (node: GadmNode) => void;
+    selectedId?: string;
+    className?: string;
+    fetchChildren?: (node: GadmNode) => Promise<GadmNode[]>;
+    fontSize?: number;
+    apiRef?: React.MutableRefObject<GadmTreePickerApi | null>;
+    expandMapExternal?: Record<string, ExpandState>;
+    setExpandMapExternal?: React.Dispatch<React.SetStateAction<Record<string, ExpandState>>>;
+    initialSelectedIds?: string[];
+}
+
+type TreeRow = {
+    id: string;
+    name: string;
+    displayName: string;
+    node: GadmNode;
+    depth: number;
+    parentId: string | null;
+    expanded: boolean;
+    loading: boolean;
+};
+
+export interface ExpandState {
+    expanded: boolean;
+    children: GadmNode[];
+    loading: boolean;
+}
+
+function sortNodesAsc(nodes: GadmNode[]): GadmNode[] {
+    return [...nodes].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+}
+
+function buildRows(
+    nodes: GadmNode[],
+    expandMap: Record<string, ExpandState>,
+    depth: number = 0,
+    parentId: string | null = null
+): TreeRow[] {
+    const rows: TreeRow[] = [];
+    for (const n of nodes) {
+        const state = expandMap[n.gid];
+        const expanded = state?.expanded ?? false;
+        const loading = state?.loading ?? false;
+        // If we fetched children and got none, treat as leaf (no arrow)
+        const knownEmpty = state && !state.loading && state.children !== undefined && state.children.length === 0;
+        const effectiveNode = knownEmpty ? { ...n, hasChildren: false } : n;
+        rows.push({
+            id: n.gid,
+            name: n.name,
+            displayName: n.label || n.name,
+            node: effectiveNode,
+            depth,
+            parentId,
+            expanded,
+            loading,
+        });
+        if (n.hasChildren && expanded && state?.children?.length) {
+            const childRows = buildRows(
+                sortNodesAsc(state.children),
+                expandMap,
+                depth + 1,
+                n.gid
+            );
+            rows.push(...childRows);
+        }
+    }
+    return rows;
+}
+
+function findMatchIdx(rows: TreeRow[], str: string, startFrom: number, direction: 1 | -1 = 1): number {
+    const count = rows.length;
+    for (let i = 0; i < count; i++) {
+        const idx = ((startFrom + i * direction) % count + count) % count;
+        if (rows[idx].displayName.toLowerCase().startsWith(str)) return idx;
+    }
+    for (let i = 0; i < count; i++) {
+        const idx = ((startFrom + i * direction) % count + count) % count;
+        if (rows[idx].displayName.toLowerCase().includes(str)) return idx;
+    }
+    return -1;
+}
+
+export const GadmTreePicker = React.forwardRef<HTMLDivElement, GadmTreePickerProps>(
+    ({ data, onSelect, onSelectionChange, onActivate, selectedId, className, fetchChildren, fontSize = 14, apiRef, expandMapExternal, setExpandMapExternal, initialSelectedIds }, forwardedRef) => {
+        const [expandMapInternal, setExpandMapInternal] = useState<Record<string, ExpandState>>({});
+        const expandMap = expandMapExternal ?? expandMapInternal;
+        const setExpandMap = setExpandMapExternal ?? setExpandMapInternal;
+        const rows = useMemo(() => buildRows(data, expandMap), [data, expandMap]);
+        const [focusIdx, setFocusIdx] = useState(0);
+        const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set(initialSelectedIds ?? []));
+        const anchorIdx = useRef<number>(0);
+        const containerRef = useRef<HTMLDivElement>(null);
+        const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+        const searchBuf = useRef('');
+        const searchTimer = useRef<any>(null);
+        const [searchDisplay, setSearchDisplay] = useState('');
+
+        const setRef = useCallback((el: HTMLDivElement | null) => {
+            (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+            if (typeof forwardedRef === 'function') forwardedRef(el);
+            else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+        }, [forwardedRef]);
+
+        const [pendingExpands, setPendingExpands] = useState<string[]>([]);
+
+        React.useImperativeHandle(apiRef, () => ({
+            expandPath: (gids: string[]) => {
+                setPendingExpands(gids);
+            },
+            setSelectedIds: (gids: string[]) => {
+                setSelectedIds(new Set(gids));
+            }
+        }), []);
+
+
+
+        useEffect(() => {
+            if (selectedId) {
+                setSelectedIds(prev => {
+                    if (prev.size === 1 && prev.has(selectedId)) return prev;
+                    return new Set([selectedId]);
+                });
+                const idx = rows.findIndex(r => r.id === selectedId);
+                if (idx >= 0) {
+                    setFocusIdx(idx);
+                }
+            } else if (selectedId === undefined && data.length === 0) {
+                setSelectedIds(new Set());
+            }
+        }, [selectedId, rows, data.length]);
+
+        const prevDataRef = useRef(data);
+        useLayoutEffect(() => {
+            if (data === prevDataRef.current && rows.length > 0) return;
+            prevDataRef.current = data;
+
+            if (rows.length === 0) return;
+
+            if (selectedId) {
+                const existingIdx = rows.findIndex(r => r.id === selectedId);
+                if (existingIdx >= 0) {
+                    containerRef.current?.focus({ preventScroll: true });
+                    return;
+                }
+            }
+
+            setFocusIdx(0);
+            anchorIdx.current = 0;
+            containerRef.current?.focus({ preventScroll: true });
+        }, [data, rows, selectedId]);
+
+        useEffect(() => {
+            rowRefs.current[focusIdx]?.scrollIntoView({ block: 'nearest' });
+        }, [focusIdx]);
+
+        const onSelectionChangeRef = useRef(onSelectionChange);
+        onSelectionChangeRef.current = onSelectionChange;
+        const rowsRef = useRef(rows);
+        rowsRef.current = rows;
+
+        useEffect(() => {
+            if (!onSelectionChangeRef.current) return;
+            const currentRows = rowsRef.current;
+            const selectedNodes = currentRows.filter(r => selectedIds.has(r.id)).map(r => {
+                const node = r.node;
+
+                // If it doesn't have parent GID_0 but is nested, walk up to construct the hierarchy
+                if (!node.data?.GID_0 && r.depth > 0) {
+                    const syntheticData = { ...node.data };
+                    let curr: TreeRow | undefined = r;
+                    while (curr) {
+                        syntheticData[`GID_${curr.node.level}`] = curr.id;
+                        syntheticData[`NAME_${curr.node.level}`] = curr.name;
+                        const pId = curr.parentId;
+                        curr = pId ? currentRows.find(or => or.id === pId) : undefined;
+                    }
+                    return { ...node, data: syntheticData };
+                }
+
+                // Always ensure GID of its own level is populated
+                if (!node.data[`GID_${node.level}`]) {
+                    const syntheticData = { ...node.data };
+                    syntheticData[`GID_${node.level}`] = node.gid;
+                    syntheticData[`NAME_${node.level}`] = node.name;
+                    return { ...node, data: syntheticData };
+                }
+
+                return node;
+            });
+            onSelectionChangeRef.current(selectedNodes);
+        }, [selectedIds]);
+
+        const toggleExpand = useCallback(async (row: TreeRow) => {
+            if (!row.node.hasChildren || !fetchChildren) return;
+            const path = row.node.gid;
+            const current = expandMap[path];
+
+            if (current?.expanded) {
+                setExpandMap(prev => ({
+                    ...prev,
+                    [path]: { ...prev[path], expanded: false },
+                }));
+            } else if (current?.children?.length) {
+                setExpandMap(prev => ({
+                    ...prev,
+                    [path]: { ...prev[path], expanded: true },
+                }));
+            } else {
+                setExpandMap(prev => ({
+                    ...prev,
+                    [path]: { expanded: true, children: [], loading: true },
+                }));
+                try {
+                    const children = await fetchChildren(row.node);
+                    setExpandMap(prev => ({
+                        ...prev,
+                        [path]: { expanded: true, children, loading: false },
+                    }));
+                } catch {
+                    setExpandMap(prev => ({
+                        ...prev,
+                        [path]: { expanded: false, children: [], loading: false },
+                    }));
+                }
+            }
+        }, [expandMap, fetchChildren]);
+
+        // Effect to process pending automatic expansions synchronously with the rendered rows
+        useEffect(() => {
+            if (pendingExpands.length > 0) {
+                const targetGid = pendingExpands[0];
+                const row = rows.find(r => r.id === targetGid);
+                if (row) {
+                    if (row.loading) return; // Wait for children to load
+
+                    if (!row.expanded && row.node.hasChildren && fetchChildren) {
+                        toggleExpand(row);
+                    } else if (row.expanded || !row.node.hasChildren) {
+                        // Move to next pending target if it's already expanded or has no children
+                        setPendingExpands(prev => prev.slice(1));
+                    }
+                } else {
+                    const isAnyLoading = rows.some(r => r.loading);
+                    if (!isAnyLoading) {
+                        setPendingExpands(prev => prev.slice(1));
+                    }
+                }
+            }
+        }, [pendingExpands, rows, toggleExpand, fetchChildren]);
+
+        const toggleExpandSelected = useCallback(async () => {
+            if (!fetchChildren || selectedIds.size === 0) return;
+            const selectedDirs = rows.filter(r => selectedIds.has(r.id) && r.node.hasChildren);
+            if (selectedDirs.length === 0) return;
+
+            const anyCollapsed = selectedDirs.some(r => !r.expanded);
+
+            if (!anyCollapsed) {
+                setExpandMap(prev => {
+                    const next = { ...prev };
+                    for (const r of selectedDirs) {
+                        next[r.node.gid] = { ...next[r.node.gid], expanded: false };
+                    }
+                    return next;
+                });
+            } else {
+                for (const r of selectedDirs) {
+                    if (!r.expanded) {
+                        await toggleExpand(r);
+                    }
+                }
+            }
+        }, [fetchChildren, selectedIds, rows, toggleExpand]);
+
+        const collapseNode = useCallback((row: TreeRow) => {
+            if (!row.node.hasChildren) return;
+            setExpandMap(prev => ({
+                ...prev,
+                [row.node.gid]: { ...prev[row.node.gid], expanded: false },
+            }));
+        }, []);
+
+        const activate = useCallback((row: TreeRow) => {
+            onActivate?.(row.node);
+        }, [onActivate]);
+
+        const selectRow = useCallback((idx: number) => {
+            setFocusIdx(idx);
+            anchorIdx.current = idx;
+            const row = rows[idx];
+            if (!row) {
+                setSelectedIds(new Set());
+                return;
+            }
+            setSelectedIds(new Set([row.id]));
+            onSelect?.(row.node);
+        }, [rows, onSelect]);
+
+        const toggleSelectRow = useCallback((idx: number) => {
+            setFocusIdx(idx);
+            anchorIdx.current = idx;
+            const row = rows[idx];
+            if (!row) return;
+            setSelectedIds(prev => {
+                const next = new Set(prev);
+                if (next.has(row.id)) next.delete(row.id);
+                else next.add(row.id);
+                return next;
+            });
+        }, [rows]);
+
+        const rangeSelectTo = useCallback((idx: number) => {
+            setFocusIdx(idx);
+            const start = Math.min(anchorIdx.current, idx);
+            const end = Math.max(anchorIdx.current, idx);
+            const ids = new Set<string>();
+            for (let i = start; i <= end; i++) {
+                const r = rows[i];
+                if (r) ids.add(r.id);
+            }
+            setSelectedIds(ids);
+        }, [rows]);
+
+        const handleClick = useCallback((idx: number, e: React.MouseEvent) => {
+            if (e.ctrlKey || e.metaKey) {
+                toggleSelectRow(idx);
+            } else if (e.shiftKey) {
+                rangeSelectTo(idx);
+            } else {
+                selectRow(idx);
+            }
+            containerRef.current?.focus({ preventScroll: true });
+        }, [selectRow, toggleSelectRow, rangeSelectTo]);
+
+        const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+            if (e.altKey) return;
+
+            const count = rows.length;
+            if (count === 0) return;
+
+            switch (e.key) {
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    if (searchBuf.current) {
+                        const found = findMatchIdx(rows, searchBuf.current, focusIdx + 1, 1);
+                        if (found >= 0) selectRow(found);
+                    } else {
+                        const next = focusIdx < count - 1 ? focusIdx + 1 : 0;
+                        if (e.shiftKey) rangeSelectTo(next);
+                        else selectRow(next);
+                    }
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    if (searchBuf.current) {
+                        const found = findMatchIdx(rows, searchBuf.current, focusIdx - 1 + count, -1);
+                        if (found >= 0) selectRow(found);
+                    } else {
+                        const prev = focusIdx > 0 ? focusIdx - 1 : count - 1;
+                        if (e.shiftKey) rangeSelectTo(prev);
+                        else selectRow(prev);
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    e.preventDefault();
+                    if (fetchChildren && selectedIds.size > 1) {
+                        const selectedDirs = rows.filter(r => selectedIds.has(r.id) && r.node.hasChildren && !r.expanded);
+                        if (selectedDirs.length > 0) {
+                            for (const r of selectedDirs) toggleExpand(r);
+                            break;
+                        }
+                    }
+                    const rowR = rows[focusIdx];
+                    if (!rowR) break;
+                    if (rowR.node.hasChildren && fetchChildren) {
+                        if (!rowR.expanded) {
+                            toggleExpand(rowR);
+                        } else {
+                            if (focusIdx < count - 1) selectRow(focusIdx + 1);
+                        }
+                    } else {
+                        if (focusIdx < count - 1) selectRow(focusIdx + 1);
+                    }
+                    break;
+                }
+                case 'ArrowLeft': {
+                    e.preventDefault();
+                    const visibleIds = new Set(rows.map(r => r.id));
+                    const cleanIds = new Set([...selectedIds].filter(id => visibleIds.has(id)));
+                    if (cleanIds.size !== selectedIds.size) setSelectedIds(cleanIds);
+
+                    if (fetchChildren && cleanIds.size > 1) {
+                        const selectedDirs = rows.filter(r => cleanIds.has(r.id) && r.node.hasChildren && r.expanded);
+                        if (selectedDirs.length > 0) {
+                            for (const r of selectedDirs) collapseNode(r);
+                            break;
+                        }
+                    }
+                    const rowL = rows[focusIdx];
+                    if (!rowL) break;
+                    if (rowL.node.hasChildren && rowL.expanded && fetchChildren) {
+                        collapseNode(rowL);
+                    } else if (rowL.parentId) {
+                        const parentIdx = rows.findIndex(r => r.id === rowL.parentId);
+                        if (parentIdx >= 0) {
+                            const parentRow = rows[parentIdx];
+                            if (parentRow) collapseNode(parentRow);
+                            selectRow(parentIdx);
+                        }
+                    }
+                    break;
+                }
+                case 'Enter': {
+                    e.preventDefault();
+                    const row = rows[focusIdx];
+                    if (row) activate(row);
+                    break;
+                }
+                case 'Backspace': {
+                    e.preventDefault();
+                    if (searchBuf.current.length > 0) {
+                        searchBuf.current = searchBuf.current.slice(0, -1);
+                        if (searchBuf.current.length > 0) {
+                            const found = findMatchIdx(rows, searchBuf.current, 0, 1);
+                            if (found >= 0) selectRow(found);
+                        }
+                    }
+                    break;
+                }
+                case 'Home': {
+                    e.preventDefault();
+                    if (e.shiftKey) rangeSelectTo(0);
+                    else selectRow(0);
+                    break;
+                }
+                case 'End': {
+                    e.preventDefault();
+                    if (e.shiftKey) rangeSelectTo(count - 1);
+                    else selectRow(count - 1);
+                    break;
+                }
+                case ' ': {
+                    e.preventDefault();
+                    if (fetchChildren && selectedIds.size > 0) {
+                        const hasSelectedDirs = rows.some(r => selectedIds.has(r.id) && r.node.hasChildren);
+                        if (hasSelectedDirs) {
+                            toggleExpandSelected();
+                            break;
+                        }
+                    }
+                    const row = rows[focusIdx];
+                    if (row?.node.hasChildren && fetchChildren) {
+                        toggleExpand(row);
+                    } else if (row) {
+                        activate(row);
+                    }
+                    break;
+                }
+                case 'a': {
+                    if (e.ctrlKey || e.metaKey) {
+                        e.preventDefault();
+                        const all = new Set(rows.map(r => r.id));
+                        setSelectedIds(all);
+                    }
+                    break;
+                }
+                case 'Escape': {
+                    e.preventDefault();
+                    if (searchBuf.current) {
+                        searchBuf.current = '';
+                        setSearchDisplay('');
+                    } else {
+                        setSelectedIds(new Set());
+                    }
+                    break;
+                }
+                default: {
+                    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                        const char = e.key.toLowerCase();
+                        searchBuf.current += char;
+                        setSearchDisplay(searchBuf.current);
+
+                        if (searchTimer.current) clearTimeout(searchTimer.current);
+                        searchTimer.current = setTimeout(() => { searchBuf.current = ''; setSearchDisplay(''); }, 1000);
+
+                        const str = searchBuf.current;
+                        const found = findMatchIdx(rows, str, focusIdx, 1);
+                        if (found >= 0) selectRow(found);
+                    }
+                    break;
+                }
+            }
+        }, [focusIdx, rows, activate, selectRow, toggleExpand, collapseNode, fetchChildren, rangeSelectTo, selectedIds, toggleExpandSelected]);
+
+        return (
+            <div
+                ref={setRef}
+                data-testid="gadm-tree"
+                className={cn("w-full h-full min-h-0 overflow-y-auto outline-none fb-tree-container p-1", className)}
+                tabIndex={0}
+                onKeyDown={handleKeyDown}
+            >
+                {rows.map((row, idx) => {
+                    const isSelected = selectedIds.has(row.id);
+                    const isFocused = focusIdx === idx;
+                    return (
+                        <div
+                            key={`${row.id}-${idx}`}
+                            data-testid="gadm-tree-node"
+                            data-node-id={row.id}
+                            ref={(el) => { rowRefs.current[idx] = el; }}
+                            className={cn(
+                                "flex items-center gap-1 py-0.5 cursor-pointer select-none rounded group",
+                                isSelected && !isFocused && "bg-sky-100 dark:bg-sky-900/50 text-sky-900 dark:text-sky-100",
+                                isFocused && "bg-sky-50 dark:bg-sky-800 text-sky-900 dark:text-sky-50 ring-1 ring-sky-400 dark:ring-sky-500",
+                                !isSelected && !isFocused && "hover:bg-sky-50/50 dark:hover:bg-sky-900/40 text-slate-700 dark:text-slate-300",
+                            )}
+                            style={{ fontSize: fontSize, paddingLeft: `${row.depth * 16 + 4}px`, paddingRight: 8 }}
+                            onClick={() => {
+                                setFocusIdx(idx);
+                                anchorIdx.current = idx;
+                                containerRef.current?.focus({ preventScroll: true });
+                            }}
+                            onDoubleClick={() => {
+                                if (row.node.hasChildren && fetchChildren) {
+                                    toggleExpand(row);
+                                }
+                                activate(row);
+                            }}
+                        >
+                            {row.node.hasChildren && fetchChildren ? (
+                                <button
+                                    type="button"
+                                    className="flex items-center justify-center w-4 h-4 shrink-0 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        toggleExpand(row);
+                                    }}
+                                    tabIndex={-1}
+                                >
+                                    {row.loading ? (
+                                        <Loader2 size={12} className="animate-spin" />
+                                    ) : (
+                                        <ChevronRight
+                                            size={14}
+                                            className={cn(
+                                                "transition-transform duration-150",
+                                                row.expanded && "rotate-90"
+                                            )}
+                                        />
+                                    )}
+                                </button>
+                            ) : (
+                                <span className="w-4 shrink-0" />
+                            )}
+
+                            <div className="flex items-center justify-center text-slate-400 dark:text-slate-500 shrink-0">
+                                {row.node.level === 0 ? (
+                                    <Globe size={16} className={cn(row.expanded && "text-sky-500")} />
+                                ) : (
+                                    <MapPin size={16} className={cn(row.expanded && "text-sky-500")} />
+                                )}
+                            </div>
+
+                            <span className="truncate flex-1 ml-1">
+                                {(() => {
+                                    const label = row.displayName;
+                                    if (!isFocused || !searchDisplay) return label;
+                                    const lower = label.toLowerCase();
+                                    const pos = lower.startsWith(searchDisplay) ? 0 : lower.indexOf(searchDisplay);
+                                    if (pos < 0) return label;
+                                    return (
+                                        <>
+                                            {pos > 0 && label.slice(0, pos)}
+                                            <span className="bg-amber-200/80 text-amber-900 border-b border-amber-500 dark:bg-sky-500/30 dark:text-sky-200 dark:border-sky-400">
+                                                {label.slice(pos, pos + searchDisplay.length)}
+                                            </span>
+                                            {label.slice(pos + searchDisplay.length)}
+                                        </>
+                                    );
+                                })()}
+                            </span>
+                            <span className="text-[10px] text-slate-400 ml-1.5 opacity-70 shrink-0">
+                                L{row.node.level}
+                            </span>
+                            <button
+                                type="button"
+                                tabIndex={-1}
+                                className="ml-1.5 shrink-0 relative inline-flex items-center"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    toggleSelectRow(idx);
+                                    containerRef.current?.focus({ preventScroll: true });
+                                }}
+                            >
+                                <span className={cn(
+                                    "w-7 h-4 rounded-full transition-colors duration-200",
+                                    isSelected
+                                        ? "bg-indigo-500"
+                                        : "bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500"
+                                )} />
+                                <span className={cn(
+                                    "absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-white shadow transition-transform duration-200",
+                                    isSelected && "translate-x-3"
+                                )} />
+                            </button>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+);
+
+GadmTreePicker.displayName = 'GadmTreePicker';
diff --git a/packages/ui/src/modules/places/gadm-picker/components/GadmSearchControls.tsx b/packages/ui/src/modules/places/gadm-picker/components/GadmSearchControls.tsx
index 451742e4..159a0da2 100644
--- a/packages/ui/src/modules/places/gadm-picker/components/GadmSearchControls.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/components/GadmSearchControls.tsx
@@ -1,122 +1,122 @@
-import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { MapPin, Loader2 } from 'lucide-react';
-
-export const LEVEL_OPTIONS = [
-    { value: 0, label: 'Country (Level 0)' },
-    { value: 1, label: 'State (Level 1)' },
-    { value: 2, label: 'Province (Level 2)' },
-    { value: 3, label: 'District (Level 3)' },
-    { value: 4, label: 'City (Level 4)' },
-    { value: 5, label: 'Town (Level 5)' },
-];
-
-export interface GadmSearchControlsProps {
-    levelOption: number;
-    setLevelOption: (v: number) => void;
-    resolutionOption: number;
-    setResolutionOption: (v: number) => void;
-    query: string;
-    setQuery: (v: string) => void;
-    suggestions: any[];
-    loadingSuggestions: boolean;
-    showSuggestions: boolean;
-    setShowSuggestions: (v: boolean) => void;
-    onSelectSuggestion: (s: any, ctrlKey: boolean) => void;
-    suggestionsWrapRef: React.RefObject<HTMLDivElement>;
-    layout?: 'vertical' | 'horizontal';
-}
-
-export function GadmSearchControls({
-    levelOption, setLevelOption,
-    resolutionOption, setResolutionOption,
-    query, setQuery,
-    suggestions, loadingSuggestions, showSuggestions, setShowSuggestions,
-    onSelectSuggestion, suggestionsWrapRef,
-    layout = 'vertical'
-}: GadmSearchControlsProps) {
-    const isHorizontal = layout === 'horizontal';
-
-    const renderSegments = (value: number, setValue: (v: number) => void, label: string) => (
-        <div className={`flex ${isHorizontal ? 'items-center gap-2' : 'flex-col gap-1'}`}>
-            <span className="text-xs font-medium text-gray-500 dark:text-gray-400 whitespace-nowrap">{label}</span>
-            <div className="flex items-center bg-gray-100 dark:bg-gray-800 p-0.5 rounded-md border dark:border-gray-700">
-                {LEVEL_OPTIONS.map(opt => (
-                    <button
-                        key={opt.value}
-                        title={opt.label}
-                        onClick={() => setValue(opt.value)}
-                        className={`px-2 py-1 text-xs font-medium rounded-sm transition-colors ${value === opt.value
-                                ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-gray-100 shadow-sm'
-                                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
-                            }`}
-                    >
-                        L{opt.value}
-                    </button>
-                ))}
-            </div>
-        </div>
-    );
-
-    const [levelsPortal, setLevelsPortal] = useState<HTMLElement | null>(null);
-
-    useEffect(() => {
-        if (isHorizontal) {
-            setLevelsPortal(document.getElementById('gadm-controls-portal-levels'));
-        }
-    }, [isHorizontal]);
-
-    const levelsContent = (
-        <div className={`flex ${isHorizontal ? 'flex-row items-center justify-center gap-6 px-4 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1.5 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50 w-[500px]' : 'flex-col gap-3'}`}>
-            {renderSegments(levelOption, setLevelOption, 'Select Level : Country, State, Cities, ...')}
-            {renderSegments(resolutionOption, setResolutionOption, 'Resolution Level : Country, State, Cities, ...')}
-        </div>
-    );
-
-    return (
-        <div className={`flex ${isHorizontal ? 'flex-col items-start gap-2 w-[500px]' : 'flex-col gap-4'} flex-shrink-0`}>
-            {/* Search Input */}
-            <div className={`relative z-20 w-full ${isHorizontal ? 'bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1.5 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50' : ''}`} ref={suggestionsWrapRef}>
-                <div className="relative">
-                    <MapPin className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-                    <input
-                        type="text"
-                        placeholder={`Search ${LEVEL_OPTIONS.find(o => o.value === levelOption)?.label}...`}
-                        className="w-full pl-9 pr-10 py-1.5 border rounded-md text-sm bg-gray-50 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        value={query}
-                        onChange={e => { setQuery(e.target.value); setShowSuggestions(true); }}
-                        onFocus={() => setShowSuggestions(true)}
-                    />
-                    {loadingSuggestions && <div className="absolute right-3 top-2.5"><Loader2 className="h-4 w-4 animate-spin text-gray-400" /></div>}
-                </div>
-
-                {showSuggestions && suggestions.length > 0 && (
-                    <ul className="absolute left-0 right-0 mt-1 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-y-auto w-[150%]">
-                        {suggestions.map((s, i) => {
-                            const nameMatches = Object.keys(s).filter(k => k.startsWith('NAME_')).sort().reverse();
-                            const primaryName = nameMatches.length > 0 ? s[nameMatches[0]] : (s.name || s.gadmName);
-                            const subText = nameMatches.length > 1 ? s[nameMatches[nameMatches.length - 1]] : '';
-                            const gidKey = Object.keys(s).find(k => k.startsWith('GID_'));
-                            return (
-                                <li
-                                    key={i}
-                                    className="px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 border-b dark:border-gray-700 last:border-0"
-                                    onMouseDown={(e) => { e.preventDefault(); onSelectSuggestion(s, e.ctrlKey || e.metaKey); }}
-                                >
-                                    <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{primaryName || "Unknown"}</div>
-                                    <div className="text-xs text-gray-500 dark:text-gray-400">{subText ? `${subText} • ` : ''}{gidKey && s[gidKey] ? s[gidKey] : ''}</div>
-                                </li>
-                            );
-                        })}
-                    </ul>
-                )}
-            </div>
-
-            {/* Level Selectors */}
-            {levelsPortal
-                ? createPortal(levelsContent, levelsPortal)
-                : levelsContent
-            }
-        </div>
-    );
-}
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { MapPin, Loader2 } from 'lucide-react';
+
+export const LEVEL_OPTIONS = [
+    { value: 0, label: 'Country (Level 0)' },
+    { value: 1, label: 'State (Level 1)' },
+    { value: 2, label: 'Province (Level 2)' },
+    { value: 3, label: 'District (Level 3)' },
+    { value: 4, label: 'City (Level 4)' },
+    { value: 5, label: 'Town (Level 5)' },
+];
+
+export interface GadmSearchControlsProps {
+    levelOption: number;
+    setLevelOption: (v: number) => void;
+    resolutionOption: number;
+    setResolutionOption: (v: number) => void;
+    query: string;
+    setQuery: (v: string) => void;
+    suggestions: any[];
+    loadingSuggestions: boolean;
+    showSuggestions: boolean;
+    setShowSuggestions: (v: boolean) => void;
+    onSelectSuggestion: (s: any, ctrlKey: boolean) => void;
+    suggestionsWrapRef: React.RefObject<HTMLDivElement>;
+    layout?: 'vertical' | 'horizontal';
+}
+
+export function GadmSearchControls({
+    levelOption, setLevelOption,
+    resolutionOption, setResolutionOption,
+    query, setQuery,
+    suggestions, loadingSuggestions, showSuggestions, setShowSuggestions,
+    onSelectSuggestion, suggestionsWrapRef,
+    layout = 'vertical'
+}: GadmSearchControlsProps) {
+    const isHorizontal = layout === 'horizontal';
+
+    const renderSegments = (value: number, setValue: (v: number) => void, label: string) => (
+        <div className={`flex ${isHorizontal ? 'items-center gap-2' : 'flex-col gap-1'}`}>
+            <span className="text-xs font-medium text-gray-500 dark:text-gray-400 whitespace-nowrap">{label}</span>
+            <div className="flex items-center bg-gray-100 dark:bg-gray-800 p-0.5 rounded-md border dark:border-gray-700">
+                {LEVEL_OPTIONS.map(opt => (
+                    <button
+                        key={opt.value}
+                        title={opt.label}
+                        onClick={() => setValue(opt.value)}
+                        className={`px-2 py-1 text-xs font-medium rounded-sm transition-colors ${value === opt.value
+                                ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-gray-100 shadow-sm'
+                                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                            }`}
+                    >
+                        L{opt.value}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+
+    const [levelsPortal, setLevelsPortal] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        if (isHorizontal) {
+            setLevelsPortal(document.getElementById('gadm-controls-portal-levels'));
+        }
+    }, [isHorizontal]);
+
+    const levelsContent = (
+        <div className={`flex ${isHorizontal ? 'flex-row items-center justify-center gap-6 px-4 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1.5 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50 w-[500px]' : 'flex-col gap-3'}`}>
+            {renderSegments(levelOption, setLevelOption, 'Select Level : Country, State, Cities, ...')}
+            {renderSegments(resolutionOption, setResolutionOption, 'Resolution Level : Country, State, Cities, ...')}
+        </div>
+    );
+
+    return (
+        <div className={`flex ${isHorizontal ? 'flex-col items-start gap-2 w-[500px]' : 'flex-col gap-4'} flex-shrink-0`}>
+            {/* Search Input */}
+            <div className={`relative z-20 w-full ${isHorizontal ? 'bg-white/90 dark:bg-gray-900/90 backdrop-blur-md p-1.5 rounded-lg shadow-sm border border-gray-200/50 dark:border-gray-700/50' : ''}`} ref={suggestionsWrapRef}>
+                <div className="relative">
+                    <MapPin className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                    <input
+                        type="text"
+                        placeholder={`Search ${LEVEL_OPTIONS.find(o => o.value === levelOption)?.label}...`}
+                        className="w-full pl-9 pr-10 py-1.5 border rounded-md text-sm bg-gray-50 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        value={query}
+                        onChange={e => { setQuery(e.target.value); setShowSuggestions(true); }}
+                        onFocus={() => setShowSuggestions(true)}
+                    />
+                    {loadingSuggestions && <div className="absolute right-3 top-2.5"><Loader2 className="h-4 w-4 animate-spin text-gray-400" /></div>}
+                </div>
+
+                {showSuggestions && suggestions.length > 0 && (
+                    <ul className="absolute left-0 right-0 mt-1 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-y-auto w-[150%]">
+                        {suggestions.map((s, i) => {
+                            const nameMatches = Object.keys(s).filter(k => k.startsWith('NAME_')).sort().reverse();
+                            const primaryName = nameMatches.length > 0 ? s[nameMatches[0]] : (s.name || s.gadmName);
+                            const subText = nameMatches.length > 1 ? s[nameMatches[nameMatches.length - 1]] : '';
+                            const gidKey = Object.keys(s).find(k => k.startsWith('GID_'));
+                            return (
+                                <li
+                                    key={i}
+                                    className="px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 border-b dark:border-gray-700 last:border-0"
+                                    onMouseDown={(e) => { e.preventDefault(); onSelectSuggestion(s, e.ctrlKey || e.metaKey); }}
+                                >
+                                    <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{primaryName || "Unknown"}</div>
+                                    <div className="text-xs text-gray-500 dark:text-gray-400">{subText ? `${subText} • ` : ''}{gidKey && s[gidKey] ? s[gidKey] : ''}</div>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                )}
+            </div>
+
+            {/* Level Selectors */}
+            {levelsPortal
+                ? createPortal(levelsContent, levelsPortal)
+                : levelsContent
+            }
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gadm-picker/index.ts b/packages/ui/src/modules/places/gadm-picker/index.ts
index 9f119fb7..90719924 100644
--- a/packages/ui/src/modules/places/gadm-picker/index.ts
+++ b/packages/ui/src/modules/places/gadm-picker/index.ts
@@ -1 +1 @@
-export * from './GadmPicker';
+export * from './GadmPicker';
diff --git a/packages/ui/src/modules/places/gridsearch/CompetitorsReportView.tsx b/packages/ui/src/modules/places/gridsearch/CompetitorsReportView.tsx
index 3b414ca9..5915d4c3 100644
--- a/packages/ui/src/modules/places/gridsearch/CompetitorsReportView.tsx
+++ b/packages/ui/src/modules/places/gridsearch/CompetitorsReportView.tsx
@@ -1,94 +1,94 @@
-import React, { useState, useEffect } from 'react';
-import { Loader2, AlertCircle, Download } from 'lucide-react';
-import MarkdownRenderer from '@/components/MarkdownRenderer';
-import { fetchPlacesGridSearchExport } from '../client-gridsearch';
-
-export function CompetitorsReportView({ jobId }: { jobId: string }) {
-    const [markdown, setMarkdown] = useState<string | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        if (!jobId) return;
-        
-        let active = true;
-        const load = async () => {
-            try {
-                setLoading(true);
-                setError(null);
-                
-                const text = await fetchPlacesGridSearchExport(jobId, 'md');
-                
-                if (active) {
-                    setMarkdown(text);
-                }
-            } catch (err: any) {
-                if (active) setError(err.message || 'Failed to generate report');
-            } finally {
-                if (active) setLoading(false);
-            }
-        };
-
-        load();
-
-        return () => { active = false; };
-    }, [jobId]);
-
-    const handleDownload = () => {
-        if (!markdown) return;
-        const blob = new Blob([markdown], { type: 'text/markdown' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `GridSearch_Report_${jobId}.md`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    };
-
-    if (loading) {
-        return (
-            <div className="flex flex-col items-center justify-center p-12 w-full h-full">
-                <Loader2 className="w-8 h-8 text-indigo-500 animate-spin mb-4" />
-                <p className="text-gray-500">Generating report...</p>
-            </div>
-        );
-    }
-
-    if (error) {
-        return (
-            <div className="p-6">
-                <div className="bg-red-50 text-red-600 p-4 rounded-lg flex items-start gap-3 border border-red-200">
-                    <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
-                    <div>
-                        <h4 className="font-medium text-sm">Failed to load report</h4>
-                        <p className="text-sm mt-1">{error}</p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="p-6 max-w-5xl mx-auto w-full h-full overflow-y-auto pb-24">
-            <div className="flex justify-between items-center mb-6">
-                <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100">Grid Search Report</h2>
-                <button
-                    onClick={handleDownload}
-                    className="flex items-center gap-2 px-3 py-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-400 dark:hover:bg-indigo-900/50 rounded-md transition-colors text-sm font-medium"
-                >
-                    <Download className="w-4 h-4" />
-                    Download .md
-                </button>
-            </div>
-            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-8 prose-container overflow-hidden">
-                {markdown ? (
-                    <MarkdownRenderer content={markdown} />
-                ) : (
-                    <p className="text-gray-500">No report content available.</p>
-                )}
-            </div>
-        </div>
-    );
-}
+import React, { useState, useEffect } from 'react';
+import { Loader2, AlertCircle, Download } from 'lucide-react';
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+import { fetchPlacesGridSearchExport } from '../client-gridsearch';
+
+export function CompetitorsReportView({ jobId }: { jobId: string }) {
+    const [markdown, setMarkdown] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!jobId) return;
+        
+        let active = true;
+        const load = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                
+                const text = await fetchPlacesGridSearchExport(jobId, 'md');
+                
+                if (active) {
+                    setMarkdown(text);
+                }
+            } catch (err: any) {
+                if (active) setError(err.message || 'Failed to generate report');
+            } finally {
+                if (active) setLoading(false);
+            }
+        };
+
+        load();
+
+        return () => { active = false; };
+    }, [jobId]);
+
+    const handleDownload = () => {
+        if (!markdown) return;
+        const blob = new Blob([markdown], { type: 'text/markdown' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `GridSearch_Report_${jobId}.md`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+
+    if (loading) {
+        return (
+            <div className="flex flex-col items-center justify-center p-12 w-full h-full">
+                <Loader2 className="w-8 h-8 text-indigo-500 animate-spin mb-4" />
+                <p className="text-gray-500">Generating report...</p>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="p-6">
+                <div className="bg-red-50 text-red-600 p-4 rounded-lg flex items-start gap-3 border border-red-200">
+                    <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
+                    <div>
+                        <h4 className="font-medium text-sm">Failed to load report</h4>
+                        <p className="text-sm mt-1">{error}</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-6 max-w-5xl mx-auto w-full h-full overflow-y-auto pb-24">
+            <div className="flex justify-between items-center mb-6">
+                <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100">Grid Search Report</h2>
+                <button
+                    onClick={handleDownload}
+                    className="flex items-center gap-2 px-3 py-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-400 dark:hover:bg-indigo-900/50 rounded-md transition-colors text-sm font-medium"
+                >
+                    <Download className="w-4 h-4" />
+                    Download .md
+                </button>
+            </div>
+            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-8 prose-container overflow-hidden">
+                {markdown ? (
+                    <MarkdownRenderer content={markdown} />
+                ) : (
+                    <p className="text-gray-500">No report content available.</p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/GridSearch.tsx b/packages/ui/src/modules/places/gridsearch/GridSearch.tsx
index 3a928a0b..febff864 100644
--- a/packages/ui/src/modules/places/gridsearch/GridSearch.tsx
+++ b/packages/ui/src/modules/places/gridsearch/GridSearch.tsx
@@ -1,159 +1,159 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { PlusCircle, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { OngoingSearches } from './OngoingSearches';
-import { GridSearchWizard } from './GridSearchWizard';
-import { JobViewer } from './JobViewer';
-import { RestoredSearchProvider } from './RestoredSearchContext';
-import { useAppStore } from '@/store/appStore';
-
-export default function GridSearch() {
-    const [sidebarWidth, setSidebarWidth] = useState(320);
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-    const [isResizing, setIsResizing] = useState(false);
-
-    const { setShowGlobalFooter } = useAppStore();
-
-    useEffect(() => {
-        setShowGlobalFooter(false);
-        return () => setShowGlobalFooter(true);
-    }, [setShowGlobalFooter]);
-
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    const searchParams = new URLSearchParams(location.search);
-    const selectedJobId = searchParams.get('jobId');
-
-    const setSelectedJobId = useCallback((id: string | null) => {
-        const next = new URLSearchParams(location.search);
-        if (id) {
-            next.set('jobId', id);
-        } else {
-            next.delete('jobId');
-        }
-        navigate(`${location.pathname}?${next.toString()}`, { replace: true });
-    }, [navigate, location.search, location.pathname]);
-
-    const startResizing = useCallback((shouldStart: boolean) => {
-        setIsResizing(shouldStart);
-    }, []);
-
-    useEffect(() => {
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!isResizing) return;
-            // The sidebar starts from the left edge of its container, but we are inside the main App layout 
-            // the main App layout has a max container (1400px centered) plus left nav... Wait, in App.tsx it's max-w-[1400px].
-            // To make resizing robust without worrying about offsetLeft, we can calculate width based on movement delta, 
-            // but the simplest is just taking `e.clientX - sidebarRect.left`. So we attach a ref if needed.
-            // For now, let's just use `e.clientX` minus an approximate offset or just track delta.
-        };
-
-        const handleMouseUp = () => {
-            setIsResizing(false);
-        };
-
-        if (isResizing) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-            document.body.style.userSelect = 'none';
-            document.body.style.cursor = 'col-resize';
-        } else {
-            document.body.style.userSelect = '';
-            document.body.style.cursor = '';
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        }
-
-        return () => {
-            document.body.style.userSelect = '';
-            document.body.style.cursor = '';
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [isResizing]);
-
-    // Better resizing logic matching delta
-    const handleDragStart = (e: React.MouseEvent) => {
-        startResizing(true);
-        e.preventDefault();
-    };
-
-    const sidebarRef = React.useRef<HTMLDivElement>(null);
-    useEffect(() => {
-        const handleDrag = (e: MouseEvent) => {
-            if (!isResizing || !sidebarRef.current) return;
-            const sidebarRect = sidebarRef.current.getBoundingClientRect();
-            let newWidth = Math.max(0, e.clientX - sidebarRect.left);
-            setSidebarWidth(newWidth);
-        };
-
-        if (isResizing) {
-            window.addEventListener('mousemove', handleDrag);
-        }
-        return () => window.removeEventListener('mousemove', handleDrag);
-    }, [isResizing]);
-
-    return (
-        <div className="flex h-[calc(100vh-64px)] overflow-hidden bg-gray-50 dark:bg-gray-900 w-full relative">
-
-            {/* Left Sidebar */}
-            <div
-                ref={sidebarRef}
-                className={`flex-shrink-0 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 flex flex-col relative transition-[width] duration-300 ${!isSidebarOpen ? 'overflow-hidden' : ''}`}
-                style={{ width: isSidebarOpen ? `${sidebarWidth}px` : '0px' }}
-            >
-                <div className="p-4 border-b border-gray-200 dark:border-gray-800 shrink-0">
-                    <button
-                        onClick={() => setSelectedJobId(null)}
-                        className={`w-full flex items-center justify-center p-3 rounded-xl font-medium transition-colors ${!selectedJobId ? 'bg-indigo-600 text-white shadow-md' : 'bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-300 dark:hover:bg-indigo-900/50'}`}
-                    >
-                        <PlusCircle className="w-5 h-5 mr-2" />
-                        New Search
-                    </button>
-                </div>
-
-                <div className="flex-1 overflow-y-auto no-scrollbar pb-10">
-                    <OngoingSearches
-                        selectedJobId={selectedJobId}
-                        onSelectJob={setSelectedJobId}
-                        onSearchDeleted={(deletedId) => {
-                            if (selectedJobId === deletedId) {
-                                setSelectedJobId(null);
-                            }
-                        }}
-                    />
-                </div>
-
-                {/* Resizer handle */}
-                {isSidebarOpen && (
-                    <div
-                        className="absolute top-0 right-0 w-1.5 h-full cursor-col-resize hover:bg-indigo-500/50 active:bg-indigo-500 z-50 transition-colors"
-                        onMouseDown={handleDragStart}
-                    />
-                )}
-            </div>
-
-            {/* Sidebar Toggle Button */}
-            <button
-                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                className="absolute top-4 left-4 z-50 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
-                style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 16}px)` : 'translateX(0)' }}
-            >
-                {isSidebarOpen ? <PanelLeftClose className="w-4 h-4" /> : <PanelLeftOpen className="w-4 h-4" />}
-            </button>
-
-            {/* Main Content Area */}
-            <RestoredSearchProvider jobId={selectedJobId}>
-                <div className="flex-1 flex flex-col min-w-0 relative z-10 w-full overflow-hidden bg-gradient-to-br from-indigo-50/50 via-white to-blue-50/50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
-                    {selectedJobId ? (
-                        <JobViewer jobId={selectedJobId} />
-                    ) : (
-                        <GridSearchWizard onJobSubmitted={setSelectedJobId} />
-                    )}
-                </div>
-            </RestoredSearchProvider>
-
-        </div>
-    );
-}
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { PlusCircle, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { OngoingSearches } from './OngoingSearches';
+import { GridSearchWizard } from './GridSearchWizard';
+import { JobViewer } from './JobViewer';
+import { RestoredSearchProvider } from './RestoredSearchContext';
+import { useAppStore } from '@/store/appStore';
+
+export default function GridSearch() {
+    const [sidebarWidth, setSidebarWidth] = useState(320);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isResizing, setIsResizing] = useState(false);
+
+    const { setShowGlobalFooter } = useAppStore();
+
+    useEffect(() => {
+        setShowGlobalFooter(false);
+        return () => setShowGlobalFooter(true);
+    }, [setShowGlobalFooter]);
+
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const searchParams = new URLSearchParams(location.search);
+    const selectedJobId = searchParams.get('jobId');
+
+    const setSelectedJobId = useCallback((id: string | null) => {
+        const next = new URLSearchParams(location.search);
+        if (id) {
+            next.set('jobId', id);
+        } else {
+            next.delete('jobId');
+        }
+        navigate(`${location.pathname}?${next.toString()}`, { replace: true });
+    }, [navigate, location.search, location.pathname]);
+
+    const startResizing = useCallback((shouldStart: boolean) => {
+        setIsResizing(shouldStart);
+    }, []);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isResizing) return;
+            // The sidebar starts from the left edge of its container, but we are inside the main App layout 
+            // the main App layout has a max container (1400px centered) plus left nav... Wait, in App.tsx it's max-w-[1400px].
+            // To make resizing robust without worrying about offsetLeft, we can calculate width based on movement delta, 
+            // but the simplest is just taking `e.clientX - sidebarRect.left`. So we attach a ref if needed.
+            // For now, let's just use `e.clientX` minus an approximate offset or just track delta.
+        };
+
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+
+        if (isResizing) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            document.body.style.userSelect = 'none';
+            document.body.style.cursor = 'col-resize';
+        } else {
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        }
+
+        return () => {
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing]);
+
+    // Better resizing logic matching delta
+    const handleDragStart = (e: React.MouseEvent) => {
+        startResizing(true);
+        e.preventDefault();
+    };
+
+    const sidebarRef = React.useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        const handleDrag = (e: MouseEvent) => {
+            if (!isResizing || !sidebarRef.current) return;
+            const sidebarRect = sidebarRef.current.getBoundingClientRect();
+            let newWidth = Math.max(0, e.clientX - sidebarRect.left);
+            setSidebarWidth(newWidth);
+        };
+
+        if (isResizing) {
+            window.addEventListener('mousemove', handleDrag);
+        }
+        return () => window.removeEventListener('mousemove', handleDrag);
+    }, [isResizing]);
+
+    return (
+        <div className="flex h-[calc(100vh-64px)] overflow-hidden bg-gray-50 dark:bg-gray-900 w-full relative">
+
+            {/* Left Sidebar */}
+            <div
+                ref={sidebarRef}
+                className={`flex-shrink-0 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 flex flex-col relative transition-[width] duration-300 ${!isSidebarOpen ? 'overflow-hidden' : ''}`}
+                style={{ width: isSidebarOpen ? `${sidebarWidth}px` : '0px' }}
+            >
+                <div className="p-4 border-b border-gray-200 dark:border-gray-800 shrink-0">
+                    <button
+                        onClick={() => setSelectedJobId(null)}
+                        className={`w-full flex items-center justify-center p-3 rounded-xl font-medium transition-colors ${!selectedJobId ? 'bg-indigo-600 text-white shadow-md' : 'bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-300 dark:hover:bg-indigo-900/50'}`}
+                    >
+                        <PlusCircle className="w-5 h-5 mr-2" />
+                        New Search
+                    </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto no-scrollbar pb-10">
+                    <OngoingSearches
+                        selectedJobId={selectedJobId}
+                        onSelectJob={setSelectedJobId}
+                        onSearchDeleted={(deletedId) => {
+                            if (selectedJobId === deletedId) {
+                                setSelectedJobId(null);
+                            }
+                        }}
+                    />
+                </div>
+
+                {/* Resizer handle */}
+                {isSidebarOpen && (
+                    <div
+                        className="absolute top-0 right-0 w-1.5 h-full cursor-col-resize hover:bg-indigo-500/50 active:bg-indigo-500 z-50 transition-colors"
+                        onMouseDown={handleDragStart}
+                    />
+                )}
+            </div>
+
+            {/* Sidebar Toggle Button */}
+            <button
+                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                className="absolute top-4 left-4 z-50 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
+                style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 16}px)` : 'translateX(0)' }}
+            >
+                {isSidebarOpen ? <PanelLeftClose className="w-4 h-4" /> : <PanelLeftOpen className="w-4 h-4" />}
+            </button>
+
+            {/* Main Content Area */}
+            <RestoredSearchProvider jobId={selectedJobId}>
+                <div className="flex-1 flex flex-col min-w-0 relative z-10 w-full overflow-hidden bg-gradient-to-br from-indigo-50/50 via-white to-blue-50/50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
+                    {selectedJobId ? (
+                        <JobViewer jobId={selectedJobId} />
+                    ) : (
+                        <GridSearchWizard onJobSubmitted={setSelectedJobId} />
+                    )}
+                </div>
+            </RestoredSearchProvider>
+
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx b/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx
index 6a740fe1..51f21c9c 100644
--- a/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx
+++ b/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx
@@ -1,187 +1,182 @@
-import React, { useState, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { LayoutGrid, List, Map as MapIcon, PieChart, FileText } from 'lucide-react';
-
-import { CompetitorsGridView } from '../CompetitorsGridView';
-import { CompetitorsMapView } from '../CompetitorsMapView';
-import { CompetitorsThumbView } from '../CompetitorsThumbView';
-import { CompetitorsMetaView } from '../CompetitorsMetaView';
-import { CompetitorsReportView } from './CompetitorsReportView';
-import { useRestoredSearch } from './RestoredSearchContext';
-
-import { type CompetitorFull } from '@polymech/shared';
-
-type ViewMode = 'grid' | 'thumb' | 'map' | 'meta' | 'report';
-
-interface GridSearchResultsProps {
-    jobId: string;
-    competitors: CompetitorFull[];
-    excludedTypes: string[];
-    updateExcludedTypes?: (types: string[]) => Promise<void>;
-    liveAreas?: any[];
-    liveRadii?: any[];
-    liveNodes?: any[];
-    liveScanner?: any;
-    stats?: any;
-    streaming?: boolean;
-    statusMessage?: string;
-}
-
-const MOCK_SETTINGS = {
-    known_types: [],
-    excluded_types: [],
-    email_mode: 'fast' as const,
-    auto_enrich: false
-};
-
-export function GridSearchResults({ jobId, competitors, excludedTypes, updateExcludedTypes, liveAreas, liveRadii, liveNodes, liveScanner, stats, streaming, statusMessage }: GridSearchResultsProps) {
-    const [searchParams, setSearchParams] = useSearchParams();
-    const { state: restoredState } = useRestoredSearch();
-    const restoredGadmAreas = restoredState?.run?.request?.guided?.areas?.map((a: any) => ({
-        gid: a.gid, name: a.name, level: a.level,
-    })) || undefined;
-
-    const [viewMode, setViewMode] = useState<ViewMode>(() => {
-        const urlView = searchParams.get('view') as ViewMode;
-        if (urlView && ['grid', 'thumb', 'map', 'meta', 'report'].includes(urlView)) return urlView;
-
-        return 'grid';
-    });
-
-    const handleViewChange = useCallback((mode: ViewMode) => {
-        setViewMode(mode);
-        setSearchParams(prev => {
-            const newParams = new URLSearchParams(prev);
-            newParams.set('view', mode);
-            return newParams;
-        }, { replace: true });
-    }, [setSearchParams]);
-
-    const [showExcluded, setShowExcluded] = useState(false);
-
-    // Mock functions for now till we have real enrichment tracking in grid search results
-    const dummyEnrich = async () => { };
-    const handleMapCenterUpdate = () => { };
-
-    const settings = { ...MOCK_SETTINGS, excluded_types: excludedTypes };
-
-    return (
-        <div className="flex flex-col h-full overflow-hidden w-full relative">
-            <div className="flex justify-end mb-4 mt-2 px-2">
-                <div className="flex items-center gap-3 p-1 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm bg-white dark:bg-gray-800">
-                    <span className="text-xs text-gray-500 px-2">
-                        {competitors.length} results
-                    </span>
-                    <div className="h-4 w-px bg-gray-200 dark:bg-gray-700" />
-                    <div className="flex">
-                        <button
-                            onClick={() => handleViewChange('grid')}
-                            className={`p-1.5 rounded-md transition-all ${viewMode === 'grid' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
-                            title="Grid View"
-                        >
-                            <List className="h-4 w-4" />
-                        </button>
-                        <button
-                            onClick={() => handleViewChange('thumb')}
-                            className={`p-1.5 rounded-md transition-all ${viewMode === 'thumb' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
-                            title="Thumbnail View"
-                        >
-                            <LayoutGrid className="h-4 w-4" />
-                        </button>
-                        <button
-                            onClick={() => handleViewChange('map')}
-                            className={`p-1.5 rounded-md transition-all ${viewMode === 'map' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
-                            title="Map View"
-                        >
-                            <MapIcon className="h-4 w-4" />
-                        </button>
-                        <button
-                            onClick={() => handleViewChange('meta')}
-                            className={`p-1.5 rounded-md transition-all ${viewMode === 'meta' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
-                            title="Meta Analysis"
-                        >
-                            <PieChart className="h-4 w-4" />
-                        </button>
-                        <button
-                            onClick={() => handleViewChange('report')}
-                            className={`p-1.5 rounded-md transition-all ${viewMode === 'report' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
-                            title="Markdown Report"
-                        >
-                            <FileText className="h-4 w-4" />
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <div id="gridsearch-scroll-area" className="flex-1 min-h-0 overflow-auto bg-white dark:bg-gray-900 rounded-b-2xl">
-                {viewMode === 'grid' && (
-                    <CompetitorsGridView
-                        competitors={competitors}
-                        loading={false}
-                        settings={settings}
-                        updateExcludedTypes={updateExcludedTypes || (async () => { })}
-                        onOpenSettings={() => { }}
-                        showExcluded={showExcluded}
-                        setShowExcluded={setShowExcluded}
-                    />
-                )}
-
-                {viewMode === 'thumb' && (
-                    <CompetitorsThumbView
-                        competitors={competitors}
-                        filters={[]}
-                        toggleFilter={() => { }}
-                    />
-                )}
-
-                {viewMode === 'map' && (
-                    <CompetitorsMapView
-                        preset="SearchView"
-                        competitors={competitors}
-                        onMapCenterUpdate={handleMapCenterUpdate}
-                        enrich={dummyEnrich}
-                        isEnriching={false}
-                        enrichmentProgress={null}
-                        liveAreas={liveAreas}
-                        liveRadii={liveRadii}
-                        liveNodes={liveNodes}
-                        liveScanner={liveScanner}
-                        initialGadmRegions={restoredGadmAreas}
-                        initialSimulatorSettings={restoredState?.run?.request?.guided?.settings}
-                        initialCenter={(() => {
-                            const lat = parseFloat(searchParams.get('mapLat') || '');
-                            const lng = parseFloat(searchParams.get('mapLng') || '');
-                            return (!isNaN(lat) && !isNaN(lng)) ? { lat, lng } : undefined;
-                        })()}
-                        initialZoom={(() => {
-                            const zoom = parseFloat(searchParams.get('mapZoom') || '');
-                            return !isNaN(zoom) ? zoom : undefined;
-                        })()}
-                        onMapMove={(state) => {
-                            setSearchParams(prev => {
-                                const newParams = new URLSearchParams(prev);
-                                newParams.set('mapLat', state.lat.toFixed(6));
-                                newParams.set('mapLng', state.lng.toFixed(6));
-                                newParams.set('mapZoom', state.zoom.toFixed(2));
-                                newParams.set('view', 'map');
-                                return newParams;
-                            }, { replace: true });
-                        }}
-                    />
-                )}
-
-                {viewMode === 'meta' && (
-                    <CompetitorsMetaView
-                        competitors={competitors}
-                        settings={settings}
-                        updateExcludedTypes={updateExcludedTypes || (async () => { })}
-                    />
-                )}
-
-                {viewMode === 'report' && (
-                    <CompetitorsReportView jobId={jobId} />
-                )}
-            </div>
-        </div>
-    );
-}
+import React, { useState, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { LayoutGrid, List, Map as MapIcon, PieChart, FileText } from 'lucide-react';
+
+import { CompetitorsGridView } from '../CompetitorsGridView';
+import { CompetitorsMapView } from '../CompetitorsMapView';
+import { CompetitorsThumbView } from '../CompetitorsThumbView';
+import { CompetitorsMetaView } from '../CompetitorsMetaView';
+import { CompetitorsReportView } from './CompetitorsReportView';
+import { useRestoredSearch } from './RestoredSearchContext';
+
+import { type CompetitorFull } from '@polymech/shared';
+
+type ViewMode = 'grid' | 'thumb' | 'map' | 'meta' | 'report';
+
+interface GridSearchResultsProps {
+    jobId: string;
+    competitors: CompetitorFull[];
+    excludedTypes: string[];
+    updateExcludedTypes?: (types: string[]) => Promise<void>;
+    liveAreas?: any[];
+    liveRadii?: any[];
+    liveNodes?: any[];
+    liveScanner?: any;
+    stats?: any;
+    streaming?: boolean;
+    statusMessage?: string;
+}
+
+const MOCK_SETTINGS = {
+    known_types: [],
+    excluded_types: [],
+    email_mode: 'fast' as const,
+    auto_enrich: false
+};
+
+export function GridSearchResults({ jobId, competitors, excludedTypes, updateExcludedTypes, liveAreas, liveRadii, liveNodes, liveScanner, stats, streaming, statusMessage }: GridSearchResultsProps) {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { state: restoredState } = useRestoredSearch();
+    const restoredGadmAreas = restoredState?.run?.request?.guided?.areas?.map((a: any) => ({
+        gid: a.gid, name: a.name, level: a.level,
+    })) || undefined;
+
+    const [viewMode, setViewMode] = useState<ViewMode>(() => {
+        const urlView = searchParams.get('view') as ViewMode;
+        if (urlView && ['grid', 'thumb', 'map', 'meta', 'report'].includes(urlView)) return urlView;
+
+        return 'grid';
+    });
+
+    const handleViewChange = useCallback((mode: ViewMode) => {
+        setViewMode(mode);
+        setSearchParams(prev => {
+            const newParams = new URLSearchParams(prev);
+            newParams.set('view', mode);
+            return newParams;
+        }, { replace: true });
+    }, [setSearchParams]);
+
+    // Mock functions for now till we have real enrichment tracking in grid search results
+    const dummyEnrich = async () => { };
+    const handleMapCenterUpdate = () => { };
+
+    const settings = { ...MOCK_SETTINGS, excluded_types: excludedTypes };
+
+    return (
+        <div className="flex flex-col h-full overflow-hidden w-full relative">
+            <div className="flex justify-end mb-4 mt-2 px-2">
+                <div className="flex items-center gap-3 p-1 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm bg-white dark:bg-gray-800">
+                    <span className="text-xs text-gray-500 px-2">
+                        {competitors.length} results
+                    </span>
+                    <div className="h-4 w-px bg-gray-200 dark:bg-gray-700" />
+                    <div className="flex">
+                        <button
+                            onClick={() => handleViewChange('grid')}
+                            className={`p-1.5 rounded-md transition-all ${viewMode === 'grid' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
+                            title="Grid View"
+                        >
+                            <List className="h-4 w-4" />
+                        </button>
+                        <button
+                            onClick={() => handleViewChange('thumb')}
+                            className={`p-1.5 rounded-md transition-all ${viewMode === 'thumb' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
+                            title="Thumbnail View"
+                        >
+                            <LayoutGrid className="h-4 w-4" />
+                        </button>
+                        <button
+                            onClick={() => handleViewChange('map')}
+                            className={`p-1.5 rounded-md transition-all ${viewMode === 'map' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
+                            title="Map View"
+                        >
+                            <MapIcon className="h-4 w-4" />
+                        </button>
+                        <button
+                            onClick={() => handleViewChange('meta')}
+                            className={`p-1.5 rounded-md transition-all ${viewMode === 'meta' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
+                            title="Meta Analysis"
+                        >
+                            <PieChart className="h-4 w-4" />
+                        </button>
+                        <button
+                            onClick={() => handleViewChange('report')}
+                            className={`p-1.5 rounded-md transition-all ${viewMode === 'report' ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}`}
+                            title="Markdown Report"
+                        >
+                            <FileText className="h-4 w-4" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div id="gridsearch-scroll-area" className="flex-1 min-h-0 overflow-auto bg-white dark:bg-gray-900 rounded-b-2xl">
+                {viewMode === 'grid' && (
+                    <CompetitorsGridView
+                        competitors={competitors}
+                        loading={false}
+                        settings={settings}
+                        updateExcludedTypes={updateExcludedTypes || (async () => { })}
+                    />
+                )}
+
+                {viewMode === 'thumb' && (
+                    <CompetitorsThumbView
+                        competitors={competitors}
+                        filters={[]}
+                        toggleFilter={() => { }}
+                    />
+                )}
+
+                {viewMode === 'map' && (
+                    <CompetitorsMapView
+                        preset="SearchView"
+                        competitors={competitors}
+                        onMapCenterUpdate={handleMapCenterUpdate}
+                        enrich={dummyEnrich}
+                        isEnriching={false}
+                        enrichmentProgress={null}
+                        liveAreas={liveAreas}
+                        liveRadii={liveRadii}
+                        liveNodes={liveNodes}
+                        liveScanner={liveScanner}
+                        initialGadmRegions={restoredGadmAreas}
+                        initialSimulatorSettings={restoredState?.run?.request?.guided?.settings}
+                        initialCenter={(() => {
+                            const lat = parseFloat(searchParams.get('mapLat') || '');
+                            const lng = parseFloat(searchParams.get('mapLng') || '');
+                            return (!isNaN(lat) && !isNaN(lng)) ? { lat, lng } : undefined;
+                        })()}
+                        initialZoom={(() => {
+                            const zoom = parseFloat(searchParams.get('mapZoom') || '');
+                            return !isNaN(zoom) ? zoom : undefined;
+                        })()}
+                        onMapMove={(state) => {
+                            setSearchParams(prev => {
+                                const newParams = new URLSearchParams(prev);
+                                newParams.set('mapLat', state.lat.toFixed(6));
+                                newParams.set('mapLng', state.lng.toFixed(6));
+                                newParams.set('mapZoom', state.zoom.toFixed(2));
+                                newParams.set('view', 'map');
+                                return newParams;
+                            }, { replace: true });
+                        }}
+                    />
+                )}
+
+                {viewMode === 'meta' && (
+                    <CompetitorsMetaView
+                        competitors={competitors}
+                        settings={settings}
+                        updateExcludedTypes={updateExcludedTypes || (async () => { })}
+                    />
+                )}
+
+                {viewMode === 'report' && (
+                    <CompetitorsReportView jobId={jobId} />
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/GridSearchStreamContext.tsx b/packages/ui/src/modules/places/gridsearch/GridSearchStreamContext.tsx
index dd0f7bb8..a4d0a327 100644
--- a/packages/ui/src/modules/places/gridsearch/GridSearchStreamContext.tsx
+++ b/packages/ui/src/modules/places/gridsearch/GridSearchStreamContext.tsx
@@ -1,190 +1,198 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import { getPlacesGridSearchStreamUrl } from '../client-gridsearch';
-import { supabase } from '@/integrations/supabase/client';
-
-export interface GridSearchStreamState {
-    streaming: boolean;
-    connected: boolean;
-    statusMessage: string;
-    competitors: any[];
-    liveAreas: any[];
-    liveRadii: any[];
-    liveNodes: any[];
-    stats: {
-        completedWaypoints: number;
-        totalResults: number;
-        apiCalls: number;
-        totalLocationsEnriched: number;
-    };
-    liveScanner: any;
-}
-
-const initialState: GridSearchStreamState = {
-    streaming: false,
-    connected: false,
-    statusMessage: 'Connecting...',
-    competitors: [],
-    liveAreas: [],
-    liveRadii: [],
-    liveNodes: [],
-    stats: {
-        completedWaypoints: 0,
-        totalResults: 0,
-        apiCalls: 0,
-        totalLocationsEnriched: 0,
-    },
-    liveScanner: null
-};
-
-const GridSearchStreamContext = createContext<GridSearchStreamState>(initialState);
-
-export const useGridSearchStream = () => useContext(GridSearchStreamContext);
-
-export function GridSearchStreamProvider({
-    jobId,
-    active,
-    initialCompetitors = [],
-    children
-}: {
-    jobId: string;
-    active: boolean;
-    initialCompetitors?: any[];
-    children: ReactNode;
-}) {
-    const [state, setState] = useState<GridSearchStreamState>({
-        ...initialState,
-        competitors: initialCompetitors,
-    });
-
-    useEffect(() => {
-        if (!active || !jobId) return;
-
-        let es: EventSource | null = null;
-        let isActive = true;
-
-        const connect = async () => {
-            try {
-                const { data: session } = await supabase.auth.getSession();
-                const token = session.session?.access_token;
-                const url = getPlacesGridSearchStreamUrl(jobId, token);
-
-                es = new EventSource(url);
-                setState(prev => ({ ...prev, streaming: true, connected: true }));
-
-                es.onopen = () => {
-                    if (isActive) {
-                        setState(prev => ({ ...prev, connected: true, statusMessage: 'Stream connected' }));
-                    }
-                };
-
-                const handleStreamEvent = (eventType: string) => (e: MessageEvent) => {
-                    if (!isActive) return;
-                    try {
-                        const parsed = JSON.parse(e.data);
-                        console.log('sse - uds stream', parsed)
-
-                        // If it's a 'progress' event, it might wrap real event type and data inside it
-                        const type = eventType === 'progress' ? (parsed.type || 'progress') : eventType;
-                        const data = eventType === 'progress' && parsed.type ? (parsed.data || parsed) : parsed;
-
-                        if (parsed.message) {
-                            setState(prev => ({ ...prev, statusMessage: parsed.message }));
-                        }
-                        if (parsed.stats || data?.stats) {
-                            const stats = parsed.stats || data?.stats;
-                            setState(prev => ({
-                                ...prev,
-                                stats: { ...prev.stats, ...stats }
-                            }));
-                        }
-
-                        if (type === 'area-start') {
-                            setState(prev => ({ ...prev, liveAreas: [...prev.liveAreas, data] }));
-                            setState(prev => ({ ...prev, statusMessage: `Searching area: ${data?.name || '...'}` }));
-                        } else if (type === 'radius-start' || type === 'waypoint-start') {
-                            setState(prev => ({ ...prev, liveRadii: [...prev.liveRadii, data] }));
-                            if (data.location || data.center || (data.lat && (data.lng || data.lon))) {
-                                const loc = data.location?.location || data.center || data;
-                                const lng = loc.lng || loc.lon;
-                                if (loc.lat && lng) {
-                                    setState(prev => ({
-                                        ...prev,
-                                        liveScanner: {
-                                            type: 'FeatureCollection',
-                                            features: [{
-                                                type: 'Feature',
-                                                properties: {
-                                                    icon_state: 'pacman-open',
-                                                    bearing: 0,
-                                                    radius: data.radius_km || 0.5
-                                                },
-                                                geometry: {
-                                                    type: 'Point',
-                                                    coordinates: [lng, loc.lat]
-                                                }
-                                            }]
-                                        }
-                                    }));
-                                }
-                            }
-                        } else if (type === 'node-start') {
-                            setState(prev => ({ ...prev, liveNodes: [...prev.liveNodes, data] }));
-                        } else if (type === 'location' || type === 'node') {
-                            let newComp = type === 'node' ? data : (data?.result || data);
-                            if (newComp && newComp.location) {
-                                newComp = { ...newComp.location, areaName: newComp.areaName, _parent: newComp };
-                            }
-                            setState(prev => ({
-                                ...prev,
-                                competitors: [...prev.competitors, newComp]
-                            }));
-                            setState(prev => ({ ...prev, statusMessage: `Found: ${newComp?.title || newComp?.name || 'Location'}` }));
-                        } else if (type === 'log') {
-                            // user stated log is pure cpp logging forward, ignore for now
-                        }
-                    } catch (err) {
-                        console.error('Failed parsing stream event', eventType, err);
-                    }
-                };
-
-                const streamEvents = [
-                    'progress', 'area-start', 'area-finish', 'waypoint-start',
-                    'waypoint-finish', 'radius-start', 'node-start', 'location',
-                    'node', 'log', 'job_result', 'stats'
-                ];
-                streamEvents.forEach(ev => es!.addEventListener(ev, handleStreamEvent(ev)));
-
-                es.addEventListener('complete', () => {
-                    if (isActive) {
-                        setState(prev => ({ ...prev, streaming: false, connected: false, statusMessage: 'Search Complete' }));
-                        es?.close();
-                    }
-                });
-
-                es.onerror = (err) => {
-                    console.error('SSE Error:', err);
-                    if (isActive) {
-                        setState(prev => ({ ...prev, connected: false, statusMessage: 'Connection error' }));
-                    }
-                };
-            } catch (err) {
-                console.error('Error establishing SSE', err);
-            }
-        };
-
-        connect();
-
-        return () => {
-            isActive = false;
-            if (es) {
-                es.close();
-            }
-        };
-    }, [jobId, active]);
-
-    return (
-        <GridSearchStreamContext.Provider value={state}>
-            {children}
-        </GridSearchStreamContext.Provider>
-    );
-}
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { getPlacesGridSearchStreamUrl } from '../client-gridsearch';
+import { supabase } from '@/integrations/supabase/client';
+
+export interface GridSearchStreamState {
+    streaming: boolean;
+    connected: boolean;
+    statusMessage: string;
+    competitors: any[];
+    liveAreas: any[];
+    liveRadii: any[];
+    liveNodes: any[];
+    stats: {
+        completedWaypoints: number;
+        totalResults: number;
+        apiCalls: number;
+        totalLocationsEnriched: number;
+    };
+    liveScanner: any;
+}
+
+const initialState: GridSearchStreamState = {
+    streaming: false,
+    connected: false,
+    statusMessage: 'Connecting...',
+    competitors: [],
+    liveAreas: [],
+    liveRadii: [],
+    liveNodes: [],
+    stats: {
+        completedWaypoints: 0,
+        totalResults: 0,
+        apiCalls: 0,
+        totalLocationsEnriched: 0,
+    },
+    liveScanner: null
+};
+
+// ── pure helpers ──
+
+function buildScannerGeoJSON(data: any): any | null {
+    const loc = data.location?.location || data.center || data;
+    const lng = loc.lng || loc.lon;
+    if (!loc.lat || !lng) return null;
+
+    return {
+        type: 'FeatureCollection',
+        features: [{
+            type: 'Feature',
+            properties: { icon_state: 'pacman-open', bearing: 0, radius: data.radius_km || 0.5 },
+            geometry: { type: 'Point', coordinates: [lng, loc.lat] }
+        }]
+    };
+}
+
+function normalizeLocation(type: string, data: any) {
+    let comp = type === 'node' ? data : (data?.result || data);
+    if (comp?.location) {
+        comp = { ...comp.location, areaName: comp.areaName, _parent: comp };
+    }
+    return comp;
+}
+
+function parseStreamEvent(eventType: string, raw: string): { type: string; parsed: any; data: any } {
+    const parsed = JSON.parse(raw);
+    const type = eventType === 'progress' ? (parsed.type || 'progress') : eventType;
+    const data = (eventType === 'progress' && parsed.type) ? (parsed.data || parsed) : parsed;
+    return { type, parsed, data };
+}
+
+function applyEventToState(
+    prev: GridSearchStreamState,
+    type: string,
+    parsed: any,
+    data: any
+): GridSearchStreamState {
+    const next = { ...prev };
+
+    if (parsed.message) next.statusMessage = parsed.message;
+
+    const stats = parsed.stats || data?.stats;
+    if (stats) next.stats = { ...next.stats, ...stats };
+
+    switch (type) {
+        case 'area-start':
+            next.liveAreas = [...next.liveAreas, data];
+            next.statusMessage = `Searching area: ${data?.name || '...'}`;
+            break;
+
+        case 'radius-start':
+        case 'waypoint-start':
+            next.liveRadii = [...next.liveRadii, data];
+            next.liveScanner = buildScannerGeoJSON(data) ?? next.liveScanner;
+            break;
+
+        case 'node-start':
+            next.liveNodes = [...next.liveNodes, data];
+            break;
+
+        case 'location':
+        case 'node': {
+            const comp = normalizeLocation(type, data);
+            next.competitors = [...next.competitors, comp];
+            next.statusMessage = `Found: ${comp?.title || comp?.name || 'Location'}`;
+            break;
+        }
+
+        case 'log':
+            break; // cpp logging forward – ignored
+    }
+
+    return next;
+}
+
+// ── context ──
+
+const STREAM_EVENTS = [
+    'progress', 'area-start', 'area-finish', 'waypoint-start',
+    'waypoint-finish', 'radius-start', 'node-start', 'location',
+    'node', 'log', 'job_result', 'stats'
+] as const;
+
+const GridSearchStreamContext = createContext<GridSearchStreamState>(initialState);
+
+export const useGridSearchStream = () => useContext(GridSearchStreamContext);
+
+export function GridSearchStreamProvider({
+    jobId,
+    active,
+    initialCompetitors = [],
+    children
+}: {
+    jobId: string;
+    active: boolean;
+    initialCompetitors?: any[];
+    children: ReactNode;
+}) {
+    const [state, setState] = useState<GridSearchStreamState>({
+        ...initialState,
+        competitors: initialCompetitors,
+    });
+
+    useEffect(() => {
+        if (!active || !jobId) return;
+
+        let es: EventSource | null = null;
+        let isActive = true;
+
+        const handleStreamMessage = (eventType: string) => (e: MessageEvent) => {
+            if (!isActive) return;
+            try {
+                const { type, parsed, data } = parseStreamEvent(eventType, e.data);
+                console.log('sse - uds stream', parsed);
+                setState(prev => applyEventToState(prev, type, parsed, data));
+            } catch (err) {
+                console.error('Failed parsing stream event', eventType, err);
+            }
+        };
+
+        const connect = async () => {
+            try {
+                const { data: session } = await supabase.auth.getSession();
+                const url = getPlacesGridSearchStreamUrl(jobId, session.session?.access_token);
+
+                es = new EventSource(url);
+                setState(prev => ({ ...prev, streaming: true, connected: true }));
+
+                es.onopen = () => {
+                    if (isActive) setState(prev => ({ ...prev, connected: true, statusMessage: 'Stream connected' }));
+                };
+
+                STREAM_EVENTS.forEach(ev => es!.addEventListener(ev, handleStreamMessage(ev)));
+
+                es.addEventListener('complete', () => {
+                    if (!isActive) return;
+                    setState(prev => ({ ...prev, streaming: false, connected: false, statusMessage: 'Search Complete' }));
+                    es?.close();
+                });
+
+                es.onerror = (err) => {
+                    console.error('SSE Error:', err);
+                    if (isActive) setState(prev => ({ ...prev, connected: false, statusMessage: 'Connection error' }));
+                };
+            } catch (err) {
+                console.error('Error establishing SSE', err);
+            }
+        };
+
+        connect();
+        return () => { isActive = false; es?.close(); };
+    }, [jobId, active]);
+
+    return (
+        <GridSearchStreamContext.Provider value={state}>
+            {children}
+        </GridSearchStreamContext.Provider>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx b/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx
index 6c2934eb..8a27e787 100644
--- a/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx
+++ b/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx
@@ -1,273 +1,273 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Loader2, Search, MapPin, CheckCircle, ChevronRight, ChevronLeft, Settings } from 'lucide-react';
-import { submitPlacesGridSearchJob } from '../client-gridsearch';
-import { CompetitorsMapView } from '../CompetitorsMapView';
-import { GadmRegionCollector } from '../gadm-picker/GadmRegionCollector';
-import { GadmNode } from '../gadm-picker/GadmTreePicker';
-import { GadmPickerProvider } from '../gadm-picker/GadmPickerContext';
-
-
-export function GridSearchWizard({ onJobSubmitted }: { onJobSubmitted: (jobId: string) => void }) {
-    return (
-        <GadmPickerProvider>
-            <GridSearchWizardInner onJobSubmitted={onJobSubmitted} />
-        </GadmPickerProvider>
-    );
-}
-
-function GridSearchWizardInner({ onJobSubmitted }: { onJobSubmitted: (jobId: string) => void }) {
-    const [step, setStep] = useState(1);
-
-    // Step 1: Region
-    const [collectedNodes, setCollectedNodes] = useState<GadmNode[]>([]);
-
-    // Step 2: Query
-    const [searchQuery, setSearchQuery] = useState('');
-
-    // Step 3: Preview
-    const [showSettings, setShowSettings] = useState(false);
-    const [simulatorSettings, setSimulatorSettings] = useState<any>({
-        gridMode: 'centers',
-        pathOrder: 'snake',
-        groupByRegion: true,
-        cellSize: 5,
-        cellOverlap: 0,
-        centroidOverlap: 50,
-        ghsFilterMode: 'OR',
-        maxCellsLimit: 50000,
-        maxElevation: 1000,
-        minDensity: 10,
-        minGhsPop: 26,
-        minGhsBuilt: 154,
-        allowMissingGhs: false,
-        bypassFilters: true,
-    });
-
-    // Step 4: Submit
-    const [resolutions, setResolutions] = useState<Record<string, number>>({});
-    const [submitting, setSubmitting] = useState(false);
-    const [error, setError] = useState('');
-
-
-    const handleNext = async () => {
-        if (step === 1 && collectedNodes.length === 0) return;
-        if (step === 2 && !searchQuery.trim()) return;
-
-        if (step === 1) { setStep(2); return; }
-
-        if (step === 2) { setStep(3); return; }
-
-        if (step === 3) { setStep(4); return; }
-    };
-
-    const handleBack = () => {
-        setStep(Math.max(1, step - 1));
-        setError('');
-    };
-
-    const handleSubmit = async () => {
-        setSubmitting(true);
-        setError('');
-        try {
-            const regionNames = collectedNodes.map(n => n.name).join(' | ');
-
-            const areas = collectedNodes.map(node => {
-                return {
-                    gid: node.gid,
-                    name: node.name,
-                    level: resolutions[node.gid] ?? node.level,
-                    raw: {
-                        level: node.level,
-                        gadmName: node.name,
-                        gid: node.gid
-                    }
-                };
-            });
-
-            const guided = {
-                areas,
-                settings: simulatorSettings
-            };
-
-            const res = await submitPlacesGridSearchJob({
-                region: regionNames,
-                types: [searchQuery],
-                enrichers: ['meta', 'emails'],
-                guided
-            });
-            onJobSubmitted(res.jobId);
-            setStep(5);
-        } catch (err: any) {
-            setError(err.message || 'Failed to submit job');
-        }
-        setSubmitting(false);
-    };
-
-    const handleReset = () => {
-        setStep(1);
-        setCollectedNodes([]);
-        setSearchQuery('');
-        setResolutions({});
-        setError('');
-    };
-
-
-
-    return (
-        <div className="flex flex-col items-center justify-center p-6 h-full border-box w-full">
-            
-            {step < 5 && (
-                <div className="w-full max-w-2xl mb-8 flex justify-between items-center px-4">
-                    {[1, 2, 3, 4].map((s) => (
-                        <div key={s} className="flex items-center">
-                            <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${step >= s ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}`}>
-                                {step > s ? <CheckCircle className="w-5 h-5" /> : s}
-                            </div>
-                            {s < 4 && (
-                                <div className={`w-16 h-1 mx-2 rounded transition-colors ${step > s ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-700'}`} />
-                            )}
-                        </div>
-                    ))}
-                </div>
-            )}
-
-            <div className={`w-full flex-grow flex flex-col ${step === 3 ? 'max-w-6xl' : 'max-w-xl'} bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transition-all duration-300`}>
-                <div className="p-8 flex-grow overflow-y-auto flex flex-col min-h-0">
-
-                    {step === 1 && (
-                        <div className="flex flex-col flex-1 min-h-0 space-y-6">
-                            <div className="shrink-0">
-                                <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Where do you want to search?</h2>
-                                <p className="text-gray-500 dark:text-gray-400">Select one or more countries, regions, or cities to perform the grid search.</p>
-                            </div>
-                            <GadmRegionCollector 
-                                selectedNodes={collectedNodes} 
-                                onSelectionChange={setCollectedNodes} 
-                                resolutions={resolutions}
-                                onChangeResolution={(gid, lvl) => setResolutions(prev => ({ ...prev, [gid]: lvl }))}
-                            />
-                        </div>
-                    )}
-
-                    {step === 2 && (
-                        <div className="space-y-6">
-                            <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">What are you looking for?</h2>
-                            <p className="text-gray-500 dark:text-gray-400">Enter your SerpAPI search query for Google Maps.</p>
-                            
-                            <div className="relative mt-8">
-                                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                                    <Search className="h-6 w-6 text-gray-400" />
-                                </div>
-                                <input
-                                    type="text"
-                                    placeholder="e.g., HVAC contractors"
-                                    className="w-full block pl-12 pr-4 py-4 text-lg border-2 border-transparent bg-gray-100 dark:bg-gray-900 focus:bg-white dark:focus:bg-gray-800 focus:border-indigo-500 focus:ring-0 rounded-xl transition-colors dark:text-white"
-                                    value={searchQuery}
-                                    onChange={e => setSearchQuery(e.target.value)}
-                                    autoFocus
-                                    onKeyDown={e => { if(e.key === 'Enter' && searchQuery) handleNext(); }}
-                                />
-                            </div>
-                        </div>
-                    )}
-
-                    {step === 3 && (
-                        <div className="flex flex-col flex-1 min-h-0">
-                            <div className="flex items-center justify-between border-b pb-3 dark:border-gray-700 shrink-0">
-                                <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">Preview & Simulate</h2>
-                            </div>
-                            <div className="border rounded-xl overflow-hidden flex-1 min-h-0 mt-3 flex flex-col">
-                                <CompetitorsMapView
-                                    preset="Minimal"
-                                    competitors={[]}
-                                    onMapCenterUpdate={() => {}}
-                                    enrich={async () => {}}
-                                    isEnriching={false}
-                                    initialGadmRegions={collectedNodes.map(n => ({ gid: n.gid, name: n.name, level: resolutions[n.gid] ?? n.level }))}
-                                    simulatorSettings={simulatorSettings}
-                                    onSimulatorSettingsChange={setSimulatorSettings}
-                                />
-                            </div>
-                        </div>
-                    )}
-
-                    {step === 4 && (
-                        <div className="space-y-6">
-                            <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Ready to Launch</h2>
-                            <p className="text-gray-500 dark:text-gray-400">Configure your grid granularity and start the scan.</p>
-                            
-                            <div className="mt-8 bg-gray-50 dark:bg-gray-900 rounded-xl p-6 border dark:border-gray-700">
-                                <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Search Summary</h3>
-                                <div className="space-y-3">
-                                    <div className="flex justify-between">
-                                        <span className="text-gray-600 dark:text-gray-400">Regions:</span>
-                                        <span className="font-medium text-gray-900 dark:text-gray-100 text-right max-w-xs">{collectedNodes.map(n => n.name).join(', ')}</span>
-                                    </div>
-                                    <div className="flex justify-between">
-                                        <span className="text-gray-600 dark:text-gray-400">Query:</span>
-                                        <span className="font-medium text-gray-900 dark:text-gray-100">"{searchQuery}"</span>
-                                    </div>
-                            </div>
-                            </div>
-
-                            {error && (
-                                <div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm border border-red-200">
-                                    {error}
-                                </div>
-                            )}
-                        </div>
-                    )}
-
-                    {step === 5 && (
-                        <div className="text-center py-16 space-y-6 flex flex-col items-center justify-center">
-                            <div className="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
-                                <CheckCircle className="w-10 h-10" />
-                            </div>
-                            <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Search Launched!</h2>
-                            <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
-                                Your grid search has been successfully queued. You can monitor its progress in the sidebar.
-                            </p>
-                            <div className="pt-6">
-                                <button className="text-indigo-600 font-medium hover:underline bg-indigo-50 px-4 py-2 rounded-lg" onClick={handleReset}>
-                                    Start Another Search
-                                </button>
-                            </div>
-                        </div>
-                    )}
-
-                </div>
-
-                {step < 5 && (
-                    <div className="shrink-0 bg-gray-50 dark:bg-gray-900/50 px-8 py-4 border-t dark:border-gray-700 flex justify-between items-center">
-                        <button
-                            onClick={handleBack}
-                            disabled={step === 1 || submitting}
-                            className="flex items-center text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 font-medium disabled:opacity-0 transition-opacity"
-                        >
-                            <ChevronLeft className="w-5 h-5 mr-1" /> Back
-                        </button>
-                        
-                        {step < 4 ? (
-                            <button
-                                onClick={handleNext}
-                                disabled={(step === 1 && collectedNodes.length === 0) || (step === 2 && !searchQuery.trim())}
-                                className="flex items-center bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2.5 rounded-xl font-medium transition-colors disabled:opacity-50"
-                            >
-                                Continue <ChevronRight className="w-5 h-5 ml-1" />
-                            </button>
-                        ) : (
-                            <button
-                                onClick={handleSubmit}
-                                disabled={submitting}
-                                className="flex items-center bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-2.5 rounded-xl font-medium transition-colors disabled:opacity-50"
-                            >
-                                {submitting ? <Loader2 className="w-5 h-5 animate-spin mr-2" /> : null}
-                                {submitting ? 'Launching...' : 'Launch Search'}
-                            </button>
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
+import React, { useState, useEffect, useRef } from 'react';
+import { Loader2, Search, MapPin, CheckCircle, ChevronRight, ChevronLeft, Settings } from 'lucide-react';
+import { submitPlacesGridSearchJob } from '../client-gridsearch';
+import { CompetitorsMapView } from '../CompetitorsMapView';
+import { GadmRegionCollector } from '../gadm-picker/GadmRegionCollector';
+import { GadmNode } from '../gadm-picker/GadmTreePicker';
+import { GadmPickerProvider } from '../gadm-picker/GadmPickerContext';
+
+
+export function GridSearchWizard({ onJobSubmitted }: { onJobSubmitted: (jobId: string) => void }) {
+    return (
+        <GadmPickerProvider>
+            <GridSearchWizardInner onJobSubmitted={onJobSubmitted} />
+        </GadmPickerProvider>
+    );
+}
+
+function GridSearchWizardInner({ onJobSubmitted }: { onJobSubmitted: (jobId: string) => void }) {
+    const [step, setStep] = useState(1);
+
+    // Step 1: Region
+    const [collectedNodes, setCollectedNodes] = useState<GadmNode[]>([]);
+
+    // Step 2: Query
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Step 3: Preview
+    const [showSettings, setShowSettings] = useState(false);
+    const [simulatorSettings, setSimulatorSettings] = useState<any>({
+        gridMode: 'centers',
+        pathOrder: 'snake',
+        groupByRegion: true,
+        cellSize: 5,
+        cellOverlap: 0,
+        centroidOverlap: 50,
+        ghsFilterMode: 'OR',
+        maxCellsLimit: 50000,
+        maxElevation: 1000,
+        minDensity: 10,
+        minGhsPop: 26,
+        minGhsBuilt: 154,
+        allowMissingGhs: false,
+        bypassFilters: true,
+    });
+
+    // Step 4: Submit
+    const [resolutions, setResolutions] = useState<Record<string, number>>({});
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState('');
+
+
+    const handleNext = async () => {
+        if (step === 1 && collectedNodes.length === 0) return;
+        if (step === 2 && !searchQuery.trim()) return;
+
+        if (step === 1) { setStep(2); return; }
+
+        if (step === 2) { setStep(3); return; }
+
+        if (step === 3) { setStep(4); return; }
+    };
+
+    const handleBack = () => {
+        setStep(Math.max(1, step - 1));
+        setError('');
+    };
+
+    const handleSubmit = async () => {
+        setSubmitting(true);
+        setError('');
+        try {
+            const regionNames = collectedNodes.map(n => n.name).join(' | ');
+
+            const areas = collectedNodes.map(node => {
+                return {
+                    gid: node.gid,
+                    name: node.name,
+                    level: resolutions[node.gid] ?? node.level,
+                    raw: {
+                        level: node.level,
+                        gadmName: node.name,
+                        gid: node.gid
+                    }
+                };
+            });
+
+            const guided = {
+                areas,
+                settings: simulatorSettings
+            };
+
+            const res = await submitPlacesGridSearchJob({
+                region: regionNames,
+                types: [searchQuery],
+                enrichers: ['meta', 'emails'],
+                guided
+            });
+            onJobSubmitted(res.jobId);
+            setStep(5);
+        } catch (err: any) {
+            setError(err.message || 'Failed to submit job');
+        }
+        setSubmitting(false);
+    };
+
+    const handleReset = () => {
+        setStep(1);
+        setCollectedNodes([]);
+        setSearchQuery('');
+        setResolutions({});
+        setError('');
+    };
+
+
+
+    return (
+        <div className="flex flex-col items-center justify-center p-6 h-full border-box w-full">
+            
+            {step < 5 && (
+                <div className="w-full max-w-2xl mb-8 flex justify-between items-center px-4">
+                    {[1, 2, 3, 4].map((s) => (
+                        <div key={s} className="flex items-center">
+                            <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${step >= s ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}`}>
+                                {step > s ? <CheckCircle className="w-5 h-5" /> : s}
+                            </div>
+                            {s < 4 && (
+                                <div className={`w-16 h-1 mx-2 rounded transition-colors ${step > s ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-700'}`} />
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            <div className={`w-full flex-grow flex flex-col ${step === 3 ? 'max-w-6xl' : 'max-w-xl'} bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transition-all duration-300`}>
+                <div className="p-8 flex-grow overflow-y-auto flex flex-col min-h-0">
+
+                    {step === 1 && (
+                        <div className="flex flex-col flex-1 min-h-0 space-y-6">
+                            <div className="shrink-0">
+                                <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Where do you want to search?</h2>
+                                <p className="text-gray-500 dark:text-gray-400">Select one or more countries, regions, or cities to perform the grid search.</p>
+                            </div>
+                            <GadmRegionCollector 
+                                selectedNodes={collectedNodes} 
+                                onSelectionChange={setCollectedNodes} 
+                                resolutions={resolutions}
+                                onChangeResolution={(gid, lvl) => setResolutions(prev => ({ ...prev, [gid]: lvl }))}
+                            />
+                        </div>
+                    )}
+
+                    {step === 2 && (
+                        <div className="space-y-6">
+                            <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">What are you looking for?</h2>
+                            <p className="text-gray-500 dark:text-gray-400">Enter your SerpAPI search query for Google Maps.</p>
+                            
+                            <div className="relative mt-8">
+                                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                                    <Search className="h-6 w-6 text-gray-400" />
+                                </div>
+                                <input
+                                    type="text"
+                                    placeholder="e.g., HVAC contractors"
+                                    className="w-full block pl-12 pr-4 py-4 text-lg border-2 border-transparent bg-gray-100 dark:bg-gray-900 focus:bg-white dark:focus:bg-gray-800 focus:border-indigo-500 focus:ring-0 rounded-xl transition-colors dark:text-white"
+                                    value={searchQuery}
+                                    onChange={e => setSearchQuery(e.target.value)}
+                                    autoFocus
+                                    onKeyDown={e => { if(e.key === 'Enter' && searchQuery) handleNext(); }}
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    {step === 3 && (
+                        <div className="flex flex-col flex-1 min-h-0">
+                            <div className="flex items-center justify-between border-b pb-3 dark:border-gray-700 shrink-0">
+                                <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">Preview & Simulate</h2>
+                            </div>
+                            <div className="border rounded-xl overflow-hidden flex-1 min-h-0 mt-3 flex flex-col">
+                                <CompetitorsMapView
+                                    preset="Minimal"
+                                    competitors={[]}
+                                    onMapCenterUpdate={() => {}}
+                                    enrich={async () => {}}
+                                    isEnriching={false}
+                                    initialGadmRegions={collectedNodes.map(n => ({ gid: n.gid, name: n.name, level: resolutions[n.gid] ?? n.level }))}
+                                    simulatorSettings={simulatorSettings}
+                                    onSimulatorSettingsChange={setSimulatorSettings}
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    {step === 4 && (
+                        <div className="space-y-6">
+                            <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Ready to Launch</h2>
+                            <p className="text-gray-500 dark:text-gray-400">Configure your grid granularity and start the scan.</p>
+                            
+                            <div className="mt-8 bg-gray-50 dark:bg-gray-900 rounded-xl p-6 border dark:border-gray-700">
+                                <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Search Summary</h3>
+                                <div className="space-y-3">
+                                    <div className="flex justify-between">
+                                        <span className="text-gray-600 dark:text-gray-400">Regions:</span>
+                                        <span className="font-medium text-gray-900 dark:text-gray-100 text-right max-w-xs">{collectedNodes.map(n => n.name).join(', ')}</span>
+                                    </div>
+                                    <div className="flex justify-between">
+                                        <span className="text-gray-600 dark:text-gray-400">Query:</span>
+                                        <span className="font-medium text-gray-900 dark:text-gray-100">"{searchQuery}"</span>
+                                    </div>
+                            </div>
+                            </div>
+
+                            {error && (
+                                <div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm border border-red-200">
+                                    {error}
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {step === 5 && (
+                        <div className="text-center py-16 space-y-6 flex flex-col items-center justify-center">
+                            <div className="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
+                                <CheckCircle className="w-10 h-10" />
+                            </div>
+                            <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Search Launched!</h2>
+                            <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
+                                Your grid search has been successfully queued. You can monitor its progress in the sidebar.
+                            </p>
+                            <div className="pt-6">
+                                <button className="text-indigo-600 font-medium hover:underline bg-indigo-50 px-4 py-2 rounded-lg" onClick={handleReset}>
+                                    Start Another Search
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                </div>
+
+                {step < 5 && (
+                    <div className="shrink-0 bg-gray-50 dark:bg-gray-900/50 px-8 py-4 border-t dark:border-gray-700 flex justify-between items-center">
+                        <button
+                            onClick={handleBack}
+                            disabled={step === 1 || submitting}
+                            className="flex items-center text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 font-medium disabled:opacity-0 transition-opacity"
+                        >
+                            <ChevronLeft className="w-5 h-5 mr-1" /> Back
+                        </button>
+                        
+                        {step < 4 ? (
+                            <button
+                                onClick={handleNext}
+                                disabled={(step === 1 && collectedNodes.length === 0) || (step === 2 && !searchQuery.trim())}
+                                className="flex items-center bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2.5 rounded-xl font-medium transition-colors disabled:opacity-50"
+                            >
+                                Continue <ChevronRight className="w-5 h-5 ml-1" />
+                            </button>
+                        ) : (
+                            <button
+                                onClick={handleSubmit}
+                                disabled={submitting}
+                                className="flex items-center bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-2.5 rounded-xl font-medium transition-colors disabled:opacity-50"
+                            >
+                                {submitting ? <Loader2 className="w-5 h-5 animate-spin mr-2" /> : null}
+                                {submitting ? 'Launching...' : 'Launch Search'}
+                            </button>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/JobViewer.tsx b/packages/ui/src/modules/places/gridsearch/JobViewer.tsx
index 8a232179..cd617787 100644
--- a/packages/ui/src/modules/places/gridsearch/JobViewer.tsx
+++ b/packages/ui/src/modules/places/gridsearch/JobViewer.tsx
@@ -1,294 +1,280 @@
-import React, { useState, useEffect } from 'react';
-import { Loader2, AlertCircle, Plus, Lock, MapPin } from 'lucide-react';
-import { fetchPlacesGridSearchById } from '../client-gridsearch';
-import { GridSearchResults } from './GridSearchResults';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-import { useRestoredSearch } from './RestoredSearchContext';
-import { GridSearchStreamProvider, useGridSearchStream } from './GridSearchStreamContext';
-import CollapsibleSection from '@/components/CollapsibleSection';
-
-function LiveGridSearchResults({ jobId, excludedTypes, dummyUpdateExcluded }: any) {
-    const { competitors, liveAreas, liveRadii, liveNodes, stats, streaming, statusMessage, liveScanner } = useGridSearchStream();
-
-    return (
-        <GridSearchResults
-            jobId={jobId}
-            competitors={competitors}
-            excludedTypes={excludedTypes}
-            updateExcludedTypes={dummyUpdateExcluded}
-            liveAreas={liveAreas}
-            liveRadii={liveRadii}
-            liveNodes={liveNodes}
-            liveScanner={liveScanner}
-            stats={stats}
-            streaming={streaming}
-            statusMessage={statusMessage}
-        />
-    );
-}
-
-export function JobViewer({ jobId }: { jobId: string }) {
-    const navigate = useNavigate();
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const [competitors, setCompetitors] = useState<any[]>([]);
-
-    const [jobData, setJobData] = useState<any>(null);
-    const { state: restoredState, isLocked, isComplete, loading: restoredLoading } = useRestoredSearch();
-    const guidedAreas = restoredState?.run?.request?.guided?.areas || [];
-    const searchSettings = restoredState?.run?.request?.guided?.settings || null;
-    const searchQuery = restoredState?.run?.request?.search || null;
-
-    const [retrying, setRetrying] = useState(false);
-
-    // For CompetitorsGridView props
-    const [excludedTypes, setExcludedTypes] = useState<string[]>([]);
-    useEffect(() => {
-        if (!jobId) return;
-
-        let active = true;
-        const load = async () => {
-            try {
-                setLoading(true);
-                setError(null);
-                const data = await fetchPlacesGridSearchById(jobId);
-                if (!active) return;
-
-                // Handle nested wrapper if present (sometimes { data: { ... } } or just the object)
-                const payload = data?.data ? data.data : data;
-                setJobData(payload);
-
-                if (payload && payload.result && Array.isArray(payload.result.enrichResults)) {
-                    setCompetitors(payload.result.enrichResults);
-                } else if (Array.isArray(payload)) {
-                    setCompetitors(payload);
-                } else if (payload && Array.isArray(payload.enrichResults)) {
-                    setCompetitors(payload.enrichResults);
-                } else {
-                    setCompetitors([]);
-                }
-            } catch (err: any) {
-                if (active) setError(err.message || 'Failed to load data');
-                console.error('Failed to load job data:', err);
-            } finally {
-                if (active) setLoading(false);
-            }
-        };
-
-        load();
-
-        return () => { active = false; };
-    }, [jobId]);
-
-    const dummyUpdateExcluded = async (types: string[]) => setExcludedTypes(types);
-
-    const handleRetry = async () => {
-        try {
-            setRetrying(true);
-            const token = localStorage.getItem('supabase.auth.token'); // Assuming JWT or cookie handles it if fetch uses credentials, but let's just use standard fetch with token? Wait, we can use the configured API client!
-            // Wait, we have an API client! Let's import `client` from somewhere? 
-            // Better yet, just use a raw fetch since we need standard headers. Actually let's use the local fetch with '/api/places/gridsearch/...' since Vite proxies it.
-            const res = await fetch(`/api/places/gridsearch/${jobId}/retry`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...(token && JSON.parse(token).access_token ? { 'Authorization': `Bearer ${JSON.parse(token).access_token}` } : {})
-                }
-            });
-            if (res.ok) {
-                window.location.reload();
-            } else {
-                const errJson = await res.json();
-                setError(errJson.error || 'Failed to retry job');
-            }
-        } catch (e: any) {
-            console.error(e);
-            setError(e.message || 'Failed to retry job');
-        } finally {
-            setRetrying(false);
-        }
-    };
-
-    if (!jobId) return null;
-
-    if (loading) {
-        return (
-            <div className="flex flex-col items-center justify-center p-6 flex-1 w-full box-border min-h-0">
-                <Loader2 className="w-12 h-12 text-indigo-500 animate-spin mb-4" />
-                <p className="text-gray-500">Loading search results...</p>
-            </div>
-        );
-    }
-
-    if (error) {
-        return (
-            <div className="flex flex-col items-center justify-center p-6 flex-1 w-full box-border max-w-4xl mx-auto min-h-0">
-                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full p-10 text-center space-y-6">
-                    <div className="w-20 h-20 bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <AlertCircle className="w-10 h-10" />
-                    </div>
-                    <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
-                        Error
-                    </h2>
-                    <div className="text-red-500 dark:text-red-400 max-w-lg mx-auto bg-red-50 dark:bg-red-900/50 p-4 rounded-xl font-mono text-sm break-all border border-red-200 dark:border-red-900">
-                        {error}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    if (jobData?.status === 'failed' || jobData?.run?.status === 'failed') {
-        const errorMsg = jobData.result?.error || jobData?.run?.result?.error || 'Unknown error during job execution. The backend worker may have crashed or timed out.';
-        return (
-            <div className="flex flex-col items-center justify-center p-6 flex-1 w-full box-border max-w-4xl mx-auto min-h-0">
-                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full p-10 text-center space-y-6">
-                    <div className="w-20 h-20 bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <AlertCircle className="w-10 h-10" />
-                    </div>
-                    <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
-                        Job Failed
-                    </h2>
-                    <div className="text-red-500 dark:text-red-400 max-w-lg mx-auto bg-red-50 dark:bg-red-900/50 p-4 rounded-xl font-mono text-sm break-all border border-red-200 dark:border-red-900">
-                        {errorMsg}
-                    </div>
-                    <div className="pt-4">
-                        <button
-                            onClick={handleRetry}
-                            disabled={retrying}
-                            className="px-6 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-xl transition-colors disabled:opacity-50 inline-flex items-center"
-                        >
-                            {retrying ? (
-                                <><Loader2 className="w-4 h-4 inline mr-2 animate-spin" /> Retrying...</>
-                            ) : (
-                                'Retry Job'
-                            )}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    const allResults = jobData?.result?.searchResult?.results || competitors;
-    const foundTypes = Array.from(new Set(allResults.flatMap((r: any) => r.types || []).filter(Boolean))).sort() as string[];
-    return (
-        <div className="flex flex-col p-6 flex-1 w-full box-border overflow-hidden min-h-0">
-            <div className="w-full flex-1 min-h-0 flex flex-col bg-white dark:bg-gray-800 rounded-2xl shadow-xl transition-all duration-300">
-                <div className="flex flex-col md:flex-row md:items-start justify-between p-6 pb-2 border-b dark:border-gray-700">
-                    <div className="w-full">
-                        <div className="flex justify-between items-center mb-2">
-                            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">Search Results</h2>
-                            <button
-                                onClick={() => {
-                                    const params = new URLSearchParams(window.location.search);
-                                    params.delete('jobId');
-                                    navigate(`${window.location.pathname}?${params.toString()}`, { replace: true });
-                                }}
-                                className="flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm ml-4 shrink-0"
-                            >
-                                <Plus className="w-4 h-4 mr-2" />
-                                New Search
-                            </button>
-                        </div>
-
-                        <CollapsibleSection
-                            title="Search Configuration & Metadata"
-                            minimal
-                            initiallyOpen={false}
-                            storageKey={`gridSearchViewMetaCollapse`}
-                            className="mt-2"
-                        >
-                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2 text-sm text-gray-600 dark:text-gray-400 mt-2">
-                                <p><span className="font-medium">Job ID:</span> <span className="text-gray-800 dark:text-gray-300 select-all">{jobId}</span></p>
-                                {jobData && (
-                                    <>
-                                        {jobData.request?.search?.types && (
-                                            <p><span className="font-medium">Queries:</span> <span className="text-gray-800 dark:text-gray-300">{jobData.request.search.types.join(', ')}</span></p>
-                                        )}
-                                        {(jobData.query?.region || jobData.request?.enumerate?.region) && (
-                                            <p><span className="font-medium">Region:</span> <span className="text-gray-800 dark:text-gray-300">{jobData.query?.region || jobData.request?.enumerate?.region}</span></p>
-                                        )}
-                                        {(jobData.query?.level || jobData.request?.enumerate?.level) && (
-                                            <p><span className="font-medium">Level:</span> <span className="text-gray-800 dark:text-gray-300">{jobData.query?.level || jobData.request?.enumerate?.level}</span></p>
-                                        )}
-                                        {jobData.areas && (
-                                            <p><span className="font-medium">Areas Scanned:</span> <span className="text-gray-800 dark:text-gray-300">{jobData.areas.length}</span></p>
-                                        )}
-                                        {jobData.generatedAt && (
-                                            <p><span className="font-medium">Generated At:</span> <span className="text-gray-800 dark:text-gray-300">{new Date(jobData.generatedAt).toLocaleString()}</span></p>
-                                        )}
-                                        {foundTypes.length > 0 && (
-                                            <div className="col-span-full mt-1 flex flex-wrap items-center gap-x-2 gap-y-1.5">
-                                                <span className="font-medium mr-1 text-gray-800 dark:text-gray-300">Found Types:</span>
-                                                {foundTypes.map(t => (
-                                                    <span key={t} className="px-2 py-0.5 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800/50 rounded-md text-xs font-medium">
-                                                        {t}
-                                                    </span>
-                                                ))}
-                                            </div>
-                                        )}
-                                    </>
-                                )}
-                            </div>
-
-                            {/* Restored GADM Areas */}
-                            {guidedAreas.length > 0 && (
-                                <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
-                                    <div className="flex items-center gap-2 mb-2">
-                                        <MapPin className="w-3.5 h-3.5 text-amber-500" />
-                                        <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                                            GADM Areas ({guidedAreas.length})
-                                        </span>
-                                        {isLocked && (
-                                            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-1.5 py-0.5 rounded">
-                                                <Lock className="w-3 h-3" /> Locked
-                                            </span>
-                                        )}
-                                        {isComplete && (
-                                            <span className="text-[10px] font-medium text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-900/30 px-1.5 py-0.5 rounded">
-                                                Complete
-                                            </span>
-                                        )}
-                                    </div>
-                                    <div className="flex flex-wrap gap-1.5">
-                                        {guidedAreas.map((area: any) => (
-                                            <span
-                                                key={area.gid}
-                                                className="inline-flex items-center gap-1 text-xs bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800/50 rounded-md px-2 py-1"
-                                                title={area.gid}
-                                            >
-                                                <span className="w-1.5 h-1.5 rounded-full bg-yellow-500 flex-shrink-0" />
-                                                {area.name}
-                                                <span className="text-[10px] opacity-60">L{area.level}</span>
-                                            </span>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-
-                            {/* Search Settings Summary */}
-                            {searchSettings && (
-                                <div className="mt-3 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
-                                    {searchSettings.cellSize && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">Cell: {searchSettings.cellSize}km</span>}
-                                    {searchSettings.minPopDensity > 0 && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">Min Pop: {searchSettings.minPopDensity}</span>}
-                                    {searchSettings.pathOrder && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">Path: {searchSettings.pathOrder}</span>}
-                                    {searchSettings.gridMode && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">Grid: {searchSettings.gridMode}</span>}
-                                </div>
-                            )}
-                        </CollapsibleSection>
-                    </div>
-                </div>
-                <div className="flex-grow min-h-0 bg-gray-50 dark:bg-gray-900 border-t dark:border-gray-700">
-                    <GridSearchStreamProvider jobId={jobId} active={isLocked} initialCompetitors={competitors}>
-                        <LiveGridSearchResults
-                            jobId={jobId}
-                            excludedTypes={excludedTypes}
-                            dummyUpdateExcluded={dummyUpdateExcluded}
-                        />
-                    </GridSearchStreamProvider>
-                </div>
-            </div>
-        </div>
-    );
-}
+import { useState, useEffect } from 'react';
+import { Loader2, AlertCircle, Plus, Lock, MapPin } from 'lucide-react';
+import { fetchPlacesGridSearchById, retryPlacesGridSearchJob } from '../client-gridsearch';
+import { GridSearchResults } from './GridSearchResults';
+import { useNavigate } from 'react-router-dom';
+import { useRestoredSearch } from './RestoredSearchContext';
+import { GridSearchStreamProvider, useGridSearchStream } from './GridSearchStreamContext';
+import CollapsibleSection from '@/components/CollapsibleSection';
+import { T } from '@/i18n';
+
+function LiveGridSearchResults({ jobId, excludedTypes, dummyUpdateExcluded }: any) {
+    const { competitors, liveAreas, liveRadii, liveNodes, stats, streaming, statusMessage, liveScanner } = useGridSearchStream();
+
+    return (
+        <GridSearchResults
+            jobId={jobId}
+            competitors={competitors}
+            excludedTypes={excludedTypes}
+            updateExcludedTypes={dummyUpdateExcluded}
+            liveAreas={liveAreas}
+            liveRadii={liveRadii}
+            liveNodes={liveNodes}
+            liveScanner={liveScanner}
+            stats={stats}
+            streaming={streaming}
+            statusMessage={statusMessage}
+        />
+    );
+}
+
+export function JobViewer({ jobId }: { jobId: string }) {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [competitors, setCompetitors] = useState<any[]>([]);
+
+    const [jobData, setJobData] = useState<any>(null);
+    const { state: restoredState, isLocked, isComplete, loading: restoredLoading } = useRestoredSearch();
+    const guidedAreas = restoredState?.run?.request?.guided?.areas || [];
+    const searchSettings = restoredState?.run?.request?.guided?.settings || null;
+
+    const [retrying, setRetrying] = useState(false);
+
+    // For CompetitorsGridView props
+    const [excludedTypes, setExcludedTypes] = useState<string[]>([]);
+    useEffect(() => {
+        if (!jobId) return;
+
+        let active = true;
+        const load = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const data = await fetchPlacesGridSearchById(jobId);
+                if (!active) return;
+
+                // Handle nested wrapper if present (sometimes { data: { ... } } or just the object)
+                const payload = data?.data ? data.data : data;
+                setJobData(payload);
+
+                if (payload && payload.result && Array.isArray(payload.result.enrichResults)) {
+                    setCompetitors(payload.result.enrichResults);
+                } else if (Array.isArray(payload)) {
+                    setCompetitors(payload);
+                } else if (payload && Array.isArray(payload.enrichResults)) {
+                    setCompetitors(payload.enrichResults);
+                } else {
+                    setCompetitors([]);
+                }
+            } catch (err: any) {
+                if (active) setError(err.message || 'Failed to load data');
+                console.error('Failed to load job data:', err);
+            } finally {
+                if (active) setLoading(false);
+            }
+        };
+
+        load();
+
+        return () => { active = false; };
+    }, [jobId]);
+
+    const dummyUpdateExcluded = async (types: string[]) => setExcludedTypes(types);
+
+    const handleRetry = async () => {
+        try {
+            setRetrying(true);
+            await retryPlacesGridSearchJob(jobId);
+            window.location.reload();
+        } catch (e: any) {
+            console.error(e);
+            setError(e.message || 'Failed to retry job');
+        } finally {
+            setRetrying(false);
+        }
+    };
+
+    if (!jobId) return null;
+
+    if (loading) {
+        return (
+            <div className="flex flex-col items-center justify-center p-6 flex-1 w-full box-border min-h-0">
+                <Loader2 className="w-12 h-12 text-indigo-500 animate-spin mb-4" />
+                <p className="text-gray-500"><T>Loading search results...</T></p>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex flex-col items-center justify-center p-6 flex-1 w-full box-border max-w-4xl mx-auto min-h-0">
+                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full p-10 text-center space-y-6">
+                    <div className="w-20 h-20 bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <AlertCircle className="w-10 h-10" />
+                    </div>
+                    <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                        <T>Error</T>
+                    </h2>
+                    <div className="text-red-500 dark:text-red-400 max-w-lg mx-auto bg-red-50 dark:bg-red-900/50 p-4 rounded-xl font-mono text-sm break-all border border-red-200 dark:border-red-900">
+                        {error}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (jobData?.status === 'failed' || jobData?.run?.status === 'failed') {
+        const errorMsg = jobData.result?.error || jobData?.run?.result?.error || 'Unknown error during job execution. The backend worker may have crashed or timed out.';
+        return (
+            <div className="flex flex-col items-center justify-center p-6 flex-1 w-full box-border max-w-4xl mx-auto min-h-0">
+                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full p-10 text-center space-y-6">
+                    <div className="w-20 h-20 bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <AlertCircle className="w-10 h-10" />
+                    </div>
+                    <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                        <T>Job Failed</T>
+                    </h2>
+                    <div className="text-red-500 dark:text-red-400 max-w-lg mx-auto bg-red-50 dark:bg-red-900/50 p-4 rounded-xl font-mono text-sm break-all border border-red-200 dark:border-red-900">
+                        {errorMsg}
+                    </div>
+                    <div className="pt-4">
+                        <button
+                            onClick={handleRetry}
+                            disabled={retrying}
+                            className="px-6 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-xl transition-colors disabled:opacity-50 inline-flex items-center"
+                        >
+                            {retrying ? (
+                                <><Loader2 className="w-4 h-4 inline mr-2 animate-spin" /> <T>Retrying...</T></>
+                            ) : (
+                                <T>Retry Job</T>
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    const allResults = jobData?.result?.searchResult?.results || competitors;
+    const foundTypes = Array.from(new Set(allResults.flatMap((r: any) => r.types || []).filter(Boolean))).sort() as string[];
+    return (
+        <div className="flex flex-col p-6 flex-1 w-full box-border overflow-hidden min-h-0">
+            <div className="w-full flex-1 min-h-0 flex flex-col bg-white dark:bg-gray-800 rounded-2xl shadow-xl transition-all duration-300">
+                <div className="flex flex-col md:flex-row md:items-start justify-between p-6 pb-2 border-b dark:border-gray-700">
+                    <div className="w-full">
+                        <div className="flex justify-between items-center mb-2">
+                            <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100"><T>Search Results</T></h2>
+                            <button
+                                onClick={() => {
+                                    const params = new URLSearchParams(window.location.search);
+                                    params.delete('jobId');
+                                    navigate(`${window.location.pathname}?${params.toString()}`, { replace: true });
+                                }}
+                                className="flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm ml-4 shrink-0"
+                            >
+                                <Plus className="w-4 h-4 mr-2" />
+                                <T>New Search</T>
+                            </button>
+                        </div>
+
+                        <CollapsibleSection
+                            title={<T>Search Configuration & Metadata</T>}
+                            minimal
+                            initiallyOpen={false}
+                            storageKey={`gridSearchViewMetaCollapse`}
+                            className="mt-2"
+                        >
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2 text-sm text-gray-600 dark:text-gray-400 mt-2">
+                                <p><span className="font-medium"><T>Job ID:</T></span> <span className="text-gray-800 dark:text-gray-300 select-all">{jobId}</span></p>
+                                {jobData && (
+                                    <>
+                                        {jobData.request?.search?.types && (
+                                            <p><span className="font-medium"><T>Queries:</T></span> <span className="text-gray-800 dark:text-gray-300">{jobData.request.search.types.join(', ')}</span></p>
+                                        )}
+                                        {(jobData.query?.region || jobData.request?.enumerate?.region) && (
+                                            <p><span className="font-medium"><T>Region:</T></span> <span className="text-gray-800 dark:text-gray-300">{jobData.query?.region || jobData.request?.enumerate?.region}</span></p>
+                                        )}
+                                        {(jobData.query?.level || jobData.request?.enumerate?.level) && (
+                                            <p><span className="font-medium"><T>Level:</T></span> <span className="text-gray-800 dark:text-gray-300">{jobData.query?.level || jobData.request?.enumerate?.level}</span></p>
+                                        )}
+                                        {jobData.areas && (
+                                            <p><span className="font-medium"><T>Areas Scanned:</T></span> <span className="text-gray-800 dark:text-gray-300">{jobData.areas.length}</span></p>
+                                        )}
+                                        {jobData.generatedAt && (
+                                            <p><span className="font-medium"><T>Generated At:</T></span> <span className="text-gray-800 dark:text-gray-300">{new Date(jobData.generatedAt).toLocaleString()}</span></p>
+                                        )}
+                                        {foundTypes.length > 0 && (
+                                            <div className="col-span-full mt-1 flex flex-wrap items-center gap-x-2 gap-y-1.5">
+                                                <span className="font-medium mr-1 text-gray-800 dark:text-gray-300"><T>Found Types:</T></span>
+                                                {foundTypes.map((t: string) => (
+                                                    <span key={t} className="px-2 py-0.5 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800/50 rounded-md text-xs font-medium">
+                                                        {t}
+                                                    </span>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+                            </div>
+
+                            {/* Restored GADM Areas */}
+                            {guidedAreas.length > 0 && (
+                                <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+                                    <div className="flex items-center gap-2 mb-2">
+                                        <MapPin className="w-3.5 h-3.5 text-amber-500" />
+                                        <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                            <T>GADM Areas</T> ({guidedAreas.length})
+                                        </span>
+                                        {isLocked && (
+                                            <span className="inline-flex items-center gap-1 text-[10px] font-medium text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-1.5 py-0.5 rounded">
+                                                <Lock className="w-3 h-3" /> <T>Locked</T>
+                                            </span>
+                                        )}
+                                        {isComplete && (
+                                            <span className="text-[10px] font-medium text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-900/30 px-1.5 py-0.5 rounded">
+                                                <T>Complete</T>
+                                            </span>
+                                        )}
+                                    </div>
+                                    <div className="flex flex-wrap gap-1.5">
+                                        {guidedAreas.map((area: any) => (
+                                            <span
+                                                key={area.gid}
+                                                className="inline-flex items-center gap-1 text-xs bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800/50 rounded-md px-2 py-1"
+                                                title={area.gid}
+                                            >
+                                                <span className="w-1.5 h-1.5 rounded-full bg-yellow-500 flex-shrink-0" />
+                                                {area.name}
+                                                <span className="text-[10px] opacity-60">L{area.level}</span>
+                                            </span>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Search Settings Summary */}
+                            {searchSettings && (
+                                <div className="mt-3 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
+                                    {searchSettings.cellSize && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded"><T>Cell:</T> {searchSettings.cellSize}km</span>}
+                                    {searchSettings.minPopDensity > 0 && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded"><T>Min Pop:</T> {searchSettings.minPopDensity}</span>}
+                                    {searchSettings.pathOrder && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded"><T>Path:</T> {searchSettings.pathOrder}</span>}
+                                    {searchSettings.gridMode && <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded"><T>Grid:</T> {searchSettings.gridMode}</span>}
+                                </div>
+                            )}
+                        </CollapsibleSection>
+                    </div>
+                </div>
+                <div className="flex-grow min-h-0 bg-gray-50 dark:bg-gray-900 border-t dark:border-gray-700">
+                    <GridSearchStreamProvider jobId={jobId} active={isLocked} initialCompetitors={competitors}>
+                        <LiveGridSearchResults
+                            jobId={jobId}
+                            excludedTypes={excludedTypes}
+                            dummyUpdateExcluded={dummyUpdateExcluded}
+                        />
+                    </GridSearchStreamProvider>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/OngoingSearches.tsx b/packages/ui/src/modules/places/gridsearch/OngoingSearches.tsx
index 4f68b522..714d407d 100644
--- a/packages/ui/src/modules/places/gridsearch/OngoingSearches.tsx
+++ b/packages/ui/src/modules/places/gridsearch/OngoingSearches.tsx
@@ -1,85 +1,85 @@
-import React, { useEffect, useState } from 'react';
-import { fetchPlacesGridSearches, deletePlacesGridSearch, GridSearchSummary } from '../client-gridsearch';
-import { Loader2, XCircle, CheckCircle, ChevronRight, Trash2 } from 'lucide-react';
-
-export const OngoingSearches = ({ onSelectJob, selectedJobId, onSearchDeleted }: { onSelectJob?: (jobId: string) => void, selectedJobId?: string | null, onSearchDeleted?: (jobId: string) => void }) => {
-    const [pastSearches, setPastSearches] = useState<GridSearchSummary[]>([]);
-
-    const loadPast = async () => {
-        try {
-            const history = await fetchPlacesGridSearches();
-            setPastSearches(history);
-        } catch (err) {
-            console.error('Failed to load past searches', err);
-        }
-    };
-
-    useEffect(() => {
-        loadPast();
-        // Poll past searches frequently so live searches update in the list
-        const interval = setInterval(loadPast, 3000);
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <div className="w-full flex mt-4 flex-col">
-            {pastSearches.length > 0 && (
-                <div className="flex-1 overflow-y-auto">
-                    <h3 className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-2">Searches</h3>
-                    <div className="flex flex-col">
-                        {pastSearches.map(search => {
-                            const isSelected = selectedJobId === search.id;
-                            return (
-                                <div
-                                    key={search.id}
-                                    onClick={() => onSelectJob && onSelectJob(search.id)}
-                                    className={`flex items-center justify-between p-3 cursor-pointer border-b dark:border-gray-800 transition-colors ${isSelected ? 'bg-indigo-50 dark:bg-indigo-900/30 border-l-2 border-l-indigo-600' : 'hover:bg-gray-100 dark:hover:bg-gray-800 border-l-2 border-l-transparent'}`}
-                                >
-                                    <div className="flex items-center space-x-3 overflow-hidden flex-1">
-                                        {search.status === 'searching' || search.status === 'enriching' ? (
-                                            <Loader2 className="shrink-0 w-4 h-4 text-amber-500 animate-spin" />
-                                        ) : search.status === 'failed' ? (
-                                            <XCircle className="shrink-0 w-4 h-4 text-red-500" />
-                                        ) : (
-                                            <CheckCircle className={`shrink-0 w-4 h-4 ${isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-green-500'}`} />
-                                        )}
-                                        <div className="min-w-0 pr-2">
-                                            <h4 className={`font-medium text-sm truncate ${isSelected ? 'text-indigo-900 dark:text-indigo-300' : 'text-gray-900 dark:text-gray-100'}`} title={search.regionName}>
-                                                {search.regionName} <span className="text-xs font-normal opacity-70">({search.level})</span>
-                                            </h4>
-                                            <p className="text-xs text-gray-500 dark:text-gray-400 truncate" title={search.query}>
-                                                {search.query}
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div className="flex items-center shrink-0 space-x-1">
-                                        <button
-                                            onClick={async (e) => {
-                                                e.stopPropagation();
-                                                if (confirm('Are you sure you want to delete this search?')) {
-                                                    try {
-                                                        await deletePlacesGridSearch(search.id);
-                                                        setPastSearches(prev => prev.filter(s => s.id !== search.id));
-                                                        if (onSearchDeleted) onSearchDeleted(search.id);
-                                                    } catch (err) {
-                                                        console.error('Failed to delete search', err);
-                                                        alert('Failed to delete search.');
-                                                    }
-                                                }
-                                            }}
-                                            className="p-1.5 text-gray-400 hover:text-red-500 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-                                            title="Delete Search"
-                                        >
-                                            <Trash2 className="w-3.5 h-3.5" />
-                                        </button>
-                                        {isSelected && <ChevronRight className="w-4 h-4 text-indigo-500 ml-1" />}
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
+import React, { useEffect, useState } from 'react';
+import { fetchPlacesGridSearches, deletePlacesGridSearch, GridSearchSummary } from '../client-gridsearch';
+import { Loader2, XCircle, CheckCircle, ChevronRight, Trash2 } from 'lucide-react';
+
+export const OngoingSearches = ({ onSelectJob, selectedJobId, onSearchDeleted }: { onSelectJob?: (jobId: string) => void, selectedJobId?: string | null, onSearchDeleted?: (jobId: string) => void }) => {
+    const [pastSearches, setPastSearches] = useState<GridSearchSummary[]>([]);
+
+    const loadPast = async () => {
+        try {
+            const history = await fetchPlacesGridSearches();
+            setPastSearches(history);
+        } catch (err) {
+            console.error('Failed to load past searches', err);
+        }
+    };
+
+    useEffect(() => {
+        loadPast();
+        // Poll past searches frequently so live searches update in the list
+        const interval = setInterval(loadPast, 3000);
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className="w-full flex mt-4 flex-col">
+            {pastSearches.length > 0 && (
+                <div className="flex-1 overflow-y-auto">
+                    <h3 className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-2">Searches</h3>
+                    <div className="flex flex-col">
+                        {pastSearches.map(search => {
+                            const isSelected = selectedJobId === search.id;
+                            return (
+                                <div
+                                    key={search.id}
+                                    onClick={() => onSelectJob && onSelectJob(search.id)}
+                                    className={`flex items-center justify-between p-3 cursor-pointer border-b dark:border-gray-800 transition-colors ${isSelected ? 'bg-indigo-50 dark:bg-indigo-900/30 border-l-2 border-l-indigo-600' : 'hover:bg-gray-100 dark:hover:bg-gray-800 border-l-2 border-l-transparent'}`}
+                                >
+                                    <div className="flex items-center space-x-3 overflow-hidden flex-1">
+                                        {search.status === 'searching' || search.status === 'enriching' ? (
+                                            <Loader2 className="shrink-0 w-4 h-4 text-amber-500 animate-spin" />
+                                        ) : search.status === 'failed' ? (
+                                            <XCircle className="shrink-0 w-4 h-4 text-red-500" />
+                                        ) : (
+                                            <CheckCircle className={`shrink-0 w-4 h-4 ${isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-green-500'}`} />
+                                        )}
+                                        <div className="min-w-0 pr-2">
+                                            <h4 className={`font-medium text-sm truncate ${isSelected ? 'text-indigo-900 dark:text-indigo-300' : 'text-gray-900 dark:text-gray-100'}`} title={search.regionName}>
+                                                {search.regionName} <span className="text-xs font-normal opacity-70">({search.level})</span>
+                                            </h4>
+                                            <p className="text-xs text-gray-500 dark:text-gray-400 truncate" title={search.query}>
+                                                {search.query}
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center shrink-0 space-x-1">
+                                        <button
+                                            onClick={async (e) => {
+                                                e.stopPropagation();
+                                                if (confirm('Are you sure you want to delete this search?')) {
+                                                    try {
+                                                        await deletePlacesGridSearch(search.id);
+                                                        setPastSearches(prev => prev.filter(s => s.id !== search.id));
+                                                        if (onSearchDeleted) onSearchDeleted(search.id);
+                                                    } catch (err) {
+                                                        console.error('Failed to delete search', err);
+                                                        alert('Failed to delete search.');
+                                                    }
+                                                }
+                                            }}
+                                            className="p-1.5 text-gray-400 hover:text-red-500 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                                            title="Delete Search"
+                                        >
+                                            <Trash2 className="w-3.5 h-3.5" />
+                                        </button>
+                                        {isSelected && <ChevronRight className="w-4 h-4 text-indigo-500 ml-1" />}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/packages/ui/src/modules/places/gridsearch/RestoredSearchContext.tsx b/packages/ui/src/modules/places/gridsearch/RestoredSearchContext.tsx
index 10ac43bc..1402b6f3 100644
--- a/packages/ui/src/modules/places/gridsearch/RestoredSearchContext.tsx
+++ b/packages/ui/src/modules/places/gridsearch/RestoredSearchContext.tsx
@@ -1,78 +1,78 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
-import { fetchPlacesGridSearchRunState, RestoredRunState } from '../client-gridsearch';
-
-interface RestoredSearchContextValue {
-    /** The loaded run state, null until fetched */
-    state: RestoredRunState | null;
-    /** True while fetching */
-    loading: boolean;
-    /** Error message if fetch failed */
-    error: string | null;
-    /** Whether the run is still active (searching/enriching) — settings should be locked */
-    isLocked: boolean;
-    /** Whether the run completed */
-    isComplete: boolean;
-    /** Refetch the state (e.g. after SSE events update data) */
-    refetch: () => void;
-}
-
-const RestoredSearchContext = createContext<RestoredSearchContextValue>({
-    state: null,
-    loading: false,
-    error: null,
-    isLocked: false,
-    isComplete: false,
-    refetch: () => {},
-});
-
-export const useRestoredSearch = () => useContext(RestoredSearchContext);
-
-export function RestoredSearchProvider({
-    jobId,
-    children,
-}: {
-    jobId: string | null;
-    children: React.ReactNode;
-}) {
-    const [state, setState] = useState<RestoredRunState | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const load = useCallback(async (id: string) => {
-        setLoading(true);
-        setError(null);
-        try {
-            const data = await fetchPlacesGridSearchRunState(id);
-            setState(data);
-        } catch (err: any) {
-            setError(err.message || 'Failed to load run state');
-            setState(null);
-        }
-        setLoading(false);
-    }, []);
-
-    useEffect(() => {
-        if (!jobId) {
-            setState(null);
-            setError(null);
-            return;
-        }
-        load(jobId);
-    }, [jobId, load]);
-
-    const refetch = useCallback(() => {
-        if (jobId) load(jobId);
-    }, [jobId, load]);
-
-    const status = state?.run?.status || '';
-    const isLocked = status === 'searching' || status === 'enriching';
-    const isComplete = status === 'complete';
-
-    return (
-        <RestoredSearchContext.Provider
-            value={{ state, loading, error, isLocked, isComplete, refetch }}
-        >
-            {children}
-        </RestoredSearchContext.Provider>
-    );
-}
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { fetchPlacesGridSearchRunState, RestoredRunState } from '../client-gridsearch';
+
+interface RestoredSearchContextValue {
+    /** The loaded run state, null until fetched */
+    state: RestoredRunState | null;
+    /** True while fetching */
+    loading: boolean;
+    /** Error message if fetch failed */
+    error: string | null;
+    /** Whether the run is still active (searching/enriching) — settings should be locked */
+    isLocked: boolean;
+    /** Whether the run completed */
+    isComplete: boolean;
+    /** Refetch the state (e.g. after SSE events update data) */
+    refetch: () => void;
+}
+
+const RestoredSearchContext = createContext<RestoredSearchContextValue>({
+    state: null,
+    loading: false,
+    error: null,
+    isLocked: false,
+    isComplete: false,
+    refetch: () => {},
+});
+
+export const useRestoredSearch = () => useContext(RestoredSearchContext);
+
+export function RestoredSearchProvider({
+    jobId,
+    children,
+}: {
+    jobId: string | null;
+    children: React.ReactNode;
+}) {
+    const [state, setState] = useState<RestoredRunState | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const load = useCallback(async (id: string) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await fetchPlacesGridSearchRunState(id);
+            setState(data);
+        } catch (err: any) {
+            setError(err.message || 'Failed to load run state');
+            setState(null);
+        }
+        setLoading(false);
+    }, []);
+
+    useEffect(() => {
+        if (!jobId) {
+            setState(null);
+            setError(null);
+            return;
+        }
+        load(jobId);
+    }, [jobId, load]);
+
+    const refetch = useCallback(() => {
+        if (jobId) load(jobId);
+    }, [jobId, load]);
+
+    const status = state?.run?.status || '';
+    const isLocked = status === 'searching' || status === 'enriching';
+    const isComplete = status === 'complete';
+
+    return (
+        <RestoredSearchContext.Provider
+            value={{ state, loading, error, isLocked, isComplete, refetch }}
+        >
+            {children}
+        </RestoredSearchContext.Provider>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/simulator/GridSearchSimulator.tsx b/packages/ui/src/modules/places/gridsearch/simulator/GridSearchSimulator.tsx
index ffb2139a..5ff9df30 100644
--- a/packages/ui/src/modules/places/gridsearch/simulator/GridSearchSimulator.tsx
+++ b/packages/ui/src/modules/places/gridsearch/simulator/GridSearchSimulator.tsx
@@ -1,105 +1,105 @@
-import React, { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Loader2 } from 'lucide-react';
-import { useGridSimulatorState } from './hooks/useGridSimulatorState';
-import { SimulatorControls } from './components/SimulatorControls';
-import { SimulatorStats } from './components/SimulatorStats';
-import { SimulatorSettingsPanel } from './components/SimulatorSettingsPanel';
-import { GridSearchSimulatorProps } from './types';
-import { T, translate } from '@/i18n';
-
-export function GridSearchSimulator(props: GridSearchSimulatorProps) {
-    const state = useGridSimulatorState(props);
-    const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
-
-    useEffect(() => {
-        const el = document.getElementById('sim-controls-portal');
-        if (el) { setPortalTarget(el); return; }
-        // Retry until target is available
-        const interval = setInterval(() => {
-            const el = document.getElementById('sim-controls-portal');
-            if (el) { setPortalTarget(el); clearInterval(interval); }
-        }, 100);
-        const timeout = setTimeout(() => clearInterval(interval), 3000);
-        return () => { clearInterval(interval); clearTimeout(timeout); };
-    }, []);
-
-    const hasRegions = props.pickerRegions && props.pickerRegions.length > 0;
-
-    const handleCopyWaypoints = () => {
-        const hops = state.getFinalHopList();
-        navigator.clipboard.writeText(JSON.stringify(hops, null, 2))
-            .then(() => alert(translate("Waypoints copied to clipboard!")))
-            .catch(err => console.error(translate("Failed to copy"), err));
-    };
-
-    const handleExportWaypoints = () => {
-        const hops = state.getFinalHopList();
-        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(hops, null, 2));
-        const anchor = document.createElement('a');
-        anchor.href = dataStr;
-        anchor.download = "grid-search-waypoints.json";
-        anchor.click();
-    };
-
-    return (
-        <div className="relative overflow-hidden pt-2 flex flex-col">
-            {portalTarget && createPortal(
-                <SimulatorControls
-                    gridCells={state.gridCells}
-                    progressIndex={state.progressIndex}
-                    isPlaying={state.isPlaying}
-                    speed={state.speed}
-                    isCalculating={state.isCalculating}
-                    pickerPolygons={props.pickerPolygons}
-                    skippedCellsRef={state.skippedCellsRef}
-                    setIsPlaying={state.setIsPlaying}
-                    setProgressIndex={state.setProgressIndex}
-                    setSpeed={state.setSpeed}
-                    computeGrid={state.computeGrid}
-                    handleClear={state.handleClear}
-                    canDebug={props.canDebug}
-                    canPlaybackSpeed={props.canPlaybackSpeed}
-                />,
-                portalTarget
-            )}
-            {hasRegions && (
-                <>
-                    <div className="space-y-4 pb-4 mb-4 border-b dark:border-gray-700">
-                        <SimulatorStats
-                            progressIndex={state.progressIndex}
-                            totalCells={state.gridCells.length}
-                            validCount={state.validCount}
-                            skippedCount={state.skippedCount}
-                            processedCount={state.processedCount}
-                            handleCopyWaypoints={handleCopyWaypoints}
-                            handleExportWaypoints={handleExportWaypoints}
-                        />
-                    </div>
-
-                    <SimulatorSettingsPanel {...state} />
-
-                    {state.isCalculating && (
-                        <div className="absolute top-0 left-0 right-0 bottom-0 bg-white/50 dark:bg-gray-900/50 flex flex-col items-center justify-center z-10 backdrop-blur-[1px]">
-                            <div className="bg-white dark:bg-gray-800 shadow-lg border dark:border-gray-700 rounded-md p-4 flex flex-col items-center text-sm font-medium text-blue-600 dark:text-blue-400 max-w-xs text-center">
-                                <div className="flex items-center mb-3">
-                                    <Loader2 className="w-5 h-5 animate-spin mr-2" />
-                                    <span>
-                                        <T>Calculating...</T>
-                                        {state.calcStats.total > 0 && <span className="block text-xs font-normal text-gray-500 mt-1">{state.calcStats.current} / {state.calcStats.total} <T>cells</T></span>}
-                                    </span>
-                                </div>
-                                <button
-                                    onClick={() => { state.stopRequestedRef.current = true; }}
-                                    className="w-full bg-red-600 hover:bg-red-700 text-white py-1.5 px-3 rounded transition-colors text-xs font-semibold"
-                                >
-                                    <T>Stop</T>
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                </>
-            )}
-        </div>
-    );
-}
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Loader2 } from 'lucide-react';
+import { useGridSimulatorState } from './hooks/useGridSimulatorState';
+import { SimulatorControls } from './components/SimulatorControls';
+import { SimulatorStats } from './components/SimulatorStats';
+import { SimulatorSettingsPanel } from './components/SimulatorSettingsPanel';
+import { GridSearchSimulatorProps } from './types';
+import { T, translate } from '@/i18n';
+
+export function GridSearchSimulator(props: GridSearchSimulatorProps) {
+    const state = useGridSimulatorState(props);
+    const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        const el = document.getElementById('sim-controls-portal');
+        if (el) { setPortalTarget(el); return; }
+        // Retry until target is available
+        const interval = setInterval(() => {
+            const el = document.getElementById('sim-controls-portal');
+            if (el) { setPortalTarget(el); clearInterval(interval); }
+        }, 100);
+        const timeout = setTimeout(() => clearInterval(interval), 3000);
+        return () => { clearInterval(interval); clearTimeout(timeout); };
+    }, []);
+
+    const hasRegions = props.pickerRegions && props.pickerRegions.length > 0;
+
+    const handleCopyWaypoints = () => {
+        const hops = state.getFinalHopList();
+        navigator.clipboard.writeText(JSON.stringify(hops, null, 2))
+            .then(() => alert(translate("Waypoints copied to clipboard!")))
+            .catch(err => console.error(translate("Failed to copy"), err));
+    };
+
+    const handleExportWaypoints = () => {
+        const hops = state.getFinalHopList();
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(hops, null, 2));
+        const anchor = document.createElement('a');
+        anchor.href = dataStr;
+        anchor.download = "grid-search-waypoints.json";
+        anchor.click();
+    };
+
+    return (
+        <div className="relative overflow-hidden pt-2 flex flex-col">
+            {portalTarget && createPortal(
+                <SimulatorControls
+                    gridCells={state.gridCells}
+                    progressIndex={state.progressIndex}
+                    isPlaying={state.isPlaying}
+                    speed={state.speed}
+                    isCalculating={state.isCalculating}
+                    pickerPolygons={props.pickerPolygons}
+                    skippedCellsRef={state.skippedCellsRef}
+                    setIsPlaying={state.setIsPlaying}
+                    setProgressIndex={state.setProgressIndex}
+                    setSpeed={state.setSpeed}
+                    computeGrid={state.computeGrid}
+                    handleClear={state.handleClear}
+                    canDebug={props.canDebug}
+                    canPlaybackSpeed={props.canPlaybackSpeed}
+                />,
+                portalTarget
+            )}
+            {hasRegions && (
+                <>
+                    <div className="space-y-4 pb-4 mb-4 border-b dark:border-gray-700">
+                        <SimulatorStats
+                            progressIndex={state.progressIndex}
+                            totalCells={state.gridCells.length}
+                            validCount={state.validCount}
+                            skippedCount={state.skippedCount}
+                            processedCount={state.processedCount}
+                            handleCopyWaypoints={handleCopyWaypoints}
+                            handleExportWaypoints={handleExportWaypoints}
+                        />
+                    </div>
+
+                    <SimulatorSettingsPanel {...state} />
+
+                    {state.isCalculating && (
+                        <div className="absolute top-0 left-0 right-0 bottom-0 bg-white/50 dark:bg-gray-900/50 flex flex-col items-center justify-center z-10 backdrop-blur-[1px]">
+                            <div className="bg-white dark:bg-gray-800 shadow-lg border dark:border-gray-700 rounded-md p-4 flex flex-col items-center text-sm font-medium text-blue-600 dark:text-blue-400 max-w-xs text-center">
+                                <div className="flex items-center mb-3">
+                                    <Loader2 className="w-5 h-5 animate-spin mr-2" />
+                                    <span>
+                                        <T>Calculating...</T>
+                                        {state.calcStats.total > 0 && <span className="block text-xs font-normal text-gray-500 mt-1">{state.calcStats.current} / {state.calcStats.total} <T>cells</T></span>}
+                                    </span>
+                                </div>
+                                <button
+                                    onClick={() => { state.stopRequestedRef.current = true; }}
+                                    className="w-full bg-red-600 hover:bg-red-700 text-white py-1.5 px-3 rounded transition-colors text-xs font-semibold"
+                                >
+                                    <T>Stop</T>
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/simulator/components/DeferredInputs.tsx b/packages/ui/src/modules/places/gridsearch/simulator/components/DeferredInputs.tsx
index a09c4917..714cc976 100644
--- a/packages/ui/src/modules/places/gridsearch/simulator/components/DeferredInputs.tsx
+++ b/packages/ui/src/modules/places/gridsearch/simulator/components/DeferredInputs.tsx
@@ -1,48 +1,48 @@
-import React, { useState, useEffect } from 'react';
-
-export function DeferredNumberInput({ value, onChange, ...props }: any) {
-    const [local, setLocal] = useState(value);
-    useEffect(() => { setLocal(value); }, [value]);
-
-    const handleCommit = () => {
-        const num = Number(local);
-        if (!isNaN(num) && num !== value) onChange(num);
-    };
-
-    return (
-        <input
-            type="number"
-            {...props}
-            value={local}
-            onChange={(e) => setLocal(e.target.value)}
-            onBlur={handleCommit}
-            onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                    e.currentTarget.blur();
-                }
-            }}
-        />
-    )
-}
-
-export function DeferredRangeSlider({ value, onChange, ...props }: any) {
-    const [local, setLocal] = useState(value);
-    useEffect(() => { setLocal(value); }, [value]);
-
-    const handleCommit = () => {
-        const num = Number(local);
-        if (!isNaN(num) && num !== value) onChange(num);
-    };
-
-    return (
-        <input
-            type="range"
-            {...props}
-            value={local}
-            onChange={(e) => setLocal(Number(e.target.value))}
-            onMouseUp={handleCommit}
-            onTouchEnd={handleCommit}
-            onBlur={handleCommit}
-        />
-    )
-}
+import React, { useState, useEffect } from 'react';
+
+export function DeferredNumberInput({ value, onChange, ...props }: any) {
+    const [local, setLocal] = useState(value);
+    useEffect(() => { setLocal(value); }, [value]);
+
+    const handleCommit = () => {
+        const num = Number(local);
+        if (!isNaN(num) && num !== value) onChange(num);
+    };
+
+    return (
+        <input
+            type="number"
+            {...props}
+            value={local}
+            onChange={(e) => setLocal(e.target.value)}
+            onBlur={handleCommit}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                    e.currentTarget.blur();
+                }
+            }}
+        />
+    )
+}
+
+export function DeferredRangeSlider({ value, onChange, ...props }: any) {
+    const [local, setLocal] = useState(value);
+    useEffect(() => { setLocal(value); }, [value]);
+
+    const handleCommit = () => {
+        const num = Number(local);
+        if (!isNaN(num) && num !== value) onChange(num);
+    };
+
+    return (
+        <input
+            type="range"
+            {...props}
+            value={local}
+            onChange={(e) => setLocal(Number(e.target.value))}
+            onMouseUp={handleCommit}
+            onTouchEnd={handleCommit}
+            onBlur={handleCommit}
+        />
+    )
+}
diff --git a/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorControls.tsx b/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorControls.tsx
index f3518cef..bd69fe0b 100644
--- a/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorControls.tsx
+++ b/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorControls.tsx
@@ -1,94 +1,94 @@
-import React from 'react';
-import { Play, Pause, Square, FastForward, Eye, Bug } from 'lucide-react';
-import { T, translate } from '@/i18n';
-
-interface SimulatorControlsProps {
-    gridCells: any[];
-    progressIndex: number;
-    isPlaying: boolean;
-    speed: number;
-    isCalculating: boolean;
-    pickerPolygons: any[];
-    skippedCellsRef: React.MutableRefObject<any[]>;
-    setIsPlaying: (p: boolean) => void;
-    setProgressIndex: (i: number | ((prev: number) => number)) => void;
-    setSpeed: (s: number) => void;
-    computeGrid: (autoplay: boolean | 'preview') => void;
-    handleClear: () => void;
-    canDebug?: boolean;
-    canPlaybackSpeed?: boolean;
-}
-
-export function SimulatorControls({
-    gridCells, progressIndex, isPlaying, speed, isCalculating, pickerPolygons, skippedCellsRef,
-    setIsPlaying, setProgressIndex, setSpeed, computeGrid, handleClear,
-    canDebug = true, canPlaybackSpeed = true
-}: SimulatorControlsProps) {
-    return (
-        <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex flex-wrap gap-1">
-                <button
-                    onClick={() => {
-                        if (gridCells.length === 0) {
-                            computeGrid(true);
-                        } else {
-                            if (!isPlaying && progressIndex >= gridCells.length) {
-                                setProgressIndex(0);
-                            }
-                            setIsPlaying(!isPlaying);
-                        }
-                    }}
-                    disabled={isCalculating || !pickerPolygons || pickerPolygons.length === 0}
-                    className={`p-2 rounded ${isPlaying ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700 hover:bg-green-200'} disabled:opacity-50 disabled:cursor-not-allowed`}
-                >
-                    {isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
-                </button>
-                <button
-                    onClick={handleClear}
-                    disabled={isCalculating}
-                    className="p-2 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                    title={translate("Clear Grid")}
-                >
-                    <Square className="w-4 h-4" />
-                </button>
-
-                {canDebug && (
-                    <button
-                        onClick={() => {
-                            console.log('--- GRID SEARCH DEBUG DUMP ---');
-                            console.log(`Valid Cells: ${gridCells.length}`, gridCells.slice(0, 5).map(c => c.properties));
-
-                            const skipped = skippedCellsRef.current;
-                            console.log(`Skipped Cells: ${skipped.length}`);
-                            const skippedByReason = skipped.reduce((acc: any, cell: any) => {
-                                const r = cell.properties?._reason || cell.properties?.sim_skip_reason || 'Unknown';
-                                acc[r] = (acc[r] || 0) + 1;
-                                return acc;
-                            }, {} as Record<string, number>);
-                            console.log('Skipped Breakdown:', skippedByReason);
-                            console.log('Skipped Sample (first 5):', skipped.slice(0, 5).map((c: any) => c.properties));
-                            console.log('------------------------------');
-                        }}
-                        disabled={isCalculating}
-                        className="p-2 rounded bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:hover:bg-purple-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
-                        title={translate("Print Debug Info to Console")}
-                    >
-                        <Bug className="w-4 h-4" />
-                        <span className="hidden sm:inline text-xs font-semibold pr-1"><T>Debug</T></span>
-                    </button>
-                )}
-            </div>
-
-            {canPlaybackSpeed && (
-                <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded p-1 text-xs">
-                    <FastForward className="w-3 h-3 text-gray-500 mr-1" />
-                    {[0.5, 1, 5, 10, 50].map(s => (
-                        <button key={s} onClick={() => setSpeed(s)} className={`px-2 py-1 rounded ${speed === s ? 'bg-white dark:bg-gray-600 shadow-sm font-bold' : ''}`}>
-                            {s}x
-                        </button>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-}
+import React from 'react';
+import { Play, Pause, Square, FastForward, Eye, Bug } from 'lucide-react';
+import { T, translate } from '@/i18n';
+
+interface SimulatorControlsProps {
+    gridCells: any[];
+    progressIndex: number;
+    isPlaying: boolean;
+    speed: number;
+    isCalculating: boolean;
+    pickerPolygons: any[];
+    skippedCellsRef: React.MutableRefObject<any[]>;
+    setIsPlaying: (p: boolean) => void;
+    setProgressIndex: (i: number | ((prev: number) => number)) => void;
+    setSpeed: (s: number) => void;
+    computeGrid: (autoplay: boolean | 'preview') => void;
+    handleClear: () => void;
+    canDebug?: boolean;
+    canPlaybackSpeed?: boolean;
+}
+
+export function SimulatorControls({
+    gridCells, progressIndex, isPlaying, speed, isCalculating, pickerPolygons, skippedCellsRef,
+    setIsPlaying, setProgressIndex, setSpeed, computeGrid, handleClear,
+    canDebug = true, canPlaybackSpeed = true
+}: SimulatorControlsProps) {
+    return (
+        <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex flex-wrap gap-1">
+                <button
+                    onClick={() => {
+                        if (gridCells.length === 0) {
+                            computeGrid(true);
+                        } else {
+                            if (!isPlaying && progressIndex >= gridCells.length) {
+                                setProgressIndex(0);
+                            }
+                            setIsPlaying(!isPlaying);
+                        }
+                    }}
+                    disabled={isCalculating || !pickerPolygons || pickerPolygons.length === 0}
+                    className={`p-2 rounded ${isPlaying ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700 hover:bg-green-200'} disabled:opacity-50 disabled:cursor-not-allowed`}
+                >
+                    {isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+                </button>
+                <button
+                    onClick={handleClear}
+                    disabled={isCalculating}
+                    className="p-2 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                    title={translate("Clear Grid")}
+                >
+                    <Square className="w-4 h-4" />
+                </button>
+
+                {canDebug && (
+                    <button
+                        onClick={() => {
+                            console.log('--- GRID SEARCH DEBUG DUMP ---');
+                            console.log(`Valid Cells: ${gridCells.length}`, gridCells.slice(0, 5).map(c => c.properties));
+
+                            const skipped = skippedCellsRef.current;
+                            console.log(`Skipped Cells: ${skipped.length}`);
+                            const skippedByReason = skipped.reduce((acc: any, cell: any) => {
+                                const r = cell.properties?._reason || cell.properties?.sim_skip_reason || 'Unknown';
+                                acc[r] = (acc[r] || 0) + 1;
+                                return acc;
+                            }, {} as Record<string, number>);
+                            console.log('Skipped Breakdown:', skippedByReason);
+                            console.log('Skipped Sample (first 5):', skipped.slice(0, 5).map((c: any) => c.properties));
+                            console.log('------------------------------');
+                        }}
+                        disabled={isCalculating}
+                        className="p-2 rounded bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:hover:bg-purple-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+                        title={translate("Print Debug Info to Console")}
+                    >
+                        <Bug className="w-4 h-4" />
+                        <span className="hidden sm:inline text-xs font-semibold pr-1"><T>Debug</T></span>
+                    </button>
+                )}
+            </div>
+
+            {canPlaybackSpeed && (
+                <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded p-1 text-xs">
+                    <FastForward className="w-3 h-3 text-gray-500 mr-1" />
+                    {[0.5, 1, 5, 10, 50].map(s => (
+                        <button key={s} onClick={() => setSpeed(s)} className={`px-2 py-1 rounded ${speed === s ? 'bg-white dark:bg-gray-600 shadow-sm font-bold' : ''}`}>
+                            {s}x
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorSettingsPanel.tsx b/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorSettingsPanel.tsx
index 3803ddd3..6725d2de 100644
--- a/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorSettingsPanel.tsx
+++ b/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorSettingsPanel.tsx
@@ -1,365 +1,365 @@
-import React, { useRef, useState } from 'react';
-import { Copy, Download, Upload, Settings2, Sparkles } from 'lucide-react';
-import { DeferredNumberInput, DeferredRangeSlider } from './DeferredInputs';
-import { GridSimulatorSettings } from '../types';
-import { T, translate } from '@/i18n';
-import { Slider } from '@/components/ui/slider';
-
-interface SimulatorSettingsPanelProps {
-    // Current State
-    settings: GridSimulatorSettings;
-    ghsBounds: { minPop: number; maxPop: number; minBuilt: number; maxBuilt: number; };
-
-    // Setters
-
-    // Actions
-    getCurrentSettings: () => GridSimulatorSettings;
-    applySettings: (settings: Partial<GridSimulatorSettings>) => void;
-}
-
-export function SimulatorSettingsPanel(props: SimulatorSettingsPanelProps) {
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const [isAdvanced, setIsAdvanced] = useState(() => {
-        return !(
-            props.settings.gridMode === 'centers' &&
-            props.settings.pathOrder === 'shortest' &&
-            props.settings.bypassFilters === true &&
-            props.settings.cellSize === 10
-        );
-    });
-
-    const handleModeChange = (advanced: boolean) => {
-        setIsAdvanced(advanced);
-        if (!advanced) {
-            props.applySettings({
-                gridMode: 'centers',
-                pathOrder: 'shortest',
-                bypassFilters: true,
-                cellSize: 5
-            });
-        }
-    };
-
-    const handleCopySettings = () => {
-        navigator.clipboard.writeText(JSON.stringify(props.getCurrentSettings(), null, 2))
-            .then(() => alert(translate("Settings copied to clipboard!")))
-            .catch(err => console.error(translate("Failed to copy"), err));
-    };
-
-    const handleExportSettings = () => {
-        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(props.getCurrentSettings(), null, 2));
-        const anchor = document.createElement('a');
-        anchor.href = dataStr;
-        anchor.download = "grid-simulator-settings.json";
-        anchor.click();
-    };
-
-    const handleImportSettings = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        const reader = new FileReader();
-        reader.onload = (evt) => {
-            try {
-                const json = JSON.parse(evt.target?.result as string);
-                props.applySettings(json);
-            } catch (err) {
-                alert(translate("Invalid JSON file"));
-                console.error(err);
-            }
-        };
-        reader.readAsText(file);
-
-        if (fileInputRef.current) {
-            fileInputRef.current.value = '';
-        }
-    };
-
-    return (
-        <div className="space-y-3">
-            <div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800/50 p-2 rounded border border-gray-100 dark:border-gray-700/50 mb-3">
-                <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                    <T>Settings</T>
-                </h4>
-                <div className="flex bg-gray-200 dark:bg-gray-700 p-0.5 rounded-md">
-                    <button
-                        onClick={() => handleModeChange(false)}
-                        className={`flex items-center gap-1.5 px-3 py-1 text-[10px] font-medium rounded-sm transition-colors ${!isAdvanced ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
-                    >
-                        <Sparkles className="w-3 h-3" />
-                        <T>Simple</T>
-                    </button>
-                    <button
-                        onClick={() => handleModeChange(true)}
-                        className={`flex items-center gap-1.5 px-3 py-1 text-[10px] font-medium rounded-sm transition-colors ${isAdvanced ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
-                    >
-                        <Settings2 className="w-3 h-3" />
-                        <T>Advanced</T>
-                    </button>
-                </div>
-                <div className="flex gap-2">
-                    <button onClick={handleCopySettings} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title={translate("Copy settings to clipboard")}>
-                        <Copy className="w-4 h-4" />
-                    </button>
-                    <button onClick={handleExportSettings} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title={translate("Download settings JSON")}>
-                        <Download className="w-4 h-4" />
-                    </button>
-                    <button onClick={() => fileInputRef.current?.click()} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title={translate("Import settings JSON")}>
-                        <Upload className="w-4 h-4" />
-                    </button>
-                    <input type="file" ref={fileInputRef} className="hidden" accept="application/json" onChange={handleImportSettings} />
-                </div>
-            </div>
-
-            <div className="flex flex-col gap-3 mb-3">
-                {isAdvanced && (
-                    <div className="bg-white dark:bg-gray-800 p-2 border dark:border-gray-700 rounded-md">
-                        <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-2"><T>Grid Simulation Mode</T></label>
-                        <div className="flex gap-2">
-                            <button
-                                onClick={() => props.applySettings({ gridMode: 'hex' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'hex' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Hex Geometric Grid</T>
-                            </button>
-                            <button
-                                onClick={() => props.applySettings({ gridMode: 'square' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'square' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Square Geometric Grid</T>
-                            </button>
-                            <button
-                                onClick={() => props.applySettings({ gridMode: 'admin' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'admin' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Native GADM Regions</T>
-                            </button>
-                            <button
-                                onClick={() => props.applySettings({ gridMode: 'centers' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'centers' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>GHS Centers</T>
-                            </button>
-                        </div>
-                    </div>
-                )}
-
-                {isAdvanced && (
-                    <div className="bg-white dark:bg-gray-800 p-2 border dark:border-gray-700 rounded-md">
-                        <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-2"><T>Scan Trajectory</T></label>
-                        <div className="flex gap-2 mb-2">
-                            <button
-                                onClick={() => props.applySettings({ pathOrder: 'zigzag' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'zigzag' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Zig-Zag</T>
-                            </button>
-                            <button
-                                onClick={() => props.applySettings({ pathOrder: 'snake' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'snake' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Snake</T>
-                            </button>
-                            <button
-                                onClick={() => props.applySettings({ pathOrder: 'spiral-out' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'spiral-out' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Spiral Out</T>
-                            </button>
-                            <button
-                                onClick={() => props.applySettings({ pathOrder: 'spiral-in' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'spiral-in' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Spiral In</T>
-                            </button>
-                            <button
-                                onClick={() => props.applySettings({ pathOrder: 'shortest' })}
-                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'shortest' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
-                            >
-                                <T>Shortest</T>
-                            </button>
-                        </div>
-
-                        <label className="flex items-center text-xs text-gray-700 dark:text-gray-300 mt-2 cursor-pointer">
-                            <input
-                                type="checkbox"
-                                checked={props.settings.groupByRegion}
-                                onChange={e => props.applySettings({ groupByRegion: e.target.checked })}
-                                className="mr-2"
-                            />
-                            <T>Constrain process sequentially per boundary</T>
-                        </label>
-                    </div>
-                )}
-
-                {isAdvanced && (
-                    <div className="grid grid-cols-2 gap-4 mt-3 pt-3 border-t dark:border-gray-700">
-                        <div className={props.settings.enableElevation ? '' : 'opacity-40'}>
-                            <label className="flex items-center text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
-                                <input type="checkbox" checked={props.settings.enableElevation} onChange={(e) => props.applySettings({ enableElevation: e.target.checked })} className="mr-2" />
-                                <T>Max Elevation (m)</T>
-                            </label>
-                            <div className={props.settings.enableElevation ? '' : 'pointer-events-none select-none'}>
-                                <DeferredNumberInput
-                                    className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
-                                    value={props.settings.maxElevation}
-                                    onChange={(num: number) => props.applySettings({ maxElevation: num })}
-                                />
-                                <span className="text-[10px] text-gray-500"><T>Drop &gt;</T> {props.settings.maxElevation}m</span>
-                            </div>
-                        </div>
-                        <div className={props.settings.enableDensity ? '' : 'opacity-40'}>
-                            <label className="flex items-center text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
-                                <input type="checkbox" checked={props.settings.enableDensity} onChange={(e) => props.applySettings({ enableDensity: e.target.checked })} className="mr-2" />
-                                <T>Min Density (p/km²)</T>
-                            </label>
-                            <div className={props.settings.enableDensity ? '' : 'pointer-events-none select-none'}>
-                                <DeferredNumberInput
-                                    className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
-                                    value={props.settings.minDensity}
-                                    onChange={(num: number) => props.applySettings({ minDensity: num })}
-                                />
-                                <span className="text-[10px] text-gray-500"><T>Drop &lt;</T> {props.settings.minDensity}</span>
-                            </div>
-                        </div>
-
-                        <div className="col-span-2 flex flex-col border-b pb-2 mb-2 mt-2 dark:border-gray-700 gap-2">
-                            <div>
-                                <h3 className="text-xs font-bold text-gray-800 dark:text-gray-200"><T>GHS Data Thresholds</T></h3>
-                                <p className="text-[10px] text-gray-500"><T>Logic when filters are active.</T></p>
-                            </div>
-                            <div className="flex flex-col gap-3 items-start mt-2">
-                                <label className="flex items-center text-[10px] text-gray-700 dark:text-gray-300 cursor-pointer" title={translate("If enabled, it ignores ALL density, elevation, geometry overlap, and custom filters. Will push all raw items")}>
-                                    <input type="checkbox" checked={props.settings.bypassFilters} onChange={e => props.applySettings({ bypassFilters: e.target.checked })} className="mr-1" />
-                                    <T>Bypass All Filters</T>
-                                </label>
-                                <label className="flex items-center text-[10px] text-gray-700 dark:text-gray-300 cursor-pointer" title={translate("If a region is physically missing GHS raster data, allow it to pass instead of auto-failing")}>
-                                    <input type="checkbox" checked={props.settings.allowMissingGhs} onChange={e => props.applySettings({ allowMissingGhs: e.target.checked })} className="mr-1" />
-                                    <T>Allow Missing Data Gaps</T>
-                                </label>
-                                <div className="flex items-center gap-2 cursor-pointer" onClick={() => props.applySettings({ ghsFilterMode: props.settings.ghsFilterMode === 'AND' ? 'OR' : 'AND' })}>
-                                    <span className={`text-[10px] font-semibold ${props.settings.ghsFilterMode === 'AND' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}`}>AND</span>
-                                    <button
-                                        type="button"
-                                        className="relative inline-flex h-4 w-8 items-center rounded-full bg-gray-300 dark:bg-gray-600 transition-colors focus:outline-none"
-                                    >
-                                        <span className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${props.settings.ghsFilterMode === 'OR' ? 'translate-x-4' : 'translate-x-1'}`} />
-                                    </button>
-                                    <span className={`text-[10px] font-semibold ${props.settings.ghsFilterMode === 'OR' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}`}>OR</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className={`col-span-2 ${props.settings.enableGhsPop ? '' : 'opacity-50'}`}>
-                            <label className="flex items-center justify-between text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
-                                <span className="flex items-center">
-                                    <input type="checkbox" checked={props.settings.enableGhsPop} onChange={(e) => props.applySettings({ enableGhsPop: e.target.checked })} className="mr-2" />
-                                    <T>Min GHS Population</T>
-                                </span>
-                                <span className="font-semibold text-blue-600 dark:text-blue-400">{props.settings.minGhsPop.toLocaleString()}</span>
-                            </label>
-                            <div className={`flex gap-2 items-center ${props.settings.enableGhsPop ? '' : 'pointer-events-none select-none'}`}>
-                                <span className="text-[10px] text-gray-400">{props.ghsBounds.minPop > 0 ? props.ghsBounds.minPop.toLocaleString() : '0'}</span>
-                                <DeferredRangeSlider
-                                    min={Math.floor(props.ghsBounds.minPop)}
-                                    max={Math.ceil(props.ghsBounds.maxPop)}
-                                    step={parseInt(((props.ghsBounds.maxPop - props.ghsBounds.minPop) / 100).toFixed(0)) || 1}
-                                    value={props.settings.minGhsPop}
-                                    onChange={(num: number) => props.applySettings({ minGhsPop: num })}
-                                    className="flex-1"
-                                />
-                                <span className="text-[10px] text-gray-400">{props.ghsBounds.maxPop > 0 ? props.ghsBounds.maxPop.toLocaleString() : translate('Max')}</span>
-                            </div>
-                        </div>
-                        <div className={`col-span-2 ${props.settings.enableGhsBuilt ? '' : 'opacity-50'}`}>
-                            <label className="flex items-center justify-between text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
-                                <span className="flex items-center">
-                                    <input type="checkbox" checked={props.settings.enableGhsBuilt} onChange={(e) => props.applySettings({ enableGhsBuilt: e.target.checked })} className="mr-2" />
-                                    <T>Min GHS Built Area</T>
-                                </span>
-                                <span className="font-semibold text-blue-600 dark:text-blue-400">{props.settings.minGhsBuilt.toLocaleString()}</span>
-                            </label>
-                            <div className={`flex gap-2 items-center ${props.settings.enableGhsBuilt ? '' : 'pointer-events-none select-none'}`}>
-                                <span className="text-[10px] text-gray-400">{props.ghsBounds.minBuilt > 0 ? props.ghsBounds.minBuilt.toLocaleString() : '0'}</span>
-                                <DeferredRangeSlider
-                                    min={Math.floor(props.ghsBounds.minBuilt)}
-                                    max={Math.ceil(props.ghsBounds.maxBuilt)}
-                                    step={parseInt(((props.ghsBounds.maxBuilt - props.ghsBounds.minBuilt) / 100).toFixed(0)) || 1}
-                                    value={props.settings.minGhsBuilt}
-                                    onChange={(num: number) => props.applySettings({ minGhsBuilt: num })}
-                                    className="flex-1"
-                                />
-                                <span className="text-[10px] text-gray-400">{props.ghsBounds.maxBuilt > 0 ? props.ghsBounds.maxBuilt.toLocaleString() : translate('Max')}</span>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            <div className={`bg-white dark:bg-gray-800 p-2 border dark:border-gray-700 rounded-md space-y-3 transition-opacity ${props.settings.gridMode === 'admin' ? 'opacity-50 pointer-events-none' : ''}`}>
-                <div className="grid grid-cols-2 gap-4">
-                    <div>
-                        <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1">
-                            <T>Resolution (km)</T>: <span className="text-blue-600 dark:text-blue-400 font-medium">{props.settings.cellSize}</span>
-                        </label>
-                        <Slider
-                            className="w-full py-2"
-                            value={[props.settings.cellSize]}
-                            onValueChange={(val: number[]) => props.applySettings({ cellSize: val[0] })}
-                            min={1}
-                            max={1000}
-                            step={1}
-                            disabled={props.settings.gridMode === 'admin'}
-                        />
-                    </div>
-                </div>
-                {isAdvanced && (
-                    <div className="grid grid-cols-2 gap-4 mt-2 border-t dark:border-gray-700 pt-3">
-                        {props.settings.gridMode === 'centers' ? (
-                            <div>
-                                <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1"><T>Centroid Overlap Allowed %</T></label>
-                                <DeferredRangeSlider
-                                    className="w-full"
-                                    value={props.settings.centroidOverlap}
-                                    onChange={(num: number) => props.applySettings({ centroidOverlap: num })}
-                                    min={0}
-                                    max={100}
-                                    step={1}
-                                    title={translate("0% means centroids must be at least 1 cell-size apart. 100% allows exact duplicates.")}
-                                />
-                                <div className="flex justify-between text-[10px] text-gray-500">
-                                    <span><T>No Overlap (Dist)</T></span>
-                                    <span><T>Full Overlap</T></span>
-                                </div>
-                            </div>
-                        ) : (
-                            <div>
-                                <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1"><T>Overlap %</T></label>
-                                <DeferredNumberInput
-                                    className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
-                                    value={props.settings.cellOverlap}
-                                    onChange={(num: number) => props.applySettings({ cellOverlap: num })}
-                                    min={0}
-                                    max={100}
-                                    step={1}
-                                    title={translate("Increase to balloon the geometric cells and ensure no places are missed at the seams.")}
-                                    disabled={props.settings.gridMode === 'admin'}
-                                />
-                            </div>
-                        )}
-                        <div>
-                            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1"><T>Grid Generation Limit</T></label>
-                            <DeferredNumberInput
-                                className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
-                                value={props.settings.maxCellsLimit}
-                                onChange={(num: number) => props.applySettings({ maxCellsLimit: num })}
-                                step={500}
-                                disabled={props.settings.gridMode === 'admin'}
-                            />
-                        </div>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
+import React, { useRef, useState } from 'react';
+import { Copy, Download, Upload, Settings2, Sparkles } from 'lucide-react';
+import { DeferredNumberInput, DeferredRangeSlider } from './DeferredInputs';
+import { GridSimulatorSettings } from '../types';
+import { T, translate } from '@/i18n';
+import { Slider } from '@/components/ui/slider';
+
+interface SimulatorSettingsPanelProps {
+    // Current State
+    settings: GridSimulatorSettings;
+    ghsBounds: { minPop: number; maxPop: number; minBuilt: number; maxBuilt: number; };
+
+    // Setters
+
+    // Actions
+    getCurrentSettings: () => GridSimulatorSettings;
+    applySettings: (settings: Partial<GridSimulatorSettings>) => void;
+}
+
+export function SimulatorSettingsPanel(props: SimulatorSettingsPanelProps) {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [isAdvanced, setIsAdvanced] = useState(() => {
+        return !(
+            props.settings.gridMode === 'centers' &&
+            props.settings.pathOrder === 'shortest' &&
+            props.settings.bypassFilters === true &&
+            props.settings.cellSize === 10
+        );
+    });
+
+    const handleModeChange = (advanced: boolean) => {
+        setIsAdvanced(advanced);
+        if (!advanced) {
+            props.applySettings({
+                gridMode: 'centers',
+                pathOrder: 'shortest',
+                bypassFilters: true,
+                cellSize: 5
+            });
+        }
+    };
+
+    const handleCopySettings = () => {
+        navigator.clipboard.writeText(JSON.stringify(props.getCurrentSettings(), null, 2))
+            .then(() => alert(translate("Settings copied to clipboard!")))
+            .catch(err => console.error(translate("Failed to copy"), err));
+    };
+
+    const handleExportSettings = () => {
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(props.getCurrentSettings(), null, 2));
+        const anchor = document.createElement('a');
+        anchor.href = dataStr;
+        anchor.download = "grid-simulator-settings.json";
+        anchor.click();
+    };
+
+    const handleImportSettings = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (evt) => {
+            try {
+                const json = JSON.parse(evt.target?.result as string);
+                props.applySettings(json);
+            } catch (err) {
+                alert(translate("Invalid JSON file"));
+                console.error(err);
+            }
+        };
+        reader.readAsText(file);
+
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+
+    return (
+        <div className="space-y-3">
+            <div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800/50 p-2 rounded border border-gray-100 dark:border-gray-700/50 mb-3">
+                <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    <T>Settings</T>
+                </h4>
+                <div className="flex bg-gray-200 dark:bg-gray-700 p-0.5 rounded-md">
+                    <button
+                        onClick={() => handleModeChange(false)}
+                        className={`flex items-center gap-1.5 px-3 py-1 text-[10px] font-medium rounded-sm transition-colors ${!isAdvanced ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
+                    >
+                        <Sparkles className="w-3 h-3" />
+                        <T>Simple</T>
+                    </button>
+                    <button
+                        onClick={() => handleModeChange(true)}
+                        className={`flex items-center gap-1.5 px-3 py-1 text-[10px] font-medium rounded-sm transition-colors ${isAdvanced ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
+                    >
+                        <Settings2 className="w-3 h-3" />
+                        <T>Advanced</T>
+                    </button>
+                </div>
+                <div className="flex gap-2">
+                    <button onClick={handleCopySettings} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title={translate("Copy settings to clipboard")}>
+                        <Copy className="w-4 h-4" />
+                    </button>
+                    <button onClick={handleExportSettings} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title={translate("Download settings JSON")}>
+                        <Download className="w-4 h-4" />
+                    </button>
+                    <button onClick={() => fileInputRef.current?.click()} className="text-gray-400 hover:text-sky-600 dark:hover:text-sky-400" title={translate("Import settings JSON")}>
+                        <Upload className="w-4 h-4" />
+                    </button>
+                    <input type="file" ref={fileInputRef} className="hidden" accept="application/json" onChange={handleImportSettings} />
+                </div>
+            </div>
+
+            <div className="flex flex-col gap-3 mb-3">
+                {isAdvanced && (
+                    <div className="bg-white dark:bg-gray-800 p-2 border dark:border-gray-700 rounded-md">
+                        <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-2"><T>Grid Simulation Mode</T></label>
+                        <div className="flex gap-2">
+                            <button
+                                onClick={() => props.applySettings({ gridMode: 'hex' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'hex' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Hex Geometric Grid</T>
+                            </button>
+                            <button
+                                onClick={() => props.applySettings({ gridMode: 'square' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'square' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Square Geometric Grid</T>
+                            </button>
+                            <button
+                                onClick={() => props.applySettings({ gridMode: 'admin' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'admin' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Native GADM Regions</T>
+                            </button>
+                            <button
+                                onClick={() => props.applySettings({ gridMode: 'centers' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.gridMode === 'centers' ? 'bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>GHS Centers</T>
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {isAdvanced && (
+                    <div className="bg-white dark:bg-gray-800 p-2 border dark:border-gray-700 rounded-md">
+                        <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-2"><T>Scan Trajectory</T></label>
+                        <div className="flex gap-2 mb-2">
+                            <button
+                                onClick={() => props.applySettings({ pathOrder: 'zigzag' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'zigzag' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Zig-Zag</T>
+                            </button>
+                            <button
+                                onClick={() => props.applySettings({ pathOrder: 'snake' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'snake' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Snake</T>
+                            </button>
+                            <button
+                                onClick={() => props.applySettings({ pathOrder: 'spiral-out' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'spiral-out' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Spiral Out</T>
+                            </button>
+                            <button
+                                onClick={() => props.applySettings({ pathOrder: 'spiral-in' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'spiral-in' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Spiral In</T>
+                            </button>
+                            <button
+                                onClick={() => props.applySettings({ pathOrder: 'shortest' })}
+                                className={`flex-1 py-1.5 text-xs rounded transition-colors ${props.settings.pathOrder === 'shortest' ? 'bg-indigo-100 text-indigo-700 border border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800' : 'bg-gray-100 text-gray-600 border border-transparent hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'}`}
+                            >
+                                <T>Shortest</T>
+                            </button>
+                        </div>
+
+                        <label className="flex items-center text-xs text-gray-700 dark:text-gray-300 mt-2 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                checked={props.settings.groupByRegion}
+                                onChange={e => props.applySettings({ groupByRegion: e.target.checked })}
+                                className="mr-2"
+                            />
+                            <T>Constrain process sequentially per boundary</T>
+                        </label>
+                    </div>
+                )}
+
+                {isAdvanced && (
+                    <div className="grid grid-cols-2 gap-4 mt-3 pt-3 border-t dark:border-gray-700">
+                        <div className={props.settings.enableElevation ? '' : 'opacity-40'}>
+                            <label className="flex items-center text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
+                                <input type="checkbox" checked={props.settings.enableElevation} onChange={(e) => props.applySettings({ enableElevation: e.target.checked })} className="mr-2" />
+                                <T>Max Elevation (m)</T>
+                            </label>
+                            <div className={props.settings.enableElevation ? '' : 'pointer-events-none select-none'}>
+                                <DeferredNumberInput
+                                    className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
+                                    value={props.settings.maxElevation}
+                                    onChange={(num: number) => props.applySettings({ maxElevation: num })}
+                                />
+                                <span className="text-[10px] text-gray-500"><T>Drop &gt;</T> {props.settings.maxElevation}m</span>
+                            </div>
+                        </div>
+                        <div className={props.settings.enableDensity ? '' : 'opacity-40'}>
+                            <label className="flex items-center text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
+                                <input type="checkbox" checked={props.settings.enableDensity} onChange={(e) => props.applySettings({ enableDensity: e.target.checked })} className="mr-2" />
+                                <T>Min Density (p/km²)</T>
+                            </label>
+                            <div className={props.settings.enableDensity ? '' : 'pointer-events-none select-none'}>
+                                <DeferredNumberInput
+                                    className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
+                                    value={props.settings.minDensity}
+                                    onChange={(num: number) => props.applySettings({ minDensity: num })}
+                                />
+                                <span className="text-[10px] text-gray-500"><T>Drop &lt;</T> {props.settings.minDensity}</span>
+                            </div>
+                        </div>
+
+                        <div className="col-span-2 flex flex-col border-b pb-2 mb-2 mt-2 dark:border-gray-700 gap-2">
+                            <div>
+                                <h3 className="text-xs font-bold text-gray-800 dark:text-gray-200"><T>GHS Data Thresholds</T></h3>
+                                <p className="text-[10px] text-gray-500"><T>Logic when filters are active.</T></p>
+                            </div>
+                            <div className="flex flex-col gap-3 items-start mt-2">
+                                <label className="flex items-center text-[10px] text-gray-700 dark:text-gray-300 cursor-pointer" title={translate("If enabled, it ignores ALL density, elevation, geometry overlap, and custom filters. Will push all raw items")}>
+                                    <input type="checkbox" checked={props.settings.bypassFilters} onChange={e => props.applySettings({ bypassFilters: e.target.checked })} className="mr-1" />
+                                    <T>Bypass All Filters</T>
+                                </label>
+                                <label className="flex items-center text-[10px] text-gray-700 dark:text-gray-300 cursor-pointer" title={translate("If a region is physically missing GHS raster data, allow it to pass instead of auto-failing")}>
+                                    <input type="checkbox" checked={props.settings.allowMissingGhs} onChange={e => props.applySettings({ allowMissingGhs: e.target.checked })} className="mr-1" />
+                                    <T>Allow Missing Data Gaps</T>
+                                </label>
+                                <div className="flex items-center gap-2 cursor-pointer" onClick={() => props.applySettings({ ghsFilterMode: props.settings.ghsFilterMode === 'AND' ? 'OR' : 'AND' })}>
+                                    <span className={`text-[10px] font-semibold ${props.settings.ghsFilterMode === 'AND' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}`}>AND</span>
+                                    <button
+                                        type="button"
+                                        className="relative inline-flex h-4 w-8 items-center rounded-full bg-gray-300 dark:bg-gray-600 transition-colors focus:outline-none"
+                                    >
+                                        <span className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${props.settings.ghsFilterMode === 'OR' ? 'translate-x-4' : 'translate-x-1'}`} />
+                                    </button>
+                                    <span className={`text-[10px] font-semibold ${props.settings.ghsFilterMode === 'OR' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}`}>OR</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className={`col-span-2 ${props.settings.enableGhsPop ? '' : 'opacity-50'}`}>
+                            <label className="flex items-center justify-between text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
+                                <span className="flex items-center">
+                                    <input type="checkbox" checked={props.settings.enableGhsPop} onChange={(e) => props.applySettings({ enableGhsPop: e.target.checked })} className="mr-2" />
+                                    <T>Min GHS Population</T>
+                                </span>
+                                <span className="font-semibold text-blue-600 dark:text-blue-400">{props.settings.minGhsPop.toLocaleString()}</span>
+                            </label>
+                            <div className={`flex gap-2 items-center ${props.settings.enableGhsPop ? '' : 'pointer-events-none select-none'}`}>
+                                <span className="text-[10px] text-gray-400">{props.ghsBounds.minPop > 0 ? props.ghsBounds.minPop.toLocaleString() : '0'}</span>
+                                <DeferredRangeSlider
+                                    min={Math.floor(props.ghsBounds.minPop)}
+                                    max={Math.ceil(props.ghsBounds.maxPop)}
+                                    step={parseInt(((props.ghsBounds.maxPop - props.ghsBounds.minPop) / 100).toFixed(0)) || 1}
+                                    value={props.settings.minGhsPop}
+                                    onChange={(num: number) => props.applySettings({ minGhsPop: num })}
+                                    className="flex-1"
+                                />
+                                <span className="text-[10px] text-gray-400">{props.ghsBounds.maxPop > 0 ? props.ghsBounds.maxPop.toLocaleString() : translate('Max')}</span>
+                            </div>
+                        </div>
+                        <div className={`col-span-2 ${props.settings.enableGhsBuilt ? '' : 'opacity-50'}`}>
+                            <label className="flex items-center justify-between text-xs text-gray-700 dark:text-gray-300 mb-1 cursor-pointer">
+                                <span className="flex items-center">
+                                    <input type="checkbox" checked={props.settings.enableGhsBuilt} onChange={(e) => props.applySettings({ enableGhsBuilt: e.target.checked })} className="mr-2" />
+                                    <T>Min GHS Built Area</T>
+                                </span>
+                                <span className="font-semibold text-blue-600 dark:text-blue-400">{props.settings.minGhsBuilt.toLocaleString()}</span>
+                            </label>
+                            <div className={`flex gap-2 items-center ${props.settings.enableGhsBuilt ? '' : 'pointer-events-none select-none'}`}>
+                                <span className="text-[10px] text-gray-400">{props.ghsBounds.minBuilt > 0 ? props.ghsBounds.minBuilt.toLocaleString() : '0'}</span>
+                                <DeferredRangeSlider
+                                    min={Math.floor(props.ghsBounds.minBuilt)}
+                                    max={Math.ceil(props.ghsBounds.maxBuilt)}
+                                    step={parseInt(((props.ghsBounds.maxBuilt - props.ghsBounds.minBuilt) / 100).toFixed(0)) || 1}
+                                    value={props.settings.minGhsBuilt}
+                                    onChange={(num: number) => props.applySettings({ minGhsBuilt: num })}
+                                    className="flex-1"
+                                />
+                                <span className="text-[10px] text-gray-400">{props.ghsBounds.maxBuilt > 0 ? props.ghsBounds.maxBuilt.toLocaleString() : translate('Max')}</span>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <div className={`bg-white dark:bg-gray-800 p-2 border dark:border-gray-700 rounded-md space-y-3 transition-opacity ${props.settings.gridMode === 'admin' ? 'opacity-50 pointer-events-none' : ''}`}>
+                <div className="grid grid-cols-2 gap-4">
+                    <div>
+                        <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1">
+                            <T>Resolution (km)</T>: <span className="text-blue-600 dark:text-blue-400 font-medium">{props.settings.cellSize}</span>
+                        </label>
+                        <Slider
+                            className="w-full py-2"
+                            value={[props.settings.cellSize]}
+                            onValueChange={(val: number[]) => props.applySettings({ cellSize: val[0] })}
+                            min={1}
+                            max={1000}
+                            step={1}
+                            disabled={props.settings.gridMode === 'admin'}
+                        />
+                    </div>
+                </div>
+                {isAdvanced && (
+                    <div className="grid grid-cols-2 gap-4 mt-2 border-t dark:border-gray-700 pt-3">
+                        {props.settings.gridMode === 'centers' ? (
+                            <div>
+                                <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1"><T>Centroid Overlap Allowed %</T></label>
+                                <DeferredRangeSlider
+                                    className="w-full"
+                                    value={props.settings.centroidOverlap}
+                                    onChange={(num: number) => props.applySettings({ centroidOverlap: num })}
+                                    min={0}
+                                    max={100}
+                                    step={1}
+                                    title={translate("0% means centroids must be at least 1 cell-size apart. 100% allows exact duplicates.")}
+                                />
+                                <div className="flex justify-between text-[10px] text-gray-500">
+                                    <span><T>No Overlap (Dist)</T></span>
+                                    <span><T>Full Overlap</T></span>
+                                </div>
+                            </div>
+                        ) : (
+                            <div>
+                                <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1"><T>Overlap %</T></label>
+                                <DeferredNumberInput
+                                    className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
+                                    value={props.settings.cellOverlap}
+                                    onChange={(num: number) => props.applySettings({ cellOverlap: num })}
+                                    min={0}
+                                    max={100}
+                                    step={1}
+                                    title={translate("Increase to balloon the geometric cells and ensure no places are missed at the seams.")}
+                                    disabled={props.settings.gridMode === 'admin'}
+                                />
+                            </div>
+                        )}
+                        <div>
+                            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300 block mb-1"><T>Grid Generation Limit</T></label>
+                            <DeferredNumberInput
+                                className="w-full border rounded p-1 text-xs dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200"
+                                value={props.settings.maxCellsLimit}
+                                onChange={(num: number) => props.applySettings({ maxCellsLimit: num })}
+                                step={500}
+                                disabled={props.settings.gridMode === 'admin'}
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorStats.tsx b/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorStats.tsx
index 4b7ded0d..7aba2a59 100644
--- a/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorStats.tsx
+++ b/packages/ui/src/modules/places/gridsearch/simulator/components/SimulatorStats.tsx
@@ -1,56 +1,56 @@
-import React from 'react';
-import { Copy, Download } from 'lucide-react';
-import { T, translate } from '@/i18n';
-
-interface SimulatorStatsProps {
-    progressIndex: number;
-    validCount: number;
-    skippedCount: number;
-    processedCount: number;
-    totalCells: number;
-    handleCopyWaypoints: () => void;
-    handleExportWaypoints: () => void;
-}
-
-export function SimulatorStats({
-    progressIndex, validCount, skippedCount, processedCount, totalCells, handleCopyWaypoints, handleExportWaypoints
-}: SimulatorStatsProps) {
-    return (
-        <div>
-            <div className="flex justify-between text-xs mb-1 text-gray-600 dark:text-gray-400">
-                <span><T>Scanning...</T></span>
-                <span className="font-mono">{progressIndex} / {totalCells}</span>
-            </div>
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
-                <div className="bg-blue-500 h-2 transition-all duration-75" style={{ width: totalCells > 0 ? `${(progressIndex / totalCells) * 100}%` : '0%' }}></div>
-            </div>
-
-            <div className="grid grid-cols-3 gap-2 mt-3 text-center text-xs h-full">
-                <div className="bg-gray-50 dark:bg-gray-700 p-2 rounded flex flex-col justify-between h-full">
-                    <div>
-                        <span className="block text-gray-500 font-semibold mb-1"><T>Target Calls</T></span>
-                        <span className="font-mono text-gray-800 dark:text-gray-200">{validCount}</span>
-                    </div>
-                    {totalCells > 0 && (
-                        <div className="flex gap-3 mt-2 pt-2 border-t border-gray-200 dark:border-gray-600 justify-center">
-                            <button onClick={handleCopyWaypoints} className="text-gray-400 hover:text-sky-600 focus:outline-none flex items-center gap-1" title={translate("Copy Waypoints (GeoJSON)")}>
-                                <Copy className="w-3.5 h-3.5" />
-                            </button>
-                            <button onClick={handleExportWaypoints} className="text-gray-400 hover:text-sky-600 focus:outline-none flex items-center gap-1" title={translate("Download Waypoints (GeoJSON)")}>
-                                <Download className="w-3.5 h-3.5" />
-                            </button>
-                        </div>
-                    )}
-                </div>
-                <div className="bg-red-50 dark:bg-red-900/20 p-2 rounded flex flex-col justify-center h-full">
-                    <span className="block text-red-500 font-semibold mb-1"><T>Skipped Calls</T></span>
-                    <span className="font-mono text-red-800 dark:text-red-300">{skippedCount}</span>
-                </div>
-                <div className="bg-green-50 dark:bg-green-900/20 p-2 rounded flex flex-col justify-center h-full">
-                    <span className="block text-green-600 font-semibold mb-1"><T>Simulated Processed</T></span>
-                    <span className="font-mono text-green-800 dark:text-green-300">{processedCount}</span>
-                </div>
-            </div>
-        </div>
-    );
-}
+import React from 'react';
+import { Copy, Download } from 'lucide-react';
+import { T, translate } from '@/i18n';
+
+interface SimulatorStatsProps {
+    progressIndex: number;
+    validCount: number;
+    skippedCount: number;
+    processedCount: number;
+    totalCells: number;
+    handleCopyWaypoints: () => void;
+    handleExportWaypoints: () => void;
+}
+
+export function SimulatorStats({
+    progressIndex, validCount, skippedCount, processedCount, totalCells, handleCopyWaypoints, handleExportWaypoints
+}: SimulatorStatsProps) {
+    return (
+        <div>
+            <div className="flex justify-between text-xs mb-1 text-gray-600 dark:text-gray-400">
+                <span><T>Scanning...</T></span>
+                <span className="font-mono">{progressIndex} / {totalCells}</span>
+            </div>
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
+                <div className="bg-blue-500 h-2 transition-all duration-75" style={{ width: totalCells > 0 ? `${(progressIndex / totalCells) * 100}%` : '0%' }}></div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-2 mt-3 text-center text-xs h-full">
+                <div className="bg-gray-50 dark:bg-gray-700 p-2 rounded flex flex-col justify-between h-full">
+                    <div>
+                        <span className="block text-gray-500 font-semibold mb-1"><T>Target Calls</T></span>
+                        <span className="font-mono text-gray-800 dark:text-gray-200">{validCount}</span>
+                    </div>
+                    {totalCells > 0 && (
+                        <div className="flex gap-3 mt-2 pt-2 border-t border-gray-200 dark:border-gray-600 justify-center">
+                            <button onClick={handleCopyWaypoints} className="text-gray-400 hover:text-sky-600 focus:outline-none flex items-center gap-1" title={translate("Copy Waypoints (GeoJSON)")}>
+                                <Copy className="w-3.5 h-3.5" />
+                            </button>
+                            <button onClick={handleExportWaypoints} className="text-gray-400 hover:text-sky-600 focus:outline-none flex items-center gap-1" title={translate("Download Waypoints (GeoJSON)")}>
+                                <Download className="w-3.5 h-3.5" />
+                            </button>
+                        </div>
+                    )}
+                </div>
+                <div className="bg-red-50 dark:bg-red-900/20 p-2 rounded flex flex-col justify-center h-full">
+                    <span className="block text-red-500 font-semibold mb-1"><T>Skipped Calls</T></span>
+                    <span className="font-mono text-red-800 dark:text-red-300">{skippedCount}</span>
+                </div>
+                <div className="bg-green-50 dark:bg-green-900/20 p-2 rounded flex flex-col justify-center h-full">
+                    <span className="block text-green-600 font-semibold mb-1"><T>Simulated Processed</T></span>
+                    <span className="font-mono text-green-800 dark:text-green-300">{processedCount}</span>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/modules/places/gridsearch/simulator/hooks/useGridSimulatorState.ts b/packages/ui/src/modules/places/gridsearch/simulator/hooks/useGridSimulatorState.ts
index fd7c54f7..98aab585 100644
--- a/packages/ui/src/modules/places/gridsearch/simulator/hooks/useGridSimulatorState.ts
+++ b/packages/ui/src/modules/places/gridsearch/simulator/hooks/useGridSimulatorState.ts
@@ -1,391 +1,391 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import * as turf from '@turf/turf';
-import { generateGridSearchCells, extractGridWaypoints, SimulatorGridCell, GridSearchHop, GridFeature } from '@polymech/shared';
-import { GridSimulatorSettings, GridSearchSimulatorProps } from '../types';
-import { fetchRegionBoundary } from '../../../client-searches';
-
-export function useGridSimulatorState({
-    pickerRegions,
-    pickerPolygons,
-    onFilterCell,
-    setSimulatorData,
-    setSimulatorPath,
-    setSimulatorScanner,
-    initialSettings,
-    simulatorSettings,
-    onSimulatorSettingsChange
-}: GridSearchSimulatorProps) {
-
-    const [gridCells, setGridCells] = useState<SimulatorGridCell[]>([]);
-    const [progressIndex, setProgressIndex] = useState(0);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [speed, setSpeed] = useState(0.5);
-    const [skippedTotal, setSkippedTotal] = useState(0);
-
-    // Config
-    const defaultSettings: GridSimulatorSettings = {
-        gridMode: 'centers',
-        pathOrder: 'shortest',
-        groupByRegion: true,
-        cellSize: 5,
-        cellOverlap: 0,
-        centroidOverlap: 50,
-        ghsFilterMode: 'AND',
-        maxCellsLimit: 50000,
-        maxElevation: 700,
-        minDensity: 10,
-        minGhsPop: 0,
-        minGhsBuilt: 0,
-        enableElevation: false,
-        enableDensity: false,
-        enableGhsPop: false,
-        enableGhsBuilt: false,
-        allowMissingGhs: false,
-        bypassFilters: true
-    };
-
-    const [localSettings, setLocalSettings] = useState<GridSimulatorSettings>(defaultSettings);
-    const settings = simulatorSettings || localSettings;
-
-    const {
-        gridMode, pathOrder, groupByRegion, cellSize, cellOverlap, centroidOverlap,
-        ghsFilterMode, maxCellsLimit, maxElevation, minDensity, minGhsPop, minGhsBuilt,
-        enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters
-    } = settings;
-
-    const [isCalculating, setIsCalculating] = useState(false);
-    const [calcStats, setCalcStats] = useState({ current: 0, total: 0, valid: 0 });
-    const skippedCellsRef = useRef<SimulatorGridCell[]>([]);
-
-    const applySettings = useCallback((updates: Partial<GridSimulatorSettings>) => {
-        if (!updates) return;
-        if (onSimulatorSettingsChange) {
-            onSimulatorSettingsChange({ ...settings, ...updates });
-        } else {
-            setLocalSettings(prev => ({ ...prev, ...updates }));
-        }
-    }, [onSimulatorSettingsChange, settings]);
-
-    // Apply restored settings once on mount
-    const appliedInitialRef = useRef(false);
-    useEffect(() => {
-        if (!initialSettings || appliedInitialRef.current) return;
-        appliedInitialRef.current = true;
-        applySettings(initialSettings);
-    }, [initialSettings, applySettings]);
-
-    const stopRequestedRef = useRef<boolean>(false);
-    const reqRef = useRef<number>();
-    const lastTickRef = useRef<number>(0);
-    const globalProcessedHopsRef = useRef<SimulatorGridCell[]>([]);
-
-    const [ghsBounds, setGhsBounds] = useState({ minPop: 0, maxPop: 1000000, minBuilt: 0, maxBuilt: 1000000 });
-
-    useEffect(() => {
-        if (!pickerPolygons || pickerPolygons.length === 0) return;
-        let minPop = Infinity;
-        let maxPop = -Infinity;
-        let minBuilt = Infinity;
-        let maxBuilt = -Infinity;
-
-        pickerPolygons.forEach(fc => {
-            if (fc && fc.features) {
-                fc.features.forEach((f: any) => {
-                    const raw = f.properties || {};
-                    const pop = raw.ghsPopulation;
-                    const built = raw.ghsBuiltWeight;
-                    if (typeof pop === 'number') {
-                        if (pop < minPop) minPop = pop;
-                        if (pop > maxPop) maxPop = pop;
-                    }
-                    if (typeof built === 'number') {
-                        if (built < minBuilt) minBuilt = built;
-                        if (built > maxBuilt) maxBuilt = built;
-                    }
-                });
-            }
-        });
-
-        if (minPop !== Infinity) {
-            setGhsBounds({
-                minPop, maxPop, minBuilt: minBuilt === Infinity ? 0 : minBuilt, maxBuilt: maxBuilt === -Infinity ? 1000000 : maxBuilt
-            });
-        }
-    }, [pickerPolygons]);
-
-    const getFinalHopList = (): GridSearchHop[] => {
-        return extractGridWaypoints(gridCells.filter(c => c.properties.sim_status !== 'skipped'));
-    };
-
-    const getCurrentSettings = (): GridSimulatorSettings => ({
-        gridMode, pathOrder, groupByRegion, cellSize, cellOverlap, centroidOverlap,
-        ghsFilterMode, maxCellsLimit, maxElevation, minDensity, minGhsPop, minGhsBuilt,
-        enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters
-    });
-
-    const computeGrid = useCallback(async (autoPlay: boolean | 'preview' = false) => {
-        if (!pickerRegions || pickerRegions.length === 0 || !pickerPolygons) {
-            setGridCells([]);
-            setSimulatorData(turf.featureCollection([]));
-            setSimulatorPath(turf.featureCollection([]));
-            setSimulatorScanner(turf.featureCollection([]));
-            return;
-        }
-
-        // For GHS Centers mode, use pickerPolygons directly — they're already fetched
-        // at the effective level and enriched with GHS data. Re-fetching at region.level
-        // can merge all features into one when the requested level exceeds available GADM depth
-        // (e.g., L5 requested but country only has data through L4).
-        const features: GridFeature[] = [];
-        if (gridMode === 'centers' && pickerPolygons && pickerPolygons.length > 0) {
-            for (const fc of pickerPolygons) {
-                if (fc && fc.features) {
-                    features.push(...(fc.features as GridFeature[]));
-                }
-            }
-        } else {
-            for (const region of pickerRegions) {
-                const geojson = await fetchRegionBoundary(
-                    region.gid,
-                    region.gadmName || '',
-                    region.level,
-                    true // enrich
-                );
-                if (geojson && geojson.features) {
-                    features.push(...(geojson.features as GridFeature[]));
-                }
-            }
-        }
-
-        if (features.length === 0) return;
-        setIsCalculating(true);
-        stopRequestedRef.current = false;
-        setCalcStats({ current: 0, total: 0, valid: 0 });
-
-        await new Promise(r => setTimeout(r, 10));
-
-        try {
-            const result = await generateGridSearchCells({
-                features, gridMode, cellSize, pathOrder, groupByRegion, onFilterCell,
-                maxElevation: enableElevation ? maxElevation : 0,
-                minDensity: enableDensity ? minDensity : 0,
-                minGhsPop: enableGhsPop ? minGhsPop : 0,
-                minGhsBuilt: enableGhsBuilt ? minGhsBuilt : 0,
-                allowMissingGhs,
-                bypassFilters,
-                cellOverlap: cellOverlap / 100,
-                centroidOverlap: centroidOverlap / 100,
-                ghsFilterMode,
-                maxCellsLimit,
-                skipPolygons: globalProcessedHopsRef.current
-            }, async (stats) => {
-                setCalcStats({ current: stats.current, total: stats.total, valid: stats.validCells.length });
-                if (stopRequestedRef.current) return false;
-                await new Promise(r => setTimeout(r, 0));
-                return true;
-            });
-
-            if (result.error) {
-                alert(result.error);
-                setIsCalculating(false);
-                return;
-            }
-
-            setGridCells(result.validCells);
-            skippedCellsRef.current = result.skippedCells || [];
-            setSkippedTotal(result.skippedCells ? result.skippedCells.length : 0);
-
-            if (autoPlay === 'preview') {
-                setProgressIndex(result.validCells.length);
-                setIsPlaying(false);
-            } else {
-                setProgressIndex(0);
-                setIsPlaying(stopRequestedRef.current ? false : autoPlay);
-            }
-
-            setSimulatorData(turf.featureCollection(result.validCells));
-            setSimulatorPath(turf.featureCollection([]));
-            setSimulatorScanner(turf.featureCollection([]));
-            setIsCalculating(false);
-        } catch (err) {
-            console.error("Turf Error:", err);
-            alert("An error occurred during grid generation.");
-            setIsCalculating(false);
-        }
-    }, [pickerRegions, pickerPolygons, gridMode, pathOrder, groupByRegion, cellSize, cellOverlap, centroidOverlap, maxCellsLimit, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, onFilterCell, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters, setSimulatorData, setSimulatorPath, setSimulatorScanner]);
-
-    const activeSettingsRef = useRef({ gridMode, cellSize, cellOverlap, centroidOverlap, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, pathOrder, groupByRegion, maxCellsLimit, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters });
-
-    useEffect(() => {
-        const prev = activeSettingsRef.current;
-        let changed = false;
-
-        if (prev.gridMode !== gridMode) changed = true;
-        if (prev.cellSize !== cellSize) changed = true;
-        if (prev.cellOverlap !== cellOverlap) changed = true;
-        if (prev.centroidOverlap !== centroidOverlap) changed = true;
-        if (prev.maxElevation !== maxElevation) changed = true;
-        if (prev.minDensity !== minDensity) changed = true;
-        if (prev.minGhsPop !== minGhsPop) changed = true;
-        if (prev.minGhsBuilt !== minGhsBuilt) changed = true;
-        if (prev.ghsFilterMode !== ghsFilterMode) changed = true;
-        if (prev.pathOrder !== pathOrder) changed = true;
-        if (prev.groupByRegion !== groupByRegion) changed = true;
-        if (prev.maxCellsLimit !== maxCellsLimit) changed = true;
-        if (prev.enableElevation !== enableElevation) changed = true;
-        if (prev.enableDensity !== enableDensity) changed = true;
-        if (prev.enableGhsPop !== enableGhsPop) changed = true;
-        if (prev.enableGhsBuilt !== enableGhsBuilt) changed = true;
-        if (prev.allowMissingGhs !== allowMissingGhs) changed = true;
-        if (prev.bypassFilters !== bypassFilters) changed = true;
-
-        if (changed) {
-            globalProcessedHopsRef.current = [];
-            activeSettingsRef.current = { gridMode, cellSize, cellOverlap, centroidOverlap, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, pathOrder, groupByRegion, maxCellsLimit, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters };
-            if (pickerPolygons && pickerPolygons.length > 0) {
-                setTimeout(() => computeGrid('preview'), 0);
-            }
-        }
-    }, [gridMode, cellSize, cellOverlap, centroidOverlap, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, pathOrder, groupByRegion, maxCellsLimit, pickerPolygons, computeGrid, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters]);
-
-    const prevRegionsRef = useRef<string>('');
-    useEffect(() => {
-        const currentRegions = (pickerRegions || []).map(r => r.gid).sort().join(',');
-        if (prevRegionsRef.current !== currentRegions) {
-            prevRegionsRef.current = currentRegions;
-            setGridCells([]);
-            setIsPlaying(false);
-            setProgressIndex(0);
-            setSimulatorData(turf.featureCollection([]));
-            setSimulatorPath(turf.featureCollection([]));
-            setSimulatorScanner(turf.featureCollection([]));
-        }
-    }, [pickerRegions, setSimulatorData, setSimulatorPath, setSimulatorScanner]);
-
-    const handleClear = useCallback(() => {
-        setGridCells([]);
-        setIsPlaying(false);
-        setProgressIndex(0);
-        setSimulatorData(turf.featureCollection([]));
-        setSimulatorPath(turf.featureCollection([]));
-        setSimulatorScanner(turf.featureCollection([]));
-        globalProcessedHopsRef.current = [];
-    }, [setSimulatorData, setSimulatorPath, setSimulatorScanner]);
-
-    // Animation Loop
-    useEffect(() => {
-        if (!isPlaying || progressIndex >= gridCells.length) {
-            if (progressIndex >= gridCells.length && isPlaying) setIsPlaying(false);
-            return;
-        }
-
-        const tick = (time: number) => {
-            if (time - lastTickRef.current > (1000 / (10 * speed))) {
-                setProgressIndex(prev => {
-                    if (prev < gridCells.length) {
-                        const cell = gridCells[prev];
-                        if (cell.properties.sim_status !== 'skipped') {
-                            globalProcessedHopsRef.current.push(cell);
-                        }
-                    }
-                    const next = prev + 1;
-                    return next > gridCells.length ? gridCells.length : next;
-                });
-                lastTickRef.current = time;
-            }
-            reqRef.current = requestAnimationFrame(tick);
-        };
-
-        reqRef.current = requestAnimationFrame(tick);
-        return () => {
-            if (reqRef.current) cancelAnimationFrame(reqRef.current);
-        };
-    }, [isPlaying, progressIndex, gridCells.length, speed]);
-
-    // Sync State to GeoJSON
-    useEffect(() => {
-        if (gridCells.length === 0) return;
-
-        const updatedCells = gridCells.map((cell, i) => {
-            if (cell.properties.sim_status === 'skipped') return cell;
-            return {
-                ...cell,
-                properties: {
-                    ...cell.properties,
-                    sim_status: i < progressIndex ? 'processed' : 'pending'
-                }
-            };
-        });
-        setSimulatorData(turf.featureCollection(updatedCells));
-
-        const pathCoords = gridCells
-            .slice(0, progressIndex)
-            .filter(c => c.properties.sim_status !== 'skipped')
-            .map(c => turf.centroid(c).geometry.coordinates);
-
-        if (pathCoords.length > 1) {
-            setSimulatorPath(turf.featureCollection([turf.lineString(pathCoords)]));
-        } else {
-            setSimulatorPath(turf.featureCollection([]));
-        }
-
-        const activeCells = gridCells.filter(c => c.properties.sim_status !== 'skipped');
-        const currentIndex = gridCells.slice(0, progressIndex).filter(c => c.properties.sim_status !== 'skipped').length;
-
-        if (currentIndex > 0 && currentIndex <= activeCells.length) {
-            const currentCell = activeCells[currentIndex - 1];
-            const centroid = turf.centroid(currentCell);
-            let angle = 0;
-            if (currentIndex > 1) {
-                const prevCell = activeCells[currentIndex - 2];
-                angle = turf.bearing(turf.centroid(prevCell), centroid);
-            } else if (currentIndex === 1 && activeCells.length > 1) {
-                const nextCell = activeCells[1];
-                angle = turf.bearing(centroid, turf.centroid(nextCell));
-            }
-            centroid.properties = {
-                bearing: angle,
-                icon_state: (progressIndex % 2 === 0) ? 'pacman-open' : 'pacman-closed'
-            };
-            setSimulatorScanner(turf.featureCollection([centroid]));
-        } else {
-            setSimulatorScanner(turf.featureCollection([]));
-        }
-
-    }, [progressIndex, gridCells, setSimulatorData, setSimulatorPath, setSimulatorScanner]);
-
-    const processedCount = progressIndex;
-    const skippedCount = skippedTotal;
-    const validCount = gridCells.length;
-
-    return {
-        // State
-        gridCells,
-        progressIndex,
-        isPlaying,
-        speed,
-        isCalculating,
-        calcStats,
-        skippedCellsRef,
-        stopRequestedRef,
-
-        // Metrics
-        processedCount,
-        skippedCount,
-        validCount,
-        ghsBounds,
-
-        // Configuration actions
-        settings,
-        applySettings,
-
-        // Core Actions
-        setIsPlaying,
-        setProgressIndex,
-        setSpeed,
-        computeGrid,
-        handleClear,
-        getFinalHopList,
-        getCurrentSettings,
-    };
-}
+import { useState, useEffect, useCallback, useRef } from 'react';
+import * as turf from '@turf/turf';
+import { generateGridSearchCells, extractGridWaypoints, SimulatorGridCell, GridSearchHop, GridFeature } from '@polymech/shared';
+import { GridSimulatorSettings, GridSearchSimulatorProps } from '../types';
+import { fetchRegionBoundary } from '../../../client-gridsearch';
+
+export function useGridSimulatorState({
+    pickerRegions,
+    pickerPolygons,
+    onFilterCell,
+    setSimulatorData,
+    setSimulatorPath,
+    setSimulatorScanner,
+    initialSettings,
+    simulatorSettings,
+    onSimulatorSettingsChange
+}: GridSearchSimulatorProps) {
+
+    const [gridCells, setGridCells] = useState<SimulatorGridCell[]>([]);
+    const [progressIndex, setProgressIndex] = useState(0);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [speed, setSpeed] = useState(0.5);
+    const [skippedTotal, setSkippedTotal] = useState(0);
+
+    // Config
+    const defaultSettings: GridSimulatorSettings = {
+        gridMode: 'centers',
+        pathOrder: 'shortest',
+        groupByRegion: true,
+        cellSize: 5,
+        cellOverlap: 0,
+        centroidOverlap: 50,
+        ghsFilterMode: 'AND',
+        maxCellsLimit: 50000,
+        maxElevation: 700,
+        minDensity: 10,
+        minGhsPop: 0,
+        minGhsBuilt: 0,
+        enableElevation: false,
+        enableDensity: false,
+        enableGhsPop: false,
+        enableGhsBuilt: false,
+        allowMissingGhs: false,
+        bypassFilters: true
+    };
+
+    const [localSettings, setLocalSettings] = useState<GridSimulatorSettings>(defaultSettings);
+    const settings = simulatorSettings || localSettings;
+
+    const {
+        gridMode, pathOrder, groupByRegion, cellSize, cellOverlap, centroidOverlap,
+        ghsFilterMode, maxCellsLimit, maxElevation, minDensity, minGhsPop, minGhsBuilt,
+        enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters
+    } = settings;
+
+    const [isCalculating, setIsCalculating] = useState(false);
+    const [calcStats, setCalcStats] = useState({ current: 0, total: 0, valid: 0 });
+    const skippedCellsRef = useRef<SimulatorGridCell[]>([]);
+
+    const applySettings = useCallback((updates: Partial<GridSimulatorSettings>) => {
+        if (!updates) return;
+        if (onSimulatorSettingsChange) {
+            onSimulatorSettingsChange({ ...settings, ...updates });
+        } else {
+            setLocalSettings(prev => ({ ...prev, ...updates }));
+        }
+    }, [onSimulatorSettingsChange, settings]);
+
+    // Apply restored settings once on mount
+    const appliedInitialRef = useRef(false);
+    useEffect(() => {
+        if (!initialSettings || appliedInitialRef.current) return;
+        appliedInitialRef.current = true;
+        applySettings(initialSettings);
+    }, [initialSettings, applySettings]);
+
+    const stopRequestedRef = useRef<boolean>(false);
+    const reqRef = useRef<number>();
+    const lastTickRef = useRef<number>(0);
+    const globalProcessedHopsRef = useRef<SimulatorGridCell[]>([]);
+
+    const [ghsBounds, setGhsBounds] = useState({ minPop: 0, maxPop: 1000000, minBuilt: 0, maxBuilt: 1000000 });
+
+    useEffect(() => {
+        if (!pickerPolygons || pickerPolygons.length === 0) return;
+        let minPop = Infinity;
+        let maxPop = -Infinity;
+        let minBuilt = Infinity;
+        let maxBuilt = -Infinity;
+
+        pickerPolygons.forEach(fc => {
+            if (fc && fc.features) {
+                fc.features.forEach((f: any) => {
+                    const raw = f.properties || {};
+                    const pop = raw.ghsPopulation;
+                    const built = raw.ghsBuiltWeight;
+                    if (typeof pop === 'number') {
+                        if (pop < minPop) minPop = pop;
+                        if (pop > maxPop) maxPop = pop;
+                    }
+                    if (typeof built === 'number') {
+                        if (built < minBuilt) minBuilt = built;
+                        if (built > maxBuilt) maxBuilt = built;
+                    }
+                });
+            }
+        });
+
+        if (minPop !== Infinity) {
+            setGhsBounds({
+                minPop, maxPop, minBuilt: minBuilt === Infinity ? 0 : minBuilt, maxBuilt: maxBuilt === -Infinity ? 1000000 : maxBuilt
+            });
+        }
+    }, [pickerPolygons]);
+
+    const getFinalHopList = (): GridSearchHop[] => {
+        return extractGridWaypoints(gridCells.filter(c => c.properties.sim_status !== 'skipped'));
+    };
+
+    const getCurrentSettings = (): GridSimulatorSettings => ({
+        gridMode, pathOrder, groupByRegion, cellSize, cellOverlap, centroidOverlap,
+        ghsFilterMode, maxCellsLimit, maxElevation, minDensity, minGhsPop, minGhsBuilt,
+        enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters
+    });
+
+    const computeGrid = useCallback(async (autoPlay: boolean | 'preview' = false) => {
+        if (!pickerRegions || pickerRegions.length === 0 || !pickerPolygons) {
+            setGridCells([]);
+            setSimulatorData(turf.featureCollection([]));
+            setSimulatorPath(turf.featureCollection([]));
+            setSimulatorScanner(turf.featureCollection([]));
+            return;
+        }
+
+        // For GHS Centers mode, use pickerPolygons directly — they're already fetched
+        // at the effective level and enriched with GHS data. Re-fetching at region.level
+        // can merge all features into one when the requested level exceeds available GADM depth
+        // (e.g., L5 requested but country only has data through L4).
+        const features: GridFeature[] = [];
+        if (gridMode === 'centers' && pickerPolygons && pickerPolygons.length > 0) {
+            for (const fc of pickerPolygons) {
+                if (fc && fc.features) {
+                    features.push(...(fc.features as GridFeature[]));
+                }
+            }
+        } else {
+            for (const region of pickerRegions) {
+                const geojson = await fetchRegionBoundary(
+                    region.gid,
+                    region.gadmName || '',
+                    region.level,
+                    true // enrich
+                );
+                if (geojson && geojson.features) {
+                    features.push(...(geojson.features as GridFeature[]));
+                }
+            }
+        }
+
+        if (features.length === 0) return;
+        setIsCalculating(true);
+        stopRequestedRef.current = false;
+        setCalcStats({ current: 0, total: 0, valid: 0 });
+
+        await new Promise(r => setTimeout(r, 10));
+
+        try {
+            const result = await generateGridSearchCells({
+                features, gridMode, cellSize, pathOrder, groupByRegion, onFilterCell,
+                maxElevation: enableElevation ? maxElevation : 0,
+                minDensity: enableDensity ? minDensity : 0,
+                minGhsPop: enableGhsPop ? minGhsPop : 0,
+                minGhsBuilt: enableGhsBuilt ? minGhsBuilt : 0,
+                allowMissingGhs,
+                bypassFilters,
+                cellOverlap: cellOverlap / 100,
+                centroidOverlap: centroidOverlap / 100,
+                ghsFilterMode,
+                maxCellsLimit,
+                skipPolygons: globalProcessedHopsRef.current
+            }, async (stats) => {
+                setCalcStats({ current: stats.current, total: stats.total, valid: stats.validCells.length });
+                if (stopRequestedRef.current) return false;
+                await new Promise(r => setTimeout(r, 0));
+                return true;
+            });
+
+            if (result.error) {
+                alert(result.error);
+                setIsCalculating(false);
+                return;
+            }
+
+            setGridCells(result.validCells);
+            skippedCellsRef.current = result.skippedCells || [];
+            setSkippedTotal(result.skippedCells ? result.skippedCells.length : 0);
+
+            if (autoPlay === 'preview') {
+                setProgressIndex(result.validCells.length);
+                setIsPlaying(false);
+            } else {
+                setProgressIndex(0);
+                setIsPlaying(stopRequestedRef.current ? false : autoPlay);
+            }
+
+            setSimulatorData(turf.featureCollection(result.validCells));
+            setSimulatorPath(turf.featureCollection([]));
+            setSimulatorScanner(turf.featureCollection([]));
+            setIsCalculating(false);
+        } catch (err) {
+            console.error("Turf Error:", err);
+            alert("An error occurred during grid generation.");
+            setIsCalculating(false);
+        }
+    }, [pickerRegions, pickerPolygons, gridMode, pathOrder, groupByRegion, cellSize, cellOverlap, centroidOverlap, maxCellsLimit, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, onFilterCell, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters, setSimulatorData, setSimulatorPath, setSimulatorScanner]);
+
+    const activeSettingsRef = useRef({ gridMode, cellSize, cellOverlap, centroidOverlap, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, pathOrder, groupByRegion, maxCellsLimit, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters });
+
+    useEffect(() => {
+        const prev = activeSettingsRef.current;
+        let changed = false;
+
+        if (prev.gridMode !== gridMode) changed = true;
+        if (prev.cellSize !== cellSize) changed = true;
+        if (prev.cellOverlap !== cellOverlap) changed = true;
+        if (prev.centroidOverlap !== centroidOverlap) changed = true;
+        if (prev.maxElevation !== maxElevation) changed = true;
+        if (prev.minDensity !== minDensity) changed = true;
+        if (prev.minGhsPop !== minGhsPop) changed = true;
+        if (prev.minGhsBuilt !== minGhsBuilt) changed = true;
+        if (prev.ghsFilterMode !== ghsFilterMode) changed = true;
+        if (prev.pathOrder !== pathOrder) changed = true;
+        if (prev.groupByRegion !== groupByRegion) changed = true;
+        if (prev.maxCellsLimit !== maxCellsLimit) changed = true;
+        if (prev.enableElevation !== enableElevation) changed = true;
+        if (prev.enableDensity !== enableDensity) changed = true;
+        if (prev.enableGhsPop !== enableGhsPop) changed = true;
+        if (prev.enableGhsBuilt !== enableGhsBuilt) changed = true;
+        if (prev.allowMissingGhs !== allowMissingGhs) changed = true;
+        if (prev.bypassFilters !== bypassFilters) changed = true;
+
+        if (changed) {
+            globalProcessedHopsRef.current = [];
+            activeSettingsRef.current = { gridMode, cellSize, cellOverlap, centroidOverlap, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, pathOrder, groupByRegion, maxCellsLimit, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters };
+            if (pickerPolygons && pickerPolygons.length > 0) {
+                setTimeout(() => computeGrid('preview'), 0);
+            }
+        }
+    }, [gridMode, cellSize, cellOverlap, centroidOverlap, maxElevation, minDensity, minGhsPop, minGhsBuilt, ghsFilterMode, pathOrder, groupByRegion, maxCellsLimit, pickerPolygons, computeGrid, enableElevation, enableDensity, enableGhsPop, enableGhsBuilt, allowMissingGhs, bypassFilters]);
+
+    const prevRegionsRef = useRef<string>('');
+    useEffect(() => {
+        const currentRegions = (pickerRegions || []).map(r => r.gid).sort().join(',');
+        if (prevRegionsRef.current !== currentRegions) {
+            prevRegionsRef.current = currentRegions;
+            setGridCells([]);
+            setIsPlaying(false);
+            setProgressIndex(0);
+            setSimulatorData(turf.featureCollection([]));
+            setSimulatorPath(turf.featureCollection([]));
+            setSimulatorScanner(turf.featureCollection([]));
+        }
+    }, [pickerRegions, setSimulatorData, setSimulatorPath, setSimulatorScanner]);
+
+    const handleClear = useCallback(() => {
+        setGridCells([]);
+        setIsPlaying(false);
+        setProgressIndex(0);
+        setSimulatorData(turf.featureCollection([]));
+        setSimulatorPath(turf.featureCollection([]));
+        setSimulatorScanner(turf.featureCollection([]));
+        globalProcessedHopsRef.current = [];
+    }, [setSimulatorData, setSimulatorPath, setSimulatorScanner]);
+
+    // Animation Loop
+    useEffect(() => {
+        if (!isPlaying || progressIndex >= gridCells.length) {
+            if (progressIndex >= gridCells.length && isPlaying) setIsPlaying(false);
+            return;
+        }
+
+        const tick = (time: number) => {
+            if (time - lastTickRef.current > (1000 / (10 * speed))) {
+                setProgressIndex(prev => {
+                    if (prev < gridCells.length) {
+                        const cell = gridCells[prev];
+                        if (cell.properties.sim_status !== 'skipped') {
+                            globalProcessedHopsRef.current.push(cell);
+                        }
+                    }
+                    const next = prev + 1;
+                    return next > gridCells.length ? gridCells.length : next;
+                });
+                lastTickRef.current = time;
+            }
+            reqRef.current = requestAnimationFrame(tick);
+        };
+
+        reqRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (reqRef.current) cancelAnimationFrame(reqRef.current);
+        };
+    }, [isPlaying, progressIndex, gridCells.length, speed]);
+
+    // Sync State to GeoJSON
+    useEffect(() => {
+        if (gridCells.length === 0) return;
+
+        const updatedCells = gridCells.map((cell, i) => {
+            if (cell.properties.sim_status === 'skipped') return cell;
+            return {
+                ...cell,
+                properties: {
+                    ...cell.properties,
+                    sim_status: i < progressIndex ? 'processed' : 'pending'
+                }
+            };
+        });
+        setSimulatorData(turf.featureCollection(updatedCells));
+
+        const pathCoords = gridCells
+            .slice(0, progressIndex)
+            .filter(c => c.properties.sim_status !== 'skipped')
+            .map(c => turf.centroid(c).geometry.coordinates);
+
+        if (pathCoords.length > 1) {
+            setSimulatorPath(turf.featureCollection([turf.lineString(pathCoords)]));
+        } else {
+            setSimulatorPath(turf.featureCollection([]));
+        }
+
+        const activeCells = gridCells.filter(c => c.properties.sim_status !== 'skipped');
+        const currentIndex = gridCells.slice(0, progressIndex).filter(c => c.properties.sim_status !== 'skipped').length;
+
+        if (currentIndex > 0 && currentIndex <= activeCells.length) {
+            const currentCell = activeCells[currentIndex - 1];
+            const centroid = turf.centroid(currentCell);
+            let angle = 0;
+            if (currentIndex > 1) {
+                const prevCell = activeCells[currentIndex - 2];
+                angle = turf.bearing(turf.centroid(prevCell), centroid);
+            } else if (currentIndex === 1 && activeCells.length > 1) {
+                const nextCell = activeCells[1];
+                angle = turf.bearing(centroid, turf.centroid(nextCell));
+            }
+            centroid.properties = {
+                bearing: angle,
+                icon_state: (progressIndex % 2 === 0) ? 'pacman-open' : 'pacman-closed'
+            };
+            setSimulatorScanner(turf.featureCollection([centroid]));
+        } else {
+            setSimulatorScanner(turf.featureCollection([]));
+        }
+
+    }, [progressIndex, gridCells, setSimulatorData, setSimulatorPath, setSimulatorScanner]);
+
+    const processedCount = progressIndex;
+    const skippedCount = skippedTotal;
+    const validCount = gridCells.length;
+
+    return {
+        // State
+        gridCells,
+        progressIndex,
+        isPlaying,
+        speed,
+        isCalculating,
+        calcStats,
+        skippedCellsRef,
+        stopRequestedRef,
+
+        // Metrics
+        processedCount,
+        skippedCount,
+        validCount,
+        ghsBounds,
+
+        // Configuration actions
+        settings,
+        applySettings,
+
+        // Core Actions
+        setIsPlaying,
+        setProgressIndex,
+        setSpeed,
+        computeGrid,
+        handleClear,
+        getFinalHopList,
+        getCurrentSettings,
+    };
+}
diff --git a/packages/ui/src/modules/places/gridsearch/simulator/types.ts b/packages/ui/src/modules/places/gridsearch/simulator/types.ts
index 9bfe8f05..5a1bba95 100644
--- a/packages/ui/src/modules/places/gridsearch/simulator/types.ts
+++ b/packages/ui/src/modules/places/gridsearch/simulator/types.ts
@@ -1,25 +1,25 @@
-import { GridGeneratorOptions, GridFeature, SimulatorGridCell } from '@polymech/shared';
-import type { FeatureCollection, Polygon, MultiPolygon, Point, LineString, Feature } from 'geojson';
-
-type SimulatorBaseConfig = Required<Omit<GridGeneratorOptions, 'features' | 'onFilterCell' | 'skipPolygons'>>;
-
-export interface GridSimulatorSettings extends SimulatorBaseConfig {
-    enableElevation: boolean;
-    enableDensity: boolean;
-    enableGhsPop: boolean;
-    enableGhsBuilt: boolean;
-}
-
-export interface GridSearchSimulatorProps {
-    pickerRegions: any[];
-    pickerPolygons: FeatureCollection<Polygon | MultiPolygon>[];
-    onFilterCell?: (cell: GridFeature | SimulatorGridCell | Feature<any, any>) => boolean;
-    setSimulatorData: (data: FeatureCollection<Polygon | MultiPolygon | Point, any>) => void;
-    setSimulatorPath: (data: FeatureCollection<LineString, any>) => void;
-    setSimulatorScanner: (data: FeatureCollection<Point, any>) => void;
-    initialSettings?: Partial<GridSimulatorSettings>;
-    simulatorSettings?: GridSimulatorSettings;
-    onSimulatorSettingsChange?: (settings: GridSimulatorSettings) => void;
-    canDebug?: boolean;
-    canPlaybackSpeed?: boolean;
-}
+import { GridGeneratorOptions, GridFeature, SimulatorGridCell } from '@polymech/shared';
+import type { FeatureCollection, Polygon, MultiPolygon, Point, LineString, Feature } from 'geojson';
+
+type SimulatorBaseConfig = Required<Omit<GridGeneratorOptions, 'features' | 'onFilterCell' | 'skipPolygons'>>;
+
+export interface GridSimulatorSettings extends SimulatorBaseConfig {
+    enableElevation: boolean;
+    enableDensity: boolean;
+    enableGhsPop: boolean;
+    enableGhsBuilt: boolean;
+}
+
+export interface GridSearchSimulatorProps {
+    pickerRegions: any[];
+    pickerPolygons: FeatureCollection<Polygon | MultiPolygon>[];
+    onFilterCell?: (cell: GridFeature | SimulatorGridCell | Feature<any, any>) => boolean;
+    setSimulatorData: (data: FeatureCollection<Polygon | MultiPolygon | Point, any>) => void;
+    setSimulatorPath: (data: FeatureCollection<LineString, any>) => void;
+    setSimulatorScanner: (data: FeatureCollection<Point, any>) => void;
+    initialSettings?: Partial<GridSimulatorSettings>;
+    simulatorSettings?: GridSimulatorSettings;
+    onSimulatorSettingsChange?: (settings: GridSimulatorSettings) => void;
+    canDebug?: boolean;
+    canPlaybackSpeed?: boolean;
+}
diff --git a/packages/ui/src/modules/places/hooks/useEnrichment.ts b/packages/ui/src/modules/places/hooks/useEnrichment.ts
deleted file mode 100644
index 4a504a23..00000000
--- a/packages/ui/src/modules/places/hooks/useEnrichment.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useState, useCallback } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-
-export function useLocationEnrichment({
-    onUpdate
-}: {
-    onUpdate?: (placeId: string, updates: any) => void
-} = {}) {
-    const [isEnriching, setIsEnriching] = useState(false);
-    const [progress, setProgress] = useState<{ current: number; total: number; message: string } | null>(null);
-
-    const enrich = useCallback(async (placeIds: string[], enrichers: string[]) => {
-        setIsEnriching(true);
-        setProgress({ current: 0, total: placeIds.length, message: 'Starting...' });
-
-        const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
-        const url = `${apiUrl}/api/competitors/enrich/stream?place_ids=${placeIds.join(',')}&enrichers=${enrichers.join(',')}`;
-
-        try {
-            const token = localStorage.getItem('token');
-            const headers: any = {};
-            if (token) headers['Authorization'] = `Bearer ${token}`;
-
-            const response = await fetch(url + (token ? `&token=${token}` : ''), { headers });
-
-            if (!response.body) throw new Error('No stream body');
-
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            let buffer = '';
-
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done) break;
-
-                buffer += decoder.decode(value, { stream: true });
-                const lines = buffer.split('\n\n');
-                buffer = lines.pop() || '';
-
-                for (const line of lines) {
-                    const eventLine = line.split('\n').find(l => l.startsWith('event: '));
-                    const dataLine = line.split('\n').find(l => l.startsWith('data: '));
-
-                    if (eventLine && dataLine) {
-                        const event = eventLine.substring(7).trim();
-                        const dataStr = dataLine.substring(6).trim();
-
-                        try {
-                            const data = JSON.parse(dataStr);
-
-                            if (event === 'progress') {
-                                setProgress({
-                                    current: data.current,
-                                    total: data.total,
-                                    message: data.message
-                                });
-                            } else if (event === 'enrichment-update') {
-                                if (onUpdate && data.place_id && data.updates) {
-                                    onUpdate(data.place_id, data.updates);
-                                }
-                            } else if (event === 'complete') {
-                                setIsEnriching(false);
-                            }
-                        } catch (e) {
-                            // ignore parse error
-                        }
-                    }
-                }
-            }
-        } catch (e) {
-            console.error('Enrichment stream failed', e);
-        } finally {
-            setIsEnriching(false);
-            setProgress(null);
-        }
-    }, [onUpdate]);
-
-    return { enrich, isEnriching, progress };
-}
diff --git a/packages/ui/src/modules/places/hooks/useGridSearchState.ts b/packages/ui/src/modules/places/hooks/useGridSearchState.ts
index ccb3e762..dbfb89f4 100644
--- a/packages/ui/src/modules/places/hooks/useGridSearchState.ts
+++ b/packages/ui/src/modules/places/hooks/useGridSearchState.ts
@@ -1,218 +1,218 @@
-import { useCallback, useEffect, useState } from 'react';
-import maplibregl from 'maplibre-gl';
-import { useSearchParams } from 'react-router-dom';
-import { fetchGridSearchesLocal, fetchGridSearchLocal, fetchGridSearchPolygons, GridEnumerateResult } from '../client-searches';
-
-export function useGridSearchState() {
-    const [searchParams, setSearchParams] = useSearchParams();
-    const [mapInstance, setMapInstance] = useState<maplibregl.Map | null>(null);
-
-    // URL-aware state helpers
-    const updateParams = useCallback((updates: Record<string, string | null>) => {
-        setSearchParams(prev => {
-            const next = new URLSearchParams(prev);
-            Object.entries(updates).forEach(([key, value]) => {
-                if (value === null || value === '') next.delete(key);
-                else next.set(key, value);
-            });
-            return next;
-        }, { replace: true });
-    }, [setSearchParams]);
-
-    const updateParam = useCallback((key: string, value: string | null) => {
-        updateParams({ [key]: value });
-    }, [updateParams]);
-
-    const showPolygons = searchParams.get('polygons') === '1';
-    const [loading, setLoading] = useState(false);
-    const [loadingPolygons, setLoadingPolygons] = useState(false);
-
-    const [searches, setSearches] = useState<any[]>([]);
-    const selectedSearch = searchParams.get('search');
-    const [searchData, setSearchData] = useState<GridEnumerateResult | null>(null);
-
-    // Simulator Datasets
-    const [simulatorData, setSimulatorData] = useState<any>({ type: 'FeatureCollection', features: [] });
-    const [simulatorPath, setSimulatorPath] = useState<any>({ type: 'FeatureCollection', features: [] });
-    const [simulatorScanner, setSimulatorScanner] = useState<any>({ type: 'FeatureCollection', features: [] });
-    
-    // Derived Map Datasets
-    const [bboxesData, setBboxesData] = useState<any>({ type: 'FeatureCollection', features: [] });
-    const [polygonsData, setPolygonsData] = useState<any>({ type: 'FeatureCollection', features: [] });
-    const [targetBounds, setTargetBounds] = useState<maplibregl.LngLatBoundsLike | undefined>(undefined);
-
-    const setSelectedSearch = useCallback((val: string | null) => {
-        updateParams({ search: val, polygons: null });
-    }, [updateParams]);
-
-    const getPersistentToggle = useCallback((key: string, urlValue: string | null, defaultValue: boolean): boolean => {
-        if (typeof window === 'undefined') return defaultValue;
-        if (urlValue !== null) {
-            localStorage.setItem(`gridsearch_${key}`, urlValue);
-            return urlValue === '1';
-        }
-        const stored = localStorage.getItem(`gridsearch_${key}`);
-        if (stored !== null) return stored === '1';
-        return defaultValue;
-    }, []);
-
-    const getPersistentString = useCallback((key: string, urlValue: string | null): string | null => {
-        if (typeof window === 'undefined') return null;
-        if (urlValue !== null) {
-            localStorage.setItem(`gridsearch_${key}`, urlValue);
-            return urlValue;
-        }
-        return localStorage.getItem(`gridsearch_${key}`);
-    }, []);
-
-    const includeStats = getPersistentToggle('stats', searchParams.get('stats'), true);
-    const showDensity = getPersistentToggle('density', searchParams.get('density'), false);
-    const showCenters = getPersistentToggle('centers', searchParams.get('centers'), false);
-    const gadmPickerActive = getPersistentToggle('picker', searchParams.get('picker'), false);
-    const urlStyle = getPersistentString('style', searchParams.get('style'));
-    const posterMode = getPersistentToggle('poster', searchParams.get('poster'), false);
-    const posterTheme = getPersistentString('theme', searchParams.get('theme')) || 'terracotta';
-
-    const setPersistentParam = useCallback((key: string, val: string | null) => {
-        if (typeof window !== 'undefined') {
-            if (val === null) localStorage.removeItem(`gridsearch_${key}`);
-            else localStorage.setItem(`gridsearch_${key}`, val);
-        }
-        updateParam(key, val);
-    }, [updateParam]);
-
-    const setIncludeStats = useCallback((val: boolean) => setPersistentParam('stats', val ? '1' : '0'), [setPersistentParam]);
-    const setShowDensity = useCallback((val: boolean) => setPersistentParam('density', val ? '1' : '0'), [setPersistentParam]);
-    const setShowCenters = useCallback((val: boolean) => setPersistentParam('centers', val ? '1' : '0'), [setPersistentParam]);
-    const setGadmPickerActive = useCallback((val: boolean) => setPersistentParam('picker', val ? '1' : '0'), [setPersistentParam]);
-    const setUrlStyle = useCallback((style: string) => setPersistentParam('style', style), [setPersistentParam]);
-    const setPosterMode = useCallback((val: boolean) => setPersistentParam('poster', val ? '1' : '0'), [setPersistentParam]);
-    const setPosterTheme = useCallback((theme: string) => setPersistentParam('theme', theme), [setPersistentParam]);
-
-    const [pickerRegions, setPickerRegions] = useState<any[]>([]);
-    const [pickerPolygons, setPickerPolygons] = useState<any[]>([]);
-
-    useEffect(() => {
-        fetchGridSearchesLocal()
-            .then((list) => {
-                const parsed = list.map((id: string) => {
-                    let regionName = id;
-                    let level = 'unknown';
-                    let query = '';
-
-                    const cleanId = id.replace(/^grid-state-/, '');
-                    const levels = ['states', 'provinces', 'districts', 'cities', 'towns', 'villages'];
-                    
-                    if (cleanId.startsWith('search-') || cleanId.startsWith('email-')) {
-                        const parts = cleanId.split('-');
-                        const levelIdx = parts.findIndex(p => levels.includes(p));
-                        if (levelIdx !== -1) {
-                            level = parts[levelIdx];
-                            regionName = parts.slice(1, levelIdx).join('-');
-                            query = parts.slice(levelIdx + 1).join('-');
-                        } else {
-                            regionName = parts.slice(1).join('-');
-                        }
-                        
-                        regionName = regionName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
-                        if (query) {
-                            query = query.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
-                        }
-                    }
-
-                    return { id, regionName, level, query };
-                });
-                setSearches(parsed);
-            })
-            .catch(console.error);
-    }, []);
-
-    useEffect(() => {
-        if (!selectedSearch) return;
-        setLoading(true);
-        fetchGridSearchLocal(selectedSearch).then(data => {
-            setSearchData(data);
-            setLoading(false);
-
-            const features = data.areas.map(area => {
-                if (!area.bbox) return null;
-                const [minX, minY, maxX, maxY] = area.bbox;
-                return {
-                    type: 'Feature',
-                    properties: {
-                        name: area.name, gid: area.gid, level: area.level,
-                        population: area.stats?.totalPopulation ?? 0,
-                        placeCount: area.stats?.placeCount ?? 0,
-                        avgElevation: area.stats?.avgElevation ?? 0,
-                        areaSqKm: area.areaSqKm ?? 0,
-                    },
-                    geometry: { type: 'Polygon', coordinates: [[[minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY], [minX, minY]]] }
-                };
-            }).filter(Boolean);
-
-            setBboxesData({ type: 'FeatureCollection', features });
-            setPolygonsData({ type: 'FeatureCollection', features: [] });
-
-            if (data.region.bbox) {
-                const [minX, minY, maxX, maxY] = data.region.bbox;
-                setTargetBounds([[minX, minY], [maxX, maxY]]);
-            } else if (features.length > 0) {
-                const bounds = new maplibregl.LngLatBounds();
-                features.forEach(f => {
-                    // @ts-ignore
-                    bounds.extend(f?.geometry.coordinates[0][0]);
-                    // @ts-ignore
-                    bounds.extend(f?.geometry.coordinates[0][2]);
-                });
-                setTargetBounds(bounds as any);
-            }
-        }).catch(err => { console.error(err); setLoading(false); });
-    }, [selectedSearch]);
-
-    const handleFetchPolygons = useCallback(async () => {
-        if (!searchData?.areas) return;
-        setLoadingPolygons(true);
-        try {
-            const fc: any = await fetchGridSearchPolygons(searchData.region?.gid, searchData.areas[0]?.level);
-            setPolygonsData(fc);
-            setBboxesData({ type: 'FeatureCollection', features: [] });
-            updateParam('polygons', '1');
-        } catch (e) { console.error(e); }
-        setLoadingPolygons(false);
-    }, [searchData, updateParam]);
-
-    useEffect(() => {
-        if (showPolygons && searchData && !loadingPolygons && polygonsData.features.length === 0 && bboxesData.features.length > 0) {
-            handleFetchPolygons();
-        }
-    }, [showPolygons, searchData, loadingPolygons, handleFetchPolygons, polygonsData.features.length, bboxesData.features.length]);
-
-    const handleSearchGenerated = useCallback((searchName: string, genRegion: string, genLevel: string) => {
-        setSearches(prev => {
-            if (prev.find(s => s.id === searchName)) return prev;
-            return [...prev, { id: searchName, regionName: genRegion, level: genLevel, query: '', generatedAt: new Date().toISOString() }];
-        });
-        setSelectedSearch(searchName);
-    }, [setSelectedSearch]);
-
-    return {
-        mapInstance, setMapInstance,
-        bboxesData, polygonsData, targetBounds,
-        urlStyle, setUrlStyle,
-        posterMode, setPosterMode,
-        posterTheme, setPosterTheme,
-        showDensity, setShowDensity,
-        showCenters, setShowCenters,
-        gadmPickerActive, setGadmPickerActive,
-        includeStats, setIncludeStats,
-        searches, selectedSearch, setSelectedSearch,
-        searchData, loading, 
-        loadingPolygons, handleFetchPolygons,
-        pickerRegions, setPickerRegions,
-        pickerPolygons, setPickerPolygons,
-        simulatorData, setSimulatorData,
-        simulatorPath, setSimulatorPath,
-        simulatorScanner, setSimulatorScanner,
-        handleSearchGenerated
-    };
-}
+import { useCallback, useEffect, useState } from 'react';
+import maplibregl from 'maplibre-gl';
+import { useSearchParams } from 'react-router-dom';
+import { fetchGridSearchesLocal, fetchGridSearchLocal, fetchGridSearchPolygons, GridEnumerateResult } from '../client-gridsearch';
+
+export function useGridSearchState() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [mapInstance, setMapInstance] = useState<maplibregl.Map | null>(null);
+
+    // URL-aware state helpers
+    const updateParams = useCallback((updates: Record<string, string | null>) => {
+        setSearchParams(prev => {
+            const next = new URLSearchParams(prev);
+            Object.entries(updates).forEach(([key, value]) => {
+                if (value === null || value === '') next.delete(key);
+                else next.set(key, value);
+            });
+            return next;
+        }, { replace: true });
+    }, [setSearchParams]);
+
+    const updateParam = useCallback((key: string, value: string | null) => {
+        updateParams({ [key]: value });
+    }, [updateParams]);
+
+    const showPolygons = searchParams.get('polygons') === '1';
+    const [loading, setLoading] = useState(false);
+    const [loadingPolygons, setLoadingPolygons] = useState(false);
+
+    const [searches, setSearches] = useState<any[]>([]);
+    const selectedSearch = searchParams.get('search');
+    const [searchData, setSearchData] = useState<GridEnumerateResult | null>(null);
+
+    // Simulator Datasets
+    const [simulatorData, setSimulatorData] = useState<any>({ type: 'FeatureCollection', features: [] });
+    const [simulatorPath, setSimulatorPath] = useState<any>({ type: 'FeatureCollection', features: [] });
+    const [simulatorScanner, setSimulatorScanner] = useState<any>({ type: 'FeatureCollection', features: [] });
+    
+    // Derived Map Datasets
+    const [bboxesData, setBboxesData] = useState<any>({ type: 'FeatureCollection', features: [] });
+    const [polygonsData, setPolygonsData] = useState<any>({ type: 'FeatureCollection', features: [] });
+    const [targetBounds, setTargetBounds] = useState<maplibregl.LngLatBoundsLike | undefined>(undefined);
+
+    const setSelectedSearch = useCallback((val: string | null) => {
+        updateParams({ search: val, polygons: null });
+    }, [updateParams]);
+
+    const getPersistentToggle = useCallback((key: string, urlValue: string | null, defaultValue: boolean): boolean => {
+        if (typeof window === 'undefined') return defaultValue;
+        if (urlValue !== null) {
+            localStorage.setItem(`gridsearch_${key}`, urlValue);
+            return urlValue === '1';
+        }
+        const stored = localStorage.getItem(`gridsearch_${key}`);
+        if (stored !== null) return stored === '1';
+        return defaultValue;
+    }, []);
+
+    const getPersistentString = useCallback((key: string, urlValue: string | null): string | null => {
+        if (typeof window === 'undefined') return null;
+        if (urlValue !== null) {
+            localStorage.setItem(`gridsearch_${key}`, urlValue);
+            return urlValue;
+        }
+        return localStorage.getItem(`gridsearch_${key}`);
+    }, []);
+
+    const includeStats = getPersistentToggle('stats', searchParams.get('stats'), true);
+    const showDensity = getPersistentToggle('density', searchParams.get('density'), false);
+    const showCenters = getPersistentToggle('centers', searchParams.get('centers'), false);
+    const gadmPickerActive = getPersistentToggle('picker', searchParams.get('picker'), false);
+    const urlStyle = getPersistentString('style', searchParams.get('style'));
+    const posterMode = getPersistentToggle('poster', searchParams.get('poster'), false);
+    const posterTheme = getPersistentString('theme', searchParams.get('theme')) || 'terracotta';
+
+    const setPersistentParam = useCallback((key: string, val: string | null) => {
+        if (typeof window !== 'undefined') {
+            if (val === null) localStorage.removeItem(`gridsearch_${key}`);
+            else localStorage.setItem(`gridsearch_${key}`, val);
+        }
+        updateParam(key, val);
+    }, [updateParam]);
+
+    const setIncludeStats = useCallback((val: boolean) => setPersistentParam('stats', val ? '1' : '0'), [setPersistentParam]);
+    const setShowDensity = useCallback((val: boolean) => setPersistentParam('density', val ? '1' : '0'), [setPersistentParam]);
+    const setShowCenters = useCallback((val: boolean) => setPersistentParam('centers', val ? '1' : '0'), [setPersistentParam]);
+    const setGadmPickerActive = useCallback((val: boolean) => setPersistentParam('picker', val ? '1' : '0'), [setPersistentParam]);
+    const setUrlStyle = useCallback((style: string) => setPersistentParam('style', style), [setPersistentParam]);
+    const setPosterMode = useCallback((val: boolean) => setPersistentParam('poster', val ? '1' : '0'), [setPersistentParam]);
+    const setPosterTheme = useCallback((theme: string) => setPersistentParam('theme', theme), [setPersistentParam]);
+
+    const [pickerRegions, setPickerRegions] = useState<any[]>([]);
+    const [pickerPolygons, setPickerPolygons] = useState<any[]>([]);
+
+    useEffect(() => {
+        fetchGridSearchesLocal()
+            .then((list) => {
+                const parsed = list.map((id: string) => {
+                    let regionName = id;
+                    let level = 'unknown';
+                    let query = '';
+
+                    const cleanId = id.replace(/^grid-state-/, '');
+                    const levels = ['states', 'provinces', 'districts', 'cities', 'towns', 'villages'];
+                    
+                    if (cleanId.startsWith('search-') || cleanId.startsWith('email-')) {
+                        const parts = cleanId.split('-');
+                        const levelIdx = parts.findIndex(p => levels.includes(p));
+                        if (levelIdx !== -1) {
+                            level = parts[levelIdx];
+                            regionName = parts.slice(1, levelIdx).join('-');
+                            query = parts.slice(levelIdx + 1).join('-');
+                        } else {
+                            regionName = parts.slice(1).join('-');
+                        }
+                        
+                        regionName = regionName.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
+                        if (query) {
+                            query = query.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
+                        }
+                    }
+
+                    return { id, regionName, level, query };
+                });
+                setSearches(parsed);
+            })
+            .catch(console.error);
+    }, []);
+
+    useEffect(() => {
+        if (!selectedSearch) return;
+        setLoading(true);
+        fetchGridSearchLocal(selectedSearch).then(data => {
+            setSearchData(data);
+            setLoading(false);
+
+            const features = data.areas.map(area => {
+                if (!area.bbox) return null;
+                const [minX, minY, maxX, maxY] = area.bbox;
+                return {
+                    type: 'Feature',
+                    properties: {
+                        name: area.name, gid: area.gid, level: area.level,
+                        population: area.stats?.totalPopulation ?? 0,
+                        placeCount: area.stats?.placeCount ?? 0,
+                        avgElevation: area.stats?.avgElevation ?? 0,
+                        areaSqKm: area.areaSqKm ?? 0,
+                    },
+                    geometry: { type: 'Polygon', coordinates: [[[minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY], [minX, minY]]] }
+                };
+            }).filter(Boolean);
+
+            setBboxesData({ type: 'FeatureCollection', features });
+            setPolygonsData({ type: 'FeatureCollection', features: [] });
+
+            if (data.region.bbox) {
+                const [minX, minY, maxX, maxY] = data.region.bbox;
+                setTargetBounds([[minX, minY], [maxX, maxY]]);
+            } else if (features.length > 0) {
+                const bounds = new maplibregl.LngLatBounds();
+                features.forEach(f => {
+                    // @ts-ignore
+                    bounds.extend(f?.geometry.coordinates[0][0]);
+                    // @ts-ignore
+                    bounds.extend(f?.geometry.coordinates[0][2]);
+                });
+                setTargetBounds(bounds as any);
+            }
+        }).catch(err => { console.error(err); setLoading(false); });
+    }, [selectedSearch]);
+
+    const handleFetchPolygons = useCallback(async () => {
+        if (!searchData?.areas) return;
+        setLoadingPolygons(true);
+        try {
+            const fc: any = await fetchGridSearchPolygons({ regionGid: searchData.region?.gid, level: searchData.areas[0]?.level });
+            setPolygonsData(fc);
+            setBboxesData({ type: 'FeatureCollection', features: [] });
+            updateParam('polygons', '1');
+        } catch (e) { console.error(e); }
+        setLoadingPolygons(false);
+    }, [searchData, updateParam]);
+
+    useEffect(() => {
+        if (showPolygons && searchData && !loadingPolygons && polygonsData.features.length === 0 && bboxesData.features.length > 0) {
+            handleFetchPolygons();
+        }
+    }, [showPolygons, searchData, loadingPolygons, handleFetchPolygons, polygonsData.features.length, bboxesData.features.length]);
+
+    const handleSearchGenerated = useCallback((searchName: string, genRegion: string, genLevel: string) => {
+        setSearches(prev => {
+            if (prev.find(s => s.id === searchName)) return prev;
+            return [...prev, { id: searchName, regionName: genRegion, level: genLevel, query: '', generatedAt: new Date().toISOString() }];
+        });
+        setSelectedSearch(searchName);
+    }, [setSelectedSearch]);
+
+    return {
+        mapInstance, setMapInstance,
+        bboxesData, polygonsData, targetBounds,
+        urlStyle, setUrlStyle,
+        posterMode, setPosterMode,
+        posterTheme, setPosterTheme,
+        showDensity, setShowDensity,
+        showCenters, setShowCenters,
+        gadmPickerActive, setGadmPickerActive,
+        includeStats, setIncludeStats,
+        searches, selectedSearch, setSelectedSearch,
+        searchData, loading, 
+        loadingPolygons, handleFetchPolygons,
+        pickerRegions, setPickerRegions,
+        pickerPolygons, setPickerPolygons,
+        simulatorData, setSimulatorData,
+        simulatorPath, setSimulatorPath,
+        simulatorScanner, setSimulatorScanner,
+        handleSearchGenerated
+    };
+}
diff --git a/packages/ui/src/modules/places/hooks/useMapControls.ts b/packages/ui/src/modules/places/hooks/useMapControls.ts
index 5c50f927..d11b5d5a 100644
--- a/packages/ui/src/modules/places/hooks/useMapControls.ts
+++ b/packages/ui/src/modules/places/hooks/useMapControls.ts
@@ -1,116 +1,109 @@
-import { useState, useCallback, useRef } from 'react';
-import maplibregl from 'maplibre-gl';
-
-export function useMapControls(onMapCenterUpdate?: (loc: string, zoom?: number) => void) {
-    const [currentCenterLabel, setCurrentCenterLabel] = useState<string | null>(null);
-    const [mapInternals, setMapInternals] = useState<{ zoom: number; lat: number; lng: number } | null>(null);
-    const [isLocating, setIsLocating] = useState(false);
-    
-    // Optional reference to user's location marker
-    const userLocationMarkerRef = useRef<maplibregl.Marker | null>(null);
-
-    const setupMapListeners = useCallback((map: maplibregl.Map, onMapMove?: (state: { lat: number; lng: number; zoom: number }) => void) => {
-        const updateInternals = () => {
-            const c = map.getCenter();
-            const z = map.getZoom();
-            setMapInternals({
-                zoom: Math.round(z * 100) / 100,
-                lat: Math.round(c.lat * 10000) / 10000,
-                lng: Math.round(c.lng * 10000) / 10000
-            });
-        };
-
-        const handleMoveEnd = async () => {
-            const c = map.getCenter();
-            const z = map.getZoom();
-
-            if (onMapMove) {
-                onMapMove({ lat: c.lat, lng: c.lng, zoom: z });
-            }
-
-            try {
-                const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
-                const res = await fetch(`${apiUrl}/api/regions/reverse?lat=${c.lat}&lon=${c.lng}`);
-                if (res.ok) {
-                    const json = await res.json();
-                    if (json.data) {
-                        const geo = json.data;
-                        const parts: string[] = [];
-                        if (geo.city && geo.city !== 'unknown') parts.push(geo.city);
-                        else if (geo.locality && geo.locality !== 'unknown') parts.push(geo.locality);
-                        else if (geo.principalSubdivision && geo.principalSubdivision !== 'unknown') parts.push(geo.principalSubdivision);
-                        if (geo.countryName) parts.push(geo.countryName);
-
-                        const label = parts.length > 0 ? parts.join(', ') : null;
-                        setCurrentCenterLabel(label);
-                        if (onMapCenterUpdate && label) {
-                            onMapCenterUpdate(label, z);
-                        }
-                    }
-                }
-            } catch (e) {
-                console.error("Failed to reverse geocode center", e);
-            }
-        };
-
-        map.on('move', updateInternals);
-        map.on('zoom', updateInternals);
-        map.on('moveend', handleMoveEnd);
-
-        // Initial set
-        updateInternals();
-
-        return () => {
-             map.off('move', updateInternals);
-             map.off('zoom', updateInternals);
-             map.off('moveend', handleMoveEnd);
-        };
-    }, [onMapCenterUpdate]);
-
-    const handleLocate = useCallback(async (map: maplibregl.Map | null) => {
-        if (!map) return;
-        setIsLocating(true);
-        try {
-            const res = await fetch('http://ip-api.com/json/');
-            if (res.ok) {
-                const data = await res.json();
-                if (data.status === 'success' && data.lat && data.lon) {
-                    if (userLocationMarkerRef.current) {
-                        userLocationMarkerRef.current.remove();
-                    }
-                    const marker = new maplibregl.Marker({ color: '#ef4444' })
-                        .setLngLat([data.lon, data.lat])
-                        .setPopup(new maplibregl.Popup({ closeButton: false }).setText('Your Location (IP)'))
-                        .addTo(map);
-
-                    userLocationMarkerRef.current = marker;
-
-                    map.flyTo({
-                        center: [data.lon, data.lat],
-                        zoom: 12
-                    });
-                }
-            }
-        } catch (e) {
-            console.error("Error during IP geolocation", e);
-        } finally {
-            setIsLocating(false);
-        }
-    }, []);
-
-    const cleanupLocateMarker = useCallback(() => {
-        if (userLocationMarkerRef.current) {
-            userLocationMarkerRef.current.remove();
-            userLocationMarkerRef.current = null;
-        }
-    }, []);
-
-    return {
-        mapInternals,
-        currentCenterLabel,
-        isLocating,
-        setupMapListeners,
-        handleLocate,
-        cleanupLocateMarker
-    };
-}
+import { useState, useCallback, useRef } from 'react';
+import maplibregl from 'maplibre-gl';
+import { fetchReverseGeocode, fetchIpLocation } from '../client-gridsearch';
+
+export function useMapControls(onMapCenterUpdate?: (loc: string, zoom?: number) => void) {
+    const [currentCenterLabel, setCurrentCenterLabel] = useState<string | null>(null);
+    const [mapInternals, setMapInternals] = useState<{ zoom: number; lat: number; lng: number } | null>(null);
+    const [isLocating, setIsLocating] = useState(false);
+
+    // Optional reference to user's location marker
+    const userLocationMarkerRef = useRef<maplibregl.Marker | null>(null);
+
+    const setupMapListeners = useCallback((map: maplibregl.Map, onMapMove?: (state: { lat: number; lng: number; zoom: number }) => void) => {
+        const updateInternals = () => {
+            const c = map.getCenter();
+            const z = map.getZoom();
+            setMapInternals({
+                zoom: Math.round(z * 100) / 100,
+                lat: Math.round(c.lat * 10000) / 10000,
+                lng: Math.round(c.lng * 10000) / 10000
+            });
+        };
+
+        const handleMoveEnd = async () => {
+            const c = map.getCenter();
+            const z = map.getZoom();
+
+            if (onMapMove) {
+                onMapMove({ lat: c.lat, lng: c.lng, zoom: z });
+            }
+
+            try {
+                const geo = await fetchReverseGeocode(c.lat, c.lng);
+                if (geo) {
+                    const parts: string[] = [];
+                    if (geo.city && geo.city !== 'unknown') parts.push(geo.city);
+                    else if (geo.locality && geo.locality !== 'unknown') parts.push(geo.locality);
+                    else if (geo.principalSubdivision && geo.principalSubdivision !== 'unknown') parts.push(geo.principalSubdivision);
+                    if (geo.countryName) parts.push(geo.countryName);
+
+                    const label = parts.length > 0 ? parts.join(', ') : null;
+                    setCurrentCenterLabel(label);
+                    if (onMapCenterUpdate && label) {
+                        onMapCenterUpdate(label, z);
+                    }
+                }
+            } catch (e) {
+                console.error("Failed to reverse geocode center", e);
+            }
+        };
+
+        map.on('move', updateInternals);
+        map.on('zoom', updateInternals);
+        map.on('moveend', handleMoveEnd);
+
+        // Initial set
+        updateInternals();
+
+        return () => {
+            map.off('move', updateInternals);
+            map.off('zoom', updateInternals);
+            map.off('moveend', handleMoveEnd);
+        };
+    }, [onMapCenterUpdate]);
+
+    const handleLocate = useCallback(async (map: maplibregl.Map | null) => {
+        if (!map) return;
+        setIsLocating(true);
+        try {
+            const data = await fetchIpLocation();
+            if (data.status === 'success' && data.lat && data.lon) {
+                if (userLocationMarkerRef.current) {
+                    userLocationMarkerRef.current.remove();
+                }
+                const marker = new maplibregl.Marker({ color: '#ef4444' })
+                    .setLngLat([data.lon, data.lat])
+                    .setPopup(new maplibregl.Popup({ closeButton: false }).setText('Your Location (IP)'))
+                    .addTo(map);
+
+                userLocationMarkerRef.current = marker;
+
+                map.flyTo({
+                    center: [data.lon, data.lat],
+                    zoom: 12
+                });
+            }
+        } catch (e) {
+            console.error("Error during IP geolocation", e);
+        } finally {
+            setIsLocating(false);
+        }
+    }, []);
+
+    const cleanupLocateMarker = useCallback(() => {
+        if (userLocationMarkerRef.current) {
+            userLocationMarkerRef.current.remove();
+            userLocationMarkerRef.current = null;
+        }
+    }, []);
+
+    return {
+        mapInternals,
+        currentCenterLabel,
+        isLocating,
+        setupMapListeners,
+        handleLocate,
+        cleanupLocateMarker
+    };
+}
diff --git a/packages/ui/src/modules/places/hooks/useRulerTool.ts b/packages/ui/src/modules/places/hooks/useRulerTool.ts
index 50afce69..86786070 100644
--- a/packages/ui/src/modules/places/hooks/useRulerTool.ts
+++ b/packages/ui/src/modules/places/hooks/useRulerTool.ts
@@ -1,198 +1,198 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import maplibregl from 'maplibre-gl';
-
-const RULER_SOURCE = 'ruler-source';
-const RULER_LINE_LAYER = 'ruler-line-layer';
-const RULER_POINT_LAYER = 'ruler-point-layer';
-const RULER_LABEL_LAYER = 'ruler-label-layer';
-
-/** Haversine distance between two [lng, lat] points in km */
-function haversineKm(a: [number, number], b: [number, number]): number {
-    const R = 6371;
-    const dLat = ((b[1] - a[1]) * Math.PI) / 180;
-    const dLon = ((b[0] - a[0]) * Math.PI) / 180;
-    const lat1 = (a[1] * Math.PI) / 180;
-    const lat2 = (b[1] * Math.PI) / 180;
-    const h = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2;
-    return 2 * R * Math.asin(Math.sqrt(h));
-}
-
-function formatDistance(km: number): string {
-    if (km < 1) return `${Math.round(km * 1000)} m`;
-    if (km < 100) return `${km.toFixed(2)} km`;
-    return `${Math.round(km).toLocaleString()} km`;
-}
-
-function buildGeoJSON(points: [number, number][]) {
-    const features: any[] = [];
-
-    // Line segments with segment distance labels
-    if (points.length >= 2) {
-        features.push({
-            type: 'Feature',
-            geometry: { type: 'LineString', coordinates: points },
-            properties: {}
-        });
-    }
-
-    // Point markers with cumulative distance
-    let cumulative = 0;
-    points.forEach((p, i) => {
-        if (i > 0) cumulative += haversineKm(points[i - 1], p);
-        features.push({
-            type: 'Feature',
-            geometry: { type: 'Point', coordinates: p },
-            properties: {
-                index: i,
-                label: i === 0 ? 'Start' : formatDistance(cumulative)
-            }
-        });
-    });
-
-    return { type: 'FeatureCollection', features };
-}
-
-export function useRulerTool(map: maplibregl.Map | null) {
-    const [active, setActive] = useState(false);
-    const [totalDistance, setTotalDistance] = useState(0);
-    const pointsRef = useRef<[number, number][]>([]);
-    const activeRef = useRef(false);
-
-    const updateSource = useCallback(() => {
-        if (!map) return;
-        const src = map.getSource(RULER_SOURCE) as maplibregl.GeoJSONSource | undefined;
-        if (!src) return;
-        const gj = buildGeoJSON(pointsRef.current);
-        src.setData(gj as any);
-
-        // Compute total
-        let total = 0;
-        const pts = pointsRef.current;
-        for (let i = 1; i < pts.length; i++) total += haversineKm(pts[i - 1], pts[i]);
-        setTotalDistance(total);
-    }, [map]);
-
-    const ensureLayers = useCallback(() => {
-        if (!map) return;
-        if (map.getSource(RULER_SOURCE)) return;
-
-        map.addSource(RULER_SOURCE, {
-            type: 'geojson',
-            data: { type: 'FeatureCollection', features: [] }
-        });
-
-        map.addLayer({
-            id: RULER_LINE_LAYER,
-            type: 'line',
-            source: RULER_SOURCE,
-            filter: ['==', '$type', 'LineString'],
-            paint: {
-                'line-color': '#f59e0b',
-                'line-width': 2.5,
-                'line-dasharray': [3, 2]
-            }
-        });
-
-        map.addLayer({
-            id: RULER_POINT_LAYER,
-            type: 'circle',
-            source: RULER_SOURCE,
-            filter: ['==', '$type', 'Point'],
-            paint: {
-                'circle-radius': 5,
-                'circle-color': '#f59e0b',
-                'circle-stroke-color': '#ffffff',
-                'circle-stroke-width': 2
-            }
-        });
-
-        map.addLayer({
-            id: RULER_LABEL_LAYER,
-            type: 'symbol',
-            source: RULER_SOURCE,
-            filter: ['==', '$type', 'Point'],
-            layout: {
-                'text-field': ['get', 'label'],
-                'text-size': 11,
-                'text-offset': [0, -1.5],
-                'text-anchor': 'bottom',
-                'text-allow-overlap': true,
-                'text-font': ['Open Sans Bold']
-            },
-            paint: {
-                'text-color': '#92400e',
-                'text-halo-color': '#ffffff',
-                'text-halo-width': 1.5
-            }
-        });
-    }, [map]);
-
-    const removeLayers = useCallback(() => {
-        if (!map) return;
-        try {
-            [RULER_LABEL_LAYER, RULER_POINT_LAYER, RULER_LINE_LAYER].forEach(id => {
-                if (map.getLayer(id)) map.removeLayer(id);
-            });
-            if (map.getSource(RULER_SOURCE)) map.removeSource(RULER_SOURCE);
-        } catch (_) { /* map already destroyed */ }
-    }, [map]);
-
-    const handleClick = useCallback((e: maplibregl.MapMouseEvent) => {
-        if (!activeRef.current) return;
-        pointsRef.current = [...pointsRef.current, [e.lngLat.lng, e.lngLat.lat]];
-        updateSource();
-    }, [updateSource]);
-
-    const reset = useCallback(() => {
-        pointsRef.current = [];
-        setTotalDistance(0);
-        updateSource();
-    }, [updateSource]);
-
-    const toggle = useCallback(() => {
-        setActive(prev => {
-            const next = !prev;
-            activeRef.current = next;
-            if (next && map) {
-                ensureLayers();
-                map.getCanvas().style.cursor = 'crosshair';
-                map.getCanvas().dataset.rulerActive = 'true';
-                map.on('click', handleClick);
-            } else if (map) {
-                map.off('click', handleClick);
-                map.getCanvas().style.cursor = '';
-                delete map.getCanvas().dataset.rulerActive;
-                removeLayers();
-                pointsRef.current = [];
-                setTotalDistance(0);
-            }
-            return next;
-        });
-    }, [map, ensureLayers, removeLayers, handleClick]);
-
-    // Re-add layers after style change (MapLibre loses them)
-    useEffect(() => {
-        if (!map || !active) return;
-        const handler = () => {
-            ensureLayers();
-            updateSource();
-        };
-        map.on('style.load', handler);
-        return () => { map.off('style.load', handler); };
-    }, [map, active, ensureLayers, updateSource]);
-
-    // Cleanup on unmount
-    useEffect(() => {
-        return () => {
-            if (map) {
-                try {
-                    map.off('click', handleClick);
-                    removeLayers();
-                    map.getCanvas().style.cursor = '';
-                } catch (_) { /* map already destroyed */ }
-            }
-        };
-    }, [map, handleClick, removeLayers]);
-
-    return { active, totalDistance, toggle, reset, formattedTotal: formatDistance(totalDistance), pointCount: pointsRef.current.length };
-}
+import { useState, useCallback, useEffect, useRef } from 'react';
+import maplibregl from 'maplibre-gl';
+
+const RULER_SOURCE = 'ruler-source';
+const RULER_LINE_LAYER = 'ruler-line-layer';
+const RULER_POINT_LAYER = 'ruler-point-layer';
+const RULER_LABEL_LAYER = 'ruler-label-layer';
+
+/** Haversine distance between two [lng, lat] points in km */
+function haversineKm(a: [number, number], b: [number, number]): number {
+    const R = 6371;
+    const dLat = ((b[1] - a[1]) * Math.PI) / 180;
+    const dLon = ((b[0] - a[0]) * Math.PI) / 180;
+    const lat1 = (a[1] * Math.PI) / 180;
+    const lat2 = (b[1] * Math.PI) / 180;
+    const h = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2;
+    return 2 * R * Math.asin(Math.sqrt(h));
+}
+
+function formatDistance(km: number): string {
+    if (km < 1) return `${Math.round(km * 1000)} m`;
+    if (km < 100) return `${km.toFixed(2)} km`;
+    return `${Math.round(km).toLocaleString()} km`;
+}
+
+function buildGeoJSON(points: [number, number][]) {
+    const features: any[] = [];
+
+    // Line segments with segment distance labels
+    if (points.length >= 2) {
+        features.push({
+            type: 'Feature',
+            geometry: { type: 'LineString', coordinates: points },
+            properties: {}
+        });
+    }
+
+    // Point markers with cumulative distance
+    let cumulative = 0;
+    points.forEach((p, i) => {
+        if (i > 0) cumulative += haversineKm(points[i - 1], p);
+        features.push({
+            type: 'Feature',
+            geometry: { type: 'Point', coordinates: p },
+            properties: {
+                index: i,
+                label: i === 0 ? 'Start' : formatDistance(cumulative)
+            }
+        });
+    });
+
+    return { type: 'FeatureCollection', features };
+}
+
+export function useRulerTool(map: maplibregl.Map | null) {
+    const [active, setActive] = useState(false);
+    const [totalDistance, setTotalDistance] = useState(0);
+    const pointsRef = useRef<[number, number][]>([]);
+    const activeRef = useRef(false);
+
+    const updateSource = useCallback(() => {
+        if (!map) return;
+        const src = map.getSource(RULER_SOURCE) as maplibregl.GeoJSONSource | undefined;
+        if (!src) return;
+        const gj = buildGeoJSON(pointsRef.current);
+        src.setData(gj as any);
+
+        // Compute total
+        let total = 0;
+        const pts = pointsRef.current;
+        for (let i = 1; i < pts.length; i++) total += haversineKm(pts[i - 1], pts[i]);
+        setTotalDistance(total);
+    }, [map]);
+
+    const ensureLayers = useCallback(() => {
+        if (!map) return;
+        if (map.getSource(RULER_SOURCE)) return;
+
+        map.addSource(RULER_SOURCE, {
+            type: 'geojson',
+            data: { type: 'FeatureCollection', features: [] }
+        });
+
+        map.addLayer({
+            id: RULER_LINE_LAYER,
+            type: 'line',
+            source: RULER_SOURCE,
+            filter: ['==', '$type', 'LineString'],
+            paint: {
+                'line-color': '#f59e0b',
+                'line-width': 2.5,
+                'line-dasharray': [3, 2]
+            }
+        });
+
+        map.addLayer({
+            id: RULER_POINT_LAYER,
+            type: 'circle',
+            source: RULER_SOURCE,
+            filter: ['==', '$type', 'Point'],
+            paint: {
+                'circle-radius': 5,
+                'circle-color': '#f59e0b',
+                'circle-stroke-color': '#ffffff',
+                'circle-stroke-width': 2
+            }
+        });
+
+        map.addLayer({
+            id: RULER_LABEL_LAYER,
+            type: 'symbol',
+            source: RULER_SOURCE,
+            filter: ['==', '$type', 'Point'],
+            layout: {
+                'text-field': ['get', 'label'],
+                'text-size': 11,
+                'text-offset': [0, -1.5],
+                'text-anchor': 'bottom',
+                'text-allow-overlap': true,
+                'text-font': ['Open Sans Bold']
+            },
+            paint: {
+                'text-color': '#92400e',
+                'text-halo-color': '#ffffff',
+                'text-halo-width': 1.5
+            }
+        });
+    }, [map]);
+
+    const removeLayers = useCallback(() => {
+        if (!map) return;
+        try {
+            [RULER_LABEL_LAYER, RULER_POINT_LAYER, RULER_LINE_LAYER].forEach(id => {
+                if (map.getLayer(id)) map.removeLayer(id);
+            });
+            if (map.getSource(RULER_SOURCE)) map.removeSource(RULER_SOURCE);
+        } catch (_) { /* map already destroyed */ }
+    }, [map]);
+
+    const handleClick = useCallback((e: maplibregl.MapMouseEvent) => {
+        if (!activeRef.current) return;
+        pointsRef.current = [...pointsRef.current, [e.lngLat.lng, e.lngLat.lat]];
+        updateSource();
+    }, [updateSource]);
+
+    const reset = useCallback(() => {
+        pointsRef.current = [];
+        setTotalDistance(0);
+        updateSource();
+    }, [updateSource]);
+
+    const toggle = useCallback(() => {
+        setActive(prev => {
+            const next = !prev;
+            activeRef.current = next;
+            if (next && map) {
+                ensureLayers();
+                map.getCanvas().style.cursor = 'crosshair';
+                map.getCanvas().dataset.rulerActive = 'true';
+                map.on('click', handleClick);
+            } else if (map) {
+                map.off('click', handleClick);
+                map.getCanvas().style.cursor = '';
+                delete map.getCanvas().dataset.rulerActive;
+                removeLayers();
+                pointsRef.current = [];
+                setTotalDistance(0);
+            }
+            return next;
+        });
+    }, [map, ensureLayers, removeLayers, handleClick]);
+
+    // Re-add layers after style change (MapLibre loses them)
+    useEffect(() => {
+        if (!map || !active) return;
+        const handler = () => {
+            ensureLayers();
+            updateSource();
+        };
+        map.on('style.load', handler);
+        return () => { map.off('style.load', handler); };
+    }, [map, active, ensureLayers, updateSource]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (map) {
+                try {
+                    map.off('click', handleClick);
+                    removeLayers();
+                    map.getCanvas().style.cursor = '';
+                } catch (_) { /* map already destroyed */ }
+            }
+        };
+    }, [map, handleClick, removeLayers]);
+
+    return { active, totalDistance, toggle, reset, formattedTotal: formatDistance(totalDistance), pointCount: pointsRef.current.length };
+}
diff --git a/packages/ui/src/modules/places/index.tsx b/packages/ui/src/modules/places/index.tsx
deleted file mode 100644
index dc46516a..00000000
--- a/packages/ui/src/modules/places/index.tsx
+++ /dev/null
@@ -1,859 +0,0 @@
-// Polyfill process for shared libraries
-if (typeof (window as any).process === 'undefined') {
-    (window as any).process = { env: {} };
-}
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { toast } from 'sonner';
-import { useAuth } from '../../hooks/useAuth';
-import { LayoutGrid, List, Map as MapIcon, X, Filter, SlidersHorizontal, Search, PieChart } from 'lucide-react';
-import { useSearchParams } from 'react-router-dom';
-import { API_URL } from '../../constants';
-import { type CompetitorFull } from '@polymech/shared';
-
-import { CompetitorsGridView } from './CompetitorsGridView';
-import { CompetitorsMapView } from './CompetitorsMapView';
-import { CompetitorsThumbView } from './CompetitorsThumbView';
-import { CompetitorsMetaView } from './CompetitorsMetaView';
-import { useCompetitorSettings } from './useCompetitorSettings';
-import { paramsToFilterModel } from './gridUtils';
-
-import { CompetitorSidebar } from './CompetitorSidebar';
-import { SearchSidebar, type SearchFormValues } from './SearchSidebar';
-import { Sheet, SheetContent, SheetTrigger } from '../../components/ui/sheet';
-import { useLocationEnrichment } from './hooks/useEnrichment';
-
-type ViewMode = 'grid' | 'thumb' | 'map' | 'meta';
-
-const Competitors: React.FC = () => {
-
-    const { session, loading: authLoading } = useAuth();
-    const [searchParams, setSearchParams] = useSearchParams();
-
-    const [query, setQuery] = useState(searchParams.get('query') || 'plastichub');
-    const [location, setLocation] = useState(searchParams.get('location') || 'barcelona, spain');
-    const [refresh, setRefresh] = useState(searchParams.get('refresh') === 'true');
-    const [filterCity, setFilterCity] = useState(searchParams.get('filterCity') || '');
-    const [filterCountry, setFilterCountry] = useState(searchParams.get('filterCountry') || '');
-    const [filterContinent, setFilterContinent] = useState(searchParams.get('filterContinent') || '');
-    const [filterType, setFilterType] = useState(searchParams.get('filterType') || '');
-
-    // Initialize viewMode: URL -> LocalStorage -> 'grid'
-    const [viewMode, setViewMode] = useState<ViewMode>(() => {
-        const urlView = searchParams.get('view') as ViewMode;
-        if (urlView && ['grid', 'thumb', 'map', 'meta'].includes(urlView)) return urlView;
-
-        const localView = localStorage.getItem('competitorsViewMode') as ViewMode;
-        if (localView && ['grid', 'thumb', 'map', 'meta'].includes(localView)) return localView;
-
-        return 'grid';
-    });
-
-    const [competitors, setCompetitors] = useState<CompetitorFull[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    let [streamingMode, setStreamingMode] = useState(true);
-    const [streamProgress, setStreamProgress] = useState<{ stage: string, percent: number } | null>(null);
-    const [showExcluded, setShowExcluded] = useState(false);
-
-    // Track enrichment status per competitor: 'idle' | 'loading' | 'success' | 'error'
-    const [enrichmentStatus, setEnrichmentStatus] = useState<Map<string, string>>(new Map());
-
-    const [liveAreas, setLiveAreas] = useState<any[]>([]);
-    const [liveRadii, setLiveRadii] = useState<any[]>([]);
-    const [liveNodes, setLiveNodes] = useState<any[]>([]);
-    const [liveScanner, setLiveScanner] = useState<any>(null);
-
-    const [searchPanelOpen, setSearchPanelOpen] = useState(() => {
-        const saved = localStorage.getItem('competitorsSearchPanelOpen');
-        return saved !== null ? JSON.parse(saved) : true;
-    });
-    const [sidebarWidth, setSidebarWidth] = useState(() => {
-        const saved = localStorage.getItem('competitorsSidebarWidth');
-        return saved ? parseInt(saved, 10) : 384; // Default to w-96 (384px)
-    });
-    const [isResizing, setIsResizing] = useState(false);
-
-    // Enrichment Hook - Lifted to Index to share state updates
-    const handleEnrichmentUpdate = useCallback((placeId: string, updates: any) => {
-        setCompetitors(prev => prev.map(c => {
-            if (c.place_id === placeId) {
-                // Update status to success for this item
-                setEnrichmentStatus(prev => {
-                    const next = new Map(prev);
-                    next.set(placeId, 'success');
-                    return next;
-                });
-
-                // Determine deep merge needs. 
-                // For now, mirroring server logic: top level + raw_data merge
-                return {
-                    ...c,
-                    ...updates,
-                    raw_data: {
-                        ...(c.raw_data || {}),
-                        ...(updates.raw_data || {})
-                    }
-                };
-            }
-            return c;
-        }));
-    }, []);
-
-    const { enrich: originalEnrich, isEnriching, progress: enrichmentProgress } = useLocationEnrichment({
-        onUpdate: handleEnrichmentUpdate
-    });
-
-    // Wrap enrich to set initial loading state
-    const enrich = useCallback(async (ids: string[], enrichers: string[]) => {
-        setEnrichmentStatus(prev => {
-            const next = new Map(prev);
-            ids.forEach(id => next.set(id, 'loading'));
-            return next;
-        });
-        await originalEnrich(ids, enrichers);
-    }, [originalEnrich]);
-
-    // Persist sidebar state
-    useEffect(() => {
-        localStorage.setItem('competitorsSearchPanelOpen', JSON.stringify(searchPanelOpen));
-    }, [searchPanelOpen]);
-
-    useEffect(() => {
-        if (!isResizing) {
-            localStorage.setItem('competitorsSidebarWidth', sidebarWidth.toString());
-        }
-    }, [sidebarWidth, isResizing]);
-
-    // Resize Handler
-    const startResizing = useCallback((shouldStart: boolean) => {
-        setIsResizing(shouldStart);
-    }, []);
-
-    useEffect(() => {
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!isResizing) return;
-            const newWidth = e.clientX - 64; // Subtract CompetitorSidebar width (approx w-16 = 64px)
-            // Constrain width
-            if (newWidth > 250 && newWidth < 800) {
-                setSidebarWidth(newWidth);
-            }
-        };
-
-        const handleMouseUp = () => {
-            setIsResizing(false);
-        };
-
-        if (isResizing) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-            // Disable text selection while resizing
-            document.body.style.userSelect = 'none';
-            document.body.style.cursor = 'col-resize';
-        } else {
-            document.body.style.userSelect = '';
-            document.body.style.cursor = '';
-        }
-
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-            document.body.style.userSelect = '';
-            document.body.style.cursor = '';
-        };
-    }, [isResizing]);
-
-    // Get settings for passing excluded types
-    const { settings, updateExcludedTypes } = useCompetitorSettings();
-
-    // Filter Logic
-    const filters = React.useMemo(() => {
-        const f = searchParams.get('filters');
-        return f ? f.split(',').filter(Boolean) : [];
-    }, [searchParams]);
-
-    const toggleFilter = (filter: string) => {
-        setSearchParams(prev => {
-            const newParams = new URLSearchParams(prev);
-            const currentFilters = newParams.get('filters')?.split(',').filter(Boolean) || [];
-            const newFilters = currentFilters.includes(filter)
-                ? currentFilters.filter(f => f !== filter)
-                : [...currentFilters, filter];
-
-            if (newFilters.length > 0) {
-                newParams.set('filters', newFilters.join(','));
-            } else {
-                newParams.delete('filters');
-            }
-            return newParams;
-        });
-    };
-
-    const clearFilters = () => {
-        setSearchParams(prev => {
-            const newParams = new URLSearchParams(prev);
-            newParams.delete('filters');
-            return newParams;
-        });
-    };
-    const filteredCompetitors = React.useMemo(() => {
-        if (!competitors) return [];
-        let result = competitors;
-
-        // 1. Tag Filters (URL 'filters')
-        if (filters.length > 0) {
-            result = result.filter(comp => {
-                const types = comp.types || [];
-                const categories = comp.raw_data?.google_media?.categories?.map((c: any) => c.title) || [];
-                const city = comp.city || comp.raw_data?.geo?.city;
-
-                return filters.every(filter =>
-                    types.includes(filter) ||
-                    categories.includes(filter) ||
-                    (city && city === filter)
-                );
-            });
-        }
-
-        // 2. Excluded Types (Settings)
-        if (!showExcluded) {
-            const excluded = settings.excluded_types || [];
-            if (excluded.length > 0) {
-                result = result.filter(competitor => {
-                    const types = competitor.types || [];
-                    return !types.some(type => excluded.includes(type));
-                });
-            }
-        }
-
-        // 3. Grid Filters (URL 'filter_...')
-        const gridFilterModel = paramsToFilterModel(searchParams);
-        if (gridFilterModel.items.length > 0) {
-            // Basic implementation for string containment. 
-            // Ideally we'd reuse grid logic but we need this for Map/Thumb views too.
-            // We'll support 'contains' and 'equals' for common fields
-            result = result.filter(row => {
-                return gridFilterModel.items.every(filterItem => {
-                    if (!filterItem.field || !filterItem.value) return true;
-
-                    const rowValue = String((row as any)[filterItem.field] || '').toLowerCase();
-                    const filterValue = String(filterItem.value).toLowerCase();
-
-                    if (filterItem.operator === 'contains') {
-                        return rowValue.includes(filterValue);
-                    } else if (filterItem.operator === 'equals') {
-                        return rowValue === filterValue;
-                    } else if (filterItem.operator === 'startsWith') {
-                        return rowValue.startsWith(filterValue);
-                    } else if (filterItem.operator === 'endsWith') {
-                        return rowValue.endsWith(filterValue);
-                    }
-                    return true;
-                });
-            });
-        }
-
-        return result;
-    }, [competitors, filters, showExcluded, settings.excluded_types, searchParams]);
-
-    const handleViewChange = (newView: ViewMode) => {
-        setViewMode(newView);
-        localStorage.setItem('competitorsViewMode', newView);
-        setSearchParams(prev => {
-            const newParams = new URLSearchParams(prev);
-            newParams.set('view', newView);
-            return newParams;
-        });
-    };
-
-
-
-    const eventSourceRef = React.useRef<EventSource | null>(null);
-    const retryTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-
-    // Cleanup on unmount
-    useEffect(() => {
-        return () => {
-            if (eventSourceRef.current) {
-                eventSourceRef.current.close();
-            }
-            if (retryTimeoutRef.current) {
-                clearTimeout(retryTimeoutRef.current);
-            }
-        };
-    }, []);
-
-    const performSearch = async (
-        searchQuery: string,
-        searchLocation: string,
-        forceRefresh: boolean = false,
-        filters: { city?: string; country?: string; continent?: string; type?: string } = {},
-        zoom?: number
-    ) => {
-        // Clear any existing connection or retry timer
-        if (eventSourceRef.current) {
-            eventSourceRef.current.close();
-            eventSourceRef.current = null;
-        }
-        if (retryTimeoutRef.current) {
-            clearTimeout(retryTimeoutRef.current);
-            retryTimeoutRef.current = null;
-        }
-
-        setLoading(true);
-        setError(null);
-        setStreamProgress(null);
-        streamingMode = true;
-        setLiveAreas([]);
-        setLiveRadii([]);
-        setLiveNodes([]);
-        setLiveScanner(null);
-
-        if (streamingMode) {
-            // Use SSE streaming
-            performStreamingSearch(searchQuery, searchLocation, forceRefresh, 0, filters, zoom);
-        }
-    };
-
-    const performStreamingSearch = (
-        searchQuery: string,
-        searchLocation: string,
-        forceRefresh: boolean,
-        retryCount: number = 0,
-        filters: { city?: string; country?: string; continent?: string; type?: string } = {},
-        zoom?: number
-    ) => {
-        const params = new URLSearchParams({
-            query: searchQuery,
-            location: searchLocation,
-            refresh: forceRefresh ? 'true' : 'false',
-            limit: '250',
-        });
-
-        if (filters.city) params.append('filterCity', filters.city);
-        if (filters.country) params.append('filterCountry', filters.country);
-        if (filters.continent) params.append('filterContinent', filters.continent);
-        if (filters.type) params.append('filterType', filters.type);
-        if (zoom) params.append('zoom', zoom.toString());
-
-        if (session && session.access_token) {
-            params.append('token', session.access_token);
-        }
-
-        // Pass excluded types
-        if (settings.excluded_types && settings.excluded_types.length > 0) {
-            settings.excluded_types.forEach(t => params.append('excludedTypes[]', t));
-        }
-
-        const url = `${API_URL}/competitors/stream?${params.toString()}`;
-
-        // Log retry attempt if applicable
-        if (retryCount > 0) {
-            console.log(`Streaming connection attempt ${retryCount + 1}...`);
-        }
-
-        const eventSource = new EventSource(url);
-        eventSourceRef.current = eventSource;
-
-        const results: CompetitorFull[] = [];
-        const seenIds = new Set<string>();
-
-        // If this is a retry, we might want to preserve previous results? 
-        // For simplicity and consistency with server cache, we start fresh for now, 
-        // as the server will likely dump the full cached result set again.
-
-        eventSource.addEventListener('progress', (e) => {
-            const progress = JSON.parse(e.data);
-            setStreamProgress(progress);
-        });
-
-        eventSource.addEventListener('result', (e) => {
-            const result = JSON.parse(e.data);
-            if (result.place_id && !seenIds.has(result.place_id)) {
-                seenIds.add(result.place_id);
-                results.push(result);
-                setCompetitors([...results]); // Update UI with each result
-            }
-        });
-
-        eventSource.addEventListener('area-start', (e) => {
-            try {
-                const area = JSON.parse(e.data);
-                setLiveAreas(prev => [...prev, area]);
-            } catch (err) { }
-        });
-
-        eventSource.addEventListener('radius-start', (e) => {
-            try {
-                const radius = JSON.parse(e.data);
-                setLiveRadii(prev => [...prev, radius]);
-                if (radius.location || radius.center || (radius.lat && radius.lng)) {
-                    const loc = radius.location?.location || radius.center || radius;
-                    if (loc.lat && loc.lng) {
-                        setLiveScanner({
-                            type: 'FeatureCollection',
-                            features: [{
-                                type: 'Feature',
-                                properties: {
-                                    icon_state: 'pacman-open',
-                                    bearing: 0,
-                                    radius: radius.radius_km || 0.5
-                                },
-                                geometry: {
-                                    type: 'Point',
-                                    coordinates: [loc.lng, loc.lat]
-                                }
-                            }]
-                        });
-                    }
-                }
-            } catch (err) { }
-        });
-
-        eventSource.addEventListener('node-start', (e) => {
-            try {
-                const node = JSON.parse(e.data);
-                setLiveNodes(prev => [...prev, node]);
-            } catch (err) { }
-        });
-
-        eventSource.addEventListener('log', (e) => {
-            try {
-                const logData = JSON.parse(e.data);
-                console.log('uds log:', e)
-                setStreamProgress(prev => ({ ...prev, stage: logData, percent: prev?.percent || 0 }));
-            } catch (err) { }
-        });
-
-        eventSource.addEventListener('complete', (e) => {
-            const data = JSON.parse(e.data);
-            setLoading(false);
-            setStreamProgress(null);
-            eventSource.close();
-            eventSourceRef.current = null;
-        });
-
-        eventSource.addEventListener('error', (e: any) => {
-            console.error('Stream error:', e);
-            eventSource.close();
-
-            if (retryCount < 5) {
-                const backoff = Math.pow(2, retryCount) * 1000;
-                console.log(`Retrying in ${backoff}ms...`);
-                retryTimeoutRef.current = setTimeout(() => {
-                    performStreamingSearch(searchQuery, searchLocation, forceRefresh, retryCount + 1, filters, zoom);
-                }, backoff);
-            } else {
-                const errorMsg = 'Streaming connection failed after multiple attempts. Please try again.';
-                setError(errorMsg);
-                toast.error(errorMsg);
-                setLoading(false);
-                setStreamProgress(null);
-                eventSourceRef.current = null;
-            }
-        });
-    };
-
-    const handleCancelSearch = () => {
-        if (eventSourceRef.current) {
-            eventSourceRef.current.close();
-            eventSourceRef.current = null;
-        }
-        if (retryTimeoutRef.current) {
-            clearTimeout(retryTimeoutRef.current);
-            retryTimeoutRef.current = null;
-        }
-        setLoading(false);
-        setStreamProgress(null);
-        setError('Search cancelled by user');
-    };
-
-    const mapLocationRef = React.useRef<string>('');
-    const mapZoomRef = React.useRef<number | undefined>(undefined);
-
-    const handleMapCenterUpdate = useCallback((loc: string, zoom?: number) => {
-        mapLocationRef.current = loc;
-        mapZoomRef.current = zoom;
-    }, []);
-
-    useEffect(() => {
-        // Don't run search until auth is loaded
-        if (authLoading) return;
-
-        const initialQuery = searchParams.get('query');
-        const initialLocation = searchParams.get('location');
-        const initialRefresh = searchParams.get('refresh') === 'true';
-        const initialFilters = {
-            city: searchParams.get('filterCity') || undefined,
-            country: searchParams.get('filterCountry') || undefined,
-            continent: searchParams.get('filterContinent') || undefined,
-            type: searchParams.get('filterType') || undefined
-        };
-
-        if (initialQuery || initialLocation) {
-            performSearch(
-                initialQuery || 'plastichub',
-                initialLocation || 'barcelona, spain',
-                initialRefresh,
-                initialFilters
-            );
-        }
-    }, [authLoading]); // Only run when auth finishes loading
-
-
-    const handleSearchSubmit = (values: SearchFormValues) => {
-        let searchLocation = values.location;
-        let searchZoom: number | undefined = undefined;
-
-        // Fallback to map location if empty and in map view
-        if (!searchLocation && viewMode === 'map' && mapLocationRef.current) {
-            searchLocation = mapLocationRef.current;
-            searchZoom = mapZoomRef.current;
-            setLocation(searchLocation); // Update UI
-        }
-
-        const fCity = values.filterCity || '';
-        const fCountry = values.filterCountry || '';
-        const fContinent = values.filterContinent || '';
-        const fType = values.filterType || '';
-
-        setQuery(values.query || 'plastic');
-        setLocation(searchLocation || 'barcelona, spain');
-        setRefresh(values.refresh || false);
-        setFilterCity(fCity);
-        setFilterCountry(fCountry);
-        setFilterContinent(fContinent);
-        setFilterType(fType);
-
-        setSearchParams(prev => {
-            const newParams = new URLSearchParams(prev);
-            newParams.set('query', values.query || 'plastic');
-            newParams.set('location', searchLocation || 'barcelona, spain');
-            // newParams.set('refresh', values.refresh ? 'true' : 'false');
-            newParams.set('view', viewMode);
-
-            if (fCity) newParams.set('filterCity', fCity); else newParams.delete('filterCity');
-            if (fCountry) newParams.set('filterCountry', fCountry); else newParams.delete('filterCountry');
-            if (fContinent) newParams.set('filterContinent', fContinent); else newParams.delete('filterContinent');
-            if (fType) newParams.set('filterType', fType); else newParams.delete('filterType');
-
-            // Clear map bounds on new search so it auto-fits new results
-            newParams.delete('mapLat');
-            newParams.delete('mapLng');
-            newParams.delete('mapZoom');
-
-            return newParams;
-        });
-
-        performSearch(
-            values.query || 'plastic',
-            searchLocation || 'barcelona, spain',
-            values.refresh || false,
-            {
-                city: fCity,
-                country: fCountry,
-                continent: fContinent,
-                type: fType
-            },
-            searchZoom
-        );
-    };
-
-    // Save scroll position periodically
-    useEffect(() => {
-        const saveScroll = () => {
-            const scrollElement = document.getElementById('competitors-scroll-area');
-            const scrollY = scrollElement?.scrollTop || 0;
-            if (scrollY > 0) { // Only save if actually scrolled
-                sessionStorage.setItem('competitors_list_scroll', scrollY.toString());
-            }
-        };
-
-        // Throttle scroll saves
-        let ticking = false;
-        const handleScroll = () => {
-            if (!ticking) {
-                window.requestAnimationFrame(() => {
-                    saveScroll();
-                    ticking = false;
-                });
-                ticking = true;
-            }
-        };
-
-        const scrollElement = document.getElementById('competitors-scroll-area');
-        scrollElement?.addEventListener('scroll', handleScroll);
-
-        return () => {
-            scrollElement?.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-
-    // Restore scroll position after competitors are loaded
-    useEffect(() => {
-        if (competitors && competitors.length > 0 && !loading) {
-            const savedY = sessionStorage.getItem('competitors_list_scroll');
-            if (savedY && parseInt(savedY, 10) > 0) {
-                const scrollTo = parseInt(savedY, 10);
-                const restoreScroll = () => {
-                    const scrollElement = document.getElementById('competitors-scroll-area');
-                    if (scrollElement) scrollElement.scrollTop = scrollTo;
-                };
-                restoreScroll();
-                setTimeout(restoreScroll, 0);
-            }
-        }
-    }, [competitors.length, loading]);
-
-
-    const defaultFormValues: SearchFormValues = {
-        query,
-        location,
-        refresh,
-        filterCity,
-        filterCountry,
-        filterContinent,
-        filterType
-    };
-
-    return (
-        <div className="flex w-full min-h-screen  overflow-hidden">
-            <CompetitorSidebar />
-
-            <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
-                {/* Desktop Search Sidebar */}
-                {/* Desktop Search Sidebar */}
-                <div
-                    style={{ width: searchPanelOpen ? sidebarWidth : 0 }}
-                    className={`hidden md:block flex-shrink-0 relative border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden ${isResizing ? '' : 'transition-all duration-300 ease-in-out'} ${searchPanelOpen ? '' : 'border-r-0'}`}
-                >
-                    <SearchSidebar
-                        defaultValues={defaultFormValues}
-                        loading={loading}
-                        streamProgress={streamProgress}
-                        streamingMode={streamingMode}
-                        onStreamingModeChange={setStreamingMode}
-                        onSearch={handleSearchSubmit}
-                        onCancel={handleCancelSearch}
-                        onCollapse={() => setSearchPanelOpen(false)}
-                        settings={settings}
-                        updateExcludedTypes={updateExcludedTypes}
-                        className="h-full border-none w-full"
-                    />
-
-                    {/* Resize Handle */}
-                    {searchPanelOpen && (
-                        <div
-                            className="absolute top-0 right-0 w-1.5 h-full cursor-col-resize hover:bg-indigo-300 active:bg-indigo-500 z-50 transition-colors opacity-0 hover:opacity-100 active:opacity-100"
-                            onMouseDown={(e) => {
-                                e.preventDefault();
-                                startResizing(true);
-                            }}
-                        />
-                    )}
-                </div>
-
-                {/* Main Content */}
-                <main className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
-                    {/* Floating Search Toggle (Desktop only, when closed) */}
-                    {!searchPanelOpen && (
-                        <button
-                            onClick={() => setSearchPanelOpen(true)}
-                            className="hidden md:flex absolute top-4 left-4 z-50 items-center justify-center p-2.5  text-indigo-600 rounded-lg shadow-lg border border-indigo-100 hover: transition-all hover:scale-105"
-                            title="Open Search"
-                        >
-                            <Search className="w-5 h-5" />
-                        </button>
-                    )}
-
-                    {/* Filter Button for Mobile */}
-                    <div className="md:hidden p-4  border-b border-gray-200 flex justify-between items-center z-10">
-                        <h1 className="text-lg font-semibold text-gray-900">Competitors</h1>
-                        <Sheet>
-                            <SheetTrigger asChild>
-                                <button className="flex items-center gap-2 px-3 py-2 bg-indigo-50 text-indigo-600 rounded-lg text-sm font-medium">
-                                    <SlidersHorizontal className="w-4 h-4" />
-                                    Filters
-                                </button>
-                            </SheetTrigger>
-                            <SheetContent side="left" className="p-0 w-80 sm:w-96">
-                                <SearchSidebar
-                                    defaultValues={defaultFormValues}
-                                    loading={loading}
-                                    streamProgress={streamProgress}
-                                    streamingMode={streamingMode}
-                                    onStreamingModeChange={setStreamingMode}
-                                    onSearch={(values) => {
-                                        handleSearchSubmit(values);
-                                        // TODO: Close sheet on submit? Maybe improved UX later
-                                    }}
-                                    onCancel={handleCancelSearch}
-                                    settings={settings}
-                                    updateExcludedTypes={updateExcludedTypes}
-                                    className="border-none"
-                                />
-                            </SheetContent>
-                        </Sheet>
-                    </div>
-
-                    <div id="competitors-scroll-area" className="flex-1 overflow-auto p-2 sm:px-2 lg:px-4">
-                        {/* Results Header / View Switcher */}
-                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4 mt-2">
-
-                            {/* Filter Chips - Keep them here as a summary */}
-                            <div className="flex-1">
-                                {error && (
-                                    <div className="rounded-md bg-red-50 p-4 mb-4">
-                                        <div className="flex">
-                                            <div className="ml-3">
-                                                <h3 className="text-sm font-medium text-red-800">{error}</h3>
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-
-                                {filters.length > 0 && (
-                                    <div className="flex flex-wrap gap-2 items-center">
-                                        <span className="text-sm text-gray-500 flex items-center mr-1">
-                                            <Filter className="w-3 h-3 mr-1" />
-                                            Filters:
-                                        </span>
-                                        {filters.map(filter => (
-                                            <button
-                                                key={filter}
-                                                onClick={() => toggleFilter(filter)}
-                                                className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-indigo-50 text-indigo-700 hover:bg-indigo-100 transition-colors border border-indigo-100"
-                                            >
-                                                {filter.replace(/_/g, ' ')}
-                                                <X className="w-3 h-3 ml-1" />
-                                            </button>
-                                        ))}
-                                        <button
-                                            onClick={clearFilters}
-                                            className="text-xs text-gray-400 hover:text-gray-600 ml-1"
-                                        >
-                                            Clear
-                                        </button>
-                                    </div>
-                                )}
-                            </div>
-
-
-                            <div className="flex items-center gap-3  p-1 rounded-lg border border-gray-200 shadow-sm">
-                                <span className="text-xs text-gray-500 px-2">
-                                    {filteredCompetitors.length} results
-                                </span>
-                                <div className="h-4 w-px bg-gray-200" />
-                                <div className="flex">
-                                    <button
-                                        onClick={() => handleViewChange('grid')}
-                                        className={`p-1.5 rounded-md transition-all ${viewMode === 'grid' ? 'bg-indigo-50 text-indigo-600' : 'text-gray-400 hover:text-gray-600'}`}
-                                        title="Grid View"
-                                    >
-                                        <List className="h-4 w-4" />
-                                    </button>
-                                    <button
-                                        onClick={() => handleViewChange('thumb')}
-                                        className={`p-1.5 rounded-md transition-all ${viewMode === 'thumb' ? 'bg-indigo-50 text-indigo-600' : 'text-gray-400 hover:text-gray-600'}`}
-                                        title="Thumbnail View"
-                                    >
-                                        <LayoutGrid className="h-4 w-4" />
-                                    </button>
-                                    <button
-                                        onClick={() => handleViewChange('map')}
-                                        className={`p-1.5 rounded-md transition-all ${viewMode === 'map' ? 'bg-indigo-50 text-indigo-600' : 'text-gray-400 hover:text-gray-600'}`}
-                                        title="Map View"
-                                    >
-                                        <MapIcon className="h-4 w-4" />
-                                    </button>
-                                    <button
-                                        onClick={() => handleViewChange('meta')}
-                                        className={`p-1.5 rounded-md transition-all ${viewMode === 'meta' ? 'bg-indigo-50 text-indigo-600' : 'text-gray-400 hover:text-gray-600'}`}
-                                        title="Meta Analysis"
-                                    >
-                                        <PieChart className="h-4 w-4" />
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-
-                        {viewMode === 'grid' && (
-                            <CompetitorsGridView
-                                competitors={filteredCompetitors}
-                                loading={loading}
-                                settings={settings}
-                                updateExcludedTypes={updateExcludedTypes}
-                                onOpenSettings={() => { /* Settings now in sidebar, but grid might have trigger? */ }}
-                                showExcluded={showExcluded}
-                                setShowExcluded={setShowExcluded}
-                                enrich={enrich}
-                                isEnriching={isEnriching}
-                                enrichmentStatus={enrichmentStatus}
-                            />
-                        )}
-
-                        {viewMode === 'thumb' && (
-                            <CompetitorsThumbView
-                                competitors={filteredCompetitors}
-                                filters={filters}
-                                toggleFilter={toggleFilter}
-                            />
-                        )}
-
-                        {viewMode === 'map' && (
-                            <CompetitorsMapView
-                                competitors={filteredCompetitors}
-                                onMapCenterUpdate={handleMapCenterUpdate}
-                                enrich={enrich}
-                                isEnriching={isEnriching}
-                                enrichmentProgress={enrichmentProgress}
-                                liveAreas={liveAreas}
-                                liveRadii={liveRadii}
-                                liveNodes={liveNodes}
-                                liveScanner={liveScanner}
-                                initialCenter={(() => {
-                                    const lat = parseFloat(searchParams.get('mapLat') || '');
-                                    const lng = parseFloat(searchParams.get('mapLng') || '');
-                                    return (!isNaN(lat) && !isNaN(lng)) ? { lat, lng } : undefined;
-                                })()}
-                                initialZoom={(() => {
-                                    const zoom = parseFloat(searchParams.get('mapZoom') || '');
-                                    return !isNaN(zoom) ? zoom : undefined;
-                                })()}
-                                onMapMove={(state) => {
-                                    setSearchParams(prev => {
-                                        const newParams = new URLSearchParams(prev);
-                                        newParams.set('mapLat', state.lat.toFixed(6));
-                                        newParams.set('mapLng', state.lng.toFixed(6));
-                                        newParams.set('mapZoom', state.zoom.toFixed(2));
-                                        newParams.set('view', 'map');
-                                        return newParams;
-                                    }, { replace: true });
-                                }}
-                            />
-                        )}
-
-                        {viewMode === 'meta' && (
-                            <CompetitorsMetaView
-                                competitors={filteredCompetitors}
-                                settings={settings}
-                                updateExcludedTypes={updateExcludedTypes}
-                            />
-                        )}
-
-                        {!loading && competitors.length === 0 && !error && (
-                            <div className="flex flex-col items-center justify-center h-64 text-center text-gray-500">
-                                <Search className="w-12 h-12 text-gray-200 mb-3" />
-                                <p className="text-lg font-medium text-gray-400">No competitors found</p>
-                                <p className="text-sm text-gray-400 mt-1">Try adjusting your search terms or location</p>
-                            </div>
-                        )}
-                    </div>
-                </main>
-            </div>
-        </div >
-
-    );
-};
-
-export default Competitors;
diff --git a/packages/ui/src/modules/places/useCompetitorActions.ts b/packages/ui/src/modules/places/useCompetitorActions.ts
deleted file mode 100644
index f3e75d35..00000000
--- a/packages/ui/src/modules/places/useCompetitorActions.ts
+++ /dev/null
@@ -1,404 +0,0 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { type CompetitorFull } from '@polymech/shared';
-import { type EmailLoadingState } from './EmailCell';
-import { streamFindEmails, type ProgressEvent, type LocationEmailEvent, type LocationCompleteEvent, type LocationErrorEvent } from './emailFinder';
-import { useAuth } from '../../hooks/useAuth';
-
-interface UseCompetitorActionsProps {
-    competitors: CompetitorFull[];
-    selectedRows: string[];
-    excludedTypes: string[];
-    columnVisibilityModel?: Record<string, boolean>;
-}
-
-export const useCompetitorActions = ({ competitors, selectedRows, excludedTypes, columnVisibilityModel = {} }: UseCompetitorActionsProps) => {
-    const { session } = useAuth();
-    // Use a ref to track session to avoid stale closure issues in callbacks
-    const sessionRef = useRef(session);
-    useEffect(() => {
-        sessionRef.current = session;
-    }, [session]);
-
-
-
-    // Email finding state
-    const [emailLoadingStates, setEmailLoadingStates] = useState<Map<string, EmailLoadingState>>(new Map());
-    const [newlyFoundEmails, setNewlyFoundEmails] = useState<Map<string, any[]>>(new Map());
-    const [emailErrors, setEmailErrors] = useState<Map<string, string>>(new Map());
-    const [jobIds, setJobIds] = useState<Map<string, string>>(new Map());
-    const [isProcessing, setIsProcessing] = useState(false);
-    const [progress, setProgress] = useState<ProgressEvent | undefined>();
-    const [eventSource, setEventSource] = useState<EventSource | null>(null);
-
-    // Derived email data combining existing and newly found
-    const emailData = useMemo(() => {
-        const data = new Map<string, any[]>();
-
-        // Add existing emails from competitors
-        competitors.forEach(competitor => {
-            const existingEmails = (competitor as any).emails || (competitor as any).meta?.emails || (competitor.raw_data as any)?.meta?.emails;
-            if (Array.isArray(existingEmails)) {
-                data.set(competitor.place_id, existingEmails);
-            }
-        });
-
-        // Merge newly found emails
-        newlyFoundEmails.forEach((emails, placeId) => {
-            const existing = data.get(placeId) || [];
-            data.set(placeId, [...existing, ...emails]);
-        });
-
-        return data;
-
-    }, [competitors, newlyFoundEmails]);
-
-
-
-    // Initialize loading states
-    useEffect(() => {
-        setEmailLoadingStates(prevStates => {
-            const newStates = new Map(prevStates);
-            competitors.forEach(competitor => {
-                // If currently loading, preserve it and skip update
-                if (newStates.get(competitor.place_id) === 'loading') {
-                    return;
-                }
-
-                const existingEmails = (competitor as any).emails || (competitor as any).meta?.emails || (competitor.raw_data as any)?.meta?.emails;
-
-                if (Array.isArray(existingEmails)) {
-                    newStates.set(competitor.place_id, 'success');
-                } else {
-                    newStates.set(competitor.place_id, 'idle');
-                }
-            });
-            return newStates;
-        });
-    }, [competitors]);
-
-    // Generic find emails function
-    const findEmails = useCallback((ids: string[]) => {
-        if (ids.length === 0) return;
-
-        const placeIds = ids.map(id => String(id));
-
-        // Set loading state for selected rows
-        setEmailLoadingStates(prev => {
-            const newStates = new Map(prev);
-            placeIds.forEach(id => newStates.set(id, 'loading'));
-            return newStates;
-        });
-
-        setIsProcessing(true);
-
-        const currentSession = sessionRef.current;
-        const accessToken = currentSession?.access_token;
-        if (!accessToken) {
-            console.error('No access token found', { session: currentSession });
-            return;
-        }
-        // Start SSE stream
-        const es = streamFindEmails(placeIds, accessToken, {
-            onProgress: (data) => {
-                setProgress(data);
-            },
-            onLocationJob: (data) => {
-                setJobIds(prev => {
-                    const next = new Map(prev);
-                    next.set(data.place_id, data.jobId);
-                    return next;
-                });
-            },
-            onLocationStart: (data) => {
-
-            },
-            onLocationEmail: (data: LocationEmailEvent) => {
-                // Add email to the data
-                // Add email to the data
-                setNewlyFoundEmails(prev => {
-                    const newData = new Map(prev);
-                    const existing = newData.get(data.place_id) || [];
-                    newData.set(data.place_id, [...existing, {
-                        email: data.email,
-                        source: data.source,
-                        foundAt: new Date().toISOString(),
-                        tool: 'puppeteer'
-                    }]);
-                    return newData;
-                });
-            },
-            onLocationComplete: (data: LocationCompleteEvent) => {
-                setEmailLoadingStates(prev => {
-                    const newStates = new Map(prev);
-                    newStates.set(data.place_id, 'success');
-                    return newStates;
-                });
-            },
-            onLocationError: (data: LocationErrorEvent) => {
-                setEmailLoadingStates(prev => {
-                    const newStates = new Map(prev);
-                    newStates.set(data.place_id, 'error');
-                    return newStates;
-                });
-                setEmailErrors(prev => {
-                    const newErrors = new Map(prev);
-                    newErrors.set(data.place_id, data.error);
-                    return newErrors;
-                });
-                console.error(`Error for location:`, data.error);
-            },
-            onComplete: (data) => {
-                setIsProcessing(false);
-                setProgress(undefined);
-                console.log(`Completed! Found ${data.emailsFound} emails from ${data.successful} locations`);
-            },
-            onError: (error) => {
-                setIsProcessing(false);
-                setProgress(undefined);
-                console.error('Stream error:', error.message);
-
-                // Reset loading states
-                setEmailLoadingStates(prev => {
-                    const newStates = new Map(prev);
-                    placeIds.forEach(id => {
-                        if (newStates.get(id) === 'loading') {
-                            newStates.set(id, 'error');
-                        }
-                    });
-                    return newStates;
-                });
-            },
-        });
-
-        if (es) {
-            setEventSource(es);
-        }
-    }, []);
-
-    // Handle find emails action (for selection)
-    const handleFindEmails = useCallback(() => {
-        if (selectedRows.length === 0) {
-            console.warn('Please select at least one competitor');
-            return;
-        }
-
-        // Filter out excluded types
-        const filteredIds = selectedRows.filter(id => {
-            const competitor = competitors.find(c => String(c.place_id) === String(id));
-            if (!competitor) return false;
-
-            // Check if any of the competitor's types are in the excluded list
-            const hasExcludedType = (competitor.types || []).some(type => excludedTypes.includes(type));
-            return !hasExcludedType;
-        });
-
-        if (filteredIds.length === 0) {
-            console.warn('All selected competitors have excluded types and will be skipped.');
-            // Optional: visual feedback to user
-            return;
-        }
-
-        findEmails(filteredIds);
-    }, [selectedRows, findEmails, competitors, excludedTypes]);
-
-    // Handle cancel (Global Stream Cancel)
-    const handleCancel = useCallback(() => {
-        if (eventSource) {
-            eventSource.close();
-            setEventSource(null);
-        }
-        setIsProcessing(false);
-        setProgress(undefined);
-
-        // Reset loading states
-        setEmailLoadingStates(prev => {
-            const newStates = new Map(prev);
-            selectedRows.forEach(id => {
-                if (newStates.get(String(id)) === 'loading') {
-                    newStates.set(String(id), 'idle');
-                }
-            });
-            return newStates;
-        });
-
-        console.log('Email finding cancelled');
-    }, [eventSource, selectedRows]);
-
-    // Handle individual row cancel
-    const cancelRow = useCallback(async (placeId: string) => {
-        const jobId = jobIds.get(placeId);
-
-        // Optimistically set to idle immediately
-        setEmailLoadingStates(prev => {
-            const next = new Map(prev);
-            if (next.get(placeId) === 'loading') {
-                next.set(placeId, 'idle'); // Allow retry
-            }
-            return next;
-        });
-
-        if (jobId) {
-            const currentSession = sessionRef.current;
-            const accessToken = currentSession?.access_token;
-            if (accessToken) {
-                try {
-                    const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:3333';
-                    await fetch(`${baseUrl}/api/competitors/email/job/${jobId}/cancel`, {
-                        method: 'POST',
-                        headers: {
-                            'Authorization': `Bearer ${accessToken}`
-                        }
-                    });
-                    console.log('Job cancelled via API:', jobId);
-                } catch (e) {
-                    console.error('Failed to cancel job ID:', jobId, e);
-                }
-            }
-        } else {
-            console.warn('No Job ID found for row, cancellation might only happen if stream stops', placeId);
-            // If no jobId yet (pre-submission), maybe we should check if stream is active for this?
-            // But simpler to just reset UI state as if cancelled.
-        }
-    }, [jobIds]);
-
-    // Handle Thunderbird Export
-    const handleExportThunderbird = useCallback(() => {
-        // Headers for Thunderbird CSV import
-        const headers = [
-            'First Name',
-            'Last Name',
-            'Display Name',
-            'Nickname',
-            'Primary Email',
-            'Secondary Email',
-            'Screen Name',
-            'Work Phone',
-            'Home Phone',
-            'Fax Number',
-            'Pager Number',
-            'Mobile Number',
-            'Home Address',
-            'Home Address 2',
-            'Home City',
-            'Home State',
-            'Home ZipCode',
-            'Home Country',
-            'Work Address',
-            'Work Address 2',
-            'Work City',
-            'Work State',
-            'Work ZipCode',
-            'Work Country',
-            'Job Title',
-            'Department',
-            'Organization',
-            'Web Page 1',
-            'Web Page 2',
-            'Birth Year',
-            'Birth Month',
-            'Birth Day',
-            'Custom 1',
-            'Custom 2',
-            'Custom 3',
-            'Custom 4',
-            'Notes',
-        ];
-
-        // Determine which competitors to export
-        const competitorsToExport = selectedRows.length > 0
-            ? competitors.filter(c => selectedRows.includes(String(c.place_id)))
-            : competitors;
-
-        // Helpers to check if column is visible (default true if undefined)
-        const isVisible = (field: string) => columnVisibilityModel[field] !== false;
-
-        const rows = competitorsToExport.map(comp => {
-            const emails = emailData.get(comp.place_id);
-            const firstEmail = emails && emails.length > 0 ? emails[0].email : '';
-            const secondEmail = emails && emails.length > 1 ? emails[1].email : '';
-
-
-            // Conditional Data Retrieval
-            const title = isVisible('title') ? comp.title : '';
-            const phone = isVisible('phone') ? (comp.phone || '') : '';
-            const address = isVisible('address') ? (comp.address || '') : '';
-            const city = isVisible('city') ? (comp.city || '') : '';
-            const country = isVisible('country') ? (comp.country || '') : '';
-            const website = isVisible('website') ? (comp.website || '') : '';
-            const email1 = isVisible('email') ? firstEmail : '';
-            const email2 = isVisible('email') ? secondEmail : '';
-            // If email column is hidden, do we still export? 
-            // Technically logic says "no email -> null", but if we hide email column... 
-            // User probably wants to export *rows with email*, even if field is hidden?
-            // "visible columns" usually implies payload trimming. 
-            // If 'email' col is hidden, we probably shouldn't export the email address. 
-
-            // Export row even if no email is found, as requested by user ("export all found search results")
-            return [
-                `"${title.replace(/"/g, '""')}"`, // First Name (using Title)
-                '', // Last Name
-                `"${title.replace(/"/g, '""')}"`, // Display Name
-                '', // Nickname
-                `"${email1}"`, // Primary Email
-                `"${email2}"`, // Secondary Email
-                '', // Screen Name
-                `"${phone.replace(/"/g, '""')}"`, // Work Phone
-                '', // Home Phone
-                '', // Fax Number
-                '', // Pager Number
-                '', // Mobile Number
-                '', // Home Address
-                '', // Home Address 2
-                '', // Home City
-                '', // Home State
-                '', // Home ZipCode
-                '', // Home Country
-                `"${address.replace(/"/g, '""')}"`, // Work Address
-                '', // Work Address 2
-                `"${city.replace(/"/g, '""')}"`, // Work City
-                '', // Work State
-                '', // Work ZipCode
-                `"${country.replace(/"/g, '""')}"`, // Work Country
-                '', // Job Title
-                '', // Department
-                `"${title.replace(/"/g, '""')}"`, // Organization
-                `"${website.replace(/"/g, '""')}"`, // Web Page 1
-                '', // Web Page 2
-                '', // Birth Year
-                '', // Birth Month
-                '', // Birth Day
-                '', // Custom 1
-                '', // Custom 2
-                '', // Custom 3
-                '', // Custom 4
-                '', // Notes
-            ].join(',');
-        }).filter(row => row !== null); // Filter should technically be no-op now but keeps types safe
-
-        const csvContent = [headers.join(','), ...rows].join('\n');
-
-        // Create download link
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.setAttribute('href', url);
-        link.setAttribute('download', `competitors_thunderbird_${new Date().toISOString().slice(0, 10)}.csv`);
-        link.style.visibility = 'hidden';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }, [competitors, emailData, selectedRows, columnVisibilityModel]);
-
-    return {
-        emailLoadingStates,
-        emailData,
-        emailErrors,
-        isProcessing,
-        progress,
-        findEmails,
-        handleFindEmails,
-        handleCancel,
-        cancelRow,
-        handleExportThunderbird
-    };
-};
diff --git a/packages/ui/src/modules/places/useGridColumns.tsx b/packages/ui/src/modules/places/useGridColumns.tsx
index 5341003a..d9d6989b 100644
--- a/packages/ui/src/modules/places/useGridColumns.tsx
+++ b/packages/ui/src/modules/places/useGridColumns.tsx
@@ -1,47 +1,24 @@
 import React from 'react';
 import type { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
-import { Globe, Instagram, Facebook, Linkedin, Youtube, Twitter, Loader2 } from 'lucide-react';
-import { CircularProgress } from '@mui/material';
-import { EmailCell, type EmailLoadingState } from './EmailCell';
+import { Globe, Instagram, Facebook, Linkedin, Youtube, Twitter } from 'lucide-react';
+import { EmailCell } from './EmailCell';
 import { TypeCell } from './TypeCell';
 import type { CompetitorSettings } from './useCompetitorSettings';
 
 interface UseGridColumnsProps {
-    emailLoadingStates: Map<string, string>;
-    emailData: Map<string, any>;
-    emailErrors: Map<string, string>;
-    findEmails: (ids: string[]) => void;
-    cancelRow: (placeId: string) => Promise<void>;
     settings: CompetitorSettings;
     updateExcludedTypes: (types: string[]) => Promise<void>;
-    enrichmentStatus: Map<string, string>;
 }
 
 export const useGridColumns = ({
-    emailLoadingStates,
-    emailData,
-    emailErrors,
-    findEmails,
-    cancelRow,
     settings,
-    updateExcludedTypes,
-    enrichmentStatus
+    updateExcludedTypes
 }: UseGridColumnsProps): GridColDef[] => {
 
-    // Helper for rendering social cells with loading state
+    // Helper for rendering social cells
     const renderSocialCell = (params: GridRenderCellParams, icon: React.ReactNode, colorClass: string) => {
-        const placeId = params.row.place_id;
-        const status = enrichmentStatus.get(placeId);
         const url = params.value;
 
-        if (status === 'loading' && !url) {
-            return (
-                <div className="flex items-center justify-center h-full">
-                    <CircularProgress size={14} thickness={5} />
-                </div>
-            );
-        }
-
         return url ? (
             <a href={url} target="_blank" rel="noopener noreferrer" className={`${colorClass} flex items-center justify-center h-full`}>
                 {icon}
@@ -83,19 +60,16 @@ export const useGridColumns = ({
             headerName: 'Email',
             width: 250,
             renderCell: (params: GridRenderCellParams) => {
-                const placeId = params.row.place_id;
-                const loadingState = (emailLoadingStates.get(placeId) || 'idle') as EmailLoadingState;
-                const emails = emailData.get(placeId);
-                const errorMessage = emailErrors.get(placeId);
                 const isExcluded = (params.row.types || []).some((type: string) =>
                     (settings.excluded_types || []).includes(type)
                 );
 
+                // Fallback to reading directly from the Competitor object if available
+                const emails = params.row.emails || [];
+
                 return (
                     <EmailCell
                         emails={emails}
-                        loadingState={loadingState}
-                        errorMessage={errorMessage}
                         website={params.row.website}
                         isExcluded={isExcluded}
                     />
@@ -211,5 +185,5 @@ export const useGridColumns = ({
             },
             renderCell: (params: GridRenderCellParams) => renderSocialCell(params, <Twitter className="h-4 w-4" />, "text-blue-400 hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-200")
         },
-    ], [emailLoadingStates, emailData, emailErrors, findEmails, cancelRow, settings, updateExcludedTypes, enrichmentStatus]);
+    ], [settings, updateExcludedTypes]);
 };
diff --git a/packages/ui/src/modules/places/utils/poster-themes.ts b/packages/ui/src/modules/places/utils/poster-themes.ts
index 4e9ea1f6..41b466fc 100644
--- a/packages/ui/src/modules/places/utils/poster-themes.ts
+++ b/packages/ui/src/modules/places/utils/poster-themes.ts
@@ -1,273 +1,273 @@
-export interface PosterTheme {
-  name: string;
-  description?: string;
-  bg: string;
-  text: string;
-  gradient_color: string;
-  water: string;
-  parks: string;
-  road_motorway: string;
-  road_primary: string;
-  road_secondary: string;
-  road_tertiary: string;
-  road_residential: string;
-  road_default: string;
-}
-
-export const POSTER_THEMES: Record<string, PosterTheme> = {
-  "autumn": {
-      "name": "Autumn",
-      "description": "Burnt oranges, deep reds, golden yellows - seasonal warmth",
-      "bg": "#FBF7F0",
-      "text": "#8B4513",
-      "gradient_color": "#FBF7F0",
-      "water": "#D8CFC0",
-      "parks": "#E8E0D0",
-      "road_motorway": "#8B2500",
-      "road_primary": "#B8450A",
-      "road_secondary": "#CC7A30",
-      "road_tertiary": "#D9A050",
-      "road_residential": "#E8C888",
-      "road_default": "#CC7A30"
-  },
-  "blueprint": {
-      "name": "Blueprint",
-      "description": "Classic architectural blueprint - technical drawing aesthetic",
-      "bg": "#1A3A5C",
-      "text": "#E8F4FF",
-      "gradient_color": "#1A3A5C",
-      "water": "#0F2840",
-      "parks": "#1E4570",
-      "road_motorway": "#E8F4FF",
-      "road_primary": "#C5DCF0",
-      "road_secondary": "#9FC5E8",
-      "road_tertiary": "#7BAED4",
-      "road_residential": "#5A96C0",
-      "road_default": "#7BAED4"
-  },
-  "contrast_zones": {
-      "name": "Contrast Zones",
-      "description": "Strong contrast showing urban density - darker in center, lighter at edges",
-      "bg": "#FFFFFF",
-      "text": "#000000",
-      "gradient_color": "#FFFFFF",
-      "water": "#B0B0B0",
-      "parks": "#ECECEC",
-      "road_motorway": "#000000",
-      "road_primary": "#0F0F0F",
-      "road_secondary": "#252525",
-      "road_tertiary": "#404040",
-      "road_residential": "#5A5A5A",
-      "road_default": "#404040"
-  },
-  "copper_patina": {
-      "name": "Copper Patina",
-      "description": "Oxidized copper aesthetic - teal-green patina with copper accents",
-      "bg": "#E8F0F0",
-      "text": "#2A5A5A",
-      "gradient_color": "#E8F0F0",
-      "water": "#C0D8D8",
-      "parks": "#D8E8E0",
-      "road_motorway": "#B87333",
-      "road_primary": "#5A8A8A",
-      "road_secondary": "#6B9E9E",
-      "road_tertiary": "#88B4B4",
-      "road_residential": "#A8CCCC",
-      "road_default": "#88B4B4"
-  },
-  "emerald": {
-      "name": "Emerald City",
-      "description": "Lush dark green aesthetic with mint accents",
-      "bg": "#062C22",
-      "text": "#E3F9F1",
-      "gradient_color": "#062C22",
-      "water": "#0D4536",
-      "parks": "#0F523E",
-      "road_motorway": "#4ADEB0",
-      "road_primary": "#2DB88F",
-      "road_secondary": "#249673",
-      "road_tertiary": "#1B7559",
-      "road_residential": "#155C46",
-      "road_default": "#155C46"
-  },
-  "forest": {
-      "name": "Forest",
-      "description": "Deep greens and sage tones - organic botanical aesthetic",
-      "bg": "#F0F4F0",
-      "text": "#2D4A3E",
-      "gradient_color": "#F0F4F0",
-      "water": "#B8D4D4",
-      "parks": "#D4E8D4",
-      "road_motorway": "#2D4A3E",
-      "road_primary": "#3D6B55",
-      "road_secondary": "#5A8A70",
-      "road_tertiary": "#7AAA90",
-      "road_residential": "#A0C8B0",
-      "road_default": "#7AAA90"
-  },
-  "gradient_roads": {
-      "name": "Gradient Roads",
-      "description": "Smooth gradient from dark center to light edges with subtle features",
-      "bg": "#FFFFFF",
-      "text": "#000000",
-      "gradient_color": "#FFFFFF",
-      "water": "#D5D5D5",
-      "parks": "#EFEFEF",
-      "road_motorway": "#050505",
-      "road_primary": "#151515",
-      "road_secondary": "#2A2A2A",
-      "road_tertiary": "#404040",
-      "road_residential": "#555555",
-      "road_default": "#404040"
-  },
-  "japanese_ink": {
-      "name": "Japanese Ink",
-      "description": "Traditional ink wash inspired - minimalist with subtle red accent",
-      "bg": "#FAF8F5",
-      "text": "#2C2C2C",
-      "gradient_color": "#FAF8F5",
-      "water": "#E8E4E0",
-      "parks": "#F0EDE8",
-      "road_motorway": "#8B2500",
-      "road_primary": "#4A4A4A",
-      "road_secondary": "#6A6A6A",
-      "road_tertiary": "#909090",
-      "road_residential": "#B8B8B8",
-      "road_default": "#909090"
-  },
-  "midnight_blue": {
-      "name": "Midnight Blue",
-      "description": "Deep navy background with gold/copper roads - luxury atlas aesthetic",
-      "bg": "#0A1628",
-      "text": "#D4AF37",
-      "gradient_color": "#0A1628",
-      "water": "#061020",
-      "parks": "#0F2235",
-      "road_motorway": "#D4AF37",
-      "road_primary": "#C9A227",
-      "road_secondary": "#A8893A",
-      "road_tertiary": "#8B7355",
-      "road_residential": "#6B5B4F",
-      "road_default": "#8B7355"
-  },
-  "monochrome_blue": {
-      "name": "Monochrome Blue",
-      "description": "Single blue color family with varying saturation - clean and cohesive",
-      "bg": "#F5F8FA",
-      "text": "#1A3A5C",
-      "gradient_color": "#F5F8FA",
-      "water": "#D0E0F0",
-      "parks": "#E0EAF2",
-      "road_motorway": "#1A3A5C",
-      "road_primary": "#2A5580",
-      "road_secondary": "#4A7AA8",
-      "road_tertiary": "#7AA0C8",
-      "road_residential": "#A8C4E0",
-      "road_default": "#4A7AA8"
-  },
-  "neon_cyberpunk": {
-      "name": "Neon Cyberpunk",
-      "description": "Dark background with electric pink/cyan - bold night city vibes",
-      "bg": "#0D0D1A",
-      "text": "#00FFFF",
-      "gradient_color": "#0D0D1A",
-      "water": "#0A0A15",
-      "parks": "#151525",
-      "road_motorway": "#FF00FF",
-      "road_primary": "#00FFFF",
-      "road_secondary": "#00C8C8",
-      "road_tertiary": "#0098A0",
-      "road_residential": "#006870",
-      "road_default": "#0098A0"
-  },
-  "noir": {
-      "name": "Noir",
-      "description": "Pure black background with white/gray roads - modern gallery aesthetic",
-      "bg": "#000000",
-      "text": "#FFFFFF",
-      "gradient_color": "#000000",
-      "water": "#0A0A0A",
-      "parks": "#111111",
-      "road_motorway": "#FFFFFF",
-      "road_primary": "#E0E0E0",
-      "road_secondary": "#B0B0B0",
-      "road_tertiary": "#808080",
-      "road_residential": "#505050",
-      "road_default": "#808080"
-  },
-  "ocean": {
-      "name": "Ocean",
-      "description": "Various blues and teals - perfect for coastal cities",
-      "bg": "#F0F8FA",
-      "text": "#1A5F7A",
-      "gradient_color": "#F0F8FA",
-      "water": "#B8D8E8",
-      "parks": "#D8EAE8",
-      "road_motorway": "#1A5F7A",
-      "road_primary": "#2A7A9A",
-      "road_secondary": "#4A9AB8",
-      "road_tertiary": "#70B8D0",
-      "road_residential": "#A0D0E0",
-      "road_default": "#4A9AB8"
-  },
-  "pastel_dream": {
-      "name": "Pastel Dream",
-      "description": "Soft muted pastels with dusty blues and mauves - dreamy artistic aesthetic",
-      "bg": "#FAF7F2",
-      "text": "#5D5A6D",
-      "gradient_color": "#FAF7F2",
-      "water": "#D4E4ED",
-      "parks": "#E8EDE4",
-      "road_motorway": "#7B8794",
-      "road_primary": "#9BA4B0",
-      "road_secondary": "#B5AEBB",
-      "road_tertiary": "#C9C0C9",
-      "road_residential": "#D8D2D8",
-      "road_default": "#C9C0C9"
-  },
-  "sunset": {
-      "name": "Sunset",
-      "description": "Warm oranges and pinks on soft peach - dreamy golden hour aesthetic",
-      "bg": "#FDF5F0",
-      "text": "#C45C3E",
-      "gradient_color": "#FDF5F0",
-      "water": "#F0D8D0",
-      "parks": "#F8E8E0",
-      "road_motorway": "#C45C3E",
-      "road_primary": "#D87A5A",
-      "road_secondary": "#E8A088",
-      "road_tertiary": "#F0B8A8",
-      "road_residential": "#F5D0C8",
-      "road_default": "#E8A088"
-  },
-  "terracotta": {
-      "name": "Terracotta",
-      "description": "Mediterranean warmth - burnt orange and clay tones on cream",
-      "bg": "#F5EDE4",
-      "text": "#8B4513",
-      "gradient_color": "#F5EDE4",
-      "water": "#A8C4C4",
-      "parks": "#E8E0D0",
-      "road_motorway": "#A0522D",
-      "road_primary": "#B8653A",
-      "road_secondary": "#C9846A",
-      "road_tertiary": "#D9A08A",
-      "road_residential": "#E5C4B0",
-      "road_default": "#D9A08A"
-  },
-  "warm_beige": {
-      "name": "Warm Beige",
-      "description": "Earthy warm neutrals with sepia tones - vintage map aesthetic",
-      "bg": "#F5F0E8",
-      "text": "#6B5B4F",
-      "gradient_color": "#F5F0E8",
-      "water": "#DDD5C8",
-      "parks": "#E8E4D8",
-      "road_motorway": "#8B7355",
-      "road_primary": "#A08B70",
-      "road_secondary": "#B5A48E",
-      "road_tertiary": "#C9BBAA",
-      "road_residential": "#D9CFC2",
-      "road_default": "#C9BBAA"
-  },
-};
+export interface PosterTheme {
+  name: string;
+  description?: string;
+  bg: string;
+  text: string;
+  gradient_color: string;
+  water: string;
+  parks: string;
+  road_motorway: string;
+  road_primary: string;
+  road_secondary: string;
+  road_tertiary: string;
+  road_residential: string;
+  road_default: string;
+}
+
+export const POSTER_THEMES: Record<string, PosterTheme> = {
+  "autumn": {
+      "name": "Autumn",
+      "description": "Burnt oranges, deep reds, golden yellows - seasonal warmth",
+      "bg": "#FBF7F0",
+      "text": "#8B4513",
+      "gradient_color": "#FBF7F0",
+      "water": "#D8CFC0",
+      "parks": "#E8E0D0",
+      "road_motorway": "#8B2500",
+      "road_primary": "#B8450A",
+      "road_secondary": "#CC7A30",
+      "road_tertiary": "#D9A050",
+      "road_residential": "#E8C888",
+      "road_default": "#CC7A30"
+  },
+  "blueprint": {
+      "name": "Blueprint",
+      "description": "Classic architectural blueprint - technical drawing aesthetic",
+      "bg": "#1A3A5C",
+      "text": "#E8F4FF",
+      "gradient_color": "#1A3A5C",
+      "water": "#0F2840",
+      "parks": "#1E4570",
+      "road_motorway": "#E8F4FF",
+      "road_primary": "#C5DCF0",
+      "road_secondary": "#9FC5E8",
+      "road_tertiary": "#7BAED4",
+      "road_residential": "#5A96C0",
+      "road_default": "#7BAED4"
+  },
+  "contrast_zones": {
+      "name": "Contrast Zones",
+      "description": "Strong contrast showing urban density - darker in center, lighter at edges",
+      "bg": "#FFFFFF",
+      "text": "#000000",
+      "gradient_color": "#FFFFFF",
+      "water": "#B0B0B0",
+      "parks": "#ECECEC",
+      "road_motorway": "#000000",
+      "road_primary": "#0F0F0F",
+      "road_secondary": "#252525",
+      "road_tertiary": "#404040",
+      "road_residential": "#5A5A5A",
+      "road_default": "#404040"
+  },
+  "copper_patina": {
+      "name": "Copper Patina",
+      "description": "Oxidized copper aesthetic - teal-green patina with copper accents",
+      "bg": "#E8F0F0",
+      "text": "#2A5A5A",
+      "gradient_color": "#E8F0F0",
+      "water": "#C0D8D8",
+      "parks": "#D8E8E0",
+      "road_motorway": "#B87333",
+      "road_primary": "#5A8A8A",
+      "road_secondary": "#6B9E9E",
+      "road_tertiary": "#88B4B4",
+      "road_residential": "#A8CCCC",
+      "road_default": "#88B4B4"
+  },
+  "emerald": {
+      "name": "Emerald City",
+      "description": "Lush dark green aesthetic with mint accents",
+      "bg": "#062C22",
+      "text": "#E3F9F1",
+      "gradient_color": "#062C22",
+      "water": "#0D4536",
+      "parks": "#0F523E",
+      "road_motorway": "#4ADEB0",
+      "road_primary": "#2DB88F",
+      "road_secondary": "#249673",
+      "road_tertiary": "#1B7559",
+      "road_residential": "#155C46",
+      "road_default": "#155C46"
+  },
+  "forest": {
+      "name": "Forest",
+      "description": "Deep greens and sage tones - organic botanical aesthetic",
+      "bg": "#F0F4F0",
+      "text": "#2D4A3E",
+      "gradient_color": "#F0F4F0",
+      "water": "#B8D4D4",
+      "parks": "#D4E8D4",
+      "road_motorway": "#2D4A3E",
+      "road_primary": "#3D6B55",
+      "road_secondary": "#5A8A70",
+      "road_tertiary": "#7AAA90",
+      "road_residential": "#A0C8B0",
+      "road_default": "#7AAA90"
+  },
+  "gradient_roads": {
+      "name": "Gradient Roads",
+      "description": "Smooth gradient from dark center to light edges with subtle features",
+      "bg": "#FFFFFF",
+      "text": "#000000",
+      "gradient_color": "#FFFFFF",
+      "water": "#D5D5D5",
+      "parks": "#EFEFEF",
+      "road_motorway": "#050505",
+      "road_primary": "#151515",
+      "road_secondary": "#2A2A2A",
+      "road_tertiary": "#404040",
+      "road_residential": "#555555",
+      "road_default": "#404040"
+  },
+  "japanese_ink": {
+      "name": "Japanese Ink",
+      "description": "Traditional ink wash inspired - minimalist with subtle red accent",
+      "bg": "#FAF8F5",
+      "text": "#2C2C2C",
+      "gradient_color": "#FAF8F5",
+      "water": "#E8E4E0",
+      "parks": "#F0EDE8",
+      "road_motorway": "#8B2500",
+      "road_primary": "#4A4A4A",
+      "road_secondary": "#6A6A6A",
+      "road_tertiary": "#909090",
+      "road_residential": "#B8B8B8",
+      "road_default": "#909090"
+  },
+  "midnight_blue": {
+      "name": "Midnight Blue",
+      "description": "Deep navy background with gold/copper roads - luxury atlas aesthetic",
+      "bg": "#0A1628",
+      "text": "#D4AF37",
+      "gradient_color": "#0A1628",
+      "water": "#061020",
+      "parks": "#0F2235",
+      "road_motorway": "#D4AF37",
+      "road_primary": "#C9A227",
+      "road_secondary": "#A8893A",
+      "road_tertiary": "#8B7355",
+      "road_residential": "#6B5B4F",
+      "road_default": "#8B7355"
+  },
+  "monochrome_blue": {
+      "name": "Monochrome Blue",
+      "description": "Single blue color family with varying saturation - clean and cohesive",
+      "bg": "#F5F8FA",
+      "text": "#1A3A5C",
+      "gradient_color": "#F5F8FA",
+      "water": "#D0E0F0",
+      "parks": "#E0EAF2",
+      "road_motorway": "#1A3A5C",
+      "road_primary": "#2A5580",
+      "road_secondary": "#4A7AA8",
+      "road_tertiary": "#7AA0C8",
+      "road_residential": "#A8C4E0",
+      "road_default": "#4A7AA8"
+  },
+  "neon_cyberpunk": {
+      "name": "Neon Cyberpunk",
+      "description": "Dark background with electric pink/cyan - bold night city vibes",
+      "bg": "#0D0D1A",
+      "text": "#00FFFF",
+      "gradient_color": "#0D0D1A",
+      "water": "#0A0A15",
+      "parks": "#151525",
+      "road_motorway": "#FF00FF",
+      "road_primary": "#00FFFF",
+      "road_secondary": "#00C8C8",
+      "road_tertiary": "#0098A0",
+      "road_residential": "#006870",
+      "road_default": "#0098A0"
+  },
+  "noir": {
+      "name": "Noir",
+      "description": "Pure black background with white/gray roads - modern gallery aesthetic",
+      "bg": "#000000",
+      "text": "#FFFFFF",
+      "gradient_color": "#000000",
+      "water": "#0A0A0A",
+      "parks": "#111111",
+      "road_motorway": "#FFFFFF",
+      "road_primary": "#E0E0E0",
+      "road_secondary": "#B0B0B0",
+      "road_tertiary": "#808080",
+      "road_residential": "#505050",
+      "road_default": "#808080"
+  },
+  "ocean": {
+      "name": "Ocean",
+      "description": "Various blues and teals - perfect for coastal cities",
+      "bg": "#F0F8FA",
+      "text": "#1A5F7A",
+      "gradient_color": "#F0F8FA",
+      "water": "#B8D8E8",
+      "parks": "#D8EAE8",
+      "road_motorway": "#1A5F7A",
+      "road_primary": "#2A7A9A",
+      "road_secondary": "#4A9AB8",
+      "road_tertiary": "#70B8D0",
+      "road_residential": "#A0D0E0",
+      "road_default": "#4A9AB8"
+  },
+  "pastel_dream": {
+      "name": "Pastel Dream",
+      "description": "Soft muted pastels with dusty blues and mauves - dreamy artistic aesthetic",
+      "bg": "#FAF7F2",
+      "text": "#5D5A6D",
+      "gradient_color": "#FAF7F2",
+      "water": "#D4E4ED",
+      "parks": "#E8EDE4",
+      "road_motorway": "#7B8794",
+      "road_primary": "#9BA4B0",
+      "road_secondary": "#B5AEBB",
+      "road_tertiary": "#C9C0C9",
+      "road_residential": "#D8D2D8",
+      "road_default": "#C9C0C9"
+  },
+  "sunset": {
+      "name": "Sunset",
+      "description": "Warm oranges and pinks on soft peach - dreamy golden hour aesthetic",
+      "bg": "#FDF5F0",
+      "text": "#C45C3E",
+      "gradient_color": "#FDF5F0",
+      "water": "#F0D8D0",
+      "parks": "#F8E8E0",
+      "road_motorway": "#C45C3E",
+      "road_primary": "#D87A5A",
+      "road_secondary": "#E8A088",
+      "road_tertiary": "#F0B8A8",
+      "road_residential": "#F5D0C8",
+      "road_default": "#E8A088"
+  },
+  "terracotta": {
+      "name": "Terracotta",
+      "description": "Mediterranean warmth - burnt orange and clay tones on cream",
+      "bg": "#F5EDE4",
+      "text": "#8B4513",
+      "gradient_color": "#F5EDE4",
+      "water": "#A8C4C4",
+      "parks": "#E8E0D0",
+      "road_motorway": "#A0522D",
+      "road_primary": "#B8653A",
+      "road_secondary": "#C9846A",
+      "road_tertiary": "#D9A08A",
+      "road_residential": "#E5C4B0",
+      "road_default": "#D9A08A"
+  },
+  "warm_beige": {
+      "name": "Warm Beige",
+      "description": "Earthy warm neutrals with sepia tones - vintage map aesthetic",
+      "bg": "#F5F0E8",
+      "text": "#6B5B4F",
+      "gradient_color": "#F5F0E8",
+      "water": "#DDD5C8",
+      "parks": "#E8E4D8",
+      "road_motorway": "#8B7355",
+      "road_primary": "#A08B70",
+      "road_secondary": "#B5A48E",
+      "road_tertiary": "#C9BBAA",
+      "road_residential": "#D9CFC2",
+      "road_default": "#C9BBAA"
+  },
+};
diff --git a/packages/ui/src/modules/places/v1/client-gridsearch.ts b/packages/ui/src/modules/places/v1/client-gridsearch.ts
new file mode 100644
index 00000000..798e7861
--- /dev/null
+++ b/packages/ui/src/modules/places/v1/client-gridsearch.ts
@@ -0,0 +1,249 @@
+import { supabase as defaultSupabase } from "@/integrations/supabase/client";
+import { fetchWithDeduplication } from "@/lib/db";
+
+const serverUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
+
+// --- Types ---
+export interface GridSearchSummary {
+    id: string;
+    status: string;
+    regionName: string;
+    level: string;
+    query: string;
+    generatedAt: string;
+}
+
+export interface RestoredRunState {
+    run: {
+        id: string;
+        runId: string;
+        status: string;
+        request: any;
+        result: any;
+        createdAt: string;
+        updatedAt: string;
+    };
+    areasSearched: number;
+    totalPlaces: number;
+    places: any[];
+}
+
+export interface GridSearchJobPayload {
+    region: string;
+    types: string[];
+    level?: string;
+    emails?: boolean;
+    names?: string[];
+    enrichers?: string[];
+    enrichBudgetMs?: number;
+    jobId?: string;
+    guided?: {
+        areas: {
+            gid: string;
+            name: string;
+            level: number;
+            raw: any;
+        }[];
+        settings?: any;
+    };
+}
+
+export interface GridSearchGeneratePayload {
+    region: string;
+    level: 'cities' | 'provinces' | 'states' | 'districts' | 'towns' | 'villages';
+    name?: string;
+}
+
+export interface GridSearchPolygonPayload {
+    regionGid?: string;
+    level?: number;
+    gids?: string[];
+}
+
+export interface GridSearchPreviewPayload {
+    query: string;
+    lat?: number;
+    lng?: number;
+}
+
+/** Helper function to get authorization headers */
+const getAuthHeaders = async (): Promise<HeadersInit> => {
+    const { data: sessionData } = await defaultSupabase.auth.getSession();
+    const token = sessionData?.session?.access_token;
+    const headers: HeadersInit = { 'Content-Type': 'application/json' };
+    if (token) headers['Authorization'] = `Bearer ${token}`;
+    return headers;
+};
+
+// --- API Methods ---
+
+export const fetchGridSearches = async (): Promise<GridSearchSummary[]> => {
+    const headers = await getAuthHeaders();
+    // Cache busting is probably needed more often if we delete, so skip deduplication wrapper
+    // or just fetch raw without caching
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch`, { headers });
+    if (!res.ok) throw new Error(`Failed to fetch grid searches: ${res.statusText}`);
+    const json = await res.json();
+    return json.data || [];
+};
+
+export const deleteGridSearch = async (id: string): Promise<boolean> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch/${id}`, {
+        method: 'DELETE',
+        headers
+    });
+    if (!res.ok) throw new Error(`Failed to delete grid search: ${res.statusText}`);
+    const json = await res.json();
+    return json.success;
+};
+
+export const fetchGridSearchById = async (id: string): Promise<any> => {
+    const cacheKey = `gridsearch-id-${id}`;
+    return fetchWithDeduplication(cacheKey, async () => {
+        const headers = await getAuthHeaders();
+        const res = await fetch(`${serverUrl}/api/locations/gridsearch/${id}`, { headers });
+        if (!res.ok) throw new Error(`Failed to fetch grid search result: ${res.statusText}`);
+        const json = await res.json();
+        return json.data;
+    }, 60000 * 5); // 5 minute cache
+};
+
+export const fetchGridSearchRunState = async (id: string): Promise<RestoredRunState> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch/${id}/state`, { headers });
+    if (!res.ok) throw new Error(`Failed to fetch run state: ${res.statusText}`);
+    const json = await res.json();
+    return json.data;
+};
+
+export const submitGridSearchJob = async (payload: GridSearchJobPayload): Promise<{ message: string; jobId: string }> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload)
+    });
+    if (!res.ok) throw new Error(`Failed to submit grid search job: ${res.statusText}`);
+    return await res.json();
+};
+
+export const fetchGridSearchPolygons = async (payload: GridSearchPolygonPayload): Promise<any> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch/polygons`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload)
+    });
+    if (!res.ok) throw new Error(`Failed to fetch grid search polygons: ${res.statusText}`);
+    return await res.json(); // Returns GeoJSON FeatureCollection
+};
+
+export const generateGridSearch = async (payload: GridSearchGeneratePayload): Promise<{ success: boolean; jsonFile: string; mdFile: string; areasCount: number }> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch/generate`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload)
+    });
+    if (!res.ok) throw new Error(`Failed to generate grid search: ${res.statusText}`);
+    return await res.json();
+};
+
+/** Get the streaming SSE URL for a GridSearch job */
+export const getGridSearchStreamUrl = (jobId: string, token?: string): string => {
+    const url = `${serverUrl}/api/locations/gridsearch/${jobId}/stream`;
+    return token ? `${url}?token=${token}` : url;
+};
+
+
+export const previewGridSearch = async (payload: GridSearchPreviewPayload): Promise<{ success: boolean; results: any[] }> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch/preview`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload)
+    });
+    if (!res.ok) throw new Error(`Failed to preview grid search: ${res.statusText}`);
+    return await res.json();
+};
+
+export const fetchCompetitorById = async (id: string): Promise<any> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/places/${id}`, { headers });
+    if (!res.ok) throw new Error(`Failed to fetch place details: ${res.statusText}`);
+    const json = await res.json();
+    return json.data;
+};
+
+export const fetchGridSearchExport = async (jobId: string, format: 'md' | 'json' = 'md'): Promise<string> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/locations/gridsearch/export?search=${jobId}&format=${format}`, {
+        method: 'GET',
+        headers
+    });
+    if (!res.ok) throw new Error(`Failed to load report: ${res.statusText}`);
+    return await res.text();
+};
+
+// --- Places GridSearch API Methods (New C++ backend) ---
+
+export const fetchPlacesGridSearches = async (): Promise<GridSearchSummary[]> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/places/gridsearch`, { headers });
+    if (!res.ok) throw new Error(`Failed to fetch places grid searches: ${res.statusText}`);
+    const json = await res.json();
+    return json.data || [];
+};
+
+export const fetchPlacesGridSearchById = async (id: string): Promise<any> => {
+    const cacheKey = `places-gridsearch-id-${id}`;
+    return fetchWithDeduplication(cacheKey, async () => {
+        const headers = await getAuthHeaders();
+        const res = await fetch(`${serverUrl}/api/places/gridsearch/${id}`, { headers });
+        if (!res.ok) throw new Error(`Failed to fetch places grid search result: ${res.statusText}`);
+        const json = await res.json();
+        return json.data;
+    }, 60000 * 5);
+};
+
+export const fetchPlacesGridSearchRunState = async (id: string): Promise<RestoredRunState> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/places/gridsearch/${id}/state`, { headers });
+    if (!res.ok) throw new Error(`Failed to fetch run state: ${res.statusText}`);
+    const json = await res.json();
+    return json.data;
+};
+
+export const submitPlacesGridSearchJob = async (payload: GridSearchJobPayload): Promise<{ message: string; jobId: string }> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/places/gridsearch`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload)
+    });
+    if (!res.ok) throw new Error(`Failed to submit places grid search job: ${res.statusText}`);
+    return await res.json();
+};
+
+export const deletePlacesGridSearch = async (id: string): Promise<boolean> => {
+    // We will just call the old locations route for deletion to keep it simple, 
+    // since both manipulate the exact same Postgres table (grid_search_runs).
+    return deleteGridSearch(id);
+};
+
+export const getPlacesGridSearchStreamUrl = (jobId: string, token?: string): string => {
+    // If not implemented in places, fallback to locations or just use the same URL format
+    const url = `${serverUrl}/api/places/gridsearch/${jobId}/stream`;
+    return token ? `${url}?token=${token}` : url;
+};
+
+export const fetchPlacesGridSearchExport = async (jobId: string, format: 'md' | 'json' = 'md'): Promise<string> => {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${serverUrl}/api/places/gridsearch/export?search=${jobId}&format=${format}`, {
+        method: 'GET',
+        headers
+    });
+    if (!res.ok) throw new Error(`Failed to load places grid search export: ${res.statusText}`);
+    return await res.text();
+};
diff --git a/packages/ui/src/modules/places/client-search.ts b/packages/ui/src/modules/places/v1/client-search.ts
similarity index 100%
rename from packages/ui/src/modules/places/client-search.ts
rename to packages/ui/src/modules/places/v1/client-search.ts
diff --git a/packages/ui/src/modules/posts/NewPost.tsx b/packages/ui/src/modules/posts/NewPost.tsx
index d29a4ffc..37c7c27e 100644
--- a/packages/ui/src/modules/posts/NewPost.tsx
+++ b/packages/ui/src/modules/posts/NewPost.tsx
@@ -1,227 +1,227 @@
-import React from "react";
-import { supabase } from "@/integrations/supabase/client";
-import { useAuth } from "@/hooks/useAuth";
-import { useNavigate, Navigate } from "react-router-dom";
-import { CreationWizardPopup } from "@/components/CreationWizardPopup";
-import { toast } from "sonner";
-
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-
-const NewPost = () => {
-  const { user, loading } = useAuth();
-  const navigate = useNavigate();
-  const [sharedImages, setSharedImages] = React.useState<any[]>([]);
-  const [sharedTitle, setSharedTitle] = React.useState("");
-  const [sharedText, setSharedText] = React.useState("");
-  const [debugLogs, setDebugLogs] = React.useState<string[]>([]);
-  const [showLogs, setShowLogs] = React.useState(false);
-
-  const addLog = (msg: string) => {
-    console.log(msg);
-    setDebugLogs(prev => [...prev, new Date().toISOString().split('T')[1].split('.')[0] + ': ' + msg]);
-  };
-
-  // Helper to process URL like GlobalDragDrop does
-  const processSharedUrl = async (url: string) => {
-    addLog(`Processing shared URL: ${url}`);
-    try {
-      // Use relative path for API calls to support mobile/PWA proxying
-      // Fallback to localhost only if strictly needed in dev without proxy, but empty string is safer for Vite proxy
-      const serverUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
-      addLog(`Fetching site info from: ${serverUrl || '/api'}/serving/site-info`);
-
-      const { data: { session } } = await supabase.auth.getSession();
-      const headers: Record<string, string> = {};
-      if (session?.access_token) {
-        headers['Authorization'] = `Bearer ${session.access_token}`;
-      }
-
-      // Ensure we have a valid URL protocol
-      let targetUrl = url;
-      if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
-        // If just a domain or text, try to extract or prepend
-        const urlMatch = url.match(/(https?:\/\/[^\s]+)/g);
-        if (urlMatch && urlMatch.length > 0) {
-          targetUrl = urlMatch[0];
-        } else {
-          // fallback
-          targetUrl = 'https://' + url;
-        }
-      }
-
-      const response = await fetch(`${serverUrl}/api/serving/site-info?url=${encodeURIComponent(targetUrl)}`, {
-        headers
-      });
-      addLog(`Response status: ${response.status}`);
-
-      let siteInfo = {};
-      if (response.ok) {
-        siteInfo = await response.json();
-        addLog(`Site info fetched: ${JSON.stringify(siteInfo).slice(0, 100)}...`);
-      } else {
-        const txt = await response.text();
-        addLog(`Failed to fetch site info: ${response.status} ${response.statusText} - ${txt}`);
-        // Open logs on error
-        setShowLogs(true);
-      }
-
-      const virtualItem = {
-        id: `shared-link-${Date.now()}`,
-        path: url,
-        src: (siteInfo as any).page?.image || 'https://picsum.photos/800/600',
-        title: (siteInfo as any).page?.title || (siteInfo as any).title || url,
-        description: (siteInfo as any).page?.description || (siteInfo as any).description || '',
-        type: 'page-external',
-        meta: siteInfo,
-        file: null,
-        selected: true
-      } as any;
-
-      return virtualItem;
-    } catch (err: any) {
-      addLog(`Error processing shared URL: ${err.message || err}`);
-      toast.error("Could not fetch link details. See debug logs.");
-      setShowLogs(true);
-      return {
-        id: `shared-link-${Date.now()}`,
-        path: url,
-        src: 'https://picsum.photos/800/600',
-        title: url,
-        description: '',
-        type: 'page-external',
-        meta: { url },
-        file: null,
-        selected: true
-      } as any;
-    }
-  };
-
-  React.useEffect(() => {
-    const checkShared = async () => {
-      const params = new URLSearchParams(window.location.search);
-      if (params.get('shared') === 'true') {
-        try {
-          // Dynamic import to avoid SSR/build issues if any, though likely fine as is
-          const { get, del } = await import('idb-keyval');
-          const data = await get('share-target');
-
-          if (data) {
-            console.log("Found shared data:", data);
-            const { files, title, text, url, items } = data; // Destructure items
-
-            let newImages = [];
-
-            // Handle virtual items (pre-processed in GlobalDragDrop)
-            if (items && items.length > 0) {
-              newImages = [...newImages, ...items];
-            }
-
-            // Handle raw files (legacy share target)
-            if (files && files.length > 0) {
-              const fileImages = Array.from(files).map((f: any) => ({
-                id: `shared-${Date.now()}-${Math.random()}`,
-                file: f,
-                src: URL.createObjectURL(f),
-                title: f.name,
-                selected: true,
-                isGenerated: false,
-                type: f.type.startsWith('video/') ? 'video' : 'image'
-              }));
-              newImages = [...newImages, ...fileImages];
-            }
-
-            // Handle raw URL share (Mobile Share Target)
-            // TikTok/others often share text like "Check this out https://vm.tiktok.com/..."
-            const urlRegex = /(https?:\/\/[^\s]+)/g;
-            const textHasUrl = text && urlRegex.test(text);
-
-            if (newImages.length === 0 && (url || textHasUrl)) {
-              let targetUrl = url;
-              if (!targetUrl && textHasUrl) {
-                const match = text.match(urlRegex);
-                if (match && match.length > 0) targetUrl = match[0];
-              }
-
-              if (targetUrl) {
-                toast.info("Processing shared link...");
-                const virtualItem = await processSharedUrl(targetUrl);
-                newImages = [virtualItem];
-
-                // If we extracted the URL from the text, we might want to clean up the sharedText 
-                // or keep it as the description? 
-                // Let's keep the full text as description for context, 
-                // but if the text was ONLY the URL, we might want to clear it?
-                // For now, keep as is.
-              }
-            }
-
-            if (newImages.length > 0) {
-              setSharedImages(newImages);
-            }
-
-            if (title) setSharedTitle(title);
-
-            let description = text || "";
-            if (url) description += (description ? "\n\n" : "") + url;
-            setSharedText(description);
-
-            // Clean up
-            await del('share-target');
-          }
-        } catch (err) {
-          console.error("Error reading shared data:", err);
-        }
-      }
-    };
-    checkShared();
-  }, []);
-
-  if (loading) {
-    return <div className="min-h-screen bg-background pt-14 flex items-center justify-center">Loading...</div>;
-  }
-
-  if (!user) {
-    return <Navigate to="/auth" replace />;
-  }
-
-  return (
-    <div className="min-h-screen bg-background pt-14">
-      {/* Show CreationWizardPopup with shared images */}
-      <CreationWizardPopup
-        isOpen={true}
-        onClose={() => navigate('/')}
-        preloadedImages={sharedImages}
-      />
-
-      {/* Debug Logs Dialog */}
-      <Dialog open={showLogs} onOpenChange={setShowLogs}>
-        <DialogContent className="max-w-md max-h-[80vh]">
-          <DialogHeader>
-            <DialogTitle>Debug Logs</DialogTitle>
-            <DialogDescription>Use these logs to troubleshoot connectivity issues.</DialogDescription>
-          </DialogHeader>
-          <div className="h-[300px] w-full border rounded-md p-2 bg-muted/50 overflow-auto font-mono text-xs">
-            {debugLogs.length === 0 ? (
-              <div className="text-muted-foreground italic">No logs yet...</div>
-            ) : (
-              debugLogs.map((log, i) => (
-                <div key={i} className="border-b border-border/50 py-1 break-words">
-                  {log}
-                </div>
-              ))
-            )}
-          </div>
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" size="sm" onClick={() => navigator.clipboard.writeText(debugLogs.join('\n'))}>
-              Copy
-            </Button>
-            <Button size="sm" onClick={() => setShowLogs(false)}>Close</Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-};
-
-export default NewPost;
\ No newline at end of file
+import React from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useNavigate, Navigate } from "react-router-dom";
+import { CreationWizardPopup } from "@/components/CreationWizardPopup";
+import { toast } from "sonner";
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+const NewPost = () => {
+  const { user, loading } = useAuth();
+  const navigate = useNavigate();
+  const [sharedImages, setSharedImages] = React.useState<any[]>([]);
+  const [sharedTitle, setSharedTitle] = React.useState("");
+  const [sharedText, setSharedText] = React.useState("");
+  const [debugLogs, setDebugLogs] = React.useState<string[]>([]);
+  const [showLogs, setShowLogs] = React.useState(false);
+
+  const addLog = (msg: string) => {
+    console.log(msg);
+    setDebugLogs(prev => [...prev, new Date().toISOString().split('T')[1].split('.')[0] + ': ' + msg]);
+  };
+
+  // Helper to process URL like GlobalDragDrop does
+  const processSharedUrl = async (url: string) => {
+    addLog(`Processing shared URL: ${url}`);
+    try {
+      // Use relative path for API calls to support mobile/PWA proxying
+      // Fallback to localhost only if strictly needed in dev without proxy, but empty string is safer for Vite proxy
+      const serverUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
+      addLog(`Fetching site info from: ${serverUrl || '/api'}/serving/site-info`);
+
+      const { data: { session } } = await supabase.auth.getSession();
+      const headers: Record<string, string> = {};
+      if (session?.access_token) {
+        headers['Authorization'] = `Bearer ${session.access_token}`;
+      }
+
+      // Ensure we have a valid URL protocol
+      let targetUrl = url;
+      if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
+        // If just a domain or text, try to extract or prepend
+        const urlMatch = url.match(/(https?:\/\/[^\s]+)/g);
+        if (urlMatch && urlMatch.length > 0) {
+          targetUrl = urlMatch[0];
+        } else {
+          // fallback
+          targetUrl = 'https://' + url;
+        }
+      }
+
+      const response = await fetch(`${serverUrl}/api/serving/site-info?url=${encodeURIComponent(targetUrl)}`, {
+        headers
+      });
+      addLog(`Response status: ${response.status}`);
+
+      let siteInfo = {};
+      if (response.ok) {
+        siteInfo = await response.json();
+        addLog(`Site info fetched: ${JSON.stringify(siteInfo).slice(0, 100)}...`);
+      } else {
+        const txt = await response.text();
+        addLog(`Failed to fetch site info: ${response.status} ${response.statusText} - ${txt}`);
+        // Open logs on error
+        setShowLogs(true);
+      }
+
+      const virtualItem = {
+        id: `shared-link-${Date.now()}`,
+        path: url,
+        src: (siteInfo as any).page?.image || 'https://picsum.photos/800/600',
+        title: (siteInfo as any).page?.title || (siteInfo as any).title || url,
+        description: (siteInfo as any).page?.description || (siteInfo as any).description || '',
+        type: 'page-external',
+        meta: siteInfo,
+        file: null,
+        selected: true
+      } as any;
+
+      return virtualItem;
+    } catch (err: any) {
+      addLog(`Error processing shared URL: ${err.message || err}`);
+      toast.error("Could not fetch link details. See debug logs.");
+      setShowLogs(true);
+      return {
+        id: `shared-link-${Date.now()}`,
+        path: url,
+        src: 'https://picsum.photos/800/600',
+        title: url,
+        description: '',
+        type: 'page-external',
+        meta: { url },
+        file: null,
+        selected: true
+      } as any;
+    }
+  };
+
+  React.useEffect(() => {
+    const checkShared = async () => {
+      const params = new URLSearchParams(window.location.search);
+      if (params.get('shared') === 'true') {
+        try {
+          // Dynamic import to avoid SSR/build issues if any, though likely fine as is
+          const { get, del } = await import('idb-keyval');
+          const data = await get('share-target');
+
+          if (data) {
+            console.log("Found shared data:", data);
+            const { files, title, text, url, items } = data; // Destructure items
+
+            let newImages = [];
+
+            // Handle virtual items (pre-processed in GlobalDragDrop)
+            if (items && items.length > 0) {
+              newImages = [...newImages, ...items];
+            }
+
+            // Handle raw files (legacy share target)
+            if (files && files.length > 0) {
+              const fileImages = Array.from(files).map((f: any) => ({
+                id: `shared-${Date.now()}-${Math.random()}`,
+                file: f,
+                src: URL.createObjectURL(f),
+                title: f.name,
+                selected: true,
+                isGenerated: false,
+                type: f.type.startsWith('video/') ? 'video' : 'image'
+              }));
+              newImages = [...newImages, ...fileImages];
+            }
+
+            // Handle raw URL share (Mobile Share Target)
+            // TikTok/others often share text like "Check this out https://vm.tiktok.com/..."
+            const urlRegex = /(https?:\/\/[^\s]+)/g;
+            const textHasUrl = text && urlRegex.test(text);
+
+            if (newImages.length === 0 && (url || textHasUrl)) {
+              let targetUrl = url;
+              if (!targetUrl && textHasUrl) {
+                const match = text.match(urlRegex);
+                if (match && match.length > 0) targetUrl = match[0];
+              }
+
+              if (targetUrl) {
+                toast.info("Processing shared link...");
+                const virtualItem = await processSharedUrl(targetUrl);
+                newImages = [virtualItem];
+
+                // If we extracted the URL from the text, we might want to clean up the sharedText 
+                // or keep it as the description? 
+                // Let's keep the full text as description for context, 
+                // but if the text was ONLY the URL, we might want to clear it?
+                // For now, keep as is.
+              }
+            }
+
+            if (newImages.length > 0) {
+              setSharedImages(newImages);
+            }
+
+            if (title) setSharedTitle(title);
+
+            let description = text || "";
+            if (url) description += (description ? "\n\n" : "") + url;
+            setSharedText(description);
+
+            // Clean up
+            await del('share-target');
+          }
+        } catch (err) {
+          console.error("Error reading shared data:", err);
+        }
+      }
+    };
+    checkShared();
+  }, []);
+
+  if (loading) {
+    return <div className="min-h-screen bg-background pt-14 flex items-center justify-center">Loading...</div>;
+  }
+
+  if (!user) {
+    return <Navigate to="/auth" replace />;
+  }
+
+  return (
+    <div className="min-h-screen bg-background pt-14">
+      {/* Show CreationWizardPopup with shared images */}
+      <CreationWizardPopup
+        isOpen={true}
+        onClose={() => navigate('/')}
+        preloadedImages={sharedImages}
+      />
+
+      {/* Debug Logs Dialog */}
+      <Dialog open={showLogs} onOpenChange={setShowLogs}>
+        <DialogContent className="max-w-md max-h-[80vh]">
+          <DialogHeader>
+            <DialogTitle>Debug Logs</DialogTitle>
+            <DialogDescription>Use these logs to troubleshoot connectivity issues.</DialogDescription>
+          </DialogHeader>
+          <div className="h-[300px] w-full border rounded-md p-2 bg-muted/50 overflow-auto font-mono text-xs">
+            {debugLogs.length === 0 ? (
+              <div className="text-muted-foreground italic">No logs yet...</div>
+            ) : (
+              debugLogs.map((log, i) => (
+                <div key={i} className="border-b border-border/50 py-1 break-words">
+                  {log}
+                </div>
+              ))
+            )}
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" size="sm" onClick={() => navigator.clipboard.writeText(debugLogs.join('\n'))}>
+              Copy
+            </Button>
+            <Button size="sm" onClick={() => setShowLogs(false)}>Close</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default NewPost;
diff --git a/packages/ui/src/modules/posts/PostPage.tsx b/packages/ui/src/modules/posts/PostPage.tsx
index 353f0577..c178e356 100644
--- a/packages/ui/src/modules/posts/PostPage.tsx
+++ b/packages/ui/src/modules/posts/PostPage.tsx
@@ -1,1101 +1,1101 @@
-import { useState, useEffect, useRef, Suspense, lazy } from "react";
-import { useParams, useNavigate, useSearchParams } from "react-router-dom";
-import { useAuth } from "@/hooks/useAuth";
-import { X } from 'lucide-react';
-import { Button } from "@/components/ui/button";
-import { toast } from "sonner";
-
-import { useWizardContext } from "@/hooks/useWizardContext";
-import { T, translate } from "@/i18n";
-import { isVideoType } from "@/lib/mediaRegistry";
-
-import { getYouTubeId, getTikTokId, updateMediaPositions, getVideoUrlWithResolution } from "./views/utils";
-
-import { YouTubeDialog } from "./views/components/YouTubeDialog";
-import { TikTokDialog } from "./views/components/TikTokDialog";
-
-import UserPage from "@/modules/pages/UserPage";
-import { ThumbsRenderer } from "./views/renderers/ThumbsRenderer";
-import { CompactRenderer } from "./views/renderers/CompactRenderer";
-import { usePostActions } from "./views/usePostActions";
-import { exportMarkdown, downloadMediaItem } from "./views/PostActions";
-import { DeleteDialog } from "./views/components/DeleteDialogs";
-import { CategoryManager } from "@/components/widgets/CategoryManager";
-import { SEO } from "@/components/SEO";
-
-
-import '@vidstack/react/player/styles/default/theme.css';
-import '@vidstack/react/player/styles/default/layouts/video.css';
-
-// New Modules
-import { PostMediaItem as MediaItem, PostItem, UserProfile } from "./views/types";
-import { ImageFile, MediaType } from "@/types";
-import { uploadInternalVideo } from "@/utils/uploadUtils";
-import { fetchPageById } from "@/modules/pages/client-pages";
-import { addCollectionPictures, createPicture, fetchPictureById, fetchVersions, toggleLike, unlinkPictures, updatePicture, updateStorageFile, uploadFileToStorage, upsertPictures } from "@/modules/posts/client-pictures";
-import { fetchPostById, updatePostDetails } from "@/modules/posts/client-posts";
-
-
-// Heavy Components - Lazy Loaded
-const ImagePickerDialog = lazy(() => import("@/components/widgets/ImagePickerDialog").then(module => ({ default: module.ImagePickerDialog })));
-const ImageWizard = lazy(() => import("@/components/ImageWizard"));
-const EditImageModal = lazy(() => import("@/components/EditImageModal"));
-const EditVideoModal = lazy(() => import("@/components/EditVideoModal"));
-const SmartLightbox = lazy(() => import("./views/components/SmartLightbox"));
-
-interface PostProps {
-  postId?: string;
-  embedded?: boolean;
-  className?: string;
-}
-
-const Post = ({ postId: propPostId, embedded = false, className }: PostProps) => {
-  const { id: paramId } = useParams<{ id: string }>();
-  const id = propPostId || paramId;
-  const [searchParams, setSearchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const { user } = useAuth();
-
-  const { setWizardImage } = useWizardContext();
-
-  // ... state ...
-  const [post, setPost] = useState<PostItem | null>(null);
-  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
-  const [mediaItem, setMediaItem] = useState<MediaItem | null>(null); // Current displaying item
-
-  // ... other state ...
-  const [isLiked, setIsLiked] = useState(false);
-  const [likesCount, setLikesCount] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [lastTap, setLastTap] = useState(0);
-  const [showLightbox, setShowLightbox] = useState(false);
-  const preLightboxFocusRef = useRef<HTMLElement | null>(null);
-  const [isPublishing, setIsPublishing] = useState(false);
-  const [versionImages, setVersionImages] = useState<ImageFile[]>([]);
-  // Don't calculate currentImageIndex here yet, wait for render or use memo
-  const [authorProfile, setAuthorProfile] = useState<UserProfile | null>(null);
-
-  const [youTubeUrl, setYouTubeUrl] = useState('');
-  const [tikTokUrl, setTikTokUrl] = useState('');
-
-  // NOTE: llm hook removed from here, now inside SmartLightbox
-
-  const isVideo = isVideoType(mediaItem?.type as MediaType);
-
-  // Initialize viewMode from URL parameter
-  const [viewMode, setViewMode] = useState<'compact' | 'thumbs'>(() => {
-    const viewParam = searchParams.get('view');
-    if (viewParam === 'compact' || viewParam === 'thumbs') {
-      return viewParam;
-    }
-    return 'compact';
-  });
-
-
-
-  // Render Page Content if it's an internal page
-
-
-  // Calculate index safely
-  const currentImageIndex = mediaItems.findIndex(item => item.id === mediaItem?.id);
-
-  // Unified URL sync: write `view`, `pic`, and `fullscreen` params atomically (standalone only)
-  const isInitialMount = useRef(true);
-  useEffect(() => {
-    if (embedded) return;
-    // Skip the very first render to avoid overwriting URL before data loads
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
-      return;
-    }
-
-    const newParams = new URLSearchParams(searchParams);
-    newParams.set('view', viewMode);
-
-    if (mediaItem?.id) {
-      newParams.set('pic', mediaItem.id);
-    } else {
-      newParams.delete('pic');
-    }
-
-    if (showLightbox) {
-      newParams.set('fullscreen', '1');
-    } else {
-      newParams.delete('fullscreen');
-    }
-
-    // Only update if something actually changed
-    const currentView = searchParams.get('view');
-    const currentPic = searchParams.get('pic');
-    const currentFs = searchParams.get('fullscreen');
-    const targetFs = showLightbox ? '1' : null;
-    if (currentView !== viewMode || currentPic !== (mediaItem?.id || null) || currentFs !== targetFs) {
-      setSearchParams(newParams, { replace: true });
-    }
-  }, [viewMode, mediaItem?.id, showLightbox, embedded]);
-
-  // Sync URL → state (only for external URL changes, e.g. browser back/forward)
-  useEffect(() => {
-    const viewParam = searchParams.get('view');
-    if (viewParam === 'compact' || viewParam === 'thumbs') {
-      setViewMode(viewParam as any);
-    }
-
-    // Restore pic selection from URL if items are loaded
-    const picParam = searchParams.get('pic');
-    if (picParam && mediaItems.length > 0) {
-      const targetItem = mediaItems.find(item => item.id === picParam);
-      if (targetItem && targetItem.id !== mediaItem?.id) {
-        setMediaItem(targetItem);
-        setLikesCount(targetItem.likes_count || 0);
-      }
-    }
-
-    // Restore fullscreen/lightbox state
-    const fsParam = searchParams.get('fullscreen');
-    setShowLightbox(fsParam === '1');
-  }, [searchParams]);
-
-  const [removedItemIds, setRemovedItemIds] = useState<Set<string>>(new Set());
-
-  // Inline Editor State
-  const [isEditMode, setIsEditMode] = useState(false);
-  const [localPost, setLocalPost] = useState<{ title: string; description: string; settings?: any } | null>(null);
-  const [localMediaItems, setLocalMediaItems] = useState<any[]>([]);
-  const [showGalleryPicker, setShowGalleryPicker] = useState(false);
-  const [showAIWizard, setShowAIWizard] = useState(false);
-  const insertIndexRef = useRef<number>(0);
-
-  const isOwner = user?.id === mediaItem?.user_id;
-
-  const videoPosterUrl = (isVideo && mediaItem?.thumbnail_url)
-    ? (mediaItem.image_url.includes('/api/videos/')
-      ? mediaItem.thumbnail_url
-      : `${mediaItem.thumbnail_url}?width=1280&height=720&fit_mode=preserve&time=0`)
-    : undefined;
-
-  const videoPlaybackUrl = (isVideo && mediaItem?.image_url) ? getVideoUrlWithResolution(mediaItem.image_url) : undefined;
-
-  useEffect(() => {
-    const savedMode = localStorage.getItem('postViewMode');
-    if (savedMode === 'compact' || savedMode === 'thumbs') {
-      setViewMode(savedMode as any);
-    } else if (post?.settings?.display && (post.settings.display === 'compact' || post.settings.display === 'thumbs')) {
-      setViewMode(post.settings.display);
-    }
-  }, [post]);
-
-  const handleViewMode = (mode: 'compact' | 'thumbs') => {
-    setViewMode(mode);
-    // LocalStorage backup removed to favor URL matching
-    // localStorage.setItem('postViewMode', mode); 
-  };
-
-  const handleRemoveFromPost = (index: number) => {
-    const itemToRemove = localMediaItems[index];
-    if (!itemToRemove) return;
-    setRemovedItemIds(prev => new Set(prev).add(itemToRemove.id));
-    const newItems = [...localMediaItems];
-    newItems.splice(index, 1);
-    updateMediaPositions(newItems, setLocalMediaItems, setMediaItems);
-    toast.success(translate("Removed from post"));
-  };
-
-  const handleInlineUpload = async (files: File[], insertIndex: number) => {
-    if (!files.length || !user?.id) return;
-    toast.info(`Uploading ${files.length} images...`);
-
-    const newItems = [...localMediaItems];
-    const newUploads: any[] = [];
-
-    for (const file of files) {
-      try {
-        if (file.type.startsWith('video')) {
-          // Handle video upload via internal API
-          const uploadData = await uploadInternalVideo(file, user.id);
-
-          // Fetch the created picture record to get the correct URL and details
-          const picture = await fetchPictureById(uploadData.dbId);
-          if (!picture) throw new Error('Failed to retrieve uploaded video details');
-
-          const newItem = {
-            id: picture.id,
-            title: picture.title,
-            description: picture.description || '',
-            image_url: picture.image_url,
-            thumbnail_url: picture.thumbnail_url,
-            user_id: user.id,
-            post_id: post?.id,
-            type: picture.type || 'video',
-            created_at: picture.created_at,
-            position: 0,
-            meta: picture.meta
-          };
-          newUploads.push(newItem);
-
-        } else {
-          // Handle regular image upload to storage
-          const publicUrl = await uploadFileToStorage(user.id, file);
-
-          const newItem = {
-            id: crypto.randomUUID(),
-            title: file.name.split('.')[0],
-            description: '',
-            image_url: publicUrl,
-            user_id: user.id,
-            post_id: post?.id,
-            type: 'image',
-            created_at: new Date().toISOString(),
-            position: 0
-          };
-          newUploads.push(newItem);
-        }
-      } catch (error) {
-        console.error('Error uploading file:', error);
-        toast.error(`Failed to upload ${file.name}`);
-      }
-    }
-
-    if (newUploads.length > 0) {
-      newItems.splice(insertIndex, 0, ...newUploads);
-      const reordered = newItems.map((item, idx) => ({ ...item, position: idx }));
-      setLocalMediaItems(reordered);
-      toast.success(`Added ${newUploads.length} images`);
-    }
-  };
-
-  const openGalleryPicker = (index: number) => {
-    insertIndexRef.current = index;
-    setShowGalleryPicker(true);
-  };
-
-  const openAIWizard = (index: number) => {
-    insertIndexRef.current = index;
-    setWizardImage(null);
-    setShowAIWizard(true);
-  };
-
-  const handleAIWizardPublish = async (newImages: ImageFile[]) => {
-    if (!newImages?.length) return;
-    const newItems = newImages.map(img => ({
-      id: crypto.randomUUID(),
-      title: img.title || 'AI Generated',
-      description: (img as any).aiText || '',
-      image_url: img.src,
-      thumbnail_url: img.src,
-      user_id: user?.id,
-      post_id: post?.id,
-      type: 'image',
-      created_at: new Date().toISOString(),
-      position: 0
-    }));
-    const currentItems = [...localMediaItems];
-    currentItems.splice(insertIndexRef.current, 0, ...newItems);
-    const reordered = currentItems.map((item, idx) => ({ ...item, position: idx }));
-    setLocalMediaItems(reordered);
-    setShowAIWizard(false);
-    toast.success(`Added ${newItems.length} AI generated image(s)`);
-  };
-
-  const handleGallerySelect = async (pictureId: string) => {
-    setShowGalleryPicker(false);
-    toast.info("Adding image from gallery...");
-    try {
-      const picture = await fetchPictureById(pictureId);
-      if (!picture) return;
-
-      const newItem = {
-        id: crypto.randomUUID(),
-        title: picture.title,
-        description: picture.description || '',
-        image_url: picture.image_url,
-        thumbnail_url: picture.thumbnail_url,
-        user_id: user?.id,
-        post_id: post?.id,
-        type: picture.type || 'image',
-        created_at: new Date().toISOString(),
-        position: 0,
-        meta: picture.meta
-      };
-      const newItems = [...localMediaItems];
-      newItems.splice(insertIndexRef.current, 0, newItem);
-      const reordered = newItems.map((item, idx) => ({ ...item, position: idx }));
-      setLocalMediaItems(reordered);
-      toast.success("Image added from gallery");
-    } catch (error) {
-      console.error("Error adding from gallery:", error);
-      toast.error("Failed to add image");
-    }
-  };
-
-  const toggleEditMode = () => {
-    if (!isEditMode) {
-      setLocalPost({
-        title: post?.title || mediaItem?.title || '',
-        description: post?.description || mediaItem?.description || '',
-        settings: post?.settings || {},
-      });
-      const itemsWithPos = mediaItems.map((item, idx) => ({
-        ...item,
-        position: item.position ?? idx
-      })).sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
-      setLocalMediaItems(itemsWithPos);
-    }
-    setIsEditMode(!isEditMode);
-  };
-
-  const handleSaveChanges = async () => {
-    if (!localPost || !post) return;
-    toast.promise(
-      async () => {
-        // Only update the post record if it's a real post (not a pseudo post from a standalone picture)
-        if (!post.isPseudo) {
-          await updatePostDetails(post.id, {
-            title: localPost.title,
-            description: localPost.description,
-            settings: localPost.settings,
-          });
-        }
-
-        if (removedItemIds.size > 0) {
-          await unlinkPictures(Array.from(removedItemIds));
-        }
-
-        if (post.isPseudo && localMediaItems.length > 0) {
-          // For pseudo-posts (standalone pictures), update the picture directly
-          // Don't set post_id since there is no real post
-          const item = localMediaItems[0];
-          await updatePicture(item.id, {
-            title: localPost.title || item.title,
-            description: localPost.description || item.description,
-            updated_at: new Date().toISOString(),
-          });
-        } else {
-          const updates = localMediaItems.map((item, index) => ({
-            id: item.id,
-            title: item.title,
-            description: item.description,
-            position: index,
-            updated_at: new Date().toISOString(),
-            user_id: user?.id || item.user_id,
-            post_id: post.id,
-            image_url: item.image_url,
-            type: item.type || 'image',
-            thumbnail_url: item.thumbnail_url
-          }));
-
-          await upsertPictures(updates);
-        }
-
-        setRemovedItemIds(new Set());
-        setTimeout(() => window.location.reload(), 500);
-      },
-      {
-        loading: 'Saving changes...',
-        success: 'Changes saved successfully!',
-        error: 'Failed to save changes',
-      }
-    );
-  };
-
-
-  const moveItem = (index: number, direction: 'up' | 'down') => {
-    const newItems = [...localMediaItems];
-    if (direction === 'up' && index > 0) {
-      [newItems[index], newItems[index - 1]] = [newItems[index - 1], newItems[index]];
-    } else if (direction === 'down' && index < newItems.length - 1) {
-      [newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]];
-    }
-    const reordered = newItems.map((item, idx) => ({ ...item, position: idx }));
-    setLocalMediaItems(reordered);
-  };
-
-  const handlePrevImage = () => {
-    if (currentImageIndex > 0) {
-      const newIndex = currentImageIndex - 1;
-      setMediaItem(mediaItems[newIndex]);
-      setLikesCount(mediaItems[newIndex].likes_count || 0);
-    }
-  };
-
-  const handleNextImage = () => {
-    if (currentImageIndex < mediaItems.length - 1) {
-      const newIndex = currentImageIndex + 1;
-      setMediaItem(mediaItems[newIndex]);
-      setLikesCount(mediaItems[newIndex].likes_count || 0);
-    }
-  };
-
-
-
-  const loadVersions = async () => {
-    if (!mediaItem || isVideo) return;
-    try {
-      const allImages = await fetchVersions(mediaItem, user?.id) as any[];
-      const parentImage = allImages.find(img => !img.parent_id) || mediaItem;
-      const imageFiles: ImageFile[] = allImages.map(img => ({
-        path: img.id,
-        src: img.image_url,
-        selected: img.id === mediaItem.id,
-        isGenerated: !!img.parent_id,
-        title: img.title || parentImage.title,
-        description: img.description || parentImage.description
-      }));
-      setVersionImages(imageFiles);
-    } catch (error) {
-      console.error('Error loading versions:', error);
-    }
-  };
-
-
-  useEffect(() => {
-    if (id) {
-      fetchMedia();
-    }
-  }, [id, user?.id]);
-
-  useEffect(() => {
-    if (mediaItem) {
-      // loadVersions(); // Deprecated: Versions handled by server aggregation
-      // fetchAuthorProfile(); // Deprecated: Author returned in post details
-      // checkIfLiked(mediaItem.id); // Deprecated: is_liked returned in post details
-
-      // We still update local like state when mediaItem changes
-      if (mediaItem.is_liked !== undefined) {
-        setIsLiked(mediaItem.is_liked || false);
-      }
-      if (mediaItem.likes_count !== undefined) {
-        setLikesCount(mediaItem.likes_count);
-      }
-    }
-  }, [mediaItem]);
-
-  useEffect(() => {
-    window.scrollTo({ top: 0, behavior: 'instant' });
-  }, []);
-
-  useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
-      const activeElement = document.activeElement;
-      const isInputFocused = activeElement && (
-        activeElement.tagName === 'INPUT' ||
-        activeElement.tagName === 'TEXTAREA' ||
-        activeElement.getAttribute('contenteditable') === 'true' ||
-        activeElement.getAttribute('role') === 'textbox'
-      );
-      if (isInputFocused) return;
-
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        if (currentImageIndex > 0) handlePrevImage();
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        if (currentImageIndex < mediaItems.length - 1) handleNextImage();
-      } else if ((e.key === ' ' || e.key === 'Enter') && !showLightbox) {
-        e.preventDefault();
-        preLightboxFocusRef.current = document.activeElement as HTMLElement;
-        setShowLightbox(true);
-      }
-    };
-    window.addEventListener('keydown', handleKeyPress);
-    return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [showLightbox, currentImageIndex, mediaItems]);
-
-
-  const fetchMedia = async () => {
-    // Versions and likes are resolved server-side now
-
-    try {
-      const postData = await fetchPostById(id!);
-      if (postData) {
-        let items = (postData.pictures as any[]).map((p: any) => ({
-          ...p,
-          type: p.type as MediaType,
-          renderKey: p.id
-        })).sort((a, b) => (a.position || 0) - (b.position || 0));
-
-        // Server now returns full version set and like status
-        // items already contains all versions and is_liked from fetchPostById API response
-
-        setPost({ ...postData, pictures: items });
-        if (items.length === 0 && (postData.settings as any)?.link) {
-          // Create virtual picture for Link Post
-          const settings = (postData.settings as any);
-          items.push({
-            id: postData.id,
-            title: postData.title,
-            description: postData.description,
-            image_url: settings.image_url || `https://picsum.photos/seed/800/600`, // Fallback
-            thumbnail_url: settings.thumbnail_url || null,
-            user_id: postData.user_id,
-            type: 'page-external',
-            created_at: postData.created_at,
-            position: 0,
-            renderKey: postData.id,
-            meta: { url: settings.link },
-            likes_count: 0, // Could fetch real likes on post container if supported
-            visible: true
-          });
-        }
-
-        if (items.length > 0) {
-          setMediaItems(items);
-          // Restore selection from URL ?pic= param, then prefer is_selected, fallback to first
-          const picParam = searchParams.get('pic');
-          const urlItem = picParam ? items.find((i: any) => i.id === picParam) : null;
-          const selectedItems = items.filter((i: any) => i.is_selected);
-          const initialItem = urlItem || selectedItems[0] || items[0];
-          setMediaItem(initialItem);
-          setLikesCount(initialItem.likes_count || 0);
-        } else {
-          toast.error('This post has no media');
-        }
-        return;
-      }
-
-      const pictureData = await fetchPictureById(id!);
-      if (pictureData) {
-        if (pictureData.post_id) {
-          const fullPostData = await fetchPostById(pictureData.post_id);
-          if (fullPostData) {
-            let items = (fullPostData.pictures as any[]).map((p: any) => ({
-              ...p,
-              type: p.type as MediaType,
-              renderKey: p.id
-            })).sort((a, b) => (a.position || 0) - (b.position || 0));
-
-            // Versions resolved server-side; fallback path might miss them if not updated to use API
-            // items = await resolveVersions(items); 
-            items = items.filter((item: any) => item.visible || user?.id === item.user_id);
-            // Re-sort after filtering to ensure position order
-            items.sort((a: any, b: any) => (a.position || 0) - (b.position || 0));
-
-            setPost({ ...fullPostData, settings: fullPostData.settings as any, pictures: items });
-            setMediaItems(items);
-
-            // Check if requested ID is in the resolved list
-            const initialIndex = items.findIndex((p: any) => p.id === id);
-
-            if (initialIndex >= 0) {
-              setMediaItem(items[initialIndex]);
-              setLikesCount(items[initialIndex].likes_count || 0);
-            } else {
-              // Requested ID might have been swapped out. 
-              // Try to find if it was part of a family that is now represented by a selected version
-              const rootId = pictureData.parent_id || pictureData.id;
-              const swappedIndex = items.findIndex((p: any) => (p.parent_id || p.id) === rootId);
-
-              if (swappedIndex >= 0) {
-                setMediaItem(items[swappedIndex]);
-                setLikesCount(items[swappedIndex].likes_count || 0);
-              } else {
-                const fallbackSelected = items.filter((i: any) => i.is_selected);
-                const fallbackItem = fallbackSelected[0] || items[0];
-                setMediaItem(fallbackItem);
-                setLikesCount(fallbackItem.likes_count || 0);
-              }
-            }
-          }
-          return;
-        }
-
-        const pseudoPost: PostItem = {
-          id: pictureData.post_id || pictureData.id,
-          title: pictureData.title || 'Untitled',
-          description: pictureData.description,
-          user_id: pictureData.user_id,
-          created_at: pictureData.created_at,
-          updated_at: pictureData.created_at,
-          pictures: [{ ...pictureData, type: pictureData.type as MediaType, mediaType: pictureData.type }],
-          isPseudo: true
-        };
-        setPost(pseudoPost);
-        setMediaItems(pseudoPost.pictures!);
-        setMediaItem(pseudoPost.pictures![0]);
-        setLikesCount(pictureData.likes_count || 0);
-        return;
-      }
-
-      // 3. Try fetching as a Page (for page-intern items)
-      try {
-        const pageData = await fetchPageById(id!);
-        if (pageData) {
-          const pseudoPost: PostItem = {
-            id: pageData.id,
-            title: pageData.title,
-            description: null,
-            user_id: pageData.owner,
-            created_at: pageData.created_at,
-            updated_at: pageData.created_at,
-            pictures: [],
-            isPseudo: true,
-            type: 'page-intern',
-            meta: { slug: pageData.slug }
-          };
-          setPost(pseudoPost);
-          setLoading(false);
-          return;
-        }
-      } catch (e) {
-        console.error("Error fetching page:", e);
-      }
-
-      toast.error(translate('Content not found'));
-      navigate('/');
-    } catch (error) {
-      console.error('Error fetching content:', error);
-      toast.error(translate('Failed to load content'));
-      navigate('/');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const actions = usePostActions({
-    post,
-    mediaItems,
-    setMediaItems,
-    mediaItem,
-    user,
-    fetchMedia
-  });
-
-  const handleYouTubeAdd = async () => {
-    const videoId = getYouTubeId(youTubeUrl);
-    if (!videoId) {
-      toast.error(translate("Invalid YouTube URL"));
-      return;
-    }
-    const embedUrl = `https://www.youtube.com/embed/${videoId}`;
-    const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
-    const newVideoItem: any = {
-      id: crypto.randomUUID(),
-      type: 'youtube',
-      image_url: embedUrl,
-      thumbnail_url: thumbnailUrl,
-      title: 'YouTube Video',
-      description: '',
-      user_id: user?.id || '',
-      created_at: new Date().toISOString(),
-      likes_count: 0
-    };
-    if (insertIndexRef.current !== -1) {
-      const newItems = [...localMediaItems];
-      newItems.splice(insertIndexRef.current, 0, newVideoItem);
-      updateMediaPositions(newItems, setLocalMediaItems, setMediaItems);
-    } else {
-      updateMediaPositions([...localMediaItems, newVideoItem], setLocalMediaItems, setMediaItems);
-    }
-    setYouTubeUrl('');
-    actions.setShowYouTubeDialog(false);
-    toast.success(translate("YouTube video added"));
-  };
-
-  const handleTikTokAdd = async () => {
-    const videoId = getTikTokId(tikTokUrl);
-    if (!videoId) {
-      toast.error(translate("Invalid TikTok URL"));
-      return;
-    }
-    const embedUrl = `https://www.tiktok.com/embed/v2/${videoId}`;
-    const thumbnailUrl = `https://sf16-scmcdn-sg.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/logo-dark-e95da587b6efa1520dcd11f4b45c0cf6.svg`;
-    const newVideoItem: any = {
-      id: crypto.randomUUID(),
-      type: 'tiktok',
-      image_url: embedUrl,
-      thumbnail_url: thumbnailUrl,
-      title: 'TikTok Video',
-      description: '',
-      user_id: user?.id || '',
-      created_at: new Date().toISOString(),
-      likes_count: 0
-    };
-    if (insertIndexRef.current !== -1) {
-      const newItems = [...localMediaItems];
-      newItems.splice(insertIndexRef.current, 0, newVideoItem);
-      updateMediaPositions(newItems, setLocalMediaItems, setMediaItems);
-    } else {
-      updateMediaPositions([...localMediaItems, newVideoItem], setLocalMediaItems, setMediaItems);
-    }
-    setTikTokUrl('');
-    actions.setShowTikTokDialog(false);
-    toast.success(translate("TikTok video added"));
-  };
-
-
-  const handleLike = async () => {
-    if (!user || !mediaItem) {
-      toast.error(translate('Please sign in to like this'));
-      return;
-    }
-    try {
-      const isNowLiked = await toggleLike(user.id, mediaItem.id, isLiked);
-      setIsLiked(isNowLiked);
-      setLikesCount(prev => isNowLiked ? prev + 1 : prev - 1);
-
-      setMediaItems(prevItems => prevItems.map(item => {
-        if (item.id === mediaItem.id) {
-          return {
-            ...item,
-            is_liked: isNowLiked,
-            likes_count: (item.likes_count || 0) + (isNowLiked ? 1 : -1)
-          };
-        }
-        return item;
-      }));
-    } catch (error) {
-      console.error('Error toggling like:', error);
-      toast.error(translate('Failed to update like'));
-    }
-  };
-
-  const handleDownload = async () => {
-    await downloadMediaItem(mediaItem, isVideo);
-  };
-
-  const handlePublish = async (option: 'overwrite' | 'new' | 'version', imageUrl: string, newTitle: string, description?: string, parentId?: string, collectionIds?: string[]) => {
-    if (!mediaItem || isVideo || !user) {
-      toast.error(translate('Please sign in to publish images'));
-      return;
-    }
-    setIsPublishing(true);
-    try {
-      const response = await fetch(imageUrl);
-      const blob = await response.blob();
-
-      if (option === 'overwrite') {
-        const currentImageUrl = mediaItem.image_url;
-        if (currentImageUrl.includes('supabase.co/storage/')) {
-          const urlParts = currentImageUrl.split('/');
-          const fileName = urlParts[urlParts.length - 1];
-          const bucketPath = `${mediaItem.user_id}/${fileName}`;
-          await updateStorageFile(bucketPath, blob);
-          toast.success(translate('Image updated successfully!'));
-          fetchMedia();
-        } else {
-          toast.error(translate('Cannot overwrite this image'));
-          return;
-        }
-      } else if (option === 'version') {
-        const publicUrl = await uploadFileToStorage(user.id, blob, `${user.id}/${Date.now()}-version.png`);
-        const pictureData = await createPicture({
-          title: newTitle?.trim() || null,
-          description: description || `Generated from: ${mediaItem.title}`,
-          image_url: publicUrl,
-          user_id: user.id,
-          parent_id: parentId || mediaItem.id,
-          is_selected: false,
-          visible: false
-        });
-        if (collectionIds && collectionIds.length > 0 && pictureData) {
-          await addCollectionPictures(collectionIds.map(collectionId => ({ collection_id: collectionId, picture_id: pictureData.id })));
-        }
-        toast.success(translate('Version saved successfully!'));
-        loadVersions();
-      } else {
-        const publicUrl = await uploadFileToStorage(user.id, blob, `${user.id}/${Date.now()}-generated.png`);
-        const pictureData = await createPicture({
-          title: newTitle?.trim() || null,
-          description: description || `Generated from: ${mediaItem.title}`,
-          image_url: publicUrl,
-          user_id: user.id
-        });
-        if (collectionIds && collectionIds.length > 0 && pictureData) {
-          await addCollectionPictures(collectionIds.map(collectionId => ({ collection_id: collectionId, picture_id: pictureData.id })));
-        }
-        toast.success(translate('Image published to gallery!'));
-      }
-      setShowLightbox(false);
-      // llm state cleared by component
-
-    } catch (error) {
-      console.error('Error publishing image:', error);
-      toast.error(translate('Failed to publish image'));
-    } finally {
-      setIsPublishing(false);
-    }
-  };
-
-  const handleOpenInWizard = (imageUrl?: string) => {
-    if (!mediaItem || isVideo) return;
-    const imageToEdit = imageUrl || mediaItem.image_url;
-    const imageData = {
-      id: mediaItem.id,
-      src: imageToEdit,
-      title: mediaItem.title,
-      realDatabaseId: mediaItem.id,
-      selected: true
-    };
-    setWizardImage(imageData, window.location.pathname);
-    setShowLightbox(false);
-    navigate('/wizard');
-  };
-
-  const handleEditPicture = () => {
-    if (!mediaItem) return;
-    setShowEditModal(true);
-  };
-
-  const handleEditPost = () => {
-    if (!post) return;
-    navigate(`/post/${post.id}/edit`);
-  };
-
-  const rendererProps = {
-    post, authorProfile, mediaItems, localMediaItems, mediaItem: mediaItem!,
-    user, isOwner: !!isOwner, isEditMode, isLiked, likesCount,
-    localPost, setLocalPost, setLocalMediaItems,
-
-    onEditModeToggle: toggleEditMode,
-    onEditPost: handleEditPost,
-    onViewModeChange: handleViewMode,
-    onExportMarkdown: () => exportMarkdown(post, mediaItem!, mediaItems, authorProfile),
-    onSaveChanges: handleSaveChanges,
-    onDeletePost: () => actions.setShowDeletePostDialog(true),
-    onDeletePicture: () => actions.setShowDeletePictureDialog(true),
-    onLike: handleLike,
-    onUnlinkImage: actions.handleUnlinkImage,
-    onRemoveFromPost: handleRemoveFromPost,
-    onEditPicture: handleEditPicture,
-    onGalleryPickerOpen: openGalleryPicker,
-    onYouTubeAdd: () => actions.setShowYouTubeDialog(true),
-    onTikTokAdd: () => actions.setShowTikTokDialog(true),
-    onAIWizardOpen: openAIWizard,
-    onInlineUpload: handleInlineUpload,
-    onMoveItem: moveItem,
-    onMediaSelect: setMediaItem,
-    onExpand: (item: MediaItem) => { setMediaItem(item); setShowLightbox(true); },
-    onDownload: handleDownload,
-    onCategoryManagerOpen: () => actions.setShowCategoryManager(true),
-
-
-    currentImageIndex,
-    videoPlaybackUrl,
-    videoPosterUrl,
-    versionImages,
-
-    handlePrevImage,
-    embedded
-  };
-
-  // Render Page Content if it's an internal page
-  if (post?.type === 'page-intern' && post.meta?.slug) {
-    return (
-      <UserPage
-        userId={post.user_id}
-        slug={post.meta.slug}
-        embedded
-      />
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className={embedded ? "flex items-center justify-center p-8" : "min-h-screen bg-background flex items-center justify-center"}>
-        <div className="text-muted-foreground"><T>Loading...</T></div>
-      </div>
-    );
-  }
-
-  if (!mediaItem) {
-    return (
-      <div className={embedded ? "flex items-center justify-center p-8" : "min-h-screen bg-background flex items-center justify-center"}>
-        <div className="text-center space-y-4">
-          <div className="text-muted-foreground text-lg"><T>Content not found</T></div>
-          {!embedded && <Button onClick={() => navigate('/')} variant="outline"><T>Go Home</T></Button>}
-        </div>
-      </div>
-    );
-  }
-
-  const containerClassName = embedded
-    ? `flex flex-col bg-background h-[inherit]  ${className || ''}`
-    : "bg-background flex flex-col";
-
-  if (!embedded && !className) {
-    className = "h-[calc(100vh-4rem)]"
-  }
-  /*
-  console.log('containerClassName', containerClassName);
-  console.log('className', className);
-  console.log('embedded', embedded);
-*/
-
-  return (
-    <div className={`bg-background ${className}`}>
-      {post && (
-        <SEO
-          title={post.title || mediaItem?.title}
-          description={post.description || mediaItem?.description || `View ${post.title} on Polymech`}
-          image={mediaItem?.image_url}
-          type={isVideo ? 'video.other' : 'article'}
-        />
-      )}
-      <div className={embedded ? "w-full h-[inherit]" : "w-full max-w-[1600px] mx-auto h-full"}>
-
-        {viewMode === 'thumbs' ? (
-          <ThumbsRenderer {...rendererProps} />
-        ) : (
-          <CompactRenderer {...rendererProps} mediaItem={mediaItem} />
-        )}
-      </div>
-
-      <Suspense fallback={<div className="hidden">Loading editor...</div>}>
-        {showEditModal && !isVideo && (
-          <EditImageModal
-            open={showEditModal}
-            onOpenChange={setShowEditModal}
-            pictureId={mediaItem.id}
-            currentTitle={mediaItem.title}
-            currentDescription={mediaItem.description}
-            currentVisible={(mediaItem as any).visible ?? true}
-            imageUrl={mediaItem.image_url}
-            onUpdateSuccess={() => {
-              setShowEditModal(false);
-              fetchMedia();
-            }}
-          />
-        )}
-
-        {showEditModal && isVideo && (
-          <EditVideoModal
-            open={showEditModal}
-            onOpenChange={setShowEditModal}
-            videoId={mediaItem.id}
-            currentTitle={mediaItem.title}
-            currentDescription={mediaItem.description}
-            currentVisible={(mediaItem as any).visible ?? true}
-            onUpdateSuccess={() => {
-              setShowEditModal(false);
-              fetchMedia();
-            }}
-          />
-        )}
-      </Suspense>
-
-      {
-        !isVideo && showLightbox && (
-          <Suspense fallback={<div className="fixed inset-0 z-[100] bg-background/50 backdrop-blur-sm flex items-center justify-center">Loading Lightbox...</div>}>
-            <SmartLightbox
-              isOpen={showLightbox}
-              onClose={() => {
-                setShowLightbox(false);
-                // Restore focus to the element that was focused before lightbox opened
-                requestAnimationFrame(() => {
-                  //preLightboxFocusRef.current?.focus();
-                  //preLightboxFocusRef.current = null;
-                });
-              }}
-              mediaItem={mediaItem}
-              user={user}
-              isVideo={false}
-              onPublish={handlePublish}
-              onNavigate={(direction) => {
-                if (direction === 'next') handleNextImage();
-                else handlePrevImage();
-              }}
-              onOpenInWizard={() => handleOpenInWizard()} // SmartLightbox handles the argument if needed, or we adapt
-              currentIndex={currentImageIndex}
-              totalCount={mediaItems.length}
-            />
-          </Suspense>
-        )
-      }
-
-      {/* Dialogs */}
-      <YouTubeDialog
-        open={actions.showYouTubeDialog}
-        onOpenChange={actions.setShowYouTubeDialog}
-        url={youTubeUrl}
-        onUrlChange={setYouTubeUrl}
-        onConfirm={handleYouTubeAdd}
-      />
-
-      <TikTokDialog
-        open={actions.showTikTokDialog}
-        onOpenChange={actions.setShowTikTokDialog}
-        url={tikTokUrl}
-        onUrlChange={setTikTokUrl}
-        onConfirm={handleTikTokAdd}
-      />
-
-      <DeleteDialog
-        open={actions.showDeletePostDialog}
-        onOpenChange={actions.setShowDeletePostDialog}
-        onConfirm={actions.handleDeletePost}
-        title="Delete Post"
-        description="Are you sure you want to delete this post? This action cannot be undone."
-      />
-
-      <DeleteDialog
-        open={actions.showDeletePictureDialog}
-        onOpenChange={actions.setShowDeletePictureDialog}
-        onConfirm={actions.handleDeletePicture}
-        title="Delete Picture"
-        description="Are you sure you want to delete this picture? This action cannot be undone."
-      />
-
-      <Suspense fallback={null}>
-        {showEditModal && mediaItem && (
-          <EditImageModal
-            open={showEditModal}
-            onOpenChange={setShowEditModal}
-            pictureId={mediaItem.id}
-            currentTitle={mediaItem.title}
-            currentDescription={mediaItem.description || null}
-            currentVisible={true} // Defaulting to true as visible prop might be on backend or handled otherwise
-            imageUrl={mediaItem.image_url}
-            onUpdateSuccess={() => {
-              fetchMedia();
-              setShowEditModal(false);
-            }}
-          />
-        )}
-
-        <ImagePickerDialog
-          isOpen={showGalleryPicker}
-          onClose={() => setShowGalleryPicker(false)}
-          onSelect={handleGallerySelect}
-        />
-
-        {showAIWizard && (
-          <div className="fixed inset-0 z-[9999] bg-background/95 backdrop-blur-sm flex items-center justify-center p-4">
-            <div className="w-full h-full max-w-[1600px] bg-background border rounded-xl overflow-hidden shadow-2xl relative">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="absolute top-4 right-4 z-50"
-                onClick={() => setShowAIWizard(false)}
-              >
-                <X className="h-6 w-6" />
-              </Button>
-              <ImageWizard
-                key="inline-wizard"
-                isOpen={true}
-                onClose={() => setShowAIWizard(false)}
-                mode="default"
-                initialPostTitle={post?.title || ""}
-                initialPostDescription={post?.description || ""}
-                onPublish={handleAIWizardPublish as any}
-              />
-            </div>
-          </div>
-        )}
-
-        <CategoryManager
-          isOpen={actions.showCategoryManager}
-          onClose={() => actions.setShowCategoryManager(false)}
-          currentPageId={post?.id}
-          currentPageMeta={post?.meta}
-          onPageMetaUpdate={actions.handleMetaUpdate}
-          filterByType="pages"
-          defaultMetaType="pages"
-        />
-      </Suspense>
-    </div>
-  );
-};
-
-export default Post;
+import { useState, useEffect, useRef, Suspense, lazy } from "react";
+import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+import { useAuth } from "@/hooks/useAuth";
+import { X } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+import { useWizardContext } from "@/hooks/useWizardContext";
+import { T, translate } from "@/i18n";
+import { isVideoType } from "@/lib/mediaRegistry";
+
+import { getYouTubeId, getTikTokId, updateMediaPositions, getVideoUrlWithResolution } from "./views/utils";
+
+import { YouTubeDialog } from "./views/components/YouTubeDialog";
+import { TikTokDialog } from "./views/components/TikTokDialog";
+
+import UserPage from "@/modules/pages/UserPage";
+import { ThumbsRenderer } from "./views/renderers/ThumbsRenderer";
+import { CompactRenderer } from "./views/renderers/CompactRenderer";
+import { usePostActions } from "./views/usePostActions";
+import { exportMarkdown, downloadMediaItem } from "./views/PostActions";
+import { DeleteDialog } from "./views/components/DeleteDialogs";
+import { CategoryManager } from "@/components/widgets/CategoryManager";
+import { SEO } from "@/components/SEO";
+
+
+import '@vidstack/react/player/styles/default/theme.css';
+import '@vidstack/react/player/styles/default/layouts/video.css';
+
+// New Modules
+import { PostMediaItem as MediaItem, PostItem, UserProfile } from "./views/types";
+import { ImageFile, MediaType } from "@/types";
+import { uploadInternalVideo } from "@/utils/uploadUtils";
+import { fetchPageById } from "@/modules/pages/client-pages";
+import { addCollectionPictures, createPicture, fetchPictureById, fetchVersions, toggleLike, unlinkPictures, updatePicture, updateStorageFile, uploadFileToStorage, upsertPictures } from "@/modules/posts/client-pictures";
+import { fetchPostById, updatePostDetails } from "@/modules/posts/client-posts";
+
+
+// Heavy Components - Lazy Loaded
+const ImagePickerDialog = lazy(() => import("@/components/widgets/ImagePickerDialog").then(module => ({ default: module.ImagePickerDialog })));
+const ImageWizard = lazy(() => import("@/components/ImageWizard"));
+const EditImageModal = lazy(() => import("@/components/EditImageModal"));
+const EditVideoModal = lazy(() => import("@/components/EditVideoModal"));
+const SmartLightbox = lazy(() => import("./views/components/SmartLightbox"));
+
+interface PostProps {
+  postId?: string;
+  embedded?: boolean;
+  className?: string;
+}
+
+const Post = ({ postId: propPostId, embedded = false, className }: PostProps) => {
+  const { id: paramId } = useParams<{ id: string }>();
+  const id = propPostId || paramId;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const { user } = useAuth();
+
+  const { setWizardImage } = useWizardContext();
+
+  // ... state ...
+  const [post, setPost] = useState<PostItem | null>(null);
+  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
+  const [mediaItem, setMediaItem] = useState<MediaItem | null>(null); // Current displaying item
+
+  // ... other state ...
+  const [isLiked, setIsLiked] = useState(false);
+  const [likesCount, setLikesCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [lastTap, setLastTap] = useState(0);
+  const [showLightbox, setShowLightbox] = useState(false);
+  const preLightboxFocusRef = useRef<HTMLElement | null>(null);
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [versionImages, setVersionImages] = useState<ImageFile[]>([]);
+  // Don't calculate currentImageIndex here yet, wait for render or use memo
+  const [authorProfile, setAuthorProfile] = useState<UserProfile | null>(null);
+
+  const [youTubeUrl, setYouTubeUrl] = useState('');
+  const [tikTokUrl, setTikTokUrl] = useState('');
+
+  // NOTE: llm hook removed from here, now inside SmartLightbox
+
+  const isVideo = isVideoType(mediaItem?.type as MediaType);
+
+  // Initialize viewMode from URL parameter
+  const [viewMode, setViewMode] = useState<'compact' | 'thumbs'>(() => {
+    const viewParam = searchParams.get('view');
+    if (viewParam === 'compact' || viewParam === 'thumbs') {
+      return viewParam;
+    }
+    return 'compact';
+  });
+
+
+
+  // Render Page Content if it's an internal page
+
+
+  // Calculate index safely
+  const currentImageIndex = mediaItems.findIndex(item => item.id === mediaItem?.id);
+
+  // Unified URL sync: write `view`, `pic`, and `fullscreen` params atomically (standalone only)
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (embedded) return;
+    // Skip the very first render to avoid overwriting URL before data loads
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set('view', viewMode);
+
+    if (mediaItem?.id) {
+      newParams.set('pic', mediaItem.id);
+    } else {
+      newParams.delete('pic');
+    }
+
+    if (showLightbox) {
+      newParams.set('fullscreen', '1');
+    } else {
+      newParams.delete('fullscreen');
+    }
+
+    // Only update if something actually changed
+    const currentView = searchParams.get('view');
+    const currentPic = searchParams.get('pic');
+    const currentFs = searchParams.get('fullscreen');
+    const targetFs = showLightbox ? '1' : null;
+    if (currentView !== viewMode || currentPic !== (mediaItem?.id || null) || currentFs !== targetFs) {
+      setSearchParams(newParams, { replace: true });
+    }
+  }, [viewMode, mediaItem?.id, showLightbox, embedded]);
+
+  // Sync URL → state (only for external URL changes, e.g. browser back/forward)
+  useEffect(() => {
+    const viewParam = searchParams.get('view');
+    if (viewParam === 'compact' || viewParam === 'thumbs') {
+      setViewMode(viewParam as any);
+    }
+
+    // Restore pic selection from URL if items are loaded
+    const picParam = searchParams.get('pic');
+    if (picParam && mediaItems.length > 0) {
+      const targetItem = mediaItems.find(item => item.id === picParam);
+      if (targetItem && targetItem.id !== mediaItem?.id) {
+        setMediaItem(targetItem);
+        setLikesCount(targetItem.likes_count || 0);
+      }
+    }
+
+    // Restore fullscreen/lightbox state
+    const fsParam = searchParams.get('fullscreen');
+    setShowLightbox(fsParam === '1');
+  }, [searchParams]);
+
+  const [removedItemIds, setRemovedItemIds] = useState<Set<string>>(new Set());
+
+  // Inline Editor State
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [localPost, setLocalPost] = useState<{ title: string; description: string; settings?: any } | null>(null);
+  const [localMediaItems, setLocalMediaItems] = useState<any[]>([]);
+  const [showGalleryPicker, setShowGalleryPicker] = useState(false);
+  const [showAIWizard, setShowAIWizard] = useState(false);
+  const insertIndexRef = useRef<number>(0);
+
+  const isOwner = user?.id === mediaItem?.user_id;
+
+  const videoPosterUrl = (isVideo && mediaItem?.thumbnail_url)
+    ? (mediaItem.image_url.includes('/api/videos/')
+      ? mediaItem.thumbnail_url
+      : `${mediaItem.thumbnail_url}?width=1280&height=720&fit_mode=preserve&time=0`)
+    : undefined;
+
+  const videoPlaybackUrl = (isVideo && mediaItem?.image_url) ? getVideoUrlWithResolution(mediaItem.image_url) : undefined;
+
+  useEffect(() => {
+    const savedMode = localStorage.getItem('postViewMode');
+    if (savedMode === 'compact' || savedMode === 'thumbs') {
+      setViewMode(savedMode as any);
+    } else if (post?.settings?.display && (post.settings.display === 'compact' || post.settings.display === 'thumbs')) {
+      setViewMode(post.settings.display);
+    }
+  }, [post]);
+
+  const handleViewMode = (mode: 'compact' | 'thumbs') => {
+    setViewMode(mode);
+    // LocalStorage backup removed to favor URL matching
+    // localStorage.setItem('postViewMode', mode); 
+  };
+
+  const handleRemoveFromPost = (index: number) => {
+    const itemToRemove = localMediaItems[index];
+    if (!itemToRemove) return;
+    setRemovedItemIds(prev => new Set(prev).add(itemToRemove.id));
+    const newItems = [...localMediaItems];
+    newItems.splice(index, 1);
+    updateMediaPositions(newItems, setLocalMediaItems, setMediaItems);
+    toast.success(translate("Removed from post"));
+  };
+
+  const handleInlineUpload = async (files: File[], insertIndex: number) => {
+    if (!files.length || !user?.id) return;
+    toast.info(`Uploading ${files.length} images...`);
+
+    const newItems = [...localMediaItems];
+    const newUploads: any[] = [];
+
+    for (const file of files) {
+      try {
+        if (file.type.startsWith('video')) {
+          // Handle video upload via internal API
+          const uploadData = await uploadInternalVideo(file, user.id);
+
+          // Fetch the created picture record to get the correct URL and details
+          const picture = await fetchPictureById(uploadData.dbId);
+          if (!picture) throw new Error('Failed to retrieve uploaded video details');
+
+          const newItem = {
+            id: picture.id,
+            title: picture.title,
+            description: picture.description || '',
+            image_url: picture.image_url,
+            thumbnail_url: picture.thumbnail_url,
+            user_id: user.id,
+            post_id: post?.id,
+            type: picture.type || 'video',
+            created_at: picture.created_at,
+            position: 0,
+            meta: picture.meta
+          };
+          newUploads.push(newItem);
+
+        } else {
+          // Handle regular image upload to storage
+          const publicUrl = await uploadFileToStorage(user.id, file);
+
+          const newItem = {
+            id: crypto.randomUUID(),
+            title: file.name.split('.')[0],
+            description: '',
+            image_url: publicUrl,
+            user_id: user.id,
+            post_id: post?.id,
+            type: 'image',
+            created_at: new Date().toISOString(),
+            position: 0
+          };
+          newUploads.push(newItem);
+        }
+      } catch (error) {
+        console.error('Error uploading file:', error);
+        toast.error(`Failed to upload ${file.name}`);
+      }
+    }
+
+    if (newUploads.length > 0) {
+      newItems.splice(insertIndex, 0, ...newUploads);
+      const reordered = newItems.map((item, idx) => ({ ...item, position: idx }));
+      setLocalMediaItems(reordered);
+      toast.success(`Added ${newUploads.length} images`);
+    }
+  };
+
+  const openGalleryPicker = (index: number) => {
+    insertIndexRef.current = index;
+    setShowGalleryPicker(true);
+  };
+
+  const openAIWizard = (index: number) => {
+    insertIndexRef.current = index;
+    setWizardImage(null);
+    setShowAIWizard(true);
+  };
+
+  const handleAIWizardPublish = async (newImages: ImageFile[]) => {
+    if (!newImages?.length) return;
+    const newItems = newImages.map(img => ({
+      id: crypto.randomUUID(),
+      title: img.title || 'AI Generated',
+      description: (img as any).aiText || '',
+      image_url: img.src,
+      thumbnail_url: img.src,
+      user_id: user?.id,
+      post_id: post?.id,
+      type: 'image',
+      created_at: new Date().toISOString(),
+      position: 0
+    }));
+    const currentItems = [...localMediaItems];
+    currentItems.splice(insertIndexRef.current, 0, ...newItems);
+    const reordered = currentItems.map((item, idx) => ({ ...item, position: idx }));
+    setLocalMediaItems(reordered);
+    setShowAIWizard(false);
+    toast.success(`Added ${newItems.length} AI generated image(s)`);
+  };
+
+  const handleGallerySelect = async (pictureId: string) => {
+    setShowGalleryPicker(false);
+    toast.info("Adding image from gallery...");
+    try {
+      const picture = await fetchPictureById(pictureId);
+      if (!picture) return;
+
+      const newItem = {
+        id: crypto.randomUUID(),
+        title: picture.title,
+        description: picture.description || '',
+        image_url: picture.image_url,
+        thumbnail_url: picture.thumbnail_url,
+        user_id: user?.id,
+        post_id: post?.id,
+        type: picture.type || 'image',
+        created_at: new Date().toISOString(),
+        position: 0,
+        meta: picture.meta
+      };
+      const newItems = [...localMediaItems];
+      newItems.splice(insertIndexRef.current, 0, newItem);
+      const reordered = newItems.map((item, idx) => ({ ...item, position: idx }));
+      setLocalMediaItems(reordered);
+      toast.success("Image added from gallery");
+    } catch (error) {
+      console.error("Error adding from gallery:", error);
+      toast.error("Failed to add image");
+    }
+  };
+
+  const toggleEditMode = () => {
+    if (!isEditMode) {
+      setLocalPost({
+        title: post?.title || mediaItem?.title || '',
+        description: post?.description || mediaItem?.description || '',
+        settings: post?.settings || {},
+      });
+      const itemsWithPos = mediaItems.map((item, idx) => ({
+        ...item,
+        position: item.position ?? idx
+      })).sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+      setLocalMediaItems(itemsWithPos);
+    }
+    setIsEditMode(!isEditMode);
+  };
+
+  const handleSaveChanges = async () => {
+    if (!localPost || !post) return;
+    toast.promise(
+      async () => {
+        // Only update the post record if it's a real post (not a pseudo post from a standalone picture)
+        if (!post.isPseudo) {
+          await updatePostDetails(post.id, {
+            title: localPost.title,
+            description: localPost.description,
+            settings: localPost.settings,
+          });
+        }
+
+        if (removedItemIds.size > 0) {
+          await unlinkPictures(Array.from(removedItemIds));
+        }
+
+        if (post.isPseudo && localMediaItems.length > 0) {
+          // For pseudo-posts (standalone pictures), update the picture directly
+          // Don't set post_id since there is no real post
+          const item = localMediaItems[0];
+          await updatePicture(item.id, {
+            title: localPost.title || item.title,
+            description: localPost.description || item.description,
+            updated_at: new Date().toISOString(),
+          });
+        } else {
+          const updates = localMediaItems.map((item, index) => ({
+            id: item.id,
+            title: item.title,
+            description: item.description,
+            position: index,
+            updated_at: new Date().toISOString(),
+            user_id: user?.id || item.user_id,
+            post_id: post.id,
+            image_url: item.image_url,
+            type: item.type || 'image',
+            thumbnail_url: item.thumbnail_url
+          }));
+
+          await upsertPictures(updates);
+        }
+
+        setRemovedItemIds(new Set());
+        setTimeout(() => window.location.reload(), 500);
+      },
+      {
+        loading: 'Saving changes...',
+        success: 'Changes saved successfully!',
+        error: 'Failed to save changes',
+      }
+    );
+  };
+
+
+  const moveItem = (index: number, direction: 'up' | 'down') => {
+    const newItems = [...localMediaItems];
+    if (direction === 'up' && index > 0) {
+      [newItems[index], newItems[index - 1]] = [newItems[index - 1], newItems[index]];
+    } else if (direction === 'down' && index < newItems.length - 1) {
+      [newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]];
+    }
+    const reordered = newItems.map((item, idx) => ({ ...item, position: idx }));
+    setLocalMediaItems(reordered);
+  };
+
+  const handlePrevImage = () => {
+    if (currentImageIndex > 0) {
+      const newIndex = currentImageIndex - 1;
+      setMediaItem(mediaItems[newIndex]);
+      setLikesCount(mediaItems[newIndex].likes_count || 0);
+    }
+  };
+
+  const handleNextImage = () => {
+    if (currentImageIndex < mediaItems.length - 1) {
+      const newIndex = currentImageIndex + 1;
+      setMediaItem(mediaItems[newIndex]);
+      setLikesCount(mediaItems[newIndex].likes_count || 0);
+    }
+  };
+
+
+
+  const loadVersions = async () => {
+    if (!mediaItem || isVideo) return;
+    try {
+      const allImages = await fetchVersions(mediaItem, user?.id) as any[];
+      const parentImage = allImages.find(img => !img.parent_id) || mediaItem;
+      const imageFiles: ImageFile[] = allImages.map(img => ({
+        path: img.id,
+        src: img.image_url,
+        selected: img.id === mediaItem.id,
+        isGenerated: !!img.parent_id,
+        title: img.title || parentImage.title,
+        description: img.description || parentImage.description
+      }));
+      setVersionImages(imageFiles);
+    } catch (error) {
+      console.error('Error loading versions:', error);
+    }
+  };
+
+
+  useEffect(() => {
+    if (id) {
+      fetchMedia();
+    }
+  }, [id, user?.id]);
+
+  useEffect(() => {
+    if (mediaItem) {
+      // loadVersions(); // Deprecated: Versions handled by server aggregation
+      // fetchAuthorProfile(); // Deprecated: Author returned in post details
+      // checkIfLiked(mediaItem.id); // Deprecated: is_liked returned in post details
+
+      // We still update local like state when mediaItem changes
+      if (mediaItem.is_liked !== undefined) {
+        setIsLiked(mediaItem.is_liked || false);
+      }
+      if (mediaItem.likes_count !== undefined) {
+        setLikesCount(mediaItem.likes_count);
+      }
+    }
+  }, [mediaItem]);
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'instant' });
+  }, []);
+
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      const activeElement = document.activeElement;
+      const isInputFocused = activeElement && (
+        activeElement.tagName === 'INPUT' ||
+        activeElement.tagName === 'TEXTAREA' ||
+        activeElement.getAttribute('contenteditable') === 'true' ||
+        activeElement.getAttribute('role') === 'textbox'
+      );
+      if (isInputFocused) return;
+
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (currentImageIndex > 0) handlePrevImage();
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (currentImageIndex < mediaItems.length - 1) handleNextImage();
+      } else if ((e.key === ' ' || e.key === 'Enter') && !showLightbox) {
+        e.preventDefault();
+        preLightboxFocusRef.current = document.activeElement as HTMLElement;
+        setShowLightbox(true);
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [showLightbox, currentImageIndex, mediaItems]);
+
+
+  const fetchMedia = async () => {
+    // Versions and likes are resolved server-side now
+
+    try {
+      const postData = await fetchPostById(id!);
+      if (postData) {
+        let items = (postData.pictures as any[]).map((p: any) => ({
+          ...p,
+          type: p.type as MediaType,
+          renderKey: p.id
+        })).sort((a, b) => (a.position || 0) - (b.position || 0));
+
+        // Server now returns full version set and like status
+        // items already contains all versions and is_liked from fetchPostById API response
+
+        setPost({ ...postData, pictures: items });
+        if (items.length === 0 && (postData.settings as any)?.link) {
+          // Create virtual picture for Link Post
+          const settings = (postData.settings as any);
+          items.push({
+            id: postData.id,
+            title: postData.title,
+            description: postData.description,
+            image_url: settings.image_url || `https://picsum.photos/seed/800/600`, // Fallback
+            thumbnail_url: settings.thumbnail_url || null,
+            user_id: postData.user_id,
+            type: 'page-external',
+            created_at: postData.created_at,
+            position: 0,
+            renderKey: postData.id,
+            meta: { url: settings.link },
+            likes_count: 0, // Could fetch real likes on post container if supported
+            visible: true
+          });
+        }
+
+        if (items.length > 0) {
+          setMediaItems(items);
+          // Restore selection from URL ?pic= param, then prefer is_selected, fallback to first
+          const picParam = searchParams.get('pic');
+          const urlItem = picParam ? items.find((i: any) => i.id === picParam) : null;
+          const selectedItems = items.filter((i: any) => i.is_selected);
+          const initialItem = urlItem || selectedItems[0] || items[0];
+          setMediaItem(initialItem);
+          setLikesCount(initialItem.likes_count || 0);
+        } else {
+          toast.error('This post has no media');
+        }
+        return;
+      }
+
+      const pictureData = await fetchPictureById(id!);
+      if (pictureData) {
+        if (pictureData.post_id) {
+          const fullPostData = await fetchPostById(pictureData.post_id);
+          if (fullPostData) {
+            let items = (fullPostData.pictures as any[]).map((p: any) => ({
+              ...p,
+              type: p.type as MediaType,
+              renderKey: p.id
+            })).sort((a, b) => (a.position || 0) - (b.position || 0));
+
+            // Versions resolved server-side; fallback path might miss them if not updated to use API
+            // items = await resolveVersions(items); 
+            items = items.filter((item: any) => item.visible || user?.id === item.user_id);
+            // Re-sort after filtering to ensure position order
+            items.sort((a: any, b: any) => (a.position || 0) - (b.position || 0));
+
+            setPost({ ...fullPostData, settings: fullPostData.settings as any, pictures: items });
+            setMediaItems(items);
+
+            // Check if requested ID is in the resolved list
+            const initialIndex = items.findIndex((p: any) => p.id === id);
+
+            if (initialIndex >= 0) {
+              setMediaItem(items[initialIndex]);
+              setLikesCount(items[initialIndex].likes_count || 0);
+            } else {
+              // Requested ID might have been swapped out. 
+              // Try to find if it was part of a family that is now represented by a selected version
+              const rootId = pictureData.parent_id || pictureData.id;
+              const swappedIndex = items.findIndex((p: any) => (p.parent_id || p.id) === rootId);
+
+              if (swappedIndex >= 0) {
+                setMediaItem(items[swappedIndex]);
+                setLikesCount(items[swappedIndex].likes_count || 0);
+              } else {
+                const fallbackSelected = items.filter((i: any) => i.is_selected);
+                const fallbackItem = fallbackSelected[0] || items[0];
+                setMediaItem(fallbackItem);
+                setLikesCount(fallbackItem.likes_count || 0);
+              }
+            }
+          }
+          return;
+        }
+
+        const pseudoPost: PostItem = {
+          id: pictureData.post_id || pictureData.id,
+          title: pictureData.title || 'Untitled',
+          description: pictureData.description,
+          user_id: pictureData.user_id,
+          created_at: pictureData.created_at,
+          updated_at: pictureData.created_at,
+          pictures: [{ ...pictureData, type: pictureData.type as MediaType, mediaType: pictureData.type }],
+          isPseudo: true
+        };
+        setPost(pseudoPost);
+        setMediaItems(pseudoPost.pictures!);
+        setMediaItem(pseudoPost.pictures![0]);
+        setLikesCount(pictureData.likes_count || 0);
+        return;
+      }
+
+      // 3. Try fetching as a Page (for page-intern items)
+      try {
+        const pageData = await fetchPageById(id!);
+        if (pageData) {
+          const pseudoPost: PostItem = {
+            id: pageData.id,
+            title: pageData.title,
+            description: null,
+            user_id: pageData.owner,
+            created_at: pageData.created_at,
+            updated_at: pageData.created_at,
+            pictures: [],
+            isPseudo: true,
+            type: 'page-intern',
+            meta: { slug: pageData.slug }
+          };
+          setPost(pseudoPost);
+          setLoading(false);
+          return;
+        }
+      } catch (e) {
+        console.error("Error fetching page:", e);
+      }
+
+      toast.error(translate('Content not found'));
+      navigate('/');
+    } catch (error) {
+      console.error('Error fetching content:', error);
+      toast.error(translate('Failed to load content'));
+      navigate('/');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const actions = usePostActions({
+    post,
+    mediaItems,
+    setMediaItems,
+    mediaItem,
+    user,
+    fetchMedia
+  });
+
+  const handleYouTubeAdd = async () => {
+    const videoId = getYouTubeId(youTubeUrl);
+    if (!videoId) {
+      toast.error(translate("Invalid YouTube URL"));
+      return;
+    }
+    const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+    const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
+    const newVideoItem: any = {
+      id: crypto.randomUUID(),
+      type: 'youtube',
+      image_url: embedUrl,
+      thumbnail_url: thumbnailUrl,
+      title: 'YouTube Video',
+      description: '',
+      user_id: user?.id || '',
+      created_at: new Date().toISOString(),
+      likes_count: 0
+    };
+    if (insertIndexRef.current !== -1) {
+      const newItems = [...localMediaItems];
+      newItems.splice(insertIndexRef.current, 0, newVideoItem);
+      updateMediaPositions(newItems, setLocalMediaItems, setMediaItems);
+    } else {
+      updateMediaPositions([...localMediaItems, newVideoItem], setLocalMediaItems, setMediaItems);
+    }
+    setYouTubeUrl('');
+    actions.setShowYouTubeDialog(false);
+    toast.success(translate("YouTube video added"));
+  };
+
+  const handleTikTokAdd = async () => {
+    const videoId = getTikTokId(tikTokUrl);
+    if (!videoId) {
+      toast.error(translate("Invalid TikTok URL"));
+      return;
+    }
+    const embedUrl = `https://www.tiktok.com/embed/v2/${videoId}`;
+    const thumbnailUrl = `https://sf16-scmcdn-sg.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/logo-dark-e95da587b6efa1520dcd11f4b45c0cf6.svg`;
+    const newVideoItem: any = {
+      id: crypto.randomUUID(),
+      type: 'tiktok',
+      image_url: embedUrl,
+      thumbnail_url: thumbnailUrl,
+      title: 'TikTok Video',
+      description: '',
+      user_id: user?.id || '',
+      created_at: new Date().toISOString(),
+      likes_count: 0
+    };
+    if (insertIndexRef.current !== -1) {
+      const newItems = [...localMediaItems];
+      newItems.splice(insertIndexRef.current, 0, newVideoItem);
+      updateMediaPositions(newItems, setLocalMediaItems, setMediaItems);
+    } else {
+      updateMediaPositions([...localMediaItems, newVideoItem], setLocalMediaItems, setMediaItems);
+    }
+    setTikTokUrl('');
+    actions.setShowTikTokDialog(false);
+    toast.success(translate("TikTok video added"));
+  };
+
+
+  const handleLike = async () => {
+    if (!user || !mediaItem) {
+      toast.error(translate('Please sign in to like this'));
+      return;
+    }
+    try {
+      const isNowLiked = await toggleLike(user.id, mediaItem.id, isLiked);
+      setIsLiked(isNowLiked);
+      setLikesCount(prev => isNowLiked ? prev + 1 : prev - 1);
+
+      setMediaItems(prevItems => prevItems.map(item => {
+        if (item.id === mediaItem.id) {
+          return {
+            ...item,
+            is_liked: isNowLiked,
+            likes_count: (item.likes_count || 0) + (isNowLiked ? 1 : -1)
+          };
+        }
+        return item;
+      }));
+    } catch (error) {
+      console.error('Error toggling like:', error);
+      toast.error(translate('Failed to update like'));
+    }
+  };
+
+  const handleDownload = async () => {
+    await downloadMediaItem(mediaItem, isVideo);
+  };
+
+  const handlePublish = async (option: 'overwrite' | 'new' | 'version', imageUrl: string, newTitle: string, description?: string, parentId?: string, collectionIds?: string[]) => {
+    if (!mediaItem || isVideo || !user) {
+      toast.error(translate('Please sign in to publish images'));
+      return;
+    }
+    setIsPublishing(true);
+    try {
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+
+      if (option === 'overwrite') {
+        const currentImageUrl = mediaItem.image_url;
+        if (currentImageUrl.includes('supabase.co/storage/')) {
+          const urlParts = currentImageUrl.split('/');
+          const fileName = urlParts[urlParts.length - 1];
+          const bucketPath = `${mediaItem.user_id}/${fileName}`;
+          await updateStorageFile(bucketPath, blob);
+          toast.success(translate('Image updated successfully!'));
+          fetchMedia();
+        } else {
+          toast.error(translate('Cannot overwrite this image'));
+          return;
+        }
+      } else if (option === 'version') {
+        const publicUrl = await uploadFileToStorage(user.id, blob, `${user.id}/${Date.now()}-version.png`);
+        const pictureData = await createPicture({
+          title: newTitle?.trim() || null,
+          description: description || `Generated from: ${mediaItem.title}`,
+          image_url: publicUrl,
+          user_id: user.id,
+          parent_id: parentId || mediaItem.id,
+          is_selected: false,
+          visible: false
+        });
+        if (collectionIds && collectionIds.length > 0 && pictureData) {
+          await addCollectionPictures(collectionIds.map(collectionId => ({ collection_id: collectionId, picture_id: pictureData.id })));
+        }
+        toast.success(translate('Version saved successfully!'));
+        loadVersions();
+      } else {
+        const publicUrl = await uploadFileToStorage(user.id, blob, `${user.id}/${Date.now()}-generated.png`);
+        const pictureData = await createPicture({
+          title: newTitle?.trim() || null,
+          description: description || `Generated from: ${mediaItem.title}`,
+          image_url: publicUrl,
+          user_id: user.id
+        });
+        if (collectionIds && collectionIds.length > 0 && pictureData) {
+          await addCollectionPictures(collectionIds.map(collectionId => ({ collection_id: collectionId, picture_id: pictureData.id })));
+        }
+        toast.success(translate('Image published to gallery!'));
+      }
+      setShowLightbox(false);
+      // llm state cleared by component
+
+    } catch (error) {
+      console.error('Error publishing image:', error);
+      toast.error(translate('Failed to publish image'));
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  const handleOpenInWizard = (imageUrl?: string) => {
+    if (!mediaItem || isVideo) return;
+    const imageToEdit = imageUrl || mediaItem.image_url;
+    const imageData = {
+      id: mediaItem.id,
+      src: imageToEdit,
+      title: mediaItem.title,
+      realDatabaseId: mediaItem.id,
+      selected: true
+    };
+    setWizardImage(imageData, window.location.pathname);
+    setShowLightbox(false);
+    navigate('/wizard');
+  };
+
+  const handleEditPicture = () => {
+    if (!mediaItem) return;
+    setShowEditModal(true);
+  };
+
+  const handleEditPost = () => {
+    if (!post) return;
+    navigate(`/post/${post.id}/edit`);
+  };
+
+  const rendererProps = {
+    post, authorProfile, mediaItems, localMediaItems, mediaItem: mediaItem!,
+    user, isOwner: !!isOwner, isEditMode, isLiked, likesCount,
+    localPost, setLocalPost, setLocalMediaItems,
+
+    onEditModeToggle: toggleEditMode,
+    onEditPost: handleEditPost,
+    onViewModeChange: handleViewMode,
+    onExportMarkdown: () => exportMarkdown(post, mediaItem!, mediaItems, authorProfile),
+    onSaveChanges: handleSaveChanges,
+    onDeletePost: () => actions.setShowDeletePostDialog(true),
+    onDeletePicture: () => actions.setShowDeletePictureDialog(true),
+    onLike: handleLike,
+    onUnlinkImage: actions.handleUnlinkImage,
+    onRemoveFromPost: handleRemoveFromPost,
+    onEditPicture: handleEditPicture,
+    onGalleryPickerOpen: openGalleryPicker,
+    onYouTubeAdd: () => actions.setShowYouTubeDialog(true),
+    onTikTokAdd: () => actions.setShowTikTokDialog(true),
+    onAIWizardOpen: openAIWizard,
+    onInlineUpload: handleInlineUpload,
+    onMoveItem: moveItem,
+    onMediaSelect: setMediaItem,
+    onExpand: (item: MediaItem) => { setMediaItem(item); setShowLightbox(true); },
+    onDownload: handleDownload,
+    onCategoryManagerOpen: () => actions.setShowCategoryManager(true),
+
+
+    currentImageIndex,
+    videoPlaybackUrl,
+    videoPosterUrl,
+    versionImages,
+
+    handlePrevImage,
+    embedded
+  };
+
+  // Render Page Content if it's an internal page
+  if (post?.type === 'page-intern' && post.meta?.slug) {
+    return (
+      <UserPage
+        userId={post.user_id}
+        slug={post.meta.slug}
+        embedded
+      />
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className={embedded ? "flex items-center justify-center p-8" : "min-h-screen bg-background flex items-center justify-center"}>
+        <div className="text-muted-foreground"><T>Loading...</T></div>
+      </div>
+    );
+  }
+
+  if (!mediaItem) {
+    return (
+      <div className={embedded ? "flex items-center justify-center p-8" : "min-h-screen bg-background flex items-center justify-center"}>
+        <div className="text-center space-y-4">
+          <div className="text-muted-foreground text-lg"><T>Content not found</T></div>
+          {!embedded && <Button onClick={() => navigate('/')} variant="outline"><T>Go Home</T></Button>}
+        </div>
+      </div>
+    );
+  }
+
+  const containerClassName = embedded
+    ? `flex flex-col bg-background h-[inherit]  ${className || ''}`
+    : "bg-background flex flex-col";
+
+  if (!embedded && !className) {
+    className = "h-[calc(100vh-4rem)]"
+  }
+  /*
+  console.log('containerClassName', containerClassName);
+  console.log('className', className);
+  console.log('embedded', embedded);
+*/
+
+  return (
+    <div className={`bg-background ${className}`}>
+      {post && (
+        <SEO
+          title={post.title || mediaItem?.title}
+          description={post.description || mediaItem?.description || `View ${post.title} on Polymech`}
+          image={mediaItem?.image_url}
+          type={isVideo ? 'video.other' : 'article'}
+        />
+      )}
+      <div className={embedded ? "w-full h-[inherit]" : "w-full max-w-[1600px] mx-auto h-full"}>
+
+        {viewMode === 'thumbs' ? (
+          <ThumbsRenderer {...rendererProps} />
+        ) : (
+          <CompactRenderer {...rendererProps} mediaItem={mediaItem} />
+        )}
+      </div>
+
+      <Suspense fallback={<div className="hidden">Loading editor...</div>}>
+        {showEditModal && !isVideo && (
+          <EditImageModal
+            open={showEditModal}
+            onOpenChange={setShowEditModal}
+            pictureId={mediaItem.id}
+            currentTitle={mediaItem.title}
+            currentDescription={mediaItem.description}
+            currentVisible={(mediaItem as any).visible ?? true}
+            imageUrl={mediaItem.image_url}
+            onUpdateSuccess={() => {
+              setShowEditModal(false);
+              fetchMedia();
+            }}
+          />
+        )}
+
+        {showEditModal && isVideo && (
+          <EditVideoModal
+            open={showEditModal}
+            onOpenChange={setShowEditModal}
+            videoId={mediaItem.id}
+            currentTitle={mediaItem.title}
+            currentDescription={mediaItem.description}
+            currentVisible={(mediaItem as any).visible ?? true}
+            onUpdateSuccess={() => {
+              setShowEditModal(false);
+              fetchMedia();
+            }}
+          />
+        )}
+      </Suspense>
+
+      {
+        !isVideo && showLightbox && (
+          <Suspense fallback={<div className="fixed inset-0 z-[100] bg-background/50 backdrop-blur-sm flex items-center justify-center">Loading Lightbox...</div>}>
+            <SmartLightbox
+              isOpen={showLightbox}
+              onClose={() => {
+                setShowLightbox(false);
+                // Restore focus to the element that was focused before lightbox opened
+                requestAnimationFrame(() => {
+                  //preLightboxFocusRef.current?.focus();
+                  //preLightboxFocusRef.current = null;
+                });
+              }}
+              mediaItem={mediaItem}
+              user={user}
+              isVideo={false}
+              onPublish={handlePublish}
+              onNavigate={(direction) => {
+                if (direction === 'next') handleNextImage();
+                else handlePrevImage();
+              }}
+              onOpenInWizard={() => handleOpenInWizard()} // SmartLightbox handles the argument if needed, or we adapt
+              currentIndex={currentImageIndex}
+              totalCount={mediaItems.length}
+            />
+          </Suspense>
+        )
+      }
+
+      {/* Dialogs */}
+      <YouTubeDialog
+        open={actions.showYouTubeDialog}
+        onOpenChange={actions.setShowYouTubeDialog}
+        url={youTubeUrl}
+        onUrlChange={setYouTubeUrl}
+        onConfirm={handleYouTubeAdd}
+      />
+
+      <TikTokDialog
+        open={actions.showTikTokDialog}
+        onOpenChange={actions.setShowTikTokDialog}
+        url={tikTokUrl}
+        onUrlChange={setTikTokUrl}
+        onConfirm={handleTikTokAdd}
+      />
+
+      <DeleteDialog
+        open={actions.showDeletePostDialog}
+        onOpenChange={actions.setShowDeletePostDialog}
+        onConfirm={actions.handleDeletePost}
+        title="Delete Post"
+        description="Are you sure you want to delete this post? This action cannot be undone."
+      />
+
+      <DeleteDialog
+        open={actions.showDeletePictureDialog}
+        onOpenChange={actions.setShowDeletePictureDialog}
+        onConfirm={actions.handleDeletePicture}
+        title="Delete Picture"
+        description="Are you sure you want to delete this picture? This action cannot be undone."
+      />
+
+      <Suspense fallback={null}>
+        {showEditModal && mediaItem && (
+          <EditImageModal
+            open={showEditModal}
+            onOpenChange={setShowEditModal}
+            pictureId={mediaItem.id}
+            currentTitle={mediaItem.title}
+            currentDescription={mediaItem.description || null}
+            currentVisible={true} // Defaulting to true as visible prop might be on backend or handled otherwise
+            imageUrl={mediaItem.image_url}
+            onUpdateSuccess={() => {
+              fetchMedia();
+              setShowEditModal(false);
+            }}
+          />
+        )}
+
+        <ImagePickerDialog
+          isOpen={showGalleryPicker}
+          onClose={() => setShowGalleryPicker(false)}
+          onSelect={handleGallerySelect}
+        />
+
+        {showAIWizard && (
+          <div className="fixed inset-0 z-[9999] bg-background/95 backdrop-blur-sm flex items-center justify-center p-4">
+            <div className="w-full h-full max-w-[1600px] bg-background border rounded-xl overflow-hidden shadow-2xl relative">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute top-4 right-4 z-50"
+                onClick={() => setShowAIWizard(false)}
+              >
+                <X className="h-6 w-6" />
+              </Button>
+              <ImageWizard
+                key="inline-wizard"
+                isOpen={true}
+                onClose={() => setShowAIWizard(false)}
+                mode="default"
+                initialPostTitle={post?.title || ""}
+                initialPostDescription={post?.description || ""}
+                onPublish={handleAIWizardPublish as any}
+              />
+            </div>
+          </div>
+        )}
+
+        <CategoryManager
+          isOpen={actions.showCategoryManager}
+          onClose={() => actions.setShowCategoryManager(false)}
+          currentPageId={post?.id}
+          currentPageMeta={post?.meta}
+          onPageMetaUpdate={actions.handleMetaUpdate}
+          filterByType="pages"
+          defaultMetaType="pages"
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default Post;
diff --git a/packages/ui/src/modules/posts/views/renderers/components/Gallery.tsx b/packages/ui/src/modules/posts/views/renderers/components/Gallery.tsx
index d1a337a7..c30b58ef 100644
--- a/packages/ui/src/modules/posts/views/renderers/components/Gallery.tsx
+++ b/packages/ui/src/modules/posts/views/renderers/components/Gallery.tsx
@@ -1,21 +1,21 @@
-import React, { lazy, Suspense } from 'react';
-import GalleryView from './GalleryView';
-import type { GalleryProps } from './GalleryTypes';
-
-const GalleryEdit = lazy(() => import('./GalleryEdit'));
-
-export type { GalleryProps } from './GalleryTypes';
-
-const GalleryComponent: React.FC<GalleryProps> = (props) => {
-    if (!props.isEditMode) {
-        return <GalleryView {...props} />;
-    }
-
-    return (
-        <Suspense fallback={<GalleryView {...props} />}>
-            <GalleryEdit {...props} />
-        </Suspense>
-    );
-};
-
-export const Gallery = GalleryComponent;
+import React, { lazy, Suspense } from 'react';
+import GalleryView from './GalleryView';
+import type { GalleryProps } from './GalleryTypes';
+
+const GalleryEdit = lazy(() => import('./GalleryEdit'));
+
+export type { GalleryProps } from './GalleryTypes';
+
+const GalleryComponent: React.FC<GalleryProps> = (props) => {
+    if (!props.isEditMode) {
+        return <GalleryView {...props} />;
+    }
+
+    return (
+        <Suspense fallback={<GalleryView {...props} />}>
+            <GalleryEdit {...props} />
+        </Suspense>
+    );
+};
+
+export const Gallery = GalleryComponent;
diff --git a/packages/ui/src/modules/posts/views/renderers/components/GalleryEdit.tsx b/packages/ui/src/modules/posts/views/renderers/components/GalleryEdit.tsx
index c366adcb..f6db7ff7 100644
--- a/packages/ui/src/modules/posts/views/renderers/components/GalleryEdit.tsx
+++ b/packages/ui/src/modules/posts/views/renderers/components/GalleryEdit.tsx
@@ -1,147 +1,147 @@
-import React, { useState } from "react";
-import { PostMediaItem } from "../../types";
-import { CompactFilmStrip } from "./CompactFilmStrip";
-import { CompactMediaViewer } from "./CompactMediaViewer";
-import { isVideoType, normalizeMediaType, detectMediaType } from "@/lib/mediaRegistry";
-import type { GalleryProps } from "./GalleryTypes";
-
-/**
- * Gallery Edit Component
- * 
- * Full-featured Gallery with edit-mode support (reorder, delete, pick, etc).
- */
-const GalleryEdit: React.FC<GalleryProps> = ({
-    mediaItems,
-    selectedItem,
-    onMediaSelect,
-    onExpand,
-    isOwner,
-    isEditMode = false,
-    localMediaItems,
-    setLocalMediaItems,
-    onDeletePicture = () => { },
-    onEditPicture,
-    onGalleryPickerOpen = () => { },
-    cacheBustKeys = {},
-    navigationData,
-    handleNavigate = () => { },
-    navigate = () => { },
-    videoPlaybackUrl,
-    videoPosterUrl,
-    showDesktopLayout = true,
-    thumbnailLayout = 'strip',
-    imageFit = 'contain',
-    thumbnailsPosition = 'bottom',
-    thumbnailsOrientation = 'horizontal',
-    zoomEnabled = false,
-    showTitle = false,
-    showDescription = false,
-    thumbnailsClassName = '',
-    autoPlayVideos = false,
-    className = ""
-}) => {
-    const currentImageIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
-    const [zoomActivated, setZoomActivated] = React.useState(false);
-
-    const handleThumbnailClick = (item: PostMediaItem) => {
-        setZoomActivated(true);
-        onMediaSelect(item);
-    };
-
-    const effectiveType = selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url);
-    const isVideo = isVideoType(normalizeMediaType(effectiveType));
-
-    // For video-intern items, derive playback/poster URLs from the item itself
-    const effectiveVideoPlaybackUrl = videoPlaybackUrl || (isVideo ? selectedItem.image_url : undefined);
-    const effectiveVideoPosterUrl = videoPosterUrl || (isVideo ? selectedItem.thumbnail_url : undefined);
-
-    // Determine flex direction based on thumbnail position
-    const getFlexDirection = () => {
-        switch (thumbnailsPosition) {
-            case 'top': return 'flex-col-reverse';
-            case 'left': return 'flex-row-reverse';
-            case 'right': return 'flex-row';
-            case 'bottom':
-            default: return 'flex-col';
-        }
-    };
-
-    // Determine if we need a fixed width/height for the filmstrip container based on position
-    const isSidebar = thumbnailsPosition === 'left' || thumbnailsPosition === 'right';
-
-    const hasCaption = (showTitle && selectedItem.title) || (showDescription && selectedItem.description);
-
-    return (
-        <div className={`flex ${getFlexDirection()} h-full ${className} dark:bg-slate-900/10`}>
-
-            {/* Main Media Viewer + Caption overlay */}
-            <div className={`flex-1 relative min-0 ${isSidebar ? 'h-full' : 'w-full'}`}>
-                <CompactMediaViewer
-                    mediaItem={selectedItem}
-                    isVideo={isVideo}
-                    showDesktopLayout={showDesktopLayout}
-                    mediaItems={mediaItems}
-                    currentImageIndex={currentImageIndex}
-                    navigationData={navigationData}
-                    handleNavigate={handleNavigate}
-                    onMediaSelect={onMediaSelect}
-                    onExpand={onExpand}
-                    cacheBustKeys={cacheBustKeys}
-                    navigate={navigate}
-                    isOwner={isOwner}
-                    videoPlaybackUrl={effectiveVideoPlaybackUrl}
-                    videoPosterUrl={effectiveVideoPosterUrl}
-                    imageFit={imageFit}
-                    zoomEnabled={zoomEnabled && zoomActivated}
-                    autoPlayVideos={autoPlayVideos}
-                />
-
-                {/* Title / Description — overlay at bottom-left of image */}
-                {hasCaption && (
-                    <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/60 to-transparent pointer-events-none z-10">
-                        <div className="flex flex-col gap-0.5 text-left">
-                            {showTitle && selectedItem.title && (
-                                <h3 className="text-sm font-semibold text-white leading-snug truncate drop-shadow-sm">
-                                    {selectedItem.title}
-                                </h3>
-                            )}
-                            {showDescription && selectedItem.description && (
-                                <p className="text-xs text-white/80 leading-relaxed line-clamp-2 drop-shadow-sm">
-                                    {selectedItem.description}
-                                </p>
-                            )}
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Filmstrip */}
-            <div className={`
-                flex justify-center 
-                ${isSidebar ? 'h-full w-auto' : 'w-full h-auto'}
-                ${thumbnailsPosition === 'left' ? '' : ''}
-                ${thumbnailsPosition === 'top' ? '' : ''}
-                ${thumbnailsPosition === 'bottom' ? '' : ''}
-            `}>
-                <CompactFilmStrip
-                    mediaItems={mediaItems}
-                    localMediaItems={localMediaItems}
-                    setLocalMediaItems={setLocalMediaItems}
-                    isEditMode={isEditMode}
-                    mediaItem={selectedItem}
-                    onMediaSelect={handleThumbnailClick}
-                    isOwner={isOwner}
-                    onDeletePicture={onDeletePicture}
-                    onEditPicture={onEditPicture}
-                    onGalleryPickerOpen={onGalleryPickerOpen}
-                    cacheBustKeys={cacheBustKeys}
-                    thumbnailLayout={thumbnailLayout}
-                    orientation={thumbnailsOrientation}
-                    className={thumbnailsClassName}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default GalleryEdit;
+import React, { useState } from "react";
+import { PostMediaItem } from "../../types";
+import { CompactFilmStrip } from "./CompactFilmStrip";
+import { CompactMediaViewer } from "./CompactMediaViewer";
+import { isVideoType, normalizeMediaType, detectMediaType } from "@/lib/mediaRegistry";
+import type { GalleryProps } from "./GalleryTypes";
+
+/**
+ * Gallery Edit Component
+ * 
+ * Full-featured Gallery with edit-mode support (reorder, delete, pick, etc).
+ */
+const GalleryEdit: React.FC<GalleryProps> = ({
+    mediaItems,
+    selectedItem,
+    onMediaSelect,
+    onExpand,
+    isOwner,
+    isEditMode = false,
+    localMediaItems,
+    setLocalMediaItems,
+    onDeletePicture = () => { },
+    onEditPicture,
+    onGalleryPickerOpen = () => { },
+    cacheBustKeys = {},
+    navigationData,
+    handleNavigate = () => { },
+    navigate = () => { },
+    videoPlaybackUrl,
+    videoPosterUrl,
+    showDesktopLayout = true,
+    thumbnailLayout = 'strip',
+    imageFit = 'contain',
+    thumbnailsPosition = 'bottom',
+    thumbnailsOrientation = 'horizontal',
+    zoomEnabled = false,
+    showTitle = false,
+    showDescription = false,
+    thumbnailsClassName = '',
+    autoPlayVideos = false,
+    className = ""
+}) => {
+    const currentImageIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
+    const [zoomActivated, setZoomActivated] = React.useState(false);
+
+    const handleThumbnailClick = (item: PostMediaItem) => {
+        setZoomActivated(true);
+        onMediaSelect(item);
+    };
+
+    const effectiveType = selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url);
+    const isVideo = isVideoType(normalizeMediaType(effectiveType));
+
+    // For video-intern items, derive playback/poster URLs from the item itself
+    const effectiveVideoPlaybackUrl = videoPlaybackUrl || (isVideo ? selectedItem.image_url : undefined);
+    const effectiveVideoPosterUrl = videoPosterUrl || (isVideo ? selectedItem.thumbnail_url : undefined);
+
+    // Determine flex direction based on thumbnail position
+    const getFlexDirection = () => {
+        switch (thumbnailsPosition) {
+            case 'top': return 'flex-col-reverse';
+            case 'left': return 'flex-row-reverse';
+            case 'right': return 'flex-row';
+            case 'bottom':
+            default: return 'flex-col';
+        }
+    };
+
+    // Determine if we need a fixed width/height for the filmstrip container based on position
+    const isSidebar = thumbnailsPosition === 'left' || thumbnailsPosition === 'right';
+
+    const hasCaption = (showTitle && selectedItem.title) || (showDescription && selectedItem.description);
+
+    return (
+        <div className={`flex ${getFlexDirection()} h-full ${className} dark:bg-slate-900/10`}>
+
+            {/* Main Media Viewer + Caption overlay */}
+            <div className={`flex-1 relative min-0 ${isSidebar ? 'h-full' : 'w-full'}`}>
+                <CompactMediaViewer
+                    mediaItem={selectedItem}
+                    isVideo={isVideo}
+                    showDesktopLayout={showDesktopLayout}
+                    mediaItems={mediaItems}
+                    currentImageIndex={currentImageIndex}
+                    navigationData={navigationData}
+                    handleNavigate={handleNavigate}
+                    onMediaSelect={onMediaSelect}
+                    onExpand={onExpand}
+                    cacheBustKeys={cacheBustKeys}
+                    navigate={navigate}
+                    isOwner={isOwner}
+                    videoPlaybackUrl={effectiveVideoPlaybackUrl}
+                    videoPosterUrl={effectiveVideoPosterUrl}
+                    imageFit={imageFit}
+                    zoomEnabled={zoomEnabled && zoomActivated}
+                    autoPlayVideos={autoPlayVideos}
+                />
+
+                {/* Title / Description — overlay at bottom-left of image */}
+                {hasCaption && (
+                    <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/60 to-transparent pointer-events-none z-10">
+                        <div className="flex flex-col gap-0.5 text-left">
+                            {showTitle && selectedItem.title && (
+                                <h3 className="text-sm font-semibold text-white leading-snug truncate drop-shadow-sm">
+                                    {selectedItem.title}
+                                </h3>
+                            )}
+                            {showDescription && selectedItem.description && (
+                                <p className="text-xs text-white/80 leading-relaxed line-clamp-2 drop-shadow-sm">
+                                    {selectedItem.description}
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Filmstrip */}
+            <div className={`
+                flex justify-center 
+                ${isSidebar ? 'h-full w-auto' : 'w-full h-auto'}
+                ${thumbnailsPosition === 'left' ? '' : ''}
+                ${thumbnailsPosition === 'top' ? '' : ''}
+                ${thumbnailsPosition === 'bottom' ? '' : ''}
+            `}>
+                <CompactFilmStrip
+                    mediaItems={mediaItems}
+                    localMediaItems={localMediaItems}
+                    setLocalMediaItems={setLocalMediaItems}
+                    isEditMode={isEditMode}
+                    mediaItem={selectedItem}
+                    onMediaSelect={handleThumbnailClick}
+                    isOwner={isOwner}
+                    onDeletePicture={onDeletePicture}
+                    onEditPicture={onEditPicture}
+                    onGalleryPickerOpen={onGalleryPickerOpen}
+                    cacheBustKeys={cacheBustKeys}
+                    thumbnailLayout={thumbnailLayout}
+                    orientation={thumbnailsOrientation}
+                    className={thumbnailsClassName}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default GalleryEdit;
diff --git a/packages/ui/src/modules/posts/views/renderers/components/GalleryTypes.ts b/packages/ui/src/modules/posts/views/renderers/components/GalleryTypes.ts
index c945b865..211b3413 100644
--- a/packages/ui/src/modules/posts/views/renderers/components/GalleryTypes.ts
+++ b/packages/ui/src/modules/posts/views/renderers/components/GalleryTypes.ts
@@ -1,87 +1,87 @@
-import { PostMediaItem } from "../../types";
-
-export interface GalleryProps {
-    /** Array of media items to display */
-    mediaItems: PostMediaItem[];
-
-    /** Currently selected media item */
-    selectedItem: PostMediaItem;
-
-    /** Callback when a media item is selected */
-    onMediaSelect: (item: PostMediaItem) => void;
-
-    /** Callback when media is expanded/fullscreen */
-    onExpand: (item: PostMediaItem) => void;
-
-    /** Whether the current user owns this content */
-    isOwner: boolean;
-
-    /** Edit mode state */
-    isEditMode?: boolean;
-
-    /** Local media items for edit mode */
-    localMediaItems?: PostMediaItem[];
-
-    /** Setter for local media items */
-    setLocalMediaItems?: (items: PostMediaItem[]) => void;
-
-    /** Callback to delete current picture */
-    onDeletePicture?: () => void;
-
-    /** Callback to edit a picture (navigate to PostPage) */
-    onEditPicture?: (item: PostMediaItem) => void;
-
-    /** Callback to open gallery picker at specific index */
-    onGalleryPickerOpen?: (index: number) => void;
-
-    /** Cache bust keys for images */
-    cacheBustKeys?: Record<string, number>;
-
-    /** Navigation data for cross-post navigation */
-    navigationData?: any;
-
-    /** Handler for navigating between posts */
-    handleNavigate?: (direction: 'next' | 'prev') => void;
-
-    /** React Router navigate function */
-    navigate?: (path: any) => void;
-
-    /** Video playback URL (for Mux videos) */
-    videoPlaybackUrl?: string;
-
-    /** Video poster/thumbnail URL */
-    videoPosterUrl?: string;
-
-    /** Whether to show desktop layout */
-    showDesktopLayout?: boolean;
-
-    /** Thumbnail layout mode: 'strip' (horizontal scroll) or 'grid' (multiple rows) */
-    thumbnailLayout?: 'strip' | 'grid';
-
-    /** Image fit mode: 'contain' (fit within bounds) or 'cover' (fill bounds) */
-    imageFit?: 'contain' | 'cover';
-
-    /** Custom className for container */
-    className?: string;
-
-    /** Position of the thumbnails relative to the main image */
-    thumbnailsPosition?: 'bottom' | 'top' | 'left' | 'right';
-
-    /** Orientation of the thumbnail strip */
-    thumbnailsOrientation?: 'horizontal' | 'vertical';
-
-    /** Whether to enable zoom (spyglass) on main image */
-    zoomEnabled?: boolean;
-
-    /** Show the picture title beside/below the main image */
-    showTitle?: boolean;
-
-    /** Show the picture description beside/below the main image */
-    showDescription?: boolean;
-
-    /** Additional CSS classes for thumbnails strip */
-    thumbnailsClassName?: string;
-
-    /** Auto-play videos when selected */
-    autoPlayVideos?: boolean;
-}
+import { PostMediaItem } from "../../types";
+
+export interface GalleryProps {
+    /** Array of media items to display */
+    mediaItems: PostMediaItem[];
+
+    /** Currently selected media item */
+    selectedItem: PostMediaItem;
+
+    /** Callback when a media item is selected */
+    onMediaSelect: (item: PostMediaItem) => void;
+
+    /** Callback when media is expanded/fullscreen */
+    onExpand: (item: PostMediaItem) => void;
+
+    /** Whether the current user owns this content */
+    isOwner: boolean;
+
+    /** Edit mode state */
+    isEditMode?: boolean;
+
+    /** Local media items for edit mode */
+    localMediaItems?: PostMediaItem[];
+
+    /** Setter for local media items */
+    setLocalMediaItems?: (items: PostMediaItem[]) => void;
+
+    /** Callback to delete current picture */
+    onDeletePicture?: () => void;
+
+    /** Callback to edit a picture (navigate to PostPage) */
+    onEditPicture?: (item: PostMediaItem) => void;
+
+    /** Callback to open gallery picker at specific index */
+    onGalleryPickerOpen?: (index: number) => void;
+
+    /** Cache bust keys for images */
+    cacheBustKeys?: Record<string, number>;
+
+    /** Navigation data for cross-post navigation */
+    navigationData?: any;
+
+    /** Handler for navigating between posts */
+    handleNavigate?: (direction: 'next' | 'prev') => void;
+
+    /** React Router navigate function */
+    navigate?: (path: any) => void;
+
+    /** Video playback URL (for Mux videos) */
+    videoPlaybackUrl?: string;
+
+    /** Video poster/thumbnail URL */
+    videoPosterUrl?: string;
+
+    /** Whether to show desktop layout */
+    showDesktopLayout?: boolean;
+
+    /** Thumbnail layout mode: 'strip' (horizontal scroll) or 'grid' (multiple rows) */
+    thumbnailLayout?: 'strip' | 'grid';
+
+    /** Image fit mode: 'contain' (fit within bounds) or 'cover' (fill bounds) */
+    imageFit?: 'contain' | 'cover';
+
+    /** Custom className for container */
+    className?: string;
+
+    /** Position of the thumbnails relative to the main image */
+    thumbnailsPosition?: 'bottom' | 'top' | 'left' | 'right';
+
+    /** Orientation of the thumbnail strip */
+    thumbnailsOrientation?: 'horizontal' | 'vertical';
+
+    /** Whether to enable zoom (spyglass) on main image */
+    zoomEnabled?: boolean;
+
+    /** Show the picture title beside/below the main image */
+    showTitle?: boolean;
+
+    /** Show the picture description beside/below the main image */
+    showDescription?: boolean;
+
+    /** Additional CSS classes for thumbnails strip */
+    thumbnailsClassName?: string;
+
+    /** Auto-play videos when selected */
+    autoPlayVideos?: boolean;
+}
diff --git a/packages/ui/src/modules/posts/views/renderers/components/GalleryView.tsx b/packages/ui/src/modules/posts/views/renderers/components/GalleryView.tsx
index aaabc320..d26908e1 100644
--- a/packages/ui/src/modules/posts/views/renderers/components/GalleryView.tsx
+++ b/packages/ui/src/modules/posts/views/renderers/components/GalleryView.tsx
@@ -1,128 +1,128 @@
-import React from "react";
-import { PostMediaItem } from "../../types";
-import { CompactFilmStrip } from "./CompactFilmStrip";
-import { CompactMediaViewer } from "./CompactMediaViewer";
-import { isVideoType, normalizeMediaType, detectMediaType } from "@/lib/mediaRegistry";
-import type { GalleryProps } from "./GalleryTypes";
-
-const GalleryView: React.FC<GalleryProps> = ({
-    mediaItems,
-    selectedItem,
-    onMediaSelect,
-    onExpand,
-    isOwner,
-    cacheBustKeys = {},
-    navigationData,
-    handleNavigate = () => { },
-    navigate = () => { },
-    videoPlaybackUrl,
-    videoPosterUrl,
-    showDesktopLayout = true,
-    thumbnailLayout = 'strip',
-    imageFit = 'contain',
-    thumbnailsPosition = 'bottom',
-    thumbnailsOrientation = 'horizontal',
-    zoomEnabled = false,
-    showTitle = false,
-    showDescription = false,
-    thumbnailsClassName = '',
-    autoPlayVideos = false,
-    className = ""
-}) => {
-    const currentImageIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
-    const [zoomActivated, setZoomActivated] = React.useState(false);
-
-    const handleThumbnailClick = (item: PostMediaItem) => {
-        setZoomActivated(true);
-        onMediaSelect(item);
-    };
-
-    const effectiveType = selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url);
-    const isVideo = isVideoType(normalizeMediaType(effectiveType));
-
-    const effectiveVideoPlaybackUrl = videoPlaybackUrl || (isVideo ? selectedItem.image_url : undefined);
-    const effectiveVideoPosterUrl = videoPosterUrl || (isVideo ? selectedItem.thumbnail_url : undefined);
-
-    const getFlexDirection = () => {
-        switch (thumbnailsPosition) {
-            case 'top': return 'flex-col-reverse';
-            case 'left': return 'flex-row-reverse';
-            case 'right': return 'flex-row';
-            case 'bottom':
-            default: return 'flex-col';
-        }
-    };
-
-    const isSidebar = thumbnailsPosition === 'left' || thumbnailsPosition === 'right';
-    const hasCaption = (showTitle && selectedItem.title) || (showDescription && selectedItem.description);
-
-    return (
-        <div className={`flex ${getFlexDirection()} h-full ${className} dark:bg-slate-900/10`}>
-            {/* Main Media Viewer + Caption overlay */}
-            <div className={`flex-1 relative min-0 ${isSidebar ? 'h-full' : 'w-full'}`}>
-                <CompactMediaViewer
-                    mediaItem={selectedItem}
-                    isVideo={isVideo}
-                    showDesktopLayout={showDesktopLayout}
-                    mediaItems={mediaItems}
-                    currentImageIndex={currentImageIndex}
-                    navigationData={navigationData}
-                    handleNavigate={handleNavigate}
-                    onMediaSelect={onMediaSelect}
-                    onExpand={onExpand}
-                    cacheBustKeys={cacheBustKeys}
-                    navigate={navigate}
-                    isOwner={isOwner}
-                    videoPlaybackUrl={effectiveVideoPlaybackUrl}
-                    videoPosterUrl={effectiveVideoPosterUrl}
-                    imageFit={imageFit}
-                    zoomEnabled={zoomEnabled && zoomActivated}
-                    autoPlayVideos={autoPlayVideos}
-                />
-
-                {/* Title / Description — overlay at bottom-left of image */}
-                {hasCaption && (
-                    <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/60 to-transparent pointer-events-none z-10">
-                        <div className="flex flex-col gap-0.5 text-left">
-                            {showTitle && selectedItem.title && (
-                                <h3 className="text-sm font-semibold text-white leading-snug truncate drop-shadow-sm">
-                                    {selectedItem.title}
-                                </h3>
-                            )}
-                            {showDescription && selectedItem.description && (
-                                <p className="text-xs text-white/80 leading-relaxed line-clamp-2 drop-shadow-sm">
-                                    {selectedItem.description}
-                                </p>
-                            )}
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Filmstrip */}
-            <div className={`
-                flex justify-center 
-                ${isSidebar ? 'h-full w-auto' : 'w-full h-auto'}
-                ${thumbnailsPosition === 'left' ? '' : ''}
-                ${thumbnailsPosition === 'top' ? '' : ''}
-                ${thumbnailsPosition === 'bottom' ? '' : ''}
-            `}>
-                <CompactFilmStrip
-                    mediaItems={mediaItems}
-                    isEditMode={false}
-                    mediaItem={selectedItem}
-                    onMediaSelect={handleThumbnailClick}
-                    isOwner={isOwner}
-                    onDeletePicture={() => {}}
-                    onGalleryPickerOpen={() => {}}
-                    cacheBustKeys={cacheBustKeys}
-                    thumbnailLayout={thumbnailLayout}
-                    orientation={thumbnailsOrientation}
-                    className={thumbnailsClassName}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default GalleryView;
+import React from "react";
+import { PostMediaItem } from "../../types";
+import { CompactFilmStrip } from "./CompactFilmStrip";
+import { CompactMediaViewer } from "./CompactMediaViewer";
+import { isVideoType, normalizeMediaType, detectMediaType } from "@/lib/mediaRegistry";
+import type { GalleryProps } from "./GalleryTypes";
+
+const GalleryView: React.FC<GalleryProps> = ({
+    mediaItems,
+    selectedItem,
+    onMediaSelect,
+    onExpand,
+    isOwner,
+    cacheBustKeys = {},
+    navigationData,
+    handleNavigate = () => { },
+    navigate = () => { },
+    videoPlaybackUrl,
+    videoPosterUrl,
+    showDesktopLayout = true,
+    thumbnailLayout = 'strip',
+    imageFit = 'contain',
+    thumbnailsPosition = 'bottom',
+    thumbnailsOrientation = 'horizontal',
+    zoomEnabled = false,
+    showTitle = false,
+    showDescription = false,
+    thumbnailsClassName = '',
+    autoPlayVideos = false,
+    className = ""
+}) => {
+    const currentImageIndex = mediaItems.findIndex(item => item.id === selectedItem.id);
+    const [zoomActivated, setZoomActivated] = React.useState(false);
+
+    const handleThumbnailClick = (item: PostMediaItem) => {
+        setZoomActivated(true);
+        onMediaSelect(item);
+    };
+
+    const effectiveType = selectedItem.mediaType || (selectedItem as any).type || detectMediaType(selectedItem.image_url);
+    const isVideo = isVideoType(normalizeMediaType(effectiveType));
+
+    const effectiveVideoPlaybackUrl = videoPlaybackUrl || (isVideo ? selectedItem.image_url : undefined);
+    const effectiveVideoPosterUrl = videoPosterUrl || (isVideo ? selectedItem.thumbnail_url : undefined);
+
+    const getFlexDirection = () => {
+        switch (thumbnailsPosition) {
+            case 'top': return 'flex-col-reverse';
+            case 'left': return 'flex-row-reverse';
+            case 'right': return 'flex-row';
+            case 'bottom':
+            default: return 'flex-col';
+        }
+    };
+
+    const isSidebar = thumbnailsPosition === 'left' || thumbnailsPosition === 'right';
+    const hasCaption = (showTitle && selectedItem.title) || (showDescription && selectedItem.description);
+
+    return (
+        <div className={`flex ${getFlexDirection()} h-full ${className} dark:bg-slate-900/10`}>
+            {/* Main Media Viewer + Caption overlay */}
+            <div className={`flex-1 relative min-0 ${isSidebar ? 'h-full' : 'w-full'}`}>
+                <CompactMediaViewer
+                    mediaItem={selectedItem}
+                    isVideo={isVideo}
+                    showDesktopLayout={showDesktopLayout}
+                    mediaItems={mediaItems}
+                    currentImageIndex={currentImageIndex}
+                    navigationData={navigationData}
+                    handleNavigate={handleNavigate}
+                    onMediaSelect={onMediaSelect}
+                    onExpand={onExpand}
+                    cacheBustKeys={cacheBustKeys}
+                    navigate={navigate}
+                    isOwner={isOwner}
+                    videoPlaybackUrl={effectiveVideoPlaybackUrl}
+                    videoPosterUrl={effectiveVideoPosterUrl}
+                    imageFit={imageFit}
+                    zoomEnabled={zoomEnabled && zoomActivated}
+                    autoPlayVideos={autoPlayVideos}
+                />
+
+                {/* Title / Description — overlay at bottom-left of image */}
+                {hasCaption && (
+                    <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/60 to-transparent pointer-events-none z-10">
+                        <div className="flex flex-col gap-0.5 text-left">
+                            {showTitle && selectedItem.title && (
+                                <h3 className="text-sm font-semibold text-white leading-snug truncate drop-shadow-sm">
+                                    {selectedItem.title}
+                                </h3>
+                            )}
+                            {showDescription && selectedItem.description && (
+                                <p className="text-xs text-white/80 leading-relaxed line-clamp-2 drop-shadow-sm">
+                                    {selectedItem.description}
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Filmstrip */}
+            <div className={`
+                flex justify-center 
+                ${isSidebar ? 'h-full w-auto' : 'w-full h-auto'}
+                ${thumbnailsPosition === 'left' ? '' : ''}
+                ${thumbnailsPosition === 'top' ? '' : ''}
+                ${thumbnailsPosition === 'bottom' ? '' : ''}
+            `}>
+                <CompactFilmStrip
+                    mediaItems={mediaItems}
+                    isEditMode={false}
+                    mediaItem={selectedItem}
+                    onMediaSelect={handleThumbnailClick}
+                    isOwner={isOwner}
+                    onDeletePicture={() => {}}
+                    onGalleryPickerOpen={() => {}}
+                    cacheBustKeys={cacheBustKeys}
+                    thumbnailLayout={thumbnailLayout}
+                    orientation={thumbnailsOrientation}
+                    className={thumbnailsClassName}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default GalleryView;
diff --git a/packages/ui/src/modules/storage/hooks/useDefaultActions.ts b/packages/ui/src/modules/storage/hooks/useDefaultActions.ts
index 1055b5d2..84473cd6 100644
--- a/packages/ui/src/modules/storage/hooks/useDefaultActions.ts
+++ b/packages/ui/src/modules/storage/hooks/useDefaultActions.ts
@@ -1,246 +1,246 @@
-import React, { useMemo, useCallback } from 'react';
-import type { INode } from '@/modules/storage/types';
-import { getMimeCategory, vfsUrl } from '@/modules/storage/helpers';
-
-export interface UseDefaultActionsProps {
-    mount: string;
-    mountProp: string;
-    pathProp: string;
-    accessToken?: string;
-
-    // Selection
-    selected: INode[];
-    sorted: INode[];
-    canGoUp: boolean;
-    setFocusIdx: (idx: number) => void;
-    setSelected: React.Dispatch<React.SetStateAction<INode[]>>;
-
-    // Preview
-    lightboxNode: INode | null;
-    setLightboxNode: (n: INode | null) => void;
-    textLightboxNode: INode | null;
-    setTextLightboxNode: (n: INode | null) => void;
-    iframeLightboxNode: INode | null;
-    setIframeLightboxNode: (n: INode | null) => void;
-    openPreview: (node: INode) => void;
-
-    // Navigation
-    updatePath: (path: string) => void;
-    setPendingFileSelect: (v: string | null) => void;
-
-    // Refs
-    containerRef: React.RefObject<HTMLDivElement | null>;
-
-    // Helpers from parent
-    getNode: (idx: number) => INode | null;
-    goUp: () => void;
-}
-
-/**
- * Resolve a relative link `href` against a `basePath` within the VFS.
- * Returns `{ dirPath, filename }` — `filename` is empty if the link points to a directory.
- */
-export function resolveRelativeVfsLink(href: string, basePath: string): { dirPath: string; filename: string } | null {
-    try {
-        let bp = basePath;
-        if (!bp.startsWith('/')) bp = '/' + bp;
-        if (bp !== '/' && !bp.endsWith('/')) bp += '/';
-
-        const resolved = new URL(href, `http://dummy.local${bp}`);
-        let newPath = decodeURIComponent(resolved.pathname);
-
-        const parts = newPath.split('/');
-        const lastPart = parts[parts.length - 1];
-        let filename = '';
-
-        if (lastPart && lastPart.includes('.') && !newPath.endsWith('/')) {
-            filename = lastPart;
-            parts.pop();
-            newPath = parts.join('/') || '/';
-        }
-
-        if (newPath !== '/' && newPath.endsWith('/')) {
-            newPath = newPath.slice(0, -1);
-        }
-
-        return { dirPath: newPath, filename };
-    } catch {
-        return null;
-    }
-}
-
-export function useDefaultActions({
-    mount,
-    mountProp,
-    pathProp,
-    accessToken,
-    selected,
-    sorted,
-    canGoUp,
-    setFocusIdx,
-    setSelected,
-    lightboxNode,
-    setLightboxNode,
-    textLightboxNode,
-    setTextLightboxNode,
-    iframeLightboxNode,
-    setIframeLightboxNode,
-    openPreview,
-    updatePath,
-    setPendingFileSelect,
-    containerRef,
-    getNode,
-    goUp,
-}: UseDefaultActionsProps) {
-
-    const selectedFile = selected.length === 1 && getMimeCategory(selected[0]) !== 'dir' ? selected[0] : null;
-
-    // ── File URL builder ─────────────────────────────────────────
-    const getFileUrl = useCallback((node: INode) => {
-        const tokenParam = accessToken ? `token=${encodeURIComponent(accessToken)}` : '';
-        const base = vfsUrl('get', mountProp, node.path);
-        let url = tokenParam ? `${base}?${tokenParam}` : base;
-        if (node.mtime) {
-            url += (url.includes('?') ? '&' : '?') + `t=${node.mtime}`;
-        }
-        return url;
-    }, [accessToken, mountProp]);
-
-    // ── View in new tab ──────────────────────────────────────────
-    const handleView = useCallback(() => {
-        if (selected.length === 1) window.open(getFileUrl(selected[0]), '_blank');
-    }, [selected, getFileUrl]);
-
-    // ── Download handler ─────────────────────────────────────────
-    const handleDownload = useCallback(() => {
-        if (selected.length === 0) return;
-        if (selected.length === 1) {
-            const first = selected[0];
-            const cat = getMimeCategory(first);
-            if (cat === 'dir') {
-                const clean = first.path.replace(/^\/+/, '');
-                let url = vfsUrl('compress', mount, clean);
-                if (accessToken) url += `?token=${encodeURIComponent(accessToken)}`;
-                window.location.href = url;
-                return;
-            }
-            if (selectedFile) {
-                const clean = selectedFile.path.replace(/^\/+/, '');
-                let url = vfsUrl('get', mount, clean);
-                if (accessToken) url += `?token=${encodeURIComponent(accessToken)}`;
-                if (selectedFile.mtime) url += (url.includes('?') ? '&' : '?') + `t=${selectedFile.mtime}`;
-                url += (url.includes('?') ? '&' : '?') + 'download=1';
-                window.location.href = url;
-            }
-            return;
-        }
-
-        // Multiple selection: batch zip
-        const cleanPath = pathProp.replace(/^\/+/, '');
-        let url = vfsUrl('compress', mount, cleanPath);
-        if (accessToken) {
-            url += `?token=${encodeURIComponent(accessToken)}`;
-        }
-        url += '&files=' + encodeURIComponent(selected.map(n => n.name).join(','));
-        window.location.href = url;
-    }, [selected, selectedFile, mount, mountProp, pathProp, accessToken]);
-
-    // ── Download directory as zip ────────────────────────────────
-    const handleDownloadDir = useCallback(() => {
-        const cleanPath = pathProp.replace(/^\/+/, '');
-        let url = vfsUrl('compress', mount, cleanPath);
-        if (accessToken) {
-            url += `?token=${encodeURIComponent(accessToken)}`;
-        }
-        window.location.href = url;
-    }, [mount, pathProp, accessToken]);
-
-    // ── Lightbox navigation ──────────────────────────────────────
-    const mediaNodes = useMemo(
-        () => sorted.filter(n => { const c = getMimeCategory(n); return c === 'image' || c === 'video'; }),
-        [sorted]
-    );
-    const lightboxIdx = lightboxNode ? mediaNodes.findIndex(n => n.path === lightboxNode.path) : -1;
-
-    const lightboxPrev = useCallback(() => {
-        if (lightboxIdx > 0) setLightboxNode(mediaNodes[lightboxIdx - 1]);
-    }, [lightboxIdx, mediaNodes, setLightboxNode]);
-
-    const lightboxNext = useCallback(() => {
-        if (lightboxIdx < mediaNodes.length - 1) setLightboxNode(mediaNodes[lightboxIdx + 1]);
-    }, [lightboxIdx, mediaNodes, setLightboxNode]);
-
-    // ── Close lightboxes (restore focus + selection) ─────────────
-    const restoreFocusAfterLightbox = useCallback((node: INode | null, closer: (n: null) => void) => {
-        if (node) {
-            const idx = sorted.indexOf(node);
-            if (idx >= 0) {
-                setFocusIdx(canGoUp ? idx + 1 : idx);
-                setSelected([node]);
-            }
-        }
-        closer(null);
-        setTimeout(() => containerRef.current?.focus(), 0);
-    }, [sorted, canGoUp, setFocusIdx, setSelected, containerRef]);
-
-    const closeLightbox = useCallback(
-        () => restoreFocusAfterLightbox(lightboxNode, setLightboxNode),
-        [restoreFocusAfterLightbox, lightboxNode, setLightboxNode]
-    );
-
-    const closeTextLightbox = useCallback(
-        () => restoreFocusAfterLightbox(textLightboxNode, setTextLightboxNode),
-        [restoreFocusAfterLightbox, textLightboxNode, setTextLightboxNode]
-    );
-
-    const closeIframeLightbox = useCallback(
-        () => restoreFocusAfterLightbox(iframeLightboxNode, setIframeLightboxNode),
-        [restoreFocusAfterLightbox, iframeLightboxNode, setIframeLightboxNode]
-    );
-
-    // ── Double-click handler ─────────────────────────────────────
-    const handleDoubleClick = useCallback((idx: number) => {
-        const node = getNode(idx);
-        if (!node) { goUp(); return; }
-        if (getMimeCategory(node) === 'dir') {
-            updatePath(node.path || node.name);
-        } else {
-            openPreview(node);
-        }
-    }, [getNode, goUp, updatePath, openPreview]);
-
-    // ── Unified link-click handler (for readme/file-viewer panes) ─
-    const handleLinkClick = useCallback((href: string, e: React.MouseEvent, basePath: string) => {
-        const isExternal = href.startsWith('http://') || href.startsWith('https://') || href.startsWith('mailto:') || href.startsWith('tel:') || href.startsWith('data:') || href.startsWith('#');
-        if (isExternal) return;
-
-        e.preventDefault();
-        const result = resolveRelativeVfsLink(href, basePath);
-        if (!result) {
-            console.error("Failed to resolve relative link:", href);
-            return;
-        }
-
-        if (result.filename) {
-            setPendingFileSelect(result.filename);
-        }
-        updatePath(result.dirPath);
-    }, [updatePath, setPendingFileSelect]);
-
-    return {
-        selectedFile,
-        getFileUrl,
-        handleView,
-        handleDownload,
-        handleDownloadDir,
-        mediaNodes,
-        lightboxIdx,
-        lightboxPrev,
-        lightboxNext,
-        closeLightbox,
-        closeTextLightbox,
-        closeIframeLightbox,
-        handleDoubleClick,
-        handleLinkClick
-    };
-}
+import React, { useMemo, useCallback } from 'react';
+import type { INode } from '@/modules/storage/types';
+import { getMimeCategory, vfsUrl } from '@/modules/storage/helpers';
+
+export interface UseDefaultActionsProps {
+    mount: string;
+    mountProp: string;
+    pathProp: string;
+    accessToken?: string;
+
+    // Selection
+    selected: INode[];
+    sorted: INode[];
+    canGoUp: boolean;
+    setFocusIdx: (idx: number) => void;
+    setSelected: React.Dispatch<React.SetStateAction<INode[]>>;
+
+    // Preview
+    lightboxNode: INode | null;
+    setLightboxNode: (n: INode | null) => void;
+    textLightboxNode: INode | null;
+    setTextLightboxNode: (n: INode | null) => void;
+    iframeLightboxNode: INode | null;
+    setIframeLightboxNode: (n: INode | null) => void;
+    openPreview: (node: INode) => void;
+
+    // Navigation
+    updatePath: (path: string) => void;
+    setPendingFileSelect: (v: string | null) => void;
+
+    // Refs
+    containerRef: React.RefObject<HTMLDivElement | null>;
+
+    // Helpers from parent
+    getNode: (idx: number) => INode | null;
+    goUp: () => void;
+}
+
+/**
+ * Resolve a relative link `href` against a `basePath` within the VFS.
+ * Returns `{ dirPath, filename }` — `filename` is empty if the link points to a directory.
+ */
+export function resolveRelativeVfsLink(href: string, basePath: string): { dirPath: string; filename: string } | null {
+    try {
+        let bp = basePath;
+        if (!bp.startsWith('/')) bp = '/' + bp;
+        if (bp !== '/' && !bp.endsWith('/')) bp += '/';
+
+        const resolved = new URL(href, `http://dummy.local${bp}`);
+        let newPath = decodeURIComponent(resolved.pathname);
+
+        const parts = newPath.split('/');
+        const lastPart = parts[parts.length - 1];
+        let filename = '';
+
+        if (lastPart && lastPart.includes('.') && !newPath.endsWith('/')) {
+            filename = lastPart;
+            parts.pop();
+            newPath = parts.join('/') || '/';
+        }
+
+        if (newPath !== '/' && newPath.endsWith('/')) {
+            newPath = newPath.slice(0, -1);
+        }
+
+        return { dirPath: newPath, filename };
+    } catch {
+        return null;
+    }
+}
+
+export function useDefaultActions({
+    mount,
+    mountProp,
+    pathProp,
+    accessToken,
+    selected,
+    sorted,
+    canGoUp,
+    setFocusIdx,
+    setSelected,
+    lightboxNode,
+    setLightboxNode,
+    textLightboxNode,
+    setTextLightboxNode,
+    iframeLightboxNode,
+    setIframeLightboxNode,
+    openPreview,
+    updatePath,
+    setPendingFileSelect,
+    containerRef,
+    getNode,
+    goUp,
+}: UseDefaultActionsProps) {
+
+    const selectedFile = selected.length === 1 && getMimeCategory(selected[0]) !== 'dir' ? selected[0] : null;
+
+    // ── File URL builder ─────────────────────────────────────────
+    const getFileUrl = useCallback((node: INode) => {
+        const tokenParam = accessToken ? `token=${encodeURIComponent(accessToken)}` : '';
+        const base = vfsUrl('get', mountProp, node.path);
+        let url = tokenParam ? `${base}?${tokenParam}` : base;
+        if (node.mtime) {
+            url += (url.includes('?') ? '&' : '?') + `t=${node.mtime}`;
+        }
+        return url;
+    }, [accessToken, mountProp]);
+
+    // ── View in new tab ──────────────────────────────────────────
+    const handleView = useCallback(() => {
+        if (selected.length === 1) window.open(getFileUrl(selected[0]), '_blank');
+    }, [selected, getFileUrl]);
+
+    // ── Download handler ─────────────────────────────────────────
+    const handleDownload = useCallback(() => {
+        if (selected.length === 0) return;
+        if (selected.length === 1) {
+            const first = selected[0];
+            const cat = getMimeCategory(first);
+            if (cat === 'dir') {
+                const clean = first.path.replace(/^\/+/, '');
+                let url = vfsUrl('compress', mount, clean);
+                if (accessToken) url += `?token=${encodeURIComponent(accessToken)}`;
+                window.location.href = url;
+                return;
+            }
+            if (selectedFile) {
+                const clean = selectedFile.path.replace(/^\/+/, '');
+                let url = vfsUrl('get', mount, clean);
+                if (accessToken) url += `?token=${encodeURIComponent(accessToken)}`;
+                if (selectedFile.mtime) url += (url.includes('?') ? '&' : '?') + `t=${selectedFile.mtime}`;
+                url += (url.includes('?') ? '&' : '?') + 'download=1';
+                window.location.href = url;
+            }
+            return;
+        }
+
+        // Multiple selection: batch zip
+        const cleanPath = pathProp.replace(/^\/+/, '');
+        let url = vfsUrl('compress', mount, cleanPath);
+        if (accessToken) {
+            url += `?token=${encodeURIComponent(accessToken)}`;
+        }
+        url += '&files=' + encodeURIComponent(selected.map(n => n.name).join(','));
+        window.location.href = url;
+    }, [selected, selectedFile, mount, mountProp, pathProp, accessToken]);
+
+    // ── Download directory as zip ────────────────────────────────
+    const handleDownloadDir = useCallback(() => {
+        const cleanPath = pathProp.replace(/^\/+/, '');
+        let url = vfsUrl('compress', mount, cleanPath);
+        if (accessToken) {
+            url += `?token=${encodeURIComponent(accessToken)}`;
+        }
+        window.location.href = url;
+    }, [mount, pathProp, accessToken]);
+
+    // ── Lightbox navigation ──────────────────────────────────────
+    const mediaNodes = useMemo(
+        () => sorted.filter(n => { const c = getMimeCategory(n); return c === 'image' || c === 'video'; }),
+        [sorted]
+    );
+    const lightboxIdx = lightboxNode ? mediaNodes.findIndex(n => n.path === lightboxNode.path) : -1;
+
+    const lightboxPrev = useCallback(() => {
+        if (lightboxIdx > 0) setLightboxNode(mediaNodes[lightboxIdx - 1]);
+    }, [lightboxIdx, mediaNodes, setLightboxNode]);
+
+    const lightboxNext = useCallback(() => {
+        if (lightboxIdx < mediaNodes.length - 1) setLightboxNode(mediaNodes[lightboxIdx + 1]);
+    }, [lightboxIdx, mediaNodes, setLightboxNode]);
+
+    // ── Close lightboxes (restore focus + selection) ─────────────
+    const restoreFocusAfterLightbox = useCallback((node: INode | null, closer: (n: null) => void) => {
+        if (node) {
+            const idx = sorted.indexOf(node);
+            if (idx >= 0) {
+                setFocusIdx(canGoUp ? idx + 1 : idx);
+                setSelected([node]);
+            }
+        }
+        closer(null);
+        setTimeout(() => containerRef.current?.focus(), 0);
+    }, [sorted, canGoUp, setFocusIdx, setSelected, containerRef]);
+
+    const closeLightbox = useCallback(
+        () => restoreFocusAfterLightbox(lightboxNode, setLightboxNode),
+        [restoreFocusAfterLightbox, lightboxNode, setLightboxNode]
+    );
+
+    const closeTextLightbox = useCallback(
+        () => restoreFocusAfterLightbox(textLightboxNode, setTextLightboxNode),
+        [restoreFocusAfterLightbox, textLightboxNode, setTextLightboxNode]
+    );
+
+    const closeIframeLightbox = useCallback(
+        () => restoreFocusAfterLightbox(iframeLightboxNode, setIframeLightboxNode),
+        [restoreFocusAfterLightbox, iframeLightboxNode, setIframeLightboxNode]
+    );
+
+    // ── Double-click handler ─────────────────────────────────────
+    const handleDoubleClick = useCallback((idx: number) => {
+        const node = getNode(idx);
+        if (!node) { goUp(); return; }
+        if (getMimeCategory(node) === 'dir') {
+            updatePath(node.path || node.name);
+        } else {
+            openPreview(node);
+        }
+    }, [getNode, goUp, updatePath, openPreview]);
+
+    // ── Unified link-click handler (for readme/file-viewer panes) ─
+    const handleLinkClick = useCallback((href: string, e: React.MouseEvent, basePath: string) => {
+        const isExternal = href.startsWith('http://') || href.startsWith('https://') || href.startsWith('mailto:') || href.startsWith('tel:') || href.startsWith('data:') || href.startsWith('#');
+        if (isExternal) return;
+
+        e.preventDefault();
+        const result = resolveRelativeVfsLink(href, basePath);
+        if (!result) {
+            console.error("Failed to resolve relative link:", href);
+            return;
+        }
+
+        if (result.filename) {
+            setPendingFileSelect(result.filename);
+        }
+        updatePath(result.dirPath);
+    }, [updatePath, setPendingFileSelect]);
+
+    return {
+        selectedFile,
+        getFileUrl,
+        handleView,
+        handleDownload,
+        handleDownloadDir,
+        mediaNodes,
+        lightboxIdx,
+        lightboxPrev,
+        lightboxNext,
+        closeLightbox,
+        closeTextLightbox,
+        closeIframeLightbox,
+        handleDoubleClick,
+        handleLinkClick
+    };
+}
diff --git a/packages/ui/src/modules/storage/hooks/useDefaultKeyboardHandler.ts b/packages/ui/src/modules/storage/hooks/useDefaultKeyboardHandler.ts
index c13d59b4..49971893 100644
--- a/packages/ui/src/modules/storage/hooks/useDefaultKeyboardHandler.ts
+++ b/packages/ui/src/modules/storage/hooks/useDefaultKeyboardHandler.ts
@@ -1,206 +1,206 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import type { INode, SortKey } from '@/modules/storage/types';
-import { useKeyboardNavigation } from './useKeyboardNavigation';
-
-export interface UseDefaultKeyboardHandlerProps {
-    // Core selection state (from useSelection)
-    focusIdx: number;
-    setFocusIdx: (idx: number) => void;
-    selected: INode[];
-    setSelected: React.Dispatch<React.SetStateAction<INode[]>>;
-    itemCount: number;
-    getNode: (idx: number) => INode | null;
-    clearSelection: () => void;
-
-    // Navigation
-    canGoUp: boolean;
-    goUp: () => void;
-    updatePath: (path: string) => void;
-    openPreview: (node: INode) => void;
-
-    // View / display
-    viewMode: 'list' | 'thumbs' | 'tree';
-    setViewMode: (m: 'list' | 'thumbs' | 'tree') => void;
-    setDisplayMode: (m: 'simple' | 'advanced') => void;
-    currentGlob: string;
-    showFolders: boolean;
-    cycleSort: () => void;
-
-    // Filter dialog controls
-    setTempGlob: (glob: string) => void;
-    setTempShowFolders: (val: boolean) => void;
-    setFilterDialogOpen: (open: boolean) => void;
-
-    // Refs
-    containerRef: React.RefObject<HTMLDivElement | null>;
-
-    // Externally provided utilities (to avoid circular deps)
-    scrollItemIntoView: (idx: number) => void;
-    getGridCols: () => number;
-
-    // Options
-    autoFocus?: boolean;
-    allowFallback?: boolean;
-    currentPath: string;
-
-    // External search query callback (for inline search mode)
-    onSearchQueryChange?: (q: string) => void;
-    searchQuery?: string;
-    isSearchMode?: boolean;
-
-    // External onSelect for pending search selection
-    onSelect?: (nodes: INode[] | INode | null) => void;
-    sorted: INode[];
-}
-
-export function useDefaultKeyboardHandler({
-    focusIdx,
-    setFocusIdx,
-    selected,
-    setSelected,
-    itemCount,
-    getNode,
-    clearSelection,
-    canGoUp,
-    goUp,
-    updatePath,
-    openPreview,
-    viewMode,
-    setViewMode,
-    setDisplayMode,
-    currentGlob,
-    showFolders,
-    cycleSort,
-    setTempGlob,
-    setTempShowFolders,
-    setFilterDialogOpen,
-    containerRef,
-    scrollItemIntoView,
-    getGridCols,
-    autoFocus = true,
-    allowFallback = true,
-    currentPath,
-    onSearchQueryChange,
-    searchQuery,
-    isSearchMode,
-    onSelect,
-    sorted,
-}: UseDefaultKeyboardHandlerProps) {
-
-    // ── Search state ─────────────────────────────────────────────
-    const searchBufferRef = useRef<string>('');
-    const [searchDisplay, setSearchDisplay] = useState('');
-    const [searchOpen, setSearchOpen] = useState(false);
-    const [pendingSearchSelection, setPendingSearchSelection] = useState<string | null>(null);
-
-    // Clear typeahead buffer on directory change
-    useEffect(() => {
-        searchBufferRef.current = '';
-        setSearchDisplay('');
-    }, [currentPath]);
-
-    // ── Global keyboard shortcut for search (Ctrl+F / F3) ────────
-    useEffect(() => {
-        const handleGlobalKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'F3' || ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f')) {
-                const panels = document.querySelectorAll('.fb-panel-container');
-                const isOnlyPanel = panels.length === 1;
-                const iAmActive = containerRef.current?.hasAttribute('data-active-panel');
-                const noActivePanels = !document.querySelector('.fb-panel-container[data-active-panel]');
-                const iAmFirst = panels[0] === containerRef.current;
-
-                if (isOnlyPanel || iAmActive || (noActivePanels && iAmFirst)) {
-                    setSearchOpen(true);
-                    e.preventDefault();
-                }
-            }
-        };
-
-        window.addEventListener('keydown', handleGlobalKeyDown, { capture: true });
-        return () => window.removeEventListener('keydown', handleGlobalKeyDown, { capture: true });
-    }, []);
-
-    // ── Resolve pending selection from search ────────────────────
-    useEffect(() => {
-        if (pendingSearchSelection && sorted.length > 0) {
-            const idx = sorted.findIndex(n => n.name === pendingSearchSelection);
-            if (idx >= 0) {
-                const newFocusIdx = canGoUp ? idx + 1 : idx;
-                setFocusIdx(newFocusIdx);
-                const newlySelected = [sorted[idx]];
-                setSelected(newlySelected);
-                setPendingSearchSelection(null);
-
-                if (onSelect) {
-                    onSelect(newlySelected);
-                }
-
-                requestAnimationFrame(() => scrollItemIntoView(newFocusIdx));
-            }
-        }
-    }, [sorted, pendingSearchSelection, canGoUp, scrollItemIntoView, onSelect]);
-
-    // ── Wire up the core keyboard navigation hook ────────────────
-    const { handleKeyDown } = useKeyboardNavigation({
-        viewMode,
-        itemCount,
-        focusIdx,
-        setFocusIdx,
-        selected,
-        setSelected,
-        getNode,
-        canGoUp,
-        goUp,
-        updatePath,
-        openPreview,
-        scrollItemIntoView,
-        getGridCols,
-        currentGlob,
-        showFolders,
-        setTempGlob,
-        setTempShowFolders,
-        setFilterDialogOpen,
-        setViewMode,
-        setDisplayMode,
-        cycleSort,
-        searchBufferRef,
-        setSearchDisplay,
-        clearSelection
-    });
-
-    // ── Focus management on view mode change ─────────────────────
-    const prevViewModeRef = useRef(viewMode);
-    useEffect(() => {
-        if (viewMode !== prevViewModeRef.current) {
-            prevViewModeRef.current = viewMode;
-            const timeout = setTimeout(() => {
-                if (!containerRef.current) return;
-                const active = document.activeElement;
-                if (active?.tagName === 'INPUT' || active?.closest('[role="dialog"]')) return;
-
-                if (viewMode === 'tree') {
-                    const treeEl = containerRef.current.querySelector('.fb-tree-container') as HTMLElement;
-                    if (treeEl) treeEl.focus({ preventScroll: true });
-                } else {
-                    containerRef.current.focus({ preventScroll: true });
-                    scrollItemIntoView(focusIdx);
-                }
-            }, 50);
-            return () => clearTimeout(timeout);
-        } else if (allowFallback) {
-            const active = document.activeElement;
-            if (active?.tagName === 'INPUT' || active?.closest('[role="dialog"]')) return;
-            containerRef.current?.focus({ preventScroll: true });
-        }
-    }, [viewMode, currentPath, allowFallback, focusIdx, scrollItemIntoView]);
-
-    return {
-        searchOpen,
-        setSearchOpen,
-        searchDisplay,
-        searchBufferRef,
-        pendingSearchSelection,
-        setPendingSearchSelection,
-        handleKeyDown
-    };
-}
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import type { INode, SortKey } from '@/modules/storage/types';
+import { useKeyboardNavigation } from './useKeyboardNavigation';
+
+export interface UseDefaultKeyboardHandlerProps {
+    // Core selection state (from useSelection)
+    focusIdx: number;
+    setFocusIdx: (idx: number) => void;
+    selected: INode[];
+    setSelected: React.Dispatch<React.SetStateAction<INode[]>>;
+    itemCount: number;
+    getNode: (idx: number) => INode | null;
+    clearSelection: () => void;
+
+    // Navigation
+    canGoUp: boolean;
+    goUp: () => void;
+    updatePath: (path: string) => void;
+    openPreview: (node: INode) => void;
+
+    // View / display
+    viewMode: 'list' | 'thumbs' | 'tree';
+    setViewMode: (m: 'list' | 'thumbs' | 'tree') => void;
+    setDisplayMode: (m: 'simple' | 'advanced') => void;
+    currentGlob: string;
+    showFolders: boolean;
+    cycleSort: () => void;
+
+    // Filter dialog controls
+    setTempGlob: (glob: string) => void;
+    setTempShowFolders: (val: boolean) => void;
+    setFilterDialogOpen: (open: boolean) => void;
+
+    // Refs
+    containerRef: React.RefObject<HTMLDivElement | null>;
+
+    // Externally provided utilities (to avoid circular deps)
+    scrollItemIntoView: (idx: number) => void;
+    getGridCols: () => number;
+
+    // Options
+    autoFocus?: boolean;
+    allowFallback?: boolean;
+    currentPath: string;
+
+    // External search query callback (for inline search mode)
+    onSearchQueryChange?: (q: string) => void;
+    searchQuery?: string;
+    isSearchMode?: boolean;
+
+    // External onSelect for pending search selection
+    onSelect?: (nodes: INode[] | INode | null) => void;
+    sorted: INode[];
+}
+
+export function useDefaultKeyboardHandler({
+    focusIdx,
+    setFocusIdx,
+    selected,
+    setSelected,
+    itemCount,
+    getNode,
+    clearSelection,
+    canGoUp,
+    goUp,
+    updatePath,
+    openPreview,
+    viewMode,
+    setViewMode,
+    setDisplayMode,
+    currentGlob,
+    showFolders,
+    cycleSort,
+    setTempGlob,
+    setTempShowFolders,
+    setFilterDialogOpen,
+    containerRef,
+    scrollItemIntoView,
+    getGridCols,
+    autoFocus = true,
+    allowFallback = true,
+    currentPath,
+    onSearchQueryChange,
+    searchQuery,
+    isSearchMode,
+    onSelect,
+    sorted,
+}: UseDefaultKeyboardHandlerProps) {
+
+    // ── Search state ─────────────────────────────────────────────
+    const searchBufferRef = useRef<string>('');
+    const [searchDisplay, setSearchDisplay] = useState('');
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [pendingSearchSelection, setPendingSearchSelection] = useState<string | null>(null);
+
+    // Clear typeahead buffer on directory change
+    useEffect(() => {
+        searchBufferRef.current = '';
+        setSearchDisplay('');
+    }, [currentPath]);
+
+    // ── Global keyboard shortcut for search (Ctrl+F / F3) ────────
+    useEffect(() => {
+        const handleGlobalKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'F3' || ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f')) {
+                const panels = document.querySelectorAll('.fb-panel-container');
+                const isOnlyPanel = panels.length === 1;
+                const iAmActive = containerRef.current?.hasAttribute('data-active-panel');
+                const noActivePanels = !document.querySelector('.fb-panel-container[data-active-panel]');
+                const iAmFirst = panels[0] === containerRef.current;
+
+                if (isOnlyPanel || iAmActive || (noActivePanels && iAmFirst)) {
+                    setSearchOpen(true);
+                    e.preventDefault();
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleGlobalKeyDown, { capture: true });
+        return () => window.removeEventListener('keydown', handleGlobalKeyDown, { capture: true });
+    }, []);
+
+    // ── Resolve pending selection from search ────────────────────
+    useEffect(() => {
+        if (pendingSearchSelection && sorted.length > 0) {
+            const idx = sorted.findIndex(n => n.name === pendingSearchSelection);
+            if (idx >= 0) {
+                const newFocusIdx = canGoUp ? idx + 1 : idx;
+                setFocusIdx(newFocusIdx);
+                const newlySelected = [sorted[idx]];
+                setSelected(newlySelected);
+                setPendingSearchSelection(null);
+
+                if (onSelect) {
+                    onSelect(newlySelected);
+                }
+
+                requestAnimationFrame(() => scrollItemIntoView(newFocusIdx));
+            }
+        }
+    }, [sorted, pendingSearchSelection, canGoUp, scrollItemIntoView, onSelect]);
+
+    // ── Wire up the core keyboard navigation hook ────────────────
+    const { handleKeyDown } = useKeyboardNavigation({
+        viewMode,
+        itemCount,
+        focusIdx,
+        setFocusIdx,
+        selected,
+        setSelected,
+        getNode,
+        canGoUp,
+        goUp,
+        updatePath,
+        openPreview,
+        scrollItemIntoView,
+        getGridCols,
+        currentGlob,
+        showFolders,
+        setTempGlob,
+        setTempShowFolders,
+        setFilterDialogOpen,
+        setViewMode,
+        setDisplayMode,
+        cycleSort,
+        searchBufferRef,
+        setSearchDisplay,
+        clearSelection
+    });
+
+    // ── Focus management on view mode change ─────────────────────
+    const prevViewModeRef = useRef(viewMode);
+    useEffect(() => {
+        if (viewMode !== prevViewModeRef.current) {
+            prevViewModeRef.current = viewMode;
+            const timeout = setTimeout(() => {
+                if (!containerRef.current) return;
+                const active = document.activeElement;
+                if (active?.tagName === 'INPUT' || active?.closest('[role="dialog"]')) return;
+
+                if (viewMode === 'tree') {
+                    const treeEl = containerRef.current.querySelector('.fb-tree-container') as HTMLElement;
+                    if (treeEl) treeEl.focus({ preventScroll: true });
+                } else {
+                    containerRef.current.focus({ preventScroll: true });
+                    scrollItemIntoView(focusIdx);
+                }
+            }, 50);
+            return () => clearTimeout(timeout);
+        } else if (allowFallback) {
+            const active = document.activeElement;
+            if (active?.tagName === 'INPUT' || active?.closest('[role="dialog"]')) return;
+            containerRef.current?.focus({ preventScroll: true });
+        }
+    }, [viewMode, currentPath, allowFallback, focusIdx, scrollItemIntoView]);
+
+    return {
+        searchOpen,
+        setSearchOpen,
+        searchDisplay,
+        searchBufferRef,
+        pendingSearchSelection,
+        setPendingSearchSelection,
+        handleKeyDown
+    };
+}
diff --git a/packages/ui/src/modules/storage/hooks/useDefaultSelectionHandler.ts b/packages/ui/src/modules/storage/hooks/useDefaultSelectionHandler.ts
index df813f3c..3c3f311b 100644
--- a/packages/ui/src/modules/storage/hooks/useDefaultSelectionHandler.ts
+++ b/packages/ui/src/modules/storage/hooks/useDefaultSelectionHandler.ts
@@ -1,160 +1,160 @@
-import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
-import type { INode } from '@/modules/storage/types';
-
-export interface UseDefaultSelectionHandlerProps {
-    sorted: INode[];
-    canGoUp: boolean;
-    rawGoUp: () => void;
-    currentPath: string;
-    loading: boolean;
-    viewMode: 'list' | 'thumbs' | 'tree';
-    autoFocus?: boolean;
-    index?: boolean;
-    isSearchMode?: boolean;
-    initialFile?: string;
-    allowFallback?: boolean;
-
-    // Selection setters (from useSelection)
-    setFocusIdx: (idx: number) => void;
-    setSelected: React.Dispatch<React.SetStateAction<INode[]>>;
-
-    // External onSelect
-    onSelect?: (nodes: INode[] | INode | null) => void;
-
-    // Pending file select from keyboard handler
-    pendingFileSelect: string | null;
-    setPendingFileSelect: (v: string | null) => void;
-
-    // Scroll helper
-    scrollItemIntoView: (idx: number) => void;
-
-    // Refs
-    containerRef: React.RefObject<HTMLDivElement | null>;
-    listRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export function useDefaultSelectionHandler({
-    sorted,
-    canGoUp,
-    rawGoUp,
-    currentPath,
-    loading,
-    viewMode,
-    autoFocus = true,
-    index = true,
-    isSearchMode = false,
-    initialFile,
-    allowFallback = true,
-    setFocusIdx,
-    setSelected,
-    onSelect,
-    pendingFileSelect,
-    setPendingFileSelect,
-    scrollItemIntoView,
-    containerRef,
-    listRef,
-}: UseDefaultSelectionHandlerProps) {
-
-    // ── Return target (go-up → re-select the dir we came from) ───
-    const returnTargetRef = useRef<string | null>(null);
-    const autoOpenedRef = useRef(false);
-    const lastSortedRef = useRef<INode[] | null>(null);
-
-    const goUp = useCallback(() => {
-        if (!canGoUp) return;
-        const parts = currentPath.split('/').filter(Boolean);
-        const currentDirName = parts[parts.length - 1];
-        if (currentDirName) {
-            returnTargetRef.current = currentDirName;
-        }
-        rawGoUp();
-    }, [canGoUp, currentPath, rawGoUp]);
-
-    // ── Focus / Auto-Select Engine (runs after content mounts) ───
-    // Only runs the full auto-select (readme, first-item) when sorted
-    // *actually changes* (i.e. a new directory was loaded).  This prevents
-    // the effect from snapping the selection back to readme.md when an
-    // unrelated state update (e.g. pendingFileSelect → null) re-fires it.
-    useLayoutEffect(() => {
-        if (loading || sorted.length === 0) return;
-
-        const isNewListing = sorted !== lastSortedRef.current;
-        lastSortedRef.current = sorted;
-
-        // If the listing hasn't changed, nothing to auto-select.
-        if (!isNewListing && !returnTargetRef.current) return;
-
-        let targetIdx = 0;
-        const target = returnTargetRef.current;
-
-        if (target) {
-            const idx = sorted.findIndex(n => n.name === target);
-            if (idx >= 0) {
-                targetIdx = canGoUp ? idx + 1 : idx;
-                setSelected([sorted[idx]]);
-            }
-            returnTargetRef.current = null;
-        } else {
-            let readmeIdx = -1;
-            const hasPendingInitial = (!autoOpenedRef.current && initialFile) || pendingFileSelect;
-
-            if (index && !isSearchMode && !hasPendingInitial) {
-                readmeIdx = sorted.findIndex(n => n.name.toLowerCase() === 'readme.md');
-            }
-
-            if (readmeIdx >= 0) {
-                targetIdx = canGoUp ? readmeIdx + 1 : readmeIdx;
-                setSelected([sorted[readmeIdx]]);
-            } else {
-                setSelected(canGoUp || !allowFallback ? [] : [sorted[0]]);
-            }
-        }
-
-        setFocusIdx(targetIdx);
-
-        const active = document.activeElement;
-        const safeToFocus = autoFocus && active?.tagName !== 'INPUT' && !active?.closest('[role="dialog"]');
-
-        if (safeToFocus) {
-            if (viewMode === 'tree') {
-                const treeEl = containerRef.current?.querySelector('.fb-tree-container') as HTMLElement;
-                treeEl?.focus({ preventScroll: true });
-            } else {
-                containerRef.current?.focus({ preventScroll: true });
-                if (listRef.current) {
-                    const el = listRef.current.querySelector(`[data-fb-idx="${targetIdx}"]`) as HTMLElement;
-                    el?.scrollIntoView({ block: 'nearest' });
-                }
-            }
-        }
-    }, [sorted, canGoUp, loading, viewMode, autoFocus, index, isSearchMode, initialFile, pendingFileSelect, allowFallback]);
-
-    // ── Auto-open ?file= on initial load ─────────────────────────
-    useEffect(() => {
-        const fileToOpen = pendingFileSelect || (!autoOpenedRef.current && initialFile ? initialFile : null);
-        if (!fileToOpen || sorted.length === 0) return;
-
-        const target = sorted.find(n => n.name === fileToOpen);
-        if (!target) return;
-
-        if (!pendingFileSelect) {
-            autoOpenedRef.current = true;
-        } else {
-            setPendingFileSelect(null);
-        }
-
-        const idx = sorted.indexOf(target);
-        if (idx >= 0) {
-            const newFocusIdx = canGoUp ? idx + 1 : idx;
-            setFocusIdx(newFocusIdx);
-            const newlySelected = [target];
-            setSelected(newlySelected);
-            if (onSelect) {
-                onSelect(newlySelected);
-            }
-            requestAnimationFrame(() => scrollItemIntoView(newFocusIdx));
-        }
-    }, [sorted, initialFile, pendingFileSelect, canGoUp, scrollItemIntoView, onSelect]);
-
-    return { goUp };
-}
+import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
+import type { INode } from '@/modules/storage/types';
+
+export interface UseDefaultSelectionHandlerProps {
+    sorted: INode[];
+    canGoUp: boolean;
+    rawGoUp: () => void;
+    currentPath: string;
+    loading: boolean;
+    viewMode: 'list' | 'thumbs' | 'tree';
+    autoFocus?: boolean;
+    index?: boolean;
+    isSearchMode?: boolean;
+    initialFile?: string;
+    allowFallback?: boolean;
+
+    // Selection setters (from useSelection)
+    setFocusIdx: (idx: number) => void;
+    setSelected: React.Dispatch<React.SetStateAction<INode[]>>;
+
+    // External onSelect
+    onSelect?: (nodes: INode[] | INode | null) => void;
+
+    // Pending file select from keyboard handler
+    pendingFileSelect: string | null;
+    setPendingFileSelect: (v: string | null) => void;
+
+    // Scroll helper
+    scrollItemIntoView: (idx: number) => void;
+
+    // Refs
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    listRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export function useDefaultSelectionHandler({
+    sorted,
+    canGoUp,
+    rawGoUp,
+    currentPath,
+    loading,
+    viewMode,
+    autoFocus = true,
+    index = true,
+    isSearchMode = false,
+    initialFile,
+    allowFallback = true,
+    setFocusIdx,
+    setSelected,
+    onSelect,
+    pendingFileSelect,
+    setPendingFileSelect,
+    scrollItemIntoView,
+    containerRef,
+    listRef,
+}: UseDefaultSelectionHandlerProps) {
+
+    // ── Return target (go-up → re-select the dir we came from) ───
+    const returnTargetRef = useRef<string | null>(null);
+    const autoOpenedRef = useRef(false);
+    const lastSortedRef = useRef<INode[] | null>(null);
+
+    const goUp = useCallback(() => {
+        if (!canGoUp) return;
+        const parts = currentPath.split('/').filter(Boolean);
+        const currentDirName = parts[parts.length - 1];
+        if (currentDirName) {
+            returnTargetRef.current = currentDirName;
+        }
+        rawGoUp();
+    }, [canGoUp, currentPath, rawGoUp]);
+
+    // ── Focus / Auto-Select Engine (runs after content mounts) ───
+    // Only runs the full auto-select (readme, first-item) when sorted
+    // *actually changes* (i.e. a new directory was loaded).  This prevents
+    // the effect from snapping the selection back to readme.md when an
+    // unrelated state update (e.g. pendingFileSelect → null) re-fires it.
+    useLayoutEffect(() => {
+        if (loading || sorted.length === 0) return;
+
+        const isNewListing = sorted !== lastSortedRef.current;
+        lastSortedRef.current = sorted;
+
+        // If the listing hasn't changed, nothing to auto-select.
+        if (!isNewListing && !returnTargetRef.current) return;
+
+        let targetIdx = 0;
+        const target = returnTargetRef.current;
+
+        if (target) {
+            const idx = sorted.findIndex(n => n.name === target);
+            if (idx >= 0) {
+                targetIdx = canGoUp ? idx + 1 : idx;
+                setSelected([sorted[idx]]);
+            }
+            returnTargetRef.current = null;
+        } else {
+            let readmeIdx = -1;
+            const hasPendingInitial = (!autoOpenedRef.current && initialFile) || pendingFileSelect;
+
+            if (index && !isSearchMode && !hasPendingInitial) {
+                readmeIdx = sorted.findIndex(n => n.name.toLowerCase() === 'readme.md');
+            }
+
+            if (readmeIdx >= 0) {
+                targetIdx = canGoUp ? readmeIdx + 1 : readmeIdx;
+                setSelected([sorted[readmeIdx]]);
+            } else {
+                setSelected(canGoUp || !allowFallback ? [] : [sorted[0]]);
+            }
+        }
+
+        setFocusIdx(targetIdx);
+
+        const active = document.activeElement;
+        const safeToFocus = autoFocus && active?.tagName !== 'INPUT' && !active?.closest('[role="dialog"]');
+
+        if (safeToFocus) {
+            if (viewMode === 'tree') {
+                const treeEl = containerRef.current?.querySelector('.fb-tree-container') as HTMLElement;
+                treeEl?.focus({ preventScroll: true });
+            } else {
+                containerRef.current?.focus({ preventScroll: true });
+                if (listRef.current) {
+                    const el = listRef.current.querySelector(`[data-fb-idx="${targetIdx}"]`) as HTMLElement;
+                    el?.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        }
+    }, [sorted, canGoUp, loading, viewMode, autoFocus, index, isSearchMode, initialFile, pendingFileSelect, allowFallback]);
+
+    // ── Auto-open ?file= on initial load ─────────────────────────
+    useEffect(() => {
+        const fileToOpen = pendingFileSelect || (!autoOpenedRef.current && initialFile ? initialFile : null);
+        if (!fileToOpen || sorted.length === 0) return;
+
+        const target = sorted.find(n => n.name === fileToOpen);
+        if (!target) return;
+
+        if (!pendingFileSelect) {
+            autoOpenedRef.current = true;
+        } else {
+            setPendingFileSelect(null);
+        }
+
+        const idx = sorted.indexOf(target);
+        if (idx >= 0) {
+            const newFocusIdx = canGoUp ? idx + 1 : idx;
+            setFocusIdx(newFocusIdx);
+            const newlySelected = [target];
+            setSelected(newlySelected);
+            if (onSelect) {
+                onSelect(newlySelected);
+            }
+            requestAnimationFrame(() => scrollItemIntoView(newFocusIdx));
+        }
+    }, [sorted, initialFile, pendingFileSelect, canGoUp, scrollItemIntoView, onSelect]);
+
+    return { goUp };
+}
diff --git a/packages/ui/src/modules/storage/views/ThreeDViewer.tsx b/packages/ui/src/modules/storage/views/ThreeDViewer.tsx
index c65d2a11..d5143a6e 100644
--- a/packages/ui/src/modules/storage/views/ThreeDViewer.tsx
+++ b/packages/ui/src/modules/storage/views/ThreeDViewer.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState, useRef } from 'react';
+import React, { Suspense, useEffect, useState, useRef } from 'react';
 import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import { OrbitControls, Bounds, Center, useBounds, Edges } from '@react-three/drei';
 import { Loader2, Cuboid, Grid3x3, BoxSelect, MousePointer2, Move, ZoomIn, Maximize, Minimize, ListTree, ChevronRight, ChevronDown, Eye, EyeOff, Sun, Lightbulb } from 'lucide-react';
@@ -114,7 +114,7 @@ function useModelGeometry(url: string, extension: string) {
     return { geometry, error, isLoading };
 }
 
-// ── Dynamic Headlight ────────────────────────────────────
+// -- Dynamic Headlight ------------------------------------
 const Headlight: React.FC<{ enabled: boolean }> = ({ enabled }) => {
     const lightRef = useRef<THREE.SpotLight>(null);
     const { camera } = useThree();
@@ -130,7 +130,7 @@ const Headlight: React.FC<{ enabled: boolean }> = ({ enabled }) => {
     return <spotLight ref={lightRef} intensity={2} angle={Math.PI / 4} penumbra={0.5} decay={1} distance={1000} castShadow />;
 };
 
-// ── Model Renderer ───────────────────────────────────────
+// -- Model Renderer ---------------------------------------
 const ModelRenderer: React.FC<{ geometry: THREE.BufferGeometry | THREE.Group | null; error: string | null; renderMode: 'solid' | 'wireframe' | 'edges'; hiddenNodes: Set<string> }> = ({ geometry, error, renderMode, hiddenNodes }) => {
     const bounds = useBounds();
     const groupRef = useRef<THREE.Group>(null);
@@ -237,7 +237,7 @@ const ModelRenderer: React.FC<{ geometry: THREE.BufferGeometry | THREE.Group | n
     );
 };
 
-// ── Model Tree ───────────────────────────────────────
+// -- Model Tree ---------------------------------------
 const ModelTreeNode: React.FC<{ node: THREE.Object3D; depth: number; hiddenNodes: Set<string>; toggleNode: (uuid: string) => void }> = ({ node, depth, hiddenNodes, toggleNode }) => {
     const [expanded, setExpanded] = useState(depth < 2);
     const isHidden = hiddenNodes.has(node.uuid);
@@ -277,7 +277,7 @@ const ModelTreeNode: React.FC<{ node: THREE.Object3D; depth: number; hiddenNodes
     );
 };
 
-// ── DXF Native Layer ───────────────────────────────────────
+// -- DXF Native Layer ---------------------------------------
 const DxfNativeLayer: React.FC<{ url: string }> = ({ url }) => {
     const dxfRef = useRef<HTMLDivElement>(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -340,7 +340,7 @@ const DxfNativeLayer: React.FC<{ url: string }> = ({ url }) => {
     );
 };
 
-// ── Main Component ───────────────────────────────────────
+// -- Main Component ---------------------------------------
 const ThreeDViewer: React.FC<ThreeDViewerProps> = ({
     isOpen,
     url,